refactor(order-detail): 提取底部操作栏为独立组件并修复上传路径

pages-car/components/order-bottom-bar.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="bottom-bar">
+		<!-- 加入购物车 -->
+		<u-button v-if="orderInfo.showAddToCart" size="mini" shape="circle" plain :custom-style="btnStyle"
+			@click="emitAction('addToCart')">加入购物车</u-button>
+
+		<!-- 修改地址 -->
+		<u-button v-if="orderInfo.showModifyAddress" size="mini" shape="circle" plain :custom-style="btnStyle"
+			@click="emitAction('address')">修改地址</u-button>
+
+		<!-- 取消订单 -->
+		<u-button v-if="orderInfo.showCancel" size="mini" shape="circle" plain :custom-style="btnStyle"
+			@click="emitAction('cancel')">取消订单</u-button>
+
+		<!-- 投诉 -->
+		<u-button v-if="orderInfo.showComplaint" size="mini" shape="circle" plain :custom-style="btnStyle"
+			@click="emitAction('complaint')">投诉</u-button>
+
+		<!-- 超时发货 -->
+		<u-button v-if="orderInfo.showSendTimeout" size="mini" shape="circle" type="warning" :custom-style="btnStyle"
+			@click="emitAction('overtime')">超时发货</u-button>
+
+		<!-- 降价补差 -->
+		<u-button v-if="orderInfo.showCompensation" size="mini" shape="circle" type="primary"
+			:custom-style="themeLightBtnStyle" @click="emitAction('priceMatch')">降价补差</u-button>
+
+		<!-- 催发货 -->
+		<u-button v-if="orderInfo.showUrge" size="mini" shape="circle" :custom-style="themeBtnStyle"
+			@click="emitAction('remind')">催发货</u-button>
+
+		<!-- 付款 -->
+		<u-button v-if="orderInfo.showPay" size="mini" shape="circle" :custom-style="themeBtnStyle"
+			@click="emitAction('pay')">继续付款</u-button>
+
+		<!-- 确认收货 -->
+		<u-button v-if="orderInfo.showConfirmShop" size="mini" shape="circle" :custom-style="themeBtnStyle"
+			@click="emitAction('confirm')">确认收货</u-button>
+
+		<!-- 钱款去向 -->
+		<u-button v-if="orderInfo.showMoneyDestination" size="mini" shape="circle" :custom-style="themeBtnStyle"
+			@click="emitAction('moneyWhere')">钱款去向</u-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			orderInfo: {
+				type: Object,
+				default: () => ({})
+			}
+		},
+		data() {
+			return {
+				btnStyle: {
+					marginLeft: '20rpx',
+					width: '160rpx',
+					height: '60rpx',
+					lineHeight: '60rpx',
+					padding: '0',
+					fontSize: '26rpx'
+				},
+				themeBtnStyle: {
+					marginLeft: '20rpx',
+					width: '160rpx',
+					height: '60rpx',
+					lineHeight: '60rpx',
+					padding: '0',
+					backgroundColor: '#38C148',
+					color: '#fff',
+					border: 'none',
+					fontSize: '26rpx'
+				},
+				themeLightBtnStyle: {
+					marginLeft: '20rpx',
+					width: '160rpx',
+					height: '60rpx',
+					lineHeight: '60rpx',
+					padding: '0',
+					backgroundColor: '#5bc0de',
+					color: '#fff',
+					border: 'none',
+					fontSize: '26rpx'
+				}
+			};
+		},
+		methods: {
+			emitAction(type) {
+				this.$emit('action', type);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.bottom-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: 20rpx 30rpx 0 30rpx;
+		z-index: 99;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+</style>

pages-car/pages/complaint.vue

@@ -184,7 +184,7 @@
                 return statusMap[status] || "未知状态";
             },
             uploadUrl() {
-                return `/api/token/shop/order/complaintUpload/${this.orderId}`;
+                return `/token/shop/order/complaintUpload/${this.orderId}`;
             },
         },
         onLoad(ops) {

pages-car/pages/order-detail.vue

@@ -30,7 +30,7 @@
         <!-- 地址信息 -->
         <view class="info-card address-card">
             <view class="icon-box">
-                <u-icon name="map-fill" color="#ff0000" size="40"></u-icon>
+                <image src="/pages-mine/static/adderss.png" style="width: 40rpx; height: 40rpx"></image>
             </view>
             <view class="address-content">
                 <view class="user-info">
@@ -120,55 +120,7 @@
         </view>
 
         <!-- 底部操作栏 -->
-        <view class="bottom-bar">
-            <!-- 待付款 -->
-            <template v-if="orderInfo.status == '2'">
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('addToCart')">加入购物车</u-button>
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('cancel')">取消订单</u-button>
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('address')">修改地址</u-button>
-                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
-                    @click="handleAction('pay')">继续付款</u-button>
-            </template>
-            <!-- 待发货 -->
-            <template v-else-if="orderInfo.status == '3'">
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('addToCart')">加入购物</u-button>
-                <u-button size="mini" shape="circle" type="warning" :custom-style="btnStyle"
-                    @click="handleAction('overtime')">超时发货</u-button>
-                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
-                    @click="handleAction('remind')">催发货</u-button>
-            </template>
-            <!-- 已发货 -->
-            <template v-else-if="orderInfo.status == '8'">
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('addToCart')">加入购物</u-button>
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('complaint')">投诉</u-button>
-                <u-button size="mini" shape="circle" type="primary" :custom-style="themeLightBtnStyle"
-                    @click="handleAction('priceMatch')">降价补差</u-button>
-                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
-                    @click="handleAction('confirm')">确认收货</u-button>
-            </template>
-            <!-- 交易关闭/已退款 -->
-            <template v-else-if="orderInfo.status == '-1' || orderInfo.status == '10'">
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('addToCart')">加入购物</u-button>
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('complaint')">投诉</u-button>
-                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle"
-                    @click="handleAction('moneyWhere')">钱款去向</u-button>
-            </template>
-            <!-- 交易完成 -->
-            <template v-else-if="orderInfo.status == '12'">
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('addToCart')">加入购物</u-button>
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle"
-                    @click="handleAction('complaint')">投诉</u-button>
-            </template>
-        </view>
+        <order-bottom-bar :orderInfo="orderInfo" @action="handleAction"></order-bottom-bar>
 
         <!-- 占位符，防止底部按钮遮挡内容 -->
         <view style="height: 120rpx;"></view>
@@ -176,7 +128,12 @@
 </template>
 
 <script>
+    import OrderBottomBar from '../components/order-bottom-bar.vue';
+
     export default {
+        components: {
+            OrderBottomBar
+        },
         data() {
             return {
                 orderInfo: {
@@ -191,33 +148,6 @@
                     discountMoney: 0,
                     payMoney: 0,
                     createTime: ''
-                },
-                btnStyle: {
-                    marginLeft: '20rpx',
-                    width: '160rpx',
-                    height: '60rpx',
-                    lineHeight: '60rpx',
-                    padding: '0'
-                },
-                themeBtnStyle: {
-                    marginLeft: '20rpx',
-                    width: '160rpx',
-                    height: '60rpx',
-                    lineHeight: '60rpx',
-                    padding: '0',
-                    backgroundColor: '#38C148',
-                    color: '#fff',
-                    border: 'none'
-                },
-                themeLightBtnStyle: {
-                    marginLeft: '20rpx',
-                    width: '160rpx',
-                    height: '60rpx',
-                    lineHeight: '60rpx',
-                    padding: '0',
-                    backgroundColor: '#5bc0de',
-                    color: '#fff',
-                    border: 'none'
                 }
             };
         },
@@ -483,19 +413,5 @@
                 }
             }
         }
-
-        .bottom-bar {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background-color: #fff;
-            padding: 20rpx 30rpx;
-            padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
-        }
     }
 </style>