<template>
	<view class="detail">
		<view>
			<u-navbar title="订单详情" back-icon-color="#fff" :border-bottom="false" title-color="#333"
				:background="background"></u-navbar>
		</view>
		<view class="send">
			<!-- 进行中的订单 -->
			<block v-if="order.order_status == OrderStatusEnum.NORMAL.value">
				<!-- 待支付 -->
				<block v-if="order.pay_status == PayStatusEnum.PENDING.value">
					<image class="car" src="/static/order/status/wait_pay.png" mode="aspectFit"></image>
				</block>
				<!-- 待发货 -->
				<block v-else-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
					<image class="car" src="/static/order/status/wait_deliver.png" mode="aspectFit"></image>
				</block>
				<!-- 待收货 -->
				<block v-else-if="order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
					<image class="car" src="/static/order/status/wait_receipt.png" mode="aspectFit"></image>
				</block>
			</block>
			<!-- 已完成 -->
			<block v-if="order.order_status == OrderStatusEnum.COMPLETED.value">
				<image class="image" src="/static/order/status/received.png" mode="aspectFit"></image>
			</block>
			<!-- 已取消/待取消 -->
			<block
				v-if="order.order_status == OrderStatusEnum.CANCELLED.value || order.order_status == OrderStatusEnum.APPLY_CANCEL.value">
				<image class="image" src="/static/order/status/close.png" mode="aspectFit"></image>
			</block>
			<view class="sendInfo">
				<view class="shopInfo">
					<text>{{order.state_text}}</text>
				</view>
				<view class="sendTime">
					{{order.create_time}}
				</view>
			</view>
		</view>
		<view class="consignee" v-if="order.delivery_type == DeliveryTypeEnum.EXTRACT.value">
			<view class="conLeft">
				<view class="thr">
					<view class="peo">提货人</view>
					<view class="name">{{ order.extract_shop.linkman }}</view>
				</view>
				<view class="thr">
					<view class="peo">手机号</view>
					<view class="name">{{ order.extract_shop.phone }}</view>
				</view>
				<view class="thr">
					<view class="peo">预计到店时间</view>
					<view class="name">2023-12-20 09:15</view>
				</view>
			</view>
			<view class="conRight" @click="openCode">
				<view class="code">
					核销码
				</view>
				<view class="codeNum">
					<image :src="qrcodeImage" @click="clickImg" mode=""></image>
				</view>
				<view class="openCode">
					点击放大核销码
				</view>
			</view>
		</view>
		<view class="sendHome"
			v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
			<view class="fline">
				<view class="leftInfo">
					<image src="/static/order/am.png" mode="" class="am"></image>
					<view class="gp">
						<text>{{ order.address.name }}</text>
						{{ order.address.phone }}
					</view>
				</view>
				<view class="up" @click="onAdress(order.goods_id)"
					v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
					修改
				</view>
			</view>
			<view class="sl">
				<text v-for="(region, idx) in order.address.region" :key="idx">{{ region }}</text>
				{{order.address.detail}}
			</view>
			<view class="fline">
				<view class="leftInfo">
					<image src="/static/order/cd.png" mode="" class="am"></image>
					<view class="gp">
						<text>收货方式：</text>
						{{order.delivery_type==10?'快递配送':'门店自提'}}
					</view>
				</view>
				<view class="up" @click="onCdDia(order.goods_id)"
					v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
					我要催单
				</view>
			</view>
		</view>
		<view class="goodsDetail">
			<view class="goodsType">
				<image v-if="order.storeInfo" :src="order.storeInfo.image_url" mode="" class="bag"></image>
				<text v-if="order.storeInfo">{{order.storeInfo.store_name}}</text>
			</view>
			<view class="goods" v-for="(goods, idx) in order.goods" :key="idx"
				@click="handleTargetGoods(goods.goods_id)">
				<view class="goodsImg">
					<image :src="goods.goods_image" mode="aspectFill"></image>
				</view>
				<view class="goodsInfo">
					<view class="goodsName">{{ goods.goods_name }}</view>
					<view class="goodsPrice">
						<text>￥{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text>
					</view>
				</view>
				<view class="">
					<view class="goodsNum">
						x{{ goods.total_num }}
					</view>
					<view class="up2" style="margin-top: 20rpx;" @tap.stop="onRefund(goods.order_id,goods,order)"
						v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value && order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
						退款
					</view>
					<view class="up2" style="margin-top: 20rpx;" @tap.stop="onRefund(goods.order_id,goods,order)"
						v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.receipt_status == ReceiptStatusEnum.RECEIVED.value && order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
						换货
					</view>
				</view>
			</view>
			<view class="line" v-if="order.pay_status == PayStatusEnum.PENDING.value">
			</view>
			<view class="cancel" @click="onCancel(order.order_id)"
				v-if="order.pay_status == PayStatusEnum.PENDING.value">
				取消订单
			</view>
		</view>

		<view class="orderTips">
			<view class="orderTitle">
				<view class="total">
					订单编号:
				</view>
				<view class="price">
					{{ order.order_no }}
				</view>
				<view class="copy" @click="handleCopy(order.order_no)">
					复制
				</view>
			</view>
			<view class="orderTitle" v-if="order.pay_status == PayStatusEnum.SUCCESS.value">
				<view class="total">
					支付方式：
				</view>
				<view class="price">
					{{order.pay_method}}
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					商品快照：
				</view>
				<view class="price">
					核对交易细节时，可作为判断依据
				</view>
				<view class="copy">
					查看
				</view>
			</view>
			<view class="orderTitle" v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
				<view class="total" v-if="order.delivery[0].delivery_method != DeliveryMethodEnum.UNWANTED.value">
					物流公司：
				</view>
				<view class="price">
					{{order.delivery[0].express ? order.delivery[0].express.express_name : '--' }}
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					下单时间：
				</view>
				<view class="price">
					{{ order.create_time }}
				</view>
			</view>
			<view class="orderTitle" v-if="order.pay_status == PayStatusEnum.SUCCESS.value">
				<view class="total">
					支付时间：
				</view>
				<view class="price">
					{{order.pay_time}}
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					期待配送时间：
				</view>
				<view class="price">
					{{order.receipt_time}}
				</view>
			</view>
			<view class="line">
			</view>
			<view class="amount">
				<view class="share">
					<image src="/static/order/share.png" mode=""></image>
					分享
				</view>
				<view class="sp">

				</view>
				<view class="callShop" @click="callStore(order.storeInfo.phone)">
					<image src="/static/order/share.png" mode=""></image>
					联系商家
				</view>
			</view>
		</view>
		<view class="pickedUp" v-if="order.delivery_type == DeliveryTypeEnum.EXTRACT.value">
			<view class="orderTitle">
				<view class="total">
					提货状态:
				</view>
				<view class="price">
					{{order.ziti_status==0?'没提':'已提货'}}
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					提货日期：
				</view>
				<view class="price">
					{{order.ziti_time}}
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					提货照片：
				</view>
				<view class="price" v-if="order.ziti_image.length">
					<image v-for="(img, idx) in order.ziti_image" :key="idx" :src="img" mode="" class="goodsImag">
					</image>
				</view>
			</view>
		</view>
		<view v-if="menushow" class="menuarea">
			<view class="menulist">
				<view class="" @click="onInvoicing(order.order_id)"
					v-if="order.order_status == OrderStatusEnum.COMPLETED.value">
					申请开票
				</view>
				<view class="" @click="onDelete(order.order_id)"
					v-if="order.order_status == OrderStatusEnum.COMPLETED.value">
					删除订单
				</view>
				<view class="" v-if="order.pay_status == PayStatusEnum.PENDING.value" @click="onCancel(order.order_id)">
					取消订单
				</view>
			</view>
			<view class="trangle"></view>
		</view>
		<view class="footer">
			<view class="meetPrice" @click="changeMenu"
				v-if="order.order_status == OrderStatusEnum.COMPLETED.value || order.pay_status == PayStatusEnum.PENDING.value">
				更多
			</view>
			<view v-else style="color: #fff;">-</view>
			<view class="fooRight">
				<view class="buyAgain" @click="handleTargetGoods(goods.goods_id)"
					v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == ReceiptStatusEnum.NOT_RECEIVED.value">
					再次购买
				</view>
				<view class="buyAgain" @click="onPay(order.order_id)"
					v-if="order.pay_status == PayStatusEnum.PENDING.value">
					继续付款
				</view>
				<view class="buyAgain" @click="onExtractQRCode(order.order_id)" v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_type == DeliveryTypeEnum.EXTRACT.value
					&& order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
					核销码
				</view>
				<view class="buyAgain" @click="handleTargetExpress(order.order_id)"
					v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value">
					查看物流
				</view>
				<view class="buyAgain" @click="onReceipt(order.order_id)"
					v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
					确认收货
				</view>
				<view class="buyAgain" @click="onCdDia(order.order_id)"
					v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
					催发货
				</view>
				<view class="buyAgain"
					v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
					取消订单
				</view>
				<!-- <view class="buyAgain"
					v-if="order.order_status == OrderStatusEnum.COMPLETED.value && order.is_comment == 0"
					@click="handleTargetComment(order.order_id)">
					评价
				</view> -->
			</view>

		</view>
		<!-- 催单弹框 -->
		<view class="dia" v-if="cdDia">
			<view class="diaMain">
				<image src="/static/order/ld.png" mode="" class="ld"></image>
				<view class="cdTitle">
					催单成功
				</view>
				<view class="cdInfo">
					商家已收到您的催单提醒，您精心挑选的商品正在配送中，属于正常配送时效内，请您耐心等待，谢谢！
				</view>
				<view class="iKnow" @click="meKone()">
					我知道了
				</view>
			</view>
		</view>
		<view class="bigCode" v-if="showQRCodePopup" style="display: none;">
			<view class="cm">
				<view class="cm_text">
					核销码
				</view>
				<view class="txm">
					<image src="" mode="" class="codeImg"></image>
				</view>
				<view class="cline">
					<u-line border-style="dashed" color="#D0D0D0" />
				</view>
				<view class="sm">
					可前往门店扫码完成操作
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import img from "@/static/home/top.png"
	import {
		OrderTypeEnum,
		DeliveryStatusEnum,
		DeliveryTypeEnum,
		OrderStatusEnum,
		PayStatusEnum,
		ReceiptStatusEnum
	} from '@/common/enum/order'
	import {
		DeliveryMethodEnum
	} from '@/common/enum/order/delivery'
	import * as OrderApi from '@/api/order'
	export default {
		data() {
			return {
				background: {
					background: 'url(' + img + ') center top no-repeat',
					backgroundSize: '100% auto',
				},
				// 枚举类
				OrderTypeEnum,
				DeliveryStatusEnum,
				DeliveryTypeEnum,
				OrderStatusEnum,
				PayStatusEnum,
				ReceiptStatusEnum,
				DeliveryMethodEnum,
				// 当前订单ID
				orderId: null,
				// 加载中
				isLoading: true,
				// 当前订单详情
				order: {},
				// 当前设置
				setting: {},
				// 核销二维码弹窗
				showQRCodePopup: false,
				// 核销二维码图片url (通过后端获取)
				qrcodeImage: '',
				// 控制onShow事件是否刷新订单信息
				canReset: false,
				cdDia: false,
				menushow: false,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad({
			orderId
		}) {
			// 当前订单ID
			this.orderId = orderId
			// 获取当前订单信息
			this.getOrderDetail()
			// 注册全局事件订阅: 是否刷新当前订单数据
			uni.$on('syncRefresh', (val, isCur) => {
				if (!isCur) {
					this.canReset = val
				}
			})
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.canReset && this.getOrderDetail()
			this.canReset = false
		},

		methods: {
			// 联系商家
			callStore(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			changeMenu() {
				this.menushow = !this.menushow
			},
			meKone() {
				this.cdDia = false
			},
			onCdDia(orderId) {
				const app = this
				OrderApi.orderfast(orderId)
					.then(result => {
						if (result.status == 200) {
							this.cdDia = true
						}

					})

			},
			clickImg() {
				uni.previewImage({
					urls: [this.qrcodeImage], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// 获取当前订单信息
			getOrderDetail(canReset = false) {
				const app = this
				app.isLoading = true
				OrderApi.detail(app.orderId)
					.then(result => {
						app.order = result.data.order
						app.setting = result.data.setting
						app.isLoading = false
					})
				// 相应全局事件订阅: 刷新上级页面数据
				canReset && uni.$emit('syncRefresh', true, true)
			},

			// 复制指定内容
			handleCopy(value) {
				const app = this
				uni.setClipboardData({
					data: value,
					success: () => app.$toast('复制成功'),
					fail: ({
						errMsg
					}) => app.$toast('复制失败 ' + errMsg)
				})
			},

			// 跳转到门店详情页
			handleTargetExtract(shopId) {
				this.$navTo('pages/shop/detail', {
					shopId
				})
			},

			// 跳转到物流跟踪页面
			handleTargetExpress() {
				this.$navTo('pages/order/express/index', {
					orderId: this.orderId
				})
			},

			// 跳转到商品详情页面
			handleTargetGoods(goodsId) {
				this.$navTo('pages/goods/detail', {
					goodsId
				})
			},

			// 跳转到申请售后页面
			handleApplyRefund(orderGoodsId) {
				this.$navTo('pages/refund/apply', {
					orderGoodsId
				})
			},
			// 修改地址
			onAdress(orderId) {
				this.$navTo('pages/address/index', {
					orderId
				})
			},
			// 点击去开票
			onInvoicing(orderId) {
				this.$navTo('pages/invoice/edit', {
					orderId
				})
			},
			// 取消订单
			onCancel(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认要取消该订单吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.cancel(orderId)
								.then(result => {
									// 显示成功信息
									app.$toast(result.message)
									setTimeout(() => {
										// 刷新当前订单数据
										app.getOrderDetail(true)
									}, 1500)
								})
						}
					}
				});
			},
			// 删除订单
			onDelete(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '删除之后订单无法恢复，无法处理您的售后问题 ，请慎重考虑，确认要删除该订单吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.del(orderId)
								.then(result => {
									// 显示成功信息
									app.$toast(result.message)
									uni.$emit('syncRefresh');
									uni.navigateBack(1)
								})
						}
					}
				});
			},
			// 确认收货
			onReceipt(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认收到商品了吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.receipt(orderId)
								.then(result => {
									// 显示成功信息
									app.$success(result.message)
									setTimeout(() => {
										// 刷新当前订单数据
										app.getOrderDetail(true)
									}, 1500)
								})
						}
					}
				});
			},

			// 获取核销二维码
			onExtractQRCode(orderId) {
				const app = this
				OrderApi.extractQrcode(orderId, {
						channel: app.platform
					})
					.then(result => {
						app.qrcodeImage = result.data.qrcode
						app.showQRCodePopup = true
					})
			},
			// 点击去退款
			onRefund(orderId, order, item) {
				uni.navigateTo({
					url: '/pages/order/refund/refund?orderId=' + orderId + '&order=' + JSON.stringify(order) +
						"&deliveryStatus=" + item.delivery_status + '&receiptStatus=' + item.receipt_status
				})
			},
			// 点击去支付
			onPay(orderId) {
				this.$navTo('pages/checkout/cashier/index', {
					orderId
				})
			},

			// 跳转到订单评价页
			handleTargetComment(orderId) {
				this.$navTo('pages/order/comment/index', {
					orderId
				})
			},

		},

	}
