customAgent/src/components/geriatric-discourse.vue

<template>
    <div class="geriatric-discourse" v-if="dataMes">
        <div class="geriatric-discourse-content an-move-left">
            <div class="newBox" :style="{ 'backgroundImage': 'url(' + dataMes.imgUrl + ')' }">
                <button type="button"
                    :style="{ 'padding': ' 0 10rem', 'background': dataMes.btnBgcolor, 'color': dataMes.btnColor }"
                    v-text="dataMes.btnName" @click="connectionArtificial($event)"></button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, inject, onMounted } from 'vue'
import { Loading, showToast } from 'vant'
import imageService from '@/utils/imageService'

defineProps({
    userInfos: { type: Object, default: () => ({}) }
})

const store = inject('appStore', null)
const userInfo = inject('userInfo', ref({}))
const userId = inject('userId', ref(''))
const source = inject('source', ref(''))
const manualService = inject('manualService', ref('1'))
const sessionId = inject('sessionId', ref(''))
const mescrollContent = inject('mescrollContent', ref(null))
const sendMessageList = inject('sendMessageList', ref([]))

const dataMes = ref('')

onMounted(() => {
    initGeriatric()
})

function initGeriatric() {
    store?.dispatch?.('post', {
        url: 'specialBtn/config',
        data: {
            source: source.value,
            btnType: userInfo.value && userInfo.value.vip ? 0 : 1
        }
    }).then(res => {
        console.log('老年人配置信息：', res.data)
        if (res.code && res.code != 0) {
            showToast(res.msg)
            return
        }
        const imgKey = JSON.parse(res.data.imgUrl).url
        imageService.getImageByKey(imgKey).then(imgUrl => {
            res.data.imgUrl = imgUrl
            dataMes.value = res.data
        }).catch(err => {
            console.error('获取图片失败:', err)
            dataMes.value = res.data
        })
    }).catch(error => {
        console.log(error)
    })
}

function connectionArtificial(event) {
    try {
        let current = event.currentTarget
        let qaId = ''

        let sendParmas = {
            reqAndResType: '1',
            msgText: '&转人工服务&',
            msgSource: manualService.value
        }

        scrollTopBody()
        store?.dispatch?.('connectionArtificial', sendParmas).then(() => {
            current.disabled = true
        }).catch(err => {
            current.disabled = false
            console.log(err)
        })

        getUserBehavior(qaId, '5', '老年客户或VIP用户转人工服务')
    } catch (error) {
        console.log(error)
    }
}

function getUserBehavior(qaId, eventType, eventMsg) {
    let param = { qaId, eventType, eventMsg }
    store?.dispatch?.('userBehavior', param).catch(err => {
        console.log(err)
    })
}

function scrollTopBody() {
    setTimeout(() => {
        try {
            if (mescrollContent.value) {
                mescrollContent.value.scrollTop = mescrollContent.value.scrollHeight || 0
            }
        } catch (error) {
            console.log(error.message)
        }
    }, 300)
}
</script>

<style scoped>
.geriatric-discourse {
    overflow: hidden;
    padding-bottom: 10rem;
}

.geriatric-discourse-content {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: top;
    -webkit-align-items: top;
    align-items: top;
}

.header-pic {
    width: 36rem;
    height: 36rem;
}

.avatarUrl {
    display: block;
    width: 36rem;
    height: 36rem;
    border: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.discourse-main-box {
    width: 100%;
    margin-left: 10rem;
    border-radius: 18rem;
    padding: 7.5rem 14rem 0 14rem;
    box-sizing: border-box;
    background: #FFFFFF;
}

.discourse-content {
    width: 100%;
    font-family: NotoSansHans-Regular;
    font-size: 14rem;
    line-height: 20rem;
    color: #333333;
}

.discourse-button {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 7rem 0 14rem 0;
}

.discourse-button .button-rengong {
    width: 226rem;
    margin: 0 auto;
    background: #579AFF;
    box-shadow: 1rem 2rem 5rem 0 rgba(10, 75, 173, 0.42), inset 0 -4rem 15rem 0 rgba(164, 203, 255, 0.25);
    border-radius: 8rem;
    font-family: NotoSansHans-Regular;
}

.newBox {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rem;
}

.newBox button {
    border-radius: 8rem;
    border: none;
    font-size: 16rem;
    cursor: pointer;
}
</style>