caimei-applets-mcare/pages/user/order/components/coupon.vue

<template name="coupon">
	<view class="coupon-template">
		<view class="coupon-title" @tap.stop="showPopup">
			<text class="text">优惠券:</text> <text class="text-coupon">-￥{{ coupon.couponAmount | NumFormat }}</text>
			<text class="iconfont icon-xiangyou"></text>
		</view>
		<!-- 优惠券 -->
		<tui-bottom-popup :radius="true" :show="popupShow" @close="hidePopup">
			<view class="tui-popup-box clearfix">
				<view class="title">
					<view class="title-l">优惠券</view>
					<view class="title-r" @click="showExchangePopup">兑换优惠券</view>
				</view>
				<div class="tui-popup-main coupon">
					<scroll-view class="tui-popup-scroll" scroll-y="true">
						<view
							v-for="(coupon, index) in dataList"
							:key="index"
							class="coupon-list"
							@click.stop="checkedCoupon(index)"
						>
							<view class="list-cell-le">
								<view class="coupon-maxMoney">
									<text class="small">￥</text> {{ coupon.couponAmount }}
								</view>
								<view class="coupon-minMoney"> 满{{ coupon.touchPrice }}可用 </view>
							</view>
							<view class="list-cell-ri">
								<view class="list-cell-top">
									<view class="list-cell-type">
										<view class="list-cell-tags">
											<template v-if="coupon.moneyCouponFlag == 1">
												<text class="tags" v-if="coupon.moneyCouponType == 1"
													>意向{{ coupon.couponType | TypeFormat }}</text
												>
												<text class="tags" v-else
													>定向{{ coupon.couponType | TypeFormat }}</text
												>
											</template>
											<template v-else>
												<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
											</template>
										</view>
										<view class="list-cell-texts">
											<text v-if="coupon.couponType == 0">
												{{
													coupon.productType && coupon.productType == 1
														? '全商城商品通用'
														: '仅可购买指定商品'
												}}
											</text>
											<text v-if="coupon.couponType == 1">
												{{
													coupon.categoryType == 1
														? '仅限购买产品类商品'
														: '仅限购买仪器类商品'
												}}
											</text>
											<text v-if="coupon.couponType == 3"
												>仅限购买店铺【{{ coupon.shopName }}】的商品</text
											>
											<text v-if="coupon.couponType == 4 || coupon.couponType == 2"
												>全商城商品通用</text
											>
										</view>
									</view>
									<view class="list-cell-btn">
										<view class="list-cell-checkbox">
											<view
												class="checkbox iconfont"
												:class="[coupon.ischecked ? 'icon-yixuanze' : 'icon-weixuanze']"
											>
											</view>
										</view>
									</view>
								</view>
								<view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
							</view>
						</view>
					</scroll-view>
				</div>
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
					<view class="tui-flex-1"> <view class="tui-button" @click="hidePopup">确定</view> </view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
export default {
	name: 'coupon',
	props: {
		couponList: {
			type: Array
		}
	},
	data() {
		return {
			popupShow: false,
			isIphoneX: this.$store.state.isIphoneX,
			checkedIndex: 0,
			dataList: [],
			coupon: {
				couponAmount: 0,
				clubCouponId: 0
			}
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		},
		TypeFormat(value) {
			switch (value) {
				case 0:
					return '活动券'
					break
				case 1:
					return '品类券'
					break
				case 2:
					return '用户专享券'
					break
				case 3:
					return '店铺券'
					break
				case 4:
					return '新用户券'
					break
			}
		}
	},
	created() {
		this.initData(this.couponList)
	},
	watch: {
		couponList: {
			handler: function(el) {
				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
				console.log(el)
				this.couponList = el
			},
			deep: true
		}
	},
	methods: {
		initData(data) {
			if (data.length > 0) {
				data.forEach((el, index) => {
					this.dataList.push(Object.assign({}, el, { ischecked: false }))
				})
				this.coupon.couponAmount = data[0].couponAmount
				this.dataList[0].ischecked = true
			}
		},
		checkedCoupon(idx) {
			// 选择优惠券
			this.checkedIndex = idx
			this.dataList.forEach((el, index) => {
				if (this.checkedIndex == index) {
					el.ischecked = !el.ischecked
				} else {
					el.ischecked = false
				}
			})
		},
		showExchangePopup() {
			this.popupShow = false
			this.$parent.isExchangePopup = true
		},
		showPopup() {
			this.popupShow = true
		},
		hidePopup() {
			this.popupShow = false
			let coupon = {
				couponAmount: 0,
				clubCouponId: 0
			}
			this.dataList.forEach((el, index) => {
				if (el.ischecked) {
					coupon.couponAmount = el.couponAmount
					coupon.clubCouponId = el.clubCouponId
				}
			})
			this.coupon = coupon
			this.$emit('handleChoiceaCoupon', this.coupon)
		}
	}
}
</script>

