book-hi/pages-car/pages/complaint.vue

<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>