YXGJ/cloud/feedback/detail.vue

<template>
    <view class="detail">
        <view class="header-info">
            <view class="title">反馈描述</view>
            <view class="type">
                <text>反馈类型：</text>
                {{ detail.type }}
            </view>
            <view class="remarks">
                <text>反馈描述：</text>
                {{ detail.remarks }}
            </view>
            <view class="file-box">
                <block v-for="item in detail.attinfos" :key="item.attachmentid">
                    <view v-if="item.fileType == 'image'" @click="viewImages(item.url)" class="item">
                        <u-image :src="item.url" :width="tovw(105)" :height="tovw(105)" :lazy-load="true"
                            radius="5"></u-image>
                    </view>
                    <view v-else-if="item.fileType == 'video'" class="item">
                        <video class="video" :style="{ width: tovw(105), height: tovw(105) }" :poster="item.subfiles[0].url"
                            :src="item.url" />
                    </view>
                </block>
            </view>
        </view>
        <view class="message-box">
            <view class="message-header">
                <text>回复</text>
                <text>共<text style="padding: 0 5px;">{{ total }}</text>条</text>
            </view>
            <view class="content">
                <view class="message-item" v-for="item in list" :key="item.sys_datacommentid">
                    <u-image
                        :src="item.headpic ? item.headpic : 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404231713854678447B26b4363.svg'"
                        :width="tovw(32)" :height="tovw(32)" :lazy-load="true" radius="50%"></u-image>
                    <view class="user-info">
                        <text class="name">{{ item.name }}</text>
                        <view class="message-text">
                            {{ item.content }}
                        </view>
                        <text class="time">{{ item.createdate }}</text>
                    </view>
                </view>
                <view v-if="!list.length" style="padding:50px 0 100px 0;">
                    <u-empty mode="data" text="暂无回复" />
                </view>
                <view v-else style="padding-bottom: 10px;">
                    <u-divider text="已经到底部" :dashed="true" />
                </view>
            </view>
        </view>
        <view :style="{ height: tovw(75) }"></view>

        <view class="footer">
            <view class="input-box" hover-class="navigator-hover">
                <input class="input" type="text" placeholder="评论" :value="commentText" maxlength="499"
                    @input="changeComment" confirm-type="send" @confirm="onSend">
                <icon v-if="commentText" class="icon" type="clear" size="3.733vw" @click="onClear" />
            </view>
            <view class="add-box">
                <view class="add" hover-class="navigator-hover" @click="loading ? '' : onSend()">
                    <u-loading-icon v-if="loading" />
                    <block v-else>
                        发送
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { formattedFiles, viewImage } from "../../utils/settleFiles.js"
export default {
    data() {
        return {
            detail: { attinfos: [] },
            "content": {
                "sa_feedbackid": '',
                "pageNumber": 1,
                "pageSize": 20
            },
            list: [],
            id: '',
            commentText: '',
            total: 0,
            loading: false
        }
    },
    onReachBottom() {
        if (!this.loadingGetList) this.getComment();
    },
    methods: {
        async getDetail(id) {
            let res = await this.$Http.basic({
                "id": 20240517102602,
                "content": {
                    sa_feedbackid: id
                },
            })
            res.data.attinfos = formattedFiles(res.data.attinfos)
            this.detail = res.data
            console.log(this.detail, '反馈信息');
        },
        async getComment(init = false) {
            return new Promise(async (resolve, reject) => {
                if (this.paging(this.content, init)) return resolve();
                this.content.sa_feedbackid = this.id
                await this.$Http.basic({
                    "id": 20240517103002,
                    content: this.content
                }).then(res => {
                    resolve();
                    if (this.cutoff(res.msg)) return;
                    this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                    this.content.pageNumber = res.pageNumber - 0 + 1;
                    this.content.pageTotal = res.pageTotal;
                    this.content.pageSize = res.pageSize;
                    this.total = res.total;
                    console.log('回复列表', this.list);
                })
            })

        },
        /* 预览图片 */
        viewImages(url) {
            viewImage(url)
        },
        changeComment(e) {
            this.commentText = e.detail.value;
        },
        onSend() {
            if (this.commentText == '') return uni.showToast({
                title: '还未输入评论内容！',
                duration: 2000,
                icon: "none"
            });
            this.loading = true
            this.$Http.basic({
                "id": 20240417161502,
                "content": {
                    "ownertable": "sa_feedback",
                    "ownerid": this.id,
                    "contentstr": this.commentText
                },
            }).then(res => {
                console.log("发送评论", res)
                this.loading = false
                if (this.cutoff(res.msg, '评论成功')) return;
                this.commentText = '';
                this.getComment(true)
            })
        },
        onClear() {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '是否确定清空评论?',
                success: ({ confirm }) => {
                    if (confirm) that.commentText = ""
                },
            })
        },
    },
    onLoad(options) {
        this.id = options.id
        this.getDetail(options.id)
        this.getComment(true)
    }
}
</script>

<style lang="scss">
.detail {
    box-sizing: border-box;
    font-family: Source Han Sans SC, Source Han Sans SC;

    .header-info {
        display: flex;
        flex-direction: column;
        padding: 15px 10px;
        margin: 10px;
        border-radius: 8px 8px 8px 8px;
        background: #FFFFFF;

        .title {
            font-weight: bold;
            font-size: 16px;
            color: #333333;
        }

        .type {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            margin: 10px 0;

            text {}
        }

        .remarks {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            margin-bottom: 10px;
        }

        .file-box {
            display: block;

            .item {
                margin: 0 10px 10px 0;
                display: inline-block;

                &:nth-child(3n) {
                    margin-right: 0 !important;
                }
            }
        }
    }

    .message-box {
        background: #FFFFFF;
        padding: 12px 10px 0 10px;

        .message-header {
            display: flex;
            justify-content: space-between;
            padding-bottom: 20px;

            text {
                color: #333333;

                &:first-child {
                    font-weight: 500;
                    font-size: 16px;
                }

                &:last-child {
                    font-weight: 400;
                    font-size: 14px;
                }
            }
        }

        .content {
            .message-item {
                margin-bottom: 20px;
                display: flex;
                align-self: self-start;
                padding-bottom: 10px;

                .user-info {
                    display: flex;
                    flex-direction: column;
                    margin-left: 10px;

                    .name {
                        font-weight: 500;
                        font-size: 14px;
                        color: #666666;
                    }

                    .message-text {
                        font-weight: 400;
                        font-size: 14px;
                        color: #333333;
                        margin: 10px 0;
                    }

                    .time {
                        font-weight: 400;
                        font-size: 12px;
                        color: #999999;
                    }
                }
            }
        }
    }

    .footer {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 375px;
        background: #FFFFFF;
        box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
        padding: 10px 10px 15px 10px;

        .add-box {
            padding: 0 20px 0 20px;
        }

        .add {
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
            width: 95px;
            height: 45px;
            background: #C30D23;
            border-radius: 5px;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #FFFFFF;
        }

        .input-box {
            display: flex;
            align-items: center;
            flex: 1;
            height: 45px;
            background: #F7F7F7;
            border-radius: 50px;
            border: 1px solid #CCCCCC;
            padding: 0 10px 0 20px;
            box-sizing: border-box;

            .input {
                flex: 1;
                height: 45px;
                line-height: 45px;
            }

            .icon {
                margin-left: 5px;
            }
        }
    }
}
</style>