feat(order): 新增订单投诉功能并重构订单操作按钮

pages-car/components/buy-order-item.vue

@@ -24,43 +24,53 @@
 
         <!-- 操作按钮 -->
         <view class="action-box">
-            <!-- 待付款 -->
-            <template v-if="order.status == '1' && order.cancelStatus == '0'">
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('address')">修改地址</u-button>
-                <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('cancel')">取消订单</u-button>
-                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('pay')">付款</u-button>
-            </template>
-            <!-- 待发货 -->
-            <template v-else-if="order.status == '2' && order.refundStatus == '1' && order.cancelStatus == '0'">
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('address')">修改地址</u-button>
-                <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('refund')">申请售后</u-button>
-                <u-button size="mini" shape="circle" type="warning" plain :custom-style="btnStyle" @click.stop="handleAction('remind')">催发货</u-button>
-            </template>
-            <!-- 待收货 -->
-            <template v-else-if="order.status == '3' && order.refundStatus == '1' && order.cancelStatus == '0'">
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('extend')">延长收货</u-button>
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('invoice')">申请开票</u-button>
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('complaint')">投诉</u-button>
-                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('logistics')">查看物流</u-button>
-                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('confirm')">确认收货</u-button>
-            </template>
-            <!-- 已完成 -->
-            <template v-else-if="order.status == '4' && order.refundStatus == '1' && order.cancelStatus == '0'">
-                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('addToCart')">加入购物车</u-button>
-                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('rebuy')">再买一单</u-button>
-                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('evaluate')">评价</u-button>
-                <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('more', ['applyAfterSales', 'logistics', 'invoice'])">更多</u-button>
-            </template>
-            <!-- 退款/售后 -->
-            <template v-else-if="order.refundStatus != '1'">
-                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('moneyWhere')">钱款去向</u-button>
-                <u-button size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('detail')">查看详情</u-button>
-            </template>
-            <!-- 已取消 -->
-            <template v-else-if="order.cancelStatus == '1'">
-                <u-button size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('delete')">删除订单</u-button>
-                <u-button size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('addToCart')">加入购物车</u-button>
-            </template>
+            <!-- 修改地址 -->
+            <u-button v-if="order.showModifyAddress == 1" size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('address')">修改地址</u-button>
+            
+            <!-- 投诉 -->
+            <u-button size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('complaint')">投诉</u-button>
+            
+            <!-- 申请开票 -->
+            <u-button v-if="order.showApplyInvoice == 1" size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('invoice')">申请开票</u-button>
+            
+            <!-- 钱款去向 -->
+            <u-button v-if="order.showMoneyDestination == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('moneyWhere')">钱款去向</u-button>
+            
+            <!-- 查看详情 -->
+            <u-button v-if="order.showShowDetail == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('detail')">查看详情</u-button>
+            
+            <!-- 删除订单 (未包含在Flags中，保留原逻辑) -->
+            <u-button v-if="order.cancelStatus == '1'" size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('delete')">删除订单</u-button>
+            
+            <!-- 取消订单 (未包含在Flags中，保留原逻辑: 待付款且未取消) -->
+            <u-button v-if="order.status == '1' && order.cancelStatus == '0'" size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('cancel')">取消订单</u-button>
+            
+            <!-- 申请售后 -->
+            <u-button v-if="order.showAfterSales == 1" size="mini" shape="circle" type="error" plain :custom-style="btnStyle" @click.stop="handleAction('refund')">申请售后</u-button>
+            
+            <!-- 催发货 -->
+            <u-button v-if="order.showUrge == 1" size="mini" shape="circle" type="warning" plain :custom-style="btnStyle" @click.stop="handleAction('remind')">催发货</u-button>
+            
+            <!-- 延长收货 -->
+            <u-button v-if="order.showExtendReceivingTime == 1" size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleAction('extend')">延长收货</u-button>
+            
+            <!-- 查看物流 -->
+            <u-button v-if="order.showCheckExpress == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('logistics')">查看物流</u-button>
+            
+            <!-- 评价 -->
+            <u-button v-if="order.showEvaluation == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('evaluate')">评价</u-button>
+            
+            <!-- 再来一单 -->
+            <u-button v-if="order.showBuyAgain == 1" size="mini" shape="circle" type="primary" plain :custom-style="btnStyle" @click.stop="handleAction('rebuy')">再买一单</u-button>
+            
+            <!-- 加入购物车 -->
+            <u-button v-if="order.showAddToCart == 1" size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('addToCart')">加入购物车</u-button>
+            
+            <!-- 确认收货 -->
+            <u-button v-if="order.showConfirmShop == 1" size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('confirm')">确认收货</u-button>
+            
+            <!-- 付款 (未包含在Flags中，保留原逻辑: 待付款且未取消) -->
+            <u-button v-if="order.status == '1' && order.cancelStatus == '0'" size="mini" shape="circle" :custom-style="themeBtnStyle" @click.stop="handleAction('pay')">付款</u-button>
         </view>
     </view>
 </template>
