选中居中显示付款码

src/views/recruit/enterprise/membershipPackage/dynamic/balance.vue

@@ -7,7 +7,8 @@
         :key="index"
         class="packagesItem cursor-pointer mx-3"
         :class="{'active': current === (index+1)}"
-        style="width: 200px;"
+        :id="'positioning'+index"
+        :style="{'width': width+'%'}"
         @click="handleClick(index, item)"
       >
         <div class="d-flex flex-column align-center pb-5" style="position: relative;">  
@@ -31,21 +32,14 @@
       </div>
     </div>
     <div v-if="!Object.keys(select).length" class="color-warning text-center mt-10 font-size-14">请选择要充值的金额</div>
-    <div v-if="payType && payQrCodeTxt" class="code pa-5 resume-box">
-      <div class="resume-header">
+    <div v-if="payType && payQrCodeTxt" id="codeBox" class="code pa-5 resume-box my-5">
+      <!-- <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(select?.payPrice || 0) }}元
-          </div>
-          <div class="mt-3 d-flex align-center">
-            <span class="color-666 font-weight-bold mr-5">支付方式</span>
+      </div> -->
+      <div class="d-flex" :style="{'margin-left': offsetCalc + 'px'}">
+        <div id="codeItem" 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 }}
@@ -53,12 +47,21 @@
               </v-chip>
             </v-chip-group>
           </div>
