yanzong_qianduan/pages/news/coupon/index.vue

<template>
	<view class="coupon">
		<view class="coupon-hd">
			<image src="https://www.royaum.com.cn/static/news/coupon-bg.jpg"></image>
		</view>
		<view class="coupon-tab">
			<view class="item" :class="tabIndex == 0?'item-on':''" @click="tabItem(0)">商品券</view>
			<view class="item" :class="tabIndex == 1?'item-on':''" @click="tabItem(1)">服务券</view>
		</view>
		<view class="coupon-bd">
			<view class="item" v-for="(item,index) in couponList" :key="index">
				<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.min_price}}元使用</view>
				<view class="c">
					<text v-if="item.apply_range==10">适用于全场商品</text>
					<text v-if="item.apply_range==20">适用于部分商品</text>
				</view>
				<view class="d" @click="receive(item)">点击领取</view>
				<image :src="$picUrl+'/static/news/icon-coupon-01.png'"></image>
			</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 class="footer" @click="goMyCoupon">
			查看我的优惠券
			<u-icon name="arrow-right" class="fooIcon"></u-icon>
		</view>
	</view>
</template>

<script>
	import * as CouponApi from '@/api/coupon'
	export default {
		data() {
			return {
				tabIndex: 0,
				couponList: []
			}
		},
		onShow() {
			this.getCoupon(this.tabIndex)
		},
		methods: {
			getCoupon(index) {
				const that = this
				if (index == 0) {
					CouponApi.list()
						.then(res => {
							that.couponList = res.data.list
						})
						.finally(() => that.isLoading = false)
				} else {
					CouponApi.serveList()
						.then(res => {
							that.couponList = res.data.list
						})
						.finally(() => that.isLoading = false)
				}

			},
			openPage() {
				uni.navigateTo({
					url: "/pages/news/coupon/list"
				})
			},
			tabItem(index) {
				this.tabIndex = index;
				this.getCoupon(index)
			},
			receive(item) {
				const that = this
				CouponApi.receive({
						couponId: item.coupon_id
					})
					.then(res => {
						that.$toast(res.message)
					})
					.finally(() => that.isLoading = false)
			},
			goMyCoupon(){
				uni.navigateTo({
					url: "/pages/news/coupon/list"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.coupon {
		background-color: #FB3A22;
		overflow: hidden;
		min-height: 100vh;

		.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: #fff;
			}
		}

		&-hd {
			width: 100%;
			height: 445rpx;

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

		&-tab {
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item {
				width: 316rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;

				&-on {
					color: #F34A40;
					background: #FFFFFF;
				}
			}
		}

		&-bd {
			padding: 0 40rpx 180rpx;
			overflow: hidden;
			.item {
				width: 662rpx;
				height: 366rpx;
				position: relative;
				margin-top: 20rpx;
				overflow: hidden;

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

				.a {
					width: 100%;
					position: absolute;
					left: 60rpx;
					top: 70rpx;
					z-index: 2;
					font-size: 36rpx;
					font-weight: 500;
					color: #FE6900;

					text {
						font-size: 68rpx;
					}
				}

				.b {
					width: 100%;
					position: absolute;
					left: 60rpx;
					top: 160rpx;
					z-index: 2;
					font-size: 32rpx;
					font-weight: 500;
					color: #6B6B6B;
				}

				.c {
					width: 100%;
					position: absolute;
					left: 60rpx;
					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: 40rpx;
					z-index: 2;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}

	.footer {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 148rpx;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FA3B22;
		line-height: 148rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FEEECA 100%);
		z-index: 999;
		.fooIcon{
			margin-left: 36rpx;
		}
	}
</style>