<template>
	<view :class="{ 'wait-recv-page-container': order.statusType == 'wait_recv' }">
		<nav-bar class="nav-bar" title=""
			:bgColor="(isScrolled || order.statusType != 'wait_recv') ? '#FFFFFF' : 'transparent'"
			:buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton" tipLayerType="taobao-shangou-detail"
			isTipLayer tipLayerText="修改订单信息">
			<template v-slot:left>
				<image class="back-icon" src="/static/image/shopping/taobao/back.png" mode="aspectFit"
					@click="util.goBack()"></image>
			</template>
			<template v-slot:right>
				<view class="right-box flex-align-center">
					<view v-if="order.statusType == 'wait_recv'" class="item flex-column flex-align-center"
						style="background-color: #FFFFFF;width: 70rpx;">
						<image class="icon" src="/static/image/shopping/taobao/waimai/shuaxin.png"></image>
						<text class="text">刷新</text>
					</view>
					<view class="item flex-column flex-align-center" style="background-color: #FFFFFF;width: 70rpx;">
						<image class="icon" src="/static/image/shopping/taobao/waimai/kefu.png"></image>
						<text class="text">客服</text>
					</view>
					<view class="item flex-column flex-align-center">
						<image class="icon" src="/static/image/shopping/taobao/xiaoxi.png"></image>
						<text class="text" style="opacity: 0;">消息</text>
					</view>
				</view>
			</template>
		</nav-bar>
		<!-- 待收货骑手地图 -->
		<view v-if="order.statusType == 'wait_recv'" class="map-box"
			:style="{ 'background-image': 'url(' + (order.mapUrl || defaultMap) + ')' }">
			<image style="width: 100%;opacity: 0;" :src="order.mapUrl || defaultMap" mode="widthFix">
			</image>
			<view class="qishou flex-align-center flex-column">
				<view class="qishou-info">
					<view class="title">骑手正在按序送货</view>
					<text class="time">前方剩余<text class="num green">{{ order.orderQty }}</text>，约<text class="green">{{
						order.surplusDeliveryTime }}</text>送达</text>
				</view>
				<image style="width: 80rpx;height: 80rpx;" src="/static/image/shopping/taobao/waimai/qishou.png">
				</image>
			</view>
			<view class="bottom-box">
				<view class="tips-box flex-align-center">
					<image class="icon" src="/static/image/shopping/taobao/waimai/baozhang.png"></image>
					<text class="text">蜂鸟准时达·超20分钟免单·号...</text>
					<uni-icons type="right" size="14" color="#8C8C8C"></uni-icons>
				</view>
				<view class="dingdanzhushou flex">
					<image class="icon" src="/static/image/shopping/taobao/waimai/dingdanzhushou.png"></image>
					<view class="right-box">
						<view class="flex-align-center">
							<image src="/static/image/shopping/taobao/waimai/title-text.png"
								style="height: 34rpx;margin-right: 12rpx;" mode="heightFix">
							</image>
							<uni-icons type="right" size="14" color="#1A1A1A"></uni-icons>
						</view>
						<view class="flex-align-center bottom">
							<text>尊敬的用户，骑手正在按顺序送货，请您耐心等待</text>
							<view class="btn">去看看</view>
						</view>
					</view>
				</view>
			</view>



		</view>

		<view v-if="order.statusType != 'wait_recv'" class="wait_pay">
			<view class="flex-align-center">
				<text v-if="order.statusType == 'wait_pay'" class="main-text">待支付，剩余{{ order.remainingPayTime }}</text>
				<text v-else class="main-text">{{ order.statusType == 'success' ? '订单已送达' : '订单已取消' }}</text>
				<uni-icons v-if="order.statusType != 'closed'" type="right" size="16" color="#1A1A1A"></uni-icons>
			</view>
			<view v-if="order.statusType == 'wait_pay'" class="flex-align-center notice-box">
				<image style="width:26rpx;height: 26rpx;" src="/static/image/shopping/taobao/waimai/notice.png"></image>
				<text class="notice-text">15分钟内未支付,订单将自动取消</text>
			</view>
		</view>
		<view class="deliver-info">
			<view v-if="order.statusType == 'closed' || order.statusType == 'success'" class="bold-text">
				{{ order.statusType == 'closed' ? '抱歉，我们会努力改进' : '已送到指定位置，请及时取餐' }}
			</view>
			<view v-if="order.statusType == 'wait_recv' || order.statusType == 'wait_pay'"
				style="justify-content: baseline;">
				<text class="label">预计</text>
				<text class="time">{{ order.deliveryTime }}</text>
			</view>
			<view v-if="order.statusType != 'closed'" class="flex"
				style="margin-top: 26rpx;justify-content: flex-start;">
				<text class="label">送至</text>
				<view class="flex-1 address-info" style="max-width: 550rpx;">
					<text>{{order.orderInfo.find(item => item.label === '收货信息')?.value || ''}}</text>
					<template v-if="order.statusType != 'success'">
						<text class="split"></text>
						<text class="edit-text">修改</text>
						<uni-icons type="right" size="12" color="#8C8C8C"></uni-icons>
					</template>
				</view>
				<view class="delivery-photo" v-if="order.statusType == 'success'">
					<image style="width: 80rpx;height: 80rpx;" :src="order.deliveryPhoto" mode="aspectFill"></image>
				</view>
			</view>
			<view v-if="order.statusType == 'wait_recv'" class="flex"
				style="margin-top: 26rpx;justify-content: flex-start;">
				<text class="label">服务</text>
				<view class="flex-1 address-info">
					<text style="color: #1AA35B;">超20分钟免单-生效中</text>
					<text> 若超时，即{{ timeoutDelivery }}后送达赔4元可叠加红包</text>
					<uni-icons type="right" size="12" color="#8C8C8C"></uni-icons>
				</view>
			</view>
		</view>
		<view v-if="order.statusType == 'wait_pay'" class="wait_pay-buttom">
			<view class="button flex-center flex-column">
				<text style="font-size: 32rpx;line-height: 32rpx;">去支付 ￥{{ order.priceDetail.actualPay }}</text>
				<text style="font-size: 24rpx;line-height: 24rpx;margin-top: 4rpx;">支持更多支付方式</text>
			</view>
		</view>
		<view class="icon-list-item flex">
			<view class="flex-1 flex-align-center icon-box"
				:class="{ 'flex-justify-center': order.statusType == 'closed' }">
				<template v-for="(item, index) in items" :key="index">
					<view v-if="item.show()" class="item flex-center flex-column">
						<image class="img" :src="item.image" mode="aspectFit"></image>
						<text :style="{ color: item.color || '#1a1a1a	' }">{{ item.text }}</text>
					</view>
				</template>
			</view>

			<view v-if="order.statusType == 'wait_recv' || order.statusType == 'success'"
				class="flex-align-center more">
				<view style="margin-right: 18rpx;color: #E9E9E9;">|</view>
				<view class="item flex-center flex-column" style="width: auto;min-width: 0;margin-right: 0;">
					<image class="img" src="/static/image/shopping/taobao/waimai/gengduo.png" mode="aspectFit">
					</image>
					<text>更多</text>
				</view>
			</view>

		</view>
		<view v-if="order.statusType == 'wait_recv' || order.statusType == 'success'" class="banner-box">
			<image style="width: 100%;" src="/static/image/shopping/taobao/waimai/banner.png" mode="widthFix"></image>
		</view>
	</view>
	<view class="product-info-box">
		<!-- 订单详情卡片 -->
		<view class="info-card">
			<view class="shop-title-box">
				<image style="width: 56rpx; height: 26rpx; margin-right: 10rpx;flex-shrink: 0;"
					src="/static/image/shopping/taobao/waimai/shangou.png"></image>
				<text class="shop-name">{{ order.shopName }}({{ order.location }})</text>
				<uni-icons type="right" size="16" color="#8C8C8C"></uni-icons>
			</view>

			<view class="goods-collapsed flex-between" v-if="!isExpanded" @click="isExpanded = true">
				<view class="images flex flex-1" style="overflow: hidden;">
					<image v-for="(item, index) in order.goodsList.slice(0, 4)" :key="index" class="img"
						:src="item.image" mode="aspectFill"></image>
				</view>
				<view class="count">共{{ order.goodsList.length }}件</view>
			</view>

			<template v-else>
				<view class="goods-item flex" v-for="(item, index) in order.goodsList" :key="index">
					<view class="goods-img-box">
						<image class="goods-img" :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="goods-middle flex-1 flex-column">
						<text class="title">{{ item.title }}</text>
						<text class="spec" v-if="item.spec">{{ item.spec }}</text>
						<text class="count">x {{ item.count }}</text>
					</view>
					<view class="goods-right flex-column flex-align-end">
						<view class="actual-price"><text class="label">实付</text><text
								class="symbol wx-font-medium">￥</text><text class="num wx-font-medium">{{
									item.actualPrice }}</text></view>
						<text class="ori-price wx-font-regular" v-if="item.oriPrice">￥{{ item.oriPrice }}</text>
					</view>
				</view>

				<view class="fee-item flex-between" v-for="(fee, index) in order.fees" :key="'fee-' + index">
					<view class="fee-left flex-align-center">
						<text>{{ fee.name }}</text>
						<uni-icons v-if="fee.showQuestion" type="help" size="16" color="#C6C6C6"
							style="margin-left: 8rpx;"></uni-icons>
					</view>
					<view class="fee-right flex-column flex-align-end">
						<view class="actual-price"><text class="label">实付</text><text
								class="symbol wx-font-medium">￥</text><text class="num wx-font-medium">{{
									fee.actualPrice }}</text></view>
						<text class="ori-price wx-font-regular" v-if="fee.oriPrice">￥{{ fee.oriPrice }}</text>
					</view>
				</view>

				<view class="fee-item flex-between" style="align-items: center;"
					v-for="(comp, index) in order.compensations" :key="'comp-' + index">
					<view class="fee-left flex-align-center">
						<text>{{ comp.name }}</text>
						<uni-icons v-if="comp.showQuestion" type="help" size="16" color="#C6C6C6"
							style="margin-left: 6rpx;"></uni-icons>
					</view>
					<view class="fee-right">
						<text :class="comp.isRed ? 'red-text' : ''">{{ comp.value }}</text>
					</view>
				</view>
			</template>

			<view class="price-detail-title flex-between" @click="isExpanded = !isExpanded"
				:style="!isExpanded ? 'margin-bottom: 30rpx;' : ''">
				<view class="left flex-align-center">
					<text>价格明细</text>
					<uni-icons :type="isExpanded ? 'up' : 'down'" size="14" color="#8C8C8C"
						style="margin-left: 6rpx;"></uni-icons>
				</view>
				<view class="right">
					<text class="total-discount">总优惠
						<text class="symbol wx-font-medium">￥
							<text style="font-size: 34rpx;">{{ order.priceDetail.totalDiscount }}</text>
						</text></text>
					<text class="total-actual">实付<text class="symbol wx-font-medium">￥</text><text
							class="num wx-font-medium">{{
								order.priceDetail.actualPay }}</text></text>
				</view>
			</view>

			<view class="price-detail-list" v-if="isExpanded">
				<template v-for="(detail, index) in order.priceDetail.details" :key="'detail-' + index">
					<view v-if="detail.name && detail.value" class="detail-item flex-between">
						<text class="label">{{ detail.name }}</text>
						<text class="val alipay-font" :class="{ 'bold-val': detail.isBold, 'red-val': detail.isRed }">{{
							detail.value
						}}</text>
					</view>
				</template>

			</view>

			<view class="divider-line"></view>

			<view class="order-info-area">
				<template v-for="(info, index) in order.orderInfo" :key="'info-' + index">
					<view class="order-item flex" v-if="isOrderInfoExpanded || info.isFoldDisplay"
						:style="info.label === '收货信息' ? 'align-items: flex-start;' : ''">
						<text class="label" :style="info.label === '收货信息' ? 'line-height:36rpx;' : ''">{{ info.label
						}}</text>
						<view class="val flex-1 flex-align-center" style="justify-content: flex-end;">
							<text :style="info.label === '收货信息' ? 'text-align: right;line-height:36rpx;' : ''">{{
								info.value
							}}</text>
							<template v-if="info.hasModify">
								<text class="split" style="margin-left: 8rpx; margin-right: 8rpx;">|</text>
								<text class="copy-btn">修改</text>
							</template>
							<template v-if="info.hasSetting">
								<text class="split" style="margin-left: 8rpx; margin-right: 8rpx;">|</text>
								<text class="copy-btn">设置</text>
							</template>
							<template v-if="info.hasArrow">
								<uni-icons type="right" size="12" color="#7C8495"></uni-icons>
							</template>
							<template v-if="info.hasCopy">
								<text class="split" style="margin-left: 8rpx; margin-right: 8rpx;">|</text>
								<text class="copy-btn">复制</text>
							</template>
							<template v-if="info.hasApply">
								<text class="split" style="margin-left: 8rpx; margin-right: 8rpx;">|</text>
								<text class="copy-btn">申请</text>
							</template>
						</view>
					</view>
				</template>

				<view class="order-bottom-title flex-align-center" @click="isOrderInfoExpanded = !isOrderInfoExpanded">
					<text>订单信息</text>
					<uni-icons :type="isOrderInfoExpanded ? 'up' : 'down'" size="14" color="#7C8495"
						style="margin-left: 8rpx;margin-top: 6rpx;"></uni-icons>
				</view>
			</view>
		</view>
	</view>

	<view class="common-problem-box flex-align-center flex-justify-between">
		<text>常见问题</text>
		<view class="flex-align-center">
			<view class="item">少送餐品</view>
			<view class="item">餐品撒漏</view>
			<view class="item">未收到餐品</view>
		</view>
	</view>

	<view>
		<image style="width: 100%;" :src="screenshotImage" mode="widthFix"></image>
	</view>
