program/src/components/index/regist.vue

<template>
  <div id="index_login_container" class="animation-slide-right">
    <view class="text-xl padding text-center">
      <img class="back regist_back_btn" @click="goIndex" src="https://img.shuimuai.com/fanhui.png"/>
      <text class=" text-bold title_color">会员{{ title }}</text>
    </view>
    <view class="text-df text-center slogen">请输入手机号码，以便更好的享受我们的服务</view>
    <div class="register_form_container text-center">
      <form action="">
        <view class="cu-form-group">
          <view class="title">手机号码</view>
          <input placeholder="请输入手机号" v-model="phone" maxlength="11" @input="check_auth"/>
          <view class="cu-capsule radius">
            <view class='cu-tag bg-blue '>
              +86
            </view>
            <view class="cu-tag line-blue">
              中国大陆
            </view>
          </view>
        </view>
        <view class="cu-form-group">
          <view class="title">验证码</view>
          <input placeholder="输入验证码" name="input" v-model="verfiy_code" maxlength="6" @input="check_auth" clearable/>
          <button class='cu-btn bg-primary text-white shadow' :disabled="time_show" @click="get_verify_code">
            <van-count-down v-if="time_show" :auto-start="time_start" class="control-count-down" @finish="time_finished"
                            :time="time_count * 1000" format="ss"/>
            <text>获取验证码</text>
          </button>
        </view>
      </form>
    </div>

    <div class="text-center padding">
      <button class="cu-btn lg cu-btn-primary text-white text-center" open-type="getUserInfo"
              @getuserinfo="get_Userinfo"
              :disabled="btn_disabled">
        {{ title }}
      </button>
    </div>
    <view class="text-center text-xs">
      <text class="text-gray">如果您在我们实体店，请在店员的指导下连接水母智脑环</text>
    </view>
    <van-toast id="van-toast"/>
  </div>
</template>

<script>
import {userGetCode, userRegister, userLogin, userDetail} from '@/requests/user'
import Toast from '../../../static/vant/toast/toast';
import user_store from '@/store/index'
import {reload_userinfo} from "../../utils/user";

var $this

export default {
  name: "regist",
  props: ['title'],
  data() {
    return {
      phone: "",
      verfiy_code: "",
      time_out: 0,
      invite: 0,
      js_code: "",
      auth_login: false,
      _userinfo: {
        nickName: "",
        avatarUrl: "",
        gender: ""
      },
      btn_disabled: true,
      time_show: false,
      time_start: false,
      time_count: 60,
    }
  },
  watch: {
    verfiy_code($new, $old) {
      if ($new.length == 6) {
        wx.hideKeyboard()
      }
    }

  },
  methods: {
    check_auth() {
      let $reg = /(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}/
      let $verify_reg = /\d{6}/
      if ($reg.test($this.phone) && $verify_reg.test($this.verfiy_code)) {
        $this.btn_disabled = false
      } else {
        $this.btn_disabled = true
      }
    },
    //跳转到首页
    goIndex() {
      this.$emit('changeStatus', 'login')
    },
    //获取验证码
    get_verify_code() {
      let $reg = /(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}/
      if ($reg.test($this.phone) == false) {
        Toast.fail('请输入正确手机号')
        return false;
      }
      $this.open_time_down()
      let $params = {
        phone: $this.phone
      }
      userGetCode($params).then((res) => {
        let $data = res.data;
        Toast.success($data['errmsg']);
      });
    },
    //微信授权登录
    wechat_login($userinfo) {
      Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '操作中...',
      });

      let $params = {
        phone: $this.phone,
        code: $this.verfiy_code,
        js_code: $this.js_code,
        invite: $this.invite,
      }
      // if ($this._userinfo) {
      $params['user_name'] = $this._userinfo.nickName
      $params['portrait'] = $this._userinfo.avatarUrl
      $params['sex'] = $this._userinfo.gender
      // }

      if ($this.title == "注册") {
        userRegister($params).then((res) => {
            console.log(res)
            wx.setStorageSync("is_first", true)
            let $data = res.data
            if (!$data['code']) {
              Toast.clear()
              $this.login_success($data)
            } else {
              Toast.fail($data['errmsg'])
            }
          },
          (err) => {
            console.log(err)
          }
        )
      } else if ($this.title == "登录") {
        userLogin($params).then((res) => {
            wx.setStorageSync("is_first", false)
            console.log(res)
            let $data = res.data
            Toast.clear()
            if (!$data['code']) {
              $this.login_success($data)
            } else {
              Toast.fail($data['errmsg'])
            }
          },
          (err) => {
            console.log(err)
          })
      }

    },
    //登录成功
    login_success($data) {
      Toast.success($data['errmsg'])
      user_store.setters.set_token($data['data'])
      user_store.setters.set_login()
      $this.$emit('change_login_status', true)
      user_store.setters.set_invite_code($this.invite)
      //获取用户信息
      reload_userinfo($this)
    },
    //打开倒计时
    open_time_down() {
      $this.time_count = 60
      $this.time_start = $this.time_show = true
    },
    //倒计时结束
    time_finished() {
      $this.time_start = $this.time_show = false
    },
    //  获取用户信息
    get_Userinfo(e) {
      console.log(e)
      if (e.mp.detail.errMsg == "getUserInfo:fail auth deny") {
        Toast.fail('请进行授权登录')
      } else {
        $this._userinfo = e.mp.detail.userInfo
        $this.wechat_login()
      }
    }
  },
  mounted() {
    $this.invite = $this.$store.getters.get_invite_code ? $this.$store.getters.get_invite_code : wx.getStorageSync('code')
    // $this.invite = 1000000000
    console.log('regist-invite', $this.invite)
    mpvue.login({
      success($res) {
        $this.js_code = $res.code
      }
    })
  },
  created() {
    $this = this
    wx.getSetting({
      success(res) {
        let $authSetting = res.authSetting
        if ($authSetting['scope.userInfo']) {
          //改为普通登录
          $this.auth_login = false
        } else {
          $this.auth_login = true
        }
        console.log('auth', $this.auth_login)
      }
    })
  },
}
</script>

<style scoped>
.regist_back_btn {
  width: 22px;
  height: 20px;
  position: absolute;
  left: 20px;;
}


.cu-form-group {
  background-color: rgba(255, 255, 255, 0);
}

/*体验页面*/
.slogen {
  color: #4b4b4b;
  font-size: 13px;
}

/*注册页面*/
.register_form_container {
  margin: 70px auto 0px;
  width: 90%;
  height: 108px;
  background: rgba(242, 243, 255, 0.6);
  box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
  border-radius: 11px;
}
</style>