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

web/src/components/BindEmail.vue

@@ -0,0 +1,108 @@
+<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="email !== ''">当前已绑定邮箱：{{ email }}</div>
+
+      <el-form label-position="top">
+        <el-form-item label="邮箱地址">
+          <el-input v-model="form.email"/>
+        </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.email" type="email"/>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="save">
+          提交绑定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {computed, ref, watch} from "vue";
+import SendMsg from "@/components/SendMsg.vue";
+import {ElMessage} from "element-plus";
+import {httpPost} from "@/utils/http";
+import {checkSession, removeUserInfo} from "@/store/cache";
+
+const props = defineProps({
+  show: Boolean,
+});
+
+const showDialog = computed(() => {
+  return props.show
+})
+
+const title = ref('绑定邮箱')
+const email = ref('')
+const form = ref({
+  email: '',
+  code: ''
+})
+
+watch(showDialog, (val) => {
+  if (val) {
+    form.value.code = ''
+    form.value.email = ''
+    checkSession().then(user => {
+      email.value = user.email
+    })
+  }
+})
+
+const emits = defineEmits(['hide']);
+
+const save = () => {
+  if (form.value.code === '') {
+    return ElMessage.error("请输入验证码");
+  }
+
+  httpPost('/api/user/bind/email', form.value).then(() => {
+    removeUserInfo()
+    ElMessage.success("绑定成功")
+    emits('hide')
+  }).catch(e => {
+    ElMessage.error("绑定失败：" + e.message);
+  })
+}
+
+const close = function () {
+  emits('hide');
+}
+</script>
+
+<style lang="stylus" scoped>
+.form {
+  .text-center {
+    text-align center
+    padding-bottom 15px
+    font-size 14px
+    color #a1a1a1
+    font-weight 700
+  }
+
+  .el-form-item__content {
+    .el-row {
+      width 100%
+    }
+  }
+}
+</style>

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>
 

web/src/components/LoginDialog.vue

@@ -66,7 +66,7 @@
             <div class="c-login" v-if="wechatLoginURL !== ''">
               <div class="text">其他登录方式：</div>
               <div class="login-type">
-                <a class="wechat-login" :href="wechatLoginURL"><i class="iconfont icon-wechat"></i></a>
+                <a class="wechat-login" :href="wechatLoginURL"  @click="setRoute(router.currentRoute.value.path)"><i class="iconfont icon-wechat"></i></a>
               </div>
             </div>
           </el-col>
@@ -249,6 +249,8 @@ import {arrayContains} from "@/utils/libs";
 import {getSystemInfo} from "@/store/cache";
 import Captcha from "@/components/Captcha.vue";
 import ResetPass from "@/components/ResetPass.vue";
+import {setRoute} from "@/store/system";
+import {useRouter} from "vue-router";
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -282,9 +284,10 @@ const emits = defineEmits(['hide', 'success']);
 const action = ref("login")
 const enableVerify = ref(false)
 const showResetPass = ref(false)
+const router = useRouter()
 
 onMounted(() => {
-  const returnURL = `${location.protocol}//${location.host}/login/callback`
+  const returnURL = `${location.protocol}//${location.host}/login/callback?action=login`
   httpGet("/api/user/clogin?return_url="+returnURL).then(res => {
     wechatLoginURL.value = res.data.url
   }).catch(e => {

web/src/components/RedeemVerify.vue

@@ -2,7 +2,6 @@
   <el-dialog
       v-model="showDialog"
       :close-on-click-modal="true"
-      :show-close="mobile !== ''"
       :before-close="close"
       :width="450"
       :title="title"

web/src/components/SendMsg.vue

@@ -58,7 +58,7 @@ const doSendMsg = (data) => {
   canSend.value = false
   httpPost('/api/sms/code', {receiver: props.receiver, key: data.key, dots: data.dots, x:data.x}).then(() => {
     showMessageOK('验证码发送成功')
-    let time = 120
+    let time = 60
     btnText.value = time
     const handler = setInterval(() => {
       time = time - 1

web/src/components/ThirdLogin.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-dialog
+      v-model="showDialog"
+      :close-on-click-modal="true"
+      style="max-width: 400px"
+      @close="close"
+      :title="title"
+  >
+    <div class="third-login" v-loading="loading">
+      <div class="item" v-if="wechatBindURL !== ''">
+        <a class="link" :href="wechatBindURL"><i class="iconfont icon-wechat"></i></a>
+        <span class="text ok" v-if="openid !== ''">已绑定</span>
+        <span class="text" v-else>未绑定</span>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import {computed, ref, watch} from "vue";
+import {httpGet} from "@/utils/http";
+import {checkSession} from "@/store/cache";
+import {showMessageError} from "@/utils/dialog";
+
+const props = defineProps({
+  show: Boolean,
+});
+const emits = defineEmits(['hide']);
+
+const showDialog = computed(() => {
+  return props.show
+})
+
+
+const title = ref('绑定第三方登录')
+const openid = ref('')
+const wechatBindURL = ref('')
+const loading = ref(true)
+
+watch(showDialog, (val) => {
+  if (val) {
+    checkSession().then(user => {
+      openid.value = user.openid
+    })
+    const returnURL = `${location.protocol}//${location.host}/login/callback?action=bind`
+    httpGet("/api/user/clogin?return_url="+returnURL).then(res => {
+      wechatBindURL.value = res.data.url
+      loading.value = false
+    }).catch(e => {
+      showMessageError(e.message)
+    })
+  }
+})
+
+const close = function () {
+  emits('hide');
+}
+</script>
+
+<style lang="stylus" scoped>
+.third-login {
+  display flex
+  justify-content center
+  min-height 100px
+
+  .item {
+    display flex
+    flex-flow column
+    align-items center
+
+    .link {
+      display flex
+      .iconfont {
+        font-size 30px
+        cursor pointer
+        background #e9f1f6
+        padding 10px
+        border-radius 50%
+      }
+      margin-bottom 10px
+    }
+
+
+    .text {
+      font-size 14px
+    }
+
+    .icon-wechat,.ok {
+      color: #0bc15f;
+    }
+  }
+}
+</style>