新增优惠券功能

center/center.vue

@@ -76,7 +76,7 @@
 				customerMobile:'',
 				tools:[
 					// {name:'观看记录',url:'/center/viewrecord',ico:this.$commonConfig.staticUrl+'/img/center-record.png',checkauth:true},
-					// {name:'领券中心',url:'/center/mycoupon',ico:this.$commonConfig.staticUrl+'/img/center-coupon.png',checkauth:true},
+					{name:'领券中心',url:'/center/mycoupon',ico:this.$commonConfig.staticUrl+'/img/center-coupon.png',checkauth:true},
 					// {name:'开具发票',url:'center/invoice',ico:this.$commonConfig.staticUrl+'/img/center-ticket.png',checkauth:true},
 					{name:'我的订单',url:'center/order',ico:this.$commonConfig.staticUrl+'/img/center-order.png',checkauth:true},
 					{name:'客服热线',url:'',ico:this.$commonConfig.staticUrl+'/img/center-call.png',checkauth:true,phone:''},

center/couponlist.vue

@@ -0,0 +1,294 @@
+<template>
+	<view class="">
+		<u-navbar
+			title="活动中心"
+			:placeholder="true"
+			:autoBack="false"
+			@leftClick="leftClick"
+			 :safeAreaInsetTop="true"
+		>
+		</u-navbar>
+		<view class="tabs-wrap">
+			<u-tabs 
+			:list="tabsList" 
+			lineColor="#ED0000" 
+			 :activeStyle="{color:'#ED0000','font-weight': '600','font-size':'30rpx'}"
+			 :inactiveStyle="{color:'#999'}"
+			 :itemStyle="{width:'28%','padding-bottom':'20rpx'}"
+			@click="tabsClick"></u-tabs>
+		</view>
+		<u-empty mode="data" v-if="tabsList.length<1" >
+		</u-empty>
+		<mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
+			<view class="page-wrap" v-if="dataList.length>0" >
+				<view class="coupon-list">
+					<view class="item" 
+						:class="{disable:item.status==2,ifReceive:item.ifReceive==1}" 
+						:style="{backgroundImage:`url(${staticUrl}/img/coupon-active-bg.png)`}" v-for="item in dataList" :key="item.couponId">
+						<view class="content u-flex">
+							<view class="left">
+								<view class="quota">
+									<text v-if="item.type == 1">￥</text>
+									<text class="number" :class="{'small': String(item.quota).length>=3}">{{item.quota}}</text>
+									<text v-if="item.type == 2">%</text>
+								</view>
+								<view class="condition" v-if="item.useThresholdType == 2">
+									消费满{{item.useThresholdAmount}}可用
+								</view>
+							</view>
+							<view class="center">
+								<view class="name" :class="{'small': String(item.couponName).length>=9}">{{item.couponName}}</view>
+								<view class="tip">
+									<view class="" v-if="item.useType==1">
+										<!-- <view class="">{{item.useStartDate}}</view>
+										<view class="">{{item.useEndDate}}</view> -->
+										有效期至 {{item.useEndDate}}
+									</view>
+									<view class="" v-if="item.useType==2">
+										领取后{{item.useDay}}天内有效
+									</view>
+								</view>
+							</view>
+							<view class="right">
+								<text class="btn" @click="receiveCoupon(item)" v-if="item.ifReceive!==1">立即领取</text>
+								<text class="btn" v-else>立即领取</text>
+								<!-- <view class="time">
+									<view class="">{{item.issuseStartDate}}</view>
+									<view class="">{{item.issuseEndDate}}</view>
+								</view> -->
+							</view>
+						</view>
+						<view class="type" v-if="item.type == 1">满减券</view>
+						<view class="type" v-else-if="item.type == 2">折扣卷</view>
+						<!-- <image class="status-img" :src="staticUrl+'/img/coupon-status-shiyong.png'"></image> -->
+					</view>
+				</view>
+			</view>
+		</mescroll-body>
+		<u-popup :show="receiveCouponSuccessShow" @close="receiveCouponSuccessClose" mode="center" bgColor="transparent">
+			<view class="receive-coupon-success">
+				<view class="content" :style="{backgroundImage:`url(${staticUrl}/img/receive-coupon-success.png)`}">
+					<view class="title">领取成功</view>
+					<view class="con">恭喜您！优惠券领取成功！</view>
+				</view>
+				<u-icon @click="receiveCouponSuccessClose" name="close-circle" color="#B5B5B5" size="80rpx"></u-icon>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	// 引入mescroll-mixins.js
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin], // 使用mixin
+		data() {
+			return {
+				staticUrl:this.$commonConfig.staticUrl,
+				downOption: {},
+				// 上拉加载的配置(可选, 绝大部分情况无需配置)
+				upOption: {
+					page: {
+						size: 10 // 每页数据的数量,默认10
+					},
+					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
+					empty: {
+						tip: '暂无相关数据'
+					}
+				},
+				tabsList:[],
+				params:{
+					actId:''
+				},
+				activeIndex:0,
+				dataList: [],
+				receiveCouponSuccessShow:false,
+			}
+		},
+		onShow() {
+			
+		},
+		onLoad() {
+			this.goodsClassify();
+			// this.params.type = this.tabsList[this.activeIndex].actId;
+			// console.log('1111', this.tabsList[this.activeIndex]);
+		},
+		methods: {
+			leftClick(e){
+				let pages = getCurrentPages();
+				if(pages.length==1){
+					uni.$u.route('/pages/index/index')
+				}else{
+					uni.navigateBack()
+				};
+			},
+			goodsClassify(){
+				this.$u.api.validActList().then(res=>{
+					this.tabsList = res.data.list.map(item=>{
+						return {name:item.activityName,actId:item.id}
+					});
+					// this.tabsList.unshift({label:'全部',value:''});
+					console.log('this.tabsList',this.tabsList);
+					this.reloadList();
+				}).catch(err=>{
+					console.log('goodsClassify',err);
+				})
+			},
+			/*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
+			downCallback(){
+				this.mescroll.resetUpScroll();
+			},
+			/*上拉加载的回调*/
+			upCallback(page) {
+				// 此处可以继续请求其他接口
+				// if(page.num == 1){
+				// 	// 请求其他接口...
+				// }
+			
+				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
+				this.params.actId = this.tabsList[this.activeIndex]?.actId;
+				if(!this.params.actId){
+					this.mescroll.endErr();
+					return // 此处return,先获取xx
+				}
+			
+				let pageNum = page.num; // 页码, 默认从1开始
+				let pageSize = page.size; // 页长, 默认每页10条isAsc:0//时间排序 0:降序 1:升序 (默认星级降序排序)
+
+				this.params = Object.assign(this.params,{pageNum:pageNum,pageSize:pageSize});
+				this.$u.api.couponList(this.params).then(data => {
+					console.log('data',JSON.parse(JSON.stringify(data)));
+					// 接口返回的当前页数据列表 (数组)
+					let curPageData = data.data.list;
+					console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
+					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
+					let curPageLen = curPageData.length; 
+					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
+					// let totalPage =  data.data.data.totalPage; 
+					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
+					let totalSize = data.data.total; 
+					// 接口返回的是否有下一页 (true/false)
+					// let hasNext = data.xxx; 
+					// console.log('totalPage',totalPage,'curPageLen',curPageLen);
+					//设置列表数据
+					if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
+					this.dataList = this.dataList.concat(curPageData); //追加新数据
+					// 请求成功,隐藏加载状态
+					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
+					// this.mescroll.endByPage(curPageLen, totalPage); 
+					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
+					this.mescroll.endBySize(curPageLen, totalSize); 
+				}).catch(err => {
+					this.mescroll.endErr()
+					console.log(err)
+				});	
+			
+			},
+			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
+			reloadList() {
+				this.mescroll.resetUpScroll();
+			},
+			tabsClick(item){
+				this.activeIndex = item.index;
+				this.reloadList()
+				console.log('item',item);
+			},
+			receiveCoupon(item){
+				// console.log('receiveCoupon',item);
+				let param ={
+					actId:this.tabsList[this.activeIndex].actId,
+					couponId:item.couponId
+				}
+				this.$u.api.receiveCoupon(param).then(res=>{
+					this.receiveCouponSuccessShow = true;
+					setTimeout(()=>{
+						uni.$u.route('/center/mycoupon')
+					},2000);
+				}).catch(err=>{
+					console.log('receiveCoupon',err);
+				})
+			},
+			receiveCouponSuccessClose(){
+				this.receiveCouponSuccessShow = false;
+				uni.$u.route('/center/mycoupon')
+				// this.reloadList();
+			}
+		}
+	}
+</script>
+<style>
+page{
+	background-color: #f5f5f5;
+}
+</style>
+<style lang="scss" scoped>
+.credit{
+	padding: 20rpx;
+	background-color: #fff;
+	border-radius: 8rpx;
+	margin: 0 20rpx 20rpx;
+	font-size: 36rpx;
+	font-weight: 600;
+	color: #00A447;
+}
+.tabs-wrap{
+	background-color: #fff;
+	margin-bottom: 10rpx;
+}
+.list{
+	border-radius: 8rpx;
+	padding: 0 20rpx 20rpx;
+	background-color: #fff;
+	.item{
+		padding: 20rpx 0;
+		border-bottom: 0.5px solid #ddd;
+		.name{
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #333333;
+			line-height: 42rpx;
+			margin-bottom: 8rpx;
+		}
+		.time{
+			font-size: 24rpx;
+			font-weight: 400;
+			color: #999999;
+			line-height: 33rpx;
+		}
+		.num{
+			font-size: 30rpx;
+			font-weight: 600;
+			color: #FFB100;
+			&.plus{
+				color: #00A447;
+			}
+		}
+	}
+}
+.receive-coupon-success{
+	position: relative;
+	.content{
+		width: 477rpx;
+		height: 499rpx;
+		background-size: 100% 100%;
+		text-align: center;
+		padding: 0 24rpx;
+		font-weight: bold;
+		overflow: hidden;
+	}
+	.title{
+		font-size: 40rpx;
+		color: #FF1212;
+		line-height: 60rpx;
+		margin-top: 290rpx;
+		margin-bottom: 32rpx;
+	}
+	.con{
+		font-size: 28rpx;
+		color: #4E4E4E;
+	}
+	/deep/ .u-icon{
+		justify-content: center;
+	}
+}
+</style>

