|
|
|
|
@ -1,13 +1,16 @@ |
|
|
|
|
<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 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> |
|
|
|
|
@ -16,7 +19,7 @@ import { Loading, showToast } from 'vant' |
|
|
|
|
import imageService from '@/utils/imageService' |
|
|
|
|
|
|
|
|
|
defineProps({ |
|
|
|
|
userInfos: { type: Object, default: () => ({}) } |
|
|
|
|
userInfos: { type: Object, default: () => ({}) } |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const store = inject('appStore', null) |
|
|
|
|
@ -31,162 +34,170 @@ const sendMessageList = inject('sendMessageList', ref([])) |
|
|
|
|
const dataMes = ref('') |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
initGeriatric() |
|
|
|
|
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) |
|
|
|
|
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) |
|
|
|
|
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) |
|
|
|
|
}) |
|
|
|
|
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) |
|
|
|
|
setTimeout(() => { |
|
|
|
|
try { |
|
|
|
|
if (mescrollContent.value) { |
|
|
|
|
mescrollContent.value.scrollTop = mescrollContent.value.scrollHeight || 0 |
|
|
|
|
} |
|
|
|
|
} catch (error) { |
|
|
|
|
console.log(error.message) |
|
|
|
|
} |
|
|
|
|
}, 300) |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
<style scoped lang="scss" > |
|
|
|
|
.geriatric-discourse { |
|
|
|
|
overflow: hidden; |
|
|
|
|
padding-bottom: 10rem; |
|
|
|
|
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; |
|
|
|
|
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; |
|
|
|
|
width: 36rem; |
|
|
|
|
height: 36rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.avatarUrl { |
|
|
|
|
display: block; |
|
|
|
|
width: 36rem; |
|
|
|
|
height: 36rem; |
|
|
|
|
border: 0; |
|
|
|
|
margin-top: auto; |
|
|
|
|
margin-bottom: auto; |
|
|
|
|
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; |
|
|
|
|
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; |
|
|
|
|
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; |
|
|
|
|
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; |
|
|
|
|
display: block; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 40rem; |
|
|
|
|
border: 0; |
|
|
|
|
border-radius: 22rem; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
background: linear-gradient(90deg, #025cea 0%, #0595f6 100%); |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 14rem; |
|
|
|
|
&:disabled { |
|
|
|
|
background: linear-gradient(270deg, #63a0ff 0%, #025cea 100%); |
|
|
|
|
opacity: 0.3; |
|
|
|
|
color: inherit; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
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; |
|
|
|
|
border-radius: 8rem; |
|
|
|
|
border: none; |
|
|
|
|
font-size: 16rem; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
</style> |
wujingling0908
4 days ago