<ZdySafeBottom bg-color="#f0f3f8"/>

	<!-- 水印 -->
	<view v-if="$isVip()">
		<watermark dark="light" source="uni_alipay_taobao_shangou" />
		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_taobao_shangou')">
			<image src='/static/lottie/watermark.gif' mode="widthFix" style="width:94px;height:74px;" ></image>
		</liu-drag-button>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { onPageScroll, onShow, onLoad } from '@dcloudio/uni-app';
import { util } from '@/utils/common.js';
import { defualtData } from '../json/order.json';
import { imgLocal } from '@/utils/common.js';

import ZdySafeBottom from '@/components/safeBottom/safeBottom.vue'
const isScrolled = ref(false);
const screenshotImage = ref('')

//导航栏菜单按钮
const buttonGroup = [
	{
		name: "编辑订单信息",
		click: () => {
			uni.navigateTo({
				url: `/pages/shopping/taobao/add-shangou-order/add-shangou-order?id=${order.value.id}&isEdit=true`
			});
		}
	}
]


onPageScroll((e) => {
	isScrolled.value = e.scrollTop > 10;
});

const order = ref({});
const currentId = ref('');
const isExpanded = ref(false);
const isOrderInfoExpanded = ref(false);
const defaultMap = ref('');

onLoad(async (options) => {
	if (options.id) {
		currentId.value = String(options.id);
	}
	defaultMap.value = await imgLocal.getLocalImage(`shopping/taobao/waimai/map1.png`)
});

