Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

package-lock.json

@@ -14,6 +14,7 @@
         "@wangeditor/editor-for-vue": "^5.1.10",
         "axios": "^1.6.8",
         "crypto-js": "^4.2.0",
+        "dayjs": "^1.11.13",
         "dompurify": "^3.2.0",
         "echarts": "^5.4.3",
         "element-plus": "^2.8.0",
@@ -2547,9 +2548,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.12",
-      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.12.tgz",
-      "integrity": "sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==",
+      "version": "1.11.13",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
       "license": "MIT"
     },
     "node_modules/debug": {

package.json

@@ -16,6 +16,7 @@
     "@wangeditor/editor-for-vue": "^5.1.10",
     "axios": "^1.6.8",
     "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.13",
     "dompurify": "^3.2.0",
     "echarts": "^5.4.3",
     "element-plus": "^2.8.0",

src/api/mall/index.js

@@ -0,0 +1,15 @@
+import request from '@/config/axios'
+
+// 获取装修模版
+export const getDiyTemplate = async () => {
+  return request.get({
+    url: '/app-api/promotion/diy-template/used'
+  })
+}
+
+// 获取id获取商品列表
+export const getProductByIds = async (ids) => {
+  return request.get({
+    url: `/app-api/product/spu/list-by-ids?ids=${ids}`
+  })
+}

src/hooks/web/useGoods.js

@@ -0,0 +1,499 @@
+import { ref } from 'vue';
+import dayjs from 'dayjs';
+// import $url from '@/sheep/url';
+import { formatDate } from '@/utils/date';
+
+/**
+ * 格式化销量
+ * @param {'exact' | string} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
+export function formatSales(type, num) {
+  let prefix = type !== 'exact' && num < 10 ? '销量' : '已售';
+  return formatNum(prefix, type, num);
+}
+
+/**
+ * 格式化兑换量
+ * @param {'exact' | string} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
+export function formatExchange(type, num) {
+  return formatNum('已兑换', type, num);
+}
+
+/**
+ * 格式化库存
+ * @param {'exact' | any} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
+export function formatStock(type, num) {
+  return formatNum('库存', type, num);
+}
+
+/**
+ * 格式化数字
+ * @param {string} prefix 前缀
+ * @param {'exact' | string} type 格式类型：exact=精确值，其它=大致数量
+ * @param {number} num 销量
+ * @return {string} 格式化后的销量字符串
+ */
+export function formatNum(prefix, type, num) {
+  num = num || 0;
+  // 情况一：精确数值
+  if (type === 'exact') {
+    return prefix + num;
+  }
+  // 情况二：小于等于 10
+  if (num < 10) {
+    return `${prefix}≤10`;
+  }
+  // 情况三：大于 10，除第一位外，其它位都显示为0
+  // 例如：100  - 199  显示为 100+
+  //      9000 - 9999 显示为 9000+
+  const numStr = num.toString();
+  const first = numStr[0];
+  const other = '0'.repeat(numStr.length - 1);
+  return `${prefix}${first}${other}+`;
+}
+
+// 格式化价格
+export function formatPrice(e) {
+  return e.length === 1 ? e[0] : e.join('~');
+}
+
+// 视频格式后缀列表
+const VIDEO_SUFFIX_LIST = ['.avi', '.mp4'];
+
+/**
+ * 转换商品轮播的链接列表：根据链接的后缀，判断是视频链接还是图片链接
+ *
+ * @param {string[]} urlList 链接列表
+ * @return {{src: string, type: 'video' | 'image' }[]}  转换后的链接列表
+ */
+// export function formatGoodsSwiper(urlList) {
+//   return (
+//     urlList
+//       ?.filter((url) => url)
+//       .map((url, key) => {
+//         const isVideo = VIDEO_SUFFIX_LIST.some((suffix) => url.includes(suffix));
+//         const type = isVideo ? 'video' : 'image';
+//         const src = $url.cdn(url);
+//         return {
+//           type,
+//           src,
+//         };
+//       }) || []
+//   );
+// }
+
+/**
+ * 格式化订单状态的颜色
+ *
+ * @param order 订单
+ * @return {string} 颜色的 class 名称
+ */
+export function formatOrderColor(order) {
+  if (order.status === 0) {
+    return 'info-color';
+  }
+  if (order.status === 10 || order.status === 20 || (order.status === 30 && !order.commentStatus)) {
+    return 'warning-color';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return 'success-color';
+  }
+  return 'danger-color';
+}
+
+/**
+ * 格式化订单状态
+ *
+ * @param order 订单
+ */
+export function formatOrderStatus(order) {
+  if (order.status === 0) {
+    return '待付款';
+  }
+  if (order.status === 10 && order.deliveryType === 1) {
+    return '待发货';
+  }
+  if (order.status === 10 && order.deliveryType === 2) {
+    return '待核销';
+  }
+  if (order.status === 20) {
+    return '待收货';
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '待评价';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '已完成';
+  }
+  return '已关闭';
+}
+
+/**
+ * 格式化订单状态的描述
+ *
+ * @param order 订单
+ */
+export function formatOrderStatusDescription(order) {
+  if (order.status === 0) {
+    return `请在 ${formatDate(order.payExpireTime)} 前完成支付`;
+  }
+  if (order.status === 10) {
+    return '商家未发货，请耐心等待';
+  }
+  if (order.status === 20) {
+    return '商家已发货，请耐心等待';
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '已收货，快去评价一下吧';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '交易完成，感谢您的支持';
+  }
+  return '交易关闭';
+}
+
+/**
+ * 处理订单的 button 操作按钮数组
+ *
+ * @param order 订单
+ */
+export function handleOrderButtons(order) {
+  order.buttons = [];
+  if (order.type === 3) {
+    // 查看拼团
+    order.buttons.push('combination');
+  }
+  if (order.status === 20) {
+    // 确认收货
+    order.buttons.push('confirm');
+  }
+  if (order.logisticsId > 0) {
+    // 查看物流
+    order.buttons.push('express');
+  }
+  if (order.status === 0) {
+    // 取消订单 / 发起支付
+    order.buttons.push('cancel');
+    order.buttons.push('pay');
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    // 发起评价
+    order.buttons.push('comment');
+  }
+  if (order.status === 40) {
+    // 删除订单
+    order.buttons.push('delete');
+  }
+}
+
+/**
+ * 格式化售后状态
+ *
+ * @param afterSale 售后
+ */
+export function formatAfterSaleStatus(afterSale) {
+  if (afterSale.status === 10) {
+    return '申请售后';
+  }
+  if (afterSale.status === 20) {
+    return '商品待退货';
+  }
+  if (afterSale.status === 30) {
+    return '商家待收货';
+  }
+  if (afterSale.status === 40) {
+    return '等待退款';
+  }
+  if (afterSale.status === 50) {
+    return '退款成功';
+  }
+  if (afterSale.status === 61) {
+    return '买家取消';
+  }
+  if (afterSale.status === 62) {
+    return '商家拒绝';
+  }
+  if (afterSale.status === 63) {
+    return '商家拒收货';
+  }
+  return '未知状态';
+}
+
+/**
+ * 格式化售后状态的描述
+ *
+ * @param afterSale 售后
+ */
+export function formatAfterSaleStatusDescription(afterSale) {
+  if (afterSale.status === 10) {
+    return '退款申请待商家处理';
+  }
+  if (afterSale.status === 20) {
+    return '请退货并填写物流信息';
+  }
+  if (afterSale.status === 30) {
+    return '退货退款申请待商家处理';
+  }
+  if (afterSale.status === 40) {
+    return '等待退款';
+  }
+  if (afterSale.status === 50) {
+    return '退款成功';
+  }
+  if (afterSale.status === 61) {
+    return '退款关闭';
+  }
+  if (afterSale.status === 62) {
+    return `商家不同意退款申请，拒绝原因：${afterSale.auditReason}`;
+  }
+  if (afterSale.status === 63) {
+    return `商家拒绝收货，不同意退款，拒绝原因：${afterSale.auditReason}`;
+  }
+  return '未知状态';
+}
+
+/**
+ * 处理售后的 button 操作按钮数组
+ *
+ * @param afterSale 售后
+ */
+export function handleAfterSaleButtons(afterSale) {
+  afterSale.buttons = [];
+  if ([10, 20, 30].includes(afterSale.status)) {
+    // 取消订单
+    afterSale.buttons.push('cancel');
+  }
+  if (afterSale.status === 20) {
+    // 退货信息
+    afterSale.buttons.push('delivery');
+  }
+}
+
+/**
+ * 倒计时
+ * @param toTime   截止时间
+ * @param fromTime 起始时间，默认当前时间
+ * @return {{s: string, ms: number, h: string, m: string}} 持续时间
+ */
+export function useDurationTime(toTime, fromTime = '') {
+  toTime = getDayjsTime(toTime);
+  if (fromTime === '') {
+    fromTime = dayjs();
+  }
+  let duration = ref(toTime - fromTime);
+  if (duration.value > 0) {
+    setTimeout(() => {
+      if (duration.value > 0) {
+        duration.value -= 1000;
+      }
+    }, 1000);
+  }
+
+  let durationTime = dayjs.duration(duration.value);
+  return {
+    h: (durationTime.months() * 30 * 24 + durationTime.days() * 24 + durationTime.hours())
+      .toString()
+      .padStart(2, '0'),
+    m: durationTime.minutes().toString().padStart(2, '0'),
+    s: durationTime.seconds().toString().padStart(2, '0'),
+    ms: durationTime.$ms,
+  };
+}
+
+/**
+ * 转换为 Dayjs
+ * @param {any} time 时间
+ * @return {dayjs.Dayjs}
+ */
+function getDayjsTime(time) {
+  time = time.toString();
+  if (time.indexOf('-') > 0) {
+    // 'date'
+    return dayjs(time);
+  }
+  if (time.length > 10) {
+    // 'timestamp'
+    return dayjs(parseInt(time));
+  }
+  if (time.length === 10) {
+    // 'unixTime'
+    return dayjs.unix(parseInt(time));
+  }
+}
+
+/**
+ * 将分转成元
+ *
+ * @param price 分，例如说 100 分
+ * @returns {string} 元，例如说 1.00 元
+ */
+export function fen2yuan(price) {
+  return (price / 100.0).toFixed(2);
+}
+
+/**
+ * 将分转成元
+ *
+ * 如果没有小数点，则不展示小数点部分
+ *
+ * @param price 分，例如说 100 分
+ * @returns {string} 元，例如说 1 元
+ */
+export function fen2yuanSimple(price) {
+  return fen2yuan(price).replace(/\.?0+$/, '');
+}
+
+/**
+ * 将折扣百分比转化为“打x者”的 x 部分
+ *
+ * @param discountPercent
+ */
+export function formatDiscountPercent(discountPercent) {
+  return (discountPercent / 10.0).toFixed(1).replace(/\.?0+$/, '');
+}
+
+/**
+ * 从商品 SKU 数组中，转换出商品属性的数组
+ *
+ * 类似结构：[{
+ *    id: // 属性的编号
+ *    name: // 属性的名字
+ *    values: [{
+ *      id: // 属性值的编号
+ *      name: // 属性值的名字
+ *    }]
+ * }]
+ *
+ * @param skus 商品 SKU 数组
+ */
+export function convertProductPropertyList(skus) {
+  let result = [];
+  for (const sku of skus) {
+    if (!sku.properties) {
+      continue;
+    }
+    for (const property of sku.properties) {
+      // ① 先处理属性
+      let resultProperty = result.find((item) => item.id === property.propertyId);
+      if (!resultProperty) {
+        resultProperty = {
+          id: property.propertyId,
+          name: property.propertyName,
+          values: [],
+        };
+        result.push(resultProperty);
+      }
+      // ② 再处理属性值
+      let resultValue = resultProperty.values.find((item) => item.id === property.valueId);
+      if (!resultValue) {
+        resultProperty.values.push({
+          id: property.valueId,
+          name: property.valueName,
+        });
+      }
+    }
+  }
+  return result;
+}
+
+export function appendSettlementProduct(spus, settlementInfos) {
+  if (!settlementInfos || settlementInfos.length === 0) {
+    return;
+  }
+  for (const spu of spus) {
+    const settlementInfo = settlementInfos.find((info) => info.spuId === spu.id);
+    if (!settlementInfo) {
+      return;
+    }
+    // 选择价格最小的 SKU 设置到 SPU 上
+    const settlementSku = settlementInfo.skus
+      .filter((sku) => sku.promotionPrice > 0)
+      .reduce((prev, curr) => (prev.promotionPrice < curr.promotionPrice ? prev : curr), []);
+    if (settlementSku) {
+      spu.promotionType = settlementSku.promotionType;
+      spu.promotionPrice = settlementSku.promotionPrice;
+    }
+    // 设置【满减送】活动
+    if (settlementInfo.rewardActivity) {
+      spu.rewardActivity = settlementInfo.rewardActivity;
+    }
+  }
+}
+
+// 获得满减送活动的规则描述（group）
+export function getRewardActivityRuleGroupDescriptions(activity) {
+  if (!activity || !activity.rules || activity.rules.length === 0) {
+    return [];
+  }
+  const result = [
+    { name: '满减', values: [] },
+    { name: '赠品', values: [] },
+    { name: '包邮', values: [] },
+  ];
+  activity.rules.forEach((rule) => {
+    const conditionTypeStr =
+      activity.conditionType === 10 ? `满 ${fen2yuanSimple(rule.limit)} 元` : `满 ${rule.limit} 件`;
+    // 满减
+    if (rule.limit) {
+      result[0].values.push(`${conditionTypeStr} 减 ${fen2yuanSimple(rule.discountPrice)} 元`);
+    }
+    // 赠品
+    if (rule.point || (rule.giveCouponTemplateCounts && rule.giveCouponTemplateCounts.length > 0)) {
+      let tips = [];
+      if (rule.point) {
+        tips.push(`送 ${rule.point} 积分`);
+      }
+      if (rule.giveCouponTemplateCounts && rule.giveCouponTemplateCounts.length > 0) {
+        tips.push(`送 ${rule.giveCouponTemplateCounts.length} 张优惠券`);
+      }
+      result[1].values.push(`${conditionTypeStr} ${tips.join('、')}`);
+    }
+    // 包邮
+    if (rule.freeDelivery) {
+      result[2].values.push(`${conditionTypeStr} 包邮`);
+    }
+  });
+  // 移除 values 为空的元素
+  result.forEach((item) => {
+    if (item.values.length === 0) {
+      result.splice(result.indexOf(item), 1);
+    }
+  });
+  return result;
+}
+
+// 获得满减送活动的规则描述（item）
+export function getRewardActivityRuleItemDescriptions(activity) {
+  if (!activity || !activity.rules || activity.rules.length === 0) {
+    return [];
+  }
+  const result = [];
+  activity.rules.forEach((rule) => {
+    const conditionTypeStr =
+      activity.conditionType === 10 ? `满${fen2yuanSimple(rule.limit)}元` : `满${rule.limit}件`;
+    // 满减
+    if (rule.limit) {
+      result.push(`${conditionTypeStr}减${fen2yuanSimple(rule.discountPrice)}元`);
+    }
+    // 赠品
+    if (rule.point) {
+      result.push(`${conditionTypeStr}送${rule.point}积分`);
+    }
+    if (rule.giveCouponTemplateCounts && rule.giveCouponTemplateCounts.length > 0) {
+      result.push(`${conditionTypeStr}送${rule.giveCouponTemplateCounts.length}张优惠券`);
+    }
+    // 包邮
+    if (rule.freeDelivery) {
+      result.push(`${conditionTypeStr}包邮`);
+    }
+  });
+  return result;
+}

src/layout/personal/navBar.vue

@@ -183,7 +183,7 @@ const navList = [
   // },
   { title: '门墩儿招聘', path: '/recruit/personal/recommend', noLeaving: true },
   { title: '门墩儿猎头', path: '/headhunting' },
-  { title: '门墩儿商城', path: '/mall' },
+  { title: '门墩儿商城', path: '/pointsExchange' },
   { title: '火苗儿校企' },
   // { title: '产业联合会' },
   // { title: '数据' },

src/router/modules/recruit.js

@@ -53,6 +53,20 @@ const recruit = [
       }
     ]
   },
