Fix iOS scan QR code issue (#35)

change/@zhishuyun-hub-b4dc2427-79de-4626-a934-730f8db0912e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix ios scan qr issue",
+  "packageName": "@zhishuyun/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -43,7 +43,7 @@
     "highlight.js": "^11.7.0",
     "mac-scrollbar": "^0.13.5",
     "markdown-it": "^13.0.1",
-    "qrcode.vue": "^3.3.3",
+    "qrcode": "^1.5.1",
     "qs": "^6.11.2",
     "query-string": "^8.1.0",
     "typescript-cookie": "^1.0.3",
@@ -52,6 +52,7 @@
     "vue": "^3.2.6",
     "vue-codemirror": "^6.1.1",
     "vue-i18n": "^9.1.7",
+    "vue-qrcode": "^2.2.0",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",
     "vuex-persistedstate": "^4.0.0"

src/components/common/AuthPanel.vue

@@ -8,6 +8,15 @@
     :close-on-click-modal="false"
   >
     <iframe width="360" height="560" :src="iframeUrl" frameborder="0" />
+    <qr-code
+      v-if="qrLink"
+      :value="qrLink"
+      :width="230"
+      :height="230"
+      class="qrcode"
+      :type="'image/jpeg'"
+      :color="{ dark: '#000000ff', light: '#ffffffff' }"
+    />
   </el-dialog>
 </template>
 
@@ -16,11 +25,18 @@ import { defineComponent } from 'vue';
 import { ElDialog } from 'element-plus';
 import { getBaseUrlAuth } from '@/utils';
 import { getCookie } from 'typescript-cookie';
+import QrCode from 'vue-qrcode';
 
 export default defineComponent({
   name: 'AuthPanel',
   components: {
-    ElDialog
+    ElDialog,
+    QrCode
+  },
+  data() {
+    return {
+      qrLink: ''
+    };
   },
   computed: {
     iframeUrl() {
@@ -47,6 +63,7 @@ export default defineComponent({
       if (event.origin !== getBaseUrlAuth()) {
         return;
       }
+      console.debug('received from child page', event);
       if (event.data.name === 'login') {
         const data = event.data.data;
         const token = {
@@ -58,6 +75,13 @@ export default defineComponent({
         await this.$store.dispatch('getUser');
         window.location.reload();
       }
+      if (event.data.name === 'show_qr') {
+        const data = event.data.data;
+        this.qrLink = data.qrLink;
+      }
+      if (event.data.name === 'hide_qr') {
+        this.qrLink = '';
+      }
     });
   }
 });
@@ -68,4 +92,14 @@ export default defineComponent({
   width: 400px;
   height: 600px;
 }
+
+.qrcode {
+  width: 320px;
+  height: 320px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0.001;
+}
 </style>

src/components/order/WechatPay.vue

@@ -3,7 +3,7 @@
     <el-row class="paycodes">
       <el-col :span="12">
         <div class="paycode wechat">
-          <qr-code v-if="modelValue?.pay_url" :value="modelValue?.pay_url" :size="200" class="m-auto" />
+          <qr-code v-if="modelValue?.pay_url" :value="modelValue?.pay_url" :size="200" class="qrcode m-auto" />
           <p class="help-text">{{ $t('order.message.wechatPayHelp') }}</p>
         </div>
       </el-col>
@@ -20,7 +20,7 @@
 import { IOrder, IOrderDetailResponse, orderOperator, OrderState } from '@/operators';
 import { defineComponent } from 'vue';
 import { ElDialog, ElRow, ElCol } from 'element-plus';
-import QrCode from 'qrcode.vue';
+import QrCode from 'vue-qrcode';
 
 interface IData {
   refreshTimer: number | undefined;
@@ -95,6 +95,10 @@ export default defineComponent({
   width: 500px;
   margin: auto;
   .wechat {
+    .qrcode {
+      width: 200px;
+      height: 200px;
+    }
     .help-text {
       display: block;
       background-color: #00c800;

src/pages/distribution/Index.vue

@@ -205,7 +205,7 @@ import {
 } from '@/operators';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { IUser, userOperator } from '@/operators';
-import QrCode from 'qrcode.vue';
+import QrCode from 'vue-qrcode';
 import { ROUTE_DISTRIBUTION_HISTORY, ROUTE_DISTRIBUTION_INVITEES } from '@/router';
 
 interface IData {