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

<template>
    <view class="complaint-page">
        <template v-if="complaintInfo.complaintsStatus == 1">
            <!-- 处理状态展示 -->
            <view class="status-block" v-if="complaintInfo.disposeLogList && complaintInfo.disposeLogList.length">
                <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>
        </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 {
            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: {
        // 获取投诉信息
        getComplaintInfo() {
            uni.$u.http.get(`/token/order/getComplaintsInfo?orderId=${this.orderId}&type=1`)
                .then(res => {
                    if (res.code === 200) {
                        this.complaintInfo = res.data
                    }
                })
        },
        //根据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>