add bind mobile, bind email, bind wechat function is ready

web/src/components/BindMobile.vue

@@ -2,24 +2,24 @@
   <el-dialog
       v-model="showDialog"
       :close-on-click-modal="true"
-      style="max-width: 600px"
-      :before-close="close"
+      style="max-width: 400px"
+      @close="close"
       :title="title"
   >
     <div class="form">
-      <div class="text-center">当前已绑手机号：{{ mobile }}</div>
+      <div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
 
-      <el-form :model="form" label-width="120px">
+      <el-form label-position="top">
         <el-form-item label="手机号">
           <el-input v-model="form.mobile"/>
         </el-form-item>
         <el-form-item label="验证码">
-          <el-row :gutter="20">
+          <el-row :gutter="0">
             <el-col :span="16">
               <el-input v-model="form.code" maxlength="6"/>
             </el-col>
-            <el-col :span="8">
-              <send-msg size="" :receiver="form.username" type="mobile"/>
+            <el-col :span="8" style="padding-left: 10px">
+              <send-msg :receiver="form.mobile" type="mobile"/>
             </el-col>
           </el-row>
         </el-form-item>
@@ -37,12 +37,11 @@
 </template>
 
 <script setup>
-import {computed, ref} from "vue";
+import {computed, ref, watch} from "vue";
 import SendMsg from "@/components/SendMsg.vue";
 import {ElMessage} from "element-plus";
 import {httpPost} from "@/utils/http";
-import {validateEmail, validateMobile} from "@/utils/validate";
-import {checkSession} from "@/store/cache";
+import {checkSession, removeUserInfo} from "@/store/cache";
 
 const props = defineProps({
   show: Boolean,
@@ -59,33 +58,37 @@ const form = ref({
   code: ''
 })
 
-checkSession().then(user => {
-  mobile.value = user.mobile
+watch(showDialog, (val) => {
+  if (val) {
+    form.value = {
+      mobile: '',
+      code: ''
+    }
+
+    checkSession().then(user => {
+      mobile.value = user.mobile
+    })
+  }
 })
 
 const emits = defineEmits(['hide']);
 
 const save = () => {
-  if (!validateMobile(form.value.mobile) && !validateEmail(form.value.mobile)) {
-    return ElMessage.error("请输入合法的手机号/邮箱地址")
-  }
   if (form.value.code === '') {
     return ElMessage.error("请输入验证码");
   }
 
-  httpPost('/api/user/bind/username', form.value).then(() => {
-    ElMessage.success({
-      message: '绑定成功',
-      duration: 1000,
-      onClose: () => emits('hide', false)
-    })
+  httpPost('/api/user/bind/mobile', form.value).then(() => {
+    removeUserInfo()
+    ElMessage.success("绑定成功")
+    emits('hide')
   }).catch(e => {
     ElMessage.error("绑定失败：" + e.message);
   })
 }
 
 const close = function () {
-  emits('hide', false);
+  emits('hide');
 }
 </script>