store/pages/index/index.vue

<template>
	<view class="home" :class="showGuide?'show_guide':''">
		<view>
			<view class="guide_box" v-if="showGuide" @click="showGuide = false"></view>
			<view class="guide_box flexCC mask" v-if="showAuth"></view>
			<view class="home_bg">
				<image src="/static/imgs/shop/index_bg.png"></image>
			</view>
			<view class="home_box">
				<view class="home_con">
					<view class="shop">
						<view class="shop_top">
							<view class="flexS" @click="sikpEval">
								<image :src="shopInfo.img" class="store_img"></image>
								<view>
									<view style="font-size:36rpx;font-weight: bold;" v-if="shopInfo.name">
										{{ shopInfo.name | getName(18) }}的店铺
									</view>
									<view class="flexS shop_eval">
										<text>店铺评价</text>
										<view v-for="(i, idx) in shopInfo.star" :key="idx"><text
												class="iconfont iconxingxing" style="color:#FB231F;"></text></view>
										<view v-for="(i, index) in star" :key="index"><text
												class="iconfont iconxingxing" style="color:#999;"></text></view>
									</view>
								</view>
							</view>
							<view @click="skipEdit" class="edit">编辑</view>
						</view>
						<view class="shop_bottom flexV">
							<view @click="skipPage(0)">
								<view>{{ dataInfo.order_num || 0 }}</view>
								<view>今日销量</view>
							</view>
							<view style="margin-left: 152rpx;" @click="skipPage(2)">
								<view>{{ dataInfo.see_num || 0 }}</view>
								<view>今日浏览</view>
							</view>
						</view>
						<view v-if="showPlace" class="sub_btn" @click="skipShare">商品管理及分享</view>
					</view>
					<view class="handle">
						<view class="block_con flexCC" :class="item.id === 6 ? 'block_con_red' : ''"
							v-for="item in indexList" :key="item.id">
							<view class="block_box flexB" @click="skipDel(item.url)">
								<view>
									<text class="block_title">{{ item.title }}</text>
									<view class="block_intr">{{ item.intr }}</view>
								</view>
								<image :src="item.icon"
									:style="{ width: item.width + 'rpx', height: item.height + 'rpx' }"></image>
								<view class="block_num" v-if="item.id == 4 && dataInfo.wait_send_num > 0">
									{{ dataInfo.wait_send_num }}
								</view>
								<view class="block_num" v-if="item.id == 5 && dataInfo.no_auth > 0">
									{{ dataInfo.no_auth }}
								</view>
							</view>
						</view>
					</view>
					<view class="box flexB">
						<view class="box_item" @click="skipPage(4)">
							<image src="../../static/imgs/shop/bottom1.png" mode=""></image>
							<view>联系客服</view>
						</view>
						<view class="box_item" @click="skip">
							<image src="../../static/imgs/shop/bottom2.png" mode=""></image>
							<view>争霸赛小程序</view>
						</view>
						<view class="box_item" @click="skipVideo" :class="showGuide?'show_box':''">
							<image src="../../static/imgs/shop/bottom3.png" mode=""></image>
							<view>微店教程</view>
						</view>
						<text class="iconfont iconguanbi" @click="showGuide = false" v-if="showGuide"></text>
						<image src="../../static/imgs/shop/shop_guid.png" class="express_img" v-if="showGuide"></image>
					</view>
					<view class="hint_img">
						<image src="../../static/imgs/shop/shop_hint.png" class="shop_hint"></image>
					</view>
				</view>
			</view>


			<view class="share_show" v-if="shareShow">
				<view class="share_con flexCC">
					<text class="iconfont iconguanbi1" @click="shareShow = false"></text>
					<view class="canvas">
						<canvas canvas-id="canvas" style="width: 100%;height:100%;" id="canvas"><img :src="poster"
								class="poster_img" mode="widthFix" @click="preview" /></canvas>
					</view>
					<view class="save_img">点击图片-长按-发送给朋友</view>
					<view class="sub_btn" @click="skip">点击进入争霸赛小程序</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStoreInfo,
		shareStore,
		getZbsRank
	} from '@/apis/shop.js';
	import {
		wxLogin,
	} from '../../apis/login.js';
	import getName from '../../filters/index.js';

	export default {
		data() {
			return {
				showPlace: true,
				searchName: '', //订单查询内容
				shareShow: false, //显示海报
				canvasWidth: 0, //canvas 宽
				canvasHeight: 0, //canvas 高
				shopInfo: '', //店铺信息
				store: '', //店铺信息
				qrImg: '', //二维码图片
				poster: '', //海报图片
				star: '', //灰色星星个数
				state: '', //获取认证状态
				signCode: '', //待签约的二维码
				dataInfo: '', //数据信息
				model: '', //手机型号
				indexList: [{
						id: 1,
						title: '客户',
						intr: '客户信息精确管理',
						icon: '/static/imgs/shop/icon1.png',
						url: '../../pagesA/pages/user-manage/user-manage',
						width: 61,
						height: 66
					},
					{
						id: 4,
						title: '订单',
						intr: '订单详情及发货',
						icon: '/static/imgs/shop/icon4.png',
						url: '../order-manage/order-manage',
						width: 66,
						height: 53
					},
					{
						id: 6,
						title: '代下单',
						intr: '快速帮客户下单',
						icon: '/static/imgs/shop/icon6.png',
						url: '../user-list/user-list',
						width: 50,
						height: 62
					},
					{
						id: 5,
						title: '退货',
						intr: '订单退货及取消',
						icon: '/static/imgs/shop/icon5.png',
						url: '../../pagesA/pages/refund-manage/refund-manage',
						width: 57,
						height: 57
					},

				],
				isForbidden: false, //店铺是否被禁用
				hintCon: '', //不能使用店铺提示内容
				timer: null, //定时器
				showGuide: false,
				showAuth: true, //显示认证店铺按钮
				isShow: true
			};
		},
		onLoad() {
			const _this = this;
			uni.getSystemInfo({
				success: res => {
					_this.model = res.model;
					_this.canvasWidth = res.windowWidth / 375;
					_this.canvasHeight = res.windowHeight;
				}
			});

		},

		onShow() {
			const networkType = uni.getNetworkType();
			if (networkType === 'none') {
				//当前设备无网络链接
				uni.showModal({
					content: '暂无网络连接，请检查后再试',
					showCancel: false
				})
				return
				// TODO: 添加对无网情况的处理逻辑
			}
			if (['2g', '3g'].includes(networkType)) {
				//当前设备处于弱网环境
				uni.showModal({
					content: '当前网络信号弱，请检查后再试',
					showCancel: false
				})
				return
			}
			if (!uni.getStorageSync('token')) {
				this.login()
			} else {
				this.getShop();
			}
			this.searchName = '';

		},
		onPullDownRefresh() {
			uni.startPullDownRefresh();
			this.getShop();
		},
		methods: {
			checkNetStatus() {
				const networkType = uni.getNetworkType();
				if (networkType === 'none') {
					console.log('当前设备未连接到任何网络');
					return false;
					// TODO: 添加对无网情况的处理逻辑
				} else if (['2g', '3g'].includes(networkType)) {
					console.log('当前设备处于弱网环境');
					return false;
					// TODO: 添加对弱网情况的处理逻辑
				} else {
					console.log('当前设备正常联网');
					return true
					// TODO: 添加其他网络情况的处理逻辑
				}
			},
			moveHandle() {
				return;
			},
			//获取争霸赛奖学金及排名
			getData() {
				getZbsRank().then(res => {
					if (res.code == 200) {
						this.scoreData = res.data;
						const {
							type
						} = res.data;
						if (type == 1) {
							uni.getImageInfo({
								src: this.shopInfo.img,
								success: res => {
									this.shareShow = true
									this.drawImg(res.path)
								}
							})
						}
					}
				})

			},
			//进入争霸赛小程序
			skip() {
				uni.navigateToMiniProgram({
					appId: 'wxa9d1325fd98f5a7d',
					path: 'pages/index/index',
					extraData: {
						'data1': 'test'
					},
					success(res) {
						// 打开成功
					}
				})
			},
			preview() {
				uni.previewImage({
					current: this.poster,
					urls: [this.poster]
				});
			},
			//跳转页面
			skipPage(type) {
				if (this.isForbidden) {
					//证明店铺被禁用
					uni.showModal({
						content: this.hintCon,
						showCancel: false
					});
					return false;
				}
				let url = '';
				switch (type) {
					case 0:
						url = '../order-manage/order-manage?status=' + 0
						break;
					case 1:
						url = '../../pagesA/pages/capital-manage/capital-manage'
						break;
					case 2:
						url = '../../pagesA/pages/brow-user/brow-user'
						break;
					case 3:
						url = '../auth-step/auth-step'
						break;
					case 4: //联系客服
						url = '../../pagesA/pages/qr-code/qr-code'
					default:
						break;
				}
				uni.navigateTo({
					url
				})
			},
			//登录
			login() {
				let _this = this
				uni.login({
					success: re => {
						if (re.errMsg == 'login:ok') {
							let status = this.checkNetStatus()
							if (!status) {
								uni.showModal({
									content: '当前网络信号弱，请检查后再试',
									showCancel: false
								})
								return
							}
							uni.showLoading({
								title: '自动登录中...'
							})
							wxLogin({
								wxcode: re.code
							}).then(res => {
								if (Number(res.code) == 450005) { //被系统删除
									uni.redirectTo({
										url: '../../pagesA/pages/login-fail/login-fail?hint=' +
											'你已被系统删除'
									})
									return false
								}
								if (Number(res.code == 450013)) {
									uni.showModal({
										content: '登陆失败，请手动登录',
										showCancel: false,
										success: res => {
											if (res.confirm) {
												uni.redirectTo({
													url: '../login/login'
												})
											}
										}
									})
									return false;
								}

								if (res.code == 200) {
									const {
										token,
										user,
										is_agent
									} = res.data;
									uni.setStorageSync('token', token)
									_this.getShop();
								} else {
									let hint = res.data
									uni.showModal({
										content: res.data || '登录失败',
										showCancel: false,
										success: res => {
											if (res.confirm) {
												uni.redirectTo({
													url: '../../pagesA/pages/login-fail/login-fail?hint=' +
														hint
												})
											}
										}
									})
								}
								uni.hideLoading()
							}).catch(err => {
								uni.hideLoading()
								uni.showModal({
									content: err,
									showCancel: false
								})
								console.log(err, '错误消息')
							})
						} else {
							uni.showModal({
								content: '登录失败！',
								showCancel: false
							})
						}
					},
					fail: err => {
						uni.hideLoading()
						uni.showModal({
							content: '登录失败',
							showCancel: false
						})
					}
				})
			},
			//跳转到商品分享页面
			skipShare() {
				uni.navigateTo({
					url: '../goods-share/goods-share'
				});
			},
			//跳转到如何操作视频页面
			skipVideo() {
				uni.navigateTo({
					url: '../shop-video/shop-video'
				});
			},
			//跳转到协议
			skipProtocol() {
				uni.navigateTo({
					url: '../../pagesA/pages/protocol/protocol'
				});
			},
			//获取code值方法
			getUrlParam(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); //构造一个含有目标参数的正则表达式对象
				var r = window.location.search.substr(1).match(reg); //匹配目标参数
				if (r != null) return decodeURIComponent(r[2]);
				return null; //返回参数值
			},
			/*获取店铺信息*/
			getShop() {
				let status = this.checkNetStatus()
				if (!status) {
					uni.showModal({
						content: '当前网络信号弱，请检查后再试',
						showCancel: false
					})
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				//进入店铺根据is_apply判断认证的状态，提交认证之后，返回首页显示审核中，审核通过之后显示签约二维码，
				getStoreInfo()
					.then(res => {
						uni.stopPullDownRefresh();
						if (Number(res.code) == 450005) { //被系统删除
							uni.redirectTo({
								url: '../../pagesA/pages/login-fail/login-fail?hint=' +
									'你已被系统删除'
							})
							return false
						}
						if (Number(res.code) == 450004) {
							uni.redirectTo({
								url: '../../pagesA/pages/login-fail/login-fail?hint=' +
									'店铺已禁用，请联系上级管理员'
							})
							//店铺已禁用
							// this.hintCon = '店铺已禁用，请联系上级管理员';
							// uni.showModal({
							// 	content: this.hintCon,
							// 	showCancel: false
							// });
							// return false;
						}
						if (res.code == 200) {
							this.dataInfo = res.data;
							this.shopInfo = res.data.store;
							uni.setStorageSync('store', res.data.store);
							const {
								is_apply,
								show_num1,
								qr_code,
								level
							} = this.shopInfo;

							// this.isForbidden = is_delete === 1 ? false : true

							// 2023-02-03 09:00:00 起 销售主管隐藏 ‘商品管理及分享’和‘代下单’
							const time = Date.parse(new Date())
							const endTime = 1675386000000
							if (level == 1 && (time >= endTime)) {
								this.showPlace = false
								let i = this.indexList.findIndex(item => item.id == 6)
								if (i != -1) {
									this.indexList.splice(i, 1)
								}
							}
							uni.setStorageSync('qrCode', qr_code)
							// if (is_apply != 3) {
							// 	uni.redirectTo({
							// 		url: '../../pagesA/pages/login-fail/login-fail?hint=' + '暂时停止微店认证'
							// 	})
							// 	// uni.redirectTo({
							// 	// 	url: '../auth-step/auth-step'
							// 	// })
							// 	return false;
							// }
							if (Number(res.data.is_delete) === 1) {
								uni.reLaunch({
									url: '../../pagesA/pages/del-withdrawal/del-withdrawal'
								})
								return false
							}
							this.showAuth = false;
							this.showGuide = show_num1 == 1 ? true : false
							//显示星级
							this.star = 5 - Number(res.data.store.star);
							this.getData()
						} else {
							uni.showModal({
								content: res.data,
								showCancel: false,
								success: res => {
									if (res.confirm) {
										uni.redirectTo({
											url: '../../pagesA/pages/login-fail/login-fail'
										})
									}
								}
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			dataURLtoFile(dataurl, filename = 'file') {
				let arr = dataurl.split(',');
				let mime = arr[0].match(/:(.*?);/)[1];
				let suffix = mime.split('/')[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], `${filename}.${suffix}`, {
					type: mime
				});
			},
			//绘制元宝图片
			drawImg(avatar) {
				let _this = this;
				uni.getImageInfo({
					src: 'https://api.jiuweiyun.cn/public/uploads/icon/poster_new.png',
					success: res => {
						uni.showLoading({
							title: '图片加载中...'
						});
						const {
							score,
							ranking
						} = _this.scoreData;
						let ctx = uni.createCanvasContext('canvas');
						let rpx = _this.canvasWidth;
						ctx.drawImage(res.path, 0, 0, 270 * rpx, 450 * rpx);

						//排名
						ctx.font = 'italic bold 18px pingfang';
						ctx.setFillStyle('#fff');
						ctx.textAlign = 'center';
						ctx.fillText(ranking, uni.upx2px(270), uni.upx2px(467));

						//昵称
						ctx.beginPath(); //开始一个新的路径
						ctx.setLineWidth(2); //设置线条的宽度
						ctx.setStrokeStyle('#EF0A16'); //设置线条的样式
						ctx.setFillStyle('#EF0A16'); //设置填充的样式s
						ctx.font = 'noraml bold 18px pingfang';
						ctx.textAlign = 'center';
						ctx.fillText(this.shopInfo.name, uni.upx2px(270), uni.upx2px(360));
						ctx.moveTo(uni.upx2px(175), uni.upx2px(375)); //设置线条的起始路径坐标
						ctx.lineTo(uni.upx2px(365), uni.upx2px(375)); //设置线条的终点路径坐标
						ctx.stroke(); //对当前路径进行描边
						ctx.closePath(); //关闭当前路径

						ctx.beginPath();
						ctx.arc((55 * rpx) / 2 + 110 * rpx, (55 * rpx) / 2 + 104 * rpx, (55 * rpx) / 2,
							0, Math
							.PI * 2,
							false); // 画一个圆形裁剪区域
						ctx.clip(); // 裁剪
						ctx.drawImage(avatar, 110 * rpx, 104 * rpx, 55 * rpx, 55 * rpx);
						ctx.restore(); //恢复之前保存的绘图上下文

						setTimeout(res => {
							ctx.draw(false, () => {
								uni.canvasToTempFilePath({
									width: 270 * rpx,
									height: 450 * rpx,
									canvasId: 'canvas',
									success: res => {
										uni.hideLoading();
										if (this.model == 'iPhone') {
											this.poster = this
												.dataURLtoFile(res
													.tempFilePath).name;
										} else {
											let url = res.tempFilePath
												.replace(
													/\. +/g, '');
											this.poster = url.replace(
												/[\r\n]/g,
												'');
										}
									}
								});
							});
							uni.hideLoading();
						}, 1000);
					}
				})

			},
			checkDel() {

			},
			/*点击跳转页面*/
			skipDel(url) {
				if (this.isForbidden) {
					uni.showModal({
						content: '',
						showCancel: false
					});
					return false;
				}
				uni.navigateTo({
					url
				});
			},
			/*编辑店铺信息*/
			skipEdit() {
				if (this.isForbidden) {
					//证明店铺被禁用
					uni.showModal({
						content: this.hintCon,
						showCancel: false
					});
					return false;
				}
				uni.navigateTo({
					url: '../shop-info/shop-info'
				});
			},
			/*店铺评价*/
			sikpEval() {
				if (this.isForbidden) {
					//证明店铺被禁用
					uni.showModal({
						content: this.hintCon,
						showCancel: false
					});
					return false;
				}
				uni.navigateTo({
					url: '../evaluate/evaluate'
				});
			},
			/*查询订单*/
			searchOrder() {
				if (this.isForbidden) {
					//证明店铺被禁用
					uni.showModal({
						content: this.hintCon,
						showCancel: false
					});
					return false;
				}
				if (!this.searchName) {
					uni.showModal({
						content: '搜索内容不能为空',
						showCancel: false
					});
					return false;
				}
				uni.navigateTo({
					url: '../order-manage/order-manage?order_no=' + this.searchName
				});
			},
		}
	};
</script>
<style>
	page {
		width: 100%;
		min-height: 100%;
		background: #F9F9FB;
	}
</style>
<style lang="scss" scoped>
	.show_guide {
		overflow-y: hidden;
		position: fixed;
		height: 100vh;
		width: 100%;
	}

	.home {
		position: relative;
		min-height: 100%;
		width: 100%;

		.contact_icon {
			position: fixed;
			bottom: 164rpx;
			right: 44rpx;
			width: 167rpx;
			height: 173rpx;
		}

		.guide_box {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			flex-direction: column;
			align-items: center;
			z-index: 999;

			.express_img {
				width: 659rpx;
				height: 229rpx;
				margin-top: 70vh;
				margin-left: 50rpx;
			}

		}

		.mask {
			z-index: 99999;
		}

		.home_bg {
			width: 750rpx;
			height: 312rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.home_box {
			width: 100%;
			position: relative;
			margin-top: -295rpx;

			.home_con {
				width: 690rpx;
				margin: 0 auto;
				padding-bottom: 150rpx;

				.search_box {
					.inp_box {
						width: 572rpx;
						height: 80rpx;
						background-color: rgba(255, 255, 255, 0.4);
						border-radius: 44rpx;
						padding: 0 30rpx;
						box-sizing: border-box;

						input {
							width: 360rpx;
							height: 80rpx;
							line-height: 80rpx;
							color: #fff;
						}

						.search_button {
							width: 92rpx;
							height: 52rpx;
							background: linear-gradient(92deg, #FFA600 0%, #FCBC05 100%);
							opacity: 1;
							border-radius: 8rpx;
							color: #fff;
						}

						.iconfont {
							color: #fff;
							font-size: 40rpx;
							margin-right: 10rpx;
						}
					}

					.search_logo {
						width: 88rpx;
						height: 88rpx;
					}

				}

				.shop {
					// min-height: 446rpx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 6rpx 12rpx #eeeeee;
					border-radius: 24rpx;
					margin: 0rpx 0 30rpx;
					padding: 30rpx;
					box-sizing: border-box;

					.shop_top {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;

						.store_img {
							width: 113rpx;
							height: 113rpx;
							border-radius: 16rpx;
							margin-right: 20rpx;
							flex-shrink: 0;
						}

						.shop_eval {
							font-size: 28rpx;
							color: #999;
							margin-top: 8rpx;

							text {
								margin-right: 8rpx;
							}
						}

						.edit {
							display: inline-block;
							width: 108rpx;
							height: 52rpx;
							font-size: 28rpx;
							text-align: center;
							line-height: 52rpx;
							color: $base-color;
							background: #fff4f3;
							margin-left: 12rpx;
							border-radius: 8rpx;
						}

						.iconfont {
							font-size: 28rpx;
							margin-right: 5rpx;
						}
					}

					.shop_bottom {
						margin-top: 40rpx;

						>view {
							text-align: center;

							view:first-child {
								font-size: 40rpx;
								color: $base-color;
								font-weight: bold;
							}

							view:last-child {
								font-size: 28rpx;
								color: #999;
								margin-top: 10rpx;
							}
						}
					}

					.sub_btn {
						margin-top: 40rpx;
					}
				}

				.handle {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin: 0 auto;
					box-sizing: border-box;

					.block_con {
						width: 48%;

						.block_box {
							width: 100%;
							height: 146rpx;
							background: #fff;
							border-radius: 18rpx;
							margin-bottom: 30rpx;
							padding: 0 20rpx;
							box-sizing: border-box;
							position: relative;

							.block_title {
								font-size: 38rpx;
								font-weight: bold;
								letter-spacing: 36rpx;
							}

							.block_intr {
								font-size: 28rpx;
								color: #999;
								margin-top: 10rpx;
							}

							.block_num {
								position: absolute;
								top: 10rpx;
								left: 140rpx;
								background: linear-gradient(48deg, #ffaa01 0%, #fe0000 100%);
								color: #fff;
								border-radius: 20rpx 20rpx 20rpx 0;
								padding: 4rpx 10rpx;
							}
						}
					}

					.block_con_red {
						.block_box {
							background: $base-line-bg;
						}

						.block_title,
						.block_intr {
							color: #fffdc1 !important;
						}
					}
				}

				.box {
					width: 702rpx;
					height: 200rpx;
					background: #fff;
					padding: 0 24rpx;
					box-sizing: border-box;
					border-radius: 16rpx;
					position: relative;

					.iconfont,
					.express_img {
						position: absolute;

						z-index: 999999;
					}

					.iconfont {
						font-size: 50rpx;
						color: #fff;
						top: -238rpx;
						right: 0rpx;

					}

					.express_img {
						width: 659rpx;
						height: 342rpx;
						top: -135rpx;
						right: -8rpx;
					}

					.box_item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						background: #fff;

						.show_box {
							z-index: 999999;
							width: 180rpx;
							height: 180rpx;
							border-radius: 8rpx;
						}

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

						view {
							font-size: 30rpx;
							margin-top: 10rpx;
						}
					}

				}

				.hint_img {
					text-align: center;
					margin-top: 30rpx;

					.shop_hint {
						width: 452rpx;
						height: 54rpx;
					}
				}

				.video {
					width: 390rpx;
					height: 112rpx;
					margin: 10rpx auto 0;
					background-size: 100% 100%;
					position: relative;
					z-index: 9999;

					.finger {
						width: 138rpx;
						height: 128rpx;
						z-index: 9999;
						position: absolute;
						top: 25rpx;
						right: -120rpx;
					}

					.video_box {
						width: 362rpx;
						height: 84rpx;
						border-radius: 8rpx;
						z-index: 9999;

						image {
							width: 44rpx;
							height: 44rpx;
							margin-right: 10rpx;
							z-index: 9999;
						}

						view {
							font-size: 36rpx;
							font-weight: bold;
							color: $base-color;
							z-index: 99999;

							&::after {
								content: '';
								display: block;
								width: 252rpx;
								height: 20rpx;
								margin-top: -12rpx;
								background: linear-gradient(360deg, #fff709 0%, rgba(255, 242, 40, 0) 100%);
							}
						}
					}

				}
			}
		}

	}

	.popShow {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;

		.popCon {
			position: relative;
			width: 634rpx;
			height: 766rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.content {
				position: absolute;
				top: 0;
				left: 0;

				.title {
					text-align: center;
					font-size: 40rpx;
					font-weight: bold;
					padding: 76rpx 0 38rpx;
				}

				.opear_btn {
					width: 100%;
					margin-top: 75rpx;

					view {
						width: 242rpx;
						text-align: center;
						height: 88rpx;
						border-radius: 44rpx;
						font-size: 32rpx;
						line-height: 88rpx;
						background: $base-line-bg;
						color: #fff;
					}

					view:first-child {
						background: #e9e9e9;
						color: #999;
					}
				}
			}
		}
	}

	.disagree {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;

		.dis_con {
			width: 568rpx;
			height: 270rpx;
			background: #fff;
			border-radius: 24rpx;
			text-align: center;

			>view:first-child {
				font-size: 32rpx;
				padding: 60rpx 0 40rpx;
			}

			>view:last-child {
				width: 100%;
				margin: 0 auto;
				width: 302rpx;
				text-align: center;
				height: 76rpx;
				line-height: 76rpx;
				color: #fff;
				background: $base-line-bg;
				opacity: 1;
				border-radius: 44rpx;
			}
		}
	}

	.poster {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;

		.pos_con {
			width: 80%;
			margin: 0 auto;
			height: 100%;
			position: relative;

			image {
				width: 572rpx;
				height: 940rpx;
			}

			.qr_code {
				position: absolute;
				top: 630rpx;
				left: 212rpx;

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

			.pos_info {
				position: absolute;
				bottom: 310rpx;
				left: 92rpx;

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

				.pos_info_con {
					view:first-child {
						font-size: 36rpx;
						font-weight: bold;
					}

					view {
						margin-bottom: 5rpx;
					}
				}
			}

			.iconfont {
				position: absolute;
				top: 2vh;
				right: -25rpx;
				color: #dedede;
				font-size: 60rpx;
				z-index: 999;
			}

			.sub_btn {
				margin-top: 76rpx;
			}
		}
	}

	.share_show {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;

		.share_con {
			width: 80%;
			margin: 0 auto;
			height: 100%;
			z-index: 999999;

			.canvas {
				width: 540rpx;
				height: 900rpx;
				position: relative;

				#canvas {
					width: 540rpx;
					height: 900rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.poster_img {
					-webkit-touch-callout: default;
					width: 100%;
					height: 100%;
					display: block;
				}

				img[src=''],
				img:not([src]) {
					opacity: 0;
				}
			}

			.save_img {
				color: #fff;
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				margin-top: 20rpx;
			}

			.iconfont {
				position: absolute;
				top: 4vh;
				right: 25rpx;
				color: #dedede;
				font-size: 60rpx;
				z-index: 999;
			}
		}

		.sub_btn {
			margin-top: 40rpx;
		}
	}
</style>