new-greemall-wxapp/packageGoods/pages/detail.vue

<template>
	<view class="app-container">
		<view class="recommender-container" v-if="isGroupbuyGoods && !isHeadUser">
			<view class="content">
				<image :src="detail.groupPic"></image>
				<view class="name ellipsis">{{ detail.groupUserName }}</view>
				<view>向你推荐</view>
			</view>
		</view>

		<!-- <no-data v-if="!isLoaded" :showText="'加载中'"></no-data> -->
		<no-data v-if="isLoaded && noData" :showText="'该商品已失效'"></no-data>
		<block v-if="isLoaded && !noData">
			<view class="swiper-container">
				<swiper @change="changeBanner">
					<swiper-item v-if="detail.vedio">
						<video id="video1" :src="detail.vedio" @play="playVideo" @pause="pauseVideo" controls loop
							:enable-progress-gesture="false" :muted="isFixedVideo"></video>
					</swiper-item>
					<block v-for="(item, index) in bannerList" :key="index" v-if="bannerList.length > 0">
						<swiper-item>
							<!-- <image :src="item.url" mode="aspectFill" @tap="previewImage(item.url)" ></image> -->
							<view class="image" @tap="previewImage(item.url)">
								<image :src="item.url" mode="aspectFill" class="img"></image>
								<image :src="detail.logo" mode="aspectFill" class="water"
									v-if="isShowWater && index == 0"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="nums" v-show="(detail.vedio && bannerCurrent != 0) || !detail.vedio">
					{{ bannerCurrent + 1 }}/{{
            bannerList.length + (detail.vedio ? 1 : 0)
          }}
				</view>
			</view>
			<view class="video-container" :class="isFixedVideo ? 'isFixed' : ''">
				<view class="content">
					<view class="close" @tap="closeFixedVideo">
						<image src="@/static/icon/close.png"></image>
					</view>
					<video id="video2" :src="detail.vedio" @error="videoErrorCallback" controls loop
						:enable-progress-gesture="false"></video>
				</view>
			</view>
			<view class="seckill-container" v-if="isSeckillGoods">
				<view class="price">
					<view class="price-1">¥{{ detail.goodsPrice | numToFixed }}</view>
					<view class="price-2">¥{{ detail.orgGoodsPrice | numToFixed }}</view>
				</view>
				<view class="right">
					<text>距结束还剩：</text>
					<view class="time">
						<text>{{ countdownTime[0] }}</text>时<text>{{ countdownTime[1] }}</text>分<text>{{ countdownTime[2] }}</text>秒
					</view>
				</view>
				<view class="clock">
					<image src="@/static/icon/clock.png"></image>
				</view>
			</view>
			<view class="main-container">
				<view class="title">{{ detail.goodsName }}</view>
				<view class="des">{{
          detail.describeText ? detail.describeText : ''
        }}</view>
				<view class="stock">
					<block v-if="!isSeckillGoods">
						<view class="left">
							<text>剩余{{ detail.stock }}件</text>
						</view>
					</block>
					<block v-if="isSeckillGoods">
						<view class="left">
							<text>剩余{{ detail.secStockNum }}件</text>
							<view class="progress-box">
								<progress :percent="(detail.secStockNum / detail.limitBuy) * 100" activeColor="#FF3F42"
									active stroke-width="6" />
							</view>
						</view>
						<view class="right" @tap="isOpen = !isOpen" v-if="
                (isServiceUser && !isGroupbuyGoods) ||
                (isHeadUser && isGroupbuyGoods)
              ">
							<text>{{ isOpen ? '收起' : '展开' }}</text>
							<image :src="
                  isOpen
                    ? '../../static/icon/arrow_2.png'
                    : '../../static/icon/arrow_1.png'
                "></image>
						</view>
					</block>
				</view>
				<view class="price" v-if="!isSeckillGoods">
					<view class="left">
						<view class="price-1">¥{{ detail.goodsPrice | numToFixed }}</view>
						<view class="price-2">¥{{ detail.orgGoodsPrice | numToFixed }}</view>
					</view>
					<view class="right" @tap="isOpen = !isOpen" v-if="
              (isServiceUser && !isGroupbuyGoods) ||
              (isHeadUser && isGroupbuyGoods)
            ">
						<text>{{ isOpen ? '收起' : '展开' }}</text>
						<image :src="
                isOpen
                  ? '../../static/icon/arrow_2.png'
                  : '../../static/icon/arrow_1.png'
              "></image>
					</view>
				</view>
				<view class="bottom" v-if="isOpen">
					<view v-if="isHeadUser && isGroupbuyGoods">团长分佣金额</view>
					<view v-else>分享可获得收益</view>
					<view>￥{{ commission | numToFixed
            }}{{ detail.goodsSpecs.length > 1 ? '起' : '' }}</view>
				</view>
			</view>
			<view class="line-container">
				<view v-if="
            accountInfo.miniProgram &&
            accountInfo.miniProgram.appId !== 'wxf89d330c7b0e718d'
          ">运费：包邮</view>
				<view>销量：<text>{{ detail.soldNum }}</text></view>
			</view>

			<view class="evaluate-container" v-if="evaluateList.length">
				<view class="title">商品评价</view>
				<view class="list">
					<view class="item" :class="evaluateList.length === 1 ? 'onlyOne' : ''"
						v-for="(item, index) in evaluateList">
						<view class="top">
							<view class="user">
								<image :src="item.avatar" mode="aspectFill" v-if="item.avatar.indexOf('http') >= 0">
								</image>
								<image :src="imageUrl + item.avatar" mode="aspectFill" v-else></image>
								<view class="name ellipsis">{{ item.userName }}</view>
							</view>
							<view class="date">{{ item.createTime }}</view>
						</view>
						<view class="rate">
							<view class="it"><text>商品质量</text><uni-rate :size="14" :margin="4"
									:value="item.commentGoods" color="#fff" active-color="#FE781F" :readonly="true" />
							</view>
							<view class="it"><text>服务质量</text><uni-rate :size="14" :margin="4"
									:value="item.commentService" color="#fff" active-color="#FE781F" :readonly="true" />
							</view>
							<view class="it"><text>配送质量</text><uni-rate :size="14" :margin="4"
									:value="item.commentExpress" color="#fff" active-color="#FE781F" :readonly="true" />
							</view>
						</view>
						<view class="tags">
							<view class="it" v-for="(it, idx) in item.tags">{{ it }}</view>
						</view>
						<view class="content">{{ item.content }}</view>
						<view class="images" v-if="item.imgs && item.imgs.length > 0">
							<image v-for="(it, idx) in item.imgs" :src="it" @tap="previewEvaluateImage(it, item.imgs)">
							</image>
						</view>
					</view>
				</view>
				<view class="more">
					<view class="btn" @tap="toAllEvaluate">查看全部评价</view>
				</view>
			</view>

			<view class="detail-container">
				<view class="title">商品详情</view>
				<view class="content" v-if="detail.pubCommonTemplate">
					<u-parse :content="detail.pubCommonTemplate.content"></u-parse>
				</view>
				<view class="content" v-if="detail.commonTemplate">
					<u-parse :content="detail.commonTemplate.content"></u-parse>
				</view>
				<view class="content">
					<u-parse :content="detail.content"></u-parse>
				</view>
			</view>
			<view class="bottom-container">
				<view class="left">
					<view class="item" @tap="clickShare">
						<image src="@/static/icon/share.png"></image>
						<text>分享</text>
					</view>
					<view class="item" @tap="handleCollect" v-if="!isGroupbuyGoods && !isPackageGoods">
						<block v-if="detail.favorite">
							<image src="@/static/icon/collect2.png"></image>
							<text>已收藏</text>
						</block>
						<block v-else>
							<image src="@/static/icon/collect.png"></image>
							<text>收藏</text>
						</block>
					</view>
					<view class="item" @tap="toCart">
						<image src="@/static/icon/cart2.png"></image>
						<text>购物车</text>
						<view class="dot" v-if="cartCount > 0">{{
              cartCount <= 99 ? cartCount : '99+'
            }}</view>
					</view>
				</view>
				<view class="right" v-if="!isSeckillGoods && !isGroupbuyGoods && !isPackageGoods">
					<view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
					<view class="button buy" @tap="clickCartOrBuy(2)">立即购买</view>
				</view>
				<view class="right" v-if="!isSeckillGoods && isGroupbuyGoods">
					<view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
					<view class="button buy" @tap="clickCartOrBuy(4)">立即拼团</view>
				</view>
				<view class="right" v-if="isSeckillGoods">
					<view class="button cart" @tap="clickCartOrBuy(1)">加入购物车</view>
					<view class="button buy" @tap="clickCartOrBuy(3)">马上抢购</view>
				</view>
				<view class="right" v-if="isPackageGoods">
					<view class="button buy" @tap="clickPackageBuy()">立即购买</view>
				</view>
			</view>

			<u-popup :round="10" :closeable="true" :show="isBuyDialog" @close="isBuyDialog = false">
				<view class="cart-container">
					<view class="main">
						<image :src="specList[specCurrent].imgUrl"></image>
						<view class="right">
							<view class="title ellipsis-2">{{ detail.goodsName }}</view>
							<block v-if="isGroupbuyGoods">
								<view class="price">
									<view class="price-1">¥{{ specList[specCurrent].price }}</view>
									<view class="price-2">¥{{ specList[specCurrent].orgPrice }}</view>
								</view>
								<view class="stock">剩余{{ specList[specCurrent].stockNum }}件</view>
							</block>
							<block v-else-if="isSeckillGoods">
								<view class="price">
									<view class="price-1">¥{{ specList[specCurrent].secPrice }}</view>
									<view class="price-2">¥{{ specList[specCurrent].price }}</view>
								</view>
								<view class="stock">剩余{{ detail.secStockNum }}件</view>
							</block>
							<block v-else>
								<view class="price">
									<view class="price-1">¥{{ specList[specCurrent].price }}</view>
									<view class="price-2">¥{{ detail.orgGoodsPrice }}</view>
								</view>
								<view class="stock">剩余{{ specList[specCurrent].stockNum }}件</view>
							</block>
						</view>
					</view>
					<view class="attr">
						<view class="title">已选属性</view>
						<view class="list">
							<block v-for="(item, index) in specList" :key="index">
								<view class="item" @tap="changeSpec(index)"
									:class="specCurrent == index ? 'current' : ''">{{ item.name }}-{{ item.specValue }}
								</view>
							</block>
						</view>
					</view>
					<view class="num">
						<view class="title">购买数量</view>
						<u-number-box v-model="buyNum" :min="1" :buttonSize="26" iconStyle="font-size: 12px;">
						</u-number-box>
					</view>
					<view class="button" v-if="dialogType == 1" @tap="addToCart">加入购物车</view>
					<view class="button" v-if="dialogType == 2" @tap="nowBuy">立即购买</view>
					<view class="button" v-if="dialogType == 3" @tap="rushBuy">马上抢购</view>
					<view class="button" v-if="dialogType == 4" @tap="nowBuy">马上拼团</view>
				</view>
			</u-popup>

			<u-popup :round="10" :closeable="false" :show="isShareDialog" @close="isShareDialog = false">
				<view class="sharelist-container">
					<button class="item" open-type="share" @tap="isShareDialog = false">
						<image src="@/static/icon/wechat.png"></image>
						<text>分享给微信好友</text>
					</button>

					<view class="item" @tap="markImage">
						<image src="@/static/icon/image.png"></image>
						<text>生成图片分享</text>
					</view>
				</view>
			</u-popup>

			<view class="global-mask" v-show="isShowCanvas" @tap="closeCanvas"></view>
			<view class="canvas-container" v-show="isShowCanvas">
				<view class="content">
					<canvas style="width: 300px; height: 520px" canvas-id="myCanvas" id="myCanvas"></canvas>
				</view>
				<view class="button"><text @tap="saveImage">保存图片</text></view>
			</view>

			<u-popup :round="10" :closeable="true" :show="isPackageDialog" @close="isPackageDialog = false">
				<view class="package-container">
					<view class="main">
						<view class="group" v-for="(item, index) in packageList" :key="index">
							<view class="title">请选择商品{{ item.num }}件</view>
							<view class="goods-list">
								<view class="item" v-for="(it, idx) in item.goodsList" :key="idx">
									<image :src="it.imgUrl"></image>
									<view class="right">
										<view class="name ellipsis-2">{{ it.goodsName }}</view>
										<view class="des">{{ it.specValue }}</view>
										<view class="bottom">
											<view class="price">
												<view class="price-1">¥{{ it.price | numToFixed }}</view>
												<view class="price-2">¥{{ it.orgPrice | numToFixed }}</view>
											</view>

											<u-number-box v-model="it.num" :min="0" :max="it.limitNum" :buttonSize="26"
												iconStyle="font-size: 12px;">
											</u-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="button" @tap="packageBuy()">立即购买</view>
				</view>
			</u-popup>

			<u-popup :round="10" :show="isShowPhoneDialog">
				<view class="phone-dialog">
					<view class="content">
						<view>申请获取以下权限</view>
						<text>获得你的公开信息(手机号码)</text>
					</view>
					<view class="btn">
						<button @tap="isShowPhoneDialog = false">取消</button>
						<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
							确定授权
						</button>
					</view>
				</view>
			</u-popup>
		</block>

		<canvas style="
        width: 800px;
        height: 800px;
        z-index: -1;
        position: fixed;
        bottom: -1000px;
        right: -1000px;
      " canvas-id="myCanvas22" id="myCanvas22"></canvas>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		base64src
	} from '@/utils/base.js';
	import {
		appId
	} from '@/utils/config.js';
	import {
		uploadImg
	} from '@/api/axios.js';
	export default {
		data() {
			return {
				isShowPhoneDialog: false,
				imageUrl: this.$imageUrl,
				configInfo: uni.getStorageSync('configInfo'),
				isLoaded: false,
				noData: true,
				goodsId: null, // 商品id
				detail: {}, // 商品详情
				commission: 0, // 分佣金额
				bannerList: [], // 轮播图列表
				bannerCurrent: 0, // 轮播图当前值
				specList: [], // 规格列表
				specCurrent: 0, // 规格当前值
				isOpen: false, // 是否展开
				isBuyDialog: false, // 是否显示购买/加入购物车弹窗
				dialogType: 1, // 弹窗类型: 1加入购物车，2立即购买，3秒杀抢购
				isShareDialog: false, // 是否显示分享弹窗
				isShowCanvas: false, // 是否显示海报弹窗
				buyNum: 1, // 购买/加入购物车 数量
				isSeckillGoods: false, // 是否秒杀商品
				isGroupbuyGoods: false, // 是否团购商品
				isPackageGoods: false, // 是否套购商品
				isPackageDialog: false, // 是否显示套购购买弹窗
				packageList: [], // 套购选择列表
				cartCount: 0, // 购物车内商品数
				isFinishCanvas: false, // 是否已完成海报
				codeUrl: '', // 商品码
				videoContext1: '', // 视频对象
				videoContext2: '', // 视频对象
				isFixedVideo: false, // 是否显示视频弹窗
				isPlayVideo: false, // 视频是否播放中
				isCloseMyself: false, // 是否亲自关闭视频弹窗
				countdownTime: '', // 倒计时
				endHour: 0, // 倒计时结束时间
				evaluateList: [],
				isShowWater: false,
				accountInfo: {},
			};
		},
		computed: {
			...mapState(['userInfo', 'isLogin', 'userId']),

			isHeadUser() {
				// 是否团长
				return this.userInfo.promotionGroupLeader;
			},
			isServiceUser() {
				// 是否业务员
				return this.userInfo.type === 'SERVICE';
			},
		},
		watch: {
			countdownTime() {
				if (
					this.countdownTime[0] == 0 &&
					this.countdownTime[1] == 0 &&
					this.countdownTime[2] == 0
				) {
					this.getDetail();
				}
			},
		},
		onPageScroll(res) {
			if (
				res.scrollTop > 300 &&
				this.isPlayVideo &&
				!this.isCloseMyself &&
				this.detail.vedio
			) {
				this.isFixedVideo = true;
				this.videoContext2.play();
			} else {
				this.isFixedVideo = false;
				this.videoContext2.pause();
			}
			if (res.scrollTop < 300) {
				this.isCloseMyself = false;
			}
		},
		onLoad({
			id
		}) {
			this.accountInfo = uni.getAccountInfoSync();
			this.goodsId = id;
			this.getDetail();
			this.getEvaluateList();
			this.getCartCount();
			uni.showLoading({
				title: '加载中',
			});
		},
		onShow() {
			this.isBuyDialog = false;
		},
		onReady() {
			this.videoContext1 = uni.createVideoContext('video1');
			this.videoContext2 = uni.createVideoContext('video2');
		},
		async onShareAppMessage(options) {
			if (options && options.from == 'button') {
				// 来自页面内的转发按钮
			} else {
				// 点击微信右上角的分享按钮
			}
			return {
				title: '分享商品「' + this.detail.goodsName + '」',
				imageUrl: await this.markImage222(),
				path: '/pages/index/index?goodsId=' +
					this.goodsId +
					'&serviceId=' +
					this.userId,
				query: {
					// id: this.goodsId,
				},
				success: function(res) {
					if (res.errMsg == 'shareAppMessage:ok') {
						this.$successToast('分享完成');
					}
				},
			};
		},
		methods: {
			// 获取手机号
			getPhoneNumber(e) {
				if (e?.detail?.iv && e?.detail?.encryptedData) {
					this.$axios({
						url: '/user/mobile/grant',
						params: {
							userId: this.userId,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData,
						},
					}).then((res) => {
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('isActiveLogout', false);
						this.isShowPhoneDialog = false;
						this.$getUserInfo();
					});
				}
			},
			// 获取详情
			getDetail() {
				this.$axios({
						url: '/goods/detail',
						method: 'get',
						params: {
							goodsId: this.goodsId,
							userId: this.userId,
						},
					})
					.then((res) => {
						this.detail = res.data;
						this.noData = false;
						this.isLoaded = true;
						// 团购
						this.isGroupbuyGoods = res.data.promotionGroup;
						// 秒杀
						this.isSeckillGoods = res.data.secType;
						this.endHour = res.data.endHour;
						this.countTime();
						// 套购
						this.isPackageGoods = res.data.goodsType === 'PACKAGE';

						this.bannerList = res.data.images;
						this.specList = res.data.goodsSpecs;
						this.specCurrent = 0;

						if (!this.isPackageGoods) {
							let commissionList = [];
							this.specList.forEach((item, index) => {
								item.price = item.price.toFixed(2);
								item.orgPrice = item.orgPrice.toFixed(2);
								commissionList.push(item.shareAmount);
							});
							this.commission = Math.min(...commissionList);
						} else {
							this.commission = res.data.shareAmount;
						}

						// 水印
						if (res.data.logo && res.data.logoStartTime) {
							this.isShowWater = this.$compareTime(
								res.data.logoStartTime,
								res.data.logoEndTime
							);
						} else {
							this.isShowWater = false;
						}
						this.markImage222(false);
					})
					.catch((res) => {
						this.noData = true;
						this.isLoaded = true;
					})
					.finally((res) => {
						uni.hideLoading();
					});
			},

			// 获取评价列表
			getEvaluateList() {
				this.$axios({
					url: '/order/comment/goods',
					method: 'get',
					params: {
						pageNo: 1,
						pageSize: 5,
						goodsId: this.goodsId,
					},
				}).then((res) => {
					this.evaluateList = res.data.records;
				});
			},

			// 查询结束时间
			checkEndTime(val) {
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				// dd = val == 10 ? dd + 1 : dd;

				// 每月有多少天
				let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
				if ((yy % 4 == 0 && yy % 100 != 0) || yy % 400 == 0) {
					days[1] = 29;
				}

				// 如果结束时间=10（表示第二天10点），dd需加一天
				if (val == 10) {
					if (dd >= days[mm - 1]) {
						mm = mm + 1;
					} else {
						dd = dd + 1;
					}
				}

				let date = yy + '/' + mm + '/' + dd;
				let dateTime = date + ' ' + val + ':00:00';
				return dateTime;
			},

			// 计算倒计时
			countTime() {
				let endDateTime = this.checkEndTime(this.endHour);
				var nowtime = new Date(), //获取当前时间
					endtime = new Date(endDateTime); //定义结束时间
				var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					hh = Math.floor(lefttime / (1000 * 60 * 60)), //计算小时数
					mm = Math.floor((lefttime / (1000 * 60)) % 60), //计算分钟数
					ss = Math.floor((lefttime / 1000) % 60); //计算秒数
				function checkTime(i) {
					if (i < 10) {
						i = '0' + i;
					}
					return i;
				}
				setTimeout(() => {
					this.countTime();
				}, 1000);
				this.countdownTime = [checkTime(hh), checkTime(mm), checkTime(ss)];
			},

			// 获取商品二维码
			getGoodsCode(success) {
				const that = this;
				this.$axios({
					url: '/goods/qrcode',
					method: 'get',
					params: {
						goodsId: this.goodsId,
						userId: this.userId,
					},
				}).then((res) => {
					// this.codeUrl = 'data:image/jpeg;base64,' + res.data;
					that.codeUrl = res.data;
					console.log(this.codeUrl, typeof success);
					if (typeof success === 'function') {
						success();
					}
				});
			},

			// 视频播放
			playVideo(e) {
				this.isPlayVideo = true;
			},

			// 视频暂停
			pauseVideo(e) {
				this.isPlayVideo = false;
			},

			// 关闭视频弹窗
			closeFixedVideo() {
				this.isFixedVideo = false;
				this.isCloseMyself = true;
				this.videoContext2.pause();
			},

			// 从个人信息获取购物车商品数量
			getCartCount() {
				this.$axios({
					url: '/user/user/detail',
					method: 'get',
					params: {
						userId: this.userId,
					},
				}).then((res) => {
					this.cartCount = res.data.shoppingCartNums;

					if (!res.data.openId) {
						return uni.navigateTo({
							url: '/pages/login/index?isNotOpenid=' + true,
						});
					}
				});
			},

			// 查看所有评价
			toAllEvaluate() {
				uni.navigateTo({
					url: '/packageGoods/pages/evaluate?goodsId=' + this.goodsId,
				});
			},

			// 收藏/取消收藏
			handleCollect() {
				if (!this.isLogin) {
					return uni.navigateTo({
						url: '/pages/login/index',
					});
				}
				if (!this.detail.favorite) {
					this.$axios({
						url: '/goods/favorite/add',
						params: {
							goodsId: this.goodsId,
							userId: this.userId,
						},
					}).then((res) => {
						this.$successToast('收藏成功');
						this.getDetail();
					});
				} else {
					this.$axios({
						url: '/goods/favorite/detail/del',
						params: {
							goodsId: this.goodsId,
							userId: this.userId,
						},
					}).then((res) => {
						this.$successToast('取消收藏成功');
						this.getDetail();
					});
				}
			},

			// 切换图片
			changeBanner(e) {
				this.bannerCurrent = e.detail.current;
				if (this.bannerCurrent > 0 && this.detail.vedio) {
					this.videoContext1.pause();
				}
			},

			// 预览图片
			previewImage(url) {
				let imgs = [];
				this.bannerList.forEach((item, index) => {
					imgs.push(item.url);
				});
				uni.previewImage({
					urls: imgs,
					current: url,
				});
			},

			// 预览评价图片
			previewEvaluateImage(url, imgs) {
				uni.previewImage({
					urls: imgs,
					current: url,
				});
			},

			// 点击分享
			clickShare() {
				if (!this.isLogin) {
					return uni.navigateTo({
						url: '/pages/login/index',
					});
				}
				// this.getGoodsCode();
				this.isShareDialog = true;
			},

			// 点击加入购物车/立即购买
			clickCartOrBuy(type) {
				if (!this.isLogin) {
					return uni.navigateTo({
						url: '/pages/login/index',
					});
				}
				this.dialogType = type;
				this.isBuyDialog = true;
			},

			// 切换规格
			changeSpec(index) {
				this.specCurrent = index;
			},

			// 加入购物车
			addToCart() {
				if (this.specList[this.specCurrent].stockNum == 0) {
					return this.$toast('该规格库存不足');
				}
				this.$axios({
					url: '/shpping/cart/add/one',
					type: 'application/json',
					params: {
						userId: this.userId,
						buyGoods: [{
							goodsId: this.goodsId,
							goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
							num: this.buyNum,
							secKillId: this.detail.secKillId || '',
							promotionGroupId: this.detail.promotionGroupId || '',
						}, ],
					},
					isLoading: 1,
				}).then((res) => {
					this.$successToast('添加成功');
					this.getCartCount();
					this.isBuyDialog = false;
				});
			},

			// 立即购买
			nowBuy() {
				if (this.specList[this.specCurrent].stockNum == 0) {
					return this.$toast('该规格库存不足');
				}
				if (!this.userInfo.mobile) {
					this.isShowPhoneDialog = true;
					return;
				}
				let buyList = [{
					goodsId: this.goodsId,
					goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
					num: this.buyNum,
					secKillId: this.detail.secKillId || '',
					promotionGroupId: this.detail.promotionGroupId || '',
				}, ];
				let url = '/packageGoods/pages/order?buyList=' + JSON.stringify(buyList);
				if (this.detail.promotionGroupId) {
					url = url + '&groupbuyId=' + this.detail.promotionGroupId;
				}
				uni.navigateTo({
					url,
				});
			},

			// 马上抢购（秒杀）
			rushBuy() {
				if (this.detail.secStockNum == 0) {
					return this.$toast('该规格库存不足');
				}
				if (!this.userInfo.mobile) {
					this.isShowPhoneDialog = true;
					return;
				}
				this.$axios({
					url: '/goods/sec/kill/start',
					method: 'post',
					params: {
						secKillId: this.detail.secKillId,
					},
				}).then((res) => {
					if (res.data) {
						let buyList = [{
							goodsId: this.goodsId,
							goodsSpecId: this.specList[this.specCurrent].goodsSpecId,
							num: this.buyNum,
							secKillId: this.detail.secKillId || '',
							promotionGroupId: this.detail.promotionGroupId || '',
						}, ];
						uni.navigateTo({
							url: '/packageGoods/pages/order?buyList=' +
								JSON.stringify(buyList) +
								'&secKillId=' +
								this.detail.secKillId +
								'&secKillSpecId=' +
								this.detail.secKillSpecId +
								'&secToken=' +
								res.data,
						});
					} else {
						this.$toast('活动异常');
					}
				});
			},

			// 去购物车页面
			toCart() {
				uni.switchTab({
					url: '/pages/cart/index',
				});
			},

			// 打开套购购买弹窗
			clickPackageBuy() {
				this.packageList = [];
				this.$axios({
					url: '/goods/package/choice',
					method: 'get',
					params: {
						goodsId: this.goodsId,
					},
				}).then((res) => {
					let goodsList = res.data;
					for (let i = 0; i < goodsList.length; i++) {
						for (let j = 0; j < goodsList[i].length; j++) {
							goodsList[i][j].num = 0;
						}
					}
					let pops = this.detail.packagePop.split(':');
					pops.forEach((item, index) => {
						this.packageList.push({
							num: item,
							goodsList: goodsList[index],
						});
					});
					console.log(this.packageList);
					this.isPackageDialog = true;
				});
			},

			// 套购购买
			packageBuy() {
				if (!this.userInfo.mobile) {
					this.isShowPhoneDialog = true;
					return;
				}
				let buyList = [];
				for (let i = 0; i < this.packageList.length; i++) {
					for (let j = 0; j < this.packageList[i].goodsList.length; j++) {
						if (this.packageList[i].goodsList[j].num > 0) {
							buyList.push({
								goodsId: this.packageList[i].goodsList[j].goodsId,
								goodsSpecId: this.packageList[i].goodsList[j].goodsSpecId,
								popType: this.packageList[i].goodsList[j].type,
								num: this.packageList[i].goodsList[j].num,
							});
						}
					}
				}
				uni.navigateTo({
					url: '/packageGoods/pages/order?buyList=' +
						JSON.stringify(buyList) +
						'&packageId=' +
						this.detail.goodsId,
				});
			},

			// 分享
			share() {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 5,
					summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					},
				});
			},

			async markImage222(bool = true) {
				return new Promise((r) => {
					if (
						this.detail.logo &&
						this.detail.imgUrl &&
						this.$compareTime(this.detail.logoStartTime, this.detail.logoEndTime)
					) {
						if (!!this.detail.mergeImage) {
							r(this.detail.mergeImage);
						} else {
							if (bool) {
								uni.showLoading({
									title: '图片生成中',
								});
							}
							this.getGoodsCode(() => {
								let img = this.detail.imgUrl;
								let logo = this.detail.logo;
								var ctx = uni.createCanvasContext('myCanvas22');
								ctx.rect(0, 0, 800, 800);
								ctx.setFillStyle('#FFFFFF');
								ctx.fill();
								ctx.stroke();
								uni.downloadFile({
									url: img,
									success: (res) => {
										ctx.drawImage(res.tempFilePath, 0, 0, 800, 800);
										uni.downloadFile({
											url: logo,
											success: (res2) => {
												ctx.drawImage(res2
													.tempFilePath, 0, 0,
													800, 800);
												ctx.draw();
												uni.canvasToTempFilePath({
													x: 0,
													y: 0,
													width: 800,
													height: 800,
													canvasId: 'myCanvas22',
													success: (
														res33) => {
														uploadImg({
																path: res33
																	.tempFilePath,
															})
															.then((
																data
																) => {
																this.$axios({
																		url: '/goods/update/mergeImage',
																		method: 'post',
																		params: {
																			goodsId: this
																				.goodsId,
																			imgUrl: data
																				.url,
																		},
																	})
																	.then(
																		(
																			res
																			) => {
																			if (
																				bool
																				) {
																				uni
																					.hideLoading();
																				this
																					.getDetail();
																			}
																			r(res
																				.data
																				);
																		}
																	);
															});
													},
												});
											},
										});
									},
								});
							});
						}
					} else {
						r(this.detail.imgUrl);
					}
				});
			},

			// 生成图片
			markImage() {
				this.isShareDialog = false;
				this.isShowCanvas = true;

				if (this.isFinishCanvas) {
					return false;
				}

				uni.showLoading({
					title: '海报生成中',
				});

				// 调用获取二维图接口后执行匿名函数
				this.getGoodsCode(() => {
					let img = this.detail.imgUrl;
					let logo = this.detail.logo;
					let title = this.detail.goodsName;
					let des = this.detail.describeText;
					let price1 = this.detail.goodsPrice;
					let price2 = this.detail.orgGoodsPrice;
					let sales = this.detail.soldNum;
					// let code = this.codeUrl;
					// base64src(this.codeUrl , resCurrent => {
					// 	code = resCurrent;
					// })

					var ctx = uni.createCanvasContext('myCanvas');

					/**
					 * @param {Object} str 要绘制的字符串
					 * @param {Number} initX 绘制字符串起始x坐标
					 * @param {Number} initY 绘制字符串起始y坐标
					 * @param {Number} lineHeight 字行高
					 */
					function canvasTextAutoLine(str, initX, initY, lineHeight) {
						var lineWidth = 0;
						var canvasWidth = 260;
						var lastSubStrIndex = 0;
						var lineNum = 0;
						var state = true;
						for (let i = 0; i < str.length; i++) {
							lineWidth += ctx.measureText(str[i]).width;
							if (lineWidth > canvasWidth && lineNum < 1) {
								ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
								initY += lineHeight;
								lineWidth = 0;
								lastSubStrIndex = i;
								lineNum++;
							} else if (lineWidth > canvasWidth && lineNum < 2) {
								ctx.fillText(
									str.substring(lastSubStrIndex + 2, i) + '...',
									initX,
									initY
								);
								lineNum++;
								state = false;
							}
							if (i == str.length - 1 && state) {
								ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
							}
						}
					}

					// 白色背景
					ctx.rect(0, 0, 300, 520);
					ctx.setFillStyle('#FFFFFF');
					ctx.fill();
					ctx.stroke();

					// 商品名称
					ctx.setFontSize(14);
					ctx.setFillStyle('#333333');
					canvasTextAutoLine(title, 20, 300, 18);

					// 商品描述
					if (des) {
						ctx.setFontSize(12);
						ctx.setFillStyle('#999999');
						canvasTextAutoLine(des, 20, 336, 16);
					}

					// 现价
					ctx.setFontSize(16);
					ctx.setFillStyle('#FF3F42');
					ctx.fillText('¥' + price1, 20, 380);

					// 原价
					ctx.setFontSize(13);
					ctx.setFillStyle('#666666');
					ctx.fillText('¥' + price2, 20, 396);
					ctx.setStrokeStyle('#666666');
					ctx.moveTo(20, 392);
					ctx.lineTo(ctx.measureText('¥' + price2).width + 20, 392);
					ctx.stroke();

					// 销量
					ctx.setFontSize(12);
					ctx.setFillStyle('#666666');
					ctx.fillText(
						'销量：' + sales,
						260 - ctx.measureText('销量：' + sales).width + 20,
						380
					);

					// 二维码
					// ctx.drawImage(code, 110, 404, 80, 80)

					// 提示
					ctx.setFontSize(12);
					ctx.setFillStyle('#FE781F');
					ctx.fillText('打开微信扫描识别查看商品', 78, 500);
					// 图片
					uni.downloadFile({
						url: img,
						success: (res) => {
							ctx.drawImage(res.tempFilePath, 20, 20, 260, 260);
							// 二维码
							uni.downloadFile({
								url: this.codeUrl,
								success: (res) => {
									ctx.drawImage(res.tempFilePath, 110, 404, 80, 80);
									if (this.isShowWater) {
										uni.downloadFile({
											url: logo,
											success: (res2) => {
												ctx.drawImage(res2
													.tempFilePath, 20, 20,
													260, 260);
												ctx.draw();
												uni.hideLoading();
												this.isFinishCanvas = true;
											},
										});
									} else {
										console.log('生成画布成功');
										ctx.draw();
										uni.hideLoading();
										this.isFinishCanvas = true;
									}
								},
							});
						},
					});
				});
			},

			// 保存图片
			saveImage() {
				let that = this;
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 300,
					height: 520,
					canvasId: 'myCanvas',
					success: function(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								that.$successToast('保存成功');
							},
						});
					},
				});
			},

			// 关闭canvas
			closeCanvas() {
				this.isShowCanvas = false;
				uni.hideLoading();
			},
		},
	};
