caimei-applets-caimei/pages/user/chats/index.vue

<template>
    <view class="container">
        <view class="cm_ai_container_main">
            <view class="cm_ai_container">
                <!--提问回答element-->
                <view class="cm_ai_answer_main" id="cm_ai_answer">
                    <chat-html ref="chatHtml" :messages='messages' />
                </view>
                <!--提问文本框-->
                <view class="cm_ai_content">
                    <view class="cm_ai_input">
                        <input class="cm_ai_textarea" v-model="questionTextarea" placeholder="请输入您想了解的内容"
                            @confirm="handleAskQuestion" />
                        <view class="cm_ai_button" :class="isLoading ? 'none' : ''" @click="handleAskQuestion">
                            <text class="iconfont icon-fasong"></text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import chatHtml from './components/chat-html' //地址信息
    export default {
        components: {
            chatHtml
        },
        data() {
            return {
                StaticUrl: this.$Static,
                isIphoneX: this.$store.state.isIphoneX,
                isLoading: false,
                chatParams: {
                    userId: '',
                    question: ''
                },
                questionTextarea: '',
                probeChatId: '',
                probeIndex: 0,
                messages: []
            }
        },
        onLoad(option) {

        },
        filters: {

        },
        computed: {
            ...mapState(['hasLogin', 'userInfo', ])
        },
        methods: {
            async initGetStotage() {
                const userInfo = await this.$api.getStorage()
                this.chatParams.userId = userInfo.userId
                this.questionTextarea = ''
            },
            async handleAskQuestion() {
                this.chatParams.question = this.questionTextarea
                if (this.isLoading) { return }
                if (!this.chatParams.question) {
                    this.$util.msg('请输入内容', 2000)
                    return
                }
                this.messages.push({ question: this.chatParams.question, from: 'me', typing: false,
                    currentLength: 0 })
                if (this.probeIndex === 0) {
                    this.messages.push({ question: `老板，稍等一下哈，我为你查询一下${this.chatParams.question}的相关信息。`, from: 'bot',
                        typing: false, currentLength: 0 })
                }
                this.isLoading = true
                setTimeout(() => {
                    if (this.probeIndex === 0) {
                        this.handleUserNewChat(this.chatParams)

                    } else {
                        this.handleUserSecondChat({ chatId: this.probeChatId, ...this.chatParams })
                    }
                }, 1000)
            },
            async handleUserNewChat(chatParams) {
                try {
                    this.questionTextarea = ''
                    const res = await this.UserService.userNewChat(chatParams)
                    const data = res.data
                    this.probeIndex++
                    this.probeChatId = data.chatId
                    this.messages.push({ question: data.result, from: 'bot', typing: false, currentLength: 0 })
                    this.isLoading = false
                } catch (error) {
                    console.error('Error fetching new chats:', error)
                }
            },
            async handleUserSecondChat(chatParams) {
                try {
                    this.questionTextarea = ''
                    const res = await this.UserService.userSecondChat(chatParams)
                    const data = res.data
                    this.messages.push({ question: data.result, from: 'bot', typing: false, currentLength: 0 })
                    this.isLoading = false
                } catch (error) {
                    console.error('Error fetching new chats:', error)
                }
            }
        },
        onShow() {
            this.initGetStotage()
        }
    }
</script>

<style lang="scss">
    page {
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
    }

    .cm_ai_container_main {
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle at 14% 85%, #e7ecf7 0, rgba(231, 236, 247, 0) 37%), radial-gradient(circle at 3.4% 3.7%, rgba(245, 237, 241, .5) 0, rgba(245, 237, 241, 0) 28%), radial-gradient(circle at 100% 18%, #e8ebea 0, hsla(160, 7%, 92%, 0) 30%), linear-gradient(180deg, #f5f4f6, #e6ebf7);

        .cm_ai_container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 0 24rpx 40rpx 24rpx;

            .cm_ai_content {
                width: 100%;
                height: 88rpx;
                background-color: #FFFFFF;
                box-shadow: 0 16rpx 20rpx 0 rgba(174, 167, 223, .2);
                border-radius: 40rpx;
                box-sizing: border-box;
                padding: 14rpx 24rpx;
                margin: 20rpx 0;
                position: relative;

                .cm_ai_input {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    height: 60rpx;
                    overflow: hidden;
                    box-sizing: border-box;
                    padding-right: 60rpx;
                    position: relative;

                    input {
                        width: 100%;
                        height: 60rpx !important;
                        font-size: 24rpx;
                        line-height: 60rpx;
                        background-color: transparent;
                        border: none;
                        box-shadow: none;
                        overflow: auto;
                        scrollbar-width: none;
                        resize: none;
                        box-sizing: border-box;
                        padding-left: 4rpx;
                    }

                    .cm_ai_button {
                        width: 60rpx;
                        height: 60rpx;
                        line-height: 60rpx;
                        border-radius: 20rpx;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 24rpx;
                        position: absolute;
                        right: 0;

                        &.none {
                            background-image: radial-gradient(circle at 14% 85%, #e7ecf7 0, rgba(231, 236, 247, 0) 37%);

                            .icon-fasong {
                                color: #e6e6e6;
                            }
                        }

                        .icon-fasong {
                            font-size: 50rpx;
                            color: #ff5b00;
                        }
                    }
                }
            }

            .cm_ai_answer_main {
                width: 100%;
                min-height: 600rpx;
                overflow-y: auto;
                flex: 9;
            }
        }
    }
</style>