realty/virgo.wzfrontend/workark_wx/subPages/workarkPage/coupon/coupon.vue

<template>
	<view class="coupon-list">
		<view class="coupon-empty" v-if="coupon.length === 0">
			<uv-empty icon="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/7f79138c39aa49a29edd2204ffcbad60"
				textSize="14" width="180" :isImg="true" text="暂无优惠券">
			</uv-empty>
		</view>
		<view v-else>
			<view :class="returnCouponClass(item) ?'coupon-card' : 'coupon-card disabled'"
				v-for="(item,index) in coupon" :key="index" @tap="checkCoupon(item)">
				<view
					:class="couponChecked.findIndex(node=>node.id === item.id) > -1 ? 'coupon-card-box active' :'coupon-card-box'">
					<view class="price">
						<view v-if="item.type === 1">
							<text class="symbol">¥</text>
							<text>{{item.couponAmount}}</text>
						</view>
						<view v-else>
							<text>{{item.discount*100}}</text>
							<text class="symbol">折</text>
						</view>
					</view>
					<view class="center-describe">
						<uv-text :text="item.title" :lines="1" size="15"></uv-text>
						<uv-text
							:text="item.type === 1?`满${item.threshold}减${item.couponAmount}`:`满${item.threshold}可用，最高抵扣${item.mostConstraint}`"
							type="content" :lines="1" size="13">
						</uv-text>
					</view>
					<view class="icon-check">
						<uv-icon name="checkmark" color="#fff" size="14"></uv-icon>
					</view>
				</view>
			</view>
			<view class="hui-button-box">
				<uv-button type="primary" :text="`使用优惠券${couponChecked.length}张`" @tap="changeCoupon"></uv-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getCouponListByQuery
	} from '@/request/api/workark.js'
	export default {
		data() {
			return {
				productLevelId: '',
				coupon: [],
				couponChecked: [],
				isStacking: false,
				price: 0
			}
		},
		onLoad(body) {
			this.productLevelId = body.productLevelId;
			this.price = body.price || 0;
			if (this.productLevelId) this.init()
		},
		methods: {
			async init() {
				let couponData = await getCouponListByQuery({
					userId: this.$store.getters.user.userId,
					productLevelId: this.productLevelId,
					state: 1
				})
				if (!couponData.state) return;
				this.coupon = couponData.data;
			},
			returnCouponClass(item) {
				if (item.threshold > this.price) return false; //大于满减。
				if (this.couponChecked.findIndex(node => node.id === item.id) > -1) return true; //已选择的返回true
				if (this.couponChecked.length === 0) return true; //未选择优惠券时都能选择。
				if (this.isStacking && item.overlayUse === 0) return false; //叠加时不能选择不能叠加优惠券。
				if (this.isStacking && item.overlayUse === 1) return true; //叠加时能选择叠加优惠券。
			},
			checkCoupon(item) {
				if (!this.returnCouponClass(item)) return;
				let index = this.couponChecked.findIndex(node => node.id === item.id);
				if (index === -1) {
					this.couponChecked.push(item);
				} else {
					this.couponChecked.splice(index, 1);
				}
				this.isStacking = this.couponChecked.length > 0 ? this.couponChecked[0].overlayUse === 1 : false; //是否可叠加
			},
			changeCoupon() {
				uni.$emit('changeCoupon', this.couponChecked);
				uni.navigateBack();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.coupon-list {
		padding: 30rpx;
	}

	.coupon-empty {
		padding-top: 80rpx;
	}

	.coupon-card {
		margin-bottom: 20rpx;

		&.disabled {
			.coupon-card-box {
				opacity: 0.6;
				cursor: unset;

				&.active {
					border-color: $uv-border-color;
				}
			}
		}

		.coupon-card-box {
			background: #fff;
			padding: 30rpx 0;
			align-items: center;
			display: flex;
			position: relative;
			border: 2rpx solid $uv-border-color;
			overflow: hidden;

			&.active {
				border-color: $uv-primary;

				.icon-check {
					background: $uv-primary;
					border-color: $uv-primary;
				}
			}
		}

		.price {
			color: $uv-error;
			font-size: 48rpx;
			font-weight: 500;
			line-height: 48rpx;
			text-align: center;
			width: 200rpx;

			.symbol {
				margin: 0 6rpx;
				font-size: 26rpx;
			}
		}

		.center-describe {
			display: inline-block;
			margin-right: auto;
			text-align: left;
		}

		.icon-check {
			border: 1px solid $uv-border-color;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 30rpx;
		}
	}
</style>