优惠券列表接口；优惠券中心接口交互；

api/coupon.js

@@ -0,0 +1,19 @@
+import request from '@/api'
+
+const openid = uni.getStorageSync('openid')
+
+const couponService = {
+	// 获取优惠券列表
+	getCouponList: () => request.postForm('/coupon/list'),
+	getUserCouponList: status => request.postForm('/coupon/list', {
+		status, //全部 ； 已使用； 已过期； 未使用
+		openid
+	}),
+	// 领取优惠券
+	claimCoupon: id => request.postForm('/coupon/get', {
+		id,
+		openid
+	})
+}
+
+export default couponService

pages.json

@@ -90,7 +90,8 @@
 		{
 			"path": "pages/self/coupon/index",
 			"style": {
-				"navigationBarTitleText": "我的优惠券"
+				"navigationBarTitleText": "我的优惠券",
+				"enablePullDownRefresh": true
 			}
 		},
 		{
@@ -106,7 +107,8 @@
 		{
 			"path": "pages/self/coupon/center",
 			"style": {
-				"navigationBarTitleText": "领券中心"
+				"navigationBarTitleText": "领券中心",
+				"enablePullDownRefresh": true
 			}
 		},
 		{

pages/self/coupon/center.vue

@@ -1,55 +1,66 @@
 <template>
 	<view class="page-wrap">
 		<view class="coupon-panel">
-			<view class="item">
+			<view class="item" v-for="(item, index) in couponList" :key="index">
 				<view class="name">
-					<view class="price">38</view>
-					<view class="text">三八女神节特惠券</view>
+					<view class="price">{{ item.showMoney }}</view>
+					<view class="text">{{ item.name }}</view>
 				</view>
-				<view class="desc time">有效日期：至 2023-12-31</view>
-				<view class="desc">所有产品品类通用</view>
-				<view class="desc">满100元可用</view>
-				<view class="side">
-					<text class="number">仅剩\n17张</text>
-					<button class="btn">可领2张</button>
+				<view class="desc time">有效日期：{{ item.endTime ? '至 ' + item.endTime : '无限制' }}</view>
+				<view class="desc">{{ item.productIds || item.categoryIds ? '指定产品品类可用' : '所有产品品类可用' }}</view>
+				<view class="desc">{{ item.line ? `满${item.line}元可用` : '无限制' }}</view>
+				<view class="side" v-if="item.leftNumber">
+					<text class="number">仅剩\n{{ item.leftNumber }}张</text>
+					<button class="btn" @click="handleClaim(item.couponId)">可领{{ item.everyoneMax }}张</button>
 				</view>
-			</view>
-			<view class="item disabled">
-				<view class="name">
-					<view class="price">38</view>
-					<view class="text">三八女神节特惠券</view>
-				</view>
-				<view class="desc time">有效日期：至 2023-12-31</view>
-				<view class="desc">所有产品品类通用</view>
-				<view class="desc">满100元可用</view>
-				<view class="side">
+				<view class="side" v-else>
 					<view class="over">已领完</view>
 					<text>持续发放中\n下次再领</text>
 				</view>
 			</view>
-			<view class="item">
-				<view class="name">
-					<view class="price">38</view>
-					<view class="text">三八女神节特惠券</view>
-				</view>
-				<view class="desc time">有效日期：至 2023-12-31</view>
-				<view class="desc">所有产品品类通用</view>
-				<view class="desc">满100元可用</view>
-				<view class="side">
-					<text class="number">仅剩\n17张</text>
-					<button class="btn">可领2张</button>
-				</view>
-			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+import couponService from '@/api/coupon.js';
 export default {
 	data() {
-		return {};
+		return {
+			couponList: []
+		};
+	},
+	onLoad() {
+		this.getCouponList();
+	},
+	onPullDownRefresh() {
+		this.getCouponList();
 	},
-	methods: {}
+	methods: {
+		// 获取优惠券列表
+		async getCouponList() {
+			const { tabActive } = this;
+			const { rows } = await couponService.getCouponList();
+			this.couponList = rows;
+			uni.pageScrollTo({ scrollTop: 0 });
+			uni.stopPullDownRefresh();
+		},
+		// 领取优惠券
+		async handleClaim(id) {
+			try {
+				await couponService.claimCoupon(id);
+				setTimeout(() => {
+					uni.showToast({
+						title: '领取成功',
+						icon: 'none'
+					});
+				}, 100);
+				this.getCouponList();
+			} catch {
+				this.getCouponList();
+			}
+		}
+	}
 };
 </script>
 
@@ -145,19 +156,19 @@ export default {
 		font-size: 27.47rpx;
 		line-height: 38.46rpx;
 	}
-	.over{
+	.over {
 		font-size: 30.22rpx;
 		margin: 13.74rpx 0 20.6rpx;
 	}
-	.time{
+	.time {
 		color: #000;
 	}
-	.btn{
+	.btn {
 		width: 164.84rpx;
 		height: 49.45rpx;
 		background: #fff;
 		border-radius: 8.24rpx;
-		color: #00BDEF;
+		color: #00bdef;
 		font-size: 24.73rpx;
 		line-height: 49.45rpx;
 		padding: 0;

pages/self/coupon/index.vue

@@ -1,95 +1,24 @@
 <template>
 	<view class="page-wrap">
 		<view class="tabs-panel">
-			<view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item.value">
-				{{ item.label }}
+			<view :class="{ item: true, active: tabActive === item }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item">
+				{{ item }}
 			</view>
 		</view>
 		<!-- 未使用 -->
-		<view v-if="tabActive === 1" class="coupon-panel">
-			<view class="item" @click="handleOpenCouponDetail">
-				<view class="name">三八女神节特惠券【通用】</view>
-				<view class="desc">使用范围：所有产品品类可用</view>
-				<view class="desc">使用条件：满100元可用</view>
-				<view class="desc">有效日期：至 2023-03-31</view>
+		<view class="coupon-panel">
+			<view class="item" v-for="(item, index) in couponList" :key="index" @click="handleOpenCouponDetail">
+				<view class="name">{{ item.name }}</view>
+				<view class="desc">使用范围：{{ item.productIds || item.categoryIds ? '指定产品品类可用' : '所有产品品类可用' }}</view>
+				<view class="desc">使用条件：{{ item.line ? `满${item.line}元可用` : '无限制' }}</view>
+				<view class="desc">有效日期：{{ item.endTime ? '至 ' + item.endTime : '无限制' }}</view>
 				<view class="side">
-					<view class="price">38</view>
-					满100元可用
-				</view>
-			</view>
-			<view class="item">
-				<view class="name">100元财税代金券</view>
-				<view class="desc">使用范围：指定产品品类可用</view>
-				<view class="desc">使用条件：无限制</view>
-				<view class="desc">有效日期：无限制</view>
-				<view class="side">
-					<view class="price">100</view>
-					使用无限制
-				</view>
-			</view>
-			<view class="item">
-				<view class="name">六一童心特惠券</view>
-				<view class="desc">使用范围：所有产品品类可用</view>
-				<view class="desc">使用条件：满100元可用</view>
-				<view class="desc">有效日期：至 2023-03-31</view>
-				<view class="side">
-					<view class="price">61</view>
-					满100元可用
-				</view>
-			</view>
-		</view>
-		<!-- 已使用 -->
-		<view v-if="tabActive === 2" class="coupon-panel">
-			<view class="item disabled">
-				<view class="name">
-					<view class="price">38</view>
-					<view class="text">三八女神节特惠券</view>
-				</view>
-				<view class="desc">使用范围：所有产品品类可用</view>
-				<view class="desc">使用条件：满100元可用</view>
-				<view class="desc">有效日期：至 2023-03-31</view>
-				<view class="side">
-					<image class="state-1" src="../../static/img_coupon_state_1.png"></image>
-				</view>
-			</view>
-			<view class="item disabled">
-				<view class="name">
-					<view class="price">100</view>
-					<view class="text">财税代金券</view>
-				</view>
-				<view class="desc">使用范围：所有产品品类可用</view>
-				<view class="desc">使用条件：满100元可用</view>
-				<view class="desc">有效日期：至 2023-03-31</view>
-				<view class="side">
-					<image class="state-1" src="../../static/img_coupon_state_1.png"></image>
-				</view>
-			</view>
-		</view>
-		<!-- 已使用 -->
-		<view v-if="tabActive === 3" class="coupon-panel">
-			<view class="item disabled">
-				<view class="name">
-					<view class="price">38</view>
-					<view class="text">三八女神节特惠券</view>
-				</view>
-				<view class="desc">使用范围：所有产品品类可用</view>
-				<view class="desc">使用条件：满100元可用</view>
-				<view class="desc">有效日期：至 2023-03-31</view>
-				<view class="side">
-					<image class="state-2" src="../../static/img_coupon_state_2.png"></image>
-				</view>
-			</view>
-			<view class="item disabled">
-				<view class="name">
-					<view class="price">100</view>
-					<view class="text">财税代金券</view>
-				</view>
-				<view class="desc">使用范围：所有产品品类可用</view>
-				<view class="desc">使用条件：满100元可用</view>
-				<view class="desc">有效日期：至 2023-03-31</view>
-				<view class="side">
-					<image class="state-2" src="../../static/img_coupon_state_2.png"></image>
+					<view class="price">{{ item.showMoney }}</view>
+					{{ item.line ? `满${item.line}元可用` : '使用无限制' }}
 				</view>
+				<!-- <view class="side">
+					<image class="state-1" src="@/static/img_coupon_state_1.png"></image>
+				</view> -->
 			</view>
 		</view>
 		<button class="foot-btn" @click="handleOpenCouponCenter()">去领券中心看看</button>
@@ -97,27 +26,38 @@
 </template>
 
 <script>
+import couponService from '@/api/coupon.js';
 export default {
 	data() {
 		return {
-			tabActive: 1,
-			tabList: [
-				{
-					label: '未使用',
-					value: 1
-				},
-				{
-					label: '已使用',
-					value: 2
-				},
-				{
-					label: '已失效',
-					value: 3
-				}
-			]
+			tabActive: '未使用',
+			tabList: ['未使用', '已使用', '已失效'],
+			couponList: []
 		};
 	},
+	watch: {
+		tabActive() {
+			this.getCouponList();
+		}
+	},
+	onLoad() {
+		this.getCouponList();
+	},
+	onShow() {
+		this.getCouponList();
+	},
+	onPullDownRefresh() {
+		this.getCouponList();
+	},
 	methods: {
+		// 获取优惠券列表
+		async getCouponList() {
+			const { tabActive } = this;
+			const { rows } = await couponService.getUserCouponList(tabActive === '已失效' ? '已过期' : tabActive);
+			this.couponList = rows;
+			uni.pageScrollTo({ scrollTop: 0 });
+			uni.stopPullDownRefresh();
+		},
 		handleOpenCouponDetail() {
 			uni.navigateTo({
 				url: 'detail'