hwnc/components/nx-coupon/yh_coupon.vue

<template>
	<u-popup :show="show" @close="onClose"  round="12" :closeable="true" :closeOnClickOverlay="false">
		<view :class="[AppTheme]" class="app">
			<view class="price-box">
				<text class="price-box_1">选择优惠券</text>
				<text class="price" v-if="money>=0">已选着一张优惠券，共优惠{{money}}元</text>
				<text class="price" v-else>已选着一张优惠券，共优惠0元</text>
			</view>
			<view class="pay-type-list">
				<view v-for="(item, index) in  orderList.djq" :key="index">

					<view class="type-item" @click="changePayType(index,item)">
						<view class="type-item_1">
							<view class="type-item_2">
								<text>￥</text>
								<text class="text_2">{{item.money}}</text>
							</view>
							<view class="type-item_3">满{{item.usemoney}}元可用</view>
						</view>
						<view class="type-item_4">
							<text class="type-item_5">优惠券</text>
							<text class="type-item_6">领取后{{item.day}}天内有效</text>
						</view>
						<label class="radio">
							<radio value="index" :color="primary" :checked='payType == index' />
							</radio>
						</label>
					</view>
					<view style="margin-left: 5%;">
						<u-line color="gray" length="95%"></u-line>
					</view>

				</view>
			</view>
			<view class="zhan_1" @click="changePayType(-1)">
				<view class="zhan_2">
					<view>暂不使用优惠券</view>
					<label class="radio">
						<radio value="-1" :color="primary" :checked='payType ==-1' />
						</radio>
					</label>
				</view>
				<view style="margin-left: 5%;">
					<u-line color="gray" length="95%"></u-line>
				</view>

			</view>

			<text class="mix-btn bg-linear-gradient" @click="confirm">完成</text>

		</view>
	</u-popup>
</template>
<script>
	export default {
		name: "yhcoupon",
		props: {
			orderList: Object,
			showModal: {
				type: Boolean,
			}
		},
		data() {
			return {
				primary: this.$theme.primary,
				show: false,
				payType: '',
				money: 0,
				djqid: ''
			}
		},
		watch: {
			//因为是单项数据流,v-modal控制的组件显示隐藏,父组件不可以通过props内的参数直接改变子元素参数,所以我们通过watch来监控数据的变化,间接修改show的数据
			showModal(val) {
				console.log('val', val)
				this.show = val

			}
		},
		mounted() {
			this.monitoring() // 注册监听事件
		},

		methods: {
		 
			confirm() {
				this.onClose()
			},
			monitoring() {
				console.log(' this.orderList', this.orderList)
				this.orderList.djq.forEach((item, index) => {
					if (this.orderList.totalprice >= item.usemoney) {
						this.payType = index
						this.djqid = item.id
						this.money = item.money
					}
				})
				this.onClose()
			},
			onClose() {
				this.show = false
				this.$emit('close', {
					show: this.show,
					money: this.money,
					djqid: this.djqid
				}) //通知父组件隐藏了
			},
			changePayType(index, item) {
				if (index >= 0) {
					this.payType = index
					this.money = item.money
					this.djqid = item.id
				} else {
					this.djqid = ''
					this.payType = index
					this.money = -2
				}
			}
		}
	}
</script>

<style lang='scss'>
	.codeinput {
		justify-content: space-evenly;
		display: flex;
	}

	.app {
		width: 100%;
	}

	.money {
		font-size: 80rpx;
		position: relative;
		text-align: center;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
		text-align: center;
	}

	.price-box {
		background-color: #fff;

		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		padding: 25rpx;

		.price-box_1 {
			font-size: 30upx;
			font-weight: 600;
		}



		.price {
			padding: 10rpx 0;
			color: darkgrey;
			font-size: 26upx;
			margin-top: 12upx;
		}
	}

	.zhan_1 {
		display: flex;
		flex-direction: column;

		.zhan_2 {
			display: flex;
			justify-content: space-between;
			padding: 80rpx 30rpx 20rpx 30rpx;
		}

	}

	.pay-type-list {
		background-color: #fff;

		.type-item {
			padding: 40upx 30rpx 30rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			font-size: 30upx;
			position: relative;

			.type-item_1 {
				display: flex;
				flex-direction: column;

				.type-item_2 {
					color: red;
					font-size: 34rpx;
					margin-bottom: 20rpx;

					.text_2 {
						font-weight: 600;
					}
				}

				.type-item_3 {
					color: darkgrey;
					font-size: 28rpx;
				}
			}

			.type-item_4 {

				display: flex;
				flex-direction: column;
				margin-left: -10vh;

				.type-item_5 {
					margin-bottom: 20rpx;
					font-size: 35rpx;
				}

				.type-item_6 {
					color: darkgrey;
					font-size: 28rpx;
				}
			}

		}

		.icon {
			width: 100upx;
			font-size: 52upx;
		}

		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}

		.icon-weixinzhifu {
			color: #36cb59;
		}

		.icon-alipay {
			color: #01aaef;
		}

		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}

		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		border-radius: 40upx;
	}
</style>