xx

src/views/marketing/VoucherManagement.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="voucher-management-container">
+    <div class="header">
+      <el-page-header @back="goBack">
+        <template #content>
+          <span class="text-large font-600 mr-3">代金券管理 (ID: {{ voucherId }})</span>
+        </template>
+      </el-page-header>
+    </div>
+
+    <el-card class="mt-4" shadow="never">
+      <el-tabs v-model="activeTab" type="card">
+        <el-tab-pane label="用户分发管理" name="user-distribution">
+          <UserVoucher :code-id="voucherId" />
+        </el-tab-pane>
+        
+        <el-tab-pane label="商品关联管理" name="discount-goods">
+          <DiscountGoods :code-id="voucherId" />
+        </el-tab-pane>
+        
+        <el-tab-pane label="用户关联管理" name="discount-users">
+          <DiscountUsers :code-id="voucherId" />
+        </el-tab-pane>
+        
+        <el-tab-pane label="用户信息管理" name="user-info">
+          <VoucherHolders :code-id="voucherId" />
+        </el-tab-pane>
+        
+        <el-tab-pane label="用户使用记录" name="user-history">
+          <VoucherHistory :code-id="voucherId" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import UserVoucher from './UserVoucher.vue'
+import DiscountGoods from './DiscountGoods.vue'
+import DiscountUsers from './DiscountUsers.vue'
+import VoucherHolders from './VoucherHolders.vue'
+import VoucherHistory from './VoucherHistory.vue'
+
+const route = useRoute()
+const router = useRouter()
+const activeTab = ref('user-distribution')
+
+const voucherId = computed(() => route.params.id)
+
+const goBack = () => {
+  router.push('/marketing/voucher')
+}
+</script>
+
+<style scoped>
+.voucher-management-container {
+  padding: 20px;
+}
+
+.header {
+  margin-bottom: 20px;
+}
+
+.mt-4 {
+  margin-top: 16px;
+}
+</style>