@@ -78,18 +88,16 @@ export default {
             defaultCover: 'https://uviewui.com/album/1.jpg',
             btnStyle: {
                 marginLeft: '20rpx',
-                width: '150rpx',
                 height: '60rpx',
                 lineHeight: '60rpx',
-                padding: '0',
+                padding: '0 24rpx',
                 fontSize:'26rpx',
             },
             themeBtnStyle: {
                 marginLeft: '20rpx',
-                width: '160rpx',
                 height: '60rpx',
                 lineHeight: '60rpx',
-                padding: '0',
+                padding: '0 30rpx',
                 backgroundColor: '#38C148',
                 color: '#fff',
                 fontSize:'26rpx',
@@ -116,6 +124,13 @@ export default {
             return map[order.status] || '未知状态'
         },
         handleAction(type, data) {
+            if (type === 'complaint') {
+                uni.setStorageSync('tempComplaintOrder', this.order);
+                uni.navigateTo({
+                    url: `/pages-car/pages/complaint?orderId=${this.order.orderId}`
+                });
+                return;
+            }
             this.$emit('action', { type, order: this.order, data })
         }
     }

pages-car/pages/complaint.vue

@@ -0,0 +1,559 @@
+<template>
+    <view class="complaint-page">
+        <template v-if="showComplaintList">
+            <!-- 处理状态展示 -->
+            <view class="status-block"
+                v-if="complaintInfo.disposeLogList && complaintInfo.disposeLogList.length > 0 && complaintInfo.disposeLogList[0].userType == 1">
+                <view class="status-title">书嗨处理</view>
+                <view class="time">--</view>
+
+                <view class="status-info">
+                    <view class="info-row">
+                        <text class="label">处理状态：</text>
+                        <text class="value status-text">{{ complaintStatusText }}</text>
+                    </view>
+                    <view class="info-row">
+                        <text class="label">平台回复：</text>
+                        <text class="value">{{ complaintInfo.description || "暂无" }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 处理记录时间轴 -->
+            <view class="complaint-records">
+                <!-- 我的投诉 -->
+                <view class="complaint-item" v-for="(item, index) in complaintInfo.disposeLogList" :key="index">
+                    <view class="complaint-header">
+                        <view class="header-main">
+                            <text class="title">{{ item.userType == 1 ? "我的投诉" : "客服回复" }}</text>
+                            <text class="time">{{ item.createTime }}</text>
+                        </view>
+                    </view>
+                    <view class="complaint-content">
+                        <view class="info-row" v-if="item.reason">
+                            <text class="label">投诉原因：</text>
+                            <text class="value">{{ item.reason }}</text>
+                        </view>
+                        <view class="info-row" v-if="item.contactNumber">
+                            <text class="label">联系方式：</text>
+                            <text class="value">{{ item.contactNumber }}</text>
+                        </view>
+                        <view class="info-row">
+                            <text class="label">投诉说明：</text>
+                            <text class="value">{{ item.description }}</text>
+                        </view>
+                        <view class="info-row image-list" v-if="item.imgList && item.imgList.length">
+                            <text class="label">上传凭证：</text>
+                            <view class="images">
+                                <image v-for="(img, imgIndex) in item.imgList" :key="imgIndex" :src="img"
+                                    mode="aspectFill" @click="previewImage(item.imgList, imgIndex)">
+                                </image>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <view class="bottom-fixed-con"
+                v-if="complaintInfo.complaintsStatus == 2 && complaintInfo.disposeLogList && complaintInfo.disposeLogList.length > 0 && complaintInfo.disposeLogList[0].userType == 2">
+                <u-button type="primary" @click="continueComplaint">继续投诉</u-button>
+            </view>
+        </template>
+
+        <!-- 新投诉表单，仅在status为1时显示 -->
+        <template v-else>
+            <!-- 表单区域 -->
+            <view class="form-block">
+                <!-- 投诉原因 -->
+                <view class="form-item flex-a">
+                    <view class="common-text-2 required">投诉原因</view>
+                    <view class="input-wrapper flex-1" @click="showReasonPicker">
+                        <text class="placeholder" v-if="!complaintReason">请选择投诉原因</text>
+                        <text v-else>{{ complaintReason }}</text>
+                        <u-icon name="arrow-right" color="#333" size="32" top="3rpx"></u-icon>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 相关订单 (新增部分，匹配原型) -->
+            <view class="form-block order-block" v-if="orderInfo">
+                <view class="common-text-2 mb-20">相关订单</view>
+                <view class="order-item flex">
+                    <image class="goods-img" :src="orderInfo.goodsImg" mode="aspectFill"></image>
+                    <view class="goods-info flex-1">
+                        <view class="goods-name u-line-2">{{ orderInfo.goodsName }}</view>
+                        <view class="goods-price">¥{{ orderInfo.goodsPrice }}</view>
+                    </view>
+                    <!-- 简单的步进器展示或者数量 -->
+                    <!-- 原型右下角有步进器，这里只展示数量即可，因为是投诉整个订单或其中商品 -->
+                    <view class="goods-num">x{{ orderInfo.goodsNum }}</view>
+                </view>
+            </view>
+
+
+            <view class="common-text-2 required mb-20">上传凭证(最多3张)</view>
+
+            <u-upload class="upload-image" :fileList="fileList" @on-choose-complete="afterRead" @delete="deletePic"
+                :maxCount="3" :auto-upload="false" :previewFullImage="true" uploadText="点击上传"
+                @on-uploaded="onUploaded"></u-upload>
+
+
+            <view class="common-text-2 required mb-20 mt-20">投诉说明</view>
+            <view class="form-block" style="padding: 20rpx">
+                <!-- 投诉说明 -->
+                <u-input v-model="description" type="textarea" placeholder="描述具体情况，有助于客服更快处理" :height="200"
+                    :border="false" maxlength="300"></u-input>
+                <view class="text-right" style="color: #999; font-size: 24rpx;">{{ description.length }}/300</view>
+            </view>
+
+            <view class="form-block mt-20">
+                <!-- 联系方式 -->
+                <view class="form-item flex-a" style="padding: 14rpx 0">
+                    <view class="common-text-2 required">联系电话</view>
+                    <u-input class="flex-1" input-align="right" placeholder-style="color:#999;font-size:28rpx;"
+                        v-model="phone" placeholder="请输入联系方式" :border="false" type="number" maxlength="11"></u-input>
+                </view>
+            </view>
+
+
+            <!-- 底部按钮 -->
+            <view class="bottom-fixed-con">
+                <u-button type="primary" :custom-style="submitBtnStyle" @click="submitComplaint">提交</u-button>
+            </view>
+
+            <!-- 投诉原因选择器 -->
+            <u-picker v-model="showPicker" mode="selector" :range="reasonList" @confirm="confirmReason"
+                @cancel="showPicker = false"></u-picker>
+        </template>
+    </view>
+</template>
+
+<script>
+    import ENV_CONFIG from "@/.env.js";
+    // api前缀
+    const env = ENV_CONFIG[process.env.ENV_TYPE || "dev"];
+    export default {
+        data() {
+            return {
+                showComplaintList: false,
+                complaintReason: "",
+                phone: "",
+                description: "",
+                fileList: [],
+                showPicker: false,
+                reasonList: [],
+                orderId: "",
+                complaintInfo: {
+                    status: 1,
+                    platformReply: "",
+                    disposeLogList: [],
+                },
+                orderInfo: null, // 用于展示相关订单信息
+                uploadSuccessList: [],
+                submitBtnStyle: {
+                    backgroundColor: '#38C148',
+                    color: '#fff',
+                    height: '88rpx',
+                    fontSize: '32rpx',
+                    borderRadius: '44rpx'
+                }
+            };
+        },
+        computed: {
+            complaintStatusText() {
+                const status = this.complaintInfo.complaintsStatus;
+                const statusMap = {
+                    0: "未投诉过",
+                    1: "待处理",
+                    2: "处理中",
+                    3: "已完结",
+                };
+                return statusMap[status] || "未知状态";
+            },
+        },
+        onLoad(ops) {
+            if (ops.orderId) {
+                this.orderId = ops.orderId;
+                this.getComplaintInfo();
+            }
+            // 获取本地存储的订单信息用于展示
+            const tempOrder = uni.getStorageSync('tempComplaintOrder');
+            if (tempOrder && tempOrder.orderId == this.orderId) {
+                // 提取第一个商品展示，或者根据业务逻辑展示
+                // 假设展示第一个商品
+                if (tempOrder.orderItemList && tempOrder.orderItemList.length > 0) {
+                    const item = tempOrder.orderItemList[0];
+                    this.orderInfo = {
+                        goodsImg: item.goodsCover || item.bookCover, // 适配不同字段
+                        goodsName: item.goodsName || item.bookName,
+                        goodsPrice: item.goodsPrice || item.price,
+                        goodsNum: item.goodsCount || item.count || 1
+                    }
+                }
+                // 预填联系方式
+                if (tempOrder.address && tempOrder.address.phone) {
+                    this.phone = tempOrder.address.phone;
+                }
+            }
+
+            this.getComplaintsOptions();
+        },
+        methods: {
+            continueComplaint() {
+                this.showComplaintList = false;
+            },
+            // 获取投诉信息
+            getComplaintInfo() {
+                // 修改为 shop/order 接口
+                uni.$u.http.get(`/token/shop/order/getComplaintsInfo?orderId=${this.orderId}&type=1`).then((res) => {
+                    if (res.code === 200) {
+                        this.complaintInfo = res.data;
+                        this.showComplaintList = res.data.complaintsStatus != 0;
+                    }
+                });
+            },
+            //根据code获取字典 /token/common/getDictOptions
+            getDict(code) {
+                return uni.$u.http.get("/token/common/getDictOptions?type=" + code);
+            },
+            //获取投诉选项 complaints_options
+            getComplaintsOptions() {
+                this.getDict("complaints_options").then((res) => {
+                    if (res.code === 200) {
+                        this.reasonList = res.data.map((item) => item.dictLabel);
+                    }
+                });
+            },
+
+            showReasonPicker() {
+                this.showPicker = true;
+            },
+            confirmReason(e) {
+                this.complaintReason = this.reasonList[e[0]];
+                this.showPicker = false;
+            },
+            onUploaded(lists, name) {
+                console.log(lists, name, "xx111x");
+            },
+            afterRead(lists) {
+                // 先检查token是否存在
+                const token = uni.getStorageSync("token");
+
+                const uploadTasks = lists.map((item) => {
+                    return new Promise((resolve, reject) => {
+                        // 修改为 shop/order 上传接口 (猜测路径，如果失败需确认)
+                        // 参考 getComplaintsInfo 是在 shop/order 下
+                        const uploadUrl = env.apiUrl + `/api/token/shop/order/complaintUpload/${this.orderId}`;
+                        console.log(item, uploadUrl, "xx111x");
+                        uni.uploadFile({
+                            url: uploadUrl,
+                            filePath: item.url,
+                            name: "file",
+                            header: {
+                                Authorization: "Bearer " + token,
+                            },
+                            success: (res) => {
+                                try {
+                                    const result = JSON.parse(res.data);
+                                    if (result.code === 200 && result.data) {
+                                        resolve(result.data);
+                                    } else {
+                                        uni.$u.toast(result.msg || "上传失败");
+                                        reject(new Error(result.msg || "上传失败"));
+                                    }
+                                } catch (e) {
+                                    reject(e);
+                                }
+                            },
+                            fail: (err) => {
+                                uni.$u.toast("上传失败");
+                                reject(err);
+                            },
+                        });
+                    });
+                });
+
+                Promise.all(uploadTasks)
+                    .then((results) => {
+                        this.uploadSuccessList = results.flat();
+                        this.fileList = lists;
+                        console.log(this.fileList, "xx111x", results);
+                    })
+                    .catch((err) => {
+                        console.error("Upload failed:", err);
+                    });
+            },
+            deletePic(event) {
+                this.fileList.splice(event.index, 1);
+                // 同时也需要从 uploadSuccessList 中移除
+                if (this.uploadSuccessList && this.uploadSuccessList.length > event.index) {
+                    this.uploadSuccessList.splice(event.index, 1);
+                }
+            },
+            submitComplaint() {
+                if (!this.complaintReason) {
+                    return uni.$u.toast("请选择投诉原因");
+                }
+                // 移除图片必填校验，或者根据需求决定。原型上写着“上传凭证”，一般非必填，但这里保持逻辑一致
+                // if (this.fileList.length === 0) { ... } 
+
+                if (!this.description) {
+                    return uni.$u.toast("请输入投诉说明");
+                }
+                if (!this.phone) {
+                    return uni.$u.toast("请输入联系方式");
+                }
+
+                // 准备投诉数据
+                const complaintData = {
+                    orderId: this.orderId,
+                    reason: this.complaintReason,
+                    description: this.description,
+                    contactNumber: this.phone,
+                    fileUrls: this.uploadSuccessList || [],
+                };
+
+                // 提交投诉 - 修改为 shop/order 接口
+                uni.$u.http.post("/token/shop/order/addComplaints", complaintData).then((res) => {
+                    if (res.code === 200) {
+                        uni.$u.toast("投诉上报已上报给管理员");
+                        // 返回订单页
+                        setTimeout(() => {
+                            uni.navigateBack({
+                                delta: 1,
+                            });
+                        }, 1500);
+                    } else {
+                        uni.$u.toast(res.msg || "提交失败");
+                    }
+                });
+            },
+            // 图片预览
+            previewImage(urls, current) {
+                uni.previewImage({
+                    urls: urls,
+                    current: current,
+                });
+            },
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+    .complaint-page {
+        min-height: 100vh;
+        background: #f8f8f8;
+        padding: 20rpx;
+        padding-bottom: 120rpx;
+
+        .status-block {
+            background: #ffffff;
+            border-radius: 12rpx;
+            padding: 30rpx;
+            margin-bottom: 20rpx;
+
+            .status-title {
+                font-size: 32rpx;
+                font-weight: 600;
+                color: #222;
+            }
+
+            .status-info {
+                .info-row {
+                    display: flex;
+                    font-size: 28rpx;
+                    line-height: 48rpx;
+
+                    .label {
+                        color: #333;
+                        min-width: 140rpx;
+                    }
+
+                    .value {
+                        color: #333;
+                        flex: 1;
+                    }
+
+                    .status-text {
+                        color: #ff5b5b;
+                    }
+                }
+            }
+        }
+
+        .complaint-records {
+            .complaint-item {
+                background: #ffffff;
+                border-radius: 12rpx;
+                padding: 30rpx;
+                margin-bottom: 20rpx;
+
+                .complaint-header {
+                    margin-bottom: 24rpx;
+
+                    .header-main {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 8rpx;
+
+                        .title {
+                            font-size: 32rpx;
+                            font-weight: 600;
+                            color: #222222;
+                        }
+
+                        .time {
+                            font-size: 26rpx;
+                            color: #999;
+                        }
+                    }
+                }
+
+                .complaint-content {
+                    .info-row {
+                        display: flex;
+                        margin-bottom: 16rpx;
+                        font-size: 28rpx;
+                        line-height: 1.5;
+
+                        .label {
+                            color: #333;
+                            white-space: nowrap;
+                        }
+
+                        .value {
+                            color: #333;
+                            flex: 1;
+                        }
+                    }
+
+                    .image-list {
+                        .label {
+                            display: block;
+                            font-size: 28rpx;
+                            color: #333;
+                            margin-bottom: 16rpx;
+                        }
+
+                        .images {
+                            display: flex;
+                            flex-wrap: wrap;
+                            gap: 20rpx;
+
+                            image {
+                                width: 140rpx;
+                                height: 140rpx;
+                                border-radius: 8rpx;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .form-block {
+            background: #ffffff;
+            border-radius: 12rpx;
+            padding: 0 30rpx;
+            margin-bottom: 20rpx;
+        }
+
+        .order-block {
+            padding: 30rpx;
+
+            .order-item {
+                margin-top: 20rpx;
+
+                .goods-img {
+                    width: 120rpx;
+                    height: 120rpx;
+                    border-radius: 8rpx;
+                    margin-right: 20rpx;
+                    background-color: #f5f5f5;
+                }
+
+                .goods-info {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+
+                    .goods-name {
+                        font-size: 28rpx;
+                        color: #333;
+                    }
+
+                    .goods-price {
+                        font-size: 28rpx;
+                        color: #333;
+                        font-weight: bold;
+                    }
+                }
+
+                .goods-num {
+                    font-size: 26rpx;
+                    color: #999;
+                    align-self: flex-end;
+                }
+            }
+        }
+
+        .required::before {
+            content: "*";
+            color: #ff5b5b;
+            margin-right: 4rpx;
+        }
+
+        .form-item {
+            padding: 30rpx 0;
+
+            .input-wrapper {
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+                font-size: 28rpx;
+                color: #333;
+
+                .placeholder {
+                    color: #999;
+                }
+            }
+        }
+
+        .common-text-2 {
+            font-size: 28rpx;
+            color: #333;
+            font-weight: bold;
+        }
+
+        .mb-20 {
+            margin-bottom: 20rpx;
+        }
+
+        .mt-20 {
+            margin-top: 20rpx;
+        }
+
+        .text-right {
+            text-align: right;
+        }
+
+        .bottom-fixed-con {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background: #fff;
+            padding: 20rpx 30rpx;
+            padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+            box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+            z-index: 100;
+        }
+    }
+
+    .upload-image {
+        ::v-deep .u-list-item {
+            background: #ffffff !important;
+            border: 2rpx dashed #ddd;
+        }
+    }
+</style>

pages-car/pages/my-order.vue

@@ -38,9 +38,7 @@
                     { name: '待发货', value: '2', params: { status: '2' } },
                     { name: '待收货', value: '3', params: { status: '3' } },
                     { name: '已完成', value: '4', params: { status: '4' } },
-                    { name: '已取消', value: '5', params: { cancelStatus: '1' } },
-                    { name: '退款中', value: '6', params: { refundStatus: '2' } },
-                    { name: '已退款', value: '7', params: { refundStatus: '3' } }
+                    { name: '退款/售后', value: '5', params: { status: '5' } },
                 ],
                 currentTab: 0,
                 orderList: [],

pages-car/pages/order-detail.vue

@@ -255,6 +255,13 @@ export default {
             });
         },
         handleAction(type) {
+            if (type === 'complaint') {
+                uni.setStorageSync('tempComplaintOrder', this.orderInfo);
+                uni.navigateTo({
+                    url: `/pages-car/pages/complaint?orderId=${this.orderInfo.orderId || this.orderInfo.orderNo}` // Fallback to orderNo if orderId missing in mock
+                });
+                return;
+            }
             uni.showToast({ title: `点击了${type}`, icon: 'none' });
             // Implement specific logic here similar to my-order.vue
         },

pages.json

@@ -356,6 +356,12 @@
                     "style": {
                         "navigationBarTitleText": "支付成功"
                     }
+                },
+                {
+                    "path": "pages/complaint",
+                    "style": {
+                        "navigationBarTitleText": "订单投诉"
+                    }
                 }
             ]
         },

pages/mine/index.vue

@@ -204,15 +204,15 @@ export default {
 					path: '/pages-car/pages/my-order?status=3'
 				},
 				{
-					name: '退款中',
+					name: '退款/售后',
 					icon: '/pages-car/static/my-order/icon-4.png',
 					badge: 0,
 					key: 'refundNum',
-					path: '/pages-car/pages/my-order?status=6'
+					path: '/pages-car/pages/my-order?status=5'
 				},
 				{
 					name: '已完成',
-					icon: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/5.png',
+					icon: '/pages-car/static/my-order/icon-5.png',
 					badge: 0,
 					key: 'completeNum',
 					path: '/pages-car/pages/my-order?status=4'