+  {
+    path: '/pointsExchange',
+    component: Layout,
+    children: [
+      {
+        path: '/pointsExchange',
+        component: () => import('@/views/mall copy/index.vue'),
+        name: 'pointsExchange',
+        meta: {
+          title: '门墩儿商城'
+        }
+      }
+    ]
+  },
   {
     path: '/about',
     component: Layout,

src/store/mall.js

@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+import { getDiyTemplate } from '@/api/mall/index'
+
+export const useMallStore = defineStore('mall',
+  {
+    state: () => ({
+      template: localStorage.getItem('mallTemplate') ? JSON.parse(localStorage.getItem('mallTemplate')) : {}
+    }),
+    actions: {
+      // 获取装修模版
+      async getMallDiyTemplate () {
+        const data = await getDiyTemplate()
+        localStorage.setItem('mallTemplate', JSON.stringify(data))
+        this.template = data
+      }
+    }
+  },
+  {
+    persist: true,
+    devtools: true
+  }
+)
+

src/utils/date.js

@@ -76,4 +76,27 @@ export const  convertTimestampsToDayRange = (timestamps) => {
   const endOfDay = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1, 0, 0, 0, -1)
 
   return [formatDate(startOfDay), formatDate(endOfDay)]
+}
+
+/**
+ * 时间日期转换
+ * @param {dayjs.ConfigType} date 当前时间，new Date() 格式
+ * @param {string} format 需要转换的时间格式字符串
+ * @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
+ * @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
+ * @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
+ * @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
+ * @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
+ * @returns {string} 返回拼接后的时间字符串
+ */
+export function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
+  // 日期不存在，则返回空
+  if (!date) {
+    return '';
+  }
+  // 日期存在，则进行格式化
+  if (format === undefined) {
+    format = 'YYYY-MM-DD HH:mm:ss';
+  }
+  return dayjs(date).format(format);
 }

