zd/pages/shop/rent.vue

<template>
	<view class="content">
		<view class="qrimg">
			<tki-qrcode :cid="cid" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"
				:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconSize" :lv="lv" :onval="onval"
				:showLoading="showLoading" :loadMake="loadMake" :usingComponents="usingComponents" @result="qrR" />
		</view>

		<view class="top-tit">
			<view class="tit">
				为您展示【台州市】地区套餐，其他地域套餐待开放。
			</view>

		</view>
		<!-- 推荐渠道 -->
		<view class="yt-list">
			<view class="top-wrap flex">
				<view class="top-left">
					推荐渠道
				</view>
			</view>
			<view class="contet-list flex">
				<view class="tc " style="display: flex;text-align: center;" :class="{'action': is_tj}"
					@click="couldTj?istj==true:''">
					推荐渠道
				</view>
				<view class="tc" style="display: flex;text-align: center;" :class="{'action': !is_tj}">
					{{isFj?'最近门店': '选择门店'}}
				</view>
			</view>
		</view>
		<!-- 门店选择 -->
		<view class="yt-list tc-wrap" @click="navTo('/pages/shop/shopTab?select=1')" v-if="!is_tj">
			<view class="top-wrap flex">
				<view class="top-left">
					{{isFj?'最近门店': '选择门店'}}
				</view>
			</view>
			<view class="store-wrap flex" v-if="selctStore && selctStore.id">
				<view class="imgBox">
					<image class="logo" :src="selctStore.image" mode="aspectFit"></image>
				</view>
				<view class="padding-l-20 flex-grow-true">
					<view class="title clamp flex">
						<view class="name">
							{{selctStore.name}}
						</view>
						<view class="km" v-if="selctStore.range">
							{{selctStore.range<1?selctStore.distance+'m':selctStore.range+'km'}}
						</view>
					</view>
					<view class="flex addressBox margin-t-20">
						<image class="iconA margin-r-10" src="../../static/icon/shop.png" mode="">
						</image>
						<text class="clamp">
							{{selctStore.detailed_address}}
						</text>
					</view>
					<view class="addressBox flex">
						<image class="iconA margin-r-10" src="../../static/icon/shopPhone.png" mode="">

							<text class="clamp">
								{{selctStore.phone}}
							</text>
					</view>
					<view class="yysj">
						营业时间：{{selctStore.day_time}}
					</view>


				</view>
			</view>
			<view class="store-wrap-empty" v-else>
				选择门店
			</view>
		</view>
		<!-- 套餐 -->
		<view class="tc-wrap">
			<view class="top-wrap flex">
				<view class="top-left">
					选择套餐
				</view>
			</view>
			<view class="contet-list flex">
				<view class="tc flex" v-for="(item,index) in tcList" :class="{'action': selectTcIndex == index}"
					@click="choosTc(index,item)">

					<view class="tc-price">
						{{item.price}}
						<text class="tc-time-t">
							&nbsp;/&nbsp;{{item.day}}天
						</text>
					</view>
					<view class="tc-time-price">
						<text>{{(item.price*1/(item.day*1)).toFixed(2)}}</text>元/天
					</view>
				</view>
			</view>
		</view>
		<view class="dy-wrap" >
			<view class="top-wrap flex">
				<view class="top-left">
					押金服务
				</view>
				<!-- <view class="top-right">
					<text>押金规则</text>
					<image src="../../static/icon/next1.png" mode="heightFix"></image>
				</view> -->
			</view>
			<view class="contet-list flex">
				<view class="tc flex dy">
					<view class="tc-time">
						<image src="../../static/icon/orderWx.png" mode="heightFix"></image>微信信用免押金
					</view>
					<view class="tc-time-price">
					微信信用≥550分
					</view>
					<view class="tc-price">
						77<text>￥88</text>
					</view>
				</view>
				<view class="tc flex dy action">
					<view class="tc-time">
						支付押金
					</view>
					<!-- <view class="tc-time-price">
					元/天
					</view> -->
					<view class="tc-price">
						{{selectTc.deposit}}
					</view>
				</view>
			</view>
		</view>
		<view class="dy-wrap">
			<view class="top-wrap flex">
				<view class="top-left">
					使用说明
				</view>
			</view>
			<view class="sysm" v-html="sm">
			</view>
		</view>

		<view class="yt-list">
			<view class="yt-list-cell b-b" @click="payType='weixin'">
				<view class="cell-tit flex">
					<image class="orderIcon" src="../../static/icon/orderWx.png" mode="widthFix"></image>
					<text class="margin-l-10">微信支付</text>
				</view>
				<image class="checked" v-if="payType=='weixin'" src="../../static/icon/addressIconXz.png"
					mode="widthFix"></image>
				<view v-else class="noChecked"></view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="yt-list-cell b-b" @click="payType='ali'">
				<view class="cell-tit flex">
					<image class="orderIcon" src="../../static/icon/orderAli.png" mode="widthFix"></image>
					<text class="margin-l-10">支付宝</text>
				</view>
				<image class="checked" v-if="payType=='ali'" src="../../static/icon/addressIconXz.png" mode="widthFix">
				</image>
				<view v-else class="noChecked"></view>
			</view>
			<!-- #endif -->
			<view class="yt-list-cell b-b" @click="payType='yue'">
				<view class="cell-tit flex">
					<image class="orderIcon" src="../../static/icon/ye.png" mode="widthFix"></image>
					<text class="margin-l-10">卡券({{now_money}})</text>
				</view>
				<image class="checked" v-if="payType=='yue'" src="../../static/icon/addressIconXz.png" mode="widthFix">
				</image>
				<view v-else class="noChecked"></view>
			</view>
		</view>
		<view class="ts">

		</view>
		<!-- <view class="btm-btn flex">
			<view class="pay-price">
				总计费用：<text>{{(selectTc.price*1) || ''}}</text>
			</view>
			<view class="pay-btn" @click="toBuy" :class="{'zfz': loading}" v-if="">
				{{loading?'支付中':''}}
			</view>
		</view> -->
		<view class="btm-btn flex" >
			<view class="pay-price">
				押金：<text>{{(selectTc.deposit*1) || ''}}</text>
			</view>
			<view class="pay-btn" @click="toBuy" :class="{'zfz': loading}">
				{{loading?'支付中':'支付押金'}}
			</view>
		</view>
