store/pagesA/pages/order-pending/order-pending.vue

<template>
	<view class="order_manage" :class="showModal?'no_scroll':''">
		<view class="order_list" v-if="orderList">
			<view class="list_con" @click="skipDel(item.order_no)" v-for="(item, idx) in orderList" :key="idx">
				<view class="flexB">
					<text>订单号：{{ item.order_no }}</text>
					<text v-if="item.is_help == 1" class="ident">代下单</text>
				</view>
				<view class="goods_con">
					<view v-for="(temp,key,index) in item.goods" :key="index">
						<view class="flexB">
							<view class="flexS">
								<image :src="temp.img" class="goods_img"></image>
								<view>
									<view style="font-size:28rpx;font-weight: bold;">
										{{ temp.name }}
									</view>
									<view class="one_year" style="width: 120rpx;">3条装</view>
								</view>
							</view>
							<view class="price">
								<view style="color:#999;" v-if="temp.sku">X
									{{temp.sku.reduce((t, e) => t + Number(e.num), 0) ||0}}
								</view>
								<view style="margin-top:26rpx;" v-if="temp.sku">￥{{temp.sku[0].price}}</view>
							</view>
						</view>
					</view>
					<view class="flexE">
						<text v-if="item.goods" class="gray">共{{totalNum(item.goods)}}套，</text>
						<text class="gray">合计：</text>
						<text class="total">
							<text>¥</text>
							<text v-if="item.goods">{{totalMoney(item.goods)}}</text>
						</text>
					</view>
				</view>
				<view class="close_order" v-if="item.status == 0 && item.countdown">订单关闭倒计时： {{ item.countdown }}，请尽快支付。
				</view>
				<view class="close_order" v-if="item.apply_cancel == 3 && item.status == 1">
					已驳回客户发出的取消订单申请，请正常发货。
				</view>
				<view :class="item.user ? 'flexB' : 'flexE'" class="goods_opera">
					<view v-if="item.user">客户：{{ item.user.nickname | getName(item.status==1?5:9) }}</view>
					<view v-if="item.status == 0" class="flexE">
						<view class="base_btn" v-if="item.is_help == 1" @click.stop="payNow(item)">
							立即付款</view>
						<view class="base_btn" @click.stop="callPhone(item.user.phone)"
							v-if="item.user && item.is_help == 0">联系客户</view>
						<view class="more_opera" @click.stop="moreOpera(idx)">更多</view>
						<view class="dialog" v-if="item.showMore">
							<view @click.stop="choose(2, item.id, idx)">取消订单</view>
						</view>
					</view>
					<view class="flexS" v-if="item.status == 1">
						<view class="audit_btn" @click.stop="skipAudit(item)" v-if="item.apply_cancel == 1">待审核</view>
						<view class="cancel_btn" @click.stop="cancelOrder(item.id, idx)" v-if="item.apply_cancel!=1">
							取消订单</view>
						<view class="base_btn" @click.stop="shipments(item)" v-if="item.apply_cancel != 1">立即发货</view>
					</view>
					<view class="flexS" v-if="item.status == 2">
						<view class="base_btn" v-if="item.self_receive == 1 && item.user"
							@click.stop="callPhone(item.user.phone)">联系客户</view>
						<view class="base_btn" @click.stop="lookLogs(item)" v-else>查看物流</view>
						<view class="more_opera" @click.stop="moreOpera(idx)">更多</view>
						<view class="dialog" v-if="item.showMore">
							<view @click.stop="choose(6, item.order_no, idx)">确认收货</view>
						</view>
					</view>
					<view class="flexS" v-if="item.status == 3">
						<view class="base_btn" @click.stop="skipEval">查看评价</view>
						<view class="more_opera" @click.stop="moreOpera(idx)">更多</view>
						<view class="dialog" v-if="item.showMore">
							<view @click.stop="choose(4, item.order_no)"
								v-if="item.is_refund != 1 && item.is_refund != 3">申请退货</view>
							<view @click.stop="choose(5, item.order_no)" v-if="item.is_refund != 0">退货详情</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noData" v-if="orderList.length == 0">
			<image src="../../../static/imgs/default/no_order.png"></image>
			<view>暂无订单~</view>
		</view>
		<view class="share_show" v-if="shareShow">
			<view class="share_con flexCC">
				<text class="iconfont iconguanbi" @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>
		</view>
		<view class="qrimg">
			<tki-qrcode ref="qrcode" :val="code.val" :size="code.size" :icon="code.icon" :iconSize="code.iconsize"
				:onval="code.onval" :loadMake="code.loadMake" :showLoading="code.showLoading"
				:loadingText="code.loadingText" @result="drawPoster" />
		</view>
		<view class="pay_pop flexCC" v-if="payWay">
			<view class="pay_con">
				<image src="../../../static/imgs/shop/hint.png" class="hint_icon"></image>
				<view class="pay_intr flexCC" v-if="payInfo.user">
					<text>客户：{{ payInfo.user.nickname }}</text>
					<view>{{ payInfo.user.phone }}</view>
				</view>
				<view class="pay_btn flexC">
					<view @click="showPop=true,payWay=false
					">我代为支付</view>
					<image src="../../../static/imgs/shop/recommend.png" class="recommend"></image>
					<view @click="shareNow(payInfo)">分享给客户支付</view>
				</view>
			</view>
			<text class="iconfont iconguanbi" @click="payWay = false"></text>
		</view>
		<hint-pop :showPop="showPop" @pay="payMent(payInfo.order_no),showPop=false"
			@share="shareNow(payInfo),showPop=false" @close="showPop=false">
		</hint-pop>
		<show-modal :showPop="showModal" @cancel="skip(0)" @confirm="skip(1)"></show-modal>
	</view>
