smart-admin/rc-busness/pages/userlogin/login.vue

<template>
  <div class="container rc-full-width">
    <Myheader></Myheader>
    <div class="rc-top"></div>
    <div class="content ts-max-width--460">
      <h2 class="rc-beta rc-text--center">{{ usertitle ? "账号登录" : "" }}</h2>
      <!-- Deprecated : No tab switching as no password
      <div class="rc-header">
        <span
          v-for="(item, index) in swiperData"
          :key="index"
          @click="selectGoods(item, index)"
          :class="activeIndex == index ? 'active' : 'unactive'"
          >{{ item.title }}</span
        >
      </div>
      -->
      <div class="rc-layout-container rc-one-column">
        <div class="rc-column">
          <input
              class="ts-standard-input"
              v-model="tel"
              placeholder="请输入手机号"
              :error-message="usertel"
              v-if="!ifpassword"
              clearable
          />
        </div>
      </div>
      <!-- Deprecated : No tab switching as no password
      <input
        v-model="text"
        class="ts-standard-input ts-standard-input--two"
        placeholder="请输入账号"

        v-if="ifpassword"
        clearable
      />

      <van-field
        v-model="password"
        type="password"
        placeholder="请输入密码"

        v-if="ifpassword"
        clearable
      />
      -->
      <div class="rc-layout-container rc-two-column">
        <div class="rc-column">
          <input
              v-if="!ifpassword"
              v-model="sms"
              class="ts-standard-input ts-standard-input--two center"
              center
              clearable
              placeholder="请输入验证码"

          >
        </div>
        <div class="rc-column">
          <button
              :disabled="flag"
              slot="button"
              size="small"
              @click="sendCode"
              class="rc-use ts-standard-btn ts-standard-btn--two"
          >{{ buttonmsg }}</button
          >
        </div>
      </div>

      <div class="rc-layout-container rc-one-column">
        <div class="usecheck rc-column rc-text--left">
          <label>
            <input
                type="checkbox"
                @click="checkBoxa($event,2)"
                v-model="isRank"
            />
             <strong>本人已年满16周岁,同意并接受公司按<a href="https://royalcanin.com.cn/privacy" target="_blank"><i>《隐私政策》</i></a>及<a href="https://royalcanin.com.cn/declaration" target="_blank"><i>《法律声明》</i></a>的规定收集和处理我的个人信息。
              您可以就隐私问题通过隐私政策中的方式联系我们并行使您的个人信息权利。</strong>
          </label>
        </div>
        <div class="usecheck rc-column rc-text--left">
          <label>
            <input
                type="checkbox"
                  @click="checkBoxa($event,1)"
                v-model="isRanka"
            />
            <strong>
            我已阅读和了解皇家爱宠荟的<a href="https://royalcanin.com.cn/member-principle" target="_blank"><i>《会员规则》</i></a>并同意接受其中所有的条框。</strong>
          </label>
        </div>
            <div class="usecheck rc-column rc-text--left">
          <label>
            <input
                type="checkbox"
               @click="checkBoxa($event,3)"
                v-model="allcheck"
            />
             <i>
            一键勾选
            </i>
          </label>
        </div>


      </div>
      <!-- <div class="rc-layout-container rc-two-column rc-button">
        <div class="rc-column rc-text--left">
          <a href="https://royalcanin.com.cn/privacy" target="_blank" class="rc-styled-link"><span>隐私政策</span></a>
        </div>
        <div class="rc-column rc-text--right">
          <nuxt-link :to="`/userlogin/edit/`" class="rc-styled-link">
            <span>注册账户</span>
          </nuxt-link>
        </div>
      </div> -->

      <div class="rc-layout-container rc-one-column" style="margin-top:45px">
        <div class="rc-column">
          <input
              type="primary"
              :loading="loading"
              loading-text="登录..."
              size="large"
              :disabled="zhud"
              @click="register()"
              class="ts-standard-btn ts-standard-btn--max-width"
              value="登录"
			  readonly
          ></input
          >
          <!-- <van-divider @click="toLogin">注册账户</van-divider> -->
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { userLongin,sendMsg,vadatnmsg,userregOrLogin,inserdiscount } from "../../ajax/getData";
import { mapMutations } from "vuex";
import Myheader from "~/components/header.vue"; //引用头部公共组件
export default {
  data() {
    return {
      phone: "",
      layerMSg: "手机格式不对",
      tel: "",
      password: "",
      userdata:{},
      allcheck:false,
      activeIndex: 0,
      tamp:'',
       radioData: [
    { value: '全部' ,href:'https://royalcanin.com.cn/privacy' },
    { value: '部分' ,href:''},
    { value: '零散' }
   ],
      hash:'',
      text: "",
      sms: "",
      buttonmsg: "获取验证码",
      flag: false,
      adminCode: "",
      captchadata:'',
      zhud: false,
      loading: false,
      usertitle: true,
      ifpassword: false,
      verification:'',//验证码数据
      userislogin:[],//登录成功数据
      checked: false,
      isRank: false,
      isRanka: false,
      usercheckbox:false,

      swiperData: [
        // { index: 1 ,title:'短信验证码登录'},
        // { index: 2 ,title:'密码登录'},
      ]
    };
  },
  components: {
    Myheader
  },
  computed: {
    usertel() {
      if (this.tel === "") {
        return "";
      } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)) {
        return "手机号格式错误";
      } else {
        return "";
      }
    },
    pass() {
      if (this.password === "") {
        return "";
      } else if (this.password.length < 6) {
        return "密码不可小于6位";
      } else {
        return "";
      }
    },
    test() {
      if (this.sms === "") {
        return "";
      } else if (this.sms.length !== 5) {
        return "验证码格式错误";
      } else {
        return "";
      }
    },
  },
  mounted() {
    //console.log(this.$route.params);
  },
  // watch: function () {
  //   console.log(this.inRank);
  // },
  methods: {
     ...mapMutations(["changeClod","checkIsLogin"]),
    //全选
    checkBoxa(e,order){
        let checked=e.target.checked;
        console.log(e.target.checked);
        // this.isRank=e.target.checked;
        // this.isRanka=e.target.checked;
        if(order==3){
          this.allcheck=checked;
        this.isRank=this.allcheck;
        this.isRanka=this.allcheck;
        }else if(order==2){
          this.isRank=e.target.checked;
        }
        else if(order==1){
          this.isRanka=e.target.checked;
        }
        console.log(this.isRank,this.isRanka);
        if(this.isRanka==true && this.isRank==true){
          this.allcheck=true;
        }else{
          this.allcheck=false;
        }
      //  console.log(this.isRanka,this.isRank);
      this.usercheckbox=this.allcheck;
    },
    //获取用户领取的优惠券
    async reglogin() {
      let data = await getConfig(memberId, couponId);
	  let msg = '领取成功';
      if (data) {
		if(data.code!='0')
			msg = data.msg;
		this.$message({
			type: "warning",
			message: msg,
		});
      }
    },
    //获取验证码
    async usermsg() {
      //console.log("-----");
      let data = await sendMsg(this.tel);
      if(data){
        console.log(data);
        //this.captchadata=data.msgNum;
        this.tamp=data.tamp;
        this.hash=data.hash;
      }

    },

    //添加优惠券
        async serdiscount (mobile,couponId) {
      let data = await inserdiscount(mobile,couponId);
      if(data){
        console.log(data);
      }
      //console.log(data);
    },

    //发送验证码数据
    async vadmsg() {
      //console.log("-----");
     let data = await vadatnmsg(this.sms,this.hash,this.tamp);
      if(data){
        return data;
      }
    
    },
       //登录成功数据
    async userlogin() {
      //console.log("-----");
      let data= await userregOrLogin(this.tel);
      if(data){
        this.userislogin=data;
        console.log(this.userislogin);
      }
    },


    onClickHander(e) {
      console.log(e);
    },
    selectGoods(item, index) {
      this.activeIndex = index;
      console.log(index);

      if (this.activeIndex == 0) {
        this.ifpassword = false;
      } else {
        this.ifpassword = true;
      }
    },
    //注册账户
    useredd() {
      //console.log("---注册账户");
      this.usertitle = false;
    },

    toLogin() {
      this.$router.replace("/login");
    },
    sendCode() {

      this.getCode();


    },
    getCode() {
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === "") {
        this.$message({
          type: 'warning',
          message: '手机号码输入有误'
        });
        return

      } else{
        let time = 60;
        let timer;
        timer = setInterval(() => {
          time--;
          if (time === 0) {
            clearInterval(timer);
            this.flag = false;
            this.buttonmsg = "点击发送验证码";
            return;
          }
          this.flag = true;
          this.buttonmsg = time + "秒后重新发送";
        }, 1000);
        this.usermsg();
      }
    },
    async register() {
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === "") {
        this.$message({
          type: 'warning',
          message: '手机号码输入有误'
        });
        return
      }
      if(this.sms==''){
        this.$message({
          type: 'warning',
          message: '请输入验证码'
        });
        return
      }
          if(this.usercheckbox==false){
        this.$message({
          type: 'warning',
          message: '请先勾选相关协议'
        });
        return
      }
      if(this.usercheckbox==false){
        //console.log('----');
        if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel === "") {
          this.$message({
            type: 'warning',
            message: '手机号码输入有误'
          });
            this.$message({
          type: 'warning',
          message: '请先同意隐私声明和账号使用协议'
        });
          return
        }
      }
      else{
        console.log('===')
       let data=await this.vadmsg();
        if(data.code=="1")
        {
               data = await userregOrLogin(this.tel);
               console.log(data);
           let token=JSON.stringify(data);
            this.changeClod({ cloud: token });
            this.checkIsLogin();
          if(data.type==1){
            if(data.data.memberName===undefined){
              this.$message({
              type: 'warning',
              message: '欢迎回来'
            });
            console.log('-----')
            }
            else{
              this.$message({
              type: 'warning',
              message: '欢迎回来'+data.data.memberName
            });
            }
          }else if(data.type==2){
                  this.$message({
              type: 'warning',
              message: '恭喜注册成功'
            });
                 let couponId='0000000123';
            this.serdiscount(this.tel,couponId);
            setTimeout(() => {
              this.serdiscount(this.tel,"0000000140");
            }, 100);
            setTimeout(() => {
              this.serdiscount(this.tel,"0000000122");
            }, 500);
          }
            this.$router.push({
              path: "/",
            });
        }else{
               this.$message({
          type: 'warning',
          message: data.msg,
        });
        return
        }
      }},
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/css/login.less");
</style>