+          <div class="code-right">
+            <div class="price">
+              <span class="font-size-13">￥</span>
+              {{ FenYuanTransform(select?.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>
   </div>
 </template>
@@ -81,11 +84,44 @@ const inputValue = ref('')
 const payQrCodeTxt = ref('')
 const remainderZhShow = ref('') // 倒计时展示
 const select = ref({})
+const width = ref(15)
 const list = ref([])
 const getData = async () => {
   const data = await getEnterpriseRechargePackageList()
   const end = { name: '自定义金额', id: 'custom', placeholder: '请输入', custom: true }
   list.value = data ? [...data, end] : [end]
+  width.value = 100/list.value.length
+}
+
+const offsetCalc = ref(0)
+let codeItemOffsetWidth = null
+const codeBoxPx = 40 // codeBox左右内边距
+const calcStyle = (index) => {
+  nextTick(() => {
+    const codeBox = document.getElementById('codeBox')
+    const codeBoxOffsetWidth = codeBox.offsetWidth - codeBoxPx
+    if (!codeItemOffsetWidth) {
+      const codeItem = document.getElementById('codeItem')
+      codeItemOffsetWidth = codeItem.offsetWidth
+    }
+    //
+    const menu = document.getElementById(`positioning${index}`)
+    offsetCalc.value = 0
+    if (menu && codeBoxOffsetWidth && codeItemOffsetWidth) {
+      const menuHalfWidth= menu.offsetWidth/2 + 12
+      const codeItemHalfWidth = codeItemOffsetWidth/2
+      const calcNum = menuHalfWidth+menuHalfWidth*2*index - codeItemHalfWidth
+      //
+      
+      if (calcNum+codeItemOffsetWidth > codeBoxOffsetWidth) { // 超出右侧，取最大
+        offsetCalc.value = codeBoxOffsetWidth-codeItemOffsetWidth
+      } else if (calcNum < 0) { // 超出左侧，取最小
+        offsetCalc.value = 0
+      } else {
+        offsetCalc.value = calcNum-20 > 0 ? calcNum-20 : 0
+      }
+    }
+  })
 }
 
 const handleClick = (index, item) => {
@@ -181,6 +217,7 @@ const paySubmit = async () => {
       }
       const res = await payOrderSubmit(params)
       payQrCodeTxt.value = res?.displayContent || '' // 生成二维码内容
+      calcStyle(current.value-1)
       initIntervalFun()
       if (timer.value) clearInterval(timer.value); timer.value = null
       timer.value = setInterval(() => { payStatus() }, 1000) // 轮巡查询用户是否支付
@@ -268,6 +305,9 @@ const remainderCalc = () => {
 const handleToOrder = () => {
   router.push('/recruit/enterprise/tradingOrder?key=tab_recharge')
 }
+
+const mlArr = [119, 344, 567, 791, 1298, 1298, 1298, 1298]
+
 </script>
 
 <style scoped lang="scss">
@@ -305,7 +345,8 @@ const handleToOrder = () => {
   color: var(--v-primary-base);
 }
 .code {
-  max-width: 1100px;
+  // max-width: 1328px;
+  max-width: 100%;
   background-color: #f7f8fa;
   border-radius: 6px;
   margin: 0 auto;

src/views/recruit/enterprise/membershipPackage/dynamic/package.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex list mb-3">
-    <div v-for="(val, index) in list" :key="index" class="list-item text-center cursor-pointer" :class="{'active': index === current}" @click="handleClick(index, val)">
+    <div v-for="(val, index) in list" :key="index" :id="'positioning'+index" class="list-item text-center cursor-pointer" :class="{'active': index === current}" @click="handleClick(index, val)">
       <h4 class="mt-5">{{ val.name }}</h4>
       <div class="color-primary">
         <span>￥</span>
@@ -12,21 +12,14 @@
     </div>
   </div>
   <div v-if="!Object.keys(select).length" class="color-warning text-center mt-15 font-size-20">请选择要购买的套餐</div>
-  <div v-if="payType && payQrCodeTxt" class="code pa-5 resume-box">
-    <div class="resume-header">
+  <div v-if="payType && payQrCodeTxt" id="codeBox" class="code pa-5 resume-box">
+    <!-- <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(select?.price || 0) }}元
-        </div>
-        <div class="mt-3 d-flex align-center">
-          <span class="color-666 font-weight-bold mr-5">支付方式</span>
+    </div> -->
+    <div class="d-flex" :style="{'margin-left': offsetCalc + 'px'}">
+      <div id="codeItem" 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 }}
@@ -34,12 +27,21 @@
             </v-chip>
           </v-chip-group>
         </div>
+        <div class="code-right">
+          <div class="price">
+            <span class="font-size-13">￥</span>
+            {{ FenYuanTransform(select?.price || 0) }}元
+          </div>
+        </div>
+        <div class="code-left">
+          <QrCode :text="payQrCodeTxt" :disabled="!remainderTimer" :width="170" @refresh="refreshQRCode" />
+        </div>
+        <div class="mt-52" 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>
 
@@ -64,7 +66,38 @@ const getPackageList = async () => {
   list.value = data
 }
 
+const offsetCalc = ref(0)
+let codeItemOffsetWidth = null
+const codeBoxPx = 40 // codeBox左右内边距
+const calcStyle = (index) => {
+  nextTick(() => {
+    const codeBox = document.getElementById('codeBox')
+    const codeBoxOffsetWidth = codeBox.offsetWidth - codeBoxPx
+    if (!codeItemOffsetWidth) {
+      const codeItem = document.getElementById('codeItem')
+      codeItemOffsetWidth = codeItem.offsetWidth
+    }
+    //
+    const menu = document.getElementById(`positioning${index}`)
+    offsetCalc.value = 0
+    if (menu && codeBoxOffsetWidth && codeItemOffsetWidth) {
+      const menuHalfWidth= menu.offsetWidth/2
+      const codeItemHalfWidth = codeItemOffsetWidth/2
+      const calcNum = (menuHalfWidth+menuHalfWidth*2*index - codeItemHalfWidth) + (index ? 6 : 0)
+      //
+      if (calcNum+codeItemOffsetWidth > codeBoxOffsetWidth) { // 超出右侧，取最大
+        offsetCalc.value = codeBoxOffsetWidth-codeItemOffsetWidth
+      } else if (calcNum < 0) { // 超出左侧，取最小
+        offsetCalc.value = 0
+      } else {
+        offsetCalc.value = calcNum-20 > 0 ? calcNum-20 : 0
+      }
+    }
+  })
+}
+
 const handleClick = (index, val) => {
+  payQrCodeTxt.value = ''
   current.value = index
   select.value = val
   getUnpaidOrderList()
@@ -136,7 +169,7 @@ const paySubmit = async () => {
     }
     const res = await payOrderSubmit(params)
     payQrCodeTxt.value = res?.displayContent || '' // 生成二维码内容
-    
+    calcStyle(current.value)
     initIntervalFun()
     if (timer.value) clearInterval(timer.value); timer.value = null
     timer.value = setInterval(() => { payStatus() }, 1000) // 轮巡查询用户是否支付
@@ -221,6 +254,7 @@ const remainderCalc = () => {
   remainderZhShow.value = formatDuration(remainder)
   if (remainder <= 0) clearTimer()
 }
+
 </script>
 
 <style scoped lang="scss">