✅ test: wecom scan test6

src/views/system/login/component/scan.vue

@@ -1,10 +1,19 @@
 <script lang="ts" setup>
-import { ref, defineComponent, onMounted } from 'vue';
-import QRCode from 'qrcodejs2-fixes';
+import { ref, defineComponent, onMounted, watch } from 'vue'
+import QRCode from 'qrcodejs2-fixes'
 import * as ww from '@wecom/jssdk'
 import { WeComLogin } from '../api'
 import emitter from '/@/utils/emitter'
 
+const props = defineProps({
+  isScan: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+console.log(props.isScan)
+
 function createWXQRCode() {
   ww.createWWLoginPanel({
     el: '#wx_qrcode',
@@ -21,7 +30,6 @@ function createWXQRCode() {
       console.log(isWeComLogin)
     },
     onLoginSuccess({ code }) {
-      // console.log({ code })
       handleWeComLogin({ code: code, state: 'Wechat' })
     },
     onLoginFail(err) {
@@ -35,7 +43,7 @@ async function handleWeComLogin(query) {
     const res = await WeComLogin(query)
     console.log('res', res)
     if (res.code === '2000') {
-      emitter.emit('scan-wecomLogin', {loginInfo: res.data} )
+      emitter.emit('scan-wecomLogin', { loginInfo: res.data })
     }
   } catch (error) {
     console.log('error:', error)
@@ -43,8 +51,11 @@ async function handleWeComLogin(query) {
 }
 
 onMounted(() => {
-  createWXQRCode()
-})
+  if (props.isScan) {
+    createWXQRCode();
+  }
+});
+
 
 // export default defineComponent({
 //   name: 'loginScan',
@@ -71,33 +82,36 @@ onMounted(() => {
 </script>
 
 <template>
-	<div class="login-scan-container">
-		<div ref="qrcodeRef"></div>
-		<div class="font12 mt20 login-msg">{{ $t('message.scan.text') }}</div>
-	</div>
+  <div class="login-scan-container">
+    <div id="wx_qrcode" style="width: 260px; height: 260px;"></div>
+    <div class="font12 mt20 login-msg">{{ $t('message.scan.text') }}</div>
+  </div>
 </template>
 
 <style scoped lang="scss">
 .login-scan-animation {
-	opacity: 0;
-	animation-name: error-num;
-	animation-duration: 0.5s;
-	animation-fill-mode: forwards;
+  opacity: 0;
+  animation-name: error-num;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
 }
+
 .login-scan-container {
-	padding: 20px;
-	display: flex;
-	flex-direction: column;
-	text-align: center;
-	@extend .login-scan-animation;
-	animation-delay: 0.1s;
-	:deep(img) {
-		margin: auto;
-	}
-	.login-msg {
-		color: var(--el-text-color-placeholder);
-		@extend .login-scan-animation;
-		animation-delay: 0.2s;
-	}
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  @extend .login-scan-animation;
+  animation-delay: 0.1s;
+
+  :deep(img) {
+    margin: auto;
+  }
+
+  .login-msg {
+    color: var(--el-text-color-placeholder);
+    @extend .login-scan-animation;
+    animation-delay: 0.2s;
+  }
 }
 </style>

src/views/system/login/index.vue

@@ -76,7 +76,7 @@ onMounted(() => {
                 </el-tab-pane> -->
               </el-tabs>
             </div>
-            <Scan v-if="state.isScan" />
+            <Scan v-if="state.isScan" :isScan="state.isScan" />
             <div class="login-content-main-sacn" @click="showScan">
               <i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
               <div class="login-content-main-sacn-delta"></div>