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

<template>
    <view class="complaint-page">
        <template v-if="showComplaintList">
            <!-- 处理状态展示 -->
            <view class="status-block" v-if="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[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">
                <!-- 联系方式 -->
                <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="common-text-2 required mb-20">投诉说明</view>
            <view class="form-block" style="padding: 20rpx">
                <!-- 投诉说明 -->
                <u-input
                    v-model="description"
                    type="textarea"
                    placeholder="请描述投诉情况，有助于客服更快处理"
                    :height="200"
                    :border="false"
                ></u-input>
            </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="bottom-fixed-con">
                <u-button type="primary" @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: [],
            },
        };
    },
    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();
        }
        this.getComplaintsOptions();
    },
    methods: {
        continueComplaint() {
            this.showComplaintList = false;
        },
        // 获取投诉信息
        getComplaintInfo() {
            uni.$u.http.get(`/token/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) => {
                    console.log(item, env.apiUrl + `/api/token/order/complaintUpload/${this.orderId}`, "xx111x");
                    uni.uploadFile({
                        url: env.apiUrl + `/api/token/order/complaintUpload/${this.orderId}`,
                        filePath: item.url,
                        name: "file",
                        header: {
                            Authorization: "Bearer " + token,
                        },
                        success: (res) => {
                            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 || "上传失败"));
                            }
                        },
                        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);
        },
        submitComplaint() {
            if (!this.complaintReason) {
                return uni.$u.toast("请选择投诉原因");
            }
            if (!this.phone) {
                return uni.$u.toast("请输入联系方式");
            }
            if (!this.description) {
                return uni.$u.toast("请输入投诉说明");
            }

            // 准备投诉数据
            const complaintData = {
                orderId: this.orderId,
                reason: this.complaintReason,
                description: this.description,
                contactNumber: this.phone,
                fileUrls: this.uploadSuccessList,
            };

            // 提交投诉
            uni.$u.http.post("/token/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">
.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;
        }

        .divider {
            height: 2rpx;
            background: #eeeeee;
            margin: 20rpx 0;
        }

        .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;
    }

    .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;
            }
        }
    }
}

.upload-image {
    .u-list-item {
        background: #ffffff !important;
    }
}
</style>