</script>

<style lang="scss">
	.app-container {
		background: #f4f2f2;
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}

	.recommender-container {
		position: fixed;
		top: 20rpx;
		left: 0;
		z-index: 99;
		display: flex;
		justify-content: center;
		width: 100%;

		.content {
			font-size: 28rpx;
			color: #ffffff;
			background: rgba($color: #000000, $alpha: 0.8);
			display: flex;
			padding: 0 15rpx;
			height: 60rpx;
			border-radius: 60rpx;
			justify-content: center;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				display: block;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.name {
				max-width: 160rpx;
				margin-right: 6rpx;
			}
		}
	}

	.swiper-container {
		position: relative;

		swiper {
			height: 750rpx;
		}

		.image {
			width: 750rpx;
			height: 750rpx;
			display: block;
			margin: 0 auto;
			overflow: hidden;
			position: relative;

			.img {
				width: 750rpx;
				height: 750rpx;
				display: block;
			}

			.water {
				width: 750rpx;
				height: 750rpx;
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}
		}

		// image {
		// 	height: 750rpx;
		// 	width: 750rpx;
		// 	display: block;
		// 	margin: 0 auto;
		// 	overflow: hidden;
		// }
		video {
			height: 750rpx;
			width: 750rpx;
			display: block;
			margin: 0 auto;
			overflow: hidden;
		}

		.nums {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			background: rgba($color: #000000, $alpha: 0.2);
			border-radius: 8rpx;
			line-height: 48rpx;
			padding: 0 12rpx;
			font-size: 28rpx;
			color: #ffffff;
		}
	}

	.video-container {
		position: fixed;
		right: 20rpx;
		bottom: 300rpx;
		z-index: -99;

		&.isFixed {
			z-index: 99;
		}

		.content {
			position: relative;
		}

		video {
			height: 200rpx;
			width: 375rpx;
		}

		.close {
			position: absolute;
			right: 0;
			top: 0;
			z-index: 100;
			background: rgba($color: #000000, $alpha: 0.4);
			padding: 10rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				display: block;
			}
		}
	}

	.seckill-container {
		height: 120rpx;
		background: linear-gradient(-90deg, rgba(255, 37, 118, 1) 0%, #ff5648 100%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		position: relative;

		.clock {
			position: absolute;
			right: 220rpx;
			top: 20rpx;

			image {
				width: 74rpx;
				height: 72rpx;
				display: block;
			}
		}

		.price-1 {
			font-size: 40rpx;
			color: #ffffff;
			line-height: 44rpx;
		}

		.price-2 {
			font-size: 28rpx;
			line-height: 32rpx;
			color: #dddddd;
			text-decoration: line-through;
		}

		.right {
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				font-size: 24rpx;
				color: #ffffff;
			}

			.time {
				font-size: 24rpx;
				color: #ffffff;
				display: flex;
				align-items: center;
				margin-top: 6rpx;

				text {
					width: 40rpx;
					height: 40rpx;
					background: #ffffff;
					border-radius: 4rpx;
					color: #ff2775;
					font-size: 24rpx;
					line-height: 40rpx;
					text-align: center;
					margin: 0 4rpx;
				}
			}
		}
	}

	.main-container {
		background: #ffffff;
		padding: 20rpx 20rpx 0;

		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 40rpx;
			font-weight: 600;
		}

		.des {
			font-size: 24rpx;
			color: #999999;
			line-height: 28rpx;
			margin-top: 8rpx;
		}

		.stock {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-top: 20rpx;
			padding-bottom: 20rpx;

			.left {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #666666;
				}

				.progress-box {
					width: 140rpx;
					border-radius: 6px;
					overflow: hidden;
					margin-left: 10rpx;
				}
			}

			.right {
				font-size: 28rpx;
				color: #999999;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
					display: block;
					margin-left: 10rpx;
				}
			}
		}

		.price {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			// margin-top: 10rpx;
			padding-bottom: 20rpx;

			.left {
				display: flex;
				flex-direction: column;
			}

			.price-1 {
				font-size: 32rpx;
				color: #ff3f42;
				line-height: 36rpx;
			}

			.price-2 {
				font-size: 26rpx;
				color: #666666;
				line-height: 30rpx;
				text-decoration: line-through;
			}

			.right {
				font-size: 28rpx;
				color: #999999;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
					display: block;
					margin-left: 10rpx;
				}
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 76rpx;
			border-top: 1px solid #eaeaea;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.line-container {
		background: #ffffff;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		font-size: 28rpx;
		color: #333333;
		padding: 0 20rpx;

		text {
			color: #fe781f;
		}
	}

	.detail-container {
		background: #ffffff;
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 88rpx;
			text-align: center;
			font-weight: 600;
		}

		.content {
			image {
				width: 100%;
			}
		}
	}

	.evaluate-container {
		background: #ffffff;
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 88rpx;
			text-align: center;
			font-weight: 600;
		}

		.list {
			display: flex;
			overflow-x: scroll;
			padding: 0 20rpx;

			.item {
				width: 650rpx;
				padding-right: 30rpx;
				flex-shrink: 0;

				&:last-child {
					padding-right: 20rpx;
				}

				&.onlyOne {
					width: 710rpx;
				}

				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.user {
						display: flex;
						align-items: center;

						image {
							width: 80rpx;
							height: 80rpx;
							display: block;
							border-radius: 50%;
							margin-right: 20rpx;
						}

						.name {
							font-size: 28rpx;
							color: #333333;
							width: 250rpx;
						}
					}

					.date {
						font-size: 28rpx;
						color: #999999;
					}
				}

				.rate {
					margin-top: 14rpx;

					.it {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #666666;
						margin-top: 5rpx;

						&>text {
							margin-right: 10rpx;
						}
					}
				}

				.tags {
					display: flex;
					flex-wrap: wrap;

					.it {
						line-height: 44rpx;
						padding: 0 15rpx;
						border: 1px solid #eaeaea;
						border-radius: 44rpx;
						font-size: 24rpx;
						margin-right: 14rpx;
						margin-top: 14rpx;
						color: #666666;
					}
				}

				.content {
					font-size: 28rpx;
					color: #333333;
					margin-top: 14rpx;
				}

				.images {
					display: flex;
					flex-wrap: wrap;
					margin-top: 14rpx;

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

		.more {
			display: flex;
			justify-content: center;
			padding: 10rpx 0 30rpx;

			.btn {
				width: 220rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				border-radius: 68rpx;
				border: 1px solid #eaeaea;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}

	.bottom-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-top: 1px solid #eaeaea;

		.left {
			display: flex;
			width: 280rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 40rpx;
				position: relative;
				width: 66rpx;

				&:last-child {
					margin-right: 0;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					display: block;
				}

				text {
					font-size: 22rpx;
					color: #333333;
					margin-top: 4rpx;
				}

				.dot {
					position: absolute;
					right: -4rpx;
					top: -8rpx;
					background: #ff3f42;
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					text-align: center;
					border-radius: 32rpx;
					font-size: 20rpx;
					color: #ffffff;
				}
			}
		}

		.right {
			display: flex;

			.button {
				width: 190rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 80rpx;
				font-size: 28rpx;
				color: #ffffff;

				&.cart {
					background: #fe781f;
				}

				&.buy {
					background: #ff3f42;
					margin-left: 10rpx;
				}

				&.sec {
					background: linear-gradient(-90deg, #ff3f42 0%, #fe781f 100%);
				}
			}
		}
	}

	.cart-container {
		padding: 50rpx 20rpx 30rpx;

		.main {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1px solid #eaeaea;

			image {
				width: 200rpx;
				height: 200rpx;
				display: block;
				flex-shrink: 0;
			}

			.right {
				margin-left: 26rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					font-size: 28rpx;
					color: #333333;
					line-height: 36rpx;
				}

				.price {
					display: flex;
					flex-direction: column;
				}

				.price-1 {
					font-size: 32rpx;
					color: #ff3f42;
					line-height: 36rpx;
				}

				.price-2 {
					font-size: 26rpx;
					color: #666666;
					line-height: 30rpx;
					text-decoration: line-through;
				}

				.stock {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.attr {
			padding: 20rpx 0;
			border-bottom: 1px solid #eaeaea;

			.title {
				font-size: 28rpx;
				color: #333333;
			}

			.list {
				display: flex;
				flex-wrap: wrap;

				.item {
					margin-top: 16rpx;
					padding: 10rpx 16rpx;
					font-size: 24rpx;
					color: #666666;
					background: #f5f5f5;
					border-radius: 5rpx;
					margin-right: 16rpx;

					&.current {
						color: #ff3f42;
						background: rgba($color: #ff3f42, $alpha: 0.2);
					}
				}
			}
		}

		.num {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.button {
			text-align: center;
			line-height: 74rpx;
			border-radius: 74rpx;
			background: linear-gradient(-90deg, #ff3f42 0%, #fe781f 100%);
			font-size: 28rpx;
			color: #ffffff;
			margin-top: 20rpx;
		}
	}

	.package-container {
		padding: 30rpx 20rpx;

		.main {
			max-height: 75vh;
			overflow-y: scroll;

			.group {
				border-bottom: 1px solid #eaeaea;

				&:last-child {
					border: none;
				}

				.title {
					font-size: 28rpx;
					color: #ff3f42;
					line-height: 28rpx;
					margin: 20rpx 0;
				}

				.goods-list {
					.item {
						display: flex;
						align-items: center;
						background: #ffffff;
						margin-bottom: 20rpx;

						image {
							width: 180rpx;
							height: 180rpx;
							display: block;
							margin-right: 20rpx;
							flex-shrink: 0;
						}

						.right {
							flex: 1;
							height: 190rpx;
							display: flex;
							justify-content: space-between;
							flex-direction: column;

							.name {
								font-size: 28rpx;
								color: #333333;
								line-height: 36rpx;
								height: 72rpx;
							}

							.des {
								font-size: 24rpx;
								color: #999999;
								line-height: 36rpx;
							}

							.bottom {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.price {
									display: flex;
									flex-direction: column;
								}

								.price-1 {
									font-size: 32rpx;
									color: #ff3f42;
									line-height: 36rpx;
								}

								.price-2 {
									font-size: 26rpx;
									color: #666666;
									line-height: 30rpx;
									text-decoration: line-through;
								}
							}
						}
					}
				}
			}
		}

		.button {
			text-align: center;
			line-height: 74rpx;
			border-radius: 74rpx;
			background: linear-gradient(-90deg, #ff3f42 0%, #fe781f 100%);
			font-size: 28rpx;
			color: #ffffff;
			margin-top: 20rpx;
		}
	}

	.sharelist-container {
		padding: 30rpx 0;
		display: flex;

		button {
			background: none;
			border-radius: 0;

			&::after {
				border: none;
			}
		}

		.item {
			display: flex;
			width: 50%;
			flex-direction: column;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
				display: block;
				margin-bottom: 20rpx;
			}

			text {
				font-size: 28rpx;
				line-height: 32rpx;
				color: #333333;
			}
		}
	}

	.canvas-container {
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 999;
		margin-left: -150px;
		margin-top: -280px;

		.button {
			display: flex;
			justify-content: center;

			text {
				display: block;
				width: 280rpx;
				height: 70rpx;
				border-radius: 70rpx;
				background: linear-gradient(-90deg, #ff3f42 0%, #fe781f 100%);
				font-size: 28rpx;
				color: #ffffff;
				text-align: center;
				line-height: 70rpx;
				margin-top: 20rpx;
			}
		}
	}

	.phone-dialog {
		padding: 40rpx;
		box-sizing: border-box;

		.content {
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			line-height: 50rpx;

			text {
				color: #9d9d9d;
			}
		}

		.btn {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			button::after {
				border: none;
			}

			button {
				width: 180rpx;
				height: 70rpx;
				line-height: 70rpx;
				margin: 0;
				font-size: 28rpx;
				margin: 0 30rpx;

				&:first-child {
					background: #f5f5f5;
					color: #00ba5c;
				}
			}
		}
	}
</style>