<template>
	<view class="page1">
		<view class="after-service-fixed">
			<view class="title">
				<view class="title-sreach">
					<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
						<uni-icons type="left" size="28"></uni-icons>
					</view>
					<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
						待退款/售后{{returnCount}}
					</view>
				</view>
			</view>
		</view>
		<view class="after-service-fixed-holder"></view>
		<view class="content">
			<!-- <view class="box1" style="display: flex;">
				<view class="">
					待退款/售后{{returnCount}}
				</view>
			</view> -->
			<view class="box1" v-for="(item,index) in returnData" :key="index">
				<view style="display: flex;height: 50rpx;border-bottom: 1px solid #eee;">
					<view style="display: flex;">
						{{'#' + item.mallOrder.numberCode}}
					</view>
					<view style="flex: 1;display: flex;padding-left: 20rpx;">
						{{item.createTime | formatISOTime}}
						<!-- <text>已退款</text> -->
					</view>
					<view>
						{{item.status == 0?'待退款':item.status == 3?'待售后':""}}
					</view>
				</view>
				<view class="refund-info">
					<view class="refund-info-content">
						<view class="refund-main">
							<view class="refund-text">
								<view>退款原因: <text style="font-weight: 700;color:#00231C;">{{item.refundTypeStatus == 1?'商家原因':item.refundTypeStatus == 2?'配送原因':item.refundTypeStatus == 3?'商家/配送都有原因（需要退配送费）':item.refundTypeStatus == 4?'平台退款':""}}</text></view>
								
								<view>退款类型: <text style="font-weight: 700;color:#00231C;">{{item.refundType == 1?'退商品':item.refundType == 2?'退配送费':item.refundType == 3?'全额退款':""}}</text></view>
								<view class="refund-reason-row">
									退款/售后原因:
									<text class="refund-reason-text">{{item.reason || '无'}}</text>
								</view>
								<view class="refund-pictures-row" v-if="getPictureList(item.pictures).length > 0">
									<view class="refund-pictures-label">退款/售后原因图片:</view>
									<view class="refund-pictures">
										<image class="refund-picture" v-for="(picture,pictureIndex) in getPictureList(item.pictures)"
											:key="pictureIndex" :src="picture" mode="aspectFill"
											@tap.stop="previewRefundImage(item.pictures,pictureIndex)"></image>
									</view>
								</view>
							</view>
							<view class="refund-contact">
								<view class="contact-btn" @tap.stop="openContactPopup(item)">联系</view>
							</view>
						</view>
						<view style="text-align: right;">退款金额: <text style="color:red;font-size: 34rpx;font-weight: 700;">￥{{item.refundAmount}}</text></view>
					</view>
				</view>
				<view style="height: 80rpx;border-top: 1px solid #eee;display: flex;">
					<view style="flex: 1;">
						<view class="btn" @tap="orderDetailOpen(item)" style="display: inline-block;">
							{{item.mallOrder.otherOrder == 1 ? '快递/跑腿单' : '查看订单'}}
						</view>
						<view class="btn group-detail-btn" v-if="item.mallOrder && item.mallOrder.orderType != 1" @tap.stop="getGroupOrders(item.mallOrder.id || item.orderId)" style="display: inline-block;">
							拼团详情
						</view>
					</view>
					<view class="btn" :class="{'btn-disabled': isSubmittingRefund(item)}" @tap="returnAmountAllow(item,0)" style="background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);">
						{{isSubmittingRefund(item) ? '处理中' : '不同意'}}
					</view>
					<view class="btn" :class="{'btn-disabled': isSubmittingRefund(item)}" @tap="returnAmountAllow(item,1)" style="margin-left: 10px;">
						{{isSubmittingRefund(item) ? '处理中' : '同意'}}
					</view>
				</view>
			</view>
			
			<!-- 拼团详情弹窗 -->
			<uni-popup ref="pintuanPopup" background-color="transparent">
				<view class="group-popup">
					<view class="group-popup-header">
						<view>
							<view class="group-popup-title">拼团详情</view>
							<view class="group-popup-subtitle">共{{tuanzhangOrder.length}}个订单，请核对退款关联订单</view>
						</view>
						<view class="group-popup-close" @tap="$refs.pintuanPopup.close()">×</view>
					</view>
					<scroll-view scroll-y class="group-popup-scroll">
						<view class="group-order-card" v-for="(item,index) in tuanzhangOrder" :key="index">
							<view class="group-order-head">
								<view class="group-order-code">订单-{{item.numberCode || item.id}}</view>
								<view class="group-order-status">{{getStatusText(item)}}</view>
							</view>
							<view class="group-info-row">
								<text>订单号</text>
								<text>{{item.id}}</text>
							</view>
							<view class="group-info-row">
								<text>订单时间</text>
								<text>{{item.createTime | formatISOTime}}</text>
							</view>
							<view class="group-goods-list">
								<view class="group-goods-row" v-for="(item1,index1) in item.goodsList" :key="index1">
									<view class="group-goods-name">{{item1.productName}}</view>
									<view class="group-goods-num">X{{item1.quantity}}</view>
									<view class="group-goods-price">￥{{item1.price}}</view>
								</view>
							</view>
							<view class="group-fee-row">
								餐盒费：￥{{item.packageFee || 0}}　配送费：￥{{item.deliveryFee || 0}}
							</view>
							<view class="group-total-row">总计：￥{{item.totalAmount || 0}}</view>
						</view>
						<view class="group-popup-empty" v-if="tuanzhangOrder.length == 0">暂无拼团订单</view>
					</scroll-view>
				</view>
			</uni-popup>
			<uni-popup ref="orderPopup" background-color="transparent">
				<view class="product-popup-content">
					<view class="product-popup-header">
						<view class="product-popup-title">商品详情</view>
						<view class="product-popup-subtitle">请核对商品规格和数量</view>
					</view>
					<view class="product-popup-list" v-if="goodsList != null && goodsList.length > 0">
						<view class="product-popup-card" v-for="(item1,index1) in goodsList" :key="index1">
							<view class="product-popup-img">
								<img :src="item1.productPicture" alt="">
							</view>
							<view class="product-popup-info">
								<view class="product-popup-name">
									{{item1.productName}}
								</view>
								<view class="product-popup-spec">
									<text class="product-popup-label">规格</text>
									<text class="product-popup-spec-text">{{item1.specs | delNode}}</text>
								</view>
								<view class="product-popup-price-row">
									<text>单价：￥{{item1.price != null ? item1.price : 0}}</text>
									<text v-if="item1.packageFee != null && item1.packageFee !== ''" class="product-popup-package-fee">餐盒费：￥{{item1.packageFee}}</text>
								</view>
							</view>
							<view class="product-popup-quantity">
								<view class="product-popup-quantity-num">x{{item1.quantity}}</view>
								<view class="product-popup-quantity-label">数量</view>
							</view>
						</view>
					</view>
					<view class="product-popup-empty" v-else>
						暂无商品详情
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="contactPopup" background-color="transparent">
				<view class="contact-popup">
					<view class="contact-popup-title">联系</view>
					<view class="contact-popup-item" v-if="contactItem.mallOrder && contactItem.mallOrder.receiverPhone"
						@tap="makeCall(contactItem.mallOrder.receiverPhone)">
						<text>联系用户</text>
						<text class="contact-popup-phone">{{contactItem.mallOrder.receiverPhone}}</text>
					</view>
					<view class="contact-popup-item" v-if="contactItem.mallOrder && contactItem.mallOrder.shopPhone"
						@tap="makeCall(contactItem.mallOrder.shopPhone)">
						<text>联系商家</text>
						<text class="contact-popup-phone">{{contactItem.mallOrder.shopPhone}}</text>
					</view>
					<view class="contact-popup-item" v-if="contactItem.mallOrder && contactItem.mallOrder.deliveryType == 1 && contactItem.mallDeliveryOrder && contactItem.mallDeliveryOrder.workerPhone"
						@tap="makeCall(contactItem.mallDeliveryOrder.workerPhone)">
						<text>联系配送员</text>
						<text class="contact-popup-phone">{{contactItem.mallDeliveryOrder.workerPhone}}</text>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				searchCountForm:{
					linkId:"",
					pageNum:1,
					pageSize:100,
					statusList:[0,3]
				},
				type:'worker',
				returnFormData:{},
				groupOrderIdList:[],
				tuanzhangOrder:[],
				goodsList:[],
				orderDetail:{},
				returnData:[],
				returnCount:0,
				submitLoading:false,
				submitRefundId:'',
				contactItem:{}
			}
		},
		filters:{
			formatISOTime(isoString) {
			  const date = new Date(isoString);
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			delNode(data) {
				// 1. 统一转为字符串
				let str;
				if (typeof data === 'object' && data !== null) {
					// 对象或数组 → JSON 字符串
					str = JSON.stringify(data);
				} else if (typeof data === 'string') {
					str = data;
				} else {
					// 其他类型（数字、布尔等）先转字符串
					str = String(data);
				}
			
				// 2. 删除所有大括号 { } 和双引号 "
				const result = str.replace(/[{}"]/g, '');
				return result;
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.searchCountForm.linkId = uni.getStorageSync('worker').workerId
		},
		onLoad(option) {
			if(option.type){
				this.type = option.type
			}
			this.getReturnCount()
		},
		methods: {
			getGroupOrders(id){
				this.tui.request("/mall/order/selectAllOrderByOrderId/"+id, "GET", {}, false, true).then((res) => {
					if (res.code == 200) {
						this.tuanzhangOrder = res.result;
						this.$refs.pintuanPopup.open('center')
					} else {
						this.tui.toast(res.message)
						return
					}
					uni.hideLoading()
				}).catch((res) => {})
			},
			getStatusText(item) {
				if (!item) return ''
				return item.status == 0?'待支付':item.status == 2?'待配送员接单':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime == null) || (item.status == 3 && item.deliveryType == 2 && item.userRequireMake == 1)?'待出餐':(item.status == 3 && item.deliveryType == 1 && item.shopMakeTime != null)?'待取货':(item.status == 3 && item.deliveryType == 2)?'待消费':item.status == 4?'待送达':item.status == 5?'已完成':item.status == 7?'待同意退款':item.status == 8?'已退款':item.status == 6?'已取消':item.status == 11?'售后中':item.status == 12?'已售后':''
			},
			orderDetailOpen(item){
				this.returnFormData.id = item.id;
				this.returnFormData.linkId = item.linkId;
				this.returnFormData.orderId = item.orderId;
				this.returnFormData.deliveryType = item.mallOrder.deliveryType;
				this.returnFormData.refundAmount = item.refundAmount;
				this.returnFormData.refundType = item.refundType;
				this.returnFormData.refundTypeStatus = item.refundTypeStatus;
				this.orderDetail = item.mallOrder;
				this.goodsList = item.items;
				this.$refs.orderPopup.open();
			},
			makeCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			openContactPopup(item){
				this.contactItem = item || {};
				this.$refs.contactPopup.open('bottom');
			},
			getReturnCount(){
				let that = this
				if(this.type == 'worker'){
					this.searchCountForm.linkId = uni.getStorageSync('worker').workerId
				}else{
					this.searchCountForm.linkId = uni.getStorageSync('shopId')
				}
				return this.tui.request("/mall/refund/page", "POST", this.searchCountForm, false, false).then((res) => {
					if (res.code == 200 && res.result != null) {
						that.returnCount = res.result.records.length;
						that.returnData = res.result.records
						that.$forceUpdate();
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			getPictureList(pictures) {
				if (pictures == null || pictures === '') return [];
				if (Array.isArray(pictures)) {
					return pictures.filter(item => item != null && item !== '');
				}
				return String(pictures).split(',').map(item => item.trim()).filter(item => item !== '');
			},
			isSubmittingRefund(item) {
				return this.submitLoading && item && this.submitRefundId === item.id;
			},
			getRequestErrorMessage(error) {
				if (typeof error === 'string' && error !== '') {
					return error;
				}
				if (error && error.message) {
					return error.message;
				}
				if (error && error.errMsg) {
					return error.errMsg;
				}
				return '操作失败，请稍后再试';
			},
			resetSubmitState() {
				this.submitLoading = false;
				this.submitRefundId = '';
				uni.hideLoading();
			},
			previewRefundImage(pictures, index) {
				const urls = this.getPictureList(pictures);
				if (urls.length === 0) return;
				uni.previewImage({
					urls,
					current: urls[index]
				});
			},
			returnAmountAllow(item,status){
				if (this.submitLoading) return;
				let titleText = status == 1 ? '确定同意该申请吗？' : '确定拒绝该申请吗？';
				//退款提示
				this.groupOrderIdList = [];
				
				if(item.groupOrderIds != null && item.groupOrderIds != ''){
					titleText += '该订单为面对面配送单，所有参团订单将同步处理';
					for(let i = 0; i < this.returnData.length;i++){
						if(item.groupOrderIds.indexOf(this.returnData[i].mallOrder.id) != -1){
							//需要展示具体订单信息这里有
							this.groupOrderIdList.push(this.returnData[i]);
						}
					}
				}
				
				// 2. 弹出确认框
				uni.showModal({
					title: '提示',
					content: titleText,
					success: (res) => {
						if (res.confirm) {
							this.submitLoading = true;
							this.submitRefundId = item.id;
							uni.showLoading({
								title: '处理中',
								mask: true
							});
							let requestList = [];
							if(this.groupOrderIdList != [] && this.groupOrderIdList.length > 0){
								for(let i = 0; i < this.groupOrderIdList.length;i++){
									requestList.push(this.processReturn(this.groupOrderIdList[i], status));
								}
							}else{
								requestList.push(this.processReturn(item, status));
							}
							Promise.all(requestList).then((messageList) => {
								const successMessage = messageList[0] || '操作成功';
								return this.getReturnCount().then(() => {
									this.resetSubmitState();
									this.tui.toast(successMessage, 2000, true);
								}).catch(() => {
									this.resetSubmitState();
									this.tui.toast(successMessage, 2000, true);
								});
							}).catch((message) => {
								this.resetSubmitState();
								this.tui.toast(this.getRequestErrorMessage(message), 2000);
							});
						}
					}
				});
			},
			processReturn(item,status){
				let returnFormData = {}
				//退款
				if(item.status == 0){
					//不同意
					if(status == 0){
						returnFormData.status = 2
					}else{
						returnFormData.status = 1
					}
				}else if(item.status == 3){
					//售后
					if(status == 0){
						returnFormData.status = 5
					}else{
						returnFormData.status = 4
					}
				}
				returnFormData.id = item.id;
				returnFormData.linkId = item.linkId;
				returnFormData.orderId = item.orderId;
				returnFormData.deliveryType = item.mallOrder.deliveryType;
				returnFormData.orderType = item.mallOrder.orderType;
				returnFormData.refundAmount = item.refundAmount;
				returnFormData.refundType = item.refundType;
				returnFormData.refundTypeStatus = item.refundTypeStatus;
				
				return this.tui.request("/mall/refund/allowOrReject", "POST", returnFormData, false, false).then((res) => {
					if (res.code == 200) {
						return res.message;
					} else {
						return Promise.reject(res && res.message ? res.message : '操作失败，请稍后再试');
					}
				}).catch((res) => {
					return Promise.reject(this.getRequestErrorMessage(res));
				});
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
		overflow-y: auto;
	}

	.page1 {
		width: 100%;
		min-height: 100vh;
		font-size: 24rpx;
		position: relative;
		overflow-y: auto;
		padding-bottom: 80rpx;
		box-sizing: border-box;
	}

	.after-service-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: #F5F8F5;
	}

	.after-service-fixed-holder {
		height: 260rpx;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 260rpx;
		background-size: 100% 100%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.content{
		margin: 20rpx auto 0;
		padding-bottom: 60rpx;
	}
	.box1 {
		width: 95%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.refund-info {
		padding-top: 20rpx;
		color: #777;
	}
	.refund-info-content {
		font-size: 28rpx;
		line-height: 50rpx;
	}
	.refund-main {
		display: flex;
		align-items: flex-start;
	}
	.refund-text {
		flex: 1;
		min-width: 0;
	}
	.refund-contact {
		width: 120rpx;
		flex-shrink: 0;
		margin-left: 16rpx;
	}
	.contact-btn {
		height: 50rpx;
		border-radius: 14rpx;
		background: rgba(0, 35, 28, 1);
		color: rgba(166, 255, 234, 1);
		font-size: 24rpx;
		font-weight: 700;
		line-height: 50rpx;
		text-align: center;
	}
	.contact-popup {
		width: 100%;
		padding: 34rpx 28rpx 48rpx;
		box-sizing: border-box;
		border-radius: 32rpx 32rpx 0 0;
		background: #fff;
	}
	.contact-popup-title {
		margin-bottom: 18rpx;
		color: #00231C;
		font-size: 34rpx;
		font-weight: 900;
		text-align: center;
	}
	.contact-popup-item {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 24rpx;
		margin-top: 16rpx;
		border-radius: 18rpx;
		background: #F5F8F5;
		color: #00231C;
		font-size: 28rpx;
		font-weight: 700;
	}
	.contact-popup-phone {
		flex: 1;
		color: #55716a;
		font-size: 26rpx;
		text-align: right;
	}
	.refund-reason-row {
		line-height: 42rpx;
	}
	.refund-reason-text {
		color: #00231C;
		font-weight: 700;
		word-break: break-all;
	}
	.refund-pictures-row {
		margin: 10rpx 0;
		line-height: 40rpx;
	}
	.refund-pictures-label {
		margin-bottom: 10rpx;
	}
	.refund-pictures {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}
	.refund-picture {
		width: 140rpx;
		height: 140rpx;
		border-radius: 14rpx;
		background: #f0f5f3;
	}
	.btn{
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		padding:0 20rpx;
		height: 50rpx;
		border-radius: 14rpx;
		line-height: 50rpx;
		text-align: center;
		font-weight: 700;
		margin-top: 20rpx;
	}
	.btn-disabled {
		opacity: 0.6;
		pointer-events: none;
	}
	.group-detail-btn {
		margin-left: 14rpx;
		background: linear-gradient(90deg, #FF4500, #FFA07A);
		color: #fff;
	}
	.popup-area-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	.popup-area-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 500rpx;
		height: auto;
		background-color: #fff;
	}
	.goods-img {
		width: 160rpx;
		height: 160rpx;
		position: relative;
		
	
		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}
	.pinzi{
		margin: 20rpx 0;
		background: linear-gradient(90deg, #FF4500, #FFA07A);
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
	}
	.goods-content {
		flex: 1;
		padding-left: 20rpx;
	}
	
	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}
	
	.goods-content-center {
		display: flex;
		margin: 16rpx 0;
		color: #777;
	}
	.group-popup {
		width: 660rpx;
		max-height: 880rpx;
		padding: 28rpx 24rpx 32rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		background: #f7faf8;
		box-shadow: 0 24rpx 60rpx rgba(0, 35, 28, 0.22);
	}
	.group-popup-header {
		display: flex;
		align-items: center;
		padding-bottom: 22rpx;
	}
	.group-popup-title {
		color: #00231C;
		font-size: 36rpx;
		font-weight: 900;
		line-height: 48rpx;
	}
	.group-popup-subtitle {
		margin-top: 6rpx;
		color: #7a8582;
		font-size: 24rpx;
	}
	.group-popup-close {
		width: 56rpx;
		height: 56rpx;
		margin-left: auto;
		border-radius: 56rpx;
		background: #fff;
		color: #7a8582;
		font-size: 42rpx;
		line-height: 50rpx;
		text-align: center;
	}
	.group-popup-scroll {
		max-height: 690rpx;
		height: 690rpx;
	}
	.group-order-card {
		margin-bottom: 18rpx;
		padding: 22rpx;
		border-radius: 24rpx;
		background: #fff;
		box-shadow: 0 10rpx 26rpx rgba(0, 35, 28, 0.08);
	}
	.group-order-head {
		display: flex;
		align-items: center;
		padding-bottom: 16rpx;
		border-bottom: 1px solid #eef2ef;
	}
	.group-order-code {
		flex: 1;
		color: #00231C;
		font-size: 32rpx;
		font-weight: 900;
	}
	.group-order-status {
		padding: 6rpx 14rpx;
		border-radius: 999rpx;
		background: rgba(255, 107, 53, 0.1);
		color: #ff6b35;
		font-size: 24rpx;
		font-weight: 800;
	}
	.group-info-row {
		display: flex;
		justify-content: space-between;
		padding-top: 14rpx;
		color: #6b7773;
		font-size: 24rpx;
		line-height: 34rpx;
	}
	.group-info-row text:last-child {
		color: #00231C;
		font-weight: 700;
	}
	.group-goods-list {
		margin-top: 16rpx;
		padding: 12rpx 0;
		border-top: 1px dashed #e4ebe7;
		border-bottom: 1px dashed #e4ebe7;
	}
	.group-goods-row {
		display: flex;
		align-items: center;
		min-height: 46rpx;
		color: #00231C;
		font-size: 26rpx;
		font-weight: 700;
	}
	.group-goods-name {
		flex: 1;
		padding-right: 12rpx;
	}
	.group-goods-num {
		width: 80rpx;
		text-align: center;
	}
	.group-goods-price {
		width: 120rpx;
		text-align: right;
	}
	.group-fee-row {
		margin-top: 14rpx;
		color: #7a8582;
		text-align: right;
	}
	.group-total-row {
		margin-top: 8rpx;
		color: red;
		font-size: 30rpx;
		font-weight: 900;
		text-align: right;
	}
	.group-popup-empty {
		padding: 80rpx 20rpx;
		color: #7a8582;
		text-align: center;
	}
	.pituan-text{
		flex:1;
		text-align:right;
		padding-right:20rpx;
		font-weight: 700;
	}
	.product-popup-content {
		width: 680rpx;
		max-height: 880rpx;
		padding: 34rpx 28rpx 30rpx;
		box-sizing: border-box;
		overflow: scroll;
		border-radius: 36rpx;
		background:
			radial-gradient(circle at 92% 4%, rgba(166, 255, 234, 0.38) 0, rgba(166, 255, 234, 0) 180rpx),
			linear-gradient(180deg, #ffffff 0%, #f8fffc 100%);
		box-shadow: 0 24rpx 56rpx rgba(0, 35, 28, 0.18);
	}
	
	.product-popup-header {
		margin-bottom: 26rpx;
		text-align: center;
	}
	
	.product-popup-title {
		color: #143d35;
		font-size: 36rpx;
		font-weight: 900;
		line-height: 48rpx;
	}
	
	.product-popup-subtitle {
		margin-top: 8rpx;
		color: #7b8a85;
		font-size: 24rpx;
		line-height: 34rpx;
	}
	
	.product-popup-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.product-popup-card {
		display: flex;
		align-items: center;
		padding: 22rpx;
		border: 1px solid rgba(166, 255, 234, 0.58);
		border-radius: 28rpx;
		background: rgba(255, 255, 255, 0.88);
		box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06);
	}
	
	.product-popup-img {
		width: 128rpx;
		height: 128rpx;
		flex-shrink: 0;
		overflow: hidden;
		border-radius: 22rpx;
		background: #f0f5f3;
	
		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}
	
	.product-popup-info {
		flex: 1;
		min-width: 0;
		padding: 0 22rpx;
	}
	
	.product-popup-name {
		color: #172f2a;
		font-size: 30rpx;
		font-weight: 900;
		line-height: 42rpx;
	}
	
	.product-popup-spec {
		display: flex;
		align-items: flex-start;
		margin-top: 16rpx;
	}
	
	.product-popup-label {
		flex-shrink: 0;
		height: 34rpx;
		padding: 0 14rpx;
		border-radius: 999rpx;
		background: rgba(166, 255, 234, 0.72);
		color: #126255;
		font-size: 20rpx;
		font-weight: 800;
		line-height: 34rpx;
	}
	
	.product-popup-spec-text {
		flex: 1;
		margin-left: 12rpx;
		color: #65736f;
		font-size: 24rpx;
		line-height: 34rpx;
		word-break: break-all;
	}
	
	.product-popup-price-row {
		display: flex;
		flex-wrap: wrap;
		margin-top: 12rpx;
		color: #f04438;
		font-size: 24rpx;
		font-weight: 800;
		line-height: 34rpx;
	}
	
	.product-popup-package-fee {
		margin-left: 18rpx;
		color: #65736f;
	}
	
	.product-popup-quantity {
		width: 92rpx;
		height: 92rpx;
		flex-shrink: 0;
		border-radius: 28rpx;
		background: linear-gradient(135deg, #fff4ce 0%, #a6ffea 100%);
		color: #103f36;
		text-align: center;
		box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.08);
	}
	
	.product-popup-quantity-num {
		padding-top: 16rpx;
		font-size: 30rpx;
		font-weight: 900;
		line-height: 34rpx;
	}
	
	.product-popup-quantity-label {
		margin-top: 2rpx;
		color: #52736b;
		font-size: 20rpx;
		line-height: 28rpx;
	}
	
	.product-popup-empty {
		padding: 80rpx 20rpx;
		border-radius: 28rpx;
		background: rgba(247, 255, 251, 0.9);
		color: #7b8a85;
		font-size: 28rpx;
		font-weight: 700;
		text-align: center;
	}
</style>