二维码居中

src/components/personalRecharge/index.vue

@@ -48,6 +48,7 @@
     <initPay
       v-if="itemInfo"
       :info="itemInfo"
+      :current="current"
       @stopInterval="null"
       @paySuccess="null"
     ></initPay>

src/components/personalRecharge/initPay.vue

@@ -1,26 +1,13 @@
 <!-- 支付组件 -->
 <template>
   <div v-if="payType && payQrCodeTxt" class="code pa-5 resume-box">
-    <div class="resume-header">
+    <!-- <div class="resume-header">
       <div class="resume-title">扫码支付</div>
-    </div>
-    <div class="d-flex align-end mt-3">
-      <div class="code-left">
-        <QrCode :text="payQrCodeTxt" :disabled="!remainderTimer" :width="170" @refresh="refreshQRCode" />
-      </div>
-      <div class="code-right ml-5">
-        <div class="price">
-          <span class="font-size-13">￥</span>
-          {{ FenYuanTransform(props.info?.payPrice || 0) }}
-        </div>
-        <div class="mt-3 d-flex align-center">
-          <span class="color-666 font-weight-bold mr-5">支付方式</span>
-          <!-- <v-chip-group v-model="payment" selected-class="text-primary" mandatory>
-            <v-chip filter v-for="k in paymentList" :key="k.value" :value="k.value" class="mr-3" label>
-              {{ k.label }}
-              <svg-icon class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
-            </v-chip>
-          </v-chip-group> -->
+    </div> -->
+    <div class="d-flex" :style="{'margin-left': mlArr[props.current-1] + 'px'}">
+      <div class="d-flex flex-column align-center my-2">
+        <div class="d-flex align-center">
+          <span class="color-666 font-weight-bold">支付方式：</span>
           <v-chip-group v-model="payType" selected-class="text-primary" column mandatory @update:modelValue="payTypeChange">
             <v-chip filter v-for="k in payTypeList" :key="k.code" :value="k.code" class="mr-3" label>
               {{ k.name }}
@@ -28,20 +15,24 @@
             </v-chip>
           </v-chip-group>
         </div>
-        <!-- <div class="font-size-14 color-666 mt-3 cursor-pointer">
-          服务协议
-          <span class="septal-line"></span>
-          充值协议
-        </div> -->
+        <div class="code-right">
+          <div class="price">
+            <span class="font-size-13">￥</span>
+            {{ FenYuanTransform(props.info?.payPrice || 0) }}
+          </div>
+        </div>
+        <div class="code-left">
+          <QrCode :text="payQrCodeTxt" :disabled="!remainderTimer" :width="170" @refresh="refreshQRCode" />
+        </div>
+        <div
+          class="mt-5"
+          style="color: var(--v-error-base);"
+        >
+          扫码支付时请勿离开
+          <span v-if="remainderZhShow">{{ remainderZhShow }}</span>
+        </div>
       </div>
     </div>
-    <div
-      class="mt-5 ml-2"
-      style="color: var(--v-error-base);"
-    >
-      扫码支付时请勿离开
-      <span v-if="remainderZhShow">{{ remainderZhShow }}</span>
-    </div>
   </div>
 </template>
 