src/views/integral/pointsManagement/components/integralShow.vue

@@ -71,7 +71,7 @@ const integralRulesClick = () => {
 
 // 跳转门墩儿商城
 const handleClickMall = () => {
-  window.open('/mall')
+  window.open('/pointsExchange')
 }
 </script>
 

src/views/mall copy/exchange.vue

@@ -33,7 +33,7 @@ import { ref } from 'vue'
 import { getToken } from '@/utils/auth'
 import Dialog from '@/components/CtDialog'
 import Snackbar from '@/plugins/snackbar'
-import { redeemSubmit } from '@/api/mall'
+import { redeemSubmit } from '@/api/mall copy'
 import { useUserStore } from '@/store/user'
 import { getDict } from '@/hooks/web/useDictionaries'
 import { checkPersonBaseInfo } from '@/utils/check'

src/views/mall copy/exchangeRecords.vue

@@ -21,7 +21,7 @@
 <script setup>
 defineOptions({name: 'mall-exchangeRecords'})
 import { ref } from 'vue'
-import { getRedeemPage } from '@/api/mall'
+import { getRedeemPage } from '@/api/mall copy'
 import { getToken } from '@/utils/auth'
 
 const total = ref(0)

src/views/mall/home/components/hotGoods.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div class="d-flex justify-space-between color-666">
+      <div class="color-primary" style="font-size: 25px;">热门商品</div>
+      <!-- <div>查看更多</div> -->
+    </div>
+    <div class="goods-box mt-5">
+      <v-card v-for="val in goodList" :key="val.id" class="goods-box-item" hover elevation="2" @click="handleClickGood(val)">
+        <v-img :src="val.picUrl" width="100%" height="68%" cover></v-img>
+        <div class="pa-3">
+          <p class="ellipsis color-333 text-center">{{ val.name }}</p>
+          <p class="color-999 ellipsis font-size-14 mt-1">{{ val.introduction }}</p>
+          <div class="mt-1">
+            <div class="goods-box-item-price float-left">￥{{ val.price }}</div>
+            <div class="float-right font-size-15 mt-1" style="color: #c4c4c4">{{ salesAndStock(val) }}</div>
+          </div>
+        </div>
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'mall-home-hotGoods'})
+import { ref, computed } from 'vue'
+import { useMallStore } from '@/store/mall'
+import { getProductByIds } from '@/api/mall/index'
+import { formatSales } from '@/hooks/web/useGoods.js'
+
+let template = ref(JSON.parse(localStorage.getItem('mallTemplate')) || {})
+useMallStore().$subscribe((mutation, state) => {
+  if (state.template && Object.keys(state.template).length) template.value = state?.template
+})
+
+// 根据id获取商品列表
+const goodList = ref([])
+const getGoodsList = async () => {
+  const productCard = template.value?.home?.components.find(item => item.id === 'ProductCard')
+  const ids = productCard.property.spuIds
+  if (!ids.length) return
+  const data = await getProductByIds(ids)
+  goodList.value = data
+}
+getGoodsList()
+
+// 格式化销量、库存信息
+const salesAndStock = computed(() => (data) => {
+  let text = []
+  text.push(formatSales(undefined, data.salesCount))
+  return text.join(' | ')
+})
+
+// 商品详情
+const handleClickGood = (val) => {
+  console.log(val, 'click-val')
+}
+</script>
+
+<style scoped lang="scss">
+.goods-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  &-item {
+    height: 380px;
+    width: calc((100% - 48px) / 5);
+    margin: 0 12px 12px 0;
+    &:nth-child(5n) {
+      margin-right: 0;
+    }
+    &-price {
+      color: #ff3000;
+      font-size: 20px;
+    }
+  }
+}
+</style>

