ds_mobile_app/mobile/pages/coupon/myCoupon.vue

<!-- 我的优惠券 -->
<template>
	<view class="my_coupon">
		<view class="my_coupon_nav">
			<view class="my_coupon_nav_pre" :class="{active:useState == '1'}" @click="handleNav('1')">{{$L('未使用')}}</view>
			<view class="my_coupon_nav_pre" :class="{active:useState == '2'}" @click="handleNav('2')">{{$L('已使用')}}</view>
			<view class="my_coupon_nav_pre" :class="{active:useState == '3'}" @click="handleNav('3')">{{$L('已失效')}}</view>
		</view>
		<view v-if="couponList && !noData" class="coupon_con">
			<view class="my_coupon_center" @click="goCouponCenter()">
				<image :src="imgUrl + 'coupon/coupon_center_bg.png'" mode=""></image>
			</view>
			<view class="my_coupon_list">
				<view class="my_coupon_pre" v-for="(item,index) in couponList" :key="index">
					<view class="coupon_pre_top" :style="{backgroundImage:'url(' + item.couponBg + ')'}">
						<view class="coupon_pre_left">
							<view class="coupon_pre_price" :class="{grey:item.useState != 1}" v-if="item.couponType != 2">
								<text class="unit">¥ </text>
								<text class="price_int">{{item.publishValue}}</text>
							</view>
							<view class="coupon_pre_price" :class="{grey:item.useState != 1}" v-if="item.couponType == 2">
								<view class=""></view>
								<text class="price_int">{{filters.toSplit(filters.toFixNum(item.publishValue,1))[0]}}</text>.
								<text class="price_decimal">{{filters.toSplit(filters.toFixNum(item.publishValue,1))[1]}}</text>
								<text class="price_decimal">{{$L('折')}}</text>
							</view>
							<view class="coupon_pre_active" :class="{grey_con:item.useState != 1}">{{item.couponContent}}</view>
						</view>
						<view class="coupon_pre_cen">
							<view class="coupon_pre_title">{{item.useTypeValue}}</view>
							<view class="coupon_pre_time">{{item.effectiveStart}}~{{item.effectiveEnd}}</view>
							<view class="coupon_pre_rules" @click="descriptionOpen(item.couponMemberId)">
								<text>使用规则</text>
								<image :src="item.isOpen ? imgUrl + 'coupon/up.png' : imgUrl + 'coupon/down.png'" mode=""></image>
							</view>
						</view>
						<view class="coupon_pre_right" @click="goGoodsList(item)">
							{{item.useState == '1' ? '立即使用' : item.useState == '2' ? '已使用' : '已失效'}}
						</view>
					</view>
					<view class="coupon_rules" v-if="item.isOpen == true">
						<view class="coupon_rules_title">{{$L('使用规则')}}:{{item.description}}</view>
					</view>
					<view class="coupon_type" :class="{grey_type:item.useState != 1}">{{item.couponTypeValue}}</view>
				</view>
				<loadingState v-if="loadingState == 'first_loading'||couponList.length > 0" :state='loadingState' />
			</view>
		</view>
		<view class="no_data" v-if="noData">
			<image :src="imgUrl + 'no_coupon.png'" mode=""></image>
			<text>{{$L('暂无优惠券，去领券中心看看吧')}}~</text>
			<view class="go_coupon_center" @click="goCouponCenter">{{$L('领券中心')}}</view>
		</view>
	</view>
</template>
<script module="filters" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
	import loadingState from "@/components/loading-state.vue";
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			loadingState
		},
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				useState:'1',	//使用状态
				pageSize: 10,
				current: 1,
				couponList:[],	//优惠券列表
				noData:false,	//无数据
				hasMore: false, //是否还有数据
				loadingState: 'first_loading',
				goReceiveBg:getApp().globalData.imgUrl + 'coupon/coupon_pre_bg.png',	//未使用
				finishReceiveBg:getApp().globalData.imgUrl + 'coupon/finishReceiveBg.png', //已使用，已过期
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		async onLoad(options) {
			this.getCouponList();
		},
		// 触底加载更多
		onReachBottom() {
			if(this.hasMore){
				this.getCouponList();
			}
		},
		onShow() {
			this.current = 1;
			this.getCouponList();
		},
		methods: {
			//获取优惠券列表
			getCouponList() {
				let param = {};
				param.url = 'v3/promotion/front/coupon/list';
				param.method = 'GET';
				param.data = {};
				param.data.current = this.current;
				param.data.pageSize = this.pageSize;
				param.data.useState = this.useState;
				this.$request(param).then(res => {
					if (res.state == 200) {
						let result = res.data;
						if(result.list.length == 0){
							this.couponList = result.list;
							this.noData = true;
						}else{
							if(this.current == 1){
								this.couponList = result.list;
							}else{
								this.couponList = this.couponList.concat(result.list);
							}
							this.noData = false;
						}
						this.couponList.forEach((item,index)=>{
							if(item.useState == 1){
								item.couponBg = this.goReceiveBg;
							}else{
								item.couponBg = this.finishReceiveBg;
							}
						})
						this.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (this.hasMore) {
							this.current++;
							this.loadingState = 'allow_loading_more';
						} else {
							this.loadingState = 'no_more_data';
						}
					} else {
						this.$api.msg(res.msg);
					}
				}).catch((e) => {
					//异常处理
				})
			},
			//点击nav导航
			handleNav(type){
				this.useState = type;
				this.current = 1;
				this.getCouponList();
			},
			//去领券中心页面
			goCouponCenter(){
				uni.navigateTo({
					url:'/pages/coupon/couponCenter'
				})
			},
			//规则展开
			descriptionOpen(couponMemberId){
				this.couponList.map(item=>{
					if(item.couponMemberId == couponMemberId){
						if(item.description != ''){
							item.isOpen = !item.isOpen
							this.$forceUpdate()
						}
					}else{
						item.isOpen = false
					}
				})
			},
			//去优惠券对应的商品列表
			goGoodsList(item){
				if(item.useState == '1'){
					let params=''
					if(item.storeId>0){
						params+='&storeId='+item.storeId
					}
                    if(item.useType==2&&item.goodsIds){
						params+='&goodsIds='+item.goodsIds
					}else if(item.useType==3&&item.cateIds){
						params+='&categoryId='+item.cateIds
					}
					uni.navigateTo({
						url:'/pages/product/list?source=coupon'+params
					})
				}

			},
		},

	}
