caimei-applets-caimei/components/cm-module/creatOrder/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-xiayibu"></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">
											<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
										</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">
					<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){
				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>