corrosion-TALL/src/pages/phone-bind/phone-bind.vue

<template>
  <view class="wrap">
    <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="code" label-width="160">
        <u-input placeholder="请输入图形验证码" v-model="model.code" type="text"></u-input>
        <ImageCode slot="right" />
      </u-form-item>

      <u-form-item label="验证码" prop="code" label-width="160">
        <u-input placeholder="请输入短信验证码" v-model="model.code" type="text"></u-input>
        <u-button slot="right" type="success" size="mini" @click="getCode">{{ codeTips }}</u-button>
      </u-form-item>
    </u-form>
    <view class="agreement">
      <u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
      <view class="agreement-text"> 勾选代表同意uView的版权协议 </view>
    </view>
    <u-button @click="submit">提交</u-button>
    <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
  </view>
</template>

<script>
export default {
  data() {
    let that = this;
    return {
      model: {
        phone: '',
        code: '',
      },

      rules: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            validator: (rule, value, callback) => {
              // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change，二者之间用英文逗号隔开
            trigger: ['change', 'blur'],
          },
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          },
          {
            type: 'number',
            message: '验证码只能为数字',
            trigger: ['change', 'blur'],
          },
        ],
      },
      check: false,
      codeTips: '',
      errorType: ['message'],
    };
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          if (!this.model.agreement) return this.$u.toast('请勾选协议');
          console.log('验证通过');
        } else {
          console.log('验证失败');
        }
      });
    },

    // 勾选版权协议
    checkboxChange(e) {
      this.model.agreement = e.value;
    },

    codeChange(text) {
      this.codeTips = text;
    },
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码',
          mask: true,
        });
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          this.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        this.$u.toast('倒计时结束后再发送');
      }
    },
  },
};
</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>