Merge pull request #4 from OVINC-CN/feat_wechat_login

feat: wechat quick login

src/App.vue

@@ -103,11 +103,11 @@
 <script setup>
 import {computed, onMounted, ref, watch} from 'vue';
 import {useStore} from 'vuex';
-import {locale, langOption, changeLangAndReload} from './locale';
+import {locale, langOption, changeLangAndReload} from '@/locale';
 import {useI18n} from 'vue-i18n';
 import {useRouter} from 'vue-router';
 import Aegis from 'aegis-web-sdk';
-import {getRUMConfigAPI} from './api/trace';
+import {getRUMConfigAPI} from '@/api/trace';
 
 // locale
 const i18n = useI18n();

src/api/app.js

@@ -1,4 +1,4 @@
-import http from './index';
+import http from '@/api/index';
 
 export const listAllAppAPI = (params) =>
   new Promise((resolve, reject) => {

src/api/home.js

@@ -1,4 +1,4 @@
-import http from './index';
+import http from '@/api/index';
 
 export const changeLangAPI = (language) =>
   new Promise((resolve, reject) => {

src/api/index.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
-import globalContext from '../context';
-import router from '../router';
+import globalContext from '@/context';
+import router from '@/router';
 
 const http = axios;
 

src/api/tcaptcha.js

@@ -1,4 +1,4 @@
-import http from './index';
+import http from '@/api/index';
 
 export const getTCaptchaConfigAPI = () =>
   new Promise((resolve, reject) => {

src/api/trace.js

@@ -1,4 +1,4 @@
-import http from './index';
+import http from '@/api/index';
 
 export const getRUMConfigAPI = () =>
   new Promise((resolve, reject) => {

src/api/user.js

@@ -1,4 +1,4 @@
-import http from './index';
+import http from '@/api/index';
 
 export const getUserInfoAPI = () =>
   new Promise((resolve, reject) => {

src/components/LoginBox.vue

@@ -103,8 +103,20 @@
     </a-space>
     <a-space
       id="wxlogin"
-      v-if="useWeChat && !useCurrent"
+      v-if="useWeChat && !useCurrent && !weChatQuickLoginUrl"
     />
+    <a-space
+      style="width: 100%; align-items: center; justify-content: center; margin: 20px 0"
+      v-if="useWeChat && !useCurrent && weChatQuickLoginUrl"
+    >
+      <a-button
+        type="primary"
+        @click="weChatQuickLogin"
+        status="success"
+      >
+        <icon-wechat style="margin-right: 8px" />{{ $t('WeChatQuickLogin') }}
+      </a-button>
+    </a-space>
     <div
       style="width: 100%; text-align: center; margin-bottom: 20px"
       v-if="useWeChat && !useCurrent"
@@ -149,13 +161,13 @@
 <script setup>
 import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
-import {getUserInfoAPI, getWeChatConfigAPI, oauthCodeAPI, signInAPI, weChatLoginAPI} from '../api/user';
+import {getUserInfoAPI, getWeChatConfigAPI, oauthCodeAPI, signInAPI, weChatLoginAPI} from '@/api/user';
 import {Message, Modal} from '@arco-design/web-vue';
-import {handleLoading} from '../utils/loading';
+import {handleLoading} from '@/utils/loading';
 import {useStore} from 'vuex';
-import globalContext from '../context';
-import {hashPassword} from '../utils/encrypt';
-import {checkTCaptcha} from '../utils/tcaptcha';
+import globalContext from '@/context';
+import {hashPassword} from '@/utils/encrypt';
+import {checkTCaptcha} from '@/utils/tcaptcha';
 import {useRouter} from 'vue-router';
 
 const router = useRouter();
@@ -265,24 +277,37 @@ const quickLogin = () => {
 // WeChat
 const wechatCode = computed(() => store.state.weChatCode);
 const useWeChat = ref(true);
+const weChatQuickLoginUrl = ref('');
+const weChatQuickLogin = () => window.location.href = weChatQuickLoginUrl.value;
 const initWeChatLogin = () => {
   useWeChat.value = true;
   const url = new URL(window.location.href);
   const next = url.searchParams.get('next');
   const redirectURI = `${globalContext.siteUrl}/login/?next=${encodeURIComponent(next)}`;
   getWeChatConfigAPI().then((res) => {
     if (res.data && res.data.app_id) {
-      // eslint-disable-next-line no-undef
-      new WxLogin({
-        self_redirect: false,
-        id: 'wxlogin',
-        appid: res.data.app_id,
-        scope: 'snsapi_login',
-        redirect_uri: encodeURIComponent(redirectURI),
-        state: res.data.state,
-        style: '',
-        href: 'https://www.ovinc.cn/extra-assets/css/wechat_login.css?v=1718266759',
-      });
+      if (res.data.is_wechat) {
+        weChatQuickLoginUrl.value =
+          'https://open.weixin.qq.com/connect/oauth2/authorize' +
+          `?appid=${res.data.app_id}` +
+          `&redirect_uri=${encodeURIComponent(redirectURI)}` +
+          '&response_type=code' +
+          '&scope=snsapi_userinfo' +
+          `&state=${res.data.state}` +
+          '#wechat_redirect';
+      } else {
+        // eslint-disable-next-line no-undef
+        new WxLogin({
+          self_redirect: false,
+          id: 'wxlogin',
+          appid: res.data.app_id,
+          scope: 'snsapi_login',
+          redirect_uri: encodeURIComponent(redirectURI),
+          state: res.data.state,
+          style: '',
+          href: 'https://www.ovinc.cn/extra-assets/css/wechat_login.css?v=1718266759',
+        });
+      }
     } else {
       useWeChat.value = false;
     }
@@ -317,6 +342,7 @@ const checkWeChatLogin = () => {
   border: 1px solid var(--color-border-1);
   box-sizing: border-box;
   box-shadow: var(--shadow2-center);
+  width: 360px;
   overflow: hidden;
 }
 

src/components/RegistryBox.vue

@@ -188,12 +188,12 @@
 <script setup>
 import {computed, onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
-import {handleLoading} from '../utils/loading';
-import {signUpAPI, sendVerifyCodeAPI, getPhoneAreasAPI} from '../api/user';
+import {handleLoading} from '@/utils/loading';
+import {signUpAPI, sendVerifyCodeAPI, getPhoneAreasAPI} from '@/api/user';
 import {Message, Modal} from '@arco-design/web-vue';
 import {useStore} from 'vuex';
-import {hashPassword} from '../utils/encrypt';
-import {checkTCaptcha} from '../utils/tcaptcha';
+import {hashPassword} from '@/utils/encrypt';
+import {checkTCaptcha} from '@/utils/tcaptcha';
 import {useRouter} from 'vue-router';
 
 // route

src/components/ResetPassword.vue

@@ -149,12 +149,12 @@
 <script setup>
 import {onMounted, ref} from 'vue';
 import {useI18n} from 'vue-i18n';
-import {handleLoading} from '../utils/loading';
-import {getPhoneAreasAPI, resetPasswordAPI, sendVerifyCodeAPI} from '../api/user';
+import {handleLoading} from '@/utils/loading';
+import {getPhoneAreasAPI, resetPasswordAPI, sendVerifyCodeAPI} from '@/api/user';
 import {Message, Modal} from '@arco-design/web-vue';
-import {hashPassword} from '../utils/encrypt';
-import globalContext from '../context';
-import {checkTCaptcha} from '../utils/tcaptcha';
+import {hashPassword} from '@/utils/encrypt';
+import globalContext from '@/context';
+import {checkTCaptcha} from '@/utils/tcaptcha';
 
 // loading
 const loading = ref(false);

src/locale/en-us.js

@@ -142,6 +142,7 @@ const mEnUS = {
   UserAgreement: 'User Agreement',
   PrivacyAgreement: 'Privacy Agreement',
   alreadyReadAgreement: 'I\'ve read and agree to ',
+  WeChatQuickLogin: 'WeChat Quick Login',
 };
 
 export default mEnUS;

src/locale/index.js

@@ -1,9 +1,9 @@
 import {createI18n} from 'vue-i18n';
 import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
 import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
-import mZhCN from './zh-cn';
-import mEnUS from './en-us';
-import {changeLangAPI} from '../api/home';
+import mZhCN from '@/locale/zh-cn';
+import mEnUS from '@/locale/en-us';
+import {changeLangAPI} from '@/api/home';
 
 // language option
 export const langOption = [

src/locale/zh-cn.js

@@ -142,6 +142,7 @@ const mZhCN = {
   UserAgreement: '用户协议',
   PrivacyAgreement: '隐私协议',
   alreadyReadAgreement: '我已阅读并同意',
+  WeChatQuickLogin: '微信授权登录',
 };
 
 export default mZhCN;

src/main.js

@@ -1,8 +1,8 @@
 import {createApp} from 'vue';
-import App from './App.vue';
-import router from './router';
-import store from './store';
-import i18n from './locale';
+import App from '@/App.vue';
+import router from '@/router';
+import store from '@/store';
+import i18n from '@/locale';
 
 import ArcoVue from '@arco-design/web-vue';
 import '@arco-design/web-vue/dist/arco.css';

src/router/index.js

@@ -4,27 +4,27 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: () => import('../views/Home.vue'),
+    component: () => import('@/views/Home.vue'),
   },
   {
     path: '/login/',
     name: 'Login',
-    component: () => import('../views/Login.vue'),
+    component: () => import('@/views/Login.vue'),
   },
   {
     path: '/reset-password/',
     name: 'ResetPassword',
-    component: () => import('../views/ResetPassword.vue'),
+    component: () => import('@/views/ResetPassword.vue'),
   },
   {
     path: '/agreement/:type/',
     name: 'Agreement',
-    component: () => import('../views/Agreement.vue'),
+    component: () => import('@/views/Agreement.vue'),
   },
   {
     path: '/:pathMatch(.*)*',
     name: 'Notfound',
-    component: () => import('../views/Error404.vue'),
+    component: () => import('@/views/Error404.vue'),
   },
 ];
 

src/store/index.js

@@ -1,6 +1,6 @@
 import {createStore} from 'vuex';
-import {getUserInfoAPI} from '../api/user';
-import {listMetaConfigAPI} from '../api/home';
+import {getUserInfoAPI} from '@/api/user';
+import {listMetaConfigAPI} from '@/api/home';
 
 const store = createStore({
   state() {

src/utils/tcaptcha.js

@@ -1,5 +1,5 @@
-import {getTCaptchaConfigAPI} from '../api/tcaptcha';
-import {tCaptchaLocale} from '../locale';
+import {getTCaptchaConfigAPI} from '@/api/tcaptcha';
+import {tCaptchaLocale} from '@/locale';
 
 export const checkTCaptcha = (callback) => {
   getTCaptchaConfigAPI().then(

src/views/Home.vue

@@ -123,8 +123,8 @@
 
 <script setup>
 import {computed, onMounted, ref} from 'vue';
-import ApplicationDisplay from '../components/ApplicationDisplay.vue';
-import {listAllAppAPI} from '../api/app';
+import ApplicationDisplay from '@/components/ApplicationDisplay.vue';
+import {listAllAppAPI} from '@/api/app';
 import {useStore} from 'vuex';
 
 const apps = ref([]);

src/views/Login.vue

@@ -39,9 +39,9 @@
 <script setup>
 import {useRoute, useRouter} from 'vue-router';
 import {computed, ref} from 'vue';
-import LoginBox from '../components/LoginBox.vue';
-import RegistryBox from '../components/RegistryBox.vue';
-import globalContext from '../context';
+import LoginBox from '@/components/LoginBox.vue';
+import RegistryBox from '@/components/RegistryBox.vue';
+import globalContext from '@/context';
 
 // route
 const route = useRoute();

src/views/ResetPassword.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import ResetPassword from '../components/ResetPassword.vue';
+import ResetPassword from '@/components/ResetPassword.vue';
 </script>
 
 <style scoped>

vite.config.js

@@ -1,5 +1,6 @@
 import {defineConfig} from 'vite';
 import vue from '@vitejs/plugin-vue';
+import path from 'path';
 
 export default defineConfig({
   plugins: [vue()],
@@ -15,6 +16,11 @@ export default defineConfig({
     host: process.env.HOST,
     port: 8080,
   },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
   preview: {},
   css: {
     preprocessorOptions: {