ds_mobile_app/mobile/pages/coupon/couponCenter.vue

<!-- 领券中心 -->
<template>
	<view class="my_coupon">
		<!-- 随机优惠券 start -->
		<view :class="{'hide':!rondomMod,'random_coupon':true}" style="position: fixed;width: 750rpx;height:100vh;background:rgba(0,0,0,0.6);z-index: 10;">
			<view class="random_coupon_bg" :style="{backgroundImage:'url(' + imgUrl + 'coupon/random_bg.png)'}" @click="goMyCoupon()">
				<view class="random_coupon_price">￥{{rondomDes.publishValue}}</view>
				<view class="random_coupon_des">{{rondomDes.couponContent}}</view>
				<view class="close_btn" :style="{backgroundImage:'url(' + imgUrl + 'coupon/close.png)'}" @click.stop="close"></view>
			</view>
		</view>
		<!-- 随机优惠券 end -->
		<view class="coupon_center_bg">
			<image :src="imgUrl + 'coupon/coupon_bg.png'" mode=""></image>
		</view>
		<view class="my_coupon_nav">
			<view class="my_coupon_nav_pre_wrap">
			<view class="my_coupon_nav_pre" :class="{active:categoryId == '-1'}" @click="handleNav('-1')" >{{$L('精选')}}</view>
			<view class="my_coupon_nav_pre" :class="{active:categoryId == '-2'}" @click="handleNav('-2')" >{{$L('全部')}}</view>
			<view class="my_coupon_nav_pre" :class="{active:categoryId == item.categoryId}" @click="handleNav(item.categoryId)" v-for="(item,index) in categoryList" :key="index">{{item.categoryName}}</view>
			</view>
		</view>
		<view class="my_coupon_list" v-if="couponList && !noData">
			<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" v-if="item.couponType != 2">
							<text class="unit">¥ </text>
							<text class="price_int">{{$getPartNumber(item.publishValue,'int')}}</text>
						</view>
						<view class="coupon_pre_price" 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">{{item.couponContent}}</view>
					</view>
					<view class="coupon_pre_cen">
						<view class="coupon_pre_title">{{item.useTypeValue}}</view>
						<view class="coupon_pre_time">{{item.publishStartTime}}~{{item.publishEndTime}}</view>
						<view class="coupon_pre_rules" @click="descriptionOpen(item.couponId)">
							<text>使用规则</text>
							<image :src="item.isOpen ? imgUrl + 'coupon/up.png' : imgUrl + 'coupon/down.png'" mode=""></image>
						</view>
					</view>
					<view class="coupon_pre_right coupon_state_no" v-if="item.receivedState == 3">{{$L('已抢完')}}</view>
					<view class="coupon_pre_right" v-if="item.receivedState == 2" @click="goGoodsList(item)">{{$L('已领')}}</view>
					<view class="coupon_pre_right" v-if="item.receivedState == 1" @click="goReceive(item)">{{$L('立即领取')}}</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">{{item.couponTypeValue}}</view>
				<view class="coupon_progress" v-if="item.receivedState != 3">
					{{$L('已抢')}}{{item.robbedRate}}%
					<view class="progress_con">
						<progress :percent="item.robbedRate" stroke-width="3" activeColor="#FFFFFF" backgroundColor="#FF1919" border-radius='2px' />
					</view>
				</view>
			</view>
			<loadingState v-if="loadingState == 'first_loading'||couponList.length > 0" :state='loadingState' />
		</view>
		<view class="no_data" v-if="noData">
			<image :src="imgUrl + 'no_coupon.png'" mode=""></image>
			<text>{{$L('暂无优惠券')}}~</text>
		</view>
	</view>
