xxl/pages/shop/giftDetail.vue

<template>
	<view class="content">
		<view class="gift-wrap flex f-j-s">
			<view class="gift-img">
				<image src="../../static/error/errorImage.jpg" mode=""></image>
			</view>
			<view class="gift-info flex f-d-c f-j-sb f-ai-s pl20 pt20">
				<view class="gift-name">
					会员礼包<image src="../../static/icon/g-l.png" mode=""></image><text class="info-tit">内含五张门店优惠券</text>
				</view>
				<view class="gift-price">
					<text class="new-price pr10">￥300</text><text class="old-price">￥1000</text>
				</view>
			</view>
		</view>
		<view class="gift-jg flex f-j-c">
			<view class="jg"></view>
			<view class="">礼包包含</view>
			<view class="jg"></view>
		</view>
		<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrap">
			<view class="djq-wrap flex f-ai-s" v-for="item in 10">
				<image src="../../static/error/errorImage.jpg" mode="" class="djq-img"></image>
				<view class="djq-right pl20">
					<view class="djq-tit flex f-j-sb f-ai-s">
						<view class="djq-name clamp">
							岭上会推拿SPA岭上会推拿SPA岭上会推拿SPA岭上会推拿SPA岭上会推拿SPA
						</view>
						<view class="djq-dis">
							<image src="../../static/icon/dw.png" mode=""></image>
							距离0.3KM
						</view>
					</view>
					<view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
						<view class="djq-dz clamp2">
							椒江区市府大道200号椒江区市府大道200号椒江区
						</view>
						<view class="djq-hd flex f-j-sb">
							<view class="buy-info">
								1425人已购买
							</view>
							<view class="hd-btn">
								<image src="../../static/icon/call.png" mode="" style="margin-right: 15rpx;"
									@click="makeCall()"></image>
								<image src="../../static/icon/dh.png" mode="" @click="dh()"></image>
							</view>
						</view>
					</view>
					<view class="left-btm flex f-j-s">
						<view class="j-logo">
							券
						</view>
						<view class="j-price">
							<text>￥</text>25
						</view>
						<view class="j-zk">
							5.8折
						</view>
						<view class="j-name">
							50元代金券
						</view>
					</view>
				</view>
			</view>
			<view class="tb" style="height: 100rpx;"></view>
		</scroll-view>
		<view class="btm-btn" @click="buying?'':goBuy()">
			立即购买
		</view>
		<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>
	export default {
		data() {
			return {
				height: '',
				payType: 1,
				buying: false,
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scroll-wrap').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		methods: {
			// 打开支付弹窗
			goBuy() {
				this.$refs.popup.open()
			},
			// 关闭支付弹窗
			close() {
				this.$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.close()
			},
			// 拨打电话
			makeCall() {

			},
			// 导航
			dh() {

			}
		}
	}
</script>

<style lang="scss">
	.gift-wrap {
		width: 750rpx;
		height: 198rpx;
		background: #FFFFFF;
		padding: 24rpx 30rpx;

		.gift-img {
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
			}
		}

		.gift-info {
			flex-grow: 1;
			height: 100%;

			.gift-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				line-height: 44rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-left: 13rpx;
					margin-right: 9rpx;
				}

				.info-tit {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFA30B;

				}
			}

			.gift-price {
				text-align: left;

				text {
					display: inline-block;
				}

				.new-price {
					font-size: 38rpx;
					font-weight: bold;
					color: #FF4C4C;
				}

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

					text {
						font-size: 17rpx;
					}
				}
			}
		}

	}

	.gift-jg {
		margin: 20rpx 0;
		font-size: 30rpx;
		font-weight: 500;
		color: #363636;

		.jg {
			width: 120rpx;
			height: 1rpx;
			background: #989898;
			margin: 0 50rpx;
		}
	}

	.djq-wrap {
		width: 701rpx;
		height: 255rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 27rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
		padding: 23rpx 22rpx;

		&:last-of-type {
			margin-bottom: 0;
		}

		.djq-img {
			flex-shrink: 0;
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}

		.djq-right {
			flex-grow: 1;

			.djq-tit {
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				line-height: 52rpx;

				.djq-name {
					max-width: 300rpx;
				}

				.djq-dis {
					flex-shrink: 0;

					image {
						width: 20rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}

					font-size: 22rpx;
					font-weight: 500;
					color: #666666;
				}
			}

			.djq-dz {
				width: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.djq-hd {
				width: 100%;
				border-bottom: 1rpx solid #EAECED;

				.buy-info {
					display: inline-block;
					height: 32rpx;
					border-radius: 16rpx 16rpx 16rpx 0px;
					line-height: 32rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #FF440D;
					padding: 0 15rpx;
					background-color: #fcf3f0;
				}

				.hd-btn {
					image {
						width: 46rpx;
						height: 46rpx;
					}
				}
			}
		}
	}

	.left-btm {
		height: 66rpx;

		.j-logo {
			width: 32rpx;
			line-height: 33rpx;
			background: linear-gradient(-48deg, #FFA30B, #FFD158);
			border-radius: 13rpx;
			font-size: 21rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}

		.j-price {
			font-size: 27rpx;
			font-weight: bold;
			color: #FF4C4C;
			margin: 0 10rpx 0 5rpx;
		}

		.j-zk {
			height: 31rpx;
			border: 1rpx solid #FF4C4C;
			border-radius: 7rpx;
			line-height: 31rpx;
			padding: 0 8rpx;
			font-size: 20rpx;
			font-weight: bold;
			color: #FF4C4C;
			margin-right: 5rpx;
		}

		.j-name {
			font-size: 23rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.btm-btn {
		width: 750rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #ff4c4c;
		position: fixed;
		bottom: 0;
	}

	.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>