onShow(() => {
	// 加载拼图截图缓存
	const savedScreenshot = uni.getStorageSync('taobao_screenshot');
	if (savedScreenshot) {
		screenshotImage.value = savedScreenshot;
	}

	// 从缓存读取最新订单数据
	if (currentId.value) {
		let list = uni.getStorageSync('taobaoShopping') || [];
		let found = list.find(item => String(item.id) === currentId.value);
		if (!found) {
			found = defualtData.find(item => String(item.id) === currentId.value);
		}
		if (found) {
			const parsedOrder = JSON.parse(JSON.stringify(found));
			// 默认收起展开项
			isExpanded.value = false;
			isOrderInfoExpanded.value = false;
			order.value = parsedOrder;
		}
	}
})

const timeoutDelivery = computed(() => {
	if (!order.value.deliveryTime) return '';
	const parts = order.value.deliveryTime.split('-');
	if (parts.length < 2) return '';
	const timeParts = parts[1].trim().split(':');
	if (timeParts.length < 2) return '';
	let hours = parseInt(timeParts[0], 10);
	let minutes = parseInt(timeParts[1], 10) + 20;
	if (minutes >= 60) {
		hours = (hours + Math.floor(minutes / 60)) % 24;
		minutes = minutes % 60;
	}
	return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
});