</template>
<script module="filters" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
	import loadingState from "@/components/loading-state.vue";
	import notOpen from '@/components/not_open.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			loadingState,
			notOpen
		},
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				loadingState: 'first_loading',
				pageSize: 10,
				current: 1,
				couponList:[],	//优惠券列表
				categoryList:[],	//分类列表
				categoryId:'-1',	//当前点击的nav，默认第一项
				noData:false,	//无数据
				loading: false, //是否加载数据
				hasMore: true, //是否还有数据
				goReceiveBg:getApp().globalData.imgUrl + 'coupon/coupon_pre_bg.png',	//立即领取背景
				finishReceiveBg:getApp().globalData.imgUrl + 'coupon/finishReceiveBg.png', //已抢完背景
				hasReceiveBg:getApp().globalData.imgUrl + 'coupon/hasReceiveBg.png', //已领取背景
				rondomMod:false,	//随机弹框
				activity_open:false,
				rondomDes:{}
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		async onLoad(options) {
			this.getCouponList();
		},
		onReachBottom(){
			if(this.hasMore){
				this.getMoreData()
			}
		},
		methods: {
			// 判断活动是否开启
			ifOpen(){
				let param = {}
				param.data={}
				param.data.names='coupon_is_enable'
				param.url = 'v3/system/front/setting/getSettings'
				param.method = 'GET'
				this.$request(param).then(res => {
					if (res.state == 200) {
						if(res.data[0]=='1'){
							this.activity_open=true
						}else{
							this.activity_open=false
						}
					}
				})
			},
			//获取领券中心数据
			getCouponList(categoryId) {
				this.categoryId = categoryId ? categoryId : this.categoryId;
				let param = {};
				param.url = 'v3/promotion/front/coupon/couponCenter';
				param.method = 'GET';
				param.data = {};
				param.data.current = this.current;
				param.data.pageSize = this.pageSize;
				if(this.categoryId == '-1'){
					param.data.isSelected = true;
				}else if(this.categoryId == '-2'){
					param.data.isSelected = false;
				}else{
					param.data.isSelected = false;
					param.data.categoryId = this.categoryId;	//分类id
				}

				this.$request(param).then(res => {
					if (res.state == 200) {
						let result = res.data;
						this.categoryList = result.categoryList;
						if(result.couponList.length == 0){
							this.noData = true;
							this.couponList = result.couponList;
						}else{
							if(this.current == 1){
								this.couponList = result.couponList;
							}else{
								this.couponList = this.couponList.concat(result.couponList);
							}
							this.noData = false;
						}
						this.couponList.forEach((item,index)=>{
							item.isOpen = false;
							if(item.receivedState == 3){
								item.couponBg = this.finishReceiveBg;
							}
							if(item.receivedState == 2){
								item.couponBg = this.hasReceiveBg;
							}
							if(item.receivedState == 1){
								item.couponBg = this.goReceiveBg;
							}
						})
						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) => {
					//异常处理
				})
			},
			handleNav(categoryId){
				this.categoryId = categoryId;
				this.current = 1;
				this.getCouponList(categoryId);
			},
			//规则展开
			descriptionOpen(couponId){
				this.couponList.map(item=>{
					if(item.couponId == couponId){
						if(item.description != ''){
							item.isOpen = !item.isOpen
							this.$forceUpdate()
						}
					}
				})
			},
			//加载更多事件
			getMoreData() {
				if (this.hasMore) {
					this.getCouponList();
				}
			},
			//立即领取
			goReceive(item){
				let couponId = item.couponId
				let param = {};
				param.url = 'v3/promotion/front/coupon/receiveCoupon';
				param.method = 'GET';
				param.data = {};
				param.data.couponId = couponId;
				this.$request(param).then(res => {
					if (res.state == 200) {
						let result = res.data;
						this.current = 1;
						this.getCouponList();
						if(item.couponType == 3){	//随机优惠券
							this.rondomMod = true;
							this.rondomDes = result;
						}
						const pages = getCurrentPages(); //当前页面栈
						if (pages.length > 1) {
							const beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
							beforePage.$vm.getCouponList(); //触发上个面中的方法 获取优惠券列表*getCouponList为上个页面的方法*
						}
						this.$api.msg('领取成功!');
					} else {
						this.$api.msg(res.msg);
						this.getCouponList();
					}
				}).catch((e) => {
					//异常处理
				})
			},
			//去优惠券对应的商品列表
			goGoodsList(item){
				if(item.useState == '2'){
					uni.navigateTo({
						url:'/pages/product/list?couponId=' + item.couponId
					})
				}

			},
			//关闭领取随机优惠券弹框
			close(){
				this.rondomMod = false;
			},
			//去我的优惠券列表页面
			goMyCoupon(){
				uni.navigateTo({
					url:'/pages/coupon/myCoupon'
				})
			}
		},

	}
</script>

<style lang="scss">
	page{
		background: $bg-color-split;
	}
	.my_coupon{
		width: 750rpx;
		margin: 0 auto;
		overflow-x: hidden;
		.random_coupon.hide{
			display: none;
		}
		.random_coupon{
			display: flex;
			justify-content: center;
			padding-top: 250rpx;
			.random_coupon_bg{
				width: 598rpx;
				height: 804rpx;
				background-size: 100% 100%;
				padding-top: 330rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				.random_coupon_price{
					font-size: 68rpx;
					font-family: PangMenZhengDao;
					font-weight: 400;
					color: #D41E04;
				}
				.random_coupon_des{
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #E52308;
					line-height: 34rpx;
				}
				.close_btn{
					position: absolute;
					right: 10rpx;
					top: 22rpx;
					z-index: 20;
					width: 57rpx;
					height: 57rpx;
					background-size: 100% 100%;
				}
			}
		}
		.coupon_center_bg{
			width: 750rpx;
			height: 589rpx;
			image{
				width: 750rpx;
				height: 589rpx;
			}
		}
		.my_coupon_nav{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			background: #FFFFFF;
			height: 78rpx;
			padding:0 20rpx;
			margin-bottom: 22rpx;
			.my_coupon_nav_pre_wrap{
				width: 715rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				overflow-x: auto;
				.my_coupon_nav_pre{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					height: 78rpx;
					line-height: 78rpx;
					margin-right: 77rpx;
					min-width: max-content;
					&:last-child{
						margin-right: 20rpx;
					}
				}
			}
			.active{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FC1C1C;
				position: relative;
				border-bottom: 8rpx solid #FC1C1C;
			}
		}
		.my_coupon_list{
			margin: 0 20rpx;
			width: 710rpx;
			height: 100%;
			.my_coupon_pre{
				margin-bottom: 20rpx;
				position: relative;
				.coupon_pre_top{
					width: 710rpx;
					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;
						}
					}
					.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{
						width: 130rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
					}
					.coupon_state_no{
						padding: 0;
						text-align: center;
					}
				}
				.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;
				}
				.coupon_progress{
					position: absolute;
					width: 130rpx;
					top: 10rpx;
					right: 0rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 18rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 31rpx;
					.progress_con{
						width: 84rpx;
						margin-top: 5rpx;
						border-radius: 5rpx;
						progress{
							border: 1rpx solid #FFFFFF;
							border-radius: 5rpx;
						}
					}
				}
			}
		}
		.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>