我的优惠券：数据的对接和去使用的功能实现

pages.json

@@ -645,11 +645,11 @@
 			"pages": [{
 					"path": "list",
 					"style": {
-						"navigationBarTitleText": "领券中心"
+						"navigationBarTitleText": "我的优惠券"
 					},
 					"meta": {
 						"sync": true,
-						"title": "领券中心",
+						"title": "我的优惠券",
 						"group": "优惠券"
 					}
 				},

pages/app/score-shop.vue

@@ -205,10 +205,13 @@
 		});
 		if (res.code === 1) {
 			uni.showToast({
-				title: res.msg,
+				title: '兑换成功',
 				icon: 'success'
 			})
 			showCouponPro.value = false;
+			listQuery.value.page = 1;
+			couponList.value = []
+			getCouponList();
 		} else {
 			uni.showToast({
 				title: res.msg,

pages/coupon/list.vue

@@ -1,6 +1,6 @@
 <!-- 优惠券中心  -->
 <template>
-	<s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
+	<s-layout title="我的优惠券" :bgStyle="{ color: '#f2f2f2' }">
 		<view class="container">
 			<!-- tabs页签 -->
 			<view class="tabs-box">
@@ -13,28 +13,31 @@
 				style="height: 700rpx auto;box-sizing: border-box;margin-top: 30rpx;">
 				<!-- 满减券 -->
 				<view class="exChangeBox" v-if="currentTab == 0">
-					<view class="couponsList">
+					<view class="couponsListFull">
-						<view class="list-item" v-for="(item, index) in couponFullList" :key="index">
+						<view class="fullItem" v-for="(item, index) in couponFullList" :key="index">
-							<view class="itemLeft">
+							<view class="itemFir">
-								<view class="fslh60 c3 bold">{{item.amount}}</view>
+								<view class="itemFirLeft">
-								<view class="fslh28 c3 regular" style="margin-top: 15rpx;">{{item.type_text}}</view>
+									<view class="fslh42 c3 bold" style="line-height: 36rpx;">￥{{item.amount}}</view>
-							</view>
+									<view class="fs28 c3D regular"
-							<view class="itemRight">
+										style="margin-top: 20rpx;line-height: 39rpx;width: 440rpx;">{{item.name}}
-								<view class="item-RightLeft">
-									<view class="fs32 c3D bold" style="line-height: 36rpx;">{{item.name}}</view>
-									<view class="fs24 c9 regular" style="margin-top: 20rpx;line-height: 30rpx;">仅限原料商城可用
 									</view>
 								</view>
 								<view class="item-btn" @click="toUseFull(item)">去使用</view>
 							</view>
+							<view class="line"></view>
+							<view class="itemSec">
+								<image style="width: 109rpx;height: 46rpx;"
+									src="https://jiangxiaoxian.0rui.cn/couponFull.png"></image>
+								<view class="fs24lh30 c9 regular" style="margin-left: 18rpx;">仅限原料商城可用</view>
+							</view>
 						</view>
 					</view>
 
 				</view>
 				<!-- 次数券 -->
 				<view class="exChangeBox" v-if="currentTab == 1">
-					<view class="couponsList">
+					<view class="couponsList" v-for="(e, i) in couponTimesList" :key="i">
-						<view class="list-item" v-for="(e, i) in couponTimesList" :key="i">
+						<view class="list-item">
 							<view class="itemLeft">
 								<view class="fslh60 c3 bold" style="text-align: center;">{{e.mobile_number}}</view>
 								<view class="fslh28 c3 regular" style="margin-top: 15rpx;">次数券</view>
@@ -141,7 +144,7 @@
 		if (res.code === 1) {
 			couponFullList.value = [...couponFullList.value, ...res.data.data];
 			couponFullCount.value = res.data.total;
-			console.log('满减券',couponFullList.value,couponFullList.value[0]);
+			console.log('满减券', couponFullList.value, couponFullList.value[0]);
 		} else {
 			uni.showToast({
 				title: res.msg,
@@ -162,6 +165,7 @@
 		if (res.code === 1) {
 			couponTimesList.value = [...couponTimesList.value, ...res.data.list];
 			couponTimesCount.value = res.data.count;
+			console.log('couponTimesList', couponTimesList.value);
 			// score.value = res.data.score
 		} else {
 			uni.showToast({
@@ -170,21 +174,57 @@
 			})
 		}
 	}
-	
+
 	/* 使用券 */
 	function toUseFull(item) {
-		
+		console.log('使用满减券', item);
+		uni.navigateTo({
+			url: '/pages/index/category'
+		})
 	}
-	function toUseTimes(e) {
+	async function toUseTimes(e) {
-		
+		console.log('使用次数券', e);
+		const data = {
+			id: e.id
+		}
+		const res = await sheep.$api.coupon.useTimes(data)
+		console.log('使用次数券_res:', res);
+		if (res.code == 1) {
+			uni.showToast({
+				title: '已增加您的拨打号码次数',
+				icon: 'success',
+				duration: 2000,
+			})
+			setTimeout(() => {
+				couponTimesList.value = [];
+				getCouponTimesList();
+			},1500)
+			
+		} else {
+			uni.showToast({
+				title: res.msg,
+				icon: 'error'
+			})
+		}
+
 	}
-	
+
 	//加载更多
 	function onScrolltolower() {
-		if (couponList.value.length < couponCount.value) {
+		if (currentTab.value == 0) {
-			listQuery.value.page += 1;
+			//满减券
-			getCouponList();
+			if (couponFullList.value.length < couponFullCount.value) {
+				listQuery.value.page += 1;
+				getCouponFullList();
+			}
+		} else {
+			//次数券
+			if (couponTimesList.value.length < couponTimesCount.value) {
+				listQuery.value.page += 1;
+				getCouponTimesList();
+			}
 		}
+
 	}
 	//下拉刷新
 	function onS() {
@@ -203,8 +243,13 @@
 	// 重置列表
 	function resetLists() {
 		listQuery.value.page = 1;
-		couponList.value = [];
+		couponFullList.value = [];
-		getCouponList();
+		// couponFullCount.value = 0;
+		// couponTimesCount.value = 0
+		couponTimesList.value = [];
+		getCouponFullList();
+		getCouponTimesList();
+		// getCouponList();
 	}
 
 	onLoad(() => {
@@ -219,15 +264,29 @@
 		line-height: 60rpx;
 	}
 
+	.fslh42 {
+		font-size: 42rpx;
+		line-height: 42rpx;
+	}
+
 	.fslh28 {
 		font-size: 28rpx;
 		line-height: 28rpx;
 	}
 
+	.fs24lh30 {
+		font-size: 24rpx;
+		line-height: 30rpx;
+	}
+
 	.fs32 {
 		font-size: 32rpx;
 	}
 
+	.fs28 {
+		font-size: 28rpx;
+	}
+
 	.justify-center {
 		justify-content: center;
 	}
@@ -277,11 +336,69 @@
 		height: 100vh;
 
 		.exChangeBox {
+			// height: 80vh;
 			// background-color: #f7f7f7;
-			width: 690rpx;
+			// width: 690rpx;
+
+			.couponsListFull {
+				// width: 690rpx;
+				display: grid;
+				justify-content: center;
+				align-items: center;
+				min-height: 80vh;
+
+				.fullItem {
+					width: 690rpx;
+					background-color: #ffffff;
+					border-radius: 20rpx;
+					display: grid;
+					justify-content: flex-start;
+					align-items: center;
+					// padding: 30rpx;
+					margin-bottom: 30rpx;
+
+					.itemFir {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin: 30rpx;
+
+						.item-btn {
+							width: 160rpx;
+							height: 70rpx;
+							background: linear-gradient(to right, #FCCA58, #FFBD25);
+							border-radius: 106rpx;
+							align-items: center;
+							justify-content: center;
+							display: flex;
+							font-size: 28rpx;
+							line-height: 36rpx;
+							font-weight: bold;
+							color: #333333;
+						}
+					}
+
+					.line {
+						width: 690rpx;
+						height: 1rpx;
+						background-color: #eeeeee;
+						// margin-top: 30rpx;
+						// margin-bottom: 20rpx;
+					}
+
+					.itemSec {
+						margin: 30rpx;
+						display: flex;
+						justify-content: flex-start;
+						align-items: center;
+					}
+				}
+
+			}
 
 			.couponsList {
 				width: 100%;
+				// min-height: 50vh;
 				padding: 0 30rpx;
 				display: grid;
 				grid-template-columns: repeat(2, 1fr);
@@ -297,6 +414,7 @@
 					background-image: url('https://jiangxiaoxian.0rui.cn/couponItemBack.png');
 					background-size: 100%;
 					display: flex;
+					margin-bottom: 30rpx;
 					justify-content: space-between;
 
 					.itemLeft {

sheep/api/coupon.js

@@ -48,4 +48,10 @@ export default {
 				goods_id: id,
 			},
 		}),
+	useTimes: (data) =>
+		request({
+			url: 'meal.score/mobile_use',
+			method: 'POST',
+			data,
+		})
 };