const items = [
	{
		image: "/static/image/shopping/taobao/waimai/zhaorenfu.png",
		text: "找人付",
		show: () => {
			return order.value.statusType == 'wait_pay'
		}
	},
	{
		image: "/static/image/shopping/taobao/waimai/gaidingdan.png",
		text: "修改订单信息",
		show: () => order.value.statusType == 'wait_pay' || order.value.statusType == 'wait_recv',
		color: "#FE6306"
	},
	{
		image: "/static/image/shopping/taobao/waimai/shenqingshouhou.png",
		text: "申请售后",
		show: () => order.value.statusType == 'success',
	},
	{
		image: "/static/image/shopping/taobao/waimai/zaimaiyidan.png",
		text: "再买一单",
		show: () => order.value.statusType == 'success',
		color: "#FE6306"
	},
	{
		image: "/static/image/shopping/taobao/waimai/pingjiayinhongbao.png",
		text: "评价赢红包",
		show: () => order.value.statusType == 'success',
	},
	{
		image: "/static/image/shopping/taobao/waimai/lianxi.png",
		text: "联系商家",
		show: () => order.value.statusType == 'wait_recv' || order.value.statusType == 'success'
	},
	{
		image: "/static/image/shopping/taobao/waimai/lianxi.png",
		text: "联系骑士",
		show: () => order.value.statusType == 'wait_recv' || order.value.statusType == 'success'
	},
	{
		image: "/static/image/shopping/taobao/waimai/cuidan.png",
		text: "催单",
		show: () => order.value.statusType == 'wait_recv',
		color: "#CDCDCD"
	},
	{
		image: "/static/image/shopping/taobao/waimai/quxiaodingdan.png",
		text: "取消订单",
		show: () => order.value.statusType == 'wait_pay' || order.value.statusType == 'wait_recv'
	},
	{
		image: "/static/image/shopping/taobao/waimai/dianhuashangjia.png",
		text: "电话商家",
		show: () => order.value.statusType == 'closed'
	}
]


