shengxian/pages/app/coupon/detail.vue

<!-- 优惠劵详情 -->
<template>
	<view class="page_box">
		<!-- 标题栏 -->
		<shopro-navbar back-icon-color="#fff" :background="{}" :backTextStyle="{ color: '#fff', fontSize: '36rpx', fontWeight: '500' }" backText="优惠券详情"></shopro-navbar>
		<view class="content_box">
			<scroll-view class="scroll-box" scroll-y="true" scroll-with-animation enable-back-to-top :scroll-into-view="scrollId" @scroll="onScroll">
				<!-- 详情卡片 -->
				<view class="coupon-box">
					<view class="top u-flex-col u-col-center">
						<view class="img-box u-flex u-row-center u-col-center"><image class="coupon-img" :src="$IMG_URL + '/imgs/coupon.png'" mode=""></image></view>
						<view class="title">{{ couponDetail.amount || '0.00' }}元优惠券</view>
						<view class="tip">满{{ couponDetail.enough || '0.00' }}元可用</view>
						<button class="u-reset-button" :class="['can_use', 'can_get'].includes(btnStataus) ||　!btnStataus ? 'use-btn' : 'fail-btn'" @tap="goScroll">
							{{ btnStatusText[btnStataus] || '立即领取' }}
						</button>
						<view class="time" v-if="couponDetail.usetime && couponDetail.usetime.start">
							有效期：{{ $u.timeFormat(couponDetail.usetime.start, 'yyyy-mm-dd') }} 至 {{ $u.timeFormat(couponDetail.usetime.end, 'yyyy-mm-dd') }}
						</view>
						<view class="coupon-line"></view>
					</view>
					<view class="bottom">
						<view class="notice-item">
							<view class="notice-title">优惠券说明</view>
							<view class="notice-detail">{{ couponDetail.description || '暂无说明~' }}</view>
						</view>
					</view>
				</view>

				<!-- 适用商品 -->
				<view class="coupon-goods u-p-30" v-if="couponGoods.length">
					<view class="coupon-goods-title" id="couponGoods">适用商品</view>
					<view class="goods-list u-m-b-20 u-p-20" v-for="goods in couponGoods" :key="goods.id">
						<shopro-mini-card
							:image="goods.image"
							:title="goods.title"
							:subtitle="goods.subtitle"
							:price="goods.price"
							:originPrice="goods.original_price"
							@click="$Router.push({ path: '/pages/goods/detail', query: { id: goods.id } })"
						></shopro-mini-card>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			couponDetail: {},
			couponGoods: [],
			scrollId: '',
			nowTime: new Date().getTime(),
			options: {},
			btnStatusText: {
				can_use: '立即使用',
				used: '已使用',
				expired: '已失效',
				cannot_use: '暂不可用',
				can_get: '立即领取',
				cannot_get: '不可领取'
			},
			btnStataus: ''
		};
	},
	computed: {},
	onLoad() {
		this.options = this.$Route.query;
		this.getCouponDetail();
		this.getCouponGoods();
	},
	methods: {
		// 领取优惠劵
		getCoupon() {
			let that = this;
			that.$http(
				'coupons.get',
				{
					id: that.$Route.query.id
				},
				'领取中...'
			).then(res => {
				if (res.code === 1) {
					this.options.userCouponId = res.data.id;
					that.getCouponDetail();
					that.$u.toast('领取成功')
				}
			});
		},
		// 优惠券详情
		getCouponDetail() {
			let that = this;
			that.$http('coupons.detail', {
				id: that.$Route.query.id,
				user_coupons_id: that.options.userCouponId
			}).then(res => {
				if (res.code === 1) {
					that.couponDetail = res.data;
					if (res.data.status_code) {
						this.btnStataus = res.data.status_code;
					}
				}
			});
		},
		// 适用商品
		getCouponGoods() {
			let that = this;
			that.$http('coupons.goods', {
				id: that.$Route.query.id
			}).then(res => {
				if (res.code === 1) {
					that.couponGoods = res.data.data;
				}
			});
		},
		onScroll() {
			this.scrollId = '';
		},
		goScroll() {
			if (!this.options.userCouponId) {
				this.getCoupon();
			} else {
				if (this.couponDetail.goods_ids === '0' && this.btnStataus == 'can_use') {
					this.$Router.push({
						path: '/pages/goods/list'
					});
				}
				this.scrollId = 'couponGoods';
			}
		}
	}
};
</script>

<style lang="scss">
.page_box {
	background: linear-gradient(180deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
}
.coupon-box {
	margin: 100rpx 30rpx 0;
	border-radius: 20rpx;
	background-color: #fff;
	.top {
		border-radius: 20rpx 20rpx 0 0;
		background-image: radial-gradient(circle at bottom left, #f6d69d, #f6d69d 16rpx, transparent 17rpx),
			radial-gradient(circle at bottom right, #f6d69d, #f6d69d 16rpx, transparent 17rpx);
		padding: 110rpx 0 40rpx 0;
		position: relative;
		z-index: 5;
		.coupon-line {
			width: 95%;
			border-bottom: 2rpx dashed #f3ce90;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 6;
		}
		.img-box {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			background: #fff;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -70rpx;
			.coupon-img {
				width: 100rpx;
				height: 100rpx;
			}
		}
		.title {
			font-size: 40rpx;
			font-weight: bold;
			line-height: 40rpx;
			margin-bottom: 30rpx;
		}
		.tip {
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 50rpx;
		}
		.use-btn {
			width: 386rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
			border-radius: 40rpx;
			color: rgba(#fff, 0.9);
			margin-bottom: 30rpx;
		}
		.fail-btn {
			width: 386rpx;
			line-height: 80rpx;
			background: rgba(245, 245, 245, 1);
			border-radius: 40rpx;
			font-size: 30rpx;

			font-weight: 500;
			color: rgba(188, 188, 188, 1);
			margin-bottom: 30rpx;
		}
		.time {
			color: #999;
			font-size: 26rpx;
		}
	}
	.bottom {
		border-radius: 0 0 20rpx 20rpx;
		background-image: radial-gradient(circle at top left, #f6d69d, #f6d69d 16rpx, transparent 17rpx),
			radial-gradient(circle at top right, #f6d69d, #f6d69d 16rpx, transparent 17rpx);
		padding: 40rpx 30rpx;
		.notice-item {
			border-bottom: 1rpx solid #eeeeee;
			min-height: 90rpx;
			width: 100%;
			.notice-title {
				font-weight: 500;
				font-size: 26rpx;
			}
			.notice-detail {
				font-size: 24rpx;
				color: #666;
				margin-top: 10rpx;
				padding-bottom: 10rpx;
				text-indent: 30rpx;
			}
		}
	}
}
// 优惠券商品
.coupon-goods {
	.coupon-goods-title {
		font-size: 30rpx;
		font-weight: bold;
		height: 80rpx;
	}
	.goods-list {
		background: #fff;
		border-radius: 20rpx;
	}
}
</style>