套餐列表

src/api/recruit/personal/membershipPackage.js

@@ -0,0 +1,10 @@
+import request from '@/config/axios'
+
+// 获取用户积分明细
+export const getMembershipPackageList = async (params) => {
+  return await request.get({
+    url: 'app-api/menduner/system/user-package/list',
+    params
+  })
+}
+

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

@@ -2,48 +2,48 @@ const equity = ['VIP会员标识', '简历刷新次数', '简历屏蔽', '优先
 
 export const packData =  [
   {
-    title: '14天双周卡',
+    name: '14天双周卡',
     price: 128, // 128
     type: '3',
-    spuId: '3', // 编号
+    id: '3', // 编号
     equity,
     showLength: 3,
     vipFlag: '14'
   },
   {
-    title: '30天月卡',
+    name: '30天月卡',
     price: 198,
     type: '4',
-    spuId: '4', // 编号
+    id: '4', // 编号
     equity,
     showLength: 4,
     vipFlag: '30'
   },
   {
-    title: '60天月卡',
+    name: '60天月卡',
     price: 318,
     type: '5',
     recommend: true,
-    spuId: '5', // 编号
+    id: '5', // 编号
     equity,
     showLength: 5,
     vipFlag: '60'
   },
   {
-    title: '90天月卡',
+    name: '90天月卡',
     price: 378,
     type: '6',
-    spuId: '6', // 编号
+    id: '6', // 编号
     equity,
     showLength: 6,
     vipFlag: '90'
   },
   {
-    title: '年度卡',
+    name: '年度卡',
     price: 999,
     // cycle: '6个月',
     type: '7',
-    spuId: '7', // 编号
+    id: '7', // 编号
     equity,
     showLength: 7,
     vipFlag: '365'

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

@@ -2,9 +2,9 @@
 <template>
   <div class="d-flex mt-5 list">
     <div v-for="(val, i) in packDataList" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(val, i)">
-      <div v-if="val.vipFlag === userStore.userInfo?.vipFlag" class="recommend long">我的套餐</div>
+      <div v-if="val.id === userStore.userInfo?.vipFlag" class="recommend long">我的套餐</div>
       <div v-if="val.recommend" class="recommend">推荐</div>
-      <div class="text-center font-weight-bold">{{ val.title }}</div>
+      <div class="text-center font-weight-bold">{{ val.name }}</div>
       <div class="text-center my-5">
         <div v-if="val.price && !val.cycle">
           ￥
@@ -15,20 +15,24 @@
         <!-- <div v-if="val.customized" class="font-size-20 font-weight-bold">按需定制</div> -->
       </div>
       <v-divider></v-divider>
-      <div v-if="val.equity">
+      <!-- <div v-if="val.equity">
         <div class="font-weight-bold my-3">权益</div>
         <ul>
           <li v-for="(k, num) in val.equity" :key="k" :class="{'greyText': num+1 > val.showLength}">{{ k }}</li>
         </ul>
+      </div> -->
+      <div v-if="val.text">
+        <div class="font-weight-bold my-3">权益</div>
+        <div v-html="val.text"></div>
       </div>
-      <div v-else>
+      <!-- <div v-else>
         <h3 class="my-3">授权范围：</h3>
         <div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
-      </div>
+      </div> -->
       
       <div
-        v-if="userStore.userInfo?.vipFlag === val.vipFlag && canUse"
-        style="font-size: 14px;" class="mt-5"
+        v-if="userStore.userInfo?.vipFlag === val.id && canUse"
+        style="font-size: 14px; position: absolute; bottom: 30px;" class="mt-5"
       >
         有效期：{{ timesTampChange(userStore.userInfo?.vipExpireDate, 'Y-M-D') }}
       </div>
@@ -61,19 +65,18 @@
 
 <script setup>
 defineOptions({name: 'purchasePackage-packageList'})
-import { packData } from './packageList.js'
 import { ref, computed } from 'vue'
 // import Snackbar from '@/plugins/snackbar'
 import MPay from '@/components/personalRecharge/pay.vue'
 import { orderCreated, getOrder, payOrderSubmit } from '@/api/common'
+import { getMembershipPackageList } from '@/api/recruit/personal/membershipPackage.js'
 import Snackbar from '@/plugins/snackbar'
 import { useUserStore } from '@/store/user'
 import { timesTampChange } from '@/utils/date'
 
 const userStore = useUserStore()
 
-
-const active = ref(2)
+const active = ref(null)
 const handleClickItem = (val, i) => {
   active.value = i
 }
@@ -92,12 +95,26 @@ const canUse = computed(() => {
   return new Date().getTime() < userStore.userInfo?.vipExpireDate
 })
 
-const packDataList = packData.map((item) => {
-  return {
-    ...item,
-    loading: false
-  }
-}).filter(e => e.vipFlag >= userStore.userInfo?.vipFlag)
+const packDataList = ref([])
+const getData = async () => {
+  const data = await getMembershipPackageList()
+  if (!data?.length) return
+  // packDataList.value = 
+  let vipFlagIndex = null
+  const list = data.map((item, index) => {
+    item.id = item.id?.toString()
+    if (item.id === userStore.userInfo?.vipFlag) vipFlagIndex = index // 低于当前套餐的(套餐)不展示
+    if (item.recommend) active.value = index // 推荐套餐
+    return {
+      ...item,
+      type: 3, // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
+      loading: false
+    }
+  })
+  // 低于当前套餐的(套餐)不展示
+  packDataList.value = vipFlagIndex ? list.slice(vipFlagIndex) : list
+}
+getData()
 
 // 重新获取订单
 const refreshQrCode = (payType) => {
@@ -110,7 +127,7 @@ async function createOrder (val) {
   payPrice.value = val.price
   try {
     const data = await getOrder({
-      spuId: val.spuId, // 商品编号
+      spuId: val.id, // 商品编号
       type: val.type
     })
 
@@ -122,14 +139,14 @@ async function createOrder (val) {
 
 
     await orderCreated({
-      spuId: val.spuId, // 商品编号
-      spuName: val.title, // 商品名称
+      spuId: val.id, // 商品编号
+      spuName: val.name, // 商品名称
       price: val.price * 100, // 价格
-      type: val.type // 订单类型 0平台订单|1求职端订单|2招聘端订单|3用户会员-14天|4用户会员-30天|5用户会员-30天|6用户会员-90天|7用户会员-365天,
+      type: val.type // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
     })
 
     const _data = await getOrder({
-      spuId: val.spuId, // 商品编号
+      spuId: val.id, // 商品编号
       type: val.type
     })