</script>

<style lang="scss" scoped>
	.detail {
		width: 750rpx;
		padding-bottom: 150rpx;
		background-image: url('../../static/home/homeback.png');
		background-size: 100% 100%;
	}

	.menuarea {
		width: 100%;
		height: 100%;
	}

	.menulist {
		background-color: #FFF;
		border: 1rpx solid #F4F4F4;
		width: 150rpx;
		min-height: 50rpx;
		position: fixed;
		left: 28rpx;
		bottom: 90rpx;
		border-radius: 14rpx;
		text-align: center;
		padding: 10rpx 0;
		z-index: 99999;
	}

	.menulist view {
		width: 100%;
		height: 50rpx;
		color: #333;
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		line-height: 50rpx;

	}

	.trangle {
		width: 0px;
		height: 0px;
		position: absolute;
		border: 10rpx solid #FFF;
		border-top-color: #FFF;
		border-bottom-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent;
		left: 16rpx;
		bottom: 60rpx;
	}

	.leftText {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #F21A1C;
		line-height: 28rpx;
	}

	.address {
		margin-left: 26rpx;
		background-image: url('../../static/order/map.png');
		width: 694rpx;
		height: 154rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 52rpx 0 32rpx;

		.addAddress {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #F32E2E;
		}

		.leftImg {
			width: 18rpx;
			height: 18rpx;

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

	.send {
		width: 694rpx;
		height: 154rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 12rpx 0 0 26rpx;
		display: flex;
		padding: 32rpx 46rpx 32rpx 38rpx;

		.car {
			width: 42rpx;
			height: 35rpx;
			margin-right: 40rpx;
			margin-top: 20rpx;
		}

		.sendInfo {

			.shopInfo {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}

			.sendTime {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #606060;
				line-height: 34rpx;
				margin-top: 16rpx;
			}
		}

		.sendIcon {
			width: 18rpx;
			height: 18rpx;
			margin: 40rpx 0 0 150rpx;
		}
	}

	.sendHome {
		width: 694rpx;
		height: 218rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 14rpx 0 0 26rpx;
		padding: 18rpx 16rpx 16rpx 34rpx;

		.fline {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.leftInfo {
				display: flex;
			}

			.up {
				width: 114rpx;
				height: 50rpx;
				background: #FFFFFF;
				border-radius: 88rpx 88rpx 88rpx 88rpx;
				opacity: 1;
				border: 1rpx solid #D9D9D9;
				text-align: center;
				line-height: 50rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #676767;
			}

			.am {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}

			.gp {
				height: 28rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #838383;
				line-height: 28rpx;

				text {
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					margin-right: 8rpx;
				}
			}
		}

		.sl {
			width: 474rpx;
			height: 68rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #838383;
			line-height: 28rpx;
			margin-top: 6rpx;
			margin-left: 60rpx;
		}
	}

	.consignee {
		width: 694rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 12rpx 0 0 26rpx;
		display: flex;
		justify-content: space-between;
		padding: 24rpx 36rpx 6rpx 32rpx;

		.conLeft {
			.thr {
				display: flex;
				width: 474rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #838383;
				line-height: 34rpx;
				margin-bottom: 20rpx;

				.peo {
					width: 160rpx;
				}

				.name {
					color: #333333;

				}
			}

		}

		.conRight {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #F21A1C;
			display: flex;
			flex-direction: column;
			align-items: center;

			.code {
				height: 34rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				margin-bottom: 8rpx;
			}

			.codeNum {
				width: 80rpx;
				height: 78rpx;

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

			.openCode {
				height: 28rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #848484;
				line-height: 23rpx;
				margin-top: 4rpx;
			}
		}
	}

	.goodsDetail {
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 12rpx 0 0 26rpx;
		padding: 32rpx 24rpx 24rpx 38rpx;

		.goodsType {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;

			.bag {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}

			.leftIcon {
				width: 18rpx;
				height: 18rpx;
				margin-left: 20rpx;
			}
		}

		.goods {
			display: flex;
			align-items: center;
			margin-top: 28rpx;

			.goodsImg {
				width: 162rpx;
				height: 148rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;

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

			.goodsInfo {
				margin-left: 20rpx;

				.goodsName {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #1E1E1E;
					line-height: 40rpx;
					margin-bottom: 4rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					width: 420rpx;
				}

				.goodsPrice {
					height: 50rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #F21A1C;
					line-height: 50rpx;

					text {
						font-size: 36rpx;
					}
				}
			}

			.goodsNum {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #1E1E1E;
				margin-left: 100rpx;
			}
		}

		.serve {
			display: flex;
			justify-content: space-between;

			.serveTitle {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
				line-height: 34rpx;
			}

			.chose {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 34rpx;

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

		.line {
			width: 100%;
			height: 0rpx;
			opacity: 1;
			border: 2rpx solid #F4F4F4;
			margin: 32rpx 0 20rpx 0;
		}

		.up {
			width: 114rpx;
			height: 50rpx;
			background: #FFFFFF;
			border-radius: 88rpx 88rpx 88rpx 88rpx;
			opacity: 1;
			border: 1rpx solid #D9D9D9;
			text-align: center;
			line-height: 50rpx;
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #676767;
		}

		.cancel {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #1E1E1E;
			line-height: 34rpx;
			text-align: center;
		}
	}

	.orderTips {
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 12rpx 0 0 26rpx;
		padding: 22rpx 36rpx 50rpx 24rpx;

		.orderTitle {
			position: relative;
			margin-bottom: 24rpx;
			display: flex;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #2D2D2D;
			line-height: 34rpx;

			.total {
				font-size: 24rpx;
				color: #7E7E7E;
			}

			.price {
				.couponNum {
					font-size: 28rpx;
					color: #F42B17;
				}

				font-size: 28rpx;

				image {
					width: 18rpx;
					height: 18rpx;
					margin-left: 18rpx;
				}
			}

			.copy {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #F63016;
				line-height: 34rpx;
				position: absolute;
				right: 0;
			}
		}

		.amount {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20rpx;

			.share {
				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
				}

				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC,
				PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
				line-height: 34rpx;
			}

			.sp {
				width: 0rpx;
				height: 38rpx;
				opacity: 1;
				border: 2rpx solid #ECECEC;
			}

			.callShop {
				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
				}

				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC,
				PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
				line-height: 34rpx;
			}
		}
	}

	.line {
		width: 100%;
		height: 0rpx;
		opacity: 1;
		border: 2rpx solid #F1F1F1;
	}

	.pickedUp {
		width: 694rpx;
		height: 310rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 14rpx 0 0 26rpx;
		padding: 32rpx 50rpx 0 42rpx;

		.orderTitle {
			position: relative;
			margin-bottom: 24rpx;
			display: flex;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #2D2D2D;
			line-height: 34rpx;

			.total {
				font-size: 24rpx;
				color: #7E7E7E;
				margin-right: 10rpx;
			}

			.price {
				.couponNum {
					font-size: 28rpx;
					color: #F42B17;
				}

				font-size: 28rpx;

				image {
					width: 18rpx;
					height: 18rpx;
					margin-left: 18rpx;
				}

				.goodsImag {
					width: 144rpx;
					height: 132rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					margin-right: 26rpx;
				}
			}

			.copy {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #F63016;
				line-height: 34rpx;
				position: absolute;
				right: 0;
			}
		}
	}

	.footer {
		width: 100%;
		height: 120rpx;
		position: fixed;
		background-color: #FFF;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.meetPrice {
			margin-left: 26rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #000000;

			.type {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #F42B17;
				margin-left: 12rpx;
			}

			.price {
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #F42B17;
			}
		}

		.fooRight {
			display: flex;
			align-items: center;
		}

		.buyAgain {
			width: 146rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 76rpx 76rpx 76rpx 76rpx;
			opacity: 1;
			border: 2rpx solid #D9D9D9;
			text-align: center;
			line-height: 68rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333;
			margin-right: 14rpx;
		}

		.btn {
			width: 214rpx;
			height: 74rpx;
			background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			opacity: 1;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 74rpx;
			margin-right: 20rpx;
		}
	}

	.dia {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;

		.diaMain {
			width: 560rpx;
			height: 432rpx;
			background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			position: relative;

			.ld {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				top: -50rpx;
				left: 230rpx;
			}

			.cdTitle {
				width: 128rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 44rpx;
				margin: 80rpx 0 0 216rpx;
			}

			.cdInfo {
				width: 498rpx;
				height: 120rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #727272;
				line-height: 33rpx;
				margin-left: 48rpx;
				margin-top: 28rpx;
			}

			.iKnow {
				width: 412rpx;
				height: 72rpx;
				background: #F55349;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 72rpx;
				margin: 36rpx 0 0 74rpx;
				text-align: center;
			}
		}
	}

	.bigCode {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(65, 65, 65, 0.46);
		display: flex;
		align-items: center;
		justify-content: center;

		.cm {
			width: 560rpx;
			height: 714rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			padding-top: 44rpx;

			.cm_text {
				width: 100%;
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #424242;
				line-height: 42rpx;
				text-align: center;
			}

			.txm {
				.codeImg {
					width: 394rpx;
					height: 458rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
				}

			}

			.cline {
				padding: 0 34rpx;
				margin: 46rpx 0 30rpx 0;
			}

			.sm {
				width: 100%;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #979797;
				line-height: 28rpx;
				text-align: center;
			}

		}
	}

	.up2 {
		width: 114rpx;
		height: 50rpx;
		background: #FFFFFF;
		border-radius: 88rpx 88rpx 88rpx 88rpx;
		opacity: 1;
		border: 1rpx solid #D9D9D9;
		text-align: center;
		line-height: 50rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #676767;
	}
</style>