<template>
	<view class="page-container flex-column" :class="{ 'wait-pay': order.orderType == 'wait_pay' }">
		<view class="hightlight-box">
			<nav-bar :buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton"
				tipLayerType="pdd-shopping-order" isTipLayer tipLayerText="修改订单信息">
				<template v-slot:center>
					<view v-if="order.orderType == 'wait_pay'" class="flex-column flex-center">
						<view class="title">待付款 {{ order.statusDesc }}</view>
						<view class="sub-title">请在{{ order.waitPayTime }}内支付，逾期订单将自动取消</view>
					</view>
					<view v-if="order.orderType == 'wait_recv'" class="flex-column flex-center">
						<view class="title flex-align-center" style="color: #20A61E;">
							<image style="width: 44rpx;height: 44rpx;margin-right: 12rpx;"
								src="/static/image/shopping/pdd/paijianzhong.png"></image>
							{{ order.deliveryStatus }}
						</view>
						<view class="sub-title" style="color: #20A61E;margin-top: 8rpx;">{{ order.statusDesc }}</view>
					</view>
					<view v-if="order.orderType == 'received'" class="flex-column flex-center">
						<view class="title flex-align-center" style="color: #20A61E;">
							<image style="width: 44rpx;height: 44rpx;margin-right: 12rpx;"
								src="/static/image/shopping/pdd/yiqianshou.png"></image>
							已签收
						</view>
						<view class="sub-title" style="color: #20A61E;margin-top: 8rpx;">{{ order.statusDesc }}</view>
					</view>
				</template>
			</nav-bar>
		</view>
		<!-- 头部信息卡片：优惠券 + 物流 + 地址 -->
		<view class="header-info-card">
			<!-- 优惠券横幅 -->
			<view v-if="couponInfo.show618Coupon && order.orderType !== 'wait_pay'"
				class="flex-align-center coupon-banner">
				<image style="width: 32rpx;height: 28rpx;margin-right: 10rpx;"
					src="/static/image/shopping/pdd/coupon-logo.png">
				</image>
				<view class="flex-align-center flex-1">
					<text class="red">618</text>
					<text>降价正式开始！再送</text>
					<text class="red">{{ couponInfo.coupon618Amount || '188' }}元</text>
					<text>优惠券</text>
				</view>
				<uni-icons type="right" size="14" color="#B7B7B7"></uni-icons>
			</view>

			<!-- 物流信息 -->
			<view v-if="order.orderType !== 'wait_pay' && order.logistics"
				class="logistics-box flex-align-center flex-justify-between">
				<view class="icon-wrap flex-center">
					<image class="icon" src="/static/image/shopping/pdd/yunshuzhong.png" mode="widthFix"></image>
				</view>
				<view class="info flex-1 flex-column">
					<text class="title text-ellipsis-1">{{ order.logistics.desc }}</text>
					<text class="time">{{ order.logistics.time }}</text>
				</view>
				<uni-icons type="right" size="14" color="#D3D3D3"></uni-icons>
			</view>

			<view v-if="order.orderType !== 'wait_pay'" class="divider-line"></view>

			<!-- 地址信息 -->
			<view class="adress-box flex-align-center flex-justify-between">
				<view class="icon-wrap flex-center">
					<image class="icon" src="/static/image/shopping/pdd/location.png" mode="widthFix"></image>
				</view>
				<view class="user-info flex-1 flex-column">
					<view class="name-phone flex-align-center">
						<text class="name">{{ order.address.name }}</text>
						<text class="phone">{{ stringUtil.maskPhone(order.address.phone) }}</text>
						<image src="/static/image/shopping/pdd/hide.png" class="eye-icon" mode="aspectFit"></image>
					</view>
					<view class="detail text-ellipsis-2">
						<text>{{ order.address.province }} {{ order.address.detail }}</text>
					</view>
				</view>
				<view v-if="order.orderType == 'wait_pay'" class="edit-btn">修改</view>
			</view>
		</view>
		<view class="product-card">
			<!-- 店铺信息 -->
			<view class="shop-header flex-align-center">
				<view v-if="order.shop.logo" class="shop-logo flex-center">
					<image class="w100 h100" :src="order.shop.logo" mode="widthFix"></image>
				</view>
				<text class="shop-name">{{ order.shop.name }}</text>
				<image v-if="order.shop.hasBrandAuth" class="brand-auth-tag"
					src="/static/image/shopping/pdd/pinpairenzheng.png" mode="heightFix">
				</image>
				<image v-if="order.shop.hasFlagship" class="flagship-tag"
					src="/static/image/shopping/pdd/qijiandian.png" mode="heightFix"></image>
				<image v-if="order.shop.has618" style="margin-left: 8rpx;height: 28rpx;" class="flagship-tag"
					src="/static/image/shopping/pdd/618.png" mode="heightFix"></image>
			</view>

			<!-- 商品主要内容 -->
			<view class="product-content flex" v-for="(product, idx) in order.products" :key="idx"
				:style="{ marginTop: idx > 0 ? '30rpx' : '0' }">
				<view class="img-box">
					<image class="product-img" :src="product.img" mode="aspectFill"></image>
				</view>
				<view class="info-box flex-1">
					<view class="title-price flex">
						<view class="title text-ellipsis-2 flex-1">
							{{ product.title }}
						</view>
						<view class="price-box flex-column align-end">
							<text class="price">¥{{ product.price }}</text>
							<text class="count">x{{ product.count }}</text>
						</view>
					</view>
					<view class="spec text-ellipsis-2">
						{{ product.spec }}
					</view>
					<view class="tags flex-align-center">
						<view class="green-tag" v-for="(tag, tagIdx) in product.serviceTags" :key="tagIdx">
							{{ tag }}<uni-icons type="right" size="12" color="#fff"
								style="margin-left: 2rpx;"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<!-- 联系商家按钮 -->
			<view class="contact-box flex">
				<view style="flex: 1;"></view>
				<view v-if="order.orderType != 'wait_pay'" class="contact-btn flex-center">
					<text>分享商品</text>
				</view>
				<view class="contact-btn flex-center">
					<image style="width: 32rpx;height: 32rpx;margin-right: 8rpx;"
						src="/static/image/shopping/pdd/lianxishangjia.png">
					</image>
					<text>联系商家</text>
				</view>
				<view v-if="order.orderType != 'wait_pay'" class="contact-btn flex-center red">
					<text>申请退款</text>
				</view>
			</view>

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

			<!-- 底部支付金额 -->
			<view class="payment-box flex-align-center">
				<view style="flex: 1;"></view>
				<text class="label">{{ order.orderType === 'wait_pay' ? '应付' : '实付' }}:</text>
				<text class="symbol">¥</text>
				<text class="amount">{{ Number(order.payment.totalAmount).toFixed(2).split('.')[0] }}</text>
				<text class="decimal" v-if="Number(order.payment.totalAmount).toFixed(2).split('.')[1] !== '00'">.{{
					Number(order.payment.totalAmount).toFixed(2).split('.')[1].replace(/0$/, '') }}</text>
				<text class="freight" v-if="order.payment.freightDesc">{{ order.payment.freightDesc }}</text>
			</view>
		</view>

		<!-- 支付方式列表 -->
		<view v-if="order.orderType == 'wait_pay'" class="pay-list">
			<view class="pay-item flex-align-center" v-for="(item, index) in payList" :key="index"
				@click="selectPayMethod(index)">
				<image :src="item.icon" class="pay-icon" mode="aspectFit"></image>
				<view class="pay-info flex-1 flex-align-center">
					<text class="pay-name">{{ item.name }}</text>
					<text class="pay-subname" v-if="item.subName">{{ item.subName }}</text>
				</view>
				<image v-if="order.activePayIndex === index" style="width: 32rpx;height: 32rpx;"
					src="/static/image/shopping/pdd/pay/select.png"></image>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-card flex-column">
				<view class="info-line flex-align-center flex-justify-between"
					v-for="(item, index) in (isOrderInfoExpanded || order.orderType === 'wait_pay' ? orderInfoList : orderInfoList.slice(0, 2))"
					:key="index">
					<view class="left flex-align-center">
						<text class="label">{{ item.label }}</text>
						<text class="value">{{ item.value }}</text>
						<view class="avatars flex-align-center" v-if="item.hasAvatars && order.avatars">
							<image class="avatar" v-for="(avatar, aIdx) in order.avatars" :key="aIdx" :src="avatar"
								mode="aspectFill" :style="{ zIndex: 3 - aIdx, marginLeft: aIdx > 0 ? '-12rpx' : '0' }">
							</image>
						</view>
						<uni-icons v-if="item.hasArrow" style="margin-top: 2rpx;" type="right" size="12"
							color="#999999"></uni-icons>
					</view>
					<view class="copy-btn" v-if="item.hasCopy">复制</view>
				</view>

				<view class="expand-btn flex-align-center" v-if="!isOrderInfoExpanded && order.orderType !== 'wait_pay'"
					@click="isOrderInfoExpanded = true">
					<text class="label">查看更多订单信息</text>
					<view class="icon-box">
						<uni-icons type="bottom" size="12" color="#999999"></uni-icons>
					</view>
				</view>
			</view>

			<view v-if="order.orderType == 'wait_pay'" class="cancel-card flex-center">
				<text>取消订单</text>
			</view>
		</view>


		<view v-if="order.orderType != 'wait_pay'">
			<image style="width: 100%;" :src="screenshotImage" mode="widthFix"></image>
		</view>

		<!-- 底部固定支付栏 -->
		<view v-if="order.orderType == 'wait_pay'" class="fixed-bottom-bar flex-justify-between" :style="{'padding-bottom':$store.state.safeBottomAz+'px'}">
			<!-- 样式 2：先用后付 (activePayIndex === 2) -->
			<view class="left-info style-2 flex-column" v-if="order.activePayIndex === 2">
				<view class="line-top flex-align-end">
					<text class="label">实付款: </text>
					<text class="symbol">￥</text>
					<text class="amount">0</text>
				</view>
				<view class="line-bottom">
					<text>确认收货后付款 ￥{{ order.payment.totalAmount }}</text>
				</view>
			</view>
			<!-- 样式 1：其它支付方式 -->
			<view class="left-info style-1 flex-align-center" v-else>
				<view class="flex-align-end">
					<text class="label">应付: </text>
					<text class="symbol">￥</text>
					<text class="amount">{{ Number(order.payment.totalAmount).toFixed(2).split('.')[0] }}</text>
					<text class="decimal" v-if="Number(order.payment.totalAmount).toFixed(2).split('.')[1] !== '00'">.{{
						Number(order.payment.totalAmount).toFixed(2).split('.')[1].replace(/0$/, '') }} </text>
					<text class="discount">{{ order.payment.discountText }}</text>
				</view>
			</view>

			<view class="pay-btn flex-center">
				<text>去支付</text>
			</view>
		</view>

		<!-- 底部固定支付栏 -->
		<view v-else class="fixed-bottom-bar flex-justify-between" :style="{'padding-bottom':$store.state.safeBottomAz+'px'}">
			<view class="flex-align-center buttons">
				<view class="more">更多</view>
				<view class="button">再次拼单</view>
				<view class="button">查看物流</view>
				<view class="button red">确认收货</view>
			</view>

		</view>
	</view>

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

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

