kailin_mp/pages/bind/user.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>
    <button v-if="alloRequest" open-type="getPhoneNumber" @getphonenumber="getPhonenumber" class="get_phone">授权手机</button>
    <view v-if="!alloRequest" class="alter_info">抱歉，传入的参数有误，请联系您的客服</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      requestParam: {
        code: "",
        kailin_uid: "",
        work_userid: "",
      },
      alloRequest: false,
    };
  },
  onLoad(param) {
    // 获取uid
    this.requestParam.kailin_uid = param.kailin_uid;
    // 跟进人员ID
    this.requestParam.work_userid = param.work_userid;
  },
  onShow() {
    // 判断是否存在参数
    if (this.requestParam.kailin_uid && this.requestParam.work_userid) {
      // 存在显示按钮
      this.alloRequest = true;
    }
  },
  methods: {
    getPhonenumber(re) {
      // 如果授权失败的话
      if (re.detail.errMsg != "getPhoneNumber:ok") {
        uni.showToast({
          icon: "error",
          title: "授权失败",
        });
        return;
      }
      // 获取授权码
      this.requestParam.code = re.detail.code;
      // 授权成功以后，调用登录
      this.$http.request("api/work_bind/custom", this.requestParam, "post").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;
  }
}
.get_phone {
  display: block;
  width: 180rpx;
  height: 60rpx;
  color: #ffffff;
  font-size: 28rpx;
  background: green;
  margin: 0rpx auto;
  line-height: 60rpx;
  margin-top: 160rpx;
  border-radius: 30rpx;
  border: 0rpx solid #dddddd;
}
.get_phone::after {
  border: 0rpx solid #dddddd;
}
.alter_info {
  display: block;
  color: #e03519;
  font-size: 20rpx;
  overflow: hidden;
  margin: 20rpx auto;
  background: #ffffff;
  line-height: 40rpx;
  padding: 35rpx 35rpx;
  text-align: center;
}
</style>