</script>

<style lang="scss">
	page{
		background: $bg-color-split;
	}
	.my_coupon{
		width: 750rpx;
		margin: 0 auto;
		.my_coupon_nav{
			padding-left: 39rpx;
			padding-right: 35rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			position: fixed;
			top: var(--bar-height);
			z-index: 100;
			width: 750rpx;
			box-sizing: border-box;
			.my_coupon_nav_pre{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 39rpx;
				padding: 26rpx 0;
			}
			.active{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FC1C1C;
				line-height: 39rpx;
				border-bottom: 6rpx solid #FC1C1C;
			}
		}
		.coupon_con{
			padding-top: 88rpx;
		}
		.my_coupon_center{
			background: #FFFFFF;
			image{
				width: 717rpx;
				height: 245rpx;
			}
		}
		.my_coupon_list{
			padding-top: 20rpx;
			.my_coupon_pre{
				width: 710rpx;
				margin-bottom: 20rpx;
				position: relative;
				margin: 0 auto 20rpx;
				.coupon_pre_top{
					height: 190rpx;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					.coupon_pre_left{
						display: flex;
						flex-direction: column;
						width: 203rpx;
						align-items: center;
						.coupon_pre_price{
							font-size: 20rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #F20C06;
							line-height: 31rpx;
							text:nth-child(2){
								font-size: 48rpx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								color: #F30801;
								line-height: 31rpx;
							}
						}
						.coupon_pre_active{
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #F6130E;
							line-height: 31rpx;
							margin-top: 20rpx;
						}
						.grey{
							color: #333333;
							.price_int{
								color: #333333!important;
							}
						}
						.grey_con{
							color: #999999;
						}
					}
					.coupon_pre_cen{
						display: felx;
						flex-direction: column;
						flex:1;
						padding-left: 44rpx;
						.coupon_pre_title{
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 31rpx;
						}
						.coupon_pre_time{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 31rpx;
							margin: 21rpx 0 17rpx;
						}
						.coupon_pre_rules{
							display: flex;
							align-items: center;
							text{
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 31rpx;
							}
							image{
								width: 12rpx;
								height: 7rpx;
								margin-left: 20rpx;
							}
						}
					}
					.coupon_pre_right{
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						width: 130rpx;
						text-align: center;
						box-sizing: border-box;
						height: 190rpx;
						line-height: 190rpx;
					}
				}
				.coupon_rules{
					width: 710rpx;
					padding: 20rpx 0 20rpx 43rpx;
					box-sizing: border-box;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 30rpx;
					background: #FFFFFF;
					border-top: 1rpx solid #f2f2f2;
					border-radius: 0 0 15rpx 15rpx;
					.coupon_rules_title{
						margin-bottom: 10rpx;
					}
				}
				.coupon_type{
					position: absolute;
					top: 0;
					left: 0;
					padding: 0 5rpx;
					height: 30rpx;
					background: linear-gradient(0deg, #FF3000 0%, #FB3E31 0%, #FF3728 0%, #FF142F 100%);
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: center;
					border-radius: 15rpx 0 15rpx 0;
				}
				.grey_type{
					background: linear-gradient(0deg, #A9A28C 0%, #B1B7B0 0%, #9EA59D 0%, #9FA19E 0%, #6C6D74 100%);
					color: #FFFFFF;
				}
			}
		}
		.no_data{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 180rpx;
			image{
				width: 187rpx;
				height: 187rpx;
			}
			text{
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				margin: 30rpx 0;
			}
			.go_coupon_center{
				width: 160rpx;
				height: 54rpx;
				background: #F5EAEA;
				border-radius: 27rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #EF242F;
				text-align: center;
				line-height: 54rpx;
			}
		}
	}
</style>