<template>
	
		<!-- 选择类别 -->
		<wybPopup ref="popup" @hide="hide"  type="bottom" width="500" scrollY="true" radius="0" :showCloseIcon="true">
			<!-- 货品 -->
			<view v-if="keywords == 'goods'" class="pop-contain pd-main">
				<view class="pop-title fontwig6"><text>商品列表</text></view>
				<view class="pop-content">
					<view class="flex-row bottom-border pd15">
						<view class="">
							即时达
						</view>
						<view class="">
							共16件
						</view>
					</view>
					<!-- 遍历商品 -->
					<view v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]" class="goods-pop bottom-border pd15">
						<view class="">
							<image class="st-img" :src="images" mode="aspectFill"></image>
						</view>
						<view class="goods-flex1">
							<view class="marb10 font16">
								天友原味减糖活性乳酸菌饮品 300ml
							</view>
							<view class="flex-row">
								<view class="fcorred">
									¥5.2 
								</view>
								<view class="fcor666">
									×1
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 运费 -->
			<view v-if="keywords == 'freight'" class="pop-contain pd-main">
				<view class="pop-title fontwig6"><text>运费说明</text></view>
				<view class="pop-content">
					<view class="flex-row  pd10">
						<view class="font16">
							运费总计
						</view>
						<view class="">
							¥0
						</view>
					</view>
					<view class="flex-row font14 color999 marb5">
						<view class="">
							<text class="font20 paddtright5">·</text>运费
						</view>
						<view class="">
							¥6
						</view>
					</view>
					<view class="flex-row font14 color999">
						<view class="">
							<text class="font20 paddtright5">·</text>运费优惠
						</view>
						<view class="">
							-¥6
						</view>
					</view>
					<view class="pd10">
						<view class="font15">
							基础运费
						</view>
					</view>
					<view class="font14 color999 marb5">
						基础运费6元
					</view>
					<view class="font14 color999 marb5">
						不同城市、地区之间收费规则会略有不同。
					</view>
					<view class="font14 color999 marb5">
						运费优惠仅针对基础运费部分进行抵扣;
					</view>
				</view>
			</view>
			<!-- 积分 -->
			<view v-if="keywords == 'integral'" class="pop-contain pd-main">
				
				<view class="pop-title fontwig6"><text>积分说明</text></view>
				<view class="pop-content">
					<view class="flex-row  pd10">
						<view class="font16">
							运费总计
						</view>
						<view class="">
							¥0
						</view>
					</view>
					<view class="flex-row font14 color999 marb5">
						<view class="">
							<text class="font20 paddtright5">·</text>运费
						</view>
						<view class="">
							¥6
						</view>
					</view>
					<view class="flex-row font14 color999">
						<view class="">
							<text class="font20 paddtright5">·</text>运费优惠
						</view>
						<view class="">
							-¥6
						</view>
					</view>
					<view class="pd10">
						<view class="font15">
							基础运费
						</view>
					</view>
					<view class="font14 color999 marb5">
						基础运费6元
					</view>
					<view class="font14 color999 marb5">
						不同城市、地区之间收费规则会略有不同。
					</view>
					<view class="font14 color999 marb5">
						运费优惠仅针对基础运费部分进行抵扣;
					</view>
				</view>
			</view>
			
			<!-- 优惠券 -->
			<view v-if="keywords == 'coupon'" class="backcor9 height100  pop-contain pd-main">
				<view class="pop-title fontwig6"><text>选择优惠券</text></view>
				
				<view @click="noUse" class="fcor666  fotct pd-main mart10 border-8r backcolorfff">
					不使用优惠券
				</view>
				
				<radio-group @change="radioChange">
				<view v-for="(item,index) in yhqId" :key="item" class="dis-flex flex-sp pd-main mart10 border-8r backcolorfff">
					<view class="wid25 fotct paddtright5 right-border">
						<view class="fotred font20 fontwig6">
							8.8折券
						</view>
						<view class="font13 mart5 fcor666">
							最高抵10元
						</view>
					</view>
					<view class="flex-1 paddleft5">
						<view class="font14">
							【新人专享】全品类可用(特殊商品除外)
						</view>
						<view class="font13 mart5 fcor666">
							2023.03.27-2023.04.10
						</view>
					</view>
					<view class="">
						<radio class="radio-ca" :checked="yhqType == item"  :value="item" color="#FF1A34" />
					</view>
				</view>
				</radio-group>
				
			</view>
			
		
		</wybPopup>
	
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		data(){
			return{
				images:"https://d1.shopxo.vip/static/upload/images/goods/2019/01/14/1547451274847894.jpg",
				keywords:'',
				yhqType:111,
				yhqId:[
					111,222,333,444
				],
				
			}
		},
		components:{
			wybPopup
		},
		methods:{
			
			// //goods货品， freight运费,integral积分,coupon优惠券
			show(str){
				this.keywords = str;
				this.$refs.popup.show();
			},
			radioChange(e){
				this.yhqType = e.detail.value;
				console.log(this.yhqType)
			},
			hide(){
				console.log(this.yhqType)
			},
			noUse(){
				this.yhqType = 0 
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
.flex-row{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bottom-border{
	border-bottom: 1px solid #f6f6f6;
	&:last-of-type{
		border-bottom: none;
	}
}

.right-border{
	border-right: 1px dotted #EEEEEE;
	
}

.pd10{
	padding: 10px 0;
}
.pd15{
	padding: 15px 0;
}

.fotred{
	color: #FF1A34;
}

.pop-contain{
	// text-align: center;
	padding-top: 50px;
	.pop-title{
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		position: fixed;
		z-index:10;
		top:0;
		left: 0;
		right: 0;
		background-color: #ffffff;
	}
}

// 商品
.goods-pop{
	display: flex;
	align-items: center;
	.st-img{
		width: 82px;
		height: 82px;
	}
	.goods-flex1{
		flex: 1;
		padding: 0 20rpx;
		text-align: left;
	}
}


// 优惠券
.radio-ca{
	// width: 20rpx;
	// height: 20rpx;
}

</style>