src/views/mall/home/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div style="min-width: 1184px;">
+  <div style="min-width: 1184px;" class="white-bgc">
     <!-- 搜索框 -->
-    <div class="default-width py-5">
+    <div class="py-5 stickyBox">
       <div class="search d-flex align-center">
         <v-text-field
           v-model="inputVal"
@@ -21,6 +21,9 @@
 
     <!-- 轮播图 -->
     <Carousel />
+
+    <!-- 热门商品 -->
+    <HotGoods class="my-10 default-width" />
   </div>
 </template>
 
@@ -28,12 +31,23 @@
 defineOptions({ name: 'mall-home-index'})
 import { ref } from 'vue'
 import Carousel from './components/carousel.vue'
+import HotGoods from './components/hotGoods.vue'
+import { useMallStore } from '@/store/mall'
+
+// 获取装修模版
+useMallStore().getMallDiyTemplate()
 
 const inputVal = ref('')
 const handleSearch = () => {}
 </script>
 
 <style scoped lang="scss">
+.stickyBox {
+  position: sticky;
+  top: 48px;
+  z-index: 999;
+  background-color: #fff;
+}
 .search {
   height: 50px;
   width: 800px;

src/views/recruit/personal/PersonalCenter/memberBenefits/membershipPackage/components/packageList.js

@@ -0,0 +1,51 @@
+const equity = ['VIP会员标识', '简历刷新次数', '简历屏蔽', '优先推荐', '简历模板', '谁看过我', '薪酬报告']
+
+export const packData =  [
+  {
+    name: '14天双周卡',
+    price: 128, // 128
+    type: '3',
+    id: '3', // 编号
+    equity,
+    showLength: 3,
+    vipFlag: '14'
+  },
+  {
+    name: '30天月卡',
+    price: 198,
+    type: '4',
+    id: '4', // 编号
+    equity,
+    showLength: 4,
+    vipFlag: '30'
+  },
+  {
+    name: '60天月卡',
+    price: 318,
+    type: '5',
+    recommend: true,
+    id: '5', // 编号
+    equity,
+    showLength: 5,
+    vipFlag: '60'
+  },
+  {
+    name: '90天月卡',
+    price: 378,
+    type: '6',
+    id: '6', // 编号
+    equity,
+    showLength: 6,
+    vipFlag: '90'
+  },
+  {
+    name: '年度卡',
+    price: 999,
+    // cycle: '6个月',
+    type: '7',
+    id: '7', // 编号
+    equity,
+    showLength: 7,
+    vipFlag: '365'
+  }
+]

src/views/recruit/personal/PersonalCenter/memberBenefits/membershipPackage/components/packageList.vue

@@ -0,0 +1,322 @@
+<!--  -->
+<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>
+      <div v-if="val.recommend" class="recommend">推荐</div>
+      <div class="text-center font-weight-bold">{{ val.name }}</div>
+      <div class="text-center my-5">
+        <div v-if="val.price && !val.cycle">
+          ￥
+          <span class="font-weight-bold font-size-20">{{ val.price / 100 }}</span>
+          <!-- /年 -->
+        </div>
+        <div v-if="val.cycle">￥<span class="font-weight-bold font-size-18 font-size-20">{{ val.price }}</span><span class="font-size-14 mr-3">起</span>  {{ val.cycle }}</div>
+        <!-- <div v-if="val.customized" class="font-size-20 font-weight-bold">按需定制</div> -->
+      </div>
+      <v-divider></v-divider>
+      <!-- <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>
+          <p
+            v-for="v in val.list"
+            :key="val.name + v.text"
+            class="vipColor"
+            :class="{ active: v.active}"
+          >{{ v.text }}</p>
+        </div>
+      </div>
+      <!-- <div v-else>
+        <h3 class="my-3">授权范围：</h3>
+        <div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
+      </div> -->
+      
+      <div
+        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>
+      <div class="text-center item-btn" v-else>
+        <v-btn
+          color="error"
+          variant="outlined"
+          rounded
+          :disabled="(userStore.userInfo?.vipExpireDate && userStore.userInfo?.vipExpireDate > Date.now()) && Number(val.id) < Number(userStore.userInfo?.vipFlag)"
+          :loading="val.loading"
+          @click="createOrder(val, i)"
+        >开通会员</v-btn>
+      </div>
+    </div>
+  </div>
+  <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>
+  </div>
+</div>
+  <!-- <CtDialog :visible="open" :widthType="3" :footer="false" titleClass="text-h6" title="开通会员" @close="open = false">
+  </CtDialog> -->
+</template>
+
+<script setup>
+defineOptions({name: 'purchasePackage-packageList'})
+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(null)
+const handleClickItem = (val, i) => {
+  active.value = i
+}
+
+const open = ref(false)
+const disabled = ref(false)
+
+const qrCode = ref('')
+const payChannelCode = ref('wx_native')
+const payPrice = ref(0)
+
+const expirationTime = ref(-1)
+const orderId = ref('')
+
+const canUse = computed(() => {
+  return new Date().getTime() < userStore.userInfo?.vipExpireDate
+})
+
+const packDataList = ref([])
+const getData = async () => {
+  const data = await getMembershipPackageList()
+  if (!data?.length) return
+  // 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,
+      list: JSON.parse(item.text),
+      type: 3, // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
+      loading: false
+    }
+  })
+  // 低于当前套餐的(套餐)不展示
+  // packDataList.value = vipFlagIndex ? list.slice(vipFlagIndex) : list
+  packDataList.value = list
+}
+getData()
+
+// 重新获取订单
+const refreshQrCode = (payType) => {
+  payChannelCode.value = payType
+}
+
+const dredgeIndex = ref(0)
+// 创建订单
+async function createOrder (val, i) {
+  dredgeIndex.value = i
+  val.loading = true
+  payPrice.value = val.price
+  try {
+    const data = await getOrder({
+      spuId: val.id, // 商品编号
+      type: val.type
+    })
+
+    if (data) {
+      // 获取支付码
+      paymentCode(data)
+      return
+    }
+
+
+    await orderCreated({
+      spuId: val.id, // 商品编号
+      spuName: val.name, // 商品名称
+      price: val.price, // 价格
+      type: val.type // 订单类型 0平台订单|1求职端订单|2招聘端订单|3会员套餐
+    })
+
+    const _data = await getOrder({
+      spuId: val.id, // 商品编号
+      type: val.type
+    })
+
+    // 获取支付码
+    
+    paymentCode(_data)
+    // qrCode.value = data
+  } catch (error) {
+    console.log(error)
+  } finally {
+    val.loading = false
+  }
+}
+
+async function paymentCode (param) {
+  try {
+    const res = await payOrderSubmit({
+      id: param.payOrder.id,
+      channelCode: payChannelCode.value
+    })
+    if (!res?.displayContent) {
+      Snackbar.error('获取支付码失败')
+      return 
+    }
+    orderId.value = param.payOrder.id
+    expirationTime.value = param.payOrder.expireTime - new Date().getTime()
+    // expirationTime.value = param.payOrder.expireTime - _now
+    qrCode.value = res.displayContent
+    open.value = true
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 支付成功
+function paySuccess () {
+  Snackbar.success('支付成功')
+  // 更新个人资料
+  userStore.getUserInfos()
+  open.value = false
+}
+
+// 过期
+function handleOverdue () {
+  disabled.value = true
+}
+</script>
+<style lang="scss" scoped>
+.greyText {
+  color: #774e2085 !important;
+}
+.list {
+  width: 100%;
+}
+.list-item {
+  position: relative;
+  // height: 400px;
+  min-height: 480px;;
+  width: calc((100% - 120px) / 5);
+  min-width: calc((100% - 120px) / 5);
+  max-width: calc((100% - 120px) / 5);
+  padding: 30px 20px;
+  border-radius: 14px;
+  margin-right: 30px;
+  color: #774e20;
+  background-color: #fafafa;
+  &.active {
+    background-color: rgba(255, 251, 248, 1);
+    border: 1px solid #f1b17a;
+    box-shadow: 0px 6px 12px 0px rgba(216, 160, 82, 0.36);
+  }
+  &:nth-child(5n) {
+    margin-right: 0;
+  }
+  .item-btn {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+ul li {
+  list-style: none;
+  font-size: 15px;
+  margin: 10px 0;
+  font-weight: 500;
+}
+
+:deep(.v-btn) {
+  border: 1px solid #bc8b55;
+  color: #c30f0f !important;
+  font-weight: 700;
+}
+.tips {
+  background-color: #fffbf8;
+  border: 1px solid #f1b17a;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 15px;
+}
+.recommend {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 55px;
+  height: 26px;
+  line-height: 26px;
+  background-color: #ff8a04;
+  border-radius: 12px 0 18px 0;
+  font-weight: 600;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+}
+.long {
+  width: 100px;
+}
+.scanCode {
+  border: 1px dashed #ccc;
+  border-radius: 10px;
+  padding: 30px;
+  .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;
+}
+
+.package-title {
+  height: 60px;
+  line-height: 60px;
+  color: #fff;
+  background: linear-gradient(45deg, #ff8a04, transparent);
+  font-weight: 700;
+  font-size: 20px;
+  text-align: center;
+  border-radius: 4px;
+}
+
+
+.vipColor {
+  color: #774e2085;
+  font-size: 15px;
+  padding: 5px 0;
+  &.active {
+    color:#774e20;
+  }
+}
+</style>

src/views/recruit/personal/PersonalCenter/memberBenefits/membershipPackage/index.vue

@@ -1,13 +1,20 @@
+<!-- 购买套餐 -->
 <template>
-  <PurchasePackage customClass=""></PurchasePackage>
+  <div class="card-box pa-3">
+    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
+      <v-tab :value="0">套餐列表</v-tab>
+    </v-tabs>
+    <packageList v-if="tab === 0"></packageList>
+  </div>
 </template>
 
 <script setup>
-defineOptions({ name: 'person-center-purchasePackage'})
-import PurchasePackage from '@/views/mall/purchasePackage'
+defineOptions({name: 'purchasePackage-index'})
+import { ref } from 'vue'
+import packageList from './components/packageList.vue'
 
+const tab = ref(0)
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style lang="scss" scoped>
+</style>