yanzong_qianduan/pages/news/coupon/list.vue

<template>
	<view class="coupon">
		<view class="coupon-tab">
			<u-tabs :list="list" height="106" font-size="32" active-color="#F34A40" inactive-color="#686868"
				:is-scroll="false" v-model="tabIndex" @change="change"></u-tabs>
		</view>
		<view class="coupon-bd">
			<view class="item" :class="tabIndex == 2?'item-on':''" v-for="(item,index) in couponList" :key="index"
				@click="choseItem(item)" :style="{'border':item.user_coupon_id==choseId?'2rpx solid red':none}">
				<view class="a" v-if="item.coupon_type==10">￥<text>{{item.reduce_price}}</text></view>
				<view class="a" v-if="item.coupon_type==20"><text>{{item.discount}}折</text></view>
				<view class="b">有效期：{{item.end_time}}</view>
				<view class="c">
					<text v-if="item.apply_range==10">适用于全场商品</text>
					<text v-if="item.apply_range==20">适用于部分商品</text>
				</view>
				<view class="d" v-if="tabIndex == 0" @click="goUse(item)">去使用</view>
				<view class="e">满{{item.min_price?Number(item.min_price):''}}元使用</view>
				<view class="f" v-if="item.coupon_type==10">满{{item.min_price?Number(item.min_price):''}}元减{{item.reduce_price?Number(item.reduce_price):''}}元</view>
				<view class="f" v-if="item.coupon_type==20">满{{item.min_price?Number(item.min_price):''}}元{{item.discount}}折</view>
				<image class="bg" v-if="tabIndex <= 1" :src="$picUrl+'/static/news/icon-coupon-01.png'"></image>
				<image class="bg" v-else :src="$picUrl+'/static/news/icon-coupon-02.png'"></image>
				<image class="icon" v-if="tabIndex == 1" :src="$picUrl+'/static/news/icon-coupon-use.png'"></image>
				<image class="icon" v-if="tabIndex == 2" :src="$picUrl+'/static/news/icon-coupon-used.png'"></image>
				<view class="line">
					<u-line v-if="tabIndex <= 1" direction="col" border-style="dashed" color="#FFC7B9" />
					<u-line v-if="tabIndex == 2" direction="col" border-style="dashed" color="#D9D9D9" />
				</view>
			</view>
		</view>
		<view class="nolist" v-if="couponList.length==0">
			<image :src="$picUrl+'/static/news/icon-coupon-03.png'"></image>
			<view class="txt">暂无已使用优惠券</view>
		</view>
	</view>
</template>

<script>
	import * as CouponApi from '@/api/coupon'
	export default {
		data() {
			return {
				choseId: '',
				list: [{
					name: '未使用',
					val: 'isUsable'
				}, {
					name: '已使用',
					val: 'isUse'
				}, {
					name: '已过期',
					val: 'isExpire'
				}],
				tabIndex: 0,
				couponList: [],
				isChose: false
			}
		},
		onLoad(o) {
			this.isChose = o.chose
		},
		onShow() {
			this.getCoupon(this.tabIndex)
		},
		methods: {
			choseItem(item) {
				if (this.isChose) {
					uni.setStorageSync('couponId', item.coupon_id)
					uni.navigateBack()
				}
			},
			getCoupon(e) {
				const that = this
				let param = {
					dataType: that.list[e].val
				}
				CouponApi.myCouponList(param)
					.then(res => {
						that.couponList = res.data.list.data
					})
					.finally(() => that.isLoading = false)
			},
			change(e) {
				this.couponList = []
				this.getCoupon(e)
			},
			tabItem(index) {
				this.tabIndex = index
			},
			goUse(item) {
				// 使用优惠券
				if (item.coupon_case == 10) {
					// 调到商品列表
					uni.switchTab({
						url: "/pages/index/index"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.coupon {
		overflow: hidden;

		.nolist {
			width: 100%;
			display: block;
			margin: 0 auto;
			text-align: center;
			padding: 150rpx 50rpx;

			image {
				width: 388rpx;
				height: 378rpx;
			}

			.txt {
				font-size: 32rpx;
				margin-top: 20rpx;
				font-weight: 500;
				color: #959595;
			}
		}

		&-bd {
			padding: 0 40rpx 40rpx;
			overflow: hidden;

			.item {
				width: 662rpx;
				height: 310rpx;
				position: relative;
				margin-top: 20rpx;
				overflow: hidden;

				.bg {
					width: 100%;
					height: 100%;
				}

				.icon {
					width: 220rpx;
					height: 195rpx;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 1;
				}

				.a {
					width: 235rpx;
					position: absolute;
					right: 0;
					top: 40rpx;
					z-index: 2;
					font-size: 36rpx;
					font-weight: 500;
					text-align: center;
					color: #FE6900;

					text {
						font-size: 68rpx;
					}
				}

				.b {
					position: absolute;
					left: 40rpx;
					top: 110rpx;
					z-index: 2;
					font-size: 28rpx;
					font-weight: 500;
					color: #AFAFAF;
				}

				.e {
					position: absolute;
					left: 40rpx;
					top: 46rpx;
					z-index: 2;
					font-size: 36rpx;
					font-weight: 500;
					color: #454545;
				}

				.f {
					position: absolute;
					left: 40rpx;
					top: 160rpx;
					z-index: 2;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #6C6C6C;
				}

				.c {
					position: absolute;
					left: 40rpx;
					bottom: 20rpx;
					z-index: 2;
					font-size: 28rpx;
					font-weight: 500;
					color: #A7572C;
				}

				.d {
					width: 188rpx;
					line-height: 68rpx;
					background: linear-gradient(180deg, #FF7366 0%, #FF5242 100%);
					border-radius: 68rpx;
					position: absolute;
					right: 28rpx;
					top: 140rpx;
					z-index: 2;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}

				.line {
					position: absolute;
					right: 230rpx;
					height: 200rpx;
					width: 2px;
					z-index: 3;
					top: 36rpx;
				}

				&-on {
					.a {
						color: #BBBBBB;
					}

					.c {
						color: #BBBBBB;
					}
				}
			}
		}
	}
</style>