no message

src/packageMine/pages/phoneUpdate.vue

@@ -0,0 +1,211 @@
+<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.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) {
+      console.log(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.codeObj.isSuccess = false
+          this.codeObj.isFail = true
+          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>

src/pages.json

@@ -649,6 +649,12 @@
           }
         },
         {
+          "path": "pages/phoneUpdate",
+          "style": {
+            "navigationBarTitleText": "修改手机号"
+          }
+        },
+        {
           "path": "pages/agreement",
           "style": {
             "navigationBarTitleText": "用户协议"

src/pages/mine/index.vue

@@ -368,6 +368,12 @@ export default {
           icon: 'icon-kehu',
           link: '/packageEnter/pages/insurance/myInsurance/index',
           show: true
+        },
+        {
+          name: '修改手机号',
+          icon: 'icon-kehu',
+          link: '/packageMine/pages/phoneUpdate',
+          show: true
         }
       ]
     },