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

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1723434190230') format('woff2'),
-       url('iconfont.woff?t=1723434190230') format('woff'),
-       url('iconfont.ttf?t=1723434190230') format('truetype');
+  src: url('iconfont.woff2?t=1723593727785') format('woff2'),
+       url('iconfont.woff?t=1723593727785') format('woff'),
+       url('iconfont.ttf?t=1723593727785') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-email:before {
+  content: "\e670";
+}
+
+.icon-mobile:before {
+  content: "\e79a";
+}
+
 .icon-drag:before {
   content: "\e8ec";
 }

web/src/assets/iconfont/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "15838472",
+      "name": "email",
+      "font_class": "email",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "6151052",
+      "name": "mobile-alt",
+      "font_class": "mobile",
+      "unicode": "e79a",
+      "unicode_decimal": 59290
+    },
     {
       "icon_id": "15617554",
       "name": "drag",

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>

web/src/store/system.js

@@ -6,6 +6,7 @@
 // * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
 import Storage from "good-storage";
+import {useRouter} from "vue-router";
 
 const MOBILE_THEME = process.env.VUE_APP_KEY_PREFIX + "MOBILE_THEME"
 const ADMIN_THEME = process.env.VUE_APP_KEY_PREFIX + "ADMIN_THEME"
@@ -62,4 +63,12 @@ export function FormatFileSize(bytes) {
     const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+export function setRoute(path) {
+    Storage.set(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_',path)
+}
+
+export function getRoute() {
+    return Storage.get(process.env.VUE_APP_KEY_PREFIX + 'ROUTE_')
 }

web/src/views/Login.vue

@@ -114,7 +114,7 @@ onMounted(() => {
   }).catch(() => {
   })
 
-  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/views/LoginCallback.vue

@@ -39,9 +39,10 @@ import {useRouter} from "vue-router"
 import {ElMessage, ElMessageBox} from "element-plus";
 import {httpGet} from "@/utils/http";
 import {setUserToken} from "@/store/session";
-import {isMobile} from "@/utils/libs";
 import Clipboard from "clipboard";
 import {showMessageError, showMessageOK} from "@/utils/dialog";
+import {getRoute} from "@/store/system";
+import {checkSession, removeUserInfo} from "@/store/cache";
 
 const winHeight = ref(window.innerHeight)
 const loading = ref(true)
@@ -52,12 +53,25 @@ const password = ref('')
 
 
 const code = router.currentRoute.value.query.code
+const action = router.currentRoute.value.query.action
 if (code === "") {
   ElMessage.error({message: "登录失败：code 参数不能为空",duration: 2000, onClose: () => router.push("/")})
 } else {
+  checkSession().then(user => {
+    // bind user
+    doLogin(user.id)
+  }).catch(() => {
+    doLogin(0)
+  })
+}
+
+const doLogin = (userId) => {
   // 发送请求获取用户信息
-  httpGet("/api/user/clogin/callback",{login_type: "wx",code: code}).then(res => {
-    setUserToken(res.data.token)
+  httpGet("/api/user/clogin/callback",{login_type: "wx",code: code, action:action, user_id: userId}).then(res => {
+    removeUserInfo()
+    if (res.data.token) {
+      setUserToken(res.data.token)
+    }
     if (res.data.username) {
       username.value = res.data.username
       password.value = res.data.password
@@ -96,11 +110,7 @@ onUnmounted(() => {
 
 const finishLogin = () => {
   show.value = false
-  if (isMobile()) {
-    router.push('/mobile')
-  } else {
-    router.push('/chat')
-  }
+  router.push(getRoute())
 }
 </script>
 

web/src/views/Member.vue

@@ -7,13 +7,19 @@
 
           <el-row class="user-opt" :gutter="20">
             <el-col :span="12">
-              <el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
+              <el-button type="primary" @click="showBindEmailDialog = true">绑定邮箱</el-button>
             </el-col>
             <el-col :span="12">
               <el-button type="primary" @click="showBindMobileDialog = true">绑定手机</el-button>
             </el-col>
+            <el-col :span="12">
+              <el-button type="primary" @click="showThirdLoginDialog = true">第三方登录</el-button>
+            </el-col>
+            <el-col :span="12">
+              <el-button type="primary" @click="showPasswordDialog = true">修改密码</el-button>
+            </el-col>
             <el-col :span="24">
-              <el-button type="success" @click="showRedeemVerifyDialog = true">兑换码核销
+              <el-button type="primary" @click="showRedeemVerifyDialog = true">卡密兑换
               </el-button>
             </el-col>
 
@@ -95,6 +101,9 @@
 
       <bind-mobile v-if="isLogin" :show="showBindMobileDialog" @hide="showBindMobileDialog = false"/>
 
+      <bind-email v-if="isLogin" :show="showBindEmailDialog" @hide="showBindEmailDialog = false"/>
+      <third-login v-if="isLogin" :show="showThirdLoginDialog" @hide="showThirdLoginDialog = false"/>
+
       <redeem-verify v-if="isLogin" :show="showRedeemVerifyDialog" @hide="redeemCallback"/>
 
       <el-dialog
@@ -149,6 +158,8 @@ import {removeUserToken} from "@/store/session";
 import UserOrder from "@/components/UserOrder.vue";
 import CountDown from "@/components/CountDown.vue";
 import {useSharedStore} from "@/store/sharedata";
+import BindEmail from "@/components/BindEmail.vue";
+import ThirdLogin from "@/components/ThirdLogin.vue";
 
 const list = ref([])
 const showPayDialog = ref(false)
@@ -156,9 +167,11 @@ const vipImg = ref("/images/vip.png")
 const enableReward = ref(false) // 是否启用众筹功能
 const rewardImg = ref('/images/reward.png')
 const qrcode = ref("")
-const showPasswordDialog = ref(false);
-const showBindMobileDialog = ref(false);
-const showRedeemVerifyDialog = ref(false);
+const showPasswordDialog = ref(false)
+const showBindMobileDialog = ref(false)
+const showBindEmailDialog = ref(false)
+const showRedeemVerifyDialog = ref(false)
+const showThirdLoginDialog = ref(false)
 const text = ref("")
 const user = ref(null)
 const isLogin = ref(false)