center/couponselect.vue

@@ -0,0 +1,122 @@
+<template>
+	<view class="pages">
+		<u-navbar
+			title="选择优惠券"
+			:placeholder="true"
+			:autoBack="false"
+			 @leftClick="leftClick"
+			 :safeAreaInsetTop="true"
+		>
+		</u-navbar>
+		<view class="page-wrap">
+			<view class="coupon-list" v-if="dataList.length>0">
+				<view class="item"
+					:class="{disable:item.status==2}" 
+					:style="{backgroundImage:`url(${staticUrl}/img/coupon-active-bg.png)`,filter:item.status!=1?'grayscale(100%)':''}" v-for="item in dataList" :key="item.id">
+					<view class="content u-flex">
+						<view class="left">
+							<view class="quota">
+								<text v-if="item.type == 1">￥</text>
+								<text class="number" :class="{'small': String(item.quota).length>=3}">{{item.quota}}</text>
+								<text v-if="item.type == 2">%</text>
+							</view>
+							<view class="condition" v-if="item.useThresholdType == 2">
+								消费满{{item.useThresholdAmount}}可用
+							</view>
+						</view>
+						<view class="center">
+							<view class="name" :class="{'small': String(item.couponName).length>=9}">{{item.couponName}}</view>
+							<view class="tip">
+								有效期至 {{item.endTime||''}}
+							</view>
+						</view>
+						<view class="right">
+							<text class="btn" @click="couponClick(item)">去使用</text>
+							<!-- <view class="time">
+								<view class="">{{item.startTime}}</view>
+								<view class="">{{item.endTime}}</view>
+							</view> -->
+						</view>
+					</view>
+					<view class="type" v-if="item.type == 1">满减券</view>
+					<view class="type" v-else-if="item.type == 2">折扣卷</view>
+					<image class="status-img" :src="staticUrl+'/img/coupon-status-shiyong.png'" v-if="item.status == 2"></image>
+					<image class="status-img" :src="staticUrl+'/img/coupon-status-guoqi.png'" v-if="item.status == 3"></image>
+					<image class="status-img" :src="staticUrl+'/img/coupon-status-guoqi.png'" v-if="item.status == 4"></image>
+				</view>
+			</view>
+			<u-empty mode="list" text="暂无可用优惠券" v-else></u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		name:'',
+		components:{
+			
+		},
+		props:{
+			
+		},
+		data(){
+			return{
+				staticUrl:this.$commonConfig.staticUrl,
+				param:{
+					salePrice:undefined,
+					performId:undefined,
+					goodsId:[]
+				},
+				dataList:[],
+			}
+		},
+		onLoad(page){
+			console.log('page',page);
+			this.param.salePrice = page.salePrice;
+			this.param.performId = page.performId;
+			this.param.goodsId =  page.goodsId;
+		},
+		onShow() {
+			this.findOrderCoupons()
+		},
+		methods:{
+			leftClick(e){
+				let pages = getCurrentPages();
+				if(pages.length==1){
+					uni.$u.route('/pages/index/index')
+				}else{
+					// uni.$u.route('/scenic/bookticket',{performId:this.performId})
+					uni.navigateBack()
+				};
+			},
+			findOrderCoupons(){
+				this.$u.api.findOrderCoupons(this.param).then(res=>{
+					this.dataList = res.data.list;
+					}).catch(err=>{
+					// console.log('findOrderCoupons',err.data);
+				})
+			},
+			couponClick(item){
+				let allPages = getCurrentPages(); //获取当前页面栈的实例；
+				console.log('allPages',allPages);
+				let prePages = allPages[allPages.length - 2].route;
+				console.log('prePages',prePages);
+				
+				if(prePages=='pages/bookticket'){
+					this.$u.vuex('coupon', item);
+					uni.navigateBack();
+				}else{
+					uni.$u.route('/pages/index/index');
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+page{
+	background-color: #f5f5f5;
+}
+</style>
+<style lang="scss" scoped>
+</style>

center/mycoupon.vue

@@ -1,50 +1,71 @@
 <template>
-	<view class="pages">
+	<view class="">
 		<u-navbar
 			title="我的优惠券"
 			:placeholder="true"
 			:autoBack="false"
-			 @leftClick="leftClick"
+			@leftClick="leftClick"
 			 :safeAreaInsetTop="true"
 		>
 		</u-navbar>
 		<view class="tabs-wrap">
-			<view class="inner">
-				<u-tabs
-					:list="tabsArr"  
-					@click="tabsClick"
-					lineColor="#ED0000" 
-					lineWidth="82rpx"
-					:activeStyle="{color: '#2D2D2D',fontWeight: 'bold'}"
-					itemStyle="width:33%; height: 46px;box-sizing:border-box"
-				>
-				</u-tabs>
-			</view>
+			<u-tabs 
+			:list="tabsList" 
+			lineColor="#3B49BF" 
+			 :activeStyle="{color:'#333','font-weight': '600','font-size':'30rpx'}"
+			 :inactiveStyle="{color:'#999'}"
+			 :itemStyle="{width:'28%','padding-bottom':'20rpx'}"
+			@click="tabsClick"></u-tabs>
 		</view>
-		<view class="page-wrap">
-			<mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
-				<!-- :down="downOption" :up="upOption" -->
-				<view class="list">
-					<view v-for="(item,index) in dataList" class="list-item u-flex" :class="{hotel:index==1}" :key="item.id" :style="{backgroundImage:`url(${staticUrl}/img/coupon-bg.png)`}">
-						<view class="left u-flex u-row-center u-col-top">
-							<text class="icon">￥</text>
-							<text class="num">30</text>
-						</view>
-						<view class="right u-flex u-row-between">
-							<view class="text">
-								<view class="name">演出购票折扣券</view>
-								<view class="time">有限期：2023.10.22-2023.10.22</view>
-								<view class="rule u-flex">
-									使用规则
-									<u-icon name="arrow-right" color="#D56442" size="30rpx"></u-icon>
+		<mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
+			<view class="page-wrap">
+				<view class="coupon-activity u-flex u-row-right" @click="$u.route('/center/couponlist',{})" :style="{backgroundImage:`url(${staticUrl}/img/coupon-activity.png)`}">
+					<view class="u-flex">
+						活动中心
+						<u-icon name="arrow-right" color="#fff" size="30rpx"></u-icon>
+					</view>
+				</view>
+				<view class="coupon-list">
+					<view class="item"
+						:class="{disable:item.status==2}" 
+						:style="{backgroundImage:`url(${staticUrl}/img/coupon-active-bg.png)`,filter:item.status!=1?'grayscale(100%)':''}" v-for="item in dataList" :key="item.id">
+						<view class="content u-flex">
+							<view class="left">
+								<view class="quota">
+									<text v-if="item.type == 1">￥</text>
+									<text class="number" :class="{'small': String(item.quota).length>=3}">{{item.quota}}</text>
+									<text v-if="item.type == 2">%</text>
+								</view>
+								<view class="condition" v-if="item.useThresholdType == 2">
+									消费满{{item.useThresholdAmount}}可用
 								</view>
 							</view>
-							<view class="btn">去使用</view>
+							<view class="center">
+								<view class="name" :class="{'small': String(item.couponName).length>=9}">{{item.couponName}}</view>
+								<view class="tip">
+									有效期至 {{item.endTime||''}}
+								</view>
+							</view>
+							<view class="right">
+								<text class="btn" @click="couponClick(item)" v-if="item.status == 1">去使用</text>
+								<text class="btn" @click="couponClick(item)" v-if="item.status == 2">已使用</text>
+								<text class="btn" @click="couponClick(item)" v-if="item.status == 3">已过期</text>
+								<text class="btn" @click="couponClick(item)" v-if="item.status == 4">已作废</text>
+								<!-- <view class="time">
+									<view class="">{{item.startTime}}</view>
+									<view class="">{{item.endTime}}</view>
+								</view> -->
+							</view>
 						</view>
+						<view class="type" v-if="item.type == 1">满减券</view>
+						<view class="type" v-else-if="item.type == 2">折扣卷</view>
+						<image class="status-img" :src="staticUrl+'/img/coupon-status-shiyong.png'" v-if="item.status == 2"></image>
+						<image class="status-img" :src="staticUrl+'/img/coupon-status-guoqi.png'" v-if="item.status == 3"></image>
+						<image class="status-img" :src="staticUrl+'/img/coupon-status-guoqi.png'" v-if="item.status == 4"></image>
 					</view>
 				</view>
-			</mescroll-body>
-		</view>
+			</view>
+		</mescroll-body>
 	</view>
 </template>
 
@@ -53,44 +74,34 @@
 	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 	export default {
 		mixins: [MescrollMixin], // 使用mixin
-		components: {
-			
-		},
 		data() {
 			return {
 				staticUrl:this.$commonConfig.staticUrl,
-				// // 下拉刷新的配置(可选, 绝大部分情况无需配置)
-				// downOption: {
-				// },
-				// // 上拉加载的配置(可选, 绝大部分情况无需配置)
-				// upOption: {
-				// 	page: {
-				// 		size: 10 // 每页数据的数量,默认10
-				// 	},
-				// 	noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
-				// 	empty: {
-				// 		tip: '暂无相关数据'
-				// 	}
-				// },
+				downOption: {},
+				// 上拉加载的配置(可选, 绝大部分情况无需配置)
+				upOption: {
+					page: {
+						size: 10 // 每页数据的数量,默认10
+					},
+					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
+					empty: {
+						tip: '暂无相关数据'
+					}
+				},
+				tabsList:[{name:'待使用',recordType:1},{name:'已使用',recordType:2},{name:'已过期',recordType:3}],
 				params:{
+					status:''
 				},
-				dataList:[
-					{name:'路线推荐',pic:`${this.$commonConfig.staticUrl}/img/indexnav-luxian.png`,id:1},
-					{name:'路线推荐',pic:`${this.$commonConfig.staticUrl}/img/indexnav-luxian.png`,id:1},
-				],
-				tabsArr:[
-					{name:'待使用',status:0},
-					{name:'已使用',status:1},
-					{name:'已过期',status:2}
-				],
-				status:0,
-				
+				activeIndex:0,
+				dataList: []
 			}
 		},
 		onShow() {
+			
 		},
 		onLoad() {
-
+			this.params.status = this.tabsList[this.activeIndex].recordType;
+			// console.log('1111', this.tabsList[this.activeIndex]);
 		},
 		methods: {
 			leftClick(e){
@@ -113,26 +124,20 @@
 				// }
 			
 				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
-				// if(!this.hasTypeId){
-				// 	this.mescroll.endErr();//没有接口暂时不调用
+				// if(!this.params.id){
+				// 	this.mescroll.endErr()
 				// 	return // 此处return,先获取xx
 				// }
 			
 				let pageNum = page.num; // 页码, 默认从1开始
-				let pageSize = page.size; // 页长, 默认每页10条
-			
-				let params = {
-					pageNum : page.num,
-					pageSize :  page.size,
-					status:this.status
-				}
-				// console.log('this.params',params);
-				this.$u.api.orderList(params).then(data => {
-					this.hasfetch = true;
+				let pageSize = page.size; // 页长, 默认每页10条isAsc:0//时间排序 0:降序 1:升序 (默认星级降序排序)
+
+				this.params = Object.assign(this.params,{pageNum:pageNum,pageSize:pageSize});
+				this.$u.api.myCouponList(this.params).then(data => {
 					console.log('data',JSON.parse(JSON.stringify(data)));
 					// 接口返回的当前页数据列表 (数组)
 					let curPageData = data.data.rows;
-					// console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
+					console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
 					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
 					let curPageLen = curPageData.length; 
 					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
@@ -160,94 +165,37 @@
 			reloadList() {
 				this.mescroll.resetUpScroll();
 			},
-			search(e){
-				this.reloadList();
-			},
-			tabsClick(e){
-				console.log('tabsClick',e);
-				this.status = e.status;
-				this.reloadList();
-				// this.tabsIndex = e.index;
+			tabsClick(item){
+				this.params.status = item.recordType;
+				this.reloadList()
+				// console.log('item',item);
 			},
+			couponClick(item){
+				if(item.status==1){
+					uni.$u.route('/pages/index/index');
+				}
+				
+			}
 		}
 	}
 </script>
-
+<style>
+page{
+	background-color: #f5f5f5;
+}
+</style>
 <style lang="scss" scoped>
 .tabs-wrap{
-	position: relative;
-	margin-bottom: 24rpx;
-	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(226,226,226,0.5);
+	background-color: #fff;
+	margin-bottom: 10rpx;
 }
-.list{
-	.list-item{
-		width: 100%;
-		height: 158rpx;
-		background-repeat: no-repeat;
-		background-size: 100% 100%;
-		margin-bottom: 24rpx;
-		.left{
-			width: 190rpx;
-			.icon{
-				width: 26rpx;
-				height: 26rpx;
-				line-height: 26rpx;
-				text-align: center;
-				font-size: 10px;
-				color: #fff;
-				border-radius: 50%;
-				background: linear-gradient(360deg, #ED0000 0%, #F27C7D 100%);
-			}
-			.num{
-				font-size: 100rpx;
-				font-family: Helvetica, Helvetica;
-				font-weight: bold;
-				color: #000000;
-				background: linear-gradient(180deg, #F28082 0%, #ED0000 100%);
-				-webkit-background-clip: text;
-				-webkit-text-fill-color: transparent;
-			}
-		}
-		.right{
-			flex: 1;
-			padding: 32rpx 20rpx;
-			.text{
-				padding-left: 10rpx;
-				color: #D56442;
-				font-size: 20rpx;
-				font-weight: 400;
-			}
-			.name{
-				font-size: 28rpx;
-				font-weight: bold;
-				color: #C5412B;
-				margin-bottom: 16rpx;
-			}
-			.time{
-				margin-bottom: 16rpx;
-			}
-			.btn{
-				height: 50rpx;
-				line-height: 50rpx;
-				background: #ED0000;
-				border-radius: 25rpx;
-				font-size: 24rpx;
-				font-weight: bold;
-				color: #FFFFFF;
-				padding: 0 24rpx;
-			}
-		}
-		&.hotel{
-			.num{
-				background: linear-gradient(180deg, #F77941 0%, #E84816 100%);
-				background: linear-gradient(180deg, #F77941 0%, #E84816 100%);
-				-webkit-background-clip: text;
-				-webkit-text-fill-color: transparent;
-			}
-			.icon{
-				background: linear-gradient(360deg, #E84917 0%, #F97E45 100%);
-			}
-		}
-	}
+.coupon-activity{
+	height: 120rpx;
+	background-size: 100%;
+	color: #fff;
+	font-weight: 500;
+	font-size: 24rpx;
+	padding-right: 15rpx;
+	margin-bottom: 14rpx;
 }
 </style>

common/apiurl.js

@@ -201,12 +201,37 @@ const apiurl = {
 	submitInvoice: {
 		url: '/order/orderInvoice/submit',
 		type: 'post'
-	},
+	}, 
 	// 查询开票详情
 	getInvoiceDetail: {
 		url: '/order/orderInvoice/getInvoiceDetail',
 		type: 'get'
 	},
+	// 我的优惠券-分页
+	myCouponList: {
+		url: '/member/memberInfo/couponPageList',
+		type: 'get'
+	},
+	// 活动列表
+	validActList: {
+		url: '/coupon/activityInfo/validActList',
+		type: 'get'
+	},
+	// 活动优惠券列表
+	couponList: {
+		url: '/coupon/activityInfo/actValidCouponList',
+		type: 'get'
+	},
+	// 领取优惠券
+	receiveCoupon: {
+		url: '/member/memberInfo/receiveCoupon',
+		type: 'post'
+	},
+	// 获取下单优惠券
+	findOrderCoupons: {
+		url: '/member/memberInfo/getOrderCoupon',
+		type: 'post'
+	},
 	
 	
 	/**

pages.json

@@ -124,6 +124,20 @@
 						"navigationStyle": "custom"
 					}
 				},
+				{
+					"path": "couponlist",
+					"style": {
+						"navigationBarTitleText": "优惠券活动",
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "couponselect",
+					"style": {
+						"navigationBarTitleText": "选择优惠券",
+						"navigationStyle": "custom"
+					}
+				},
 				{
 					"path": "invoice",
 					"style": {

pages/bookticket.vue

@@ -83,13 +83,20 @@
 				</view>
 				<view class="single-til u-flex u-row-between">
 					<view class="text">优惠券</view>
-					<view class="more-text u-flex">
-						<text>未使用</text>
+					<view class="more-text u-flex" @click="selectCoupon">
+						<text v-if="!coupon.quota">未使用</text>
 						<u-icon name="arrow-right" color="#E6E6E6" size="24rpx"></u-icon>
 					</view>
 				</view>
-				<view class="no-coupon">
-					您暂无可使用优惠券～
+				<view class="coupon-info" :class="{useable:couponList.length>0}" @click="selectCoupon">
+					<text v-if="couponList.length>0&&!coupon.quota">选择优惠券</text>
+					<view v-else-if="coupon.quota" class="coupon-item">
+						优惠
+						<text v-if="coupon.type == 1">￥</text> 
+						{{coupon.quota}}
+						<text v-if="coupon.type == 2">%</text>
+					</view>
+					<text v-else>您暂无可使用优惠券～</text>
 				</view>
 			</view>
 			<view class="notice">
@@ -138,7 +145,10 @@
 				<view class="left u-flex">
 					<text>应付金额：</text>
 					<view class="total-price">
-						{{totalPrice}}
+						￥{{finalPrice}}
+						<view class="bottom-coupon" v-if="coupon.quota">
+							优惠券共减¥{{couponAmount}}
+						</view>
 					</view>
 				</view>
 				<view class="right">
@@ -211,10 +221,37 @@ import {
 				retailId:null,//分销码
 				label:null,//scene解析出来的
 				retailId:null,
+				couponList:[],
 
 			}
 		},
+		watch: {
+		  visitors: {
+		    handler: function(newValue, oldValue) {
+				this.findOrderCoupons();
+		      console.log(`The value changed to ${newValue.length}`);
+		    },
+		    immediate: false
+		  }
+		},
 		computed: {
+			finalPrice(){
+				let discount = 0;
+				let price = this.totalPrice||0;
+				if(this.coupon.type==1){
+					discount = this.coupon.quota || 0; // 如果没有优惠券，默认为0 
+					price = Math.max(this.totalPrice - discount,0);
+					
+				}else if(this.coupon.type==2){
+					price = this.totalPrice*(this.coupon.quota/100);
+				}
+				// console.log('price',price);
+				// console.log('price',typeof price);
+				if(typeof price=='string'){
+					price = Number(price)
+				}
+				return price.toFixed(2)
+			},
 			totalPrice() {
 				let that = this;
 				return this.visitors.reduce((total, item) => {
@@ -242,11 +279,24 @@ import {
 				}else if(this.pageContent.oneMany===2){
 					return 1
 				}
-			}
+			},
+			couponAmount(){
+				let amount = 0;
+				if(this.coupon.type==1){
+					amount = this.coupon.quota || 0; // 如果没有优惠券，默认为0 
+				}else if(this.coupon.type==2){
+					amount =  this.totalPrice - this.totalPrice*(this.coupon.quota/100);
+				}
+				return amount.toFixed(2)
+			},
 		},
 		onShow() {
 			this.getSettlement();
 			
+			if(this.totalPrice>0){
+				this.findOrderCoupons()
+			}
+			
 		},
 		onLoad(page) {
 			console.log('page', page);
@@ -260,6 +310,9 @@ import {
 			this.getTemplateIdList(); //获取模板列表
 
 		},
+		onUnload() {
+			this.$u.vuex('coupon', {});
+		},
 		methods: {
 			leftClick(e) {
 				let pages = getCurrentPages();
@@ -416,7 +469,15 @@ import {
 					},
 					viewerList: this.visitors,
 					label:this.label,
-					retailId:this.retailId
+					retailId:this.retailId,
+					coupon:{
+						memberCouponId:null
+					}
+				}
+				if(this.coupon.quota){
+					// console.log('this.coupon',this.coupon);
+					params.coupon.memberCouponId = this.coupon.id;
+					// return
 				}
 				console.log('submitorder params',params);
 				// return
@@ -679,6 +740,25 @@ import {
 				})
 				// #endif
 			},
+			selectCoupon(){
+				this.$u.route('/center/couponselect',{
+					salePrice:this.totalPrice,
+					performId:this.performId,
+					goodsId: this.pageContent.goodsId
+				})
+			},
+			findOrderCoupons(){
+				let param = {
+					salePrice:this.totalPrice,
+					performId:this.performId,
+					goodsId:this.pageContent.goodsId
+				};
+				this.$u.api.findOrderCoupons(param).then(res=>{
+					this.couponList = res.data.list||[];
+					}).catch(err=>{
+					// console.log('findOrderCoupons',err.data);
+				})
+			},
 		}
 	}
 </script>
@@ -950,7 +1030,7 @@ import {
 			}
 		}
 
-		.no-coupon {
+		.coupon-info {
 			height: 116rpx;
 			line-height: 116rpx;
 			text-align: center;
@@ -959,6 +1039,11 @@ import {
 			font-size: 24rpx;
 			font-weight: 400;
 			color: #C0C0C0;
+			&.useable{
+				color: #ED0000;
+				font-size: 28rpx;
+				font-weight: bold;
+			}
 		}
 	}
 
@@ -1007,6 +1092,9 @@ import {
 				font-size: 40rpx;
 				font-weight: bold;
 				color: #ED0000;
+				.bottom-coupon{
+					font-size: 24rpx;
+				}
 			}
 
 			.btn {

static/css/common.scss

@@ -329,4 +329,110 @@ $pagegap:32rpx;
 		display: block;
 		margin-bottom: 8px;
 	}
+}
+
+.coupon-list{
+	.item{
+		position: relative;
+		margin-bottom: 16rpx;
+		background-size: contain;
+		text-align: center;
+		background-repeat: no-repeat;
+		&.ifReceive{
+			.right {
+				.btn{
+					background-color: #FFC4C4;
+				}
+			}
+		}
+		.content{
+			height: 188rpx;
+		}
+		.left{
+			width: 34%;
+			padding-left: 6rpx;
+			.quota{
+				font-weight: 500;
+				font-size: 28rpx;
+				background-clip: text;
+				text-fill-color: transparent;
+				background: linear-gradient(180deg, #FF9B81 0%, #FF1D45 100%);
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent; /* 使用 WebKit 前缀以支持 Safari 和旧版本的 Chrome */
+			}
+			.number{
+				font-weight: bold;
+				font-size: 100rpx;
+				&.small{
+					font-size: 54rpx;
+				}
+			}
+			.condition{
+				font-weight: 400;
+				font-size: 22rpx;
+				color: #D56442;
+				line-height: 34rpx
+			}
+		}
+		.center{
+			flex: 1;
+			text-align: left;
+			padding-left: 40rpx;
+			.name{
+				font-weight: bold;
+				font-size: 28rpx;
+				color: #C5412B;
+				line-height: 42rpx;
+				margin-bottom: 16rpx;
+				&.small{
+					font-size: 24rpx;
+				}
+			}
+			.tip{
+				font-weight: 400;
+				font-size: 22rpx;
+				color: #D56442;
+				line-height: 30rpx;
+			}
+		}
+		.right{
+			// flex: 1;
+			padding-top: 20rpx;
+			.btn{
+				display: inline-block;
+				width: 144rpx;
+				text-align: center;
+				height: 50rpx;
+				line-height: 50rpx;
+				background: #FF1212;
+				border-radius: 25rpx;
+				margin-bottom: 14rpx;
+				margin-right: 30rpx;
+				font-weight: bold;
+				font-size: 24rpx;
+				color: #fff;
+			}
+			.time{
+				font-weight: 400;
+				font-size: 20rpx;
+				color: #FEF1D3;
+			}
+		}
+		.type{
+			position: absolute;
+			left: 8rpx;
+			top: 22rpx;
+			font-weight: 500;
+			font-size: 20rpx;
+			color: #FFF6E1;
+			transform: rotate(-45deg);
+		}
+		.status-img{
+			position: absolute;
+			top: 40rpx;
+			left: 66%;
+			width: 120rpx;
+			height: 94rpx;
+		}
+	}
 }

store/index.js

@@ -35,6 +35,7 @@ const store = new Vuex.Store({
 		vuex_member_info: lifeData.vuex_member_info ? lifeData.vuex_member_info : {mobile:''},
 		vuex_user_info: lifeData.vuex_user_info ? lifeData.vuex_user_info : {},
 		vuex_wechatOpenid:lifeData.vuex_wechatOpenid ? lifeData.vuex_wechatOpenid : '',
+		coupon:{},//选择的优惠券
 		cartGoods:[],//购物车商品
 		creditGoods:[],//积分商品
 		buyNowGoods:[],//立即购买商品