const { proxy } = getCurrentInstance();
//导航栏菜单按钮
const buttonGroup = [
	{
		name: "修改购物订单",
		click: () => {
			uni.navigateTo({
				url: `/pages/shopping/pdd/add-order/add-order?isEdit=true&id=${order.value.id}`
			});
		}
	}
]

const isOrderInfoExpanded = ref(false);
const order = ref({
	orderType: 'wait_recv',
	statusDesc: '商家已早于承诺时间发货',
	couponInfo: {
		title: '你还有',
		priceText: '满299减15元平台券',
		timeText: '快到期，00:56:55.3'
	},
	logistics: {
		desc: '【重庆市】 重庆哈哈哈哈哈哈哈哈 的快...',
		time: '今天 06:25:21'
	},
	address: {
		name: '罗婷',
		phone: '187****4589',
		province: '重庆市九龙坡区',
		detail: '华哈哈哈哈'
	},
	shop: {
		name: '卫松旗舰店',
		logo: '/static/image/shopping/pdd/logo.png',
		hasBrandAuth: true,
		hasFlagship: true
	},
	products: [
		{
			img: 'https://img.pddpic.com/mms-material-img/2022-09-02/76b7e127-ecdf-41ef-8d69-a36c561570d5.png',
			title: '【云南傣味】 头配哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
			price: 35.9,
			count: 1,
			spec: '傣味头款哈哈哈哈哈哈哈哈哈哈哈哈哈很哈哈哈哈哈哈',
			serviceTags: ['坏了包赔', '7天无理由退货']
		}
	],
	payment: {
		totalAmount: 16.9,
		freightDesc: '(免运费)'
	},
	orderInfo: [
		{ label: '订单编号：', value: '260403-03369586325654', hasCopy: true },
		{ label: '商品快照：', value: '发生交易争议时，可作为判断依据', hasArrow: true },
		{ label: '支付方式：', value: '支付宝' },
		{ label: '物流公司：', value: '申通快递' },
		{ label: '快递单号：', value: '77735698745526' },
		{ label: '下单时间：', value: '2026-03-31 08:55:30' },
		{
			label: '拼单时间：',
			value: '2026-03-31 08:55:30',
			hasAvatars: true,
			avatars: [
				'https://img.pddpic.com/mms-material-img/2022-09-02/76b7e127-ecdf-41ef-8d69-a36c561570d5.png',
				'https://img.pddpic.com/mms-material-img/2022-09-02/76b7e127-ecdf-41ef-8d69-a36c561570d5.png'
			],
			hasArrow: true
		},
		{ label: '发货时间：', value: '2026-03-31 11:11:52' }
	]
})

