zsw-farm-bxg/pages/user/coupon/UserCoupon/index.vue

<template>
	<view ref="container">
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">我的券包</view>
				</block>
			</cu-custom>
		</view>

		<view class="content" :style="'min-height:calc(100vh - '+CustomBar+'px);'">
			<view class="nav-box" :style="'top:calc('+CustomBar+'px)'">
				<view class="nav acea-row row-around">
					<view class="item" @click="setType(0)">
						<view :class="'title ' + (navType == 0? 'active' : '')">待领取</view>
					</view>
					<view class="item" @click="setType(1)">
						<view :class="'title ' + (navType === 1 ? 'active' : '')">已领取</view>
					</view>
					<view class="item" @click="setType(2)">
						<view :class="'title acea-row row-middle ' + (navType === 2 ? 'active' : '')">已失效</view>
					</view>
				</view>
			</view>

			<view class="coupon-list" v-if="couponsList.length > 0">
				<view class="item acea-row row-between" v-cloak v-for="(item, index) in couponsList" :key="index">
					<image class="coupon-bg" src="@/static/images/coupon-bg.png" mode=""></image>
					<view class="coupon-left">
						<view class="left-bg acea-row"
							:style="item._msg == '已过期'?'background: linear-gradient(135deg, #D4D4D4 0%, #B4B4B4 100%);':''">
							<view class="radiusLT"></view>
							<view class="radiusRT"></view>
							<view class="radiusLB"></view>
							<view class="radiusRB"></view>
						</view>
						<image class="coupon-pattern" src="@/static/images/coupon-pattern.png" mode=""></image>
						<view class="text-box">
							<view class="money">¥{{ item.couponPrice }}</view>
							<!-- <view class="money">7<text>折</text></view> -->
							<view class="line"></view>
							<view class="tip acea-row row-between">
								<view class="">仅限定品牌可用</view>
								<view v-if="item.endTime === 0">不限时</view>
								<view v-else>{{navType===0? item.startTime : item.useStartTime }}-{{navType===0? item.endTime:item.useEndTime}}</view>
							</view>
						</view>
					</view>
					<view class="coupon-right acea-row row-center-column">
						<image v-if="item._msg == '已过期'" class="tag"
							src="../../../../static/images/failure-icon.png" mode=""></image>
						<image v-else-if="item.isUse" class="tag" src="../../../../static/images/gotCoupon-icon.png" mode="">
						<image v-else-if="item._msg=='可使用'" class="tag" src="../../../../static/images/gotCoupon-icon.png" mode="">
						</image>
						<view :class="'type '+(item._msg == '已过期'?'col-fail':'')">{{'满减券' || '折扣券'}}</view>
						<view :class="'tip '+(item._msg == '已过期'?'col-fail':'')">满{{ item.useMinPrice }}可用</view>
						<view v-if="item._msg == '已过期'" class="btn btn-fail">不可用</view>
						<view v-else class="btn" @click="getCoupon(item.id,index)">{{navType===0 && item.isUse? '已领取' : (navType===0 ?'立刻领取' :'去使用')}}</view>
						<!-- <view class="btn btn-white">去使用</view> -->
					</view>
					<!-- <div class="money" :class="item._type === 0 ? 'moneyGray' : ''">
						<div>
							￥<span class="num">{{ item.couponPrice }}</span>
						</div>
						<div class="pic-num">满{{ item.useMinPrice }}元可用</div>
					</div>
					<div class="text">
						<div class="condition line1">{{ item.couponTitle }}</div>
						<div class="data acea-row row-between-wrapper">
							<div v-if="item.endTime === 0">不限时</div>
							<div v-else>{{ item.createTime }}-{{ item.endTime }}</div>
							<div class="bnt gray" v-if="item._type === 0">{{ item._msg }}</div>
							<div class="bnt bg-color-red" v-else>{{ item._msg }}</div>
						</div>
					</div> -->
				</view>
			</view>

			<!--暂无优惠券-->
			<view class="noCommodity" v-if="couponsList.length === 0 && loading === false" style="padding-top:208rpx;">
				<view class="noPictrue">
					<image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	import {
		getCouponsUser,
		getCouponReceive,
		getCanReceive,
		getUserFailure
	} from '@/api/user'
	import DataFormatT from '@/components/DataFormatT'

	const NAME = 'UserCoupon'

	export default {
		name: 'UserCoupon',
		components: {
			DataFormatT,
		},
		props: {},
		data: function() {
			return {
				CustomBar: this.CustomBar,
				navType: 0,
				couponsList: [],
				loading: false,
				page: 1,
				limit: 10,
			}
		},
		watch: {
			$yroute: function(n) {
				var that = this
				if (n.name === NAME) {
					that.getUseCoupons()
				}
			},
		},
		mounted: function() {
			this.getUseCoupons(0)
		},
		methods: {
			setType(i) {
				if (this.navType == i) return;
				this.navType = i;
				this.couponsList=[];
				this.page= 1,
				this.limit= 10,
				this.getUseCoupons(i);
			},
			// 领取
			getCoupon: function(id, index) {
			  let that = this
			  if(that.navType===2) return
			  if(that.navType===1){
				  that.$yrouter.push({
				    path: '/pages/shop/brands/index',
				  })
				  return
			  }
			  let list = that.couponsList
			  getCouponReceive(id)
			    .then(function(res) {
			      list[index].isUse = true
			      uni.showToast({
			        title: '领取成功',
			        icon: 'success',
			        duration: 2000,
			      })
			    })
			    .catch(function(err) {
			      uni.showToast({
			        title: err.msg || err.response.data.msg || err.response.data.message,
			        icon: 'none',
			        duration: 2000,
			      })
			    })
			},
			
			getUseCoupons: function(i) {
				if (this.loading) return //阻止下次请求（false可以进行请求）；
				// if (this.loadend) return //阻止结束当前请求（false可以进行请求）；
				this.loading = true
				let q = {
					page: this.page,
					limit: this.limit
				}
				let type = 0
				if (i === 1) {
					// 用户已领取列表
					getCouponsUser(type).then(res => {
						this.couponsList = res.data
						this.loading = false
					})
				}else if(i===0){
					getCanReceive(q).then(res => {
					res.data.forEach(item=>{
						if(!item.isUse){
							this.couponsList.push(item)
						}
					})
					this.loading = false
					this.page = this.page + 1
				})
				}else{
					getUserFailure().then(res=>{
						res.data.forEach(item=>{
							let futureDate=new Date(item.useEndTime).getTime()
							let currentDate=new Date().getTime()
							if(futureDate<currentDate){
								this.couponsList.push(item)
							}
						})
						this.loading = false
					})
				}
			},
			// getUseCoupons: function(i) {
			// 	if (this.loading) return //阻止下次请求（false可以进行请求）；
			// 	// if (this.loadend) return //阻止结束当前请求（false可以进行请求）；
			// 	this.loading = true
			// 	let q = {
			// 		page: this.page,
			// 		limit: this.limit
			// 	}
			// 	let type = 0
			// 	if (i === 1) {
			// 		// 用户已领取列表
			// 		getCouponsUser(type).then(res => {
			// 			this.couponsList = res.data
			// 			this.loading = false
			// 		})
			// 	}else if(i===0){
			// 		getCoupon(q).then(res => {
			// 		res.data.forEach(item=>{
			// 			if(!item.isUse){
			// 				this.couponsList.push(item)
			// 			}
			// 		})
			// 		this.loading = false
			// 		this.page = this.page + 1
			// 	})
			// 	}else{
			// 		this.loading = false
			// 	}
			// },

		},
	}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}

		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.content {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		
		.nav-box {
			width: 100vw;
			padding-top: 4rpx;
			position: fixed;
			left: 0;
			z-index: 5;
			background: #F1F1F1;
		}
		
		.nav {
			width: 100vw;
			background: #FFFFFF;
			height: 88rpx;
			padding: 34rpx 52rpx 12rpx;
			border-radius: 28rpx 28rpx 0rpx 0rpx;

			.item {
				text-align: center;
				position: relative;

				.title {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #3A3A3C;
					line-height: 38rpx;
				}

				.active {
					color: #2DB5AE;
					font-weight: 600;
				}

				.title::after {
					display: block;
					content: '';
					width: 100%;
					height: 2rpx;
					background: #2DB5AE;
					position: absolute;
					bottom: 0;
					left: 0;
					opacity: 0;
					transform: scaleX(0);
					transition: all .2s cubic-bezier(.18, .89, .17, .88), opacity .15s ease;
				}

				.active::after {
					opacity: 1;
					transform: scaleX(1);
				}
			}
		}

		.coupon-list {
			padding-top: 104rpx;
		}
	}
</style>