combination-tall/src/pages/phone-bind/phone-bind.vue

<template>
  <view class="wrap" @click="openAuth">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
      <!-- 手机号 -->
      <u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" label="手机号码" prop="phone" label-width="160">
        <u-input placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
      </u-form-item>

      <u-form-item label="图形验证码" prop="imageValue" label-width="160">
        <u-input placeholder="输入计算结果" v-model="model.imageValue" type="number"></u-input>
        <ImageCode slot="right" @on-code="codeId = $event" />
      </u-form-item>

      <u-form-item label="验证码" prop="code" label-width="160">
        <u-input placeholder="请输入短信验证码" v-model="model.code" type="number"></u-input>
        <u-button slot="right" type="primary" size="mini" @click="getCode">{{ codeTips }}</u-button>
      </u-form-item>
    </u-form>

    <view class="mt-8">
      <u-button @click="submit" type="primary">提交</u-button>
    </view>
    <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>

    <u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import UserAuthMixin from '@/mixins/userAuth';

export default {
  mixins: [UserAuthMixin],
  data() {
    return {
      model: {
        phone: '', // 手机号
        imageValue: '', // 图形验证码计算结果
        code: '', // 短信验证码
      },
      codeId: '', // 图形验证码的id

      rules: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            validator: (rule, value) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur'],
          },
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          },
          {
            validator: (rule, value) => {
              return this.$u.test.code(value, 4);
            },
            message: '验证码格式不正确',
            trigger: ['change', 'blur'],
          },
        ],
      },
      seconds: 120, // 验证码倒计时时长
      codeTips: '',
      errorType: ['message'],
    };
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(async valid => {
        if (valid) {
          try {
            const { phone, code } = this.model;
            const data = await this.$u.api.phoneBind(phone, code);
            console.log('data: ', data);
            this.$refs.uTips.show({
              title: '手机号绑定成功, 即将跳转上一页',
              type: 'success',
              duration: '3000',
            });
            setTimeout(() => uni.navigateBack(), 2000);
          } catch (error) {
            this.$refs.uTips.show({
              title: error.msg || '手机号绑定失败',
              type: 'error',
              duration: '3000',
            });
          }
        } else {
          console.log('验证失败');
        }
      });
    },

    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    async getCode() {
      if (this.$refs.uCode.canGetCode) {
        try {
          if (!this.validateCodeParams()) return;
          const params = {
            phone: this.model.phone,
            verificationCodeId: this.codeId,
            verificationCodeValue: this.model.imageValue,
          };
          const data = await this.$u.api.getSmsCode(params);
          this.seconds = data.expiredInSeconds;
          this.$refs.uTips.show({
            title: '短信发送成功, 请查收',
            type: 'success',
            duration: '3000',
          });
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        } catch (error) {
          this.$refs.uTips.show({
            title: error.msg || '发送失败',
            type: 'error',
            duration: '3000',
          });
        }
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },

    // 验证发送短信验证码的参数
    validateCodeParams() {
      if (!this.$u.test.mobile(this.model.phone)) {
        this.$refs.uTips.show({
          title: '手机号输入不正确',
          type: 'error',
          duration: '3000',
        });
        return false;
      }

      if (!this.codeId) {
        this.$refs.uTips.show({
          title: '点击刷新图形验证码重试',
          type: 'error',
          duration: '3000',
        });
        return false;
      }

      if (!this.model.imageValue && this.model.imageValue !== 0) {
        this.$refs.uTips.show({
          title: '请输入图形验证码',
          type: 'error',
          duration: '3000',
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped lang="scss">
.wrap {
  padding: 30rpx;
}

.agreement {
  display: flex;
  align-items: center;
  margin: 40rpx 0;

  .agreement-text {
    padding-left: 8rpx;
    color: $u-tips-color;
  }
}
</style>