<!-- 		<view class="btm-btn flex" v-if="!showbtn">
			<view class="pay-price">
				总计费用：<text>{{(selectTc.price*1) || ''}}</text>
			</view>
			<view class="pay-btn" @click="getEwm">
				获取免押二维码
			</view>
		</view>
		<view class="btm-btn flex" v-else
			style="text-align: center;color: #fff;background-color: #6cd9c0;justify-content: center;"
			@click="saveShareQrcode">
			保存二维码
		</view> -->
		<uni-popup ref="mypopup" type="center" @change="mychange">
			<view class="myj-wrap">
				<view class="ewm-wrap">
					<canvas :style="{ width:cw + 'rpx', height: ch+'rpx',}" canvas-id="myCanvas" id="myCanvas"
						class="hb"></canvas>
				</view>
				<view class="bcewm" @click="saveShareQrcode">
					保存二维码
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import {
		openMap
	} from '@/utils/rocessor.js';
	// #endif
	// #ifdef H5
	import weixinObj from "@/plugin/jweixin-module/index.js";
	// #endif
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		storeList,
	} from '@/api/product.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		orderPay
	} from '@/api/order.js'
	import {
		getRents,
		rentCreate,
		details
	} from '@/api/index.js'
	export default {
		data() {
			return {
				showbtn: false,
				ewmw: 300, //二维码相对宽度
				cw: 600, //画布相对宽度
				ch: 600, //画布相对高度
				shareQrcodeUrl: '', //画布生成的地址
				canvasW: '', //画布宽度
				canvasH: '', //画布高度
				ewmImg: '', //二维码图片信息
				erweimasrc: '', //生成的二维码图片
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 300, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				// show: true,//默认使用组件中的image标签显示二维码
				val: '', //要生成的内容
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 40, //二维码图标大小
				lv: 3, //容错级别
				onval: true, //监听val值变化自动重新生成二维码
				loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading: false, //是否显示loading

				is_tj: false, //是否使用推荐渠道
				couldTj: false, //是否可用推荐渠道
				isFj: false, //是否为最近门店
				selctStore: {
					id: ''
				},
				now_money: '',
				tcList: [],
				selectTc: {},
				selectTcIndex: 0,
				payType: 'yue',
				sm: '', //使用说明
				loading: false, //是否支付中
			}
		},
		computed: {
			...mapState('user', ['address', 'userInfo'])
		},
		onLoad() {
			this.getRents()
			this.getSm()
		},
		onShow() {
			this.userinfo()
			if (this.address.latitude == '') {
				this.getlocation()
			}
		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'setAddress']),
			//保存图片
			saveShareQrcode() {
				console.log(this.shareQrcodeUrl)
				uni.saveImageToPhotosAlbum({
					filePath: this.shareQrcodeUrl,
					success: (res) => {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "成功保存到相册",
						});
					},
					fail: (err) => {
						//重新提示用户打开保存图片的授权
						if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
							uni.showModal({
								title: '提示',
								content: '需要您授权保存相册',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										uni.openSetting({
											success(settingdata) {
												if (settingdata.authSetting[
														'scope.writePhotosAlbum']) {
													uni.showModal({
														title: '提示',
														content: '获取权限成功,再次保存图片即可成功',
														showCancel: false,
													})
												} else {
													uni.showModal({
														title: '提示',
														content: '获取权限失败，无法保存到相册',
														showCancel: false
													})
												}
											}
										})
									}
								}
							})
						}
					},
				})
			},
			mychange(e) {
				this.showbtn = e.show
			},
			//获取二维码
			getEwm() {
				let that = this
				setTimeout(() => {
					that.val = '阿强是个大傻逼'
					this.$refs.mypopup.open()

				}, 100)
			},
			// 获取图片信息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},
			// 获取设备信息
			getSystemInfo() {
				return new Promise((req, rej) => {
					uni.getSystemInfo({
						success: function(res) {
							req(res)
						}
					});
				})
			},
			async createPoster() {
				let that = this
				// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
				that.SystemInfo = await that.getSystemInfo();

				that.ewmImg = await that.getImageInfo(that.erweimasrc);
				// this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
				that.ratio = that.SystemInfo.windowWidth / 750;
				that.canvasW = that.cw * that.ratio;
				this.canvasH = that.ch * that.ratio;
				that.ewmW = that.ewmw * that.ratio;

				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
				if (that.ewmImg.errMsg == 'getImageInfo:ok' && that.SystemInfo.errMsg == 'getSystemInfo:ok') {
					console.log('二维码和屏幕信息加载完成')
					// uni.showToast({
					// 	icon: 'loading',
					// 	mask: true,
					// 	duration: 10000,
					// 	title: '二维码生成中',
					// });
					setTimeout(() => {
						var ctx = uni.createCanvasContext('myCanvas', that);
						// 填充背景色，白色
						ctx.setFillStyle('#fff'); // 默认白色
						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
						// drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
						ctx.drawImage(this.ewmImg.path, (this.canvasW / 2 - this.ewmW / 2), 100 * that.ratio,
							this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)


						// 3、绘制商品标题，多余文字自动换行
						ctx.setFontSize(16); // setFontSize() 设置字体字号
						ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
						ctx.setTextAlign('center')
						ctx.fillText('请使用支付宝扫描上方二维码', this.canvasW / 2, 200 * that.ratio + that.ewmW)
						ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
							that.fina = true
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'myCanvas',
								quality: 1,
								fileType: 'jpg',
								complete: function(res) {
									// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
									console.log(res)
									that.canvasShow = false
									that.shareQrcodeUrl = res.tempFilePath
									that.$forceUpdate()
									uni.hideLoading()
									setTimeout(function() {
										console.log(that.shareQrcodeUrl, that
											.canvasShow)
									}, 2000)
								},
							})
						});
					}, 1500)
				} else {
					console.log('err')
				}
			},
			qrR(res) {
				this.erweimasrc = res
				console.log(res, '二维码图片');
				this.createPoster()
			},
			// 获取附近门店
			storeList(source) {
				let that = this
				storeList({
						page: 1,
						limit: 1,
						latitude: that.address.latitude,
						longitude: that.address.longitude,
					})
					.then(({
						data
					}) => {
						// console.log(data, '结果');
						if (data && data.list && data.list.length > 0) {
							that.selctStore = data.list[0]
							if (data.list[0].distance * 1 <= 100) {
								that.isFj = true
							}
						}
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 获取经纬度
			getlocation() {
				let obj = this;
				// #ifdef H5 || APP
				uni.getLocation({
					type: 'gcj02',
					success(e) {
						obj.getlocationSetInit(e)
					},
					fail(e) {
						if (e.errCode == 22) {
							uni.showModal({
								title: '定位开启错误',
								content: '请查看是否已经开启定位服务',
								showCancel: false,
							});
						}
						console.log(e, 'cw');
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				openMap().then((e) => {
					console.log("授权");
					wx.getLocation({
						type: 'gcj02',
						success: (e) => {
							console.log(e);
							// 调用鉴定位置变化事件
							this.getlocationSetInit(e)
						},
						fail() {}
					})
				})
				// #endif
			},
			// 获取经纬度完毕后回调处理
			getlocationSetInit(data) {
				const obj = this;
				try {
					console.log(data, '位置数据');
					// 保存当前经纬度
					obj.setAddress({
						latitude: data.latitude,
						longitude: data.longitude
					})
					this.storeList()
				} catch (e) {
					console.log(e, 'cww');
					this.storeList()
				}
			},

			// 获取使用说明
			getSm() {
				details({}, 1).then(res => {
					this.sm = res.data.content
				})
			},
			navTo(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			userinfo() {
				getUserInfo({}).then(({
					data
				}) => {
					this.now_money = data.now_money;
					if (data.store_id > 0) {
						this.couldTj = true
						this.is_tj = true
					}
					this.setUserInfo(data)
				});
			},
			choosTc(index, item) {
				this.selectTcIndex = index
				this.selectTc = item
			},
			getRents() {
				getRents().then(res => {
					this.tcList = res.data.rent
					this.selectTc = this.tcList[0]
				})
			},
			paySuccessTo() {
				uni.hideLoading();
				this.loading = false
				// uni.redirectTo({
				// 	url: '/pages/user_home/money/paySuccess?orderid=' + this.orderId,
				// });
				uni.redirectTo({
					url: '/pages/user_home/myRent'
				})
			},
			toBuy() {
				let that = this
				if (!that.is_tj && that.selctStore.id == '') {
					return that.$api.msg('请选择门店')
				}
				uni.showLoading({
					title:'二维码生成中...'
				})
				that.loading = true
				rentCreate({
					store_id: that.is_tj ? that.userinfo.store_id : that.selctStore.id,
					rent_id: that.selectTc.id,
					// #ifdef H5
					from: 'weixin', //来源
					// #endif
					// #ifdef MP-WEIXIN
					from: 'routine', //来源
					// #endif
					// #ifdef APP-PLUS
					from: 'app', //来源
					// #endif
					pay_type: that.payType //支付方式
				}).then(({
					data,
					status,
					msg
				}) => {
					that.val = data.result.link
					// uni.hideLoading()
					that.$refs.mypopup.open()
					/**
					if (data.status == 'ORDER_EXIST') {
						uni.showModal({
							title: '提示',
							content: msg,
							showCancel: false
						});
						uni.hideLoading();
						that.loading = false;
						return;
					}
					// 保存订单号
					that.orderId = data.result.orderId;
					// 判断是否为卡券支付
					if (that.payType == 'yue') {
						console.log('卡券支付', status == 200 && data.status == 'SUCCESS');
						that.loading = false
						if (status == 200 && data.status == 'SUCCESS') {
							that.paySuccessTo();
						} else {
							that.$api.msg(msg);
						}
					} else {
						// 立即支付
						// obj.orderMoneyPay();
						let da = data.result.jsConfig;
						let paydata = {
							nonceStr: da.nonceStr,
							package: da.package,
							signType: da.signType,
							paySign: da.paySign,
							success: function(res) {
								that.paySuccessTo();
							},
							fail: () => {
								that.loading = false;
							}
						};
						// #ifdef H5
						paydata.timestamp = da.timestamp;
						weixinObj.chooseWXPay(paydata);
						// #endif
						// #ifdef MP-WEIXIN
						paydata.timeStamp = da.timestamp;
						wx.requestPayment(paydata);
						// #endif
					}
					**/
				})
			},
			orderMoneyPay() {
				let obj = this;
				orderPay({
						uni: obj.orderId,
						// #ifdef H5
						from: 'weixin', //来源
						// #endif
						// #ifdef MP-WEIXIN
						from: 'routine', //来源
						// #endif
						// #ifdef APP-PLUS
						from: 'app', //来源
						// #endif
						paytype: obj.payType //支付类型  weixin-微信 yue-卡券
					})
					.then(e => {
						// 判断是否微信小程序支付
						if (obj.payType == 'weixin') {
							// #ifdef H5 || MP
							let da = e.data.result.jsConfig;
							let data = {
								nonceStr: da.nonceStr,
								package: da.package,
								signType: da.signType,
								paySign: da.paySign,
								success: function(res) {
									obj.paySuccessTo();
								},
								fail: () => {
									uni.navigateTo({
										url: '/pages/order/order?state=0'
									});
								}
							};
							// #endif
							// #ifdef H5
							data.timestamp = da.timestamp;
							weixinObj.chooseWXPay(data);
							// #endif
							// #ifdef MP-WEIXIN
							data.timeStamp = da.timestamp;
							wx.requestPayment(data);
							// #endif
							// #ifdef APP
							console.log(e.data.result.jsConfig, '返回数值');
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: e.data.result.jsConfig,
								success(e) {
									obj.paySuccessTo();
								},
								fail: (e) => {
									console.log(e, '支付失败');
									uni.navigateTo({
										url: '/pages/order/order?state=0'
									});
								}
							})
							// #endif
						}
						// #ifdef APP
						if (obj.payType == 'ali') {
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: e.data.result.jsConfig,
								success(e) {
									obj.paySuccessTo();
								},
								fail: (e) => {
									console.log(e, '支付失败');
									uni.navigateTo({
										url: '/pages/order/order?state=0'
									});
								}
							})
						}
						// #endif
						uni.hideLoading();
						obj.payLoding = false;
					})
					.catch(e => {
						// 支付完成
						uni.hideLoading();
						obj.payLoding = false;
						console.log(e);
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 1rpx;
	}

	.dy-wrap,
	.tc-wrap {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		// padding: 25rpx 25rpx 45rpx;
		margin: 20rpx auto;

	}

	.contet-list {
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 25rpx 45rpx;

		.tc {
			width: 315rpx;
			height: 212rpx;
			background: #FFFFFF;
			border: 2px solid #E9E9E9;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			flex-direction: column;
			justify-content: center;

			// align-items: center;
			.tc-time {
				font-size: 28rpx;
				font-weight: bold;
				color: #00001A;
				display: flex;
				align-items: center;

				image {
					height: 34rpx;
					margin-right: 10rpx;
				}
			}

			.tc-price {
				font-size: 55rpx;
				font-weight: bold;
				color: #52C696;
				padding: 4rpx 0;

				&::before {
					content: '￥';
					font-size: 20rpx;

				}

				text {
					font-size: 22rpx;
					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
				}

				.tc-time-t {
					font-size: 28rpx;
					font-weight: bold;
					color: #00001A;
					text-decoration: none;
				}
			}

			.tc-time-price {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;

				text {
					font-weight: bold;
				}
			}
		}

		.dy {
			height: 187rpx;
		}

		.action {
			background: #F3FFFB;
			border: 2px solid #5FCCA7;
		}
	}

	.top-wrap {
		justify-content: space-between;
		padding: 0 25rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #00001A;
		height: 85rpx;

		.top-left {}

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

			image {
				height: 22rpx;
				margin-left: 10rpx;
			}
		}
	}

	.sysm {
		padding: 34rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
	}

	.ts {
		height: 200rpx;
	}

	.btm-btn {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		z-index: 999;

		.pay-price {
			padding-left: 33rpx;
			flex-grow: 1;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;

			text {
				font-size: 48rpx;
				font-weight: 500;
				color: #FF6B2E;

				&::before {
					content: '￥';
					font-size: 28rpx;
				}
			}
		}

		.pay-btn {
			flex-shrink: 0;
			width: 287rpx;
			height: 98rpx;
			background: linear-gradient(-38deg, #6CDBC3, #6DD6B8);
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.yt-list {
		background: #fff;
		margin: 0 $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 30rpx 10rpx 40rpx;
		line-height: 70rpx;
		position: relative;

		.checked,
		.noChecked {
			width: 36rpx;
			height: 36rpx;
		}

		.noChecked {
			border: 1px solid $font-color-light;
			border-radius: 100rpx;
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30rpx;
		}

		.cell-icon {
			height: 32rpx;
			width: 32rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: #f85e52;
			border-radius: 4rpx;
			margin-right: 12rpx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}
		}

		.cell-more {
			align-self: center;
			font-size: 24rpx;
			color: $font-color-light;
			margin-left: 8rpx;
			margin-right: -10rpx;
		}

		.cell-tit {
			font-size: 26rpx;
			color: $font-color-light;
			margin-right: 10rpx;

			.orderIcon {
				width: 48rpx;
			}
		}

		.cell-tip {
			font-size: 26rpx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90rpx;
			}
		}

		.desc {
			text-align: right;
			font-size: $font-base;
			color: $font-color-light;
		}
	}

	.store-wrap-empty {
		text-align: center;
		height: 100rpx;
	}

	.store-wrap {
		background-color: #FFFFFF;
		margin-bottom: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;

		.list,
		.km {
			color: $font-color-light;
			font-size: $font-sm;
		}

		.logo {
			height: 200rpx;
			width: 200rpx;
			border-radius: 20rpx;
		}

		.title {
			font-size: 36rpx;
			color: $font-color-dark;
		}

		.iconR {
			height: 24rpx;
		}

		.iconA {
			width: 24rpx;
			height: 24rpx;
		}

		.addressBox {
			font-size: 24rpx;
			color: $font-color-light;
			justify-content: flex-start;
			padding: 10rpx 0;
		}

		.yysj {
			display: inline-block;
			// width: 239rpx;
			padding: 0 10rpx;
			height: 32rpx;
			background: #ddf8f1;
			border-radius: 16rpx 16rpx 16rpx 0rpx;
			font-size: 20rpx;
			font-weight: bold;
			color: #5FCCA7;
			text-align: center;
			line-height: 32rpx;
			margin-top: 10rpx;
		}
	}

	.zfz {
		background: #999 !important;
	}

	.top-tit {
		width: 750rpx;
		background-color: #fff;
		padding: 10rpx;

		.tit {
			font-size: 28rpx;
			background-color: rgba(108, 217, 192, 0.4);
			border-radius: 5rpx;
			padding: 10rpx;
		}
	}

	.myj-wrap {
		width: 600rpx;

	}

	.qrimg {
		position: absolute;
		left: -9999rpx;
		top: -9999rpx;
	}

	.ewm-wrap {
		border-radius: 20rpx;
		overflow: hidden;
	}
	.bcewm {
		background-color: $base-color;
		color: #fff;
		text-align: center;
		height: 80rpx;
		width: 450rpx;
		border-radius: 40rpx;
		margin: auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// margin-left: 75rpx;
	}
</style>