<template>
	<view class="order_info">
		<view class="order_bg">
			<image src="../../static/imgs/shop/order_detail.png" class="img_bg"></image>
			<view class="state flexB" v-if="orderInfo.status == 0">
				<view>
					<view>等待付款</view>
					<view v-if="orderTime" class="count_down">该订单将在{{ orderTime }}后自动关闭，请及时付款</view>
				</view>
				<image src="../../static/imgs/shop/state1.png" style="width: 103rpx;height:91rpx"></image>
			</view>
			<view class="state flexB" v-if="orderInfo.status == 1">
				<view>
					<view>{{ orderInfo.self_receive == 1 ? '已备货，可自提' : '已生成订单' }}</view>
					<!-- <text style="font-size:32px;">{{ orderInfo.self_receive == 1 ? '货物已备好，可通知客户自提~' : '请线下联系收款' }}</text> -->
					<text style="font-size:32px;">请线下联系收款</text>
				</view>
				<image src="../../static/imgs/shop/state2.png" style="width: 108rpx;height:87rpx"></image>
			</view>
			<view class="state flexB" v-if="orderInfo.status == 2">
				<view>
					<view>{{ orderInfo.self_receive == 1 ? '已提货，待确认' : '已发货' }}</view>
					<text>{{ orderInfo.self_receive == 1 ? '可提醒客户确认自提~' : '包裹正在路上，请耐心等待~' }}</text>
				</view>
				<image src="../../static/imgs/shop/state3.png" style="width: 120rpx;height:82rpx"></image>
			</view>
			<view class="state flexB" v-if="orderInfo.status == 3">
				<view>
					<view>已完成</view>
					<text>赶快看看客户的评价吧~</text>
				</view>
				<image src="../../static/imgs/shop/state4.png" style="width:129rpx;height:109rpx"></image>
			</view>
		</view>
		<view class="order_con">
			<view class="top">
				<view class="log_info" v-if="orderInfo.user">
					<view class="flexS">
						<image class="avatar" :src="orderInfo.user.avatar" v-if="orderInfo.user"></image>
						<text class="iconfont icongeren2" v-else></text>
						<view class="user" v-if="orderInfo.user">
							<text>客户：</text>
							<text>{{ orderInfo.user.nickname | getName(orderInfo.user.phone ? 10 : 16) }}</text>
							<text style="margin-left: 10rpx;">{{ orderInfo.user.phone }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="ads_box flexSS" style="margin-top:24rpx;" v-if="orderInfo.address">
				<text class="iconfont icondizhi"></text>
				<view class="ads">
					<text>{{ orderInfo.address.name }}{{ orderInfo.address.phone }}</text>
					<view>
						{{ orderInfo.address.province }}{{ orderInfo.address.city }}{{ orderInfo.address.area }}{{ orderInfo.address.address }}
					</view>
				</view>
			</view>
			<view class="order_box">
				<view class="shop_name">
					<text class="iconfont icondianpu"></text>
					<text>{{ storeInfo.name | getName(15) }}的店铺</text>
				</view>
				<view class="goods_box">
					<view class="goods_con" v-for="item in orderInfo.goods" :key="item.id">
						<view class="goods_info flexS">
							<image :src="item.img" class="goods_img"></image>
							<view class="goods_intr">
								<text class="goods_name">{{ item.name }}</text>
								<view class="one_year" style="width: 120rpx;">3条装</view>
								<view class="price_box" style="margin-top:20rpx;">
									<view class="goods_price flexS" v-if="item.sku[0].price == item.vip_price">
										<view class="flexS">
											<view class="vip_ident">VIP</view>
											<text class="big_price">
												<text>¥</text>
												<text>{{ item.vip_price }}</text>
											</text>
										</view>
										<view class="draw_off">
											<text>（</text>
											<text class="old_price">
												<text class="symbol">¥</text>
												<text>{{ item.price }}</text>
											</text>
											<text>）</text>
										</view>
									</view>
									<view class="goods_price flexS" v-else>
										<text class="big_price">
											<text class="symbol">¥</text>
											<text>{{ item.price }}</text>
										</text>
										<view class="save_box">
											VIP可省{{ Number(item.price) - Number(item.vip_price) || 0 }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="goods_size" v-for="temp in item.sku" :key="temp.id">
							<view class="flexB">
								<view>
									<text class="gray">款式：</text>
									<text>{{ temp.type }}</text>
								</view>
								<text>{{ temp.price * temp.num }}元</text>
							</view>
							<view class="flexB">
								<view>
									<text class="gray">尺码：</text>
									<text>{{ temp.size }}</text>
								</view>
								<text>X {{ temp.num }}套</text>
							</view>
						</view>
						<view class="goods_total flexE">
							<text style="color:#999;">共{{ subNum(item) }}套，</text>
							<text style="color:#999;">小计：</text>
							<view class="price_box">
								<view class="goods_price flexS">
									<text class="big_price">
										<text class="symbol">¥</text>
										<text>{{ subtotal(item) }}</text>
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="order_remark" v-if="orderInfo.status == 0">
					<view class="remark_title">订单备注</view>
					<view class="remark_box">
						<textarea v-model="orderInfo.remark" placeholder="可将收货人姓名、电话和地址备注在这里" auto-height
							placeholder-style="font-size:30rpx;" :disabled="!isText" />
						<view class="flexE">
							<view class="edit_remark flexCC" @click.stop="isText = true">编辑</view>
							<view class="edit_remark flexCC finish" @click.stop="editRemark" v-if="isText">完成</view>
						</view>
					</view>
				</view>
				<view class="flexT" style="margin-top:15rpx;" v-else>
					<view style="flex-shrink: 0;">订单备注：</view>
					<text class="gray" @click="copy(orderInfo.remark)"
						selectable="true">{{ orderInfo.remark ? orderInfo.remark : '无' }}
					</text>
				</view>
			</view>
			<view class="order_intr">
				<view class="flexS">
					<text>订单编号：</text>
					<text style="font-size:24rpx;">{{ orderInfo.order_no }}</text>
					<text class="copy_new_btn" @click="copy(orderInfo.order_no)">复制</text>
				</view>
				<view>
					<text>下单时间：</text>
					<text>{{ orderInfo.created_at }}</text>
				</view>
				<view v-if="orderInfo.status == 2 || orderInfo.status == 3">
					<text>发货方式：</text>
					<text>{{orderInfo.self_receive == 1?'送货':'物流发货'}}</text>
				</view>
				<view class="sign_box" v-if="orderInfo.signature">
					<text>确认签名：</text>
					<image :src="orderInfo.signature" class="sign"></image>
				</view>
			</view>
			<view class="order_total">
				<view class="flexB">
					<text>商品总额：</text>
					<text class="big_price">
						<text>￥</text>
						<text>{{ totalPrice }}</text>
					</text>
				</view>
				<view class="flexB" style="margin-top:15rpx">
					<text>商品数量：</text>
					<text>{{ totalNum }}套</text>
				</view>
			</view>
		</view>
		<view class="order_opera flexE">
			<view v-if="orderInfo.status == 0">
				<view  class="flexE">
					<view class="cancel_btn" @click.stop="cancelOrder(orderInfo.id)">取消订单</view>
					<view class="base_btn" @click.stop="callPhone()">联系客户</view>
				</view>
			</view>
			<view v-if="orderInfo.status == 1" class="flexE">
				<view class="audit_btn" @click.stop="skipAudit()"
					v-if="orderInfo.is_help == 1 && orderInfo.apply_cancel == 1">待审核</view>
				<view class="cancel_btn" @click.stop="cancelOrder(orderInfo.id)" v-if="orderInfo.apply_cancel !=1">取消订单
				</view>
				<view class="base_btn" @click.stop="shipments()" v-if="orderInfo.apply_cancel != 1">立即发货</view>
			</view>
			<view v-if="orderInfo.status == 2" class="flexE">
				<view class="base_btn" @click="callPhone" v-if="orderInfo.self_receive == 1">联系客户</view>
				<view class="base_btn" style="margin-left:20rpx;" @click="lookLogs" v-else>查看物流</view>
				<view class="base_btn" @click.stop="confirmReceipt(orderInfo.order_no)">确认收货</view>
			</view>
			<view v-if="orderInfo.status == 3" class="flexE">
				<view class="cancel_btn" @click="applyReturn"
					v-if="orderInfo.is_refund != 1 && orderInfo.is_refund != 3">申请退货</view>
				<view class="cancel_btn" @click="refundDetail" v-if="orderInfo.is_refund != 0">退货详情</view>
				<view class="base_btn" @click="skipEval">查看评价</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>
		<hint-pop :showPop="showPop" @pay="payMent(),showPop=false" @share="shareNow(),showPop=false"
			@close="showPop=false"></hint-pop>
		<show-modal :showPop="showModal" @cancel="skip(0)" @confirm="skip(1)"></show-modal>
	</view>
</template>

<script>
	import {
		handleClipboard
	} from '../../common/util/utils.js';
	import {
		orderQuery,
		pickUp,
		payMent,
		cancelOrder,
		editRemark,
		receiveOrder,
		scanCodeInfo,
		getNoSendOrder
	} from '../../apis/shop.js';
	import hintPop from '../../components/hint-pop.vue'
	import showModal from '../../components/show-modal.vue'
	export default {
		data() {
			return {
				orderInfo: '', //订单信息
				logInfo: '', //物流信息
				storeInfo: '',
				isPay: true,
				order_no: '', //订单号
				storeAds: '', //店铺地址
				orderTime: '', //倒计时
				model: '',
				canvasWidth: '',
				canvasHeight: '',
				code: {
					val: '',
					size: 200,
					icon: '',
					iconsize: 25,
					onval: true,
					loadMake: '',
					showLoading: true,
					loadingText: '二维码生成中...'
				},
				shareGoods: {}, //分享海报上的图片
				poster: '', //海报图片
				shareShow: false, //是否显示分享海报图片
				showMore: false, //未付款时显示更多
				isText: false, //是否可以编辑文本框
				goods_img: '', //分享海报上的图片
				showPop: false, //显示提醒弹窗
				showModal: false, //显示合并弹窗
				remark: '' //更换介绍人的原因
			};
		},
		components: {
			hintPop,
			showModal
		},
		onLoad(options) {
			if (options.order_no) {
				this.order_no = options.order_no;
				this.getOrder(this.order_no);
			}
			uni.getSystemInfo({
				success: res => {
					this.model = res.model;
					this.canvasWidth = res.windowWidth / 375;
					this.canvasHeight = res.windowHeight;
				}
			});
		},
		onShow() {
			this.storeInfo = uni.getStorageSync('store');
			let ads = uni.getStorageSync('store').address;
		},
		computed: {
			//总数量
			totalNum() {
				let totalNum = 0;
				if (this.orderInfo) {
					this.orderInfo.goods.map(i => {
						i.sku.map(j => {
							totalNum += j.num;
						});
					});
				}
				return totalNum;
			},
			//总金额
			totalPrice() {
				let totalPrice = 0;
				if (this.orderInfo) {
					this.orderInfo.goods.map(i => {
						i.sku.map(j => {
							totalPrice += j.num * j.price;
						});
					});
				}
				return totalPrice;
			}
			// //总vip金额
			// vipPrice() {
			// 	let vipPrice = 0;
			// 	if (this.orderInfo) {
			// 		this.orderInfo.goods.map(i => {
			// 			i.sku.map(j => {
			// 				vipPrice += j.num * j.vip_price;
			// 			});
			// 		});
			// 	}
			// 	return vipPrice;
			// }
		},
		methods: {
			//0 不一起发货  1一起发货
			skip(type) {
				const {
					order_no,
					user_id
				} = this.orderInfo;
				this.showModal = false;
				if (type === 0) {
					uni.navigateTo({
						url: '../../pagesA/pages/delivery-method/delivery-method?order_no=' +
							order_no + '&user_id=' +
							user_id
					});
					return false;
				}
				uni.navigateTo({
					url: '../../pagesA/pages/merge-order/merge-order?order_no=' + order_no
				})

			},
			//直接扫码发货
			scanCode() {
				uni.navigateTo({
					url: '../../pagesA/pages/send-code/send-code?order_no=' + this.orderInfo.order_no
				})
			},
			preview() {
				uni.previewImage({
					current: this.poster,
					urls: [this.poster]
				});
			},
			//确认收货
			confirmReceipt(order_no) {
				uni.showModal({
					content: '你确定用户已经收到货了吗？',
					success: res => {
						if (res.confirm) {
							receiveOrder({
								order_no
							}).then(res => {
								if (res.code == 200) {
									uni.showModal({
										content: '帮客户确认收货成功',
										showCancel: false,
										success: res => {
											this.orderInfo.status = 3;
										}
									})
								} else {
									uni.showModal({
										content: res.msg || '确认收货失败',
										showCancel: false
									});
								}
							});
						}
					}
				});
			},
			//编辑备注
			editRemark() {
				const {
					order_no,
					remark
				} = this.orderInfo;
				editRemark({
					order_no,
					remark
				}).then(res => {
					if (res.code == 200) {
						this.isText = false;
						uni.showToast({
							title: '修改成功'
						});
					} else {
						uni.showModal({
							content: res.data || '修改失败',
							showCancel: false
						});
					}
				});
			},
			//立即分享按钮
			shareNow() {
				let goods = this.orderInfo.goods;
				let img = goods[0].img.replaceAll('http', 'https');
				uni.getImageInfo({
					src: img,
					success: res => {
						this.goods_img = res.path
					}
				})
				this.shareGoods = {
					// img: goods[0].img.replaceAll('http', 'https'),
					price: this.sharePrice(goods),
					num: this.shareNum(goods),
					name: goods.length > 1 ? goods[0].main_attr + '...等' : goods[0].main_attr
				};
				this.code.val =
					`${this.$config.share_url}#pages/scan-order/scan-order?order_no=${this.orderInfo.order_no}`;
				this.$refs.qrcode._makeCode();
				this.shareShow = true;
			},
			//总数量
			shareNum(data) {
				let subNum = 0;
				data.map(i => {
					i.sku.map(j => {
						subNum += j.num;
					});
				});
				return subNum;
			},

			sharePrice(data) {
				let totalPrice = 0;
				data.map(i => {
					i.sku.map(j => {
						totalPrice += j.num * j.price;
					});
				});
				return totalPrice;
			},
			//绘制海报
			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 pingfang';
						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 pingfang';
						ctx.fillText(goods.name, goods.name.length > 3 ? uni.upx2px(320) : uni.upx2px(290), uni
							.upx2px(300));
						//商品数量
						ctx.font = 'normal normal 12px pingfang';
						ctx.setFillStyle('#999999');
						ctx.fillText(`${goods.num}套`, uni.upx2px(282), uni.upx2px(340));
						//商品价格
						ctx.font = 'normal bold 12px pingfang';
						ctx.setFillStyle('#FB231F');
						ctx.fillText(`¥`, uni.upx2px(340), uni.upx2px(365));
						ctx.font = 'normal bold 16px pingfang';
						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 pingfang';
						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();
										let url = res.tempFilePath.replace(
											/\. +/g, '');
										this.poster = url.replace(/[\r\n]/g,
											'');
									},
									fail: () => {
										uni.hideLoading()
									}
								});
							});

						}, 500);
					}
				});
			},
			//申请退货
			applyReturn() {
				uni.navigateTo({
					url: '../apply-return/apply-return?order_no=' + this.orderInfo.order_no
				});
			},
			//跳转到退货详情
			refundDetail() {
				uni.navigateTo({
					url: '../refund_detail/refund_detail?order_no=' + this.orderInfo.order_no
				});
			},
			//跳转发货方式
			shipments() {
				const {
					user_id,
					order_no
				} = this.orderInfo;
				// uni.navigateTo({
				// 	url: '../../pagesA/pages/delivery-method/delivery-method?order_no=' +
				// 		order_no + '&user_id=' +
				// 		user_id
				// });
				// return false;
				uni.showLoading({
					title: '加载中...'
				})
				getNoSendOrder({
					order_no
				}).then(res => {
					if (res.code == 200) {
						let list = res.data;
						if (list.length === 1) {
							uni.navigateTo({
								url: '../../pagesA/pages/delivery-method/delivery-method?order_no=' +
									order_no + '&user_id=' +
									user_id
							});
							return false;
						}
						this.showModal = true
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						})
					}
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})

				// uni.navigateTo({
				// 	url: '../../pagesA/pages/delivery-method/delivery-method?order_no=' + order_no + '&user_id=' +
				// 		user_id
				// });
			},
			//倒计时
			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;
				}
			},
			getTime() {
				if (!this.orderInfo.created_at) {
					return false;
				}
				let date = this.orderInfo.created_at.replace(/-/g, '/');
				let end = new Date(date).getTime() / 1000 + 1 * 60 * 60;
				let now = Math.floor(Date.now() / 1000);
				let diff = end - now;
				if (diff > 0) {
					this.timer = setInterval(() => {
						this.orderTime = this.coutdown(end);
					}, 1000);
				}
			},
			/*取消订单*/
			cancelOrder(order_id) {
				this.showMore = false;
				uni.showModal({
					content: '确定要取消该订单么?',
					success: res => {
						if (res.confirm) {
							cancelOrder({
								order_id
							}).then(res => {
								if (res.code == 200) {
									uni.showModal({
										content: '取消订单成功',
										showCancel: false,
										success: res => {
											if (res.confirm) {
												uni.reLaunch({
													url: '../order-manage/order-manage'
												});
											}
										}
									});
								} else {
									uni.showModal({
										content: res.data || '取消订单失败',
										showCancel: false
									});
								}
							});
						}
					}
				});
			},
			//跳转到待审核
			skipAudit() {
				uni.navigateTo({
					url: '../cancel-audit/cancel-audit?order_no=' + this.orderInfo.order_no
				});
			},
			//小计数量
			subNum(data) {
				let subNum = 0;
				data.sku.map(i => {
					subNum += i.num;
				});
				return subNum;
			},
			//小计金额
			subtotal(data) {
				let subtotal = 0;
				data.sku.map(j => {
					subtotal += j.num * j.price;
				});
				return subtotal;
			},
			/*获取订单详情*/
			getOrder(order_no) {
				uni.showLoading({
					title: '加载中...'
				});
				orderQuery({
						order_no
					})
					.then(res => {
						if (res.code == 200) {
							this.orderInfo = res.data;
							this.getTime();
						} else {
							uni.showModal({
								content: res.data || '获取订单详情失败',
								showCancel: false
							});
						}
						uni.hideLoading();
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			/*复制订单号*/
			copy(data) {
				uni.setClipboardData({
					data,
					success: res => {
						uni.showToast({
							title: '复制成功'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					}
				})
			},
			/*用户自提*/
			pickUp(order_no) {
				pickUp({
					order_no
				}).then(res => {
					if (res.code == 200) {
						this.orderInfo.status = 2;
						uni.showToast({
							title: '成功',
							icon: 'none'
						});
					} else {
						uni.showModal({
							content: res.data || '失败',
							showCancel: false
						});
					}
				});
			},
			/*查看物流
			 * order_no  订单编号
			 * img 展示图片
			 */
			lookLogs() {
				uni.navigateTo({
					url: '../logistics-detail/logistics-detail?order_no=' + this.orderInfo.order_no + '&img=' +
						this.orderInfo.goods[0].img
				});
			},
			/*查看评价*/
			skipEval() {
				uni.navigateTo({
					url: '../evaluate/evaluate'
				});
			},
			/*物流发货*/
			sendGoods() {
				uni.navigateTo({
					url: '../send-goods/send-goods?order_no=' + this.orderInfo.order_no
				});
			},
			/*立即付款*/
			async payMent() {
				if (!this.isPay) {
					uni.showModal({
						content: '请稍后重试~',
						showCancel: false
					});
					return false;
				}
				this.isPay = false;
				uni.showLoading({
					title: '加载中...'
				})
				payMent({
						order_no: this.orderInfo.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.params.status = 2;
									this.getOrder();
								},
								fail: err => {
									uni.showModal({
										content: '支付失败'
									})
								}

							})
						} 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()
					});
			},
			/*联系客户*/
			callPhone() {
				if (!this.orderInfo.user.phone) {
					uni.showToast({
						title: '暂无联系方式',
						icon: 'none'
					});
					return false;
				}
				uni.makePhoneCall({
					phoneNumber: this.orderInfo.user.phone
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	//取消弹窗样式
	.cancel_box {
		position: relative;
		padding-bottom: 150rpx;

		image {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 24rpx;
			right: 20rpx;
		}

		.cancel_title {
			font-size: 36rpx;
			font-weight: bold;
			padding: 24rpx 0;
			text-align: center;
		}

		.cancel_hint {
			background: #FFF4F3;
			width: 100%;
			padding: 20rpx 24rpx;
			box-sizing: border-box;


			view {
				color: #FB231F;
			}
		}

		.reason_title {
			margin-left: 24rpx;
			font-size: 36rpx;
			font-weight: bold;
			padding: 24rpx 0 30rpx 0;
		}

		.reason_box {
			width: 720rpx;
			margin: 15rpx auto 0;
			padding: 30rpx;
			background: #f7f7f7;
			box-sizing: border-box;
			border-radius: 16rpx;

			textarea {
				width: 100%;
				min-height: 224rpx;

			}
		}

		.btn_box {
			width: 100%;
			height: 100rpx;
			border-top: 2rpx solid #eee;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;

			view {
				width: 702rpx;
				height: 88rpx;
				background: linear-gradient(93deg, #F30000 0%, #FE4815 100%);
				border-radius: 44rpx;
				opacity: 1;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.order_info {
		position: relative;
		width: 100%;
		min-height: 100%;
		background: #f9f8f9;

		.order_bg {
			width: 100%;
			height: 272rpx;
			position: relative;

			.img_bg {
				width: 100%;
				height: 272rpx;
			}

			.state {
				position: absolute;
				top: 3vh;
				left: 0rpx;
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;

				view,
				text {
					color: #fff;
					font-size: 28rpx;
				}

				view {
					magin-bottom: 15rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				.count_down {
					color: #ffe35d;
					margin-top: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
				}

				.fail {
					view:first-child {
						font-size: 38rpx;
					}

					view:last-child {
						font-size: 28rpx;
						font-weight: normal;
						margin-top: 10rpx;
					}
				}
			}
		}

		.order_con {
			width: 100%;
			position: relative;
			// margin-top: -50rpx;
			margin: -52rpx auto 0;
			padding-bottom: 140rpx;

			>view {
				width: 690rpx;
				margin: 0 auto;
				background: #fff;
				border-radius: 24rpx;
				padding: 20rpx 30rpx;
			}

			.top {
				border-radius: 24rpx;
				background: #fff;
				box-sizing: border-box;

				.log_info {

					.log_box {
						border-top: 1rpx solid #eee;
						padding-top: 20rpx;
					}

					.avatar {
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
						margin-right: 15rpx;
						flex-shrink: 0;
					}

					.iconfont {
						margin-right: 20rpx;
						color: $base-color;
						font-size: 45rpx;
						font-weight: bold;
					}

					.badge {
						width: 36rpx;
						height: 40rpx;
						margin-right: 15rpx;
					}

					.user {
						font-size: 30rpx;
						font-weight: bold;
					}

					.lately,
					.ads {
						text {
							font-weight: bold;
						}

						view {
							font-size: 28rpx;
							color: #999;
							margin-top: 14rpx;
						}
					}

					.ads {
						width: 90%;
						padding-bottom: 15rpx;

						text {
							font-size: 32rpx;
						}
					}

					.lately {
						width: 85%;

						text {
							font-size: 28rpx;
						}
					}

					.look_logs {
						border-left: 2rpx solid #e9e9e9;
						padding: 15rpx 0 15rpx 30rpx;
						font-size: 28rpx;
						color: #999;
						flex-shrink: 0;
					}

					.recomer {
						margin: 10rpx 0 10rpx 70rpx;

						text {
							font-size: 28rpx;
							color: #999;
						}
					}
				}

				.bind_box {
					width: 632rpx;
					padding-top: 24rpx;
					border-top: 2px solid #EEEEEE;
					margin-top: 10rpx;

					.bind {
						width: 200rpx;
						height: 64rpx;
						background: linear-gradient(90deg, #FFBF63 0%, #FC8924 100%);
						border-radius: 32rpx 32rpx 32rpx 32rpx;
						opacity: 1;
						color: #fff;
					}

				}
			}

			.ads_box {
				width: 690rpx;
				margin: 30rpx auto;
				padding: 30rpx;
				box-sizing: border-box;

				.iconfont {
					color: $base_color;
					margin-right: 10rpx;
					font-size: 40rpx;
					font-weight: bold;
				}

				.ads {
					text {
						font-size: 32rpx;
						font-weight: bold;
					}

					view {
						margin-top: 10rpx;
					}
				}
			}

			.order_box {
				width: 690rpx;
				margin: 30rpx auto;
				padding: 30rpx;
				box-sizing: border-box;

				.shop_name {
					padding: 0 30rpx 20rpx 0;
					border-bottom: 2rpx solid #eeeeee;

					text {
						font-size: 28rpx;
					}

					.iconfont {
						font-size: 35rpx;
						color: #999;
						margin-right: 10rpx;
						vertical-align: -2rpx;
					}
				}

				.goods_box {
					.goods_con {
						padding-top: 20rpx;

						.goods_info {
							.goods_img {
								width: 200rpx;
								height: 160rpx;
								margin-right: 26rpx;
								border-radius: 8rpx;
								flex-shrink: 0;
							}

							.goods_intr {
								.goods_name {
									font-size: 30rpx;
									font-weight: bold;
								}
							}
						}
					}

					.goods_size {
						margin-top: 30rpx;

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

					.goods_total {
						margin-top: 15rpx;
					}
				}

				.order_remark {
					.remark_title {
						font-size: 32rpx;
						font-weight: bold;
						padding: 15rpx 0;
					}

					.remark_box {
						width: 100%;
						background: #f8f8f8;
						min-height: 88rpx;
						padding: 20rpx 30rpx;
						border-radius: 16rpx;

						.edit_remark {
							width: 108rpx;
							height: 48rpx;
							background: #ffffff;
							border: 2rpx solid #fb231f;
							border-radius: 26rpx;
							background: #fff;
							margin-top: 15rpx;
							color: $base-color;
						}

						.finish {
							color: #fff;
							background: $base-line-bg;
							margin-left: 15rpx;
						}

						textarea {
							width: 100%;
						}
					}
				}
			}

			.order_intr {
				box-sizing: border-box;

				>view:not(:last-child) {
					margin-bottom: 20rpx;
				}

				>view {
					text:first-child {
						font-weight: bold;
					}
				}

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

					.sign {
						width: 298rpx;
						height: 630rpx;
						transform: rotate(270deg);
						border-radius: 24rpx;
						border: 2rpx solid #aaaaaa;
						margin: -80rpx 0 -100rpx 40rpx;
					}
				}
			}

			.order_total {
				width: 690rpx;
				margin: 20rpx auto 0;
				box-sizing: border-box;

				text {
					font-weight: bold;
				}
			}
		}

		.order_opera {
			width: 100%;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100rpx;
			z-index: 99;

			>view {
				padding: 0 30rpx;
			}

			.pay_btn {
				position: relative;
				height: 120rpx;

				view {
					width: 386rpx;
					font-size: 32rpx;
					color: #fff;
					height: 88rpx;
				}

				view:first-child {
					width: 199rpx;
					background: #FFF4F3;
					height: 84rpx;
					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;
					padding-left: 36rpx;
					box-sizing: border-box;
				}

				.recommend {
					width: 76rpx;
					height: 48rpx;
					position: absolute;
					top: 16rpx;
					right: 34rpx;
				}
			}

			.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;
				}
			}

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

			// padding: 0 15rpx;
		}
	}

	.price_box {
		.goods_price {
			.vip_ident {
				width: 56rpx;
				height: 40rpx;
				background: linear-gradient(226deg, #66647a 0%, #404146 100%);
				border-radius: 4rpx;
				font-size: 28rpx;
				color: #fcf7c0;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 10rpx;
			}

			.old_price {
				text-decoration: line-through;
				font-size: 28rpx;
				font-weight: 500;
			}

			.draw_off {
				text {
					color: #999;
				}
			}

			.symbol {
				font-size: 28rpx;
			}

			.price {
				font-weight: 600;
				font-size: 36rpx;

				text {
					color: $base-color;
				}
			}

			.vip {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.vip_active {
				font-size: 36rpx;
				font-weight: bold;

				text {
					color: $base-color;
				}
			}

			.vip_img {
				width: 88rpx;
				height: 36rpx;
				vertical-align: -6rpx;
				margin-right: 10rpx;
			}
		}
	}

	.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: 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: 20rpx 0;
			}

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

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

	.qrimg {
		opacity: 0;
	}
</style>
