xxl/pages/shop/yhqDetail.vue

<template>
	<view class="content">
		<view class="" style="height: 20rpx;"></view>
		<view class="yhq-wrap">
			<view class="yhq-info p-r">
				<image src="../../static/img/yhq-w.png" mode="widthFix"></image>
				<view class="info-name p-a">
					地锅印象代金券
				</view>
				<view class="info-info p-a">
					79元代100元券
				</view>
				<view class="info-time p-a">
					周一至周日可用
				</view>
			</view>
			<view class="yhq-price flex f-j-s">
				<view class="price-left flex f-j-s fg1">
					<view class="left-new-price">
						79
					</view>
					<view class="left-zk">
						7.9折
					</view>
					<view class="left-old-price">
						￥100
					</view>
				</view>
				<view class="price-right fs0">
					1020人买过
				</view>
			</view>
			<view class="yhq-tit">
				有效期
			</view>
			<view class="yhq-val">
				2021.12.17至2022.5.16 23:59(周末、法定节假日通用)
			</view>
			<view class="yhq-tit">
				使用时间
			</view>
			<view class="yhq-val">
				11:00-2300
			</view>
			<view class="yhq-tit">
				适用范围
			</view>
			<view class="yhq-val">
				除酒水饮料外全场通用
			</view>
			<view class="yhq-tit">
				使用规则
			</view>
			<view class="yhq-val">
				仅限堂食
			</view>
		</view>
		<!-- 底部填充 -->
		<view class="" style="height: 120rpx;"></view>
		<!-- 底部购买收藏 -->
		<view class="btm-btn flex">
			<!-- <view class="sc fs0 flex f-j-c">
				<image src="../../static/icon/shoucang.png" mode=""></image>
			</view> -->
			<view class="buy-now-btn fg1" @click="buyNow()">
				立即购买
			</view>
		</view>
		<!-- 购买数量弹窗 -->
		<uni-popup ref="buyNumPopup" type="center">
			<view class="buy-num p-r">
				<view class="buy-num-tit">
					购买数量
				</view>
				<add-number class="buy-num-wrap" :isMin="true" :value="buyNum" :min="1" :max="goodsNumberMax"
					@eventChange="numberChange"></add-number>
				<view class="buy-num-hj">
					合计￥188
				</view>
				<view class="buy-num-btn flex">
					<view class="buy-close fg1" @click="buyNumClose">
						取消
					</view>
					<view class="buy-true fg1" style="color: #FF4C4C;" @click="openPay">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 选择支付方式弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="zf-wrap">
				<view class="zf-top flex f-j-sb">
					<view class="top-left">
						选择支付方式
					</view>
					<image src="../../static/icon/colse.png" mode="" @click="close"></image>
				</view>
				<view class="zf-type flex" @click="changePayType(1)">
					<view class="type-left">
						<text class="icon iconfont iconweixin"></text>
						<text style="margin-left: 20rpx;">微信支付</text>
					</view>
					<label class="radio">
						<radio value="" color="#FF4C4C" :checked="payType == 1"></radio>
					</label>
				</view>
				<view class="zf-type flex" @click="changePayType(3)">
					<view class="type-left">
						<text class="icon iconfont iconyue"></text>
						<text style="margin-left: 20rpx;">余额支付</text>
					</view>
					<label class="radio">
						<radio value="" color="#FF4C4C" :checked="payType == 3"></radio>
					</label>
				</view>
				<view class="" style="width: 750rpx;height: 20rpx;background: #F6F6F6;"></view>
				<view class="zf-btn flex">
					<view class="btn-left">
						合计：<text class="zf-price">100</text>
					</view>
					<view class="btn-right" @click="buying?'':buy()">
						立即支付
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import addNumber from '@/components/add-number.vue';
	export default {
		components: {
			addNumber
		},
		data() {
			return {
				goodsNumberMax: 999,
				buyNum: 1,
				payType: 1,
				buying: false,
				payName: 'weixin'
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			buyNow() {
				let obj = this
				obj.$refs.buyNumPopup.open()
			},
			// 购买数量变化
			numberChange(e) {
				this.buyNum = e.number;
			},
			buyNumClose() {
				let obj = this
				obj.$refs.buyNumPopup.close()
			},
			// 打开支付弹窗
			openPay() {
				let obj = this
				obj.$refs.buyNumPopup.close()
				obj.$refs.popup.open()
			},
			closePay() {
				let obj = this
				obj.$refs.popup.close()
			},
			changePayType(type) {
				this.payType = type;
				if (this.payType == 1) {
					this.payName = 'weixin';
				}
				if (this.payType == 2) {
					this.payName = 'ali';
				}
				if (this.payType == 3) {
					this.payName = 'yue';
				}
				if (this.payType == 4) {
					this.payName = 'pink_integral';
				}
				if (this.payType == 5) {
					this.payName = 'cash';
				}
			},
			//支付
			buy() {
				let obj = this
				if (obj.payType == 0) {
					return obj.$api.msg('请选择支付方式')
				}
				if (obj.buying) {
					return
				}
				obj.buying = true
				obj.closePay()
			},
		}
	}
</script>

<style lang="scss">
	.yhq-wrap {
		width: 702rpx;
		// height: 1065rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: auto;
		padding: 30rpx 24rpx 50rpx;

		.yhq-info {
			width: 655rpx;
			height: 230rpx;
			// border: 1px solid #FCC7AE;
			margin: auto;

			image {
				width: 655rpx;
			}

			view {
				padding-left: 22rpx;
			}

			.info-name {
				top: 25rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
			}

			.info-info {
				top: 70rpx;
				font-size: 45rpx;
				font-weight: bold;
				color: #333333;
			}

			.info-time {
				bottom: 25rpx;
			}
		}


	}

	.yhq-price {
		width: 643rpx;
		margin: auto;
		height: 110rpx;
		border-bottom: 1rpx solid #f6f6f6;

		.price-right {
			font-size: 25rpx;
			font-weight: 500;
			color: #999999;
		}

		.left-new-price {
			font-size: 56rpx;
			font-weight: bold;
			color: #FF4C4C;

			&:before {
				content: '￥';
				font-size: 29rpx;
				color: #FF4C4C;
			}
		}

		.left-zk {
			display: inline-block;

			padding: 5rpx 8rpx;
			border: 1px solid #FF4C4C;
			border-radius: 8rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #FF4C4C;
			margin: 0 10rpx 0 12rpx;
		}

		.left-old-price {
			font-size: 25rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #999999;
		}
	}

	.yhq-tit {
		padding-top: 45rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.yhq-val {
		padding-top: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		text-align: justify;
	}

	.btm-btn {
		background-color: #fff;
		box-shadow: 0px 0px 40px 0px rgba(50, 50, 52, 0.06);
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;

		.sc {
			width: 103rpx;

			image {
				width: 42rpx;
				height: 64rpx;
			}
		}


		.buy-now-btn {
			line-height: 100rpx;
			background: #FF4C4C;

			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.buy-num {
		width: 537rpx;
		height: 449rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		font-size: 30rpx;
		text-align: center;

		.buy-num-tit {
			font-weight: bold;
			color: #333333;
			padding-top: 60rpx;
		}

		.buy-num-wrap {
			margin: 60rpx auto 45rpx;
		}

		.buy-num-hj {
			font-weight: 500;
			color: #333333;
		}

		.buy-num-btn {
			position: absolute;
			bottom: 0;
			width: 100%;
			text-align: center;
			height: 90rpx;
		}
	}

	.zf-wrap {
		width: 750rpx;
		height: 404rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0px 0px;

		.zf-top {
			height: 86rpx;
			border-bottom: #EEEEEE solid 1rpx;
			padding: 0 25rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;

			image {
				width: 15rpx;
				height: 15rpx;
			}
		}

		.zf-type {
			margin-left: 23rpx;
			width: 727rpx;
			height: 100rpx;
			border-bottom: #EEEEEE solid 1rpx;
			padding: 0 25rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #3F454B;

			&:last-of-type {
				border-bottom: none;
			}
		}

		.zf-btn {
			.btn-right {
				width: 360rpx;
				line-height: 100rpx;
				background: #FF4C4C;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.btn-left {
				width: 390rpx;
				line-height: 100rpx;
				padding-left: 24rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #3F454B;

				.zf-price {
					font-size: 36rpx;
					font-weight: bold;
					color: #FF4C4C;

					&::before {
						content: '￥';
						font-size: 24rpx;
						color: #FF4C4C;
					}
				}
			}
		}
	}

	.iconweixin {
		color: #36cb59;
	}

	.iconyue {
		color: #fe8e2e;
	}
</style>