</script>

<style lang="less" scoped>
::v-deep .uni-navbar__header-btns {
	width: auto !important;
}

::v-deep .uni-navbar__header-container {
	padding: 0 14rpx;
	padding-left: 34rpx;
}

.wait-recv-page-container {
	::v-deep .placeholder-box {
		display: none;
	}
}

.nav-bar {
	background-color: #ffffff;

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.search-box {
		background-color: #F1F5F8;
		padding: 0 18rpx;
		width: 100%;
		border-radius: 16rpx;

		.search-icon {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}

		.input {
			width: 100%;
			height: 72rpx;
			font-size: 26rpx;

			::v-deep .input-placeholder {
				color: #7E8C9D;
			}
		}
	}

	.right-box {
		.item {
			margin-left: 30rpx;
			height: 70rpx;
			border-radius: 12rpx;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.icon {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				font-size: 18rpx;
				color: #1A1A1A;
				line-height: 18rpx;
			}
		}
	}
}

.map-box {
	position: relative;
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.qishou {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateY(-50%);

		.qishou-info {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 20rpx 16rpx;
			margin-bottom: 8rpx;

			.title {
				font-size: 32rpx;
				color: #1A1A1A;
				line-height: 26rpx;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.time {
				font-size: 24rpx;
				color: #7B7E8C;
				line-height: 26rpx;
			}

			.green {
				color: #1AA35B;
			}
		}
	}

	.bottom-box {
		position: absolute;
		bottom: 0;
		left: 0;
		width: calc(100% - 32rpx);
		margin: 16rpx;

		.tips-box {
			display: inline-flex;
			background-color: #ffffff;
			height: 60rpx;
			width: auto;
			padding: 0 16rpx;
			border-radius: 30rpx;

			.icon {
				width: 30rpx;
				height: 30rpx;
			}

			.text {
				font-size: 24rpx;
				color: #7B7E8C;
				line-height: 24rpx;
				margin-left: 8rpx;
				margin-right: 10rpx;
			}
		}
	}

	.dingdanzhushou {
		margin-top: 16rpx;
		background-color: #ffffff;
		width: 100%;
		border-radius: 16rpx;
		padding: 16rpx 0;


		.icon {
			width: 88rpx;
			height: 88rpx;
			flex-shrink: 0;
		}

		.right-box {
			margin-top: 16rpx;

			.bottom {

				text {
					font-size: 26rpx;
					color: #1A1A1A;
					line-height: 40rpx;
					margin-right: 70rpx;
					margin-top: 12rpx;
				}

				.btn {
					flex-shrink: 0;
					padding: 0 32rpx;
					height: 52rpx;
					line-height: 52rpx;
					background-color: #FB6504;
					color: #ffffff;
					border-radius: 8rpx;
					margin-right: 26rpx;
				}
			}
		}
	}
}

.wait_pay {
	padding: 32rpx 16rpx;
	padding-bottom: 18rpx;
	background-color: #ffffff;

	.main-text {
		font-weight: 400;
		font-size: 48rpx;
		line-height: 48rpx;
		color: #1A1A1A;
		font-weight: 600;
		margin-right: 8rpx;
		margin-left: 16rpx;
	}

	.notice-box {
		padding: 28rpx 16rpx;
		margin-top: 30rpx;
		background-color: #FAFAFA;
		border-radius: 8rpx;

		.notice-text {
			font-size: 26rpx;
			color: #1A1A1A;
			line-height: 26rpx;
		}
	}
}

.deliver-info {
	background-color: #FFFFFF;
	padding: 32rpx 32rpx 0;

	.bold-text {
		font-size: 40rpx;
		color: #1A1A1A;
		line-height: 40rpx;
		font-weight: 500;
	}

	.label {
		font-size: 26rpx;
		color: #1A1A1A;
		line-height: 26rpx;
		font-weight: 500;
		margin-right: 10rpx;
	}

	.time {
		font-weight: 500;
		font-size: 40rpx;
		color: #1A1A1A;
		line-height: 40rpx;
	}

	.address-info {
		font-weight: 400;
		font-size: 26rpx;
		color: #1A1A1A;
		line-height: 40rpx;
		margin-top: -8rpx;

		.split {
			display: inline-block;
			height: 18rpx;
			width: 1rpx;
			background-color: #D8D8D8;
			margin: 0 14rpx;
		}

		.edit-text {
			color: #7C8495;
			margin-right: 2rpx;
		}
	}

	.delivery-photo {
		border-radius: 12rpx;
		overflow: hidden;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
		}

		// &::before {
		// 	content: '+1';
		// 	background-color: #000000;
		// 	opacity: 0.5;
		// 	border-radius: 12rpx 0 12rpx 0;
		// 	font-size: 20rpx;
		// 	color: #FFFFFF;
		// 	line-height: 20rpx;
		// 	padding: 6rpx 8rpx;
		// }
	}

}

