新增部分优惠券页面

2025-11-20 10:27:08 +08:00
parent 805236dc5d
commit f74364a253
13 changed files with 887 additions and 368 deletions
--- a/components/my-components/my-coupon-item.vue
+++ b/components/my-components/my-coupon-item.vue
@@ -0,0 +1,110 @@
+<!-- 优惠券item -->
+<template>
+	<view class="item">
+		<view class="header">
+			<text class="title">{{ item.title }}</text>
+			<text class="id">ID:83713</text>
+		</view>
+		<view class="content">
+			<slot></slot>
+		</view>
+		<view class="total-info">
+			<view class="item">
+				<text class="info">{{ item.giveNum }}</text>
+				<text class="title">总发放</text>
+			</view>
+			<view class="item">
+				<text class="info">{{ item.giftNum }}</text>
+				<text class="title">已领取</text>
+			</view>
+			<view class="item">
+				<text class="info">{{ item.useNum }}</text>
+				<text class="title">已使用</text>
+			</view>
+			<view class="item">
+				<text class="info">
+					<template v-if="item.giveNum == -10086">无限</template>
+					<template v-else>{{ item.leftNum }}</template>
+				</text>
+				<text class="title">剩余</text>
+			</view>
+		</view>
+		<view class="footer-wrap">
+			<view class="btn">
+				<u-button shape="circle">删除</u-button>
+			</view>
+			<view class="btn">
+				<u-button shape="circle" type="primary">编辑</u-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+const props = defineProps({
+	item: {
+		type: Object,
+		default: {}
+	}
+});
+</script>
+
+<style scoped lang="scss">
+.item {
+	background-color: #fff;
+	border-radius: 20upx;
+	padding: 28upx;
+	.header {
+		display: flex;
+		justify-content: space-between;
+		.title {
+			font-size: 32upx;
+			color: #333;
+		}
+		.id {
+			font-size: 24upx;
+			color: #999;
+			background-color: #f8f8f8;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 0 8upx;
+			border-radius: 4upx;
+		}
+	}
+	.content {
+		margin-top: 28upx;
+		padding: 20upx;
+		background-color: #f8f8f8;
+		border-radius: 12upx;
+	}
+	.total-info {
+		display: flex;
+		.item {
+			flex: 1;
+			display: flex;
+			gap: 12upx;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			.info {
+				font-weight: bold;
+				font-size: 28upx;
+				color: #333;
+			}
+			.title {
+				font-size: 24upx;
+				color: #999;
+			}
+		}
+	}
+	.footer-wrap {
+		display: flex;
+		justify-content: flex-end;
+		gap: 28upx;
+		.btn {
+			width: 200upx;
+		}
+	}
+}
+</style>