|
|
@@ -1,112 +1,204 @@
|
|
|
<template>
|
|
|
- <view class="app-content">
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label">退款方式:</view>
|
|
|
- <view class="flex list">
|
|
|
- <view class="flex" @tap="refundType=1" >
|
|
|
- <view class="flex-center radioBtn" :class="refundType==1?'active':''">
|
|
|
- </view>退货并退款</view>
|
|
|
- <view style="margin-left: 30upx" class="flex" @tap="refundType=2">
|
|
|
- <view class="flex-center radioBtn" :class="refundType==1?'':'active'">
|
|
|
- </view>只退款</view>
|
|
|
+ <view class="refund-page">
|
|
|
+ <!-- 红色提示信息 - 待结账单 -->
|
|
|
+ <view class="warning-tip" v-if="!$util.isEmpty(unClear)" @click="goClear(unClear)">
|
|
|
+ <view class="warning-icon">⚠</view>
|
|
|
+ <view class="warning-content">
|
|
|
+ <text class="warning-text">有待结账单</text>
|
|
|
+ <text class="warning-amount">¥{{unClear.actPrice?parseFloat(unClear.actPrice):0}}</text>
|
|
|
</view>
|
|
|
+ <text class="warning-action">查看</text>
|
|
|
</view>
|
|
|
- <view class="refund-item-list" v-if="refundType==1">
|
|
|
- <view class="refund-label"><text></text>选择商品:</view>
|
|
|
- <view>
|
|
|
- <view class="list" v-for="(res,i) in product" :key="i">
|
|
|
- <view class="flex list-title" >
|
|
|
- <text class="product-name">{{res.name}}</text>
|
|
|
- <text class="product-num">{{ `${parseFloat(res.xhNum)}` }}{{res.xhUnitName}}</text>
|
|
|
- <text class="product-price">{{`${parseFloat(res.xhUnitPrice)}`}}元/{{res.xhUnitName}}</text>
|
|
|
- </view>
|
|
|
- <view class="flex list-val" style="font-size:26upx;font-weight:bold;">
|
|
|
- <input type="number" placeholder="退货数" v-model="res.refundCount" placeholder-style="color:#CCCCCC" style="height:60upx;width:160upx;" />
|
|
|
- <text style="margin-left:10upx;">{{res.xhUnitName}}</text>
|
|
|
- <text style="color:green;margin-left:20upx;">可退{{Number(res.xhNum)-Number(res.refundNum)}}{{res.xhUnitName}}</text>
|
|
|
- </view>
|
|
|
+
|
|
|
+ <!-- 退款方式选择卡片 -->
|
|
|
+ <view class="card-section">
|
|
|
+ <view class="section-title">
|
|
|
+ <text class="title-text">退款方式</text>
|
|
|
+ </view>
|
|
|
+ <view class="refund-type-buttons">
|
|
|
+ <button
|
|
|
+ class="type-button"
|
|
|
+ :class="refundType==1?'active':''"
|
|
|
+ @tap="refundType=1">
|
|
|
+ 退货并退款
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="type-button"
|
|
|
+ :class="refundType==2?'active':''"
|
|
|
+ @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">
|
|
|
+ <view class="product-row" v-for="(res,i) in product" :key="i">
|
|
|
+ <view class="product-basic-info">
|
|
|
+ <text class="product-name">{{res.name}}</text>
|
|
|
+ <view class="product-meta">
|
|
|
+ <text class="stock-info">{{parseFloat(res.xhNum)}}{{res.xhUnitName}} X ¥{{parseFloat(res.xhUnitPrice)}}</text>
|
|
|
+ <text class="available-info">可退 {{Number(res.xhNum)-Number(res.refundNum)}}{{res.xhUnitName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="refund-control">
|
|
|
+ <view class="input-item">
|
|
|
+ <input
|
|
|
+ class="refund-input"
|
|
|
+ type="number"
|
|
|
+ placeholder="0"
|
|
|
+ v-model="res.refundCount"
|
|
|
+ placeholder-style="color:#ccc" />
|
|
|
+ <text class="unit-label">{{res.xhUnitName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="refund-item-list" v-if="Number(orderInfo.packCost)>0||Number(orderInfo.sendCost)>0">
|
|
|
- <view class="refund-label"><text></text>其他可退:</view>
|
|
|
- <view>
|
|
|
- <view class="list" v-if="Number(orderInfo.packCost)>0">
|
|
|
- <view class="flex list-title" >
|
|
|
- <text class="product-name">打包费</text>
|
|
|
- <text class="product-num">{{ orderInfo.packCost?parseFloat(orderInfo.packCost):0 }}元</text>
|
|
|
|
|
|
+ <!-- 其他可退卡片 -->
|
|
|
+ <view class="card-section" v-if="Number(orderInfo.packCost)>0||Number(orderInfo.sendCost)>0">
|
|
|
+ <view class="section-title">
|
|
|
+ <text class="title-text">其他可退</text>
|
|
|
+ </view>
|
|
|
+ <view class="other-fee-list">
|
|
|
+ <view class="fee-row" v-if="Number(orderInfo.packCost)>0">
|
|
|
+ <view class="fee-info">
|
|
|
+ <text class="fee-name">打包费</text>
|
|
|
+ <view>
|
|
|
+ <text class="fee-amount">{{ orderInfo.packCost?parseFloat(orderInfo.packCost):0 }}元</text>
|
|
|
+ <text class="available-fee">可退{{parseFloat((Number(orderInfo.packCost)-Number(orderInfo.refundPackCost)).toFixed(2))}}元</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="flex list-val" style="font-size:26upx;font-weight:bold;">
|
|
|
- <input type="digit" placeholder="金额" v-model="orderInfo.refundPackCostAmount" placeholder-style="color:#CCCCCC" />
|
|
|
- <text style="margin-left:10upx;">元</text>
|
|
|
- <text style="color:green;margin-left:20upx;">可退{{parseFloat((Number(orderInfo.packCost)-Number(orderInfo.refundPackCost)).toFixed(2))}}元</text>
|
|
|
+ <view class="fee-control">
|
|
|
+ <view class="input-item">
|
|
|
+ <input
|
|
|
+ class="refund-input"
|
|
|
+ type="digit"
|
|
|
+ placeholder="0.00"
|
|
|
+ v-model="orderInfo.refundPackCostAmount"
|
|
|
+ placeholder-style="color:#ccc" />
|
|
|
+ <text class="unit-label">元</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="list" v-if="Number(orderInfo.sendCost)>0">
|
|
|
- <view class="flex list-title" >
|
|
|
- <text class="product-name">运费</text>
|
|
|
- <text class="product-num">{{ orderInfo.sendCost?parseFloat(orderInfo.sendCost):0 }}元</text>
|
|
|
+ <view class="fee-row" v-if="Number(orderInfo.sendCost)>0">
|
|
|
+ <view class="fee-info">
|
|
|
+ <text class="fee-name">运费</text>
|
|
|
+ <view>
|
|
|
+ <text class="fee-amount">{{ orderInfo.sendCost?parseFloat(orderInfo.sendCost):0 }}元</text>
|
|
|
+ <text class="available-fee">可退{{parseFloat((Number(orderInfo.sendCost)-Number(orderInfo.refundSendCost)).toFixed(2))}}元</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="flex list-val" style="font-size:26upx;font-weight:bold;">
|
|
|
- <input type="digit" placeholder="金额" v-model="orderInfo.refundSendCostAmount" placeholder-style="color:#CCCCCC" />
|
|
|
- <text style="margin-left:10upx;">元</text>
|
|
|
- <text style="color:green;margin-left:20upx;">可退{{parseFloat((Number(orderInfo.sendCost)-Number(orderInfo.refundSendCost)).toFixed(2))}}元</text>
|
|
|
+ <view class="fee-control">
|
|
|
+ <view class="input-item">
|
|
|
+ <input
|
|
|
+ class="refund-input"
|
|
|
+ type="digit"
|
|
|
+ placeholder="0.00"
|
|
|
+ v-model="orderInfo.refundSendCostAmount"
|
|
|
+ placeholder-style="color:#ccc" />
|
|
|
+ <text class="unit-label">元</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label">退款原因:</view>
|
|
|
- <view class="flex list">
|
|
|
- <view class="flex" @tap="cause=0" >
|
|
|
- <view class="flex-center radioBtn" :class="cause==0? 'active' : ''">
|
|
|
- </view>质量问题</view>
|
|
|
- <view style="margin-left: 30upx" class="flex" @tap="cause=1">
|
|
|
- <view class="flex-center radioBtn" :class="cause==1 ? 'active' : ''">
|
|
|
- </view>多开错开</view></view>
|
|
|
- </view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label">订单金额:</view>
|
|
|
- <view class="list">
|
|
|
- <block>¥{{orderInfo.orderPrice ? parseFloat(orderInfo.orderPrice):0}}</block>
|
|
|
- <text style="margin-left:25upx;font-size:25upx;color:green;" v-if="Number(orderInfo.tkPrice)>0">已退¥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</text>
|
|
|
+
|
|
|
+ <!-- 金额信息卡片 -->
|
|
|
+ <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">¥{{couldRefundPrice}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="amount-row">
|
|
|
+ <text class="amount-label">预计退款</text>
|
|
|
+ <text class="amount-value estimate-amount">¥{{refundPrice}}</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="refundMoney=''" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label">可退金额:</view>
|
|
|
- <view class="list">¥{{couldRefundPrice}}</view>
|
|
|
- </view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label">预计退款:</view>
|
|
|
- <view class="list">¥{{refundPrice}}</view>
|
|
|
- </view>
|
|
|
- <view class="flex refund-item">
|
|
|
- <view class="refund-label"><text></text>实际退款:</view>
|
|
|
- <input type="digit" v-model="refundMoney" @focus="refundMoney=''">
|
|
|
+
|
|
|
+ <!-- 退款原因卡片 -->
|
|
|
+ <view class="card-section">
|
|
|
+ <view class="section-title">
|
|
|
+ <text class="title-text">退款原因</text>
|
|
|
+ </view>
|
|
|
+ <view class="refund-reason-buttons">
|
|
|
+ <button
|
|
|
+ class="reason-button"
|
|
|
+ :class="cause==0?'active':''"
|
|
|
+ @tap="cause=0">
|
|
|
+ 质量问题
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="reason-button"
|
|
|
+ :class="cause==1?'active':''"
|
|
|
+ @tap="cause=1">
|
|
|
+ 多开错开
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="refund-item">
|
|
|
- <view class="refund-label">备注:</view>
|
|
|
- <textarea v-model="remark" />
|
|
|
+
|
|
|
+ <!-- 备注卡片 -->
|
|
|
+ <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" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view style="padding:20upx 0 20upx 0;font-size:30upx;font-weight:bold;">
|
|
|
- <text v-if="orderInfo.onlinePay == 2" style="color:green;">此单线上付款,提交后,钱会原路自动退回给客户</text>
|
|
|
+
|
|
|
+ <!-- 提示信息 -->
|
|
|
+ <view class="tip-section">
|
|
|
+ <text v-if="orderInfo.onlinePay == 2" class="tip-text online-tip">此单线上付款,提交后,钱会原路自动退回给客户</text>
|
|
|
<block v-else>
|
|
|
- <text v-if="Number(orderInfo.debtPrice)>0" style="color:#3385ff;">
|
|
|
- 此单为欠款单,提交后,欠款金额会自动减少
|
|
|
- </text>
|
|
|
- <text v-else style="color:red;">此单线下付款,提交后钱不会原路退回,请线下转账给客户</text>
|
|
|
+ <text v-if="Number(orderInfo.debtPrice)>0" class="tip-text debt-tip">此单为欠款单,提交后,欠款金额会自动减少</text>
|
|
|
+ <text v-else class="tip-text offline-tip">此单线下付款,提交后钱不会原路退回,请线下转账给客户</text>
|
|
|
</block>
|
|
|
</view>
|
|
|
- <view class="flex-center btn-box" style="margin-bottom:50upx;margin-top:20upx;padding-bottom:10upx;">
|
|
|
- <view class="flex-center btn" @tap="cancelRefund">取消</view>
|
|
|
- <view class="flex-center btn active" @tap="confirmRefund" style="margin-left: 80upx">确定</view>
|
|
|
- </view>
|
|
|
|
|
|
- <view style="font-size:32upx;z-index:9999;color:red;text-align:center;font-weight:bold;margin-bottom:30upx;"
|
|
|
- v-if="!$util.isEmpty(unClear)" @click="goClear(unClear)">
|
|
|
- <text>有一个待结账单 ¥{{unClear.actPrice?parseFloat(unClear.actPrice):0}}</text>
|
|
|
- <text style="font-weight:bold;margin-left:15upx;">查看</text>
|
|
|
+ <!-- 底部操作按钮 -->
|
|
|
+ <view class="bottom-actions">
|
|
|
+ <button class="action-btn cancel-btn" @tap="cancelRefund">取消</button>
|
|
|
+ <button class="action-btn confirm-btn" @tap="confirmRefund">确定</button>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
@@ -297,115 +389,484 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- .app-content{
|
|
|
- height: calc(100vh - 30upx * 2);
|
|
|
- padding: 30upx;
|
|
|
- background: #FFFFFF;
|
|
|
+.refund-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f5f6f8;
|
|
|
+ padding: 20upx 0 200upx;
|
|
|
+}
|
|
|
+
|
|
|
+// 红色提示样式
|
|
|
+.warning-tip {
|
|
|
+ background: #fff2f0;
|
|
|
+ border: 1upx solid #ffccc7;
|
|
|
+ border-radius: 12upx;
|
|
|
+ margin: 20upx 20upx 20upx 20upx;
|
|
|
+ padding: 20upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 15upx;
|
|
|
+
|
|
|
+ .warning-icon {
|
|
|
+ font-size: 40upx;
|
|
|
+ color: #ff4757;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1;
|
|
|
+ min-width: 50upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-text {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #ff4757;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-amount {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #ff4757;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-action {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #ff4757;
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(255, 71, 87, 0.1);
|
|
|
+ padding: 10upx 20upx;
|
|
|
+ border-radius: 6upx;
|
|
|
+ min-width: 60upx;
|
|
|
+ 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;
|
|
|
+
|
|
|
+ .type-button {
|
|
|
+ flex: 1;
|
|
|
+ height: 80upx;
|
|
|
+ border-radius: 12upx;
|
|
|
font-size: 30upx;
|
|
|
- .radioBtn{
|
|
|
- width: 30upx;
|
|
|
- height: 30upx;
|
|
|
- margin-right: 10upx;
|
|
|
- border: 1upx solid #ddd;
|
|
|
- border-radius: 50%;
|
|
|
- &.active{
|
|
|
- position: relative;
|
|
|
- border: 1upx solid #3385ff;
|
|
|
- &:after{
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 18upx;
|
|
|
- height: 18upx;
|
|
|
- background: #3385ff;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
+ font-weight: 500;
|
|
|
+ border: 1upx solid #ddd;
|
|
|
+ background: #f8f9fa;
|
|
|
+ color: #666;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: linear-gradient(135deg, #3385ff 0%, #2b74e6 100%);
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(51, 133, 255, 0.3);
|
|
|
}
|
|
|
- .refund-item-list{
|
|
|
- display: flex;
|
|
|
- padding-bottom: 30upx;
|
|
|
- padding-top: 30upx;
|
|
|
- border-top: 1upx solid #e6e4e4;
|
|
|
- border-bottom: 1upx solid #e6e4e4;
|
|
|
- .refund-label{
|
|
|
- width: 200upx;
|
|
|
- color:#666666;
|
|
|
- font-size:26upx;
|
|
|
- text{color: red;}
|
|
|
- }
|
|
|
- .list{
|
|
|
- margin-bottom:18upx;
|
|
|
- border-bottom:1upx solid #CCCCCC;
|
|
|
- padding-bottom:14upx;
|
|
|
- .list-title{
|
|
|
- height: 60upx;
|
|
|
- padding-bottom: 20upx;
|
|
|
- font-size:26upx;
|
|
|
- font-weight:bold;
|
|
|
- .product-name{
|
|
|
- overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- width:190upx;
|
|
|
- }
|
|
|
- .product-price{
|
|
|
- overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- width:130upx;
|
|
|
- margin-left:10upx;
|
|
|
- }
|
|
|
- .product-num{
|
|
|
- width:90upx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- margin-left:10upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-val{
|
|
|
- input{
|
|
|
- width: 200upx;
|
|
|
- border: 1upx solid #ddd;
|
|
|
- text-align: center;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ &:active:not(.active) {
|
|
|
+ background: #eff5f8;
|
|
|
}
|
|
|
- .refund-item{
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 商品列表
|
|
|
+.product-list {
|
|
|
+ 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 {
|
|
|
+ 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: 300upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-meta {
|
|
|
+ display: flex;
|
|
|
+ gap: 12upx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .stock-info {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ background: #f5f5f5;
|
|
|
+ padding: 4upx 8upx;
|
|
|
+ border-radius: 4upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .available-info {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #3385ff;
|
|
|
+ background: rgba(51, 133, 255, 0.1);
|
|
|
+ padding: 4upx 8upx;
|
|
|
+ border-radius: 4upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-control {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8upx;
|
|
|
+
|
|
|
+ .input-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.refund-input {
|
|
|
+ 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: #3385ff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.unit-label {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #666;
|
|
|
+ min-width: 40upx;
|
|
|
+}
|
|
|
+
|
|
|
+// 其他可退列表
|
|
|
+.other-fee-list {
|
|
|
+ padding: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.fee-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16upx;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+ background: #fafbfc;
|
|
|
+ border-radius: 8upx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fee-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8upx;
|
|
|
+
|
|
|
+ .fee-name {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fee-amount {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .available-fee {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #3385ff;
|
|
|
+ margin-left:15upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fee-control {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 8upx;
|
|
|
+
|
|
|
+ .input-item {
|
|
|
display: flex;
|
|
|
- padding: 18upx 0;
|
|
|
- .refund-label{
|
|
|
- width: 200upx;
|
|
|
- color:#666666;
|
|
|
- font-size:26upx;
|
|
|
- text{
|
|
|
- color: red;
|
|
|
- }
|
|
|
- }
|
|
|
- input{
|
|
|
- border: 1upx solid #ddd;
|
|
|
- }
|
|
|
- textarea{
|
|
|
- width: calc(100% - 210upx);
|
|
|
- height:150upx;
|
|
|
- border: 1upx solid #ddd;
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
+ gap: 8upx;
|
|
|
}
|
|
|
- .btn-box{
|
|
|
- .btn{
|
|
|
- width: 220upx;
|
|
|
- height: 90upx;
|
|
|
- border: 1upx solid #666666;
|
|
|
- border-radius: 10upx;
|
|
|
- color:#666666;
|
|
|
- &.active{
|
|
|
- background: #3385ff;
|
|
|
- color: #fff;
|
|
|
- border: 1upx solid #3385ff;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 金额信息
|
|
|
+.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: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.available-amount {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #3385ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.estimate-amount {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #3385ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.amount-input-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #fafbfc;
|
|
|
+ border: 1upx solid #ddd;
|
|
|
+ border-radius: 8upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ width: 200upx;
|
|
|
+ height: 80upx;
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 退款原因按钮
|
|
|
+.refund-reason-buttons {
|
|
|
+ padding: 30upx 30upx 20upx;
|
|
|
+ display: flex;
|
|
|
+ gap: 30upx;
|
|
|
+
|
|
|
+ .reason-button {
|
|
|
+ flex: 1;
|
|
|
+ height: 80upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 500;
|
|
|
+ border: 1upx solid #ddd;
|
|
|
+ background: #f8f9fa;
|
|
|
+ color: #666;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #3385ff;
|
|
|
+ color: #e3f2fd;
|
|
|
+ border: 1upx solid #498ff8;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active:not(.active) {
|
|
|
+ background: #eff5f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 备注输入框
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+// 提示信息
|
|
|
+.tip-section {
|
|
|
+ margin: 20upx;
|
|
|
+ padding: 20upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+
|
|
|
+ .tip-text {
|
|
|
+ display: block;
|
|
|
+ font-size: 32upx;
|
|
|
+ line-height: 1.5;
|
|
|
+ font-weight: 600;
|
|
|
+
|
|
|
+ &.online-tip {
|
|
|
+ background: rgba(51, 133, 255, 0.1);
|
|
|
+ color: #3385ff;
|
|
|
+ padding: 15upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ border-left: 4upx solid #3385ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.debt-tip {
|
|
|
+ background: rgba(51, 133, 255, 0.1);
|
|
|
+ color: #3385ff;
|
|
|
+ padding: 15upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ border-left: 4upx solid #3385ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.offline-tip {
|
|
|
+ background: rgba(255, 71, 87, 0.1);
|
|
|
+ color: #ff4757;
|
|
|
+ padding: 15upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ border-left: 4upx solid #ff4757;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 底部操作按钮
|
|
|
+.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, #3385ff 0%, #2b74e6 100%);
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0 4upx 12upx rgba(51, 133, 255, 0.3);
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: translateY(2upx);
|
|
|
+ box-shadow: 0 2upx 8upx rgba(51, 133, 255, 0.3);
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|