high-mini/pages/settleAccounts/detail-popup/detail-popup.vue

<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="">
						共{{getNumberAll}}件
					</view>
				</view>
				<!-- 遍历商品 -->
				<view v-for="(item,index) in goodsList" :key="index" class="goods-pop bottom-border pd15">
					<view class="">
						<image class="st-img" v-if="item.img" :src="imageUrl + item.img" mode="aspectFill"></image>
					</view>
					<view class="goods-flex1">
						<view class="marb10 font16">
							{{item.title}}
						</view>
						<view class="flex-row">
							<view class="dis-flex">
								<view class="fcorred">
									¥{{item.price}}
								</view>
								<view class="text-lt fcor666 margle10">
									¥{{item.originalPrice}}
								</view>
							</view>
							<view class="fcor666">
								×{{item.num}}
							</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="">
						¥{{postPriceAll}}
					</view>
				</view>
				<view class="flex-row font14 color999 marb5">
					<view class="">
						<text class="font20 paddtright5">·</text>运费
					</view>
					<view class="">
						¥{{postPrice.freightPrice}}
					</view>
				</view>
				<view class="flex-row font14 color999">
					<view class="">
						<text class="font20 paddtright5">·</text>运费优惠
					</view>
					<view class="fcorred">
						商品金额满{{postPrice.freePostPrice}}元包邮
					</view>
				</view>

				<view class="font16 color999 mart10">
					不同城市、地区之间收费规则会略有不同。
				</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  pop-contain pd-main">
			<view class="pop-title fontwig6"><text>选择优惠券</text></view>
			<radio-group @change="radioChange" >
				<view  class="dis-flex flex-sp fcor666   pd-main mart10 border-8r backcolorfff">
					<view class="">
						不使用优惠券
					</view> 
					<view class="">
						<radio  class="radio-ca" :checked="yhqType == 0" :value="0" color="#FF1A34" />
					</view>	
				</view>

			
				<view v-for="(item,index) in discountList" :key="index" class="pd-main mart10 border-8r backcolorfff" style="box-sizing: border-box;">
					<view class="dis-flex flex-sp ">
						<view class="wid25 fotct paddtright5 right-border">
							<view class="fotred font20 fontwig6">
								<image class="st-img" v-if="item.discountImg" :src="imageUrl+item.discountImg" mode="aspectFill">
								</image>
							</view>
						</view>
						<view class="flex-1 paddleft5">
							<view :class="' font14 '+item.discountCondition<=totalPrice?' ':' fcor666 '">
								{{item.discountName}}
							</view>
							<view class="font13 mart5 fcor666">
								截止时间:{{item.useEndTime | formatDate }}
							</view>
						</view>
						<view class=""  v-if="item.discountCondition<=totalPrice">
							
								<radio  class="radio-ca" :checked="yhqType == item.id" :value="item.id" color="#FF1A34" />
							
						</view>
					</view>
					<view v-if="item.discountCondition>totalPrice&&item.discountType == 1"  class="paddtop10  mart10 border-t font14">
						<view class="fotred  fontwig6 ">不可用原因</view> 
						<view class="fcor666">
							使用门槛为{{item.discountCondition}}元，还差{{item.discountCondition-totalPrice}}元才能使用
						</view>
					</view>
				</view>
				
			</radio-group>	
			

		</view>


	</wybPopup>

</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	const app = getApp();
	export default {
		data() {
			return {
				imageUrl: app.globalData.imgUrl, //图片地址
				keywords: '',
				//
				
				// yhqId: [
				// 	111, 222, 333, 444
				// ],
				//
				
				goodsList: [],//商品列表
				imageUrl: app.globalData.imgUrl, //图片地址
				postPrice: null, //运费信息
				
				discountList:[],//优惠券信息
				totalPrice:0,//商品总金额
				yhqType: 0,//选择的优惠券id
				

			}
		},
		filters:{
			  formatDate(value, spe = '/') {
			  		let data = new Date(value);
			  		let year = data.getFullYear();
			  		let month = data.getMonth() + 1;
			  		let day = data.getDate();
			  		let h = data.getHours();
			  		let mm = data.getMinutes();
			  		let s = data.getSeconds();
			  		month = month >= 10 ? month : "0" + month;
			  		day = day >= 10 ? day : "0" + day;
			  		h = h >= 10 ? h : "0" + h;
			  		mm = mm >= 10 ? mm : "0" + mm;
			  		s = s >= 10 ? s : "0" + s;
			  		return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			  	},
		},
		computed: {
			getNumberAll() {
				if (this.goodsList.length > 0) {
					let num = 0;
					this.goodsList.map(item => {
						num += Number(item.num);
					})

					return num;
				} else {
					return 0
				}

			},
			//计算运费
			postPriceAll() {
				if (this.postPrice) {
					if (this.postPrice.totalPrice >= this.postPrice.freePostPrice) {
						return 0
					} else {
						return this.postPrice.freightPrice;
					}
				} else {
					return 0;
				}
			},
		},
		components: {
			wybPopup
		},
		methods: {

			// //goods货品， freight运费,integral积分,coupon优惠券
			show(str, data) {
				
				this.goodsList = [];
				this.postPrice = null;
				this.discountList = [];
				this.totalPrice = 0;
				
				
				this.keywords = str;
				if (str == 'goods') {
					this.goodsList = data;
				} else if (str == 'freight') {
					this.postPrice = data;
					console.log(this.postPrice, "obj")
				}else if(str == 'coupon'){
					this.discountList =data.discountList//优惠券信息
					this.totalPrice =data.totalPrice //商品总金额
					
				}

				this.$refs.popup.show();
			},
			radioChange(e) {
				this.yhqType = e.detail.value;
				this.$refs.popup.close()
			},
			// 关闭的时候弹射方法
			hide() {
				this.$emit('selectYhq',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;

		

		.goods-flex1 {
			flex: 1;
			padding: 0 20rpx;
			text-align: left;
		}
	}

.st-img {
			width: 82px;
			height: 82px;
		}
	// 优惠券
	.radio-ca {
		// width: 20rpx;
		// height: 20rpx;
	}
</style>