add: 1.新增各类优惠券

2.新增已领取详情弹窗
3.新增已关联弹窗

src/views/marketing_center/components/relevanceDialog.vue

@@ -0,0 +1,156 @@
+<template>
+	<div>
+		<el-dialog title="已关联功能" v-model="dialogVisible">
+			<el-tabs v-model="tableData.type" @tab-change="tabChange">
+				<el-tab-pane label="会员开通赠券" :name="1"></el-tab-pane>
+				<el-tab-pane label="会员周活动" :name="2"></el-tab-pane>
+				<el-tab-pane label="消费赠券" :name="3"></el-tab-pane>
+				<el-tab-pane label="券兑换码" :name="8"></el-tab-pane>
+				<el-tab-pane label="口令兑换活动" :name="9"></el-tab-pane>
+			</el-tabs>
+			<el-table :data="tableData.list" border stripe v-loading="tableData.loading">
+				<el-table-column label="关联" prop="sourceName"></el-table-column>
+				<el-table-column label="路径" prop="name">
+					<template #default="scope">
+						{{ props.name }}
+					</template>
+				</el-table-column>
+				<!-- <el-table-column label="描述" prop="id"></el-table-column> -->
+				<el-table-column label="数量" prop="num"></el-table-column>
+				<el-table-column label="操作">
+					<template #default="scope">
+						<el-button type="primary" link @click="linkTo(scope.row)">查看</el-button>
+						<!-- <el-popconfirm
+							title="确认要取消关联吗？"
+							@confirm="deleteHandle(scope.row)"
+						>
+							<template #reference>
+								<el-button type="danger" link>取消关联</el-button>
+							</template>
+						</el-popconfirm> -->
+					</template>
+				</el-table-column>
+			</el-table>
+			<div class="row">
+				<el-pagination
+					v-model:current-page="tableData.page"
+					v-model:page-size="tableData.pageSize"
+					:page-sizes="[100, 200, 300, 400]"
+					background
+					layout="total, sizes, prev, pager, next, jumper"
+					:total="tableData.total"
+					@size-change="handleSizeChange"
+					@current-change="handleCurrentChange"
+				/>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { relevanceCoupon, delRelevanceCoupon } from "@/api/coupon/index.js";
+
+const router = useRouter();
+const props = defineProps({
+	name: {
+		type: String,
+		default: "",
+	},
+});
+
+const dialogVisible = ref(false);
+const row = ref(null);
+
+const tableData = reactive({
+	loading: false,
+	type: 1,
+	page: 1,
+	pageSize: 10,
+	total: 0,
+});
+
+// 跳转查看
+function linkTo(e) {
+	const links = {
+		1: "", // 会员开通赠券
+		2: "", // 会员周活动
+		3: "consume_ticket", // 消费赠券
+		8: "", // 券兑换码
+		9: "", // 口令兑换活动
+	};
+	router.push({
+		name: links[tableData.type],
+		query: {
+			id: e.sourceId,
+		},
+	});
+}
+
+// 取消关联
+async function deleteHandle(e) {
+	try {
+		tableData.loading = true;
+		await delRelevanceCoupon({
+			id: e.id,
+		});
+		relevanceCouponAjax();
+	} catch (error) {
+		console.log(error);
+	}
+}
+
+// 切换选项
+function tabChange(t) {
+	console.log(t);
+	relevanceCouponAjax();
+}
+
+// 分页大小发生变化
+function handleSizeChange(e) {
+	tableData.pageSize = e;
+	relevanceCouponAjax();
+}
+
+// 分页发生变化
+function handleCurrentChange(e) {
+	tableData.page = e;
+	relevanceCouponAjax();
+}
+
+// 获取关联数据
+async function relevanceCouponAjax() {
+	try {
+		tableData.loading = true;
+		const res = await relevanceCoupon({
+			couponId: row.value.syncId ? row.value.syncId : row.value.id,
+			type: tableData.type,
+			page: tableData.page,
+			size: tableData.pageSize,
+		});
+
+		tableData.total = res.totalRow;
+		tableData.list = res.records;
+	} catch (error) {
+		console.log(error);
+	}
+	tableData.loading = false;
+}
+
+function show(obj = null) {
+	row.value = { ...obj };
+	dialogVisible.value = true;
+	tableData.loading = false;
+	relevanceCouponAjax();
+}
+
+defineExpose({
+	show,
+});
+</script>
+
+<style scoped lang="scss">
+.row {
+	padding-top: 14px;
+}
+</style>