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="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" :id="coupon.id" class="coupon-list"  @click.stop="checkedCoupon(coupon,index)">
							<view class="list-cell-le">
								<view class="coupon-maxMoney">
									<text class="small">￥</text>
									{{ coupon.maxMoney }}
								</view>
								<view class="coupon-minMoney">
									满{{ coupon.minMoney }}可用
								</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.useType == 1">{{ coupon.useType | TypeFormatText }}</text>
											<text v-if="coupon.useType == 2">{{ coupon.useType | TypeFormatText }}</text>
											<text v-if="coupon.useType == 3">{{ coupon.useType | TypeFormatText }}{{ coupon.couponText }}的商品</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.couponTime }}</view>
							</view>
						</view>
					</scroll-view>
				</div>
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom :isIphoneX ? '68rpx' : '0rpx' }">
					<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:{
			
		},
		data() {
			return{
				popupShow:false,
				isIphoneX:this.$store.state.isIphoneX,
				checkedIndex:null,
				dataList:[
					{
						maxMoney:5000,
						minMoney:1000,
						couponType:1,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:1,
						couponBtnType:0,
						ischecked:false
					},
					{
						maxMoney:2000,
						minMoney:200,
						couponType:2,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:2,
						couponBtnType:0,
						ischecked:false
					},
					{
						maxMoney:4000,
						minMoney:800,
						couponType:3,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:3,
						couponBtnType:0,
						ischecked:false
					},
					{
						maxMoney:6000,
						minMoney:1000,
						couponType:4,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:1,
						couponBtnType:0,
						ischecked:false
					},
					{
						maxMoney:6000,
						minMoney:1000,
						couponType:5,
						couponTime:'2021.06.28~2021.07.28',
						couponText:'华熙生物技术有限公司',
						useType:2,
						couponBtnType:0,
						ischecked:false
					}
				],
			}
		},
		filters:{
			NumFormat(value) {//处理金额
				return Number(value).toFixed(2);
			},
		    totalprice(val,count){//单件商品的价格 × 数量
		        return (val * count).toFixed(2)
		    },
			TypeFormat:function(value) {
				switch (value) {
					case 1:
						return  '活动券';
						break;
					case 2:
						return  '品类券';
						break;
					case 3:
						return  '店铺券';
						break;
					case 4:
						return  '专享券';
						break;
					case 5:
						return  '新用户券';
						break;
				}
			},
			TypeFormatText:function(value) {
				switch (value) {
					case 1:
						return  '全商城商品通用';
						break;
					case 2:
						return  '仅限购买仪器类商品';
						break;
					case 3:
						return  '仅可购买店铺';
						break;
				}
			}
		},	
		created(){
			
		},
		computed: {

		},
		methods:{
			checkedCoupon(coupon,idx){// 选择优惠券
				this.checkedIndex = idx;
				this.dataList.forEach((el,index) => {
					if(this.checkedIndex == index){
						el.ischecked = !el.ischecked;
					}else{
						el.ischecked = false
					}
				})
				console.log('this.dataList===>',this.dataList)
			},
			showExchangePopup(){
				this.popupShow = false
				this.$parent.isExchangePopup = true
			},
			showPopup(){
				this.popupShow = true
			},
			hidePopup(){
				this.popupShow = false
			}
		}
	}
</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;
			}
			.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: 500rpx;
				.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>