使用微信扫一扫登陆

wujingjing

2025-03-21 b8a912728dc9f46504626d3384b4314b9d75bde3

 src/views/login/index_yw.vue

@@ -22,12 +22,27 @@
                  <div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }} 欢迎您！</div>
                  <div class="login-right-warp-main-form">
                     <div v-if="!state.isScan">
                        <el-tabs v-model="state.tabsActiveName">
                        <el-tabs v-model="state.tabsActiveName" @tab-change="handleTabChange">
                           <el-tab-pane :label="$t('message.label.one1')" name="account">
                              <Account  @login="handleAfterLogin"/>
                           </el-tab-pane>
                           <el-tab-pane :label="$t('message.label.two2')" name="mobile">
                              <Mobile  @login="handleAfterLogin"/>
                           </el-tab-pane>
                           <el-tab-pane label="微信" name="wechat">
                              <div id="wechat-login" class="flex justify-center items-center">
                                 <div class="flex flex-col items-center justify-center">
                                    <iframe
                                       ref="wechatQrRef"
                                       sandbox="allow-top-navigation allow-scripts"
                                       style="width: 300px; height: 213px; overflow: hidden"
                                       frameborder="0"
                                    ></iframe>
                                    <span class="relative top-[-10px]" :class="{ 'text-red-400': wechatTip.type === 'error' }">{{
                                       wechatTip.value
                                    }}</span>
                                 </div>
                              </div>
                           </el-tab-pane>
                        </el-tabs>
                     </div>
@@ -46,20 +61,22 @@
</template>

<script setup lang="ts" name="loginIndex">
import { storeToRefs } from 'pinia';
import { computed, defineAsyncComponent, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { computed, defineAsyncComponent, nextTick, onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import profileMan from '/@/assets/profile/man.svg';
import router from '/@/router';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useUserInfo } from '/@/stores/userInfo';
import { clearAccessTokens, accessSessionKey } from '/@/utils/request';
import { NextLoading } from '/@/utils/loading';
import { accessSessionKey, clearAccessTokens } from '/@/utils/request';
import { Local } from '/@/utils/storage';
import profileMan from '/@/assets/profile/man.svg';
import { SERVE_URL } from '/@/constants';
import { useLogin } from '/@/hooks/useLogin';

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -71,12 +88,23 @@
const LayoutFooter = defineAsyncComponent(() => import('/@/layout/footer/index.vue'));
const route = useRoute();


// 设置 footer 显示/隐藏
const isFooter = computed(() => {
   return themeConfig.value.isFooter && !route.meta.isIframe;
});

const getActiveLoginName = () => {
   const isWechatLogin = Local.get('isWechatLogin');
   if (isWechatLogin) {
      Local.remove('isWechatLogin');
      return 'wechat';
   }
   return 'account';
};

const state = reactive({
   tabsActiveName: 'account',
   tabsActiveName: getActiveLoginName(),
   isScan: false,
});

@@ -87,66 +115,97 @@
const loginMain = window.globalConfig.SoftWareInfo.loginMain;
const logoMini = window.globalConfig.SoftWareInfo.logoMini;
const loginBg = window.globalConfig.SoftWareInfo.loginBg;

const { t } = useI18n();
// 登录成功后的跳转
const signInSuccess = (isNoPower: boolean | undefined, currentTime) => {
   if (isNoPower) {
      ElMessage.warning('您没有登录权限');
      clearAccessTokens();
   } else {
      // 初始化登录成功时间问候语
      let currentTimeInfo = currentTime;
      // 登录成功，跳到转首页
      // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
      // console.log(route.query, 199);
      if (route.query?.redirect) {
         router.push({
            path: <string>route.query?.redirect,
            query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
         });
      } else {
         router.push('/');
      }
      // 登录成功提示
      const signInText = t('message.signInText');
      ElMessage.success(`${currentTimeInfo}，${signInText}`);
      // 添加 loading，防止第一次进入界面时出现短暂空白
      NextLoading.start();
   }
   // state.loading.signIn = false;
};
const handleAfterLogin = async (res, currentTime) => {
   Local.set(accessSessionKey, res.hswatersession);
   await useUserInfo().setUserInfos({
      userName: res.name,
      phoneNumber: res.phone,
      photo: profileMan,
   }); //缓存用户信息
   // state.loading.signIn = true;
   if (!themeConfig.value.isRequestRoutes) {
      // 前端控制路由，2、请注意执行顺序
      const isNoPower = await initFrontEndControlRoutes();
      // console.log(isNoPower,172)
      signInSuccess(isNoPower, currentTime);
   } else {
      // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
      // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
      const isNoPower = await initBackEndControlRoutes();
      // 执行完 initBackEndControlRoutes，再执行 signInSuccess
      // console.log(isNoPower,178)
      signInSuccess(isNoPower, currentTime);
   }
};
const { handleAfterLogin } = useLogin();
// 页面加载时
onMounted(() => {
   NextLoading.done();
   if (state.tabsActiveName === 'wechat') {
      nextTick(() => {
         openWechatLogin();
      });
   }
});

const scanClick = () => {
   // state.isScan = !state.isScan;
   return;
};
//#region ====================== 微信登陆 ======================

//切换用户登录页面
const handleTabChange = (item) => {
   resetWechatTip();
   switch (item) {
      case 'wechat':
         // getWechartQrCode();
         openWechatLogin();
         break;
      case 'accountUser':
         break;
      case 'phoneUser':
         break;
   }
};

const getWechatTipInfo = () => {
   const wechatLoginMsgInfo = Local.get('wechatLoginMsgInfo');
   if (wechatLoginMsgInfo) {
      Local.remove('wechatLoginMsgInfo');
      return wechatLoginMsgInfo;
   }
   return { type: 'info', value: '使用微信扫一扫登陆' };
};

const wechatTip = ref(getWechatTipInfo());

const resetWechatTip = () => {
   wechatTip.value = {
      type: 'info',
      value: '使用微信扫一扫登陆',
   };
};

const wechatQrRef = ref<HTMLIFrameElement>();

const openWechatLogin = () => {
   if (!wechatQrRef.value) return;
   const url = `${SERVE_URL}JJJHHH/home?isWxLogin=Y`;
   const appid = 'wx4ea2dca37170074c';
   const state = (new Date().getTime() / 1000).toString();
   const base64 = btoa(`
   .impowerBox .title {display:none;}

   .impowerBox .status.status_browser  p:nth-of-type(2){
      display: none;
   }

   .impowerBox .qrcode {
   width: 170px;
   margin-top:0;

   }
   .impowerBox .status{
   }
      .info{
      display: none;
   }
   #tpl_for_iframe{
      height:100%;
      overflow: hidden;

          display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
	
   `);
   const wechatAuthUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${encodeURIComponent(
      `http://apiv3.xpump.net/User/wxUserLoginCB.html?from=wi&url=${url}`
   )}&response_type=code&scope=snsapi_login&state=${state}&href=data:text/css;base64,${base64}#wechat_redirect`;
   wechatQrRef.value.src = wechatAuthUrl;
};
//#endregion
</script>

<style scoped lang="scss">