</template>

<script>
	/*
	 *getOrderList 获取订单列表
	 * orderQuery  查询订单
	 *
	 */
	import {
		getNoFinishOrder,
		payMent,
		cancelOrder,
		cancelAuth,
		cancelRefund,
		getOrderNum,
		receiveOrder,
		scanCodeInfo,
		getNoSendOrder
	} from '@/apis/shop.js';
	// import {
	// 	getName
	// } from '../../filters/index.js';
	import hintPop from '@/components/hint-pop.vue'
	import showModal from '@/components/show-modal.vue'
	export default {
		data() {
			return {
				remark: '', //备注信息
				searchName: '',
				orderList: '', //订单列表
				total: '', //总条数
				params: {
					page_size: 6, //每页显示条数
					page_index: 1, //当前显示页数
				},
				isPay: true, //是否可以支付
				user_id: '', //用户id
				shareShow: false,
				model: '',
				canvasWidth: '',
				canvasHeight: '',
				code: {
					val: '',
					size: 200,
					icon: '',
					iconsize: 25,
					onval: true,
					loadMake: '',
					showLoading: true,
					loadingText: '二维码生成中...'
				},
				shareGoods: {}, //分享海报上的图片
				poster: '', //海报图片
				payWay: false, //点击立即付款时显示选择弹窗
				payInfo: '', //选择付款或分享的信息
				orderTime: '', //倒计时
				orderNum: '', //角标数量
				store: '',
				goods_img: '', //分享的图片
				showPop: false, //显示提醒弹窗
				showModal: false, //显示合并弹窗
				orderDetail: '' //单个订单详情
			};
		},
		components: {
			hintPop,
			showModal
		},
		filters: {
			//总件数
			total(data) {
				let total = 0
				for (let k in data) {
					total += data[k].sku.reduce((t, e) => t + Number(e.num), 0)
				}
				return total;
			},
			//总金额
			totalMoney(data) {
				let totalMoney = 0
				for (let k in data) {
					totalMoney += data[k].sku.reduce((t, e) => t + Number(e.num) * e.price, 0)
				}
				return totalMoney;
			}
		},
		/*
		 * order_no  代表从首页搜索进来
		 */
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.model = res.model;
					this.canvasWidth = res.windowWidth / 375;
					this.canvasHeight = res.windowHeight;
				}
			});
		},
		onShow() {
			this.store = uni.getStorageSync('store');
			this.params.page_index = 1;
			this.getOrder();
		},
		onReachBottom() {
			this.getMoreOrder();
		},
		methods: {
			//总件数
			totalNum(data) {
				let total = 0
				for (let k in data) {
					total += data[k].sku.reduce((t, e) => t + Number(e.num), 0)
				}
				return total;
			},
			//总金额
			totalMoney(data) {
				let totalMoney = 0
				for (let k in data) {
					totalMoney += data[k].sku.reduce((t, e) => t + Number(e.num) * e.price, 0)
				}
				return totalMoney;
			},
			preview() {
				uni.previewImage({
					current: this.poster,
					urls: [this.poster]
				});
			},
			//立即付款按钮
			payNow(item) {
				this.payWay = true;
				this.payInfo = item
			},
			//获取角标数量
			getNum() {
				getOrderNum({
					user_id: this.user_id
				}).then(res => {
					if (res.code == 200) {
						this.orderNum = res.data;
					} else {
						uni.showModal({
							content: res.data || '获取角标失败',
							showCancel: false
						})
					}
				});
			},
			//倒计时
			coutdown(date) {
				const add0 = num => (num < 10 ? '0' + num : num);
				const now = Math.floor(Date.now() / 1000);
				let sec = Math.floor(Number(date) - now);
				if (sec > 0) {
					const day = Math.floor(sec / 86400);
					const hour = Math.floor((sec % 86400) / 3600);
					const minite = Math.floor((sec - 86400 * day - hour * 3600) / 60);
					const second = Math.floor(sec - 86400 * day - hour * 3600 - minite * 60);
					return `${add0(minite)}:${add0(second)}`;
				} else {
					this.timer = null;
					return false;
				}
			},
			getCount() {
				let list = this.orderList;
				list.map(i => {
					if (i.status == 0) {
						let creat_at = i.created_at.replace(/-/g, '/');
						let end = new Date(creat_at).getTime() / 1000 + 1 * 60 * 60;
						let now = Math.floor(Date.now() / 1000);
						let diff = end - now;
						if (diff > 0) {
							this.timer = setInterval(() => {
								this.$set(i, 'countdown', this.coutdown(end));
							}, 1000);
						} else {
							clearInterval(this.timer);
						}
					}
				});
			},
			//点击更多
			moreOpera(idx) {
				this.cur = 0;
				let list = this.orderList;
				list.map((i, index) => {
					if (idx == index) {
						i.showMore = !i.showMore;
					} else {
						this.$set(i, 'showMore', false);
					}
				});
			},
			//更多里面的选择
			choose(tabType, item, idx) {
				// this.cur = tabType;
				switch (tabType) {
					case 1: //立即分享
						this.shareNow(item, idx);
						break;
					case 2: //取消订单
						this.cancelOrder(item, idx);
						break;
						// case 3:
						// 	//联系客户
						// 	this.callPhone(item, idx);
						// 	break;
					case 4: //申请退货
						this.applyReturn(item);
						break;
					case 5: //退货详情
						this.refundDetail(item);
						break;
					case 6: //确认收货
						this.confirmReceipt(item, idx);
						break;
					default:
						break;
				}
			},
			//确认收货
			confirmReceipt(order_no, idx) {
				this.orderList[idx].showMore = false;
				uni.showModal({
					content: '你确定用户已经收到货了吗？',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '确认中...'
							})
							receiveOrder({
								order_no
							}).then(res => {
								if (res.code == 200) {
									uni.showModal({
										content: '帮客户确认收货成功',
										showCancel: false,
										success: res => {
											this.params.status = 4;
											this.params.page_index = 1;
											this.getOrder();
											this.getNum();
										}
									})

								} else {
									uni.showModal({
										content: res.msg || '确认收货失败',
										showCancel: false
									});
								}
								uni.hideLoading()
							}).catch(err => {
								uni.hideLoading()
							})
						}
					}
				});
			},
			//申请退货
			applyReturn(order_no) {
				uni.navigateTo({
					url: '../apply-return/apply-return?order_no=' + order_no
				});
			},
			//立即分享按钮
			shareNow(item) {
				this.payWay = false;
				this.code.val =
					`${this.$config.share_url}#pages/scan-order/scan-order?order_no=${item.order_no}`;

				let goods = item.goods;
				let good = Object.values(goods);
				let img = good[0].img.replaceAll('http', 'https');
				uni.getImageInfo({
					src: img,
					success: res => {
						this.goods_img = res.path
					}
				})
				this.shareGoods = {
					// img: good[0].img.replaceAll('http', 'https'),
					price: this.totalMoney(goods),
					num: this.totalNum(goods),
					name: good.length > 1 ? good[0].main_attr + '...等' : good[0].main_attr
				};
				this.shareShow = true;
				this.$refs.qrcode._makeCode();

			},


			blobToDataURI(blob, callback) {
				var reader = new FileReader();
				reader.readAsDataURL(blob);
				reader.onload = function(e) {
					callback(e.target.result);
				};
			},
			//绘制海报
			drawPoster(codeImg) {
				let _this = this;
				uni.showLoading({
					title: '图片加载中...'
				});
				let goods = _this.shareGoods;
				uni.getImageInfo({
					src: 'https://api.wd.cliu.cc/good_poster.png',
					success: res => {
						uni.showLoading({
							title: '图片生成中...',
						})
						let ctx = uni.createCanvasContext('canvas');
						let store = uni.getStorageSync('store');
						store.name = store.name.length > 7 ? store.name.slice(0, 7) + '...的店铺' : store.name +
							'的店铺';
						let rpx = _this.canvasWidth;
						//背景图
						ctx.drawImage(res.path, 0, 0, 270 * rpx, 480 * rpx);
						//店铺名称
						ctx.font = 'normal bold 14px Microsoft YaHei';
						ctx.textAlign = 'center';
						ctx.fillText(store.name, uni.upx2px(270), uni.upx2px(210));

						//商品图
						ctx.drawImage(this.goods_img, uni.upx2px(110), uni.upx2px(270), uni.upx2px(130), uni
							.upx2px(
								103));
						//商品款式
						ctx.font = 'normal bold 14px Microsoft YaHei';
						ctx.fillText(goods.name, goods.name.length > 3 ? uni.upx2px(320) : uni.upx2px(290), uni
							.upx2px(300));
						//商品数量
						ctx.font = 'normal normal 12px Microsoft YaHei';
						ctx.setFillStyle('#999999');
						ctx.fillText(`${goods.num}套`, uni.upx2px(282), uni.upx2px(340));
						//商品价格
						ctx.font = 'normal bold 12px Microsoft YaHei';
						ctx.setFillStyle('#FB231F');
						ctx.fillText(`¥`, uni.upx2px(340), uni.upx2px(365));
						ctx.font = 'normal bold 16px Microsoft YaHei';
						ctx.setFillStyle('#FB231F');
						ctx.fillText(goods.price, uni.upx2px(400), uni.upx2px(365));
						//二维码
						ctx.drawImage(codeImg, uni.upx2px(110), uni.upx2px(420), uni.upx2px(320), uni.upx2px(
							320));
						//扫一扫下单，安全有保障
						ctx.font = 'noraml bold 14px 微软雅黑';
						ctx.textAlign = 'center';
						ctx.setFillStyle('#060001');
						ctx.fillText('微信-扫一扫-支付', uni.upx2px(270), uni.upx2px(790));

						setTimeout(res => {
							ctx.draw(false, () => {
								uni.canvasToTempFilePath({
									width: 270 * rpx,
									height: 480 * 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,
												'');
										}
									},
									fail: () => {
										uni.hideLoading();
									}
								});
							});
						}, 500);

					}
				});

			},
			//0 不一起发货  1一起发货
			skip(type) {
				this.showModal = false;
				if (type === 0) {
					uni.navigateTo({
						url: '../../pagesA/pages/delivery-method/delivery-method?order_no=' +
							this.orderDetail.order_no + '&user_id=' +
							this.orderDetail.user_id
					});
					return false;
				}
				uni.navigateTo({
					url: '../../pagesA/pages/merge-order/merge-order?order_no=' + this.orderDetail.order_no
				})

			},
			//跳转发货方式
			shipments(item) {
				const {
					order_no,
					user_id
				} = item;
				uni.showLoading({
					title: '加载中...'
				})
				getNoSendOrder({ //如果当天有同一人订单，一起发货
					order_no
				}).then(res => {
					if (res.code == 200) {
						let list = res.data;
						let len = list.length
						if (len < 1) {
							uni.showModal({
								content: '订单状态有误，请刷新页面重试',
								showCancel: false
							})
							return false
						}
						if (len === 1) {
							uni.navigateTo({
								url: '../delivery-method/delivery-method?order_no=' +
									order_no + '&user_id=' +
									user_id
							});
							return false;
						}
						this.showModal = true
						this.orderDetail = item;
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						})
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})

			},
			//直接扫码发货
			scanCode(item) {

				uni.navigateTo({
					url: '../send-code/send-code?order_no=' + item.order_no
				})
			},
			//跳转到退货详情
			refundDetail(order_no, idx) {
				uni.navigateTo({
					url: '../../../pages/refund_detail/refund_detail?order_no=' + order_no
				});
			},
			//跳转到待审核
			skipAudit(item) {
				uni.navigateTo({
					url: '../../../pages/cancel-audit/cancel-audit?order_no=' + item.order_no + '&id=' + item
						.order_cancel.id
				});
			},
			/*联系客户*/
			callPhone(phone) {
				if (!phone) {
					uni.showToast({
						title: '暂无联系方式',
						icon: 'none'
					});
					return false;
				}
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			/*取消订单*/
			cancelOrder(order_id, idx) {
				this.orderList[idx].showMore = false;
				uni.showModal({
					content: '确定要取消该订单么?',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中...'
							})
							cancelOrder({
								order_id
							}).then(res => {
								if (res.code == 200) {
									uni.showModal({
										content: '取消订单成功',
										showCancel: false
									});
									let list = this.orderList;
									list.map((i, idx) => {
										i.id == order_id ? list.splice(idx, 1) : '';
									});
									this.getNum();
								} else {
									uni.showModal({
										content: res.data || '取消订单失败',
										showCancel: false
									});
								}
								uni.hideLoading()
							}).catch(err => {
								uni.hideLoading()
							})
						}
					}
				});
			},

			goTop() {
				// 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					});
				}
			},
			/*获取订单列表
			 *page_index 当前页面
			 *page_size 每页条数
			 *status 状态 0待付款 1待发货 2待收货  3已完成
			 */
			getOrder(isMore) {
				uni.showLoading({
					title: '加载中...'
				});
				getNoFinishOrder(this.params)
					.then(res => {
						if (res.code == 200) {
							this.total = Math.ceil(res.data.total / this.params.page_size);
							this.orderList = isMore ? this.orderList.concat(res.data.list) : res.data.list;
							this.orderList.map(i => {
								this.$set(i, 'showMore', false);
							});
							if (status == 0 || status == 'all') {
								this.getCount();
							}
						} else {
							uni.showModal({
								content: res.data,
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			//上拉加载更多
			getMoreOrder() {
				if (this.params.page_index >= this.total) {
					uni.showToast({
						title: '没有更多啦~',
						icon: 'none'
					});
					return false;
				}
				this.params.page_index++;
				this.getOrder(true);
			},
			/*查看物流*/
			lookLogs(item) {
				let good = Object.values(item.goods)
				let img = good[0].img.replaceAll('http', 'https');
				uni.navigateTo({
					url: '../../../pages/logistics-detail/logistics-detail?order_no=' + item.order_no + '&img=' +
						img
				});
			},
			/*查看评价*/
			skipEval() {
				uni.navigateTo({
					url: '../../../pages/evaluate/evaluate'
				});
			},
			/*订单详情
			 * order_no  当前订单的订单号
			 */
			skipDel(order_no) {
				uni.navigateTo({
					url: '../../../pages/order-info/order-info?order_no=' + order_no
				});
			},
			/*物流发货*/
			sendGoods(order_no) {
				uni.navigateTo({
					url: '../../../pages/send-goods/send-goods?order_no=' + order_no
				});
			},
			/*立即付款*/
			async payMent(order_no) {
				this.payWay = false;
				if (!this.isPay) {
					uni.showModal({
						content: '请稍后重试~',
						showCancel: false
					});
					return false;
				}
				this.isPay = false;
				uni.showLoading({
					title: '加载中...'
				})
				payMent({
						order_no
					})
					.then(res => {
						if (res.error_code === 200) {
							let data = res.data;
							uni.requestPayment({
								timeStamp: data.timestamp,
								nonceStr: data.nonceStr,
								package: data.package,
								signType: data.signType,
								paySign: data.paySign,
								success: res => {
									this.params.page_index = 1;
									this.getOrder();
								},
								fail: err => {
									uni.showModal({
										content: '支付失败',
										showCancel: false
									})
								}
							})
						} else {
							uni.showModal({
								content: res.msg || '支付失败',
								showCancel: false
							})
						}
						uni.hideLoading();
					})
					.catch(err => {
						this.isPay = true;
						uni.hideLoading();
					})
					.finally(() => {
						setTimeout(() => {
							this.isPay = true;
						}, 3000);
						uni.hideLoading();
					});
			}
		}
	};
</script>
<style>
	page {
		min-height: 100%;
		width: 100%;
		background-color: #f9f9fb;
	}
</style>
<style lang="scss" scoped>
	.no_scroll {
		postion: relative;
		height: 100vh;
		overflow-y: hidden;
	}

	.order_manage {
		postion: relative;
		padding-bottom: 180rpx;

		.order_list {
			margin: 30rpx 0 120rpx;

			.list_con {
				width: 690rpx;
				margin: 30rpx auto 0;
				background-color: #fff;
				font-size: 28rpx;
				border-radius: 24rpx;
				position: relative;

				.goods_con {
					border-top: 1rpx solid #e9e9e9;
					border-bottom: 1rpx solid #e9e9e9;

					.goods_img {
						width: 188rpx;
						height: 144rpx;
						margin-right: 20rpx;
						border-radius: 8rpx;
						flex-shrink: 0;
					}

					>view {
						margin-top: 15rpx;
					}
				}

				.goods_opera {
					.more_opera {
						font-size: 36rpx;
						color: #999;
						font-weight: bold;
						margin-left: 15rpx;
					}

					.dialog {
						position: absolute;
						background-color: #fff;
						margin: 20rpx auto;
						bottom: 82rpx;
						right: 20rpx;
						width: 220rpx;
						text-align: center;
						border-radius: 8rpx;
						box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);

						&:after {
							content: '';
							position: absolute;
							width: 0;
							height: 0;
							border: 10rpx solid transparent;
							border-top-color: #fff;
							top: 100%;
							left: 50%;
							margin-left: 72rpx;
						}

						>view {
							height: 88rpx;
							line-height: 88rpx;
							font-size: 32rpx;
						}

						>view:not(:last-child) {
							border-bottom: 2rpx solid #eeeeee;
						}
					}
				}

				>view {
					padding: 20rpx 20rpx;
					box-sizing: border-box;
				}

				>view:first-child {
					padding: 25rpx 10rpx;
				}

				.refund_img {
					width: 202rpx;
					height: 170rpx;
					position: absolute;
					top: 15rpx;
					right: 25rpx;
				}

				.close_order {
					width: 630rpx;
					background: #ffeac7;
					color: $base-color;
					font-size: 28rpx;
					font-weight: bold;
					margin: 15rpx auto 0;
					border-radius: 8rpx;
					padding: 8rpx 0 8rpx 30rpx;
				}

				.cancel_img {
					width: 195rpx;
					height: 125rpx;
					position: absolute;
					top: 0;
					right: 30rpx;
				}

				.opear_btn {
					width: 192rpx;
					height: 68rpx;
					background: $base-line-bg;
					opacity: 1;
					border-radius: 34rpx;
					color: #fff;
					font-size: 28rpx;
					margin-left: 20rpx;
				}

				.price {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
				}

				.ident {
					background: rgba(65, 133, 245, 0.1);
					color: #4185f5;
					padding: 5rpx 15rpx;
					border-radius: 28rpx 8rpx 28rpx 8rpx;
					flex-shrink: 0;
				}
			}
		}
	}

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

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

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

				#canvas {
					width: 540rpx;
					height: 960rpx;
					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;
				}

				// image {
				// 	width: 100%;
				// 	height: 100%;
				// 	border-radius: 24rpx;
				// }
			}

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

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

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

	.qrimg {
		opacity: 0;
	}

	.pay_pop {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;

		.pay_con {
			position: relative;
			width: 620rpx;
			text-align: center;
			margin: 0 auto;
			min-height: 384rpx;
			background: #fff;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.pay_title {
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 85rpx;
			}

			.pay_intr {
				font-size: 30rpx;
				font-weight: bold;
				margin: 100rpx 0 50rpx;
				min-height: 100rpx;

				view {
					color: #999;
					margin-top: 15rpx;
				}
			}

			.hint_icon {
				width: 183rpx;
				height: 135rpx;
				position: absolute;
				top: -67rpx;
				margin-left: 18rpx;
			}

			.pay_btn {
				position: relative;
				width: 560rpx;
				height: 88rpx;

				view {
					width: 360rpx;
					height: 88rpx;
					line-height: 88rpx;
					color: #fff;
					text-align: center;
					font-size: 32rpx;
				}

				view:first-child {
					width: 200rpx;
					height: 84rpx;
					background: #FFF4F3;
					border: 2rpx solid $base-color;
					border-radius: 44rpx 0 0 44rpx;
					color: $base-color;
				}

				view:last-child {
					background: $base-line-bg;
					border-radius: 0 44rpx 44rpx 0;
					text-align: left;
					padding-left: 24rpx;
					box-sizing: border-box;
				}

				.recommend {
					width: 76rpx;
					height: 48rpx;
					position: absolute;
					top: 0rpx;
					right: 29rpx;
				}
			}
		}

		.iconfont {
			margin-top: 30rpx;
			color: #fff;
			font-size: 60rpx;
		}
	}
</style>