book-hi/pages-mall/components/order/sel-coupon-popup.vue

<template>
	<u-popup mode="bottom" v-model="show">
		<view class="content">
			<scroll-view class="scbox" scroll-y="true">
				<!-- 
				<DiscountsItem
				:select="selectIndex == index" 
				v-for="(item, index) in couponList" 
				:data="item" 
				:key="index" 
				@click="changeDiscount(item, index)"></DiscountsItem> 
				 
				 -->
				<u-radio-group v-model="selCouponId" @change="changeDiscount">
					<view class="item" v-for="(item, index) in couponList" :key="index">
						<!--  :disabled="item.status==1" -->
						<u-radio :name="item.id" :disabled="item.status!=2||(Number(item.min_amount)>Number(priceInfo.countPrice))" >
							<view class="coupnInfo">
								<view class="price_color">
									{{item|filterCouponToTitle}}
								</view>
								<view class="time">
									<view class="date">有效期至 {{ formatDateF(item.limit_time*1000) }}</view>
								</view>
							</view>
						</u-radio>
					</view>
					<view class="item">
						<u-radio :name="null">
							<view class="coupnInfo">
								不使用优惠券
							</view>
						</u-radio>
					</view>
					
				</u-radio-group>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
import DiscountsItem from '@/pages-mine/components/discounts-item.vue';
import { formatDate } from '@/utils/tools.js'
export default {
	name: 'sel-coupon-popup',
	components: {
		DiscountsItem
	},
	props: {
		// 数据源
		data: {
			type: Object,
			default: () => {
				return {};
			}
		},
		priceInfo: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			show:false,
			selCouponId:null,
			couponList:[],
			usingCoupon:{},
		};
	},
	filters:{
		filterCouponToTitle(e){
			if(e.min_amount>0){
				// 有满减
				return e.title+'(满'+e.min_amount+'减'+e.amount+')';
			}else{
				return e.title+'(&yen;'+e.amount+')';
			}
		}
	},
	methods: {
		formatDateF(v){
			return formatDate(v);
		},
		showPopup(e){
			console.log(e)
			// couponList: Array(1), usingCoupon
			this.couponList = e.couponList;
			this.usingCoupon = e.usingCoupon;
			
			console.log(this.couponList,this.couponList)
			this.show = true;
		},
		
		changeDiscount(id) {
			console.log(id)
			if(id){
				this.usingCoupon = this.couponList.find(e=>e.id==id)
				this.$emit('done',this.usingCoupon)
			}else{
				this.$emit('done',{})
			}
			this.show = false;
			return;
			this.usingCoupon = item;
		},
	}
};
</script>

<style lang="scss" scoped>
.price_color{
	font-size: 32rpx;
	font-weight: 500;
}
.scbox{
	box-sizing: border-box;
	height: 600rpx;
	padding: 30rpx;
}
.item{
	margin-bottom: 30rpx;
}
.coupnInfo{
	padding-left: 30rpx;
}
/deep/.u-radio{
	float: none !important;
}
</style>