add: 1

src/views/marketing_center/components/headerCard.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="item">
+    <img :src="getIconPath(props.icon)" class="icon" />
+    <div class="info">
+      <div class="name">{{ props.name }}</div>
+      <div class="intro">
+        {{ props.intro }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import defaultIcon from '@/assets/logo.png';
+
+const props = defineProps({
+  icon: {
+    type: String,
+    defautl: ''
+  },
+  name: {
+    type: String,
+    default: ''
+  },
+  intro: {
+    type: String,
+    default: ''
+  }
+});
+
+// 动态获取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; // 图标不存在时使用默认图标
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.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>

src/views/marketing_center/consume_ticket/index.vue

@@ -1,4 +1,62 @@
 <!-- 消费赠券 -->
 <template>
-  <div>消费赠券</div>
+  <div class="app_main">
-</template>
+    <div class="card">
+      <headerCard icon="xfzq" name="消费赠券" intro="达到指定消费金额赠送优惠券" />
+      <div class="tab_wrap">
+        <div class="row">
+          <el-button type="primary">新增消费赠券</el-button>
+        </div>
+        <div class="row">
+          <el-table :data="tableData.list" border stripe>
+            <el-table-column prop="id" label="ID" width="180" />
+            <el-table-column prop="name" label="规则名称" width="180" />
+            <el-table-column prop="condition" label="消费条件" width="180" />
+            <el-table-column prop="coupon" label="赠送券" width="180" />
+            <el-table-column prop="status" label="状态" width="100" />
+            <el-table-column prop="created_at" label="创建时间" width="180" />
+            <el-table-column prop="actions" label="操作">
+              <template #default="scope">
+                <el-button type="text" size="small">编辑</el-button>
+                <el-button type="text" size="small">删除</el-button>
+                <el-button type="text" size="small">查看</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import headerCard from '@/views/marketing_center/components/headerCard.vue';
+
+import { ref, reactive } from 'vue';
+
+const tableData = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0,
+  list: [],
+});
+</script>
+
+<style scoped lang="scss">
+.app_main {
+  padding: 14px;
+}
+
+.card {
+  background-color: #fff;
+  padding: 14px;
+
+  .tab_wrap {
+    padding-top: 14px;
+
+    .row {
+      padding-top: 14px;
+    }
+  }
+}
+</style>