整合登录注册页面

web/src/components/BindMobile.vue

@@ -1,37 +1,26 @@
 <template>
-  <el-dialog
-    v-model="showDialog"
-    :close-on-click-modal="true"
-    style="max-width: 400px"
-    @close="close"
-    :title="title"
-  >
-    <div class="form">
-      <div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
-
-      <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="0">
-            <el-col :span="16">
-              <el-input v-model="form.code" maxlength="6" />
-            </el-col>
-            <el-col :span="8" style="padding-left: 10px">
-              <send-msg :receiver="form.mobile" size="default" type="mobile" />
-            </el-col>
-          </el-row>
-        </el-form-item>
-      </el-form>
+  <div class="form">
+    <div class="text-center" v-if="mobile !== ''">当前已绑手机号：{{ mobile }}</div>
+    <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="0">
+          <el-col :span="16">
+            <el-input v-model="form.code" maxlength="6" />
+          </el-col>
+          <el-col :span="8" style="padding-left: 10px">
+            <send-msg :receiver="form.mobile" size="default" type="mobile" />
+          </el-col>
+        </el-row>
+      </el-form-item>
+    </el-form>
+    <div class="dialog-footer text-center">
+      <el-button type="primary" @click="save"> 保存 </el-button>
+      <el-button @click="emits('hide')"> 取消 </el-button>
     </div>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="save"> 提交绑定 </el-button>
-      </span>
-    </template>
-  </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -39,34 +28,18 @@ import SendMsg from '@/components/SendMsg.vue'
 import { checkSession } from '@/store/cache'
 import { httpPost } from '@/utils/http'
 import { ElMessage } from 'element-plus'
-import { computed, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 
-const props = defineProps({
-  show: Boolean,
-})
-
-const showDialog = computed(() => {
-  return props.show
-})
-
-const title = ref('绑定手机')
 const mobile = ref('')
 const form = ref({
   mobile: '',
   code: '',
 })
 
-watch(showDialog, (val) => {
-  if (val) {
-    form.value = {
-      mobile: '',
-      code: '',
-    }
-
-    checkSession().then((user) => {
-      mobile.value = user.mobile
-    })
-  }
+onMounted(() => {
+  checkSession().then((user) => {
+    mobile.value = user.mobile
+  })
 })
 
 const emits = defineEmits(['hide'])
@@ -85,10 +58,6 @@ const save = () => {
       ElMessage.error('绑定失败：' + e.message)
     })
 }
-
-const close = function () {
-  emits('hide')
-}
 </script>
 
 <style lang="scss" scoped>