Huiqitong/src/pages/index/ChatDialog.vue

<template>
    <view class="dialog-container" v-if="visible">
        <view class="dialog-mask" @click="close">×</view>
        <view class="dialog-content" :style="{ height: isdx ? '88%' : '686rpx' }">
            <view class="butss">
                <image
                    style="width: 152rpx; margin-left: 20rpx; top: -120rpx; left: -2rpx; position: absolute"
                    src="@/static/img/aiimg.png"
                    mode="widthFix"
                ></image>
                <view style="display: flex; align-items: center">
                    <view style="font-size: 50rpx; color: #007fff" @click="close">×</view>
                    <image
                        style="width: 40rpx; height: 40rpx; margin-left: 40rpx"
                        @click="dxclick"
                        :src="isdx ? '/static/img/sx.png' : '/static/img/fd.png'"
                        mode=""
                    ></image>
                </view>
            </view>
            <scroll-view class="message-box" scroll-y :style="{ height: isdx ? '80%' : '70%' }">
                <view class="akstart" v-if="showfirst">
                    <view v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]">
                        <image class="aicon" src="@/static/img/aiicon.png" mode=""></image>
                        <view class="bubble">
                            <text>{{ msg.content }}</text>
                        </view>
                    </view>
                    <view v-if="loading" class="loading">AI思考中...</view>
                </view>
                <view class="cnxw" v-else>
                    <view class="message assistant">
                        <image class="aicon" src="@/static/img/aiicon.png" mode="widthFix"></image>
                        <view class="bubble">
                            <text class="cwtitle">猜你想问</text>
                            <u-line color="#99CCFF" margin="20rpx 0"></u-line>
                            <text class="cwtxt" @click="askClcik('小微企业优惠政策')">小微企业优惠政策</text>
                            <text class="cwtxt" @click="askClcik('2025年最新小微企业优惠政策')">2025年最新小微企业优惠政策</text>
                            <text class="cwtxt" @click="askClcik('法律服务')">法律服务</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="input-box" v-if="showfirst">
                <input v-model="inputText" placeholder="请输入问题" @confirm="send" />
                <button @click="send" :disabled="loading">发送</button>
            </view>
            <view class="inputbox" @click="showfirst = true" v-else>
                <image style="width: 28rpx; height: 26rpx; margin-right: 8rpx" src="@/static/img/daan.png" mode=""></image>
                找不到答案，点此提问
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { ai } from '@/api/index'

const showfirst = ref(false)

const props = defineProps({
    visible: Boolean
})
const emit = defineEmits(['close'])

const messages = ref([])
const inputText = ref('')
const loading = ref(false)

const close = () => emit('close')

const send = async () => {
    if (!inputText.value.trim()) return

    // 用户消息（右侧）
    messages.value.push({
        role: 'user',
        content: inputText.value
    })

    const question = inputText.value
    inputText.value = ''
    loading.value = true

    try {
        const { data } = await ai({
            messages: question
        })

        // AI回复（左侧）
        messages.value.push({
            role: 'assistant',
            content: data.content
        })
    } catch (e) {
        messages.value.push({
            role: 'system',
            content: '服务异常，请稍后重试'
        })
    } finally {
        loading.value = false
    }
}
const askClcik = (val) => {
    showfirst.value = true
    inputText.value = val
}

const isdx = ref(false)
const dxclick = () => {
    isdx.value = !isdx.value
}
</script>

<style scoped lang="scss">
.dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.dialog-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
    position: absolute;
    width: 100%;
    bottom: 0;
    background: #e7f3ff;
    box-sizing: border-box;
    border: 2rpx solid #ffffff;
    box-shadow: 0rpx -30rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 96rpx 0rpx 0rpx 0rpx;
    display: flex;
    flex-direction: column;
}

.message-box {
    padding: 30rpx 30rpx 10rpx 30rpx;
    box-sizing: border-box;
}

.message {
    margin-bottom: 30rpx;
    display: flex;
}

.message.user {
    justify-content: flex-end;
}

.message.assistant {
    justify-content: flex-start;
}

.bubble {
    max-width: 75%;
    padding: 20rpx 30rpx;
    border-radius: 10rpx;
    background-color: aliceblue;
}

.user {
    .bubble {
        background: #95ec69;
    }

    .aicon {
        width: 0;
        height: 0;
    }
}

.assistant {
    .aicon {
        width: 64rpx;
    }

    .bubble {
        background: #ffffff;
        margin-left: 20rpx;

        text {
            font-family: Source Han Sans;
            font-size: 24rpx;
            font-weight: 300;
            line-height: 48rpx;
            text-align: justify;
            /* 浏览器可能不支持 */
            display: flex;
            align-items: center;
            letter-spacing: normal;
            color: #000000;
        }
    }
}

.input-box {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 25rpx;
    box-sizing: border-box;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    background: #ffffff;
    box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
}

input {
    flex: 1;
    padding: 16rpx 24rpx;
    border: 2rpx solid #ddd;
    border-radius: 8rpx;
}

button {
    margin-left: 20rpx;
    padding: 0 30rpx;
    background: #007aff;
    color: white;
    height: 70rpx;
    display: flex;
    align-items: center;
}

.loading {
    text-align: center;
    color: #999;
}

.cwtitle {
    color: #007fff !important;
}

.cwtxt {
    font-family: Source Han Sans;
    font-size: 24rpx;
    font-weight: 300;
    line-height: 48rpx;
    text-align: justify;
    /* 浏览器可能不支持 */
    display: flex;
    align-items: center;
    letter-spacing: normal;
    color: #666666;
}

.inputbox {
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    background: #ffffff;
    box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
    font-family: Source Han Sans;
    font-size: 24rpx;
    font-weight: 300;
    line-height: 48rpx;
    text-align: justify;
    /* 浏览器可能不支持 */
    display: flex;
    align-items: center;
    letter-spacing: normal;
    color: #007fff;
}

.butss {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20rpx;
}
</style>