front-end/hdApp/src/admin/order/refund.vue

<template>
	<view class="refund-page">

		<!-- 跨天售后提示：接口预检 / 本地兜底 / 订单 shAddPay -->
		<view class="warning-tip" v-if="showNextDayTip">
			<view class="warning-icon">⚠</view>
			<text class="warning-text" v-if="shAddPayReason == 1">已过可售后时间，将按跨天售后办理</text>
			<text class="warning-text" v-else-if="orderCleared || Number(orderInfo.clearId) > 0 || (Number(orderInfo.debtPrice) > 0 && Number(orderInfo.remainDebtPrice) <= 0)">
				订单已结账，将按跨天售后办理
			</text>
			<text class="warning-text" v-else-if="shAddPay == 1 && Number(orderInfo.remainDebtPrice) > 0">
				订单已部分结账或售后超额，将按跨天售后办理
			</text>
			<text class="warning-text" v-else>非付款日，将按跨天售后办理</text>
		</view>

		<!-- 退款方式选择卡片 -->
		<view class="card-section">
			<view class="section-title">
				<text class="title-text">退款方式</text>
			</view>
			<view class="refund-type-buttons">
				<button 
					class="admin-button-com big" 
					:class="refundType==1?'blue':'default'" 
					@tap="refundType=1">
					退货并退款
				</button>
				<button 
					class="admin-button-com big" 
					:class="refundType==2?'blue':'default'" 
					@tap="refundType=2">
					只退款
				</button>
			</view>
		</view>

		<!-- 商品选择卡片 -->
		<view class="card-section" v-if="refundType==1">
			<view class="section-title">
				<text class="title-text">退货商品</text>
			</view>
			<view class="product-list-compact">
				<template v-if="!$util.isEmpty(goodsInfoList)">
					<view class="product-row" v-for="(res,i) in goodsInfoList" :key="i">
						<view class="product-basic-info">
							<text class="product-name-compact">{{res.name}}</text>
							<view class="product-meta">
								<text class="stock-info">{{parseFloat(res.num)}}份 X ¥{{parseFloat(res.unitPrice)}}</text>
								<text class="available-info">可退 {{Number(res.num)-Number(res.refundNum)}}份</text>
							</view>
						</view>
						<view class="refund-control">
							<view class="refund-input-group">
								<view class="input-item">
									<text class="input-label">数量</text>
									<input 
										class="refund-input-compact" 
										type="number" 
										placeholder="0" 
										v-model="res.refundCount" 
										placeholder-style="color:#ccc"
										@focus="clearRefundCount(res)"
										@input="onRefundCountInput" />
									<text class="unit-label">份</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-if="!$util.isEmpty(itemInfoList)">
					<view class="product-row" v-for="(res,i) in itemInfoList" :key="i">
						<view class="product-basic-info">
							<text class="product-name-compact">{{res.name}}</text>
							<view class="product-meta">
								<text class="stock-info">{{parseFloat(res.num)}}{{res.unitName}} X ¥{{parseFloat(res.unitPrice)}}</text>
								<text class="available-info">可退 {{Number(res.num)-Number(res.refundNum)}}{{res.unitName}}</text>
							</view>
						</view>
						<view class="refund-control">
							<view class="refund-input-group">
								<view class="input-item">
									<text class="input-label">数量</text>
									<input 
										class="refund-input-compact" 
										type="number" 
										placeholder="0" 
										v-model="res.refundCount" 
										placeholder-style="color:#ccc"
										@focus="clearRefundCount(res)"
										@input="onRefundCountInput" />
									<text class="unit-label">{{res.unitName}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>

		<!-- 金额信息卡片 -->
		<view class="card-section">
			<view class="section-title">
				<text class="title-text">金额信息</text>
			</view>
			<view class="amount-info">
				<view class="amount-row">
					<text class="amount-label">订单金额</text>
					<view class="amount-value">
						<text class="price-text">¥{{parseFloat(orderInfo.orderPrice)||0}}</text>
					</view>
				</view>
				<view class="amount-row" v-if="Number(orderInfo.tkPrice)>0">
					<text class="amount-label">已退金额</text>
					<view class="amount-value">
						<text class="refunded-text">¥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</text>
					</view>
				</view>
				<view class="amount-row">
					<text class="amount-label">可退金额</text>
					<text class="amount-value available-amount">¥{{coundRefundPrice}}</text>
				</view>
				<view class="amount-row input-row">
					<text class="amount-label required">退款金额</text>
					<view class="amount-input-wrapper">
						<text class="currency-symbol">¥</text>
						<input 
							class="amount-input" 
							type="digit" 
							v-model="refundMoney" 
							placeholder="请输入"
							placeholder-style="color:#999"
							@focus="clearRefundMoney">
					</view>
				</view>
				<view class="amount-row" v-if="orderInfo.hbId && orderInfo.hbId != '0'">
					<view style="width: 100%;">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<text class="amount-label">红包</text>
							<view class="amount-value">
								<button
									class="admin-button-com middle"
									:class="refundHb==0?'blue':'default'"
									@tap="setRefundHb(0)" style="margin-right: 28upx;">
									不退
								</button>
								<button
									class="admin-button-com middle"
									:class="refundHb==1?'blue':'default'"
									@tap="setRefundHb(1)" >
									退回
								</button>
							</view>
						</view>
						<view style="color: red;font-size: 24upx;text-align: right;margin-top: 10upx;" v-if="!canRefundBackHb">
							订单全额退款时，红包才能选择退回
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 备注卡片 -->
		<view class="card-section">
			<view class="section-title">
				<text class="title-text">备注</text>
			</view>
			<view class="remark-container">
				<textarea 
					class="remark-textarea" 
					v-model="remark" 
					placeholder="选填"
					placeholder-style="color:#999"
					@focus="clearRemark" />
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<button class="action-btn cancel-btn" @tap="cancelRefund">取消</button>
			<button class="action-btn confirm-btn" @tap="askRefund">退款</button>
		</view>

		<!-- 当天售后确认弹框 -->
		<ModalModule 
			:show="showRefundModal" 
			:custom="true" 
			:button="[]" 
			width="90%" 
			@click="handleRefundModalClick">
			<view class="refund-confirm-modal">
				<view class="modal-header">
					<text class="modal-title">提示</text>
				</view>
				<view class="modal-content">
					<view class="amount-display">
						<text class="amount-label">退款金额</text>
						<text class="amount-value">¥{{refundMoney}}</text>
					</view>
					<view class="confirm-text">
						<text>确认要退款吗？</text>
					</view>
				</view>
				<view class="modal-actions">
					<button class="modal-btn cancel-modal-btn" @tap="cancelRefundModal">取消</button>
					<button class="modal-btn confirm-modal-btn" @tap="executeRefund">确认退款</button>
				</view>
			</view>
		</ModalModule>

		<!-- 跨天售后确认（对齐 ghs：写 sameDay=0，资金原路） -->
		<forward-options-popup
			:show="showForwardPop"
			:order-cleared="orderCleared"
			@cancel="showForwardPop = false"
			@confirm="onForwardConfirm"
		/>
	</view>
</template>
<script>
/**
 * 花店订单售后页：选择退货商品、填写退款金额并提交。
 * 退货单价直接取订单原单价，只需填数量。
 * 跨天售后：预检 + 确认弹窗后提交 sameDay=0；成功进 forwardResult。
 */
import { getDetail,refund } from "@/api/order/index";
import { checkNextDayEligible } from "@/api/refund/index";
import ModalModule from "@/components/plugin/modal";
import ForwardOptionsPopup from "@/components/forward-options-popup";
export default {
	name: "orderDetail",
	components: { ModalModule, ForwardOptionsPopup },
	data() {
		return {
			goodsInfoList:[],
			itemInfoList:[],
			refundMoney:0,
			refundHb:0, //红包退回选择 0表示不退，1表示退回
			refundType:1,
			remark:'',
			orderInfo:{},
			coundRefundPrice:0,
			showRefundModal: false,
			showForwardPop: false,
			nextDayEligible: false,
			orderCleared: false,
			_pendingRefundParams: null,
			shAddPay:0,//0正常当天售后，1跨天售后（订单详情兜底）
			shAddPayReason:0,//0欠款已结清或部分结清，1可售后时间到了
		};
	},

	computed:{
		/** 顶部隔天提示：接口预检 / 本地兜底 / 订单 shAddPay */
		showNextDayTip() {
			return this.nextDayEligible || this.shAddPay == 1 || this.isMustNextDayOrder()
		},
		canRefundBackHb(){
			// 订单全额退款时(即 refundMoney == coundRefundPrice)，红包才能选择退回
			if (this.refundMoney === '' || this.refundMoney === null || this.refundMoney === undefined) return false
			const refundMoney = Number(this.refundMoney)
			const couldRefund = Number(this.coundRefundPrice)
			if (Number.isNaN(refundMoney) || Number.isNaN(couldRefund)) return false
			// 金额比较按 2 位小数对齐，避免浮点误差
			return refundMoney.toFixed(2) === couldRefund.toFixed(2)
		},
		/**
		 * 按退货数量 × 商品原单价汇总金额，并回填退款金额。
		 * 单价不再手填，避免漏填导致退款金额为 0。
		 */
		refundPrice(){
			let price = 0
			if(!this.$util.isEmpty(this.goodsInfoList)){
				for (const item of this.goodsInfoList) {
					if(Number(item.refundCount)>0){
						let currentPrice = Number(item.refundCount)*Number(item.unitPrice)
						price = Number(price) + Number(currentPrice)
					}
				}
			}
			if(!this.$util.isEmpty(this.itemInfoList)){
				for (const item of this.itemInfoList) {
					if(Number(item.refundCount)>0){
						let currentPrice = Number(item.refundCount)*Number(item.unitPrice)
						price = Number(price) + Number(currentPrice)
					}
				}
			}
			this.refundMoney = parseFloat(price.toFixed(2))
			return price
		}
	},
	watch: {
		refundMoney() {
			// 如果已经选了“退回”，但修改退款金额后不满足全额退款条件，则自动回退为“不退”
			if (this.refundHb == 1 && !this.canRefundBackHb) {
				this.refundHb = 0
			}
		}
	},

	methods: {
		setRefundHb(val){
			if(val == 1){
				if(!this.canRefundBackHb){
					this.$msg('订单全额退款时，红包才能选择退回')
					return
				}
			}
			this.refundHb = val
		},
		clearRefundCount(item) {
			this.$set(item, 'refundCount', '');
			this.onRefundCountInput()
		},
		/**
		 * 退货数量变化后读取 refundPrice，按原单价回填退款金额。
		 * 计算属性默认懒求值，不主动读取就不会更新退款金额。
		 */
		onRefundCountInput() {
			this.$nextTick(() => {
				void this.refundPrice
			})
		},
		clearRefundMoney() {
			this.refundMoney = '';
		},
		clearRemark() {
			this.remark = '';
		},
		cancelRefund(){
			uni.navigateBack({delta: 1});
		},
		askRefund(){
			if(this.orderInfo.payWay == 3 && Number(this.orderInfo.remainDebtPrice)>0 && Number(this.refundMoney) > Number(this.orderInfo.remainDebtPrice)){
				if(this.refundType==2){
					uni.showToast({title:'跨天售后请选择商品',icon:'none'})
					return false
				}
				// 售后金额超过剩余欠款：按跨天售后办理
				this.$util.confirmModal({content:'售后金额超过剩余欠款，将按跨天售后办理'},() => {
					this.shAddPay = 1
					this.confirmRefund()
				})
			}else{
				this.confirmRefund()
			}
		},
		confirmRefund(){
			let hasError = false
			let selectProduct = []
			if(!this.$util.isEmpty(this.goodsInfoList)){
				this.goodsInfoList.forEach(ele=>{
					let currentRefundCont = ele.refundCount ? Number(ele.refundCount) :0

					let currentNum = ele.num ? Number(ele.num) : 0
					let hasRefundNum = ele.refundNum ? Number(ele.refundNum) : 0
					let couldRefundNum = Number(currentNum) - Number(hasRefundNum)

					if(Number(currentRefundCont) > Number(couldRefundNum)){
						uni.showToast({title:ele.name+'超过可退数量',icon:'none'})
						hasError = true;
						return false
					}
					if(Number(ele.refundCount)>0){
						selectProduct.push({"productId":ele.goodsId,"num":ele.refundCount,"unitType":ele.unitType,unitName:ele.unitName,unitPrice:ele.unitPrice,property:0})
					}
				})
			}
			if(!this.$util.isEmpty(this.itemInfoList)){
				this.itemInfoList.forEach(ele=>{
					let currentRefundCont = ele.refundCount ? Number(ele.refundCount) :0

					let currentNum = ele.num ? Number(ele.num) : 0
					let hasRefundNum = ele.refundNum ? Number(ele.refundNum) : 0
					let couldRefundNum = Number(currentNum) - Number(hasRefundNum)

					if(Number(currentRefundCont) > Number(couldRefundNum)){
						uni.showToast({title:ele.name+'超过可退数量',icon:'none'})
						hasError = true;
						return false
					}
					if(Number(ele.refundCount)>0){
						selectProduct.push({"productId":ele.itemId,"num":ele.refundCount,"unitType":ele.unitType,unitName:ele.unitName,unitPrice:ele.unitPrice,property:1})
					}
				})
			}
			if(hasError){
				return
			}
			if(this.$util.isEmpty(selectProduct) && this.refundType==1){
				uni.showToast({title:'请选择商品',icon:'none'})
				return;
			}

			if(Number(this.refundMoney)<=0){
				this.$msg('请填写退款金额')
				return false
			}

			const selectProductJson = JSON.stringify(selectProduct)
			this._pendingRefundParams = {
				product: selectProductJson,
				id: this.option.id,
				price: this.refundMoney,
				remark: this.remark,
				refundType: this.refundType,
				refundHb: this.refundHb,
				getOriginalItem: 1,
				version: 2
			}
			// 非当天 / 已结清 / 预检通过 → 跨天售后确认弹窗
			if (this.nextDayEligible || this.shAddPay == 1 || this.isMustNextDayOrder()) {
				if (!this.nextDayEligible && !this.orderCleared) {
					this.orderCleared = Number(this.orderInfo.clearId) > 0
						|| (Number(this.orderInfo.debtPrice) > 0 && Number(this.orderInfo.remainDebtPrice) <= 0)
				}
				this.showForwardPop = true
				return
			}
			// 当天售后：原确认弹框
			this.showRefundModal = true
		},
		/** 是否有有效支付时间（与后端 hasValidPayTime 一致） */
		hasValidPayTime() {
			const payTime = (this.orderInfo && this.orderInfo.payTime) || ''
			return !!payTime && payTime !== '0000-00-00 00:00:00'
		},
		/**
		 * 本地判断是否必须跨天售后：非当天支付 / 已结账单 / 挂账已结清
		 */
		isMustNextDayOrder() {
			const info = this.orderInfo || {}
			if (!this.hasValidPayTime()) {
				return false
			}
			if (Number(info.clearId) > 0) {
				return true
			}
			const debtPrice = Number(info.debtPrice) || 0
			const remainDebt = Number(info.remainDebtPrice) || 0
			if (debtPrice > 0 && remainDebt === 0) {
				return true
			}
			const payDay = String(info.payTime).substr(0, 10)
			const now = new Date()
			const m = now.getMonth() + 1
			const d = now.getDate()
			const today = now.getFullYear() + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
			return payDay !== today
		},
		// 弹框相关方法
		handleRefundModalClick(e) {
			// 处理弹框点击事件
		},
		cancelRefundModal() {
			this.showRefundModal = false
		},
		/** 当天售后确认提交 */
		executeRefund() {
			this.showRefundModal = false
			this.doRefund(this._pendingRefundParams || {})
		},
		/**
		 * 跨天售后确认：写 sameDay=0，资金按原单原路处理
		 */
		onForwardConfirm() {
			this.showForwardPop = false
			const params = Object.assign({}, this._pendingRefundParams || {}, {
				sameDay: 0
			})
			this.doRefund(params)
		},
		/**
		 * 提交售后退款；成功后统一进 forwardResult（对齐 ghs 端）
		 * - 待选手选落地 / 已返充海报 / 已原路成功：均由 forwardResult 展示
		 * - 不再按 payWay 跳转 onlineResult / balanceCp / offlineRemind / debtResult
		 * - hd 无 ghs 的 refundSuccess（报损减库），原路终态也走 forwardResult 简版成功态
		 */
		doRefund(refundParams){
			uni.showLoading({mask:true})
			refund(refundParams).then(res => {
				uni.hideLoading()
				if(res.code == 1){
					const data = res.data || {}
					// 待确认退回方式：当天/隔天线下等 hasReturn=0 且 couldReturn=1
					const needFund = Number(data.needFundAction) === 1
						|| (Number(data.hasReturn) === 0
							&& Number(data.returnBalance) === 0
							&& Number(data.couldReturn) === 1)
					const payload = {
						amount: data.refundPrice || this.refundMoney,
						customId: data.customId || this.orderInfo.customId,
						customBalance: data.customBalance != null ? data.customBalance : '',
						customName: data.customName || this.orderInfo.customName || '',
						forwardSn: data.refundSn || data.orderSn || '',
						forwardId: data.id || 0,
						orderId: data.orderId || this.orderInfo.id || 0,
						payWay: data.payWay != null ? data.payWay : this.orderInfo.payWay,
						onlinePay: data.onlinePay != null ? data.onlinePay : this.orderInfo.onlinePay,
						hasReturn: data.hasReturn != null ? data.hasReturn : 0,
						couldReturn: data.couldReturn != null ? data.couldReturn : 1,
						returnBalance: data.returnBalance != null ? data.returnBalance : 0,
						needFundAction: needFund ? 1 : 0
					}
					uni.setStorageSync('forwardResultPayload', payload)
					this.$util.pageTo({
						url: '/admin/billing/forwardResult',
						type: 2,
						query: Object.assign({}, payload, {
							customName: encodeURIComponent(payload.customName || '')
						})
					})
				}
			})
		},
		async init() {
			const res = await getDetail({ id: this.option.id})
			this.orderInfo = res.data
			

			this.shAddPay = this.orderInfo.shAddPay?this.orderInfo.shAddPay:0
			this.shAddPayReason = this.orderInfo.shAddPayReason?this.orderInfo.shAddPayReason:0

			this.coundRefundPrice = Number(res.data.orderPrice) - Number(res.data.tkPrice || 0) - Number(res.data.nextDayTkPrice || 0)
			this.coundRefundPrice = this.coundRefundPrice.toFixed(2)
			this.coundRefundPrice = parseFloat(this.coundRefundPrice)

			this.goodsInfoList = res.data.goodsInfoList.map(ele=>{
				return {...ele,refundCount:null}
			})
			this.itemInfoList = res.data.itemInfoList.map(ele=>{
				return {...ele,refundCount:null}
			})

			// 预检是否可走跨天售后（对齐 ghs）
			checkNextDayEligible({ orderId: this.option.id }).then(r => {
				if (r.code == 1 && r.data && r.data.ok) {
					this.nextDayEligible = true
					this.orderCleared = Number(r.data.orderCleared) === 1
				} else {
					this.nextDayEligible = false
					if (!this.orderCleared) {
						this.orderCleared = Number(this.orderInfo.clearId) > 0
					}
				}
			}).catch(() => {
				this.nextDayEligible = false
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.refund-page {
	min-height: 100vh;
	background: #f5f6f8;
	padding: 20upx 0 200upx;
}

// 红色提示样式
.warning-tip {
	background: #fff2f0;
	border: 1upx solid #ffccc7;
	border-radius: 8upx;
	margin: 0upx 20upx 20upx 20upx;
	padding: 20upx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.warning-icon {
		font-size: 40upx;
		margin-right: 15upx;
		color: #ff4757;
		font-weight: bold;
		line-height: 1;
	}
	
	.warning-text {
		font-size: 34upx;
		color: #ff4757;
		font-weight:bold;
		text-align: center;
	}
}



// 卡片样式
.card-section {
	background: #fff;
	margin: 0 20upx 20upx;
	border-radius: 16upx;
	box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

// 节标题
.section-title {
	padding: 30upx 30upx 20upx;
	border-bottom: 1upx solid #f0f0f0;
	display: flex;
	align-items: center;
	
	.title-text {
		font-size: 32upx;
		font-weight:600;
		color: #333;
	}
	

}

// 退款方式按钮
.refund-type-buttons {
	padding: 30upx 30upx 20upx;
	display: flex;
	gap: 30upx;
	.admin-button-com {
		flex: 1;
		border-radius: 12upx;
		font-weight: 500;
		transition: all 0.3s ease;
	}
}

// 紧凑商品列表
.product-list-compact {
	margin-top:15upx;
	padding: 0 20upx 20upx;
}

.product-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20upx;
	margin-bottom: 8upx;
	background: #fafbfc;
	border-radius: 8upx;
	border: 1upx solid #eef0f2;
	
	&:last-child {
		margin-bottom: 0;
	}
	

}

.product-basic-info {
	flex: 1;
	margin-right: 20upx;
	
	.product-name-compact {
		font-size: 32upx;
		font-weight: 600;
		color: #333;
		line-height: 1.3;
		display: block;
		margin-bottom: 8upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 380upx;
	}
	
	.product-meta {
		display: flex;
		gap: 12upx;
		flex-wrap: wrap;
		
		.stock-info {
			font-size: 28upx;
			color: #666;
			background: #f5f5f5;
			padding: 4upx 8upx;
			border-radius: 4upx;
		}
		
		.available-info {
			font-size: 28upx;
			color: #09c567;
			background: rgba(255, 107, 53, 0.1);
			padding: 4upx 8upx;
			border-radius: 4upx;
		}
	}
}

.refund-control {
	display: flex;
	align-items: center;
	gap: 8upx;
	
	.refund-input-group {
		display: flex;
		flex-direction: column;
		gap: 12upx;
		
		.input-item {
			display: flex;
			align-items: center;
			gap: 8upx;
			
			.input-label {
				font-size: 24upx;
				color: #666;
				min-width: 60upx;
			}
		}
	}
	
	.refund-input-compact {
		width: 100upx;
		height: 60upx;
		background: #fff;
		border: 1upx solid #ddd;
		border-radius: 6upx;
		text-align: center;
		font-size: 26upx;
		color: #333;
		font-weight: 500;
		
		&:focus {
			border-color: #09c567;
		}
	}
	
	.unit-label {
		font-size: 24upx;
		color: #666;
		min-width: 40upx;
	}
}

// 金额信息
.amount-info {
	padding: 30upx;
}

.amount-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20upx 0;
	border-bottom: 1upx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
	
	&.input-row {
		align-items: flex-start;
		padding-top: 30upx;
	}
	
	.amount-label {
		font-size: 28upx;
		color: #666;
		
		&.required::after {
			content: "*";
			color: #ff4757;
			margin-left: 5upx;
		}
	}
	
	.amount-value {
		display: flex;
		align-items: center;
		
		.price-text {
			font-size: 32upx;
			font-weight: 600;
			color: #333;
		}
		
		.refunded-text {
			font-size: 32upx;
			font-weight: 600;
			color: #666;
		}
		
		&.available-amount {
			font-size: 32upx;
			font-weight: 600;
			color: #09c567;
		}
		&.refund-amount {
			font-size: 32upx;
			font-weight: 600;
			color: #c59b0f;
		}
	}
}

.amount-input-wrapper {
	display: flex;
	align-items: center;
	background: #fafbfc;
	border: 1upx solid #ddd;
	border-radius: 8upx;
	padding: 0 20upx;
	width: 190upx;
	

	
	.currency-symbol {
		font-size: 28upx;
		color: #666;
		margin-right: 10upx;
	}
	
	.amount-input {
		flex: 1;
		height: 80upx;
		font-size: 28upx;
		color: #333;
		font-weight: 500;
		border: none;
		background: transparent;
		width: 115upx;
	}
}

// 备注输入框
.remark-container {
	padding: 20upx 30upx 30upx;
}

.remark-textarea {
	width: 100%;
	height: 120upx;
	background: #fafbfc;
	border: 1upx solid #ddd;
	border-radius: 8upx;
	padding: 15upx;
	font-size: 28upx;
	color: #333;
	line-height: 1.2;
	box-sizing: border-box;
	resize: none;
	

}

// 底部操作按钮
.bottom-actions {
	z-index:39;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 30upx;
	border-top: 1upx solid #eee;
	display: flex;
	gap: 30upx;
	box-shadow: 0 -4upx 12upx rgba(0, 0, 0, 0.1);
}

.action-btn {
	flex: 1;
	height: 88upx;
	border-radius: 12upx;
	font-size: 32upx;
	font-weight: 600;
	border: none;
	transition: all 0.3s ease;
	
	&.cancel-btn {
		background: #f8f9fa;
		color: #666;
		border: 1upx solid #ddd;
		
		&:active {
			background: #e9ecef;
		}
	}
	
	&.confirm-btn {
		background: linear-gradient(135deg, #09c567 0%, #00b894 100%);
		color: #fff;
		box-shadow: 0 4upx 12upx rgba(9, 197, 103, 0.3);
		
		&:active {
			transform: translateY(2upx);
			box-shadow: 0 2upx 8upx rgba(9, 197, 103, 0.3);
		}
	}
}

// 退款确认弹框样式
.refund-confirm-modal {
	background: #fff;
	border-radius: 20upx;
	overflow: hidden;
	
	.modal-header {
		padding: 40upx 30upx 20upx;
		text-align: center;
		border-bottom: 1upx solid #f0f0f0;
		
		.modal-title {
			font-size: 36upx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.modal-content {
		padding: 40upx 30upx;
		text-align: center;
		
		.amount-display {
			margin-bottom: 30upx;
			
			.amount-label {
				display: block;
				font-size: 28upx;
				color: #666;
				margin-bottom: 15upx;
			}
			
			.amount-value {
				display: block;
				font-size: 60upx;
				font-weight: 700;
				color: #ff4757;
				text-shadow: 0 2upx 4upx rgba(255, 71, 87, 0.2);
			}
		}
		
		.confirm-text {
			font-size: 30upx;
			color: #333;
			line-height: 1.5;
		}
	}
	
	.modal-actions {
		display: flex;
		gap: 20upx;
		padding: 0 30upx 40upx;
		
		.modal-btn {
			flex: 1;
			height: 80upx;
			border-radius: 12upx;
			font-size: 30upx;
			font-weight: 600;
			border: none;
			transition: all 0.3s ease;
			
			&.cancel-modal-btn {
				background: #f8f9fa;
				color: #666;
				border: 1upx solid #ddd;
				
				&:active {
					background: #e9ecef;
				}
			}
			
			&.confirm-modal-btn {
				background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
				color: #fff;
				box-shadow: 0 4upx 12upx rgba(255, 71, 87, 0.3);
				
				&:active {
					transform: translateY(2upx);
					box-shadow: 0 2upx 8upx rgba(255, 71, 87, 0.3);
				}
			}
		}
	}
}
</style>