换绑功能

components.d.ts

@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Header: typeof import('./src/components/layout/header.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     Layout: typeof import('./src/components/layout/index.vue')['default']
     Main: typeof import('./src/components/layout/main.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
@@ -27,16 +26,12 @@ declare module 'vue' {
     VanGrid: typeof import('vant/es')['Grid']
     VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
-    VanImage: typeof import('vant/es')['Image']
     VanList: typeof import('vant/es')['List']
-    VanNavBar: typeof import('vant/es')['NavBar']
     VanNumberKeyboard: typeof import('vant/es')['NumberKeyboard']
     VanPasswordInput: typeof import('vant/es')['PasswordInput']
     VanPopup: typeof import('vant/es')['Popup']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanSearch: typeof import('vant/es')['Search']
-    VanSidebar: typeof import('vant/es')['Sidebar']
-    VanSidebarItem: typeof import('vant/es')['SidebarItem']
     VanSwipe: typeof import('vant/es')['Swipe']
     VanSwipeItem: typeof import('vant/es')['SwipeItem']
     VanTab: typeof import('vant/es')['Tab']

src/api/index.ts

@@ -185,3 +185,18 @@ export const bindMobile = <T>(data:T) => {
     data
   })
 }
+export const switchCaptcha = <T>(data:T) => {
+  return request({
+    url: '/user/switch_captcha',
+    method: 'post',
+    data
+  })
+}
+
+export const switchMobile = <T>(data:T) => {
+  return request({
+    url: '/user/switch_mobile',
+    method: 'post',
+    data
+  })
+}

src/views/pane/mobSwitchMobile.vue

@@ -0,0 +1,138 @@
+<template>
+  <van-form @submit="currentStep===0?submitForm3(1):submitForm3(2)">
+    <template v-if="currentStep===0">
+      <van-field
+        v-model="ruleForm3.mobile"
+        type="text"
+        name="旧手机号"
+        label="旧手机号"
+        :readonly="true"
+        placeholder="请填写旧手机号"
+        :rules="[{ required: true, message: '请填写旧手机号',trigger: 'onBlur' },{ pattern: pattern2, message: '请输入正确手机号'}]"
+      />
+      <van-field
+        v-model="ruleForm3.captcha"
+        type="number"
+        name="验证码"
+        label="验证码"
+        placeholder="请输入验证码"
+        :rules="[{ required: true, message: '请填写验证码' }]">
+        <template #button>
+          <van-button size="small" type="primary" style="min-width: 20vw;" :disabled="!can_send" @click="getCaptcha(1)">{{ smsMessage }}</van-button>
+        </template>
+      </van-field>
+      <div style="margin: 16px;">
+        <van-button style="width: 100%;padding: 10px;" round block type="primary"  native-type="submit">
+          提交
+        </van-button>
+      </div>
+    </template>
+    <template v-else-if="currentStep===1">
+      <van-field
+        v-model="ruleForm3.new_mobile"
+        type="text"
+        name="新手机号"
+        label="新手机号"
+        placeholder="请填写新手机号"
+        :rules="[{ required: true, message: '请填写新手机号',trigger: 'onBlur' },{ pattern: pattern2, message: '请输入正确手机号'}]"
+      />
+      <van-field
+        v-model="ruleForm3.new_captcha"
+        type="number"
+        name="验证码"
+        label="验证码"
+        placeholder="请输入验证码"
+        :rules="[{ required: true, message: '请填写验证码' }]">
+        <template #button>
+          <van-button size="small" type="primary" style="min-width: 20vw;" :disabled="!can_send" @click="getCaptcha(2)">{{ smsMessage }}</van-button>
+        </template>
+      </van-field>
+      <div style="margin: 16px;display: flex;align-items: center;justify-content: space-around;">
+        <van-button style="width: 40%;padding: 10px;" round  type="primary"  native-type="submit">
+          提交
+        </van-button>
+        <van-button style="width: 40%;padding: 10px;" round   @click="currentStep = 0">
+          返回
+        </van-button>
+      </div>
+    </template>
+  </van-form>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { useStore } from '@/store/index'
+import { showSuccessToast, showFailToast } from 'vant'
+import { switchMobile, switchCaptcha } from '@/api/index'
+const { user } = useStore()
+const pattern2 = ref<RegExp>(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)
+const ruleForm3 = reactive({
+  mobile: '',
+  captcha: '',
+  new_mobile: '',
+  new_captcha: ''
+})
+const can_send = ref<boolean>(true)
+const smsMessage = ref<'获取验证码' | number>('获取验证码')
+const VALID = 60
+let interval:any
+const settimes = () => {
+  const setTimeFn = () => {
+    (smsMessage.value as number)--
+    if (smsMessage.value as number < 0 || can_send.value === true) {
+      clearInterval(interval)
+      can_send.value = true
+      smsMessage.value = '获取验证码'
+    }
+  }
+  interval = setInterval(function() {
+    setTimeFn()
+  }, 1000)
+}
+const getCaptcha = async(step:1|2) => {
+  const params = {
+    mobile: step === 1 ? ruleForm3.mobile : ruleForm3.new_mobile,
+    step
+  }
+  await switchCaptcha(params).then((res) => {
+    console.log(res)
+    can_send.value = false
+    smsMessage.value = VALID
+    settimes()
+    showSuccessToast('验证码已发送，请注意查收')
+  }).catch((error) => {
+    console.log(error)
+    showFailToast(error.data.msg)
+  })
+}
+const submitForm3 = async(step: 1 | 2) => {
+  const params = {
+    captcha: step === 1 ? ruleForm3.captcha : ruleForm3.new_captcha,
+    mobile: step === 1 ? ruleForm3.mobile : ruleForm3.new_mobile,
+    step
+  }
+  await switchMobile(params).then(async(res) => {
+    console.log(res)
+    showSuccessToast(res.data.msg)
+    await user.getUserProfile()
+    ruleForm3.mobile = user.profile.mobile
+    ruleForm3.captcha = ''
+    clearInterval(interval)
+    smsMessage.value = '获取验证码'
+    can_send.value = true
+    currentStep.value = step === 1 ? 1 : 0
+  }).catch((error) => {
+    console.log(error)
+    showFailToast(error.data.msg)
+  })
+}
+const currentStep = ref<1|0>(0)
+onMounted(() => {
+  ruleForm3.mobile = user.profile.mobile
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/pane/switchMoble.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="form-wrapper">
+    <el-form
+      ref="ruleFormRef3"
+      :model="ruleForm3"
+      :rules="rules3"
+      label-width="140px"
+      class="demo-ruleForm"
+      status-icon
+    >
+      <el-steps style="max-width: 400px;margin: 0 auto" :active="currentStep" finish-status="success">
+        <el-step title="Step 1" />
+        <el-step title="Step 2" />
+      </el-steps>
+      <template v-if="currentStep === 0">
+        <el-form-item label="旧手机号：" prop="mobile">
+          <el-input type="text" :disabled="!!user.profile.mobile" v-model="ruleForm3.mobile" placeholder="请输入手机号" />
+        </el-form-item>
+        <el-form-item label="验证码：" prop="captcha">
+
+          <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
+            <el-input type="text" :disabled="ruleForm3.mobile.length !== 11" v-model="ruleForm3.captcha" placeholder="请输入验证码" />
+            <el-button type="primary" @click="getCaptcha(1)" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item >
+          <el-button type="primary" size="large" @click="submitForm3(ruleFormRef3, 1)">
+            确定
+          </el-button>
+
+        </el-form-item>
+      </template>
+      <template v-if="currentStep === 1">
+        <el-form-item label="新手机号：" prop="new_mobile">
+          <el-input type="text" v-model="ruleForm3.new_mobile" placeholder="请输入手机号" />
+        </el-form-item>
+        <el-form-item label="验证码：" prop="new_captcha">
+
+          <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
+            <el-input type="text" :disabled="ruleForm3.new_mobile.length !== 11" v-model="ruleForm3.new_captcha" placeholder="请输入验证码" />
+            <el-button type="primary" @click="getCaptcha(2)" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item >
+          <el-button type="primary" size="large" @click="submitForm3(ruleFormRef3, 2)">
+            确定
+          </el-button>
+          <el-button size="large" @click="currentStep = 0">返回</el-button>
+        </el-form-item>
+      </template>
+
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { switchMobile, switchCaptcha } from '@/api/index'
+import Message from '@/utils/Message'
+import { useStore } from '@/store/index'
+const { user } = useStore()
+const ruleFormRef3 = ref<FormInstance>()
+const ruleForm3 = reactive({
+  mobile: '',
+  captcha: '',
+  new_mobile: '',
+  new_captcha: ''
+})
+const can_send = ref<boolean>(true)
+const smsMessage = ref<'获取验证码' | number>('获取验证码')
+const VALID = 60
+let interval:any
+const settimes = () => {
+  const setTimeFn = () => {
+    (smsMessage.value as number)--
+    if (smsMessage.value as number < 0 || can_send.value === true) {
+      clearInterval(interval)
+      can_send.value = true
+      smsMessage.value = '获取验证码'
+    }
+  }
+  interval = setInterval(function() {
+    setTimeFn()
+  }, 1000)
+}
+const getCaptcha = async(step:1|2) => {
+  const params = {
+    mobile: step === 1 ? ruleForm3.mobile : ruleForm3.new_mobile,
+    step
+  }
+  await switchCaptcha(params).then((res) => {
+    console.log(res)
+    can_send.value = false
+    smsMessage.value = VALID
+    settimes()
+    Message.success('验证码已发送，请注意查收')
+  }).catch((error) => {
+    console.log(error)
+    Message.error(error.data.msg)
+  })
+}
+const rules3 = reactive<FormRules>({
+  mobile: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }
+  ],
+  captcha: [
+    { required: true, message: '请输入验证码', trigger: 'blur' }
+  ],
+  new_mobile: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }
+  ],
+  new_captcha: [
+    { required: true, message: '请输入验证码', trigger: 'blur' }
+  ]
+})
+const submitForm3 = async(formEl: FormInstance | undefined, step: 1 | 2) => {
+  if (!formEl) return
+  await formEl.validate(async(valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+
+      const params = {
+        captcha: step === 1 ? ruleForm3.captcha : ruleForm3.new_captcha,
+        mobile: step === 1 ? ruleForm3.mobile : ruleForm3.new_mobile,
+        step
+      }
+      await switchMobile(params).then(async(res) => {
+        console.log(res)
+        Message.success(res.data.msg)
+        await user.getUserProfile()
+        ruleForm3.mobile = user.profile.mobile
+        ruleForm3.captcha = ''
+        clearInterval(interval)
+        smsMessage.value = '获取验证码'
+        can_send.value = true
+        currentStep.value++
+        if (currentStep.value > 1) {
+          currentStep.value = 0
+        }
+      }).catch((error) => {
+        console.log(error)
+        Message.error(error.data.msg)
+      })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const currentStep = ref<1|0>(0)
+onMounted(() => {
+  ruleForm3.mobile = user.profile.mobile
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/settings.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="settings">
-    <el-tabs tab-position="left">
-      <el-tab-pane label="密码设置">
+    <el-tabs v-model="activeName" tab-position="left">
+      <el-tab-pane name="first" label="密码设置">
         <div class="form-wrapper">
           <el-form
             ref="ruleFormRef"
@@ -28,7 +28,7 @@
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="用户名设置">
+      <el-tab-pane name="second" label="用户名设置">
         <div class="form-wrapper">
           <el-form
             ref="ruleFormRef2"
@@ -49,7 +49,7 @@
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="手机号设置">
+      <el-tab-pane name="third" label="手机号绑定" v-if="!user.profile.mobile">
         <div class="form-wrapper">
           <el-form
             ref="ruleFormRef3"
@@ -81,6 +81,9 @@
           </el-form>
         </div>
       </el-tab-pane>
+      <el-tab-pane name="forth" label="手机号换绑" v-else>
+        <switch-moble v-if="activeName === 'forth'"/>
+      </el-tab-pane>
     </el-tabs>
 
   </div>
@@ -101,7 +104,7 @@
         <van-tabs v-model:active="active" animated color="#BD5B8F" background="transparent" title-inactive-color="#2F4858" title-active-color="">
           <van-tab title="密码设置" name="a"/>
           <van-tab title="用户名设置" name="b"/>
-          <van-tab title="手机号设置" name="c"/>
+          <van-tab :title="!user.profile.mobile?'手机号绑定':'手机号换绑'" name="c"/>
         </van-tabs>
       </div>
     </div>
@@ -158,7 +161,7 @@
       </van-form>
     </div>
     <div v-else-if="active === 'c'" class="form-wrapper">
-      <van-form>
+      <van-form v-if="!user.profile.mobile" @submit="onSubmit4">
         <van-field
           v-model="ruleForm3.mobile"
           type="text"
@@ -181,14 +184,15 @@
           </template>
         </van-field>
         <div style="margin: 16px;">
-          <van-button v-if="!!user.profile.mobile" style="width: 100%;padding: 10px;" round block type="primary"  @click="onSubmit3">
+          <!-- <van-button v-if="!!user.profile.mobile" style="width: 100%;padding: 10px;" round block type="primary"  @click="onSubmit3">
             解绑
-          </van-button>
-          <van-button v-else round block type="primary" style="width: 100%;padding: 10px;"  @click="onSubmit4">
+          </van-button> -->
+          <van-button round block type="primary" style="width: 100%;padding: 10px;"  native-type="submit">
             绑定
           </van-button>
         </div>
       </van-form>
+      <mob-switch-mobile v-else/>
     </div>
   </div>
 </template>
@@ -200,7 +204,8 @@ import { resetPassword, setPassword, userAccount, unbindCaptcha, clearMobile, bi
 import Message from '@/utils/Message'
 import { useStore } from '@/store/index'
 import { showSuccessToast, showFailToast } from 'vant'
-
+import switchMoble from './pane/switchMoble.vue'
+import mobSwitchMobile from './pane/mobSwitchMobile.vue'
 const { user } = useStore()
 const img:any = inject('img')
 const active = ref('a')
@@ -362,6 +367,7 @@ const submitForm4 = async(formEl: FormInstance | undefined) => {
         clearInterval(interval)
         smsMessage.value = '获取验证码'
         can_send.value = true
+        activeName.value = 'forth'
       }).catch((error) => {
         console.log(error)
         Message.error(error.data.msg)
@@ -389,6 +395,12 @@ const getCaptcha = async() => {
   })
 }
 const getCaptcha2 = async() => {
+  if (!ruleForm3.mobile) {
+    return showFailToast('请输入手机号')
+  }
+  if (ruleForm3.mobile.length !== 11) {
+    return showFailToast('请输入正确的手机号')
+  }
   await bindCaptcha({ mobile: ruleForm3.mobile }).then((res) => {
     console.log(res)
     can_send.value = false
@@ -456,21 +468,21 @@ const onSubmit2 = async() => {
     showFailToast(error.data.msg)
   })
 }
-const onSubmit3 = async() => {
-  await clearMobile({ captcha: ruleForm3.captcha }).then(async(res) => {
-    console.log(res)
-    showSuccessToast(res.data.msg)
-    await user.getUserProfile()
-    ruleForm3.mobile = user.profile.mobile
-    ruleForm3.captcha = ''
-    clearInterval(interval)
-    smsMessage.value = '获取验证码'
-    can_send.value = true
-  }).catch((error) => {
-    console.log(error)
-    showFailToast(error.data.msg)
-  })
-}
+// const onSubmit3 = async() => {
+//   await clearMobile({ captcha: ruleForm3.captcha }).then(async(res) => {
+//     console.log(res)
+//     showSuccessToast(res.data.msg)
+//     await user.getUserProfile()
+//     ruleForm3.mobile = user.profile.mobile
+//     ruleForm3.captcha = ''
+//     clearInterval(interval)
+//     smsMessage.value = '获取验证码'
+//     can_send.value = true
+//   }).catch((error) => {
+//     console.log(error)
+//     showFailToast(error.data.msg)
+//   })
+// }
 const onSubmit4 = async() => {
   await bindMobile({ mobile: ruleForm3.mobile, captcha: ruleForm3.captcha }).then(async(res) => {
     console.log(res)
@@ -481,6 +493,7 @@ const onSubmit4 = async() => {
     clearInterval(interval)
     smsMessage.value = '获取验证码'
     can_send.value = true
+    activeName.value = 'first'
   }).catch((error) => {
     console.log(error)
     showFailToast(error.data.msg)
@@ -489,6 +502,7 @@ const onSubmit4 = async() => {
 const pattern = ref<RegExp>(/^[a-zA-Z][a-zA-Z0-9]{5,19}$/)
 const pattern2 = ref<RegExp>(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)
 const account = ref<string>('')
+const activeName = ref<'first'|'second'|'third'|'forth'>('first')
 onMounted(async() => {
   from.value = parseInt(localStorage.getItem('from') as string)as 1 | 2
   console.log(from.value)