add: 新增营销中心新版列表页面

src/views/marketing_center/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>

src/views/marketing_center/list.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="app-container">
+    <div class="card">
+      <div class="row" v-for="(item, index) in menus" :key="index">
+        <div class="title">
+          {{ item.label }}
+        </div>
+        <div class="menus_wrap">
+          <div class="item" v-for="(val, i) in item.list" :key="i">
+            <img :src="getIconPath(val.icon)" class="icon" @error="handleImageError(val)" />
+            <div class="info" @click="to(val)">
+              <div class="name">{{ val.name }}</div>
+              <div class="intro">
+                {{ val.intro }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import defaultIcon from '@/assets/logo.png';
+import { ElMessage } from 'element-plus'
+
+const router = useRouter();
+const to = (item) => {
+  if (!item.path) {
+    ElMessage.warning('暂未开放')
+    return;
+  }
+  router.push("/application/" + item.path);
+};
+const menus = ref([
+  {
+    label: '营销',
+    list: [
+      { name: "霸王餐", icon: 'bwc', path: "bwc", intro: '设置充值消费的N倍，当前订单立即免单' },
+      { name: "邀请列表", icon: 'yqlb', path: "invite", intro: '邀请好友领券' },
+      { name: "积分锁客", icon: 'jfsk', path: "points", intro: '设置充值消费的N倍，当前订单立即免单' },
+      { name: "充值活动", icon: 'czhd', path: "", intro: '允许客户充值并使用余额支付' },
+      { name: "弹窗广告", icon: 'tcgg', path: "", intro: '设置弹窗广告' },
+      { name: "超级会员", icon: 'cjhy', path: "", intro: '用户会员管理设置' },
+      { name: "新客立减", icon: 'xklj', path: "", intro: '首单下单减免金额' },
+      { name: "智慧充值", icon: 'zhcz', path: "", intro: '允许客户充值并使用余额支付' },
+      { name: "分销", icon: 'zhcz', path: "", intro: '允许客户充值并使用余额支付' },
+      { name: "消费返现", icon: 'xffx', path: "", intro: '用户下单后返现一定的金额到余额，可促进复购' },
+      { name: "私域引流", icon: 'syyl', path: "", intro: '可设置用户下单成功后的群二维码' },
+      { name: "满减活动", icon: 'mjhd', path: "", intro: '达到指定支付金额享受减价' },
+      { name: "生日有礼", icon: 'sryl', path: "", intro: '用户生日管理设置' },
+      { name: "点餐智能推荐", icon: 'dczntj', path: "", intro: '进入点单页X秒未点自动推荐商品，此推荐设置启用即生效' },
+      { name: "超值券包", icon: 'czqb', path: "", intro: '下单加购' },
+      { name: "套餐推广", icon: 'tctg', path: "", intro: '下单通过用户邀请好友减免金额的方式裂变宣传套餐加购' },
+      { name: "充值兑换码", icon: 'czdhm', path: "", intro: '兑换码直充余额，可当作礼品赠送' },
+      { name: "券兑换码", icon: 'qdhm', path: "", intro: '可添加多券组合兑换' },
+      { name: "限时折扣", icon: 'xszk', path: "", intro: '批量设置商品折扣' },
+      { name: "商品拼团", icon: 'sppt', path: "", intro: '拼团' },
+    ]
+  },
+  {
+    label: '优惠券',
+    list: [
+      { name: "满减券", icon: 'mjq', path: "coupon", intro: '用户满足指定金额后，可使用优惠券立减相应金额，如：设置满100-50券，符合要求的订单满100元后，立减50元。' },
+      { name: "商品兑换券", icon: 'spdhq', path: "bwc", intro: '设置可兑换成商品的券' },
+      { name: "折扣券", icon: 'zkq', path: "", intro: '下单享折扣但折扣的金额将在券中抵扣。' },
+      { name: "第二件半价券", icon: 'dejbjq', path: "", intro: '设置第二件半价券' },
+      { name: "消费赠券", icon: 'xfzq', path: "", intro: '达到指定消费金额赠送优惠券' },
+      { name: "买一送一券", icon: 'myzy', path: "", intro: '针对营销活动买一送一设置券品' },
+      { name: "固定价格券", icon: 'gdjkq', path: "", intro: '设置该券后，允许用户以固定价格兑换指定商品，如：设置一个固定价格9.9的券，商品20元，用户使用券后只需要9.9元兑换该商品。' },
+      { name: "免配送费券", icon: 'mfpsq', path: "", intro: '可设置一张免除订单配送费的券' },
+    ]
+  },
+  {
+    label: '推送功能',
+    list: [
+      { name: "推送活动消息", icon: 'tshdxx', path: "coupon", intro: '给用户推送服务通知' },
+      { name: "短信推送", icon: 'dxts', path: "bwc", intro: '给用户推送服务通知' },
+    ]
+  },
+  {
+    label: '扩展功能',
+    list: [
+      { name: "微信公众号", icon: 'wxgzh', path: "coupon", intro: '授权微信公众号后，让你能够在后台查看和维护公众号的粉丝；同时你的店铺也有出现关注公众号的入口。' },
+    ]
+  }
+]);
+
+
+// 动态获取PNG图标路径
+const getIconPath = (iconName) => {
+  try {
+    // 直接导入对应PNG文件
+    return new URL(`/src/assets/applocation/${iconName}.png`, import.meta.url).href;
+  } catch (error) {
+    console.warn(`图标 ${iconName}.png 不存在`);
+    return defaultIcon; // 图标不存在时使用默认图标
+  }
+};
+
+// 处理图片加载失败
+const handleImageError = (item) => {
+  console.error(`图标 ${item.icon}.png 加载失败`);
+};
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  padding: 14px;
+
+  .card {
+    padding: 14px;
+    background-color: #fff;
+
+    .row {
+      padding-bottom: 14px;
+
+      .title {
+        font-size: 16px;
+      }
+
+      .menus_wrap {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 14px;
+        margin-top: 14px;
+
+        .item {
+          display: flex;
+          align-items: center;
+          padding: 10px;
+          background-color: #F8F8F8;
+          border-radius: 4px;
+          transition: all 0.1s ease-in-out;
+
+          &:hover {
+            cursor: pointer;
+            background-color: #d5ebff;
+          }
+
+          .icon {
+            width: 48px;
+            height: 48px;
+            margin-right: 10px;
+          }
+
+          .info {
+            .name {
+              font-size: 14px;
+            }
+
+            .intro {
+              margin-top: 4px;
+              font-size: 14px;
+              color: #666;
+              line-height: 1.4em;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              line-clamp: 1;
+              -webkit-box-orient: vertical;
+              word-break: break-all;
+              white-space: normal;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>