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="complaintInfo.orderDetailList && complaintInfo.orderDetailList.length > 0">
                <view class="common-text-2 mb-20">相关订单</view>
                <view class="flex mb-30" v-for="(item, index) in complaintInfo.orderDetailList"
                    :key="item.detailOrderId">
                    <image :src="item.cover" mode="aspectFill"
                        style="width: 120rpx; height: 120rpx; border-radius: 8rpx; flex-shrink: 0;"></image>
                    <view class="flex-1 ml-20"
                        style="display: flex; flex-direction: column; justify-content: space-between; min-height: 120rpx;">
                        <view style="display: flex; justify-content: space-between;">
                            <view class="u-line-2"
                                style="font-size: 28rpx; color: #333; line-height: 40rpx; flex: 1; margin-right: 20rpx;">
                                {{ item.bookName }}
                            </view>
                            <view style="font-size: 28rpx; color: #333;">¥{{ item.price }}</view>
                        </view>
                        <view style="font-size: 24rpx; color: #999; margin-top: 8rpx;" v-if="item.conditionType">
                            品相：{{ item.conditionType | conditionText }}
                        </view>
                        <view style="display: flex; justify-content: flex-end; margin-top: 10rpx;">
                            <u-number-box v-model="item.num" disabled :input-width="60"
                                :input-height="50"></u-number-box>
                        </view>
                    </view>
                </view>
            </view>


            <!-- 上传凭证 -->
            <view class="common-text-2 required mb-20 mt-20">上传凭证(最多3张)</view>
            <view class="form-block" style="padding: 20rpx">
                <common-image-upload v-model="uploadSuccessList" :maxCount="3" :uploadUrl="uploadUrl"
                    tip="上传“有效截图”可以让问题优先被发现哦！"></common-image-upload>
            </view>

            <!-- 投诉说明 -->
            <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>

            <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 CommonImageUpload from "@/components/image-upload.vue";
    // api前缀
    export default {
        components: {
            CommonImageUpload
        },
        data() {
            return {
                showComplaintList: false,
                complaintReason: "",
                phone: "",
                description: "",
                showPicker: false,
                reasonList: [],
                orderId: "",
                complaintInfo: {
                    status: 1,
                    platformReply: "",
                    orderDetailList: [],
                    disposeLogList: [],
                },
                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] || "未知状态";
            },
            uploadUrl() {
                return `/api/token/shop/order/complaintUpload/${this.orderId}`;
            },
        },
        onLoad(ops) {
            if (ops.orderId) {
                this.orderId = ops.orderId;
                this.getComplaintInfo();
            }

            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("shop_order_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;
            },
            submitComplaint() {
                if (!this.complaintReason) {
                    return uni.$u.toast("请选择投诉原因");
                }

                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>