.wait_pay-buttom {
	padding: 0 32rpx;
	padding-top: 42rpx;
	background-color: #ffffff;

	.button {
		background-color: #FE6306;
		width: 100%;
		height: 80rpx;
		border-radius: 12rpx;
		flex-direction: column;
		color: #FFFFFF;
	}
}

.icon-list-item {
	background-color: #FFFFFF;
	padding: 0 28rpx;
	padding-top: 32rpx;
	padding-bottom: 28rpx;

	.icon-box {
		width: 100rpx;
		overflow: hidden;
		overflow-x: auto;
		justify-content: space-around;

		&::-webkit-scrollbar {
			display: none;
			width: 0;
			height: 0;
		}
	}

	.item {
		flex-shrink: 0;
		min-width: 102rpx;
		text-align: center;
		margin-right: 18rpx;

		.img {
			width: 32rpx;
			height: 32rpx;
		}

		text {
			font-size: 24rpx;
			color: #1A1A1A;
			line-height: 26rpx;
			margin-top: 10rpx;
			white-space: nowrap;
		}


	}

	.more {
		flex-shrink: 0;
	}


}

.banner-box {
	width: 100%;
	padding: 16rpx 0 0;
}

.orange {
	color: #FE6306 !important;
}

.product-info-box {
	background-color: transparent;
	margin-top: 16rpx;

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

	.info-card {
		background-color: #FFFFFF;
		padding: 24rpx 32rpx;
		margin-bottom: 16rpx;

		.shop-title-box {
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;

			.tag {
				background-color: #FE6306;
				color: #FFFFFF;
				font-size: 20rpx;
				padding: 2rpx 6rpx;
				border-radius: 4rpx;
				margin-right: 12rpx;
				line-height: 28rpx;
			}

			.shop-name {
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 30rpx;
				font-weight: 500;
				color: #1A1A1A;
				margin-right: 6rpx;
				line-height: 28rpx;
			}
		}

		.goods-collapsed {
			margin-bottom: 40rpx;

			.images {
				.img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 12rpx;
					margin-right: 12rpx;
					background-color: #F5F5F5;
					flex-shrink: 0;
				}
			}

			.count {
				font-size: 24rpx;
				color: #7C8495;
				flex-shrink: 0;
				margin-left: 20rpx;
			}
		}

		.goods-item {
			margin-bottom: 40rpx;
			align-items: flex-start;

			.goods-img-box {
				position: relative;
				width: 100rpx;
				height: 100rpx;
				margin-right: 16rpx;
				border-radius: 12rpx;
				flex-shrink: 0;

				.goods-img {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					background-color: #F5F5F5;
				}
			}

			.goods-middle {
				margin-right: 32rpx;

				.title {
					font-size: 26rpx;
					color: #1A1A1A;
					line-height: 32rpx;
				}

				.spec {
					font-size: 24rpx;
					color: #7C8495;
					line-height: 36rpx;
					margin-top: 4rpx;
				}

				.count {
					font-size: 24rpx;
					color: #7C8495;
					line-height: 26rpx;
					margin-top: 6rpx;
				}
			}

			.goods-right {
				.actual-price {
					color: #1A1A1A;
					line-height: 24rpx;
					margin-top: 4rpx;

					.label {
						font-size: 24rpx;
						margin-right: 4rpx;
					}

					.symbol {
						font-size: 26rpx;
						font-weight: 500;
					}

					.num {
						font-size: 36rpx;
						font-weight: 500;
					}
				}

				.ori-price {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #7C8495;
					margin-top: 10rpx;
					text-align: right;
				}
			}
		}

		.fee-item {
			margin-bottom: 32rpx;
			line-height: 26rpx;
			font-size: 26rpx;
			align-items: flex-start;

			.fee-left {
				font-size: 26rpx;
				color: #7C8495;
			}

			.fee-right {
				.actual-price {
					color: #1A1A1A;

					.label {
						font-size: 24rpx;
						margin-right: 4rpx;
					}

					.symbol {
						font-size: 26rpx;
					}

					.num {
						font-size: 36rpx;
					}
				}

				.ori-price {
					font-size: 24rpx;
					color: #7C8495;
					margin-top: 10rpx;
					text-align: right;
				}

				.red-text {
					font-size: 26rpx;
					color: #F83D3D;
				}
			}
		}

		.price-detail-title {
			margin-top: 40rpx;
			margin-bottom: 24rpx;
			line-height: 30rpx;

			.left {
				font-size: 28rpx;
				font-weight: bold;
				color: #1A1A1A;
			}

			.right {
				align-items: baseline;

				.total-discount {
					font-size: 24rpx;
					color: #FF2020;
					margin-right: 16rpx;

					.symbol {
						font-size: 22rpx;
					}
				}

				.total-actual {
					font-size: 24rpx;
					color: #1A1A1A;

					.symbol {
						font-size: 24rpx;
					}

					.num {
						font-size: 34rpx;
					}
				}
			}
		}

		.price-detail-list {
			background-color: #F1F5F8;
			border-radius: 12rpx;
			padding: 30rpx 16rpx;
			margin-bottom: 16rpx;

			.detail-item {
				margin-bottom: 36rpx;
				line-height: 26rpx;

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

				.label {
					font-size: 26rpx;
					color: #7C8495;
				}

				.val {
					font-size: 32rpx;
					color: #1A1A1A;

					&.red-val {
						color: #F83D3D;
					}
				}
			}
		}

		.divider-line {
			height: 1rpx;
			background-color: #D8D8D8;
			margin-bottom: 32rpx;
		}

		.order-info-area {
			.order-item {
				margin-bottom: 36rpx;
				line-height: 26rpx;

				.label {
					font-size: 26rpx;
					color: #7C8495;
					width: 140rpx;
					flex-shrink: 0;
					white-space: nowrap;
				}

				.val {
					font-size: 24rpx;
					line-height: 26rpx;
					color: #1A1A1A;
					word-break: break-all;

					&.align-right {
						text-align: right;
					}

					.split {
						color: #D8D8D8;
						font-size: 18rpx;
						margin: 0 16rpx;
					}

					.copy-btn {
						color: #7C8495;
						white-space: nowrap;
					}
				}
			}

			.order-bottom-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #1A1A1A;
				margin-top: 10rpx;
			}
		}
	}
}

.common-problem-box {
	height: 108rpx;
	background-color: #ffffff;
	padding: 0 32rpx;
	color: #1A1A1A;
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 16rpx;

	.item {
		font-size: 24rpx;
		color: #465C72;
		line-height: 24rpx;
		background-color: #F1F5F8;
		border-radius: 4rpx;
		padding: 0 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		margin-left: 18rpx;
		font-weight: 400;
	}
}
</style>
<style>
@import "/common/main.css";

page {
	background-color: #F1F5F8;
}
</style>
