wx-yunyubang-miniprogram/packages/packageBuy/pages/shopDetail/shopDetail.vue

<template>
	<view class="content">
		<view class="detailTop">
			<image class="banner" mode="scaleToFill" :src="info.poster"></image>
		</view>
		<view class="toptitle">
			<view class="h3">{{info.name}}</view>
			<view class="dataGroup">
				<view class="dataCol">
					<image mode="heightFix" src="../../static/icon_liulan@2x.png"></image>
					<text class="bot">1334</text>
				</view>
			</view>
			<view class="discuss">
				<view class="starBox">
					<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
					<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
					<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png"></image>
					<image mode="heightFix" src="../../static/icon_detail_star_nor@2x.png"></image>
					<image mode="heightFix" src="../../static/icon_detail_star_nor@2x.png"></image>
				</view>
			</view>
			<view class="shopInfo">
				<view class="tit">
					<image mode="heightFix" src="../../static/icon_shijian@2x.png"></image>
					<text>2021-02-10 14:00</text>
				</view>
			</view>
			<view class="shopInfo">
				<view class="tit">
					<image mode="heightFix" src="../../static/icon_dizhi.png"></image>
					<text>{{info.merchant.address}}</text>
				</view>
				<view class="add_detail">
					<view class="add_l">暂无</view>
					<view class="add_r" @click="">
						<text class="iconfont icon-dianhua"></text>
						<text>电话</text>
					</view>
				</view>
			</view>
		</view>
		<view class="shops">
			<view class="shop">
				<image class="pic" src="../../static/shop-logo.png"></image>
				<view class="infos">
					<view class="name">{{info.merchant.name}}</view>
					<view class="date-txt">周一至周日 09:00-18:00</view>
					<view class="txt">{{info.merchant.address}}</view>
				</view>
			</view>
		</view>
		<view class="details">
			<view class="detail">
				<view class="tit">商品详情</view>
				<view class="txts">
					<u-parse :html="info.content"></u-parse>
				</view>
			</view>
		</view>

		<!--为您推荐-->
		<view class="introBox hasMenu">
			<view class="normal_tit padding_20">附近商家</view>
			<block v-for="(item,index) in dataList">
				<view class="intro_column" @tap="gotoDetail" :data-id="item.id">
					<view class="imgOuter">
						<image mode="aspectFill" src="../../static/rishang.png"></image>
						<view class="i_intro">{{item.product_type.name}}</view>
					</view>
					<view class="columnInfo">
						<view class="title">{{item.name}}</view>
						<view class="discuss">
							<view class="starBox">
								<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png">
								</image>
								<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png">
								</image>
								<image mode="heightFix" src="../../static/icon_detail_star_pre@2x.png">
								</image>
								<image mode="heightFix" src="../../static/icon_detail_star_nor@2x.png">
								</image>
								<image mode="heightFix" src="../../static/icon_detail_star_nor@2x.png">
								</image>
							</view>
						</view>
						<view class="subInfo">{{item.created_at}}</view>
						<view class="subInfo">{{item.merchant.address}}</view>
						<view class="menu"><text class="hui">惠</text>{{item.merchant.name}}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="footer">
			<view class="menuLink">
				<navigator url="../../../../pages/home/home" open-type="switchTab">
					<view class="menuCol">
						<text class="iconfont icon-home"></text>
						<text>首页</text>
					</view>
				</navigator>
				<view class="menuCol" @click="shareOpen">
					<text class="iconfont icon-Share"></text>
					<text>分享</text>
				</view>
				<button open-type="contact" class="menuCol" style="display: flex;
				flex-direction: column;
				line-height: inherit;
				background: none; padding: unset;">
					<text class="iconfont icon-Icon_customerservice"></text>
					<text>客服</text>
				</button>
			</view>
			<view class="buyBtn" @click="toBuy">立即购买</view>
		</view>
		<u-popup v-model="showPop" mode="bottom" closeable="true">
			<view class="buyBox">
				<view class="title">请输入您的联系方式</view>
				<view class="formCol">
					<view>宝妈姓名<text style="color:red">*</text></view>
					<view class="formRight"><input type="text" v-model="form.member_name" placeholder="宝妈姓名"></view>
				</view>
				<view class="formCol">
					<view>手机号码<text style="color:red">*</text></view>
					<view class="formRight"><input type="text" v-model="form.phone" placeholder="请输入手机号码"></view>
				</view>
				<view class="formCol">
					<view>宝宝生日/预产期<text style="color:red">*</text></view>
					<view class="formRight">
						<picker mode="date" :value="form.due_date" @change="bindDateChange">
							<view class="uni-input">{{form.due_date}}</view>
						</picker>
					</view>
				</view>

				<view class="payBtn" @click="toBuy">立即购买</view>
			</view>
		</u-popup>

		<uni-popup ref="shareCode" :mask-click="true" type="bottom" class="shareBox">
			<view class="codeOuter">
				<view class="shareCon" @click="shareClose">
					<canvas style="width:80%;margin-left:10%;position: absolute;"
						:style="{ height:(shareHeight*scare) + 'px', marginTop:(cropperH-(shareHeight*scare))/2+'rpx'}"
						canvas-id="firstCanvas" id="firstCanvas"></canvas>
					<!-- <image class="shareBg" mode="widthFix" src="../../static/bg_haibao@2x.png"></image> -->
					<!-- <image class="code" src="../../static/300_qr.png"></image> -->
				</view>
				<view class="shareBott" :style="{display: shareBtnDisplay}">
					<button class="shareCol" @click="shareClose" open-type="share"
						style="border-radius:0;flex:1;">发给朋友</button>
					<button class="shareCol" @click="save" style="border-radius:0;flex:1;">保存相册</button>
				</view>
			</view>
		</uni-popup>

	</view>