const orderInfoList = computed(() => {
	return order.value.orderInfo || [];
});

const activePayIndex = ref(2)

const payList = ref([
	{ name: '多多支付', icon: '/static/image/shopping/pdd/pay/duoduo.png' },
	{ name: '微信支付', icon: '/static/image/shopping/pdd/pay/wechat.png' },
	{ name: '先用后付', subName: ' (0元下单，确认收货后付款)', icon: '/static/image/shopping/pdd/pay/xianyonghoufu.png' },
	{ name: '支付宝', icon: '/static/image/shopping/pdd/pay/alipay.png' },
	{ name: '找微信好友支付', icon: '/static/image/shopping/pdd/pay/zhaohaoyou.png' },
	{ name: 'Apple Pay', icon: '/static/image/shopping/pdd/pay/apple.png' },
	{ name: 'QQ钱包', icon: '/static/image/shopping/pdd/pay/qq.png' },
	{ name: '云闪付', icon: '/static/image/shopping/pdd/pay/yunshanfu-red.png' },
	{ name: '云闪付', icon: '/static/image/shopping/pdd/pay/yunshanfu-blue.png' }
])

const id = ref('')
onLoad((option) => {
	id.value = option.id
	proxy.$apiUserEvent('all', {
		type: 'event',
		key: 'shopping',
		prefix: '.uni.other.',
		value: '拼多多订单详情'
	})
})

