chore(个人充值): 支付宝二维码支付调整

src/views/equity/components/pay-sidebar.vue

@@ -296,35 +296,48 @@ function handlePayQrCodeRefresh() {
     </div>
 
     <div class="mt-[26px] flex justify-center">
-      <div v-if="payInfo.url" class="relative">
-        <n-qr-code
-          class="align-bottom"
-          :class="isPayQrcodeInvalid ? 'blur-sm' : ''"
-          :value="payInfo.url"
-          :size="140"
-          :padding="0"
-        />
-        <Transition name="mask">
-          <div v-show="isPaymentSuccess" class="flex-center absolute inset-0 flex bg-[rgba(0,0,0,0.6)]">
-            <div
-              class="flex-center flex h-[50px] w-[50px] rounded-full border-[4px] border-solid border-[#fff] bg-[#52c41a]"
-            >
-              <i class="iconfont icon-queren font-600 text-[28px] text-white"></i>
+      <template v-if="payInfo.url">
+        <div v-if="currentPaymentMethod === 'wechatpay'" class="relative">
+          <n-qr-code
+            class="align-bottom"
+            :class="isPayQrcodeInvalid ? 'blur-sm' : ''"
+            :value="payInfo.url"
+            :size="140"
+            :padding="0"
+          />
+          <Transition name="mask">
+            <div v-show="isPaymentSuccess" class="flex-center absolute inset-0 flex bg-[rgba(0,0,0,0.6)]">
+              <div
+                class="flex-center flex h-[50px] w-[50px] rounded-full border-[4px] border-solid border-[#fff] bg-[#52c41a]"
+              >
+                <i class="iconfont icon-queren font-600 text-[28px] text-white"></i>
+              </div>
             </div>
-          </div>
-        </Transition>
+          </Transition>
 
-        <Transition name="mask">
-          <div v-show="isPayQrcodeInvalid" class="flex-center absolute inset-0 flex">
-            <div class="absolute inset-0 bg-[rgba(0,0,0,0.6)] blur-sm"></div>
+          <Transition name="mask">
+            <div v-show="isPayQrcodeInvalid" class="flex-center absolute inset-0 flex">
+              <div class="absolute inset-0 bg-[rgba(0,0,0,0.6)] blur-sm"></div>
+
+              <i
+                class="iconfont icon-huanyihuan font-600 z-1 relative cursor-pointer text-[30px] text-[#fff]"
+                @click="handlePayQrCodeRefresh"
+              ></i>
+            </div>
+          </Transition>
+        </div>
+        <div v-else-if="currentPaymentMethod === 'alipay'" class="flex-center flex">
+          <iframe
+            :src="payInfo.url"
+            frameborder="0"
+            width="140"
+            height="140"
+            class="object-center"
+            scrolling="no"
+          ></iframe>
+        </div>
+      </template>
 
-            <i
-              class="iconfont icon-huanyihuan font-600 z-1 relative cursor-pointer text-[30px] text-[#fff]"
-              @click="handlePayQrCodeRefresh"
-            ></i>
-          </div>
-        </Transition>
-      </div>
       <div v-else class="flex-center flex h-[140px] w-[140px]">
         <n-spin size="large" />
       </div>

src/views/equity/components/point-recharge-modal.vue

@@ -308,35 +308,47 @@ function handlePayQrCodeRefresh() {
         </ul>
       </div>
       <div class="mt-[26px] flex justify-center">
-        <div v-if="payInfo.url" class="relative">
-          <n-qr-code
-            class="align-bottom"
-            :class="isPayQrcodeInvalid ? 'blur-sm' : ''"
-            :value="payInfo.url"
-            :size="140"
-            :padding="0"
-          />
-          <Transition name="mask">
-            <div v-show="isPaymentSuccess" class="flex-center absolute inset-0 flex bg-[rgba(0,0,0,0.6)]">
-              <div
-                class="flex-center flex h-[50px] w-[50px] rounded-full border-[4px] border-solid border-[#fff] bg-[#52c41a]"
-              >
-                <i class="iconfont icon-queren font-600 text-[28px] text-white"></i>
+        <template v-if="payInfo.url">
+          <div v-if="currentPaymentMethod === 'wechatpay'" class="relative">
+            <n-qr-code
+              class="align-bottom"
+              :class="isPayQrcodeInvalid ? 'blur-sm' : ''"
+              :value="payInfo.url"
+              :size="140"
+              :padding="0"
+            />
+            <Transition name="mask">
+              <div v-show="isPaymentSuccess" class="flex-center absolute inset-0 flex bg-[rgba(0,0,0,0.6)]">
+                <div
+                  class="flex-center flex h-[50px] w-[50px] rounded-full border-[4px] border-solid border-[#fff] bg-[#52c41a]"
+                >
+                  <i class="iconfont icon-queren font-600 text-[28px] text-white"></i>
+                </div>
               </div>
-            </div>
-          </Transition>
-
-          <Transition name="mask">
-            <div v-show="isPayQrcodeInvalid" class="flex-center absolute inset-0 flex">
-              <div class="absolute inset-0 bg-[rgba(0,0,0,0.6)] blur-sm"></div>
-
-              <i
-                class="iconfont icon-huanyihuan font-600 z-1 relative cursor-pointer text-[30px] text-[#fff]"
-                @click="handlePayQrCodeRefresh"
-              ></i>
-            </div>
-          </Transition>
-        </div>
+            </Transition>
+
+            <Transition name="mask">
+              <div v-show="isPayQrcodeInvalid" class="flex-center absolute inset-0 flex">
+                <div class="absolute inset-0 bg-[rgba(0,0,0,0.6)] blur-sm"></div>
+
+                <i
+                  class="iconfont icon-huanyihuan font-600 z-1 relative cursor-pointer text-[30px] text-[#fff]"
+                  @click="handlePayQrCodeRefresh"
+                ></i>
+              </div>
+            </Transition>
+          </div>
+          <div v-else-if="currentPaymentMethod === 'alipay'" class="flex-center flex">
+            <iframe
+              :src="payInfo.url"
+              frameborder="0"
+              width="140"
+              height="140"
+              class="object-center"
+              scrolling="no"
+            ></iframe>
+          </div>
+        </template>
         <div v-else class="flex-center flex h-[140px] w-[140px]">
           <n-spin size="large" />
         </div>