HealthStudentWeb/src/views/optimize/expertChat.vue

<!--  -->
<template>
    <div class="expert-chat">
        <NavBar :title="title" @on-click-left="onNavBack"> </NavBar>
        <div class="chat-container" ref="chatBox">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="false">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                    <div v-for="(item, index) in chatList" :key="index" :class="item.class">
                        <!-- 左边 -->

                        <div :class="item.leftClass">
                            <!-- 专家部分 -->
                            <div class="avatar" v-if="item.class !== 'mine'">
                                <img :src="defaultImg" alt="">
                            </div>
                            <!-- 用户部分 -->
                            <div class="mine-con" v-else>
                                <p>{{ item.time }}</p>

                                <div class="text">
                                    <span>{{ item.text }}</span>
                                </div>
                            </div>


                        </div>
                        <div :class="item.rightClass">
                            <!-- 用户部分 -->
                            <div class="avatar" v-if="item.class === 'mine'">
                                <img :src="defaultImg" alt="">
                            </div>
                            <!-- 专家部分 -->
                            <div class="mine-con" v-else>
                                <p>{{ item.time }}</p>

                                <div class="text">
                                    <span>{{ item.text }}</span>
                                </div>
                            </div>

                        </div>




                    </div>
                </van-list>
            </van-pull-refresh>

            <!-- 短语 -->
            <div class="short-text">
                <div class="btn" v-for="(item, index) in shortList" :key="index" :style="{ backgroundColor: item.bgColor }"
                    @click="onAddChat(item)">
                    <p>{{ item.name }}</p>
                </div>
            </div>
        </div>
        <div class="send">
            <div class="left">
                <van-cell-group>
                    <van-field v-model="chat" placeholder="说点什么" maxlength="50" />
                </van-cell-group>
            </div>
            <div class="right" @click="onSend">
                <div class="circle">发送</div>
            </div>
        </div>
    </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import { isNull } from '@/services/utils-service';
import APIOptimize from '@/api/optimize';
export default {
    components: {
        NavBar,
    },
    data() {
        return {
            chat: '',
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            defaultImg: require('../../assets/myself/4_62.png'),
            chatList: [
                {
                    time: '2024-02-24',
                    text: '也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。',
                    class: 'cell-chat',
                    leftClass: 'left',
                    rightClass: 'right'

                }, {
                    time: '2024-02-24',
                    text: '也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。',
                    class: 'cell-chat',
                    leftClass: 'left',
                    rightClass: 'right'

                },
                {
                    time: '2024-02-24',
                    text: '也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。',
                    class: 'mine',
                    leftClass: 'left',
                    rightClass: 'right'

                },
                {
                    time: '2024-02-24',
                    text: '也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。',
                    class: 'cell-chat',
                    leftClass: 'left',
                    rightClass: 'right'

                },
                /* {
                    time: '2024-02-24',
                    text: '也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。',
                    class: 'mine',
                    leftClass: 'left',
                    rightClass: 'right'

                },
                {
                    time: '2024-02-24',
                    text: '也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。',
                    class: 'cell-chat',
                    leftClass: 'left',
                    rightClass: 'right'

                },
                {
                    time: '2024-02-24',
                    text: '也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。',
                    class: 'cell-chat',
                    leftClass: 'left',
                    rightClass: 'right'

                },
                {
                    time: '2024-02-24',
                    text: '也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。',
                    class: 'mine',
                    leftClass: 'left',
                    rightClass: 'right'

                },
                {
                    time: '2024-02-24',
                    text: '也可以与 CellGroup 搭配使用，CellGroup 可以为 Cell 提供上下外边框。',
                    class: 'mine',
                    leftClass: 'left',
                    rightClass: 'right'

                }, */
            ],
            shortList: [
                { name: '赞', bgColor: 'red' },
                { name: '有道理', bgColor: 'green' },
                { name: '说的透彻', bgColor: 'red' },
                { name: '是这样的', bgColor: 'green' },
                { name: '有道理', bgColor: 'green' },
                { name: '有道理', bgColor: 'red' },
                { name: '学习了', bgColor: 'green' },
            ]
        }
    },
    created() {

    },
    computed: {
        title() {
            return this.$route.query.title || ''
        }
    },
    mounted() {
        this.scrollToBottom(); // 页面加载时也滚动到底部
    },
    methods: {
        scrollToBottom() {
            this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight;
        },
        onNavBack() {
            this.$router.push({
                name: 'trainingcamp'
            })
        },
        onLoad() {
            setTimeout(() => {
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }

                for (let i = 0; i < 10; i++) {
                    this.list.push(this.list.length + 1);
                }
                this.loading = false;

                if (this.list.length >= 40) {
                    this.finished = true;
                }
            }, 1000);
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        onAddChat(item) {
            this.chat = item.name;
        },
        onSend() {
            if (isNull(this.chat)) {
                return this.$toast.fail({
                    message: '评论不能为空'
                })
            }
            this.onComment();
            /* let message = {
                time: '2024-02-24',
                text: this.chat,
                class: 'mine',
                leftClass: 'left',
                rightClass: 'right'
            };
            this.chatList.push(message); */
            // TODO,调取接口
        },
        // 发送评论
        onComment() {
            this.$toast.loading();
            let reqBody = {
                lessonId: Number(this.$route.query.lessonId),
                content: this.chat,
                shortcutCode: ""
            };
            APIOptimize.comment(reqBody).then(res => {
                console.log("评论详情", res);
                const data = res.data;
                if (data.stateCode === 1) {
                    this.$toast.success({
                        message: '评论成功'
                    });
                    setTimeout(() => {
                        this.$router.push({
                            name: 'trainingcamp',

                        });
                    })
                } else {
                    this.$dialog.confirm({
                        message: `${data.message}`,
                        showCancelButton: false
                    })
                }
            }).catch((e) => {
                this.$dialog.confirm({
                    message: `${e.message}`
                })
            }).finally(() => {
                /* this.$toast.clear() */
            })
        }
    },
}
</script>
<style scoped lang="scss">
@import './scss/expertChat.scss';
/* @import url(); 引入css类 */
</style>