// 优惠券配置
const couponInfo = ref({
	show618Coupon: true,
	coupon618Amount: '188',
	hasCoupon: true,
	couponPath: '/static/image/shopping/pdd/coupon1.png'
});

const screenshotImage = ref('')
onShow(async () => {
	const cacheList = uni.getStorageSync('pddOrderList');
	order.value = cacheList.find(item => item.id == id.value);

	const pddCouponInfo = uni.getStorageSync('pddCouponInfo');
	if (pddCouponInfo) {
		couponInfo.value = pddCouponInfo;
	}

	screenshotImage.value = uni.getStorageSync('pdd_screenshot');
	if (!screenshotImage.value) {
		screenshotImage.value = await imgLocal.getLocalImage(`shopping/pdd/pdd-bottom-product.png`)
	}
})


const selectPayMethod = (index) => {
	order.value.activePayIndex = index;
	const cacheList = uni.getStorageSync('pddOrderList');
	const itemIndex = cacheList.findIndex(item => item.id == order.value.id);
	cacheList[itemIndex] = order.value;
	uni.setStorageSync('pddOrderList', cacheList);
}
</script>

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

.title {
	font-weight: 500;
	font-size: 36rpx;
	color: #1A1A1A;
	line-height: 36rpx;

}

.sub-title {
	font-weight: 400;
	font-size: 26rpx;
	color: #DF2E26;
	line-height: 26rpx;
	white-space: nowrap;
	margin-top: 14rpx;
}

