|
|
@@ -0,0 +1,101 @@
|
|
|
+<route lang="json">
|
|
|
+{ "style": { "navigationBarTitleText": "修改手机号" } }
|
|
|
+</route>
|
|
|
+<script setup lang="ts">
|
|
|
+import BottomAppBar from '@/components/bottom-app-bar.vue'
|
|
|
+import { useUserStore } from '../../../../../store'
|
|
|
+import { requestToast } from '../../../../../core/utils/common'
|
|
|
+import { getPhoneCode, updateMobile } from '../../../../../core/libs/requests'
|
|
|
+import { useRouter } from '../../../../../core/utils/router'
|
|
|
+const userStore = useUserStore()
|
|
|
+const { reset } = userStore
|
|
|
+const router = useRouter()
|
|
|
+const formData = ref<{ mobile?: string; code?: string }>({})
|
|
|
+const disabled = computed(() => !formData.value.mobile || !formData.value.code)
|
|
|
+const sendCodeDisabled = computed(() => !formData.value.mobile && timer.value === 0)
|
|
|
+const timer = ref(0)
|
|
|
+const interval = ref()
|
|
|
+const handleSendCode = async () => {
|
|
|
+ const { code } = await requestToast(
|
|
|
+ () => getPhoneCode({ mobile: formData.value.mobile, scene: 2 }),
|
|
|
+ {
|
|
|
+ success: true,
|
|
|
+ successTitle: '验证码已发送',
|
|
|
+ },
|
|
|
+ )
|
|
|
+ if (code !== 0) return
|
|
|
+ if (timer.value > 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ timer.value = 60
|
|
|
+ interval.value = setInterval(() => {
|
|
|
+ timer.value--
|
|
|
+ if (timer.value === 0) {
|
|
|
+ clearInterval(interval.value)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+}
|
|
|
+const handleSubmit = async () => {
|
|
|
+ const { code } = await requestToast(
|
|
|
+ () => updateMobile({ mobile: formData.value.mobile, code: formData.value.code }),
|
|
|
+ {
|
|
|
+ success: true,
|
|
|
+ successTitle: '修改成功',
|
|
|
+ },
|
|
|
+ )
|
|
|
+ if (code === 0) {
|
|
|
+ reset()
|
|
|
+ router.replace('/pages/login/index')
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div class="flex-grow bg-white px-4">
|
|
|
+ <div class="form-item mt-18">
|
|
|
+ <div class="w-12 text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed">
|
|
|
+ ＋86
|
|
|
+ </div>
|
|
|
+ <wd-input
|
|
|
+ v-model="formData.mobile"
|
|
|
+ type="number"
|
|
|
+ no-border
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ class="flex-grow"
|
|
|
+ ></wd-input>
|
|
|
+ </div>
|
|
|
+ <div class="form-item">
|
|
|
+ <div class="w-12 text-black/90 text-base font-normal font-['PingFang SC'] leading-relaxed">
|
|
|
+ 验证码
|
|
|
+ </div>
|
|
|
+ <wd-input
|
|
|
+ v-model="formData.code"
|
|
|
+ type="number"
|
|
|
+ no-border
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ class="flex-grow"
|
|
|
+ ></wd-input>
|
|
|
+ <!-- <div class="text-[#3f598f] text-sm font-normal font-['PingFang SC'] leading-relaxed">
|
|
|
+ 获取验证码
|
|
|
+ </div> -->
|
|
|
+ <wd-button
|
|
|
+ block
|
|
|
+ type="text"
|
|
|
+ :round="false"
|
|
|
+ :disabled="sendCodeDisabled"
|
|
|
+ class="text-[#3f598f]!"
|
|
|
+ @click="handleSendCode"
|
|
|
+ >
|
|
|
+ {{ timer === 0 ? '获取验证码' : `${timer}s` }}
|
|
|
+ <!-- {{ timer }} -->
|
|
|
+ </wd-button>
|
|
|
+ </div>
|
|
|
+ <BottomAppBar fixed :border="false">
|
|
|
+ <wd-button block :round="false" :disabled="disabled" @click="handleSubmit">确定</wd-button>
|
|
|
+ </BottomAppBar>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<style lang="scss">
|
|
|
+.form-item {
|
|
|
+ @apply flex items-center py-4 gap-8 border-b b-b-solid b-b-[#f4f4f4];
|
|
|
+}
|
|
|
+</style>
|