<style lang="scss">
.coupon-template {
	width: 100%;
	height: auto;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
	.coupon-title {
		width: 702rpx;
		padding: 0 24rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		.text {
			font-size: $font-size-28;
			color: $text-color;
		}
		.text-coupon {
			display: inline-block;
			float: right;
			padding-right: 30rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			color: #f94b4b;
		}
		.iconfont {
			width: 50rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #999999;
			display: block;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 24rpx 24rpx 0 24rpx;
	.title {
		font-size: $font-size-34;
		color: $text-color;
		line-height: 88rpx;
		text-align: center;
		float: left;
		width: 100%;
		height: 88rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 24rpx;
		.title-l {
			flex: 1;
			text-align: left;
		}
		.title-r {
			flex: 1;
			text-align: right;
			color: #f94b4b;
		}
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		padding-top: 10rpx;
		.tui-popup-scroll {
			width: 100%;
			height: 600rpx;
			.coupon-list {
				width: 100%;
				height: 200rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				background: url(https://static.caimei365.com/app/img/icon/icon-coupon-uesb@2x.png);
				background-size: cover;
				.list-cell-le {
					width: 224rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 37rpx 0;
					float: left;
					.coupon-maxMoney {
						width: 100%;
						height: 78rpx;
						line-height: 78rpx;
						font-size: 56rpx;
						color: #ffffff;
						text-align: center;
						.small {
							font-size: $font-size-24;
						}
					}
					.coupon-minMoney {
						width: 100%;
						height: 33rpx;
						line-height: 33rpx;
						font-size: $font-size-24;
						color: #ffffff;
						text-align: center;
					}
				}
				.list-cell-ri {
					width: 478rpx;
					height: 100%;
					box-sizing: border-box;
					padding: 20rpx 24rpx 0 24rpx;
					float: right;
					.list-cell-top {
						width: 100%;
						height: 121rpx;
						float: left;
						border-bottom: 1px solid #e1e1e1;
						.list-cell-type {
							width: 286rpx;
							height: 100%;
							float: left;
							.list-cell-tags {
								width: 100%;
								height: 32rpx;
								margin-bottom: 7rpx;
								.tags {
									display: inline-block;
									padding: 0 10rpx;
									height: 32rpx;
									line-height: 32rpx;
									background-color: #ffdcce;
									color: #f94b4b;
									font-size: $font-size-20;
									border-radius: 8rpx;
									text-align: center;
									float: left;
								}
							}
							.list-cell-texts {
								width: 100%;
								height: auto;
								line-height: 35rpx;
								text-overflow: ellipsis;
								display: -webkit-box;
								word-break: break-all;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								font-size: 26rpx;
								color: #333333;
							}
						}
						.list-cell-btn {
							width: 128rpx;
							height: 100%;
							float: right;
							.list-cell-checkbox {
								width: 100%;
								height: 50%;
								.checkbox {
									width: 40rpx;
									line-height: 60rpx;
									float: right;
									box-sizing: border-box;
									text-align: center;
									text-decoration: none;
									-webkit-tap-highlight-color: transparent;
									overflow: hidden;
									color: #f94b4b;
								}
							}
						}
					}
					.list-cell-time {
						width: 100%;
						height: 58rpx;
						line-height: 58rpx;
						text-align: left;
						font-size: $font-size-20;
						color: #999999;
					}
				}
			}
		}
		.tui-popup-coupon {
			width: 100%;
			height: 500rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.tui-popup-h1 {
				width: 100%;
				height: 66rpx;
				display: flex;
				align-items: center;
				.tui-popup-text {
					flex: 1;
					height: 66rpx;
					line-height: 66rpx;
					font-size: $font-size-30;
					color: #333333;
					&.red {
						color: #f94b4b;
					}
					&.bold {
						font-weight: bold;
					}
					&.left {
						text-align: left;
					}
					&.right {
						text-align: right;
					}
				}
			}
		}
	}
	.tui-popup-btn {
		width: 100%;
		height: auto;
		float: left;
		margin-top: 24rpx;
		.tui-button {
			width: 100%;
			height: 88rpx;
			background: $btn-confirm;
			line-height: 88rpx;
			text-align: center;
			color: #ffffff;
			font-size: $font-size-28;
			border-radius: 44rpx;
		}
	}
}
</style>