exam_mp/pages/login/index.vue

<template>
  <view>
    <view class="logo_box">
      <image
        src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/logo2.jpg"
        class="logo_image"
      ></image>
    </view>
    <view class="login_content">
      <!-- #ifdef MP-WEIXIN -->
      <button
        open-type="getPhoneNumber"
        @getphonenumber="getPhonenumber"
        class="get_phone"
      >
        授权登录
      </button>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <button @click="toPhoneLogin" class="get_phone">授权登录</button>
      <!-- #endif -->
      <!-- #ifdef MP-TOUTIAO -->
      <button
        open-type="getPhoneNumber"
        @getphonenumber="getPhonenumber"
        class="get_phone"
      >
        抖音用户手机号授权登录
      </button>
      <!-- <button class="get_phone" style="margin-top: 40rpx; background-color: #fff; color: #333">手机号验证登录</button> -->
      <!-- #endif -->
      <button class="cancel_login" @click="cancelLogin()">取消登录</button>
      <view class="policy_content">
        <image
          class="checkbox"
          @click="changeAgreePolicy"
          :src="
            agreePolicy
              ? 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/checked.png'
              : 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/checkbox.png'
          "
        ></image>
        我已阅读并同意
        <navigator url="/pages/policy/index" style="color: #e03519"
          >《服务协议》</navigator
        >
      </view>
    </view>
  </view>
</template>

<script>
import { router } from '../../utils/router';
export default {
  data() {
    return {
      agreePolicy: false,
    };
  },
  onLoad(options) {
    // 获取页面参数
    if (options.redirect) {
      this.redirect = options.redirect;
      this.activity_id = options.activity_id;
      this.id = options.id;
    }
  },
  methods: {
    changeAgreePolicy() {
      this.agreePolicy = !this.agreePolicy;
    },
    cancelLogin() {
      // 返回上一页
      uni.navigateBack();
    },
    getPhonenumber(re) {
      console.log(re.detail.errMsg);
      // // 如果授权失败的话
      if (re.detail.errMsg != "getPhoneNumber:ok") {
        uni.showToast({
          icon: "error",
          title: "授权失败",
        });
        return;
      }
      let share_uid = "";
      share_uid = uni.getStorageSync("share_uid");
      uni.login({
        provider: "weixin",
        success: (loginRes) => {
          console.log(loginRes.code);
          // 登录成功，获取用户code
          let open_code = loginRes.code;
          // 授权成功以后，调用登录
          this.$http
            .request(
              "api/wechat/phone_number",
              {
                code: re.detail.code,
                share_uid: share_uid,
                open_code: open_code,
              },
              "post"
            )
            .then((re) => {
              // 成功的话
              if (re.code == "success") {
                // 存储登录标识
                uni.setStorageSync("userLogin", re.data);
                if (!uni.getStorageSync("shopId")) {
                  uni.setStorageSync("shopId", re.data.shop_id);
                }
                // 跳转到页面
                router.back()
              } else {
                uni.showToast({
                  title: re.msg,
                  icon: "none",
                });
              }
            });
        },
        fail: (err) => {
          console.log("uni.login 接口调用失败，无法获取openid", err);
          uni.showToast({
            title: "支付失败",
            icon: "none",
          });
        },
      });
    },
    toPhoneLogin(re) {
      // 登录效果
      this.$http
        .request("api/wechat/phone_number", this.requestParam)
        .then((re) => {
          // 成功的话
          if (re.code == "success") {
            // 存储登录标识
            uni.setStorageSync("userLogin", re.data);
            // 跳转到页面
            uni.switchTab({ url: "/pages/user/index" });
          } else {
            uni.showToast({
              title: re.msg,
              icon: "none",
            });
          }
        });
    },
  },
};
</script>

<style lang="less">
.logo_box {
  display: block;
  margin: 0rpx auto;
  margin-top: 80rpx;
  .logo_image {
    width: 320rpx;
    height: 320rpx;
    display: block;
    margin: 0rpx auto;
  }
}
.login_content {
  padding: 0 40px;
  .policy_content {
    margin-top: 40rpx;
    font-size: 26rpx;
    display: flex;
    align-items: center;
    .checkbox {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.get_phone {
  display: block;
  width: 100%;
  height: 80rpx;
  color: #ffffff;
  font-size: 28rpx;
  background: green;
  margin: 0rpx auto;
  line-height: 80rpx;
  margin-top: 160rpx;
  border-radius: 30rpx;
  border: 0rpx solid #dddddd;
}
.get_phone::after {
  border: 0rpx solid #dddddd;
}
.cancel_login {
  display: block;
  width: 100%;
  height: 80rpx;
  color: #666666;
  font-size: 28rpx;
  background: #dddddd;
  margin: 0rpx auto;
  line-height: 80rpx;
  margin-top: 40rpx;
  border-radius: 30rpx;
  border: 0rpx solid #dddddd;
}
.cancel_login::after {
  border: 0rpx solid #dddddd;
}
</style>