jsm-mall-h5-front/src/packageMine/pages/phoneUpdate.vue

<template>
  <zj-page-layout bgColor="#ffffff">
    <view class="all-container">
      <view class="input">
        <u-input clearable border="bottom" placeholder="" :value="mobile" :disabled="true">
          <view class="" style="" slot="prefix">
            <text class="kakkslakldsj">当前手机号码</text>
          </view>
        </u-input>
      </view>
      <view class="input">
        <u-input clearable border="bottom" placeholder="请输入手机号" v-model="phone">
          <view class="" style="" slot="prefix">
            <text class="kakkslakldsj">*新手机号码</text>
          </view>
        </u-input>
      </view>
      <view class="input">
        <u-input clearable border="bottom" placeholder="请输入验证码" v-model="code">
          <view class="" style="" slot="prefix">
            <text class="kakkslakldsj">*验证码</text>
          </view>
          <view class="" slot="suffix" @click="getCode">
            <text class="text">{{ countDown ? countDown + 'S' : '获取验证码' }}</text>
          </view>
        </u-input>
      </view>

      <u-button type="primary" text="确定" :disabled="!phone || !code" @click="submitForm"></u-button>

      <zjDialogVerification
        ref="verification"
        :isShow="isShowCodeDialog"
        :top="codeObj.yHeight"
        :bgImg="codeObj.bigImage"
        :maskImg="codeObj.smallImage"
        :isSuccess="codeObj.isSuccess"
        :isFail="codeObj.isFail"
        @close="isShowCodeDialog = false"
        @refresh="refresh"
        @finish="finish"
      >
      </zjDialogVerification>
    </view>
  </zj-page-layout>
</template>

<script>
import zjDialogVerification from '@/components/zj-dialog/zj-dialog-verification.vue'
import { getStorage } from '@/common/utils/storage.js'
export default {
  components: {
    zjDialogVerification
  },

  data() {
    return {
      phone: '',
      code: '',
      getCodeText: '获取验证码',
      countDown: 0,
      timer: null,
      isShowCodeDialog: false,
      codeObj: {
        bigImage: '',
        smallImage: '',
        key: '',
        yHeight: '',
        isSuccess: false,
        isFail: false
      }
    }
  },
  computed: {
    userInfo() {
      return getStorage('user')
    },
    mobile() {
      return this?.userInfo?.mobile
    }
  },
  methods: {
    // 获取验证码
    getCode() {
      if (!this.phone) {
        this.$toast('请先填写手机号码')
        return false
      }
      if (this.countDown != 0) {
        this.$toast('请勿频繁获取验证码')
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$toast('请填写正确的手机号码')
        return false
      }

      // this.init();
      this.isShowCodeDialog = true
      this.$refs.verification.refresh()
    },

    // 提交表单
    submitForm() {
      if (!this.phone) {
        this.$toast('请先填写手机号码')
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$toast('请填写正确的手机号码')
        return false
      }
      if (this.phone == this.mobile) {
        this.$toast('不能和原号码一样')
        return false
      }
      if (!this.code) {
        this.$toast('请先填写验证码')
        return false
      }

      this.$api
        .post('/user/phone/upBind', {
          phone: this.phone,
          code: this.code
        })
        .then(res => {
          this.$successToast('申请成功')
          setTimeout(() => {
            this.$navToPage(
              {
                delta: 1
              },
              'navigateBack'
            )
          }, 1000)
        })
    },

    // 获取图片验证码
    init() {
      this.$api.get('/common/getVerifi').then(res => {
        this.codeObj = res.data
      })
    },

    // 刷新验证码
    refresh() {
      this.init()
    },

    // 验证结束
    finish(value) {
      this.$api
        .post('/user/sms/send', {
          phone: this.phone,
          key: this.codeObj.key,
          vrifyCode: Math.round(value)
        })
        .then(res => {
          this.countDown = 60
          this.codeObj.isSuccess = true
          this.codeObj.isFail = false
          setTimeout(() => {
            this.isShowCodeDialog = false
            this.$toast('短信发送成功')
          }, 1500)
          this.countDown--
          this.timer = setInterval(() => {
            this.countDown--
            if (this.countDown == 0) {
              this.getCodeText = '重新获取'
              clearInterval(this.timer)
            }
          }, 1000)
        })
        .catch(res => {
          this.isShowCodeDialog = false
          this.codeObj.isSuccess = false
          this.codeObj.isFail = false
          // setTimeout(() => {
          //   this.$refs.verification.refresh()
          // }, 1500)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.kakkslakldsj {
  display: inline-block;
  width: 220rpx;
}
.all-container {
  padding: 0 30rpx;
  .input {
    margin-top: 30rpx;
    ::v-deep .u-input {
      .iconfont {
        font-size: 36rpx;
        color: $theme-color;
        font-weight: 600;
        margin-right: 12rpx;
      }
      .text {
        color: $theme-color;
      }
    }
  }
  ::v-deep .u-button {
    margin-top: 60rpx;
  }
}
</style>