.hightlight-box {
	border-bottom: 1rpx solid #F4F4F4;
}

.header-info-card {
	background-color: #ffffff;
	margin-bottom: 18rpx;

	.icon-wrap {
		width: 60rpx;
		flex-shrink: 0;

		.icon {
			width: 40rpx;
		}
	}

	.coupon-banner {
		background-color: #FFF2E2;
		padding: 18rpx 24rpx;

		.coupon-icon {
			width: 30rpx;
			height: 30rpx;
			background-color: #DF2E26;
			color: #ffffff;
			font-size: 20rpx;
			border-radius: 4rpx;
			margin-right: 12rpx;
		}

		.black-text {
			font-size: 26rpx;
			color: #333333;
		}

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

	.logistics-box {
		padding: 24rpx;

		.info {
			margin-left: 10rpx;
			margin-right: 20rpx;
			width: 100px;

			.title {
				font-weight: 400;
				font-size: 30rpx;
				color: #535353;
				line-height: 30rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.time {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				line-height: 26rpx;
				margin-top: 14rpx;
			}
		}
	}

	.divider-line {
		height: 1rpx;
		background-color: #F4F4F4;
		margin-left: 80rpx;
		margin-right: 24rpx;
	}

	.adress-box {
		padding: 24rpx;

		.user-info {
			margin-left: 10rpx;
			margin-right: 20rpx;

			.name-phone {
				font-size: 28rpx;
				color: #535353;
				line-height: 30rpx;

				.name {
					margin-right: 12rpx;
				}

				.phone {
					margin-right: 8rpx;
				}

				.eye-icon {
					width: 28rpx;
					height: 28rpx;
					margin: 0 8rpx;
				}

				.province {
					color: #999999;
				}
			}

			.detail {
				font-size: 28rpx;
				color: #535353;
				margin-top: 8rpx;
				line-height: 30rpx;
			}
		}

		.edit-btn {
			flex-shrink: 0;
			font-weight: 400;
			font-size: 30rpx;
			line-height: 30rpx;
			color: #DF2E26;
			border-radius: 8rpx;
			border: 1rpx solid #DF2E26;
			text-align: center;
			padding: 8rpx 20rpx;
		}
	}
}

.pay-list {
	background-color: #ffffff;
	margin-bottom: 16rpx;
	margin-top: 16rpx;

	.pay-item {
		height: 90rpx;
		margin-left: 24rpx;
		margin-right: 22rpx;
		border-bottom: 1rpx solid #F6F6F6;

		&:last-child {
			border-bottom: none;
		}

		.pay-icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.pay-info {
			.pay-name {
				font-weight: 400;
				font-size: 30rpx;
				color: #1A1A1A;
				line-height: 30rpx;
			}

			.pay-subname {
				font-weight: 400;
				font-size: 28rpx;
				color: #535353;
				line-height: 30rpx;
			}
		}
	}
}

.product-card {
	background-color: #ffffff;
	padding: 16rpx 0 0;
	// margin-bottom: 20rpx;

	.shop-header {
		margin-bottom: 16rpx;
		padding: 0 24rpx;

		.shop-logo {
			width: 40rpx;
			height: 40rpx;
			border-radius: 4rpx;
			margin-right: 16rpx;
			background-color: #F4F4F4;
		}

		.shop-name {
			font-weight: 400;
			font-size: 28rpx;
			color: #1A1A1A;
			line-height: 24rpx;
		}

		.brand-auth-tag {
			height: 28rpx;
			margin-left: 8rpx;
		}

		.flagship-tag {
			height: 28rpx;
			margin-left: 8rpx;
		}
	}

	.product-content {
		margin-bottom: 16rpx;
		padding: 0 24rpx;

		.img-box {
			width: 164rpx;
			height: 164rpx;
			border-radius: 4rpx;
			background-color: #f5f5f5;
			margin-right: 32rpx;
			flex-shrink: 0;
			overflow: hidden;

			.product-img {
				width: 100%;
				height: 100%;
			}
		}

		.info-box {
			width: 0;

			.title-price {
				align-items: flex-start;

				.title {
					margin-right: 24rpx;
					font-size: 28rpx;
					color: #1A1A1A;
					font-weight: 400;
					line-height: 36rpx;
				}

				.price-box {
					flex-shrink: 0;

					.price {
						font-size: 26rpx;
						color: #999999;
						line-height: 36rpx;
					}

					.count {
						font-size: 24rpx;
						color: #999999;
						margin-top: 4rpx;
						text-align: right;
					}
				}
			}

			.spec {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				line-height: 34rpx;
				margin-bottom: 14rpx;
				margin-right: 110rpx;
			}

			.tags {
				.green-tag {
					background-color: #2BB40C;
					color: #ffffff;
					font-size: 26rpx;
					line-height: 26rpx;
					padding: 4rpx 2rpx 4rpx 6rpx;
					border-radius: 4rpx;
					margin-right: 6rpx;
					display: inline-flex;
					align-items: center;
				}
			}
		}
	}

	.contact-box {
		padding: 0 24rpx 14rpx;

		.contact-btn {
			height: 64rpx;
			padding: 0 12rpx;
			border-radius: 8rpx;
			border: 1rpx solid #9E9E9E;
			margin-left: 16rpx;

			&.red {
				border: 1rpx solid #E02E24;

				text {
					color: #E02E24;
				}
			}

			.chat-icon {
				width: 28rpx;
				height: 24rpx;
				border-radius: 6rpx;
				border: 2rpx solid #49B113;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin-right: 10rpx;

				&::after {
					content: '';
					position: absolute;
					bottom: -6rpx;
					left: 4rpx;
					width: 0;
					height: 0;
					border-left: 6rpx solid transparent;
					border-right: 6rpx solid transparent;
					border-top: 8rpx solid #49B113;
					transform: rotate(30deg);
				}

				.dot {
					width: 4rpx;
					height: 4rpx;
					background-color: #49B113;
					border-radius: 50%;
					margin: 0 1rpx;
				}
			}

			text {
				font-weight: 400;
				font-size: 30rpx;
				color: #1A1A1A;
				line-height: 28rpx;
			}
		}
	}

	.divider {
		height: 1rpx;
		background-color: #EFEFEF;
		width: 100%;
	}

	.payment-box {
		padding: 16rpx 24rpx;
		align-items: baseline;

		.label {
			font-weight: 400;
			font-size: 26rpx;
			color: #1A1A1A;
			line-height: 24rpx;
		}

		.symbol {
			font-size: 24rpx;
			color: #DF2E26;
			margin-left: 10rpx;
			font-weight: 500;
			margin-right: 4rpx;
		}

		.amount {
			font-size: 34rpx;
			color: #DF2E26;
			font-weight: 500;
		}

		.decimal {
			font-size: 26rpx;
			color: #DF2E26;
			font-weight: 500;
		}

		.freight {
			font-size: 26rpx;
			color: #1A1A1A;
			margin-left: 8rpx;
		}
	}
}

.text-ellipsis-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.align-end {
	align-items: flex-end;
}

.upload-shop-logo-box {
	background-color: #fff;
	padding: 24rpx 26rpx;
	margin-bottom: 18rpx;
}

.order-info {
	.info-card {
		background-color: #ffffff;
		padding: 22rpx 24rpx;
		margin-bottom: 16rpx;

		.info-line {
			margin-bottom: 8rpx;

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

			.label,
			.value {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				line-height: 30rpx;
			}

			.value {
				margin-left: 10rpx;
			}

			.copy-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 76rpx;
				height: 40rpx;
				border-radius: 8rpx;
				border: 1rpx solid #9E9E9E;
				font-weight: 400;
				font-size: 26rpx;
				color: #535353;
			}

			.arrow {
				font-size: 20rpx;
				color: #BDBDBD;
				margin-left: 6rpx;
				font-family: monospace;
			}

			.avatars {
				margin-left: 14rpx;

				.avatar {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 2rpx solid #FFFFFF;
					background-color: #EFEFEF;
				}
			}
		}

		.expand-btn {
			margin-top: 8rpx;

			.label {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}

			.icon-box {
				width: 24rpx;
				height: 24rpx;
				border-radius: 2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 6rpx;
			}
		}
	}

	.cancel-card {
		background-color: #ffffff;
		height: 96rpx;

		text {
			font-size: 30rpx;
			color: #535353;
			line-height: 30rpx;
		}
	}
}

.page-container {
	&.wait-pay {
		padding-bottom: 200rpx;
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
		padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
	}
}

.fixed-bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	border-top: 1rpx solid #F0F0F0;
	display: flex;
	z-index: 100;
	padding-bottom: env(safe-area-inset-bottom);
	padding-bottom: constant(safe-area-inset-bottom);



	.buttons {
		padding: 0 24rpx;
		padding-top: 20rpx;
		width: 100%;
		height: 84rpx;
		justify-content: flex-end;

		.more {
			font-weight: 400;
			font-size: 30rpx;
			color: #1A1A1A;
			line-height: 28rpx;
			margin-right: 52rpx
		}

		.button {
			height: 62rpx;
			line-height: 62rpx;
			padding: 0 12rpx;
			font-size: 30rpx;
			color: #1A1A1A;
			border-radius: 8rpx;
			border: 1rpx solid #9E9E9E;
			margin-left: 16rpx;

			&.red {
				border: none;
				background-color: #E02E24;
				color: #fff;
			}
		}
	}

	.left-info {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		padding-right: 24rpx;
		height: 108rpx;

		&.style-1 {
			align-items: center;

			.label {
				font-size: 26rpx;
				color: #1A1A1A;
				font-weight: 400;
			}

			.symbol {
				font-size: 24rpx;
				color: #E02E24;
				margin-left: 6rpx;
				font-weight: 500;
			}

			.amount {
				font-size: 40rpx;
				color: #E02E24;
				font-weight: 500;
			}

			.decimal {
				font-size: 28rpx;
				color: #E02E24;
				font-weight: 500;
			}

			.discount {
				font-size: 26rpx;
				color: #E02E24;
			}
		}

		&.style-2 {
			flex-direction: column;
			justify-content: center;
			align-items: flex-end;

			.line-top {
				display: flex;
				align-items: baseline;

				.label {
					font-size: 26rpx;
					color: #1A1A1A;
					font-weight: 400;
				}

				.symbol {
					font-size: 24rpx;
					color: #E02E24;
					margin-left: 6rpx;
					font-weight: 500;
				}

				.amount {
					font-size: 40rpx;
					color: #E02E24;
					font-weight: 500;
				}
			}

			.line-bottom {
				font-size: 26rpx;
				color: #E02E24;
				font-weight: 500;
				line-height: 26rpx;
				margin-top: 4rpx;
			}
		}
	}

	.pay-btn {
		width: 250rpx;
		height: 108rpx;
		background-color: #E02E24;

		text {
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
		}
	}
}

.coupon-banner {
	background-color: #FCF6D6;
	padding: 20rpx 22rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #1A1A1A;
	line-height: 26rpx;

	.red {
		color: #DF2E26;
	}
}
</style>
<style>
@import '@/common/main.css';
</style>
