frontend-app/pages/login_package/bind-phone/bind-phone.vue

<template>
  <view class="register_warp">
    <view class="header_">
      <view style="margin-top: 10rpx">
        <up-image src="/static/common/left.png" width="18" height="20" bgColor="#f1f6ff00" @click="jumpMine" />
      </view>
      <view class="title_">绑定手机号</view>
      <view></view>
    </view>

    <view class="register_ifo_warp">
      <view class="register_info_item">
        <up-input placeholder="请输入手机号" border="surround" v-model="form.mobile" :customStyle="inputCss"></up-input>
      </view>
      <view class="register_info_item">
        <up-input placeholder="请输入验证码" border="surround" v-model="form.smsCode" :customStyle="inputCss">
          <template #suffix style="margin-right: 10rpx">
            <view v-if="countdown" class="code-warp">
              <up-count-down :time="60 * 1000" format="ss" @finish="countdown = false"></up-count-down>
              <text style="margin-left: 10rpx">s</text>
            </view>
            <view v-else @click="getMobileCode" class="code_msg">
              获取验证码
              <qiaobao-assistant page-key="pages/login_package/bind-phone/bind-phone" title="账户登录" />
            </view>
          </template>
        </up-input>
      </view>
    </view>

    <view class="login_comm_but login_comm_but_yes" @click="submit" :loading="butLoading">
      登录
    </view>

    <view class="policy_warp">
      <up-checkbox name="isCheck" usedAlone v-model:checked="isPolicy" shape="circle" activeColor="#7934F6" size="19"
        iconSize="18">
        <template #label>
          <text @click="aa">已阅读并同意</text>
          <text class="policy_a_warp" @click="jumpUserAgreement">《服务协议》</text>
          <text>、</text>
          <text class="policy_a_warp" @click="jumpPrivacyAgreement">《隐私政策》</text>
          <text>、</text>
          <text class="policy_a_warp" @click="jumpProductAgreement">《售后保障协议》</text>
        </template>
      </up-checkbox>
    </view>

    <up-toast ref="uToastRef"></up-toast>
    <u-modal :show="tipsShow" title="提示" showCancelButton @cancel="onCancel" @confirm="onConfirm">
      <view class="slot-content">
        我已阅读并同意
        <text style="color: #007AFF;">用户协议</text>和<text style="color: #007AFF;">隐私政策</text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { SMS_TYPE } from "@/utils/enumUtils.js";
import { getUserList } from "@/api/common.js";
import { wechatLogin, alipayLogin, appleLogin } from "@/api/auth.js";
import {
  setStorageFun,
  TOKEN_NAME,
  USER_KEY,
  USER_DATA,
  USER_LOGIN_TIME,
} from "@/utils/auth.js";

export default {
  data() {
    return {
      form: {
        mobile: null,
        smsCode: null, // 验证码
        token: null,
      },
      inputCss: {
        height: "80rpx",
        background: "#F3F3F3FF",
        "border-radius": "30rpx",
        border: "0rpx",
        "padding-left": "16px",
      },
      countdown: false, // 清空倒计时
      butLoading: false,
      disabled: false,
      type: 1, //1.微信 2.支付宝,3.apple
      tipsShow: false,
      content: '确认绑定手机号吗？',
      isPolicy: false,
    };
  },

  onLoad(option) {
    this.form.token = option.token;
    this.type = option.type;
    console.log("-----1", option, this.form.token, this.type);
  },
  methods: {
    submit() {
      if (!this.isPolicy) {
        this.tipsShow = true;
      }
    },
    onCancel() {
      this.tipsShow = false;
    },
    onConfirm() {
      this.tipsShow = false;
      this.isPolicy = true;
      this.registerFun();
    },
    jumpMine() {
      uni.reLaunch({
        url: "/pages/login_package/login/login",
      });
    },
    // 用户协议
    jumpUserAgreement() {
      uni.navigateTo({
        url: "/pages/mine_package/mine_user_agreement/mine_user_agreement?backPath=login",
      });
    },
    // 隐私协议
    jumpPrivacyAgreement() {
      uni.navigateTo({
        url: "/pages/mine_package/mine_privacy_agreement/mine_privacy_agreement?backPath=login",
      });
    },
    // 售后保障协议
    jumpProductAgreement() {
      uni.navigateTo({
        url: "/pages/mine_package/mine_product_agreement/mine_product_agreement?backPath=login",
      });
    },
    async registerFun() {
      const form = this.form;
      if (!form.mobile) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "请输入手机号",
        });
        return;
      }
      if (!form.smsCode) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "请输入验证码",
        });
        return;
      }

      this.butLoading = true;
      const params = {
        mobile: form.mobile,
        smsCode: form.smsCode,
        isValid: true,
        token: form.token,
      };
      const response =
        this.type == 1 ? await wechatLogin(params) : this.type == 2 ? await alipayLogin(params) : await appleLogin(params);
      console.log("微信登录接口返回:", params, response);
      if (response && response.bizcode === 100) {
        const data = response.data;
        setStorageFun(TOKEN_NAME, data.token);
        // 用于无感登录
        setStorageFun(USER_KEY, "");
        const userInfo = {
          avatar: data.avatarUrl,
          name: data.name,
          userId: data.userId,
          grade: data.grade,
          inviteCode: data.inviteCode,
        };
        setStorageFun(USER_DATA, userInfo);
        // 当前登录得时间戳
        let currentTimeStamp = new Date().getTime();
        setStorageFun(USER_LOGIN_TIME, currentTimeStamp);

        const res = uni.getSystemInfoSync();
        uni.setStorageSync("platform", res.platform);
        // #ifdef APP-PLUS
        // 获取应用版本信息
        plus.runtime.getProperty(plus.runtime.appid, function (inf) {
          console.log("版本信息", inf.versionCode);
          uni.setStorageSync("version-1", inf.version); // 大版本号
          uni.setStorageSync("versionCode", inf.versionCode); // 小版本号
        });
        let uuid = plus.device.uuid;
        // #endif

        this.$refs.uToastRef.show({
          type: "success",
          message: response.msg,
        });
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/home/home",
          });
        }, 2000);
      }
      this.butLoading = false;
    },

    /**
     * 获取手机验证码
     */
    async getMobileCode() {
      const form = this.form;
      if (!form.mobile) {
        this.$refs.uToastRef.show({
          type: "error",
          message: "请输入手机号码",
        });
        return;
      }
      this.countdown = true;

      const params = {
        mobile: form.mobile,
        type: this.type == 1 ? SMS_TYPE.WECHAT : this.type == 2 ? SMS_TYPE.ALIPAY : SMS_TYPE.APPLE,
      };
      const response = await getUserList(params);
      if (response && response.bizcode === 100) {
        this.$refs.uToastRef.show({
          type: "success",
          message: response.msg,
        });
      } else {
        this.countdown = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header_ {
  display: flex;
  align-items: center;
  padding: calc(24rpx + env(safe-area-inset-bottom)) 30rpx 0 30rpx;

  .title_ {
    font-weight: bold;
    font-size: 36rpx;
    margin-left: 20rpx;
  }
}

.register_warp {
  height: calc(100vh - 280rpx);
  padding: 40rpx;
}

.register_title_warp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;

  .register_title_warp_title {
    font-weight: bold;
    font-size: 62rpx;
  }

  .register_title_warp_download {
    font-size: 30rpx;
    padding: 0 25rpx;
    height: 70rpx;
    border-radius: 20rpx;
    color: #fff;
    background-color: #7934f6;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.register_ifo_warp {
  margin-top: 90rpx;

  .register_info_item {
    margin-bottom: 40rpx;
  }
}
</style>