@@ -63,6 +54,10 @@ const props = defineProps({
     type: Object,
     default: () => ({ id: ''})
   },
+  current: {
+    type: Number,
+    default: 1
+  },
   appId: {
     type: Number,
     default: 8 // 10为一般情况下支付，8为充值支付
@@ -259,6 +254,8 @@ const clearTimer = () => {
   emit('stopInterval')
 }
 
+const mlArr = [0, 82, 230, 378, 526, 674, 754]
+
 </script>
 <style lang="scss" scoped>
 .code {
@@ -268,6 +265,7 @@ const clearTimer = () => {
     border: 1px solid #00897B;
     border-radius: 6px;
     padding: 5px;
+    width: 182px;
   }
   &-right {
     .price {

src/components/personalRecharge/pay.vue

@@ -1,35 +1,39 @@
 <template>
   <div class="code pa-5 resume-box">
-    <div class="resume-header">
+    <!-- <div class="resume-header">
       <div class="resume-title">扫码支付</div>
-    </div>
-    <div class="d-flex align-end mt-3">
-      <div class="code-left">
-        <QrCode :text="props.qrCode" :disabled="props.disabled" :width="170" @refresh="refreshQRCode" />
-      </div>
-      <div class="code-right ml-5">
-        <div class="price">
-          <span class="font-size-13">￥</span>
-          {{ props.payPrice }}
+    </div> -->
+    <div class="d-flex" :style="{'margin-left': mlArr[props.dredgeIndex] + 'px'}">
+      <div class="d-flex flex-column align-center my-2">
+        <div class="d-flex align-center">
+          <div class="d-flex align-center">
+            <span class="color-666 font-weight-bold">支付方式：</span>
+            <v-chip-group v-model="payType" selected-class="text-primary" column mandatory @update:modelValue="payTypeChange">
+              <v-chip filter v-for="k in payTypeList" :key="k.code" :value="k.code" class="mr-3" label>
+                {{ k.name }}
+                <svg-icon v-if="k.icon" class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
+              </v-chip>
+            </v-chip-group>
+          </div>
+        </div>
+        <div class="code-right">
+          <div class="price">
+            <span class="font-size-13">￥</span>
+            {{ props.payPrice }}
+          </div>
         </div>
-        <div class="mt-3 d-flex align-center">
-          <span class="color-666 font-weight-bold mr-5">支付方式</span>
-          <v-chip-group v-model="payType" selected-class="text-primary" column mandatory @update:modelValue="payTypeChange">
-            <v-chip filter v-for="k in payTypeList" :key="k.code" :value="k.code" class="mr-3" label>
-              {{ k.name }}
-              <svg-icon v-if="k.icon" class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
-            </v-chip>
-          </v-chip-group>
+        <div class="code-left">
+          <QrCode :text="props.qrCode" :disabled="props.disabled" :width="170" @refresh="refreshQRCode" />
+        </div>
+        <div
+          class="mt-5"
+          style="color: var(--v-error-base);"
+        >
+          扫码支付时请勿离开
+          <span v-if="remainderZhShow">{{ remainderZhShow }}</span>
         </div>
       </div>
     </div>
-    <div
-      class="mt-5 ml-2"
-      style="color: var(--v-error-base);"
-    >
-      扫码支付时请勿离开
-      <span v-if="remainderZhShow">{{ remainderZhShow }}</span>
-    </div>
   </div>
 </template>
 
@@ -68,6 +72,10 @@ const props = defineProps({
     type: Number,
     default: -1
   },
+  dredgeIndex: {
+    type: Number,
+    default: 0
+  },
   // 订单ID
   orderId: {
     type: String,
@@ -195,6 +203,8 @@ onUnmounted(() => {
 
 initIntervalFun()
 getCodeList()
+
+const mlArr = [0, 157, 366, 575, 725]
 </script>
 
 <style lang="scss" scoped>
@@ -205,6 +215,7 @@ getCodeList()
     border: 1px solid #00897B;
     border-radius: 6px;
     padding: 5px;
+    width: 182px;
   }
   &-right {
     .price {

src/views/mall/purchasePackage/components/packageList.vue

@@ -1,5 +1,6 @@
 <!--  -->
 <template>
+<div>
   <div class="d-flex mt-5 list">
     <div v-for="(val, i) in packDataList" :key="i" class="list-item cursor-pointer elevation-2" :class="{'active': active === i }" @click="handleClickItem(val, i)">
       <div v-if="val.id === userStore.userInfo?.vipFlag && userStore.userInfo?.vipExpireDate && userStore.userInfo?.vipExpireDate > Date.now()" class="recommend long">我的套餐</div>
@@ -50,25 +51,29 @@
           rounded
           :disabled="Number(val.id) < Number(userStore.userInfo?.vipFlag)"
           :loading="val.loading"
-          @click="createOrder(val)"
+          @click="createOrder(val, i)"
         >开通会员</v-btn>
       </div>
     </div>
   </div>
-  
-  <CtDialog :visible="open" :widthType="3" :footer="false" titleClass="text-h6" title="开通会员" @close="open = false">
+  <div class="py-5">
     <m-pay
+      v-if="open"
       :payPrice="payPrice / 100"
       :qrCode="qrCode"
       :disabled="disabled"
       :expirationTime="expirationTime"
       :payChannelCode="payChannelCode"
       :orderId="orderId"
+      :dredgeIndex="dredgeIndex"
       @overdue="handleOverdue"
       @refreshQrCode="refreshQrCode"
       @paySuccess="paySuccess"
     ></m-pay>
-  </CtDialog>
+  </div>
+</div>
+  <!-- <CtDialog :visible="open" :widthType="3" :footer="false" titleClass="text-h6" title="开通会员" @close="open = false">
+  </CtDialog> -->
 </template>
 
 <script setup>
@@ -130,8 +135,10 @@ const refreshQrCode = (payType) => {
   payChannelCode.value = payType
 }
 
+const dredgeIndex = ref(0)
 // 创建订单
-async function createOrder (val) {
+async function createOrder (val, i) {
+  dredgeIndex.value = i
   val.loading = true
   payPrice.value = val.price
   try {