</template>
<script>
	let sysInfo = uni.getSystemInfoSync();
	let SCREEN_WIDTH = sysInfo.screenWidth
	let SCREEN_HEIGHT = sysInfo.screenHeight;
	let WindowHeight = sysInfo.windowHeight;
	let windowWidth = sysInfo.windowWidth;
	import {
		weixin
	} from '../../../../utils/weixin.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				id: "",
				info: {},
				dataList: [],
				form: {
					product_type: "product",
					product_id: "",
					due_date: "",
					phone: '',
					member_name: ""
				},
				openid: "",
				showPop: false,

				cardActive: 0,
				img: '',
				user_info: {
					promotion: ''
				},
				shareBtnDisplay: 'none',
				// 动态的宽高
				cropperW: SCREEN_WIDTH,
				cropperH: SCREEN_HEIGHT,
				packages: [],
				sharePath: "",
				scare: 1,
				shareHeight: 500,
				imgAvatar: "",
				poster: ""
			}
		},
		onShareAppMessage() {
			return {
				title: this.info.name,
				path: "packages/packageBuy/pages/shopDetail/shopDetail?id=" + this.info.id + "promotion_id=" + this
					.user_info.id,
				imageUrl: this.img
			}
		},
		onLoad(options) {
			var that = this;
			this.id = options.id;
			weixin.getOpenidInfo(info => {
				that.user_info = info
			}, false)
			this.openid = that.user_info.openid;
			this.form.member_name = that.user_info.name;
			this.form.phone = that.user_info.phone;
			const scene = decodeURIComponent(options.scene);
			if (!weixin.isNull(scene)) {
				this.form.product_id = weixin.getParam(scene, "id");
				this.id == weixin.getParam(scene, "id");
				this.promotion_id = weixin.getParam(scene, "promotion_id");
				uni.setStorageSync("base_promotion_id", this.promotion_id);
			}

			this.loadInfo();
			this.loadPage();
			this.form.product_id = options.id;

			if (options.promotion_id) {
				uni.setStorageSync("base_promotion_id", options.promotion_id)
			}


		},
		methods: {
			getPoster: function() {
				var that = this;
				uni.getImageInfo({
					src: that.info.poster_url, // 头像
					success: res => {
						that.poster = res.path;
						that.getAvatar();
					}
				});
			},
			getAvatar: function() {
				let userProfile = uni.getStorageSync('user_profile');

				if (!weixin.isNull(userProfile)) {
					console.log(userProfile.avatarUrl)
					console.log(this.imgAvatar)
					uni.getImageInfo({
						src: userProfile.avatarUrl, // 头像
						success: rlogo => {
							this.imgAvatar = rlogo.path;
							console.log(this.imgAvatar)
							this.draw();
						}
					});
				} else {
					this.imgAvatar = "../../static/avatar.jpg";
					console.log(this.imgAvatar)
					this.draw();
				}
			},
			shareOpen() {
				uni.showLoading({
					title: '加载中'
				});
				var that = this;
				this.$refs.shareCode.open();
				this.getPoster();
			},
			draw: function() {
				var that = this;
				uni.request({
					url: this.baseUrl + '/api/member/get-wxa-qrcode',
					method: 'GET',
					data: {
						path: 'packages/packageBuy/pages/shopDetail/shopDetail',
						scene: 'id=' + this.info.id + '&promotion_id=' + this.user_info.id
					},
					success: r => {
						if (r.data.status === 1) {
							uni.getImageInfo({
								src: this.baseUrl + r.data.data, // 二维码
								success: res => {
									var ctx = uni.createCanvasContext('firstCanvas')


									var w = SCREEN_WIDTH * 0.8;
									var h = this.shareHeight * this.scare;
									// ctx.fillStyle = '#fff';
									// ctx.fillRect(0, 0, 214, 342);
									console.log(1)
									ctx.drawImage('../../static/bg_haibao@2x.jpg', 0, 0,
										w, h
									); //(SCREEN_HEIGHT - 50 - SCREEN_WIDTH * 0.8 * 1.65) /2, SCREEN_WIDTH * 0.8, SCREEN_WIDTH * 0.8 * 1.5);

									ctx.drawImage('../../static/bg_haibao1.png', 20, 30 + 40,
										w -
										40, h - 100);
									/* SCREEN_WIDTH *
									0.15, (SCREEN_HEIGHT - SCREEN_WIDTH * 0.6 * 1.65) /
									2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.6 * 1.5); */

									ctx.drawImage(this.poster, 20, 30 + 40,
										w -
										40, (h - 60 - 60) * 0.5);
									/* SCREEN_WIDTH * 0.15, (SCREEN_HEIGHT - SCREEN_WIDTH *
										0.6 * 1.65) /
									2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.695 / 1.6); */

									ctx.font = "22rpx bold";
									// 设置颜色
									ctx.fillStyle = "#fff";
									// 绘制文字（参数：要写的字，x坐标，y坐标）
									ctx.fillText("优孕课堂福利专享", 20, 50);

									ctx.font = "16rpx bold";
									// 设置颜色
									ctx.fillStyle = "#000";
									// 绘制文字（参数：要写的字，x坐标，y坐标）
									ctx.fillText("专享福利", 40, (h + 50) * 0.5 + 20);

									ctx.font = "14rpx bold";
									// 设置颜色
									ctx.fillStyle = "#3377b7";
									// 绘制文字（参数：要写的字，x坐标，y坐标）

									let packagesFirst = this.info
									ctx.fillText("¥" + packagesFirst.price + "" + packagesFirst
										.name, 40, (h + 50) * 0.5 + 20 + 30);


									let user_info = uni.getStorageSync("user_info_yunyubang");

									let userProfile = uni.getStorageSync('user_profile');

									var img = this.imgAvatar;
									uni.getImageInfo({
										src: userProfile.avatarUrl, // 头像
										success: rlogo => {
											img = rlogo.path;

										}
									});
									that.circleImg(ctx,
										img,
										40, h - 60 - w * 0.15,
										w * 0.15 / 2);

									ctx.font = "12rpx normal";
									// 设置颜色
									ctx.fillStyle = "#000";
									// 绘制文字（参数：要写的字，x坐标，y坐标）
									if (!weixin.isNull(user_info.name))
										ctx.fillText(user_info.name,
											40, h - 40);
									else
										ctx.fillText("",
											40, h - 40);


									this.circleImg(ctx, res.path, w - 40 - w * 0.2, h - 40 -
										w *
										0.2, w * 0.2 / 2);

									console.log(2)
									ctx.draw(),
										// r: 半径
										setTimeout(() => {
											uni.canvasToTempFilePath({
												canvasId: 'firstCanvas',
												fileType: 'jpg',
												success: (res) => {

													console.log(3)
													this.shareBtnDisplay =
														'flex'
													uni.hideLoading();
													this.img = this.info
														.poster;
													this.sharePath = res
														.tempFilePath;
												},
											})
										}, 100)
								}
							})
						} else {
							uni.hideLoading()
							this.$refs.shareCode.close()
							this.alert(r.data.msg)
						}
					}
				})

			},
			circleImg: function(ctx, img, x, y, r) {
				ctx.save()
				var d = 2 * r;
				var cx = x + r;
				var cy = y + r;
				ctx.arc(cx, cy, r, 0, 2 * Math.PI);

				ctx.clip();
				ctx.drawImage(img, x, y, d, d);
				ctx.restore();
			},
			shareClose() {
				this.$refs.shareCode.close()
			},
			open() {
				this.$refs.popup.open('top')

			},
			close() {
				this.$refs.popup.close()
			},
			//保存图片时，h5端不能直接保存，只能通过预览长按保存
			save() {

				let _this = this;
				// #ifdef H5
				uni.previewImage({
					urls: [_this.sharePath]
				})
				// #endif
				// #ifdef APP-PLUS||MP-WEIXIN
				uni.saveImageToPhotosAlbum({
					filePath: _this.sharePath,
					success: function() {
						_this.$refs.shareCode.close()
						_this.alert('保存成功')
					}
				});
				// #endif
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.form.due_date = e.target.value
			},
			toBuy() {
				let user_info = weixin.getUserInfoCache();
				if (weixin.isNull(this.form.member_name) || weixin.isNull(this.form.due_date) || weixin.isNull(this.form
						.phone)) {
					this.showPop = true;


					if (weixin.isNull(this.form.member_name)) {
						this.alert('请输入宝妈姓名')
						return
					}
					if (weixin.isNull(this.form.due_date)) {
						this.alert('请选择预产日期')
						return
					}

					if (weixin.isNull(this.form.phone)) {
						this.alert('请填写手机号')
						return
					}

					return false;
				}



				this.toDoBuy();

			},
			toDoBuy: function() {
				var that = this;
				weixin.request({
					api: '/api/member/order-add',
					method: 'POST',
					data: this.form,
					utilSuccess: r => {
						if (parseFloat(r.data.total) == 0) {
							uni.navigateTo({
								url: '../buyMemberSuccess/buyMemberSuccess?id=' +
									this.form.product_id
							})

						} else {
							weixin.request({
								api: '/api/member/order-payment',
								method: 'GET',
								data: {
									order_id: r.data.id,
									openid: this.openid
								},
								utilSuccess: res => {

									weixin.getOpenidInfo(() => {}, true);
									setTimeout(function() {
										uni.hideLoading();
										that.showPop = false;
									}, 100);
									try {
										let payParams = JSON.parse(res.jsApiParameters)
										payParams.provider = 'wxpay'
										payParams.success = result => {
											uni.navigateTo({
												url: '../buyMemberSuccess/buyMemberSuccess?id=' +
													this.form.product_id
											})
										}
										payParams.fail = result => {
											console.log(result);
										}
										wx.requestPayment(payParams);

									} catch (err) {
										console.log(err)
									} finally {
										// finallyCode - 无论 try / catch 结果如何都会执行的代码块
									}
								},
								utilFail: res => {
									uni.showToast({
										title: res
									})
									console.log(res);
								}
							})
						}
					},
					utilFail: r => {
						uni.showToast({
							title: r
						})
						console.log(r);
					}

				})


			},

			gotoDetail: function(e) {
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: "../shopDetail/shopDetail?id=" + id
				})
			},
			loadInfo: function() {
				weixin.request({
					api: '/api/member/get-product/' + this.id,
					method: 'GET',
					utilSuccess: r => {
						//r.data.poster = this.baseUrl + r.data.poster;
						this.info = r.data;
						this.info.poster = (weixin.isNull(this.info.poster) ? "../../static/750x500.jpg" :
							this.info.poster_url)
					},
					utilFail: r => {
						console.log(r);
					}
				})
			},
			loadPage: function() {
				var that = this;
				weixin.request({
					bindThis: that,
					api: '/api/member/get-products',
					customLoading: false,
					data: {
						page: 1,
						page_size: 3
					},
					utilSuccess: function(r) {
						var res = r.data.data;

						for (var m of res) {
							m.created_at = m.created_at.split("T")[0] + " " + m.created_at.split("T")[1]
								.split(".")[0]
						}

						that.dataList = res;
					},
					utilFail: function(res) {
						util.alert(res);
					}
				});
			}

		}
	}
</script>
<style lang="scss" scoped>
	button::after {
		border: none
	}

	.payBtn {
		width: 90%;
		height: 100rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 100rpx;
		text-align: center;
		background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.buyBox {
		width: 690rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx auto;
		padding-bottom: 20rpx;

		.title {
			font-size: 30rpx;
			color: #333;
			padding: 30rpx;
		}

		.formCol {
			font-size: 28rpx;
			color: #666;
			padding: 0 30rpx;
			margin: 20rpx auto;

			.formRight {
				margin: 30rpx 0;

				input {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border: 1rpx solid #dadada;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #666;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.uni-input {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border: 1rpx solid #dadada;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #666;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
		}
	}

	.footer {
		width: 100%;
		height: 112rpx;
		background: #FFFFFF;
		box-shadow: 0px -1rpx 0px 0px #DEDEDE;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;

		.menuLink {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #333;

			.menuCol {
				margin: 0 30rpx;
				font-size: 20rpx;

				text {
					display: block;
				}

				.iconfont {
					font-size: 36rpx;
					margin-bottom: 6rpx;
				}
			}
		}

		.buyBtn {
			width: 220rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
			border-radius: 36rpx;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			line-height: 72rpx;
			color: #fff;
		}

	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #F6F6F6;
		margin-bottom: 100px;
	}

	.shopInfo {
		padding: 25rpx 0;
		border-top: 1rpx solid #EAEAEA;

		.tit {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;

			image {
				display: block;
				width: 24rpx;
				height: 24rpx;
				margin-right: 13rpx;
			}
		}

		.add_detail {
			color: #999;
			font-size: 28rpx;
			padding: 10rpx 0 0 36rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-content: center;

			.iconfont {
				color: #FF578A;
			}

			.add_l {
				width: 65%;
			}

			.add_r {
				padding: 0 34rpx;
				border-left: 1rpx solid #EAEAEA;
			}

			.add_r text {
				display: block;
				text-align: center;
			}
		}
	}

	.detailTop {
		width: 750rpx;

		.banner {
			display: block;
			width: 100%;
			height: 500rpx;
		}
	}

	.infoTop {
		position: relative;
		width: 100%;
		height: 88rpx;
		background: #FF97AA;

		.price {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 400rpx;
			height: 124rpx;
			border-radius: 0 40rpx 0 0;
			color: #fff;

			.priceBg {
				display: block;
				width: 100%;
				height: 124rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
			}

			.two-price {
				display: inline-block;
				margin-top: 22rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				line-height: 56rpx;
				position: relative;
				z-index: 10;

				.large {
					font-size: 56rpx;
				}

				.del {
					display: inline-block;
					margin-left: 10rpx;
					text-decoration: line-through;
				}
			}

			.surplus {
				display: inline-block;
				width: 102rpx;
				height: 32rpx;
				line-height: 32rpx;
				background: rgba(51, 51, 51, 0.2);
				border-radius: 16rpx;
				font-size: 24rpx;
				text-align: center;
				margin-left: 20rpx;
				position: relative;
				z-index: 10;
			}
		}

		.times {
			position: absolute;
			top: 13rpx;
			right: 30rpx;
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24rpx;

			.djs {
				padding-right: 10rpx;
			}

			.num {
				display: inline-block;
				margin-left: 8rpx;
				margin-right: 8rpx;
				padding: 5rpx;
				background: #333333;
				border-radius: 4rpx;
			}
		}
	}

	.discuss {
		display: flex;
		justify-content: flex-start;
		margin: 25rpx 0;
		position: relative;
		align-items: center;
		align-content: center;

		.dis_l {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			padding-top: 5rpx;
			margin-right: 32rpx;
		}

		.starBox {
			display: flex;
			justify-content: flex-start;

			image {
				display: block;
				width: 26rpx;
				height: 26rpx;
				margin-right: 8rpx;
			}
		}
	}

	.toptitle {
		width: 100%;
		background: #fff;
		border-radius: 24rpx 24rpx 0;
		margin-top: -20rpx;
		padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 20;

		.h3 {
			display: inline-block;
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}

		.dataGroup {
			position: absolute;
			top: 30rpx;
			right: 30rpx;

			.dataCol {
				display: inline-block;
				margin-left: 20rpx;

				image {
					display: block;
					width: 34rpx;
					height: 34rpx;
					margin: 0 auto;
				}

				.bot {
					display: block;
					font-size: 20rpx;
					width: 60rpx;
					text-align: center;
				}
			}
		}

		.tags {
			.txt {
				padding: 8rpx;
				background: rgba(255, 177, 62, 0.1);
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #FF7E4C;
				display: inline-block;
				margin-right: 10rpx;
			}
		}

		.normalPrice {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			align-content: flex-end;
			font-size: 24rpx;
			color: #999;

			.price {
				flex: 1;
				color: #FF578A;

				.big {
					font-size: 56rpx;
					font-weight: 500;
					margin-right: 10rpx;
				}

				.small {
					color: #999;
				}
			}

			.r_info {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.leaveNum {
					margin-left: 24rpx;
				}

				.shareMoney {
					max-width: 136rpx;
					height: 28rpx;
					border: 2rpx solid #FF578A;
					border-radius: 4rpx;
					line-height: 28rpx;
					font-size: 20rpx;
					margin-right: 10rpx;
					padding-right: 10rpx;
					color: #FF578A;
					display: flex;
					flex-direction: flex-start;

					text {
						background: #FF578A;
						color: #fff;
						padding: 0 10rpx;
					}
				}
			}

		}

		.shareIntro {
			display: flex;
			border-top: 1rpx solid #DEE4E7;
			justify-content: space-between;
			align-items: center;
			align-content: center;
			font-size: 28rpx;
			color: #666;
			padding: 25rpx 0;
			margin-top: 25rpx;

			.title {
				width: 90rpx;
				padding: 0 8rpx;
				height: 32rpx;
				line-height: 32rpx;
				background: #FF578A;
				border-radius: 6rpx;
				font-size: 20rpx;
				color: #fff;
				margin-right: 32rpx;
			}
		}
	}

	.summary {
		width: 100%;
		margin-top: 15rpx;
		background: #fff;
		padding-bottom: 40rpx;

		.tit {
			line-height: 32rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 35rpx;
			margin-left: 30rpx;
		}

		.wrap {
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				width: 170rpx;

				.iconfont {
					text-align: center;
					font-size: 34rpx;
					color: #FF578A;
				}

				.grey-txt {
					text-align: center;
					font-size: 24rpx;
					color: #999999;
					margin: 10rpx auto;
				}

				.black-txt {
					text-align: center;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}

	.shops {
		background: #fff;
		margin-top: 10rpx;
		padding: 15rpx 30rpx;
		box-sizing: border-box;

		.shop {
			box-sizing: border-box;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #EAEAEA;

			.pic {
				width: 120rpx;
				height: 120rpx;
				display: inline-block;
			}

			.infos {
				position: relative;
				width: 540rpx;
				margin-left: 24rpx;
				display: inline-block;
				vertical-align: top;

				.name {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					line-height: 32rpx;
				}

				.starts {
					margin: 20rpx 0;
					height: 20rpx;
					line-height: 20rpx;

					.iconfont {
						color: #FF578A;
						font-size: 20rpx;
						display: inline-block;
						margin-right: 7rpx;
						height: 100%;
						line-height: 20rpx;
					}
				}

				.txt {
					font-size: 24rpx;
					color: #666666;
					line-height: 24rpx;
				}

				.reply {
					position: absolute;
					top: 45rpx;
					right: 0;
					font-size: 24rpx;
					color: #666666;
					line-height: 24rpx;

					.iconfont {
						padding-left: 7rpx;
						font-size: 24rpx;
						color: #999;
					}
				}

				.date-txt {
					font-size: 24rpx;
					color: #666666;
					line-height: 24rpx;
					margin: 20rpx 0;
				}
			}
		}

		.shop:last-child {
			border-bottom: 0;
		}
	}

	.details {
		margin-top: 10rpx;
		padding: 0 30rpx 30rpx 30rpx;
		background: #fff;
		width: 100%;
		box-sizing: border-box;

		.tit {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			line-height: 32rpx;
			margin-top: 30rpx;
		}

		.txts {
			margin-top: 33rpx;

			.txt {
				display: block;
				font-size: 28rpx;
				color: #333333;
				line-height: 45rpx;
			}
		}

		image {
			width: 100%;
			margin-top: 30rpx;
		}
	}

	.introBox {
		width: 710rpx;
		margin: 20rpx auto 0 auto;
		border-radius: 16rpx;
		background: #fff;
		padding: 0 35rpx;
		box-sizing: border-box;
	}

	.introBox .intro_column:last-child {
		border-bottom: none;
	}

	.intro_column {
		display: flex;
		justify-content: flex-start;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #EAEAEA;

		.imgOuter {
			width: 260rpx;
			height: 210rpx;
			position: relative;

			image {
				width: 260rpx;
				height: 210rpx;
				border-radius: 5rpx;
			}

			.i_intro {
				position: absolute;
				top: 0;
				left: 0;
				//width: 68rpx;
				padding: 0rpx 10rpx;
				height: 32rpx;
				background: #FF578A;
				border-radius: 5rpx 0px 18rpx 5rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
			}
		}

		.columnInfo {
			width: 360rpx;
			margin-left: 22rpx;

			.discuss {
				margin: 13rpx 0 !important;
			}

			.menu {
				font-size: 24rpx;
				color: #333;
				margin-top: 10rpx;

				.hui {
					margin-right: 8rpx;
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					background: #FF753E;
					border-radius: 2rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 30rpx;
				}
			}

			.title {
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.tags text {
				height: 28rpx;
				background: rgba(255, 177, 62, 0.1);
				border-radius: 4rpx;
				line-height: 28rpx;
				font-size: 20rpx;
				padding: 0 10rpx;
				margin-right: 10rpx;
				color: #FF753E;
			}

			.subInfo {
				width: 100%;
				font-size: 24rpx;
				color: #999;
				font-weight: 400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-top: 5rpx;

				.font_red {
					margin-left: 10rpx;
				}
			}

			.price {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-top: 8rpx;

				text {
					margin-right: 10rpx;
				}

				.shareMoney {
					height: 28rpx;
					border: 2rpx solid #FF578A;
					border-radius: 4rpx;
					line-height: 28rpx;
					font-size: 20rpx;
					margin-right: 10rpx;
					padding-right: 10rpx;
					color: #FF578A;
					display: flex;
					flex-direction: flex-start;

					text {
						background: #FF578A;
						color: #fff;
						padding: 0 10rpx;
					}
				}

				.free {
					height: 28rpx;
					background: #FF753E;
					border-radius: 4rpx;
					line-height: 28rpx;
					font-size: 20rpx;
					padding: 0 10rpx;
					margin-right: 10rpx;
					color: #fff;
				}
			}

		}
	}

	.termBox {
		width: 750rpx;
		height: 200rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0) 100%);
		border-radius: 40rpx 40rpx 0px 0px;
		margin-top: 20rpx;

		.termOuter {
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: flex-start;

			.termCol {
				width: 27%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				padding-top: 36rpx;

				.iconfont {
					font-size: 24rpx;
					color: #666666;
					line-height: 28rpx;
					margin-left: 8rpx;
				}

			}

			.termCol.cur {
				color: #FF578A;

				.iconfont {
					color: #FF578A;
				}
			}

			.termCol:last-child {
				width: 19%;
			}

		}
	}



	.shareBox {
		background: rgba(0, 0, 0, 0.5);
	}

	.codeOuter {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		// padding-top: 13vh;
		box-sizing: border-box;
		position: relative;
	}

	.shareCon {
		// width: 500rpx;
		// margin: 0 auto;
		//position: absolute;
		//top: 45%;
		//left: 50%;
		// transform: translate(-50%, -50%);

		.code {
			width: 300rpx;
			height: 300rpx;
			display: block;
			position: absolute;
			left: 50%;
			margin-left: -150rpx;
			top: 50%;
			margin-top: -150rpx;
		}
	}

	.shareBott {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: flex-start;

		.shareCol {
			width: 50%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 30rpx;
			background: #FF578A;
			color: #fff;
		}

		.shareCol:first-child {
			background: #e8e8e8;
			color: #666;
		}
	}
</style>