更新

src/views/recruit/enterprise/memberCenter/myMembers/components/package.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex mt-5 list">
-    <div v-for="(val, i) in items" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(i)">
+    <div v-for="(val, i) in items" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(val, i)">
       <div v-if="val.recommend" class="recommend">推荐</div>
       <div class="text-center font-weight-bold">{{ val.title }}</div>
       <div class="text-center my-5">
@@ -17,19 +17,47 @@
       </div>
       <div v-else>
         <h3 class="my-3">授权范围：</h3>
-        <div>联系客户经理为您定制</div>
+        <div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
       </div>
       <div class="text-center item-btn">
-        <v-btn color="error" variant="outlined" size="small" rounded @click="handleOpenMembership(val)">开通会员</v-btn>
+        <v-btn v-if="!val.customized" color="error" variant="outlined" size="small" rounded @click="handleOpenMembership(val)">开通会员</v-btn>
       </div>
     </div>
   </div>
-  <div class="my-10 tips">若注册资本超500万或特殊、行政事业单位，请联系<span class="font-weight-bold text-decoration-underline">高级客户经理</span>定制套餐</div>
-  <div class="scan color-666 d-flex flex-column align-center">
+  <div class="my-10 tips">若注册资本超500万或特殊、行政事业单位，请联系<span class="font-weight-bold">高级客户经理</span>定制套餐</div>
+  <div class="scan color-666 d-flex flex-column align-center" v-if="active === 4">
     <div class="font-weight-bold">微信扫一扫</div>
     <div class="font-size-15 my-3">高级客户经理为您报价（扫码后可电话联系）</div>
     <v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" width="170" height="170"></v-img>
   </div>
+  <div v-if="active !== 0 && active !== 4" class="scanCode mb-7">
+    <div 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="二维码内容二维码内容二维码内容二维码内容" :width="170" />
+        </div>
+        <div class="ml-5">
+          <div class="price">
+            <span class="font-size-13">￥</span>
+            {{ price }}
+          </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="font-size-14 color-666 mt-3 cursor-pointer">服务协议</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -38,6 +66,12 @@ import { ref } from 'vue'
 
 
 const active = ref(2)
+const price = ref(33000)
+const payment = ref('wx_native')
+const paymentList = [
+  { label: '微信扫码', icon: 'weChat', size: 21, color: 'success', value: 'wx_native' },
+  { label: '支付宝扫码', icon: 'alipay', size: 23, color: '#3383c6', value: 'alipay_qr' }
+]
 const items = ref([
   {
     title: '普通版',
@@ -67,8 +101,8 @@ const items = ref([
   }
 ])
 
-// click
-const handleClickItem = (i) => {
+const handleClickItem = (val, i) => {
+  price.value = val.price
   active.value = i
 }
 
@@ -141,4 +175,30 @@ ul li {
   color: #fff;
   text-align: center;
 }
+.scanCode {
+  border: 1px dashed #ccc;
+  border-radius: 10px;
+  padding: 30px;
+  .weChat {
+    border: 1px solid #4cb517;
+    border-radius: 8px;
+  }
+  .alipay {
+    border: 1px solid #00a2f0;
+    border-radius: 8px;
+  }
+  .code-left {
+    border: 1px solid #f1b17a;
+    border-radius: 6px;
+    padding: 5px;
+  }
+  .price {
+    font-size: 30px;
+    font-weight: 700;
+    color: #ff9012;
+  }
+}
+:deep(.v-slide-group__content) {
+  background: none !important;
+}
 </style>

src/views/recruit/enterprise/memberCenter/myMembers/index.vue

@@ -1,9 +1,9 @@
 <!-- 购买套餐 -->
 <template>
   <v-card class="card-box pa-3" style="min-width: 1100px;">
-    <v-tabs v-model="tab" align-tabs="center">
-      <v-tab :value="0">套餐购买</v-tab>
-      <v-tab :value="1">余额充值</v-tab>
+    <v-tabs v-model="tab" align-tabs="center" color="rgb(195 15 15)">
+      <v-tab :value="0" class="font-weight-bold font-size-18">套餐购买</v-tab>
+      <v-tab :value="1" class="font-weight-bold font-size-18">余额充值</v-tab>
     </v-tabs>
     <Package v-if="tab === 0"></Package>
     <PointsAndBalance v-else></PointsAndBalance>