You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
573 lines
16 KiB
573 lines
16 KiB
<template>
|
|
<div class="text-template-box" v-if="introduce">
|
|
<div
|
|
class="text-folding-box"
|
|
:class="showTotal ? 'total-introduce' : 'detailed-introduce'"
|
|
ref="textFolding"
|
|
>
|
|
<div class="question-answer-con" v-if="introduce" ref="desc">
|
|
<policy-list
|
|
:data="itemlist"
|
|
:tips1="tips1"
|
|
:tips2="tips2"
|
|
@descHeightChange="descHeightChange"
|
|
/>
|
|
<xuqi-policy-list :data="itemlist" @descHeightChange="descHeightChange" />
|
|
<p
|
|
:class="{ connectionArtificial: disabled }"
|
|
v-html="replacementRagEmoticon(introduce)"
|
|
:data-qaid="itemlist && itemlist.qaId ? itemlist.qaId : ''"
|
|
></p>
|
|
</div>
|
|
<div
|
|
v-if="intents && intents.length > 0"
|
|
:class="
|
|
reqAndResType === '05' ? 'content-question-answer--grid' : 'content-question-answer'
|
|
"
|
|
>
|
|
<button
|
|
:class="hasClicked || disabled ? 'answer-items setGrey' : 'answer-items'"
|
|
v-for="(items, index) in intents"
|
|
:key="index"
|
|
:disabled="disabled"
|
|
@click.stop="richCallAnswer(items)"
|
|
>
|
|
{{ items.intent }}
|
|
</button>
|
|
</div>
|
|
<div class="question-answer-help" v-if="itemlist.cmd && itemlist.cmd == 'RGFWHS'">
|
|
如需更多帮助，请点击<button
|
|
class="answer-help-btn"
|
|
:disabled="disabled"
|
|
@click.stop="manualAnswer($event, itemlist)"
|
|
>
|
|
进入人工服务</button
|
|
>。
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="unfold-box"
|
|
:class="exchangeButton ? 'unfold-bg' : 'unfold-style'"
|
|
v-if="showExchangeButton"
|
|
>
|
|
<a href="javascript:;" @click="showTotalIntro"
|
|
>{{ exchangeButton ? '展开' : '收起'
|
|
}}<em class="look-more-icon" :class="!exchangeButton ? 'active' : ''"></em
|
|
></a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, inject, onMounted, nextTick } from 'vue'
|
|
import { showToast, showLoadingToast, closeToast } from 'vant'
|
|
import _ from 'lodash'
|
|
import faceJSON from '@/mock/face.json'
|
|
import utils from '@/utils/utils'
|
|
import { onceClickCmd, oldXuqiPolicyCmdList, SJHLCmdList } from '@/utils/constant'
|
|
import PolicyList from '@/components/policyList.vue'
|
|
import XuqiPolicyList from '@/components/xuqiPolicyList.vue'
|
|
import wx from 'weixin-js-sdk'
|
|
|
|
const props = defineProps({
|
|
introduce: { type: String, default: '' },
|
|
intents: { type: Array, default: () => [] },
|
|
disabled: { type: Boolean, default: false },
|
|
heightMax: { type: String, default: '' },
|
|
itemlist: { type: Object, default: () => ({}) },
|
|
lostChatInfoNum: { type: Number, default: null },
|
|
tokenExist: { type: Boolean, default: false },
|
|
isWX: { type: Boolean, default: false },
|
|
isHistory: { type: Boolean, default: false },
|
|
reqAndResType: { type: String, default: '' },
|
|
})
|
|
|
|
const store = inject('appStore', null)
|
|
const userId = inject('userId', ref(''))
|
|
const userInfo = inject('userInfo', ref({}))
|
|
const mescrollContent = inject('mescrollContent', ref(null))
|
|
const manualService = inject('manualService', ref('1'))
|
|
const sendLoading = inject('sendLoading', ref(false))
|
|
|
|
const publicPath = import.meta.env.BASE_URL
|
|
const showTotal = ref(true)
|
|
const exchangeButton = ref(true)
|
|
const showExchangeButton = ref(false)
|
|
const expressionProcessing = ref({})
|
|
const bigExpressionProcessing = ref({})
|
|
const isBtnsubmit = ref(true)
|
|
const hasClicked = ref(false)
|
|
const tips1 = ref('')
|
|
const tips2 = ref('')
|
|
const cmd = ref('')
|
|
|
|
onMounted(() => {
|
|
processedEmoji()
|
|
descHeightChange()
|
|
cmd.value = props.itemlist.cmd
|
|
nextTick(() => {
|
|
initGlobalCallbacks()
|
|
})
|
|
})
|
|
|
|
function initGlobalCallbacks() {
|
|
try {
|
|
window.getLink = (item) => {
|
|
utils.AppToHttpHtml(item)
|
|
}
|
|
window.jumpOpenLink = (item) => {
|
|
utils.AppToHttpHtml(item)
|
|
}
|
|
|
|
window.jumpOpenWeb = (type, url, urlType) => {
|
|
let params = {}
|
|
if (type === 'YY_0000') {
|
|
params = {
|
|
idnum: '1',
|
|
ownerId: userInfo.value?.encryptPid,
|
|
openid: userInfo.value?.sourceUserId,
|
|
}
|
|
store
|
|
?.dispatch?.('post', {
|
|
url: 'semantic/getYdbqTicket',
|
|
data: { url: handleURL(url, params), userId: userId.value },
|
|
})
|
|
.then((res) => {
|
|
if (res.code === 0) {
|
|
if (!res.data) {
|
|
utils.openWxPage(url, params)
|
|
} else {
|
|
utils.openWxPage(url, { accessTicket: res.data })
|
|
}
|
|
} else {
|
|
showToast('网络异常，请重试')
|
|
}
|
|
})
|
|
} else if (type === 'YY_ydbq') {
|
|
params = {
|
|
mobile: userInfo.value?.phone,
|
|
pid: userInfo.value?.encryptPid,
|
|
openid: userInfo.value?.sourceUserId,
|
|
}
|
|
store
|
|
?.dispatch?.('post', {
|
|
url: 'semantic/getYdbqTicket',
|
|
data: { url: handleURL(url, params), userId: userId.value },
|
|
})
|
|
.then((res) => {
|
|
if (res.code === 0) {
|
|
if (!res.data) {
|
|
utils.openWxPage(url, params)
|
|
} else {
|
|
utils.openWxPage(url, { accessTicket: res.data })
|
|
}
|
|
} else {
|
|
showToast('网络异常，请重试')
|
|
}
|
|
})
|
|
} else if (type === 'YY_APP_H5') {
|
|
utils.AppOpenH5(url, { mobile: userInfo.value?.phone, pid: userInfo.value?.encryptPid })
|
|
} else if (type === 'ydbq_2') {
|
|
utils.openSpecPage({ url, generateType: type, userId: userId.value })
|
|
} else if (type === 'YY_CMD') {
|
|
store
|
|
?.dispatch?.('post', {
|
|
url: 'semantic/getYdbqTicket',
|
|
data: {
|
|
url:
|
|
url +
|
|
`&idnum=1&openId=${userInfo.value?.sourceUserId}&entryOpenid=${userInfo.value?.entryOpenid}`,
|
|
userId: userId.value,
|
|
isCmd: '1',
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code === 0) {
|
|
if (!res.data) {
|
|
utils.AppToHttpHtml(
|
|
url +
|
|
`&idnum=1&openId=${userInfo.value?.sourceUserId}&entryOpenid=${userInfo.value?.entryOpenid}`
|
|
)
|
|
} else {
|
|
utils.AppToHttpHtml(url + `&accessTicket=${res.data}`)
|
|
}
|
|
} else {
|
|
showToast('网络异常，请重试')
|
|
}
|
|
})
|
|
} else if (type === 'YY_lsjl') {
|
|
// Jump to history - handled by router
|
|
} else if (type === 'YY_kjmyd') {
|
|
utils.useTechSdk()
|
|
} else if (type === 'YY_hfhz') {
|
|
store
|
|
?.dispatch?.('post', {
|
|
url: 'semantic/xdhfCreateToken',
|
|
data: { certNum: '1', systemSource: 'yykf', userId: userId.value },
|
|
})
|
|
.then((res) => {
|
|
utils.openWxPage(url, {
|
|
sessionToken: res.data,
|
|
holderId: encodeURI(userInfo.value?.versionHFHZ),
|
|
holderType: 'a',
|
|
hzhfSystemSource: '0803',
|
|
ishwFlag: '1',
|
|
isqshzFlag: '1',
|
|
})
|
|
})
|
|
} else if (type === 'YY_1v1') {
|
|
store
|
|
?.dispatch?.('post', { url: 'thirdPartyAuth/getExclusiveServicesToken' })
|
|
.then((res) => {
|
|
if (res.code === 0 && res.data) {
|
|
utils.openWxPage(url, {
|
|
sour: 'yykf',
|
|
omoSource: userInfo.value?.source,
|
|
omoSourceName: encodeURIComponent(userInfo.value?.sourceName),
|
|
token: res.data,
|
|
})
|
|
} else {
|
|
showToast('网络异常，请重试')
|
|
}
|
|
})
|
|
} else if (type === 'YY_yzsfx') {
|
|
store
|
|
?.dispatch?.('post', {
|
|
url: 'semantic/getYzsUrl',
|
|
data: { userId: userId.value, bqType: url, urlType },
|
|
})
|
|
.then((res) => {
|
|
if (res.code === 0 && res.data) {
|
|
utils.openWxPage(res.data, '')
|
|
} else {
|
|
showToast('网络异常，请重试')
|
|
}
|
|
})
|
|
} else if (type === 'YY_GWXCX') {
|
|
wx.miniProgram.navigateTo({ url: url })
|
|
} else if (type === 'YY_GWXCX_HOME') {
|
|
wx.miniProgram.reLaunch({ url: url })
|
|
}
|
|
}
|
|
|
|
window.openAppPage = (params) => {
|
|
if (params) {
|
|
params = params.replace(/\'/g, '"')
|
|
utils.AppToOutModules(params)
|
|
}
|
|
}
|
|
window.connectionArtificial = (event) => {
|
|
let isClick = false,
|
|
isclassName = false
|
|
if (event.parentElement && !event.parentElement.className) {
|
|
isclassName = false
|
|
} else {
|
|
isclassName = true
|
|
}
|
|
if (isclassName && event.parentElement) {
|
|
isClick = utils.hasClass(event.parentElement, 'connectionArtificial')
|
|
}
|
|
if (!isclassName || !isClick) {
|
|
connectionArtificial(event)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
function handleURL(url, params) {
|
|
let flag = url.indexOf('?') != -1
|
|
let urlPar = ''
|
|
if (params) {
|
|
Object.getOwnPropertyNames(params).forEach((item, index) => {
|
|
if (index === 0 && !flag) {
|
|
urlPar += `?${item}=${params[item]}`
|
|
} else {
|
|
urlPar += `&${item}=${params[item]}`
|
|
}
|
|
})
|
|
}
|
|
return url + urlPar
|
|
}
|
|
|
|
function replacementRagEmoticon(str) {
|
|
str = str || ''
|
|
if (oldXuqiPolicyCmdList.includes(cmd.value)) {
|
|
if (str.indexOf('|#|') !== -1 && str.split('|#|').length >= 3) {
|
|
const contentMap = str.split('|#|')
|
|
tips1.value = contentMap[1] || ''
|
|
tips2.value = contentMap[2] || ''
|
|
str = contentMap[0] + contentMap[3]
|
|
}
|
|
}
|
|
if (SJHLCmdList.includes(cmd.value)) {
|
|
if (str.indexOf('|$|') !== -1 && str.split('|$|').length > 1) {
|
|
const contentMap = str.split('|$|')
|
|
const huashu = contentMap[1]
|
|
if (huashu.indexOf('||') !== -1 && huashu.split('||').length > 1) {
|
|
const huashuMap = huashu.split('||')
|
|
if (
|
|
_.isEmpty(props.itemlist.specialData) ||
|
|
_.isEmpty(_.get(props.itemlist, 'specialData.data'))
|
|
) {
|
|
str = huashuMap[0] || ''
|
|
} else {
|
|
str = huashuMap[4] || ''
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let res = str.replace(/\\n/gm, '<br/>')
|
|
if (res.indexOf('onclick="connectionArtificial') > 0) {
|
|
res =
|
|
res.slice(0, res.indexOf('onclick="connectionArtificial')) +
|
|
` data-qaid=${props.itemlist.qaId || ''} ` +
|
|
res.slice(res.indexOf('onclick="connectionArtificial'))
|
|
}
|
|
if (props.isHistory) {
|
|
if (res.indexOf('open-wx-web-button')) {
|
|
res = res.replace(/"open-wx-web-button"/g, '"open-wx-web-button-disable"')
|
|
} else if (res.indexOf('jump-web-button')) {
|
|
res = res.replace(/"jump-web-button"/g, '"jump-web-button-disable"')
|
|
} else if (res.indexOf('open-app-page-button')) {
|
|
res = res.replace(/"open-app-page-button"/g, '"open-app-page-button-disable"')
|
|
}
|
|
if (res.indexOf('open-wx-web')) {
|
|
res = res.replace(/"open-wx-web"/g, '"open-wx-web-disable"')
|
|
} else if (res.indexOf('jump-web')) {
|
|
res = res.replace(/"jump-web"/g, '"jump-web-disable"')
|
|
} else if (res.indexOf('open-app-page')) {
|
|
res = res.replace(/"open-app-page"/g, '"open-app-page-disable"')
|
|
}
|
|
}
|
|
return emojiToImage(res)
|
|
}
|
|
|
|
function processedEmoji() {
|
|
const tempExp = {},
|
|
tempBigExp = {}
|
|
faceJSON.forEach((item) => {
|
|
item.faceList.forEach((items) => {
|
|
tempExp[`[${items.title}]`] = items.src
|
|
})
|
|
item.bigExpression.forEach((items) => {
|
|
tempBigExp[`[${items.title}]`] = items.src
|
|
})
|
|
})
|
|
expressionProcessing.value = tempExp
|
|
bigExpressionProcessing.value = tempBigExp
|
|
}
|
|
|
|
function emojiToImage(str) {
|
|
let regex = /$$[^$$]+\]/g
|
|
return str.replace(regex, (item) => {
|
|
if (expressionProcessing.value[item]) {
|
|
return `<img src="${
|
|
publicPath + expressionProcessing.value[item]
|
|
}" alt="small-image" title="${item}" />`
|
|
} else if (bigExpressionProcessing.value[item]) {
|
|
return `<img src="${
|
|
publicPath + bigExpressionProcessing.value[item]
|
|
}" alt="big-image" title="${item}"/>`
|
|
}
|
|
return item
|
|
})
|
|
}
|
|
|
|
function showTotalIntro() {
|
|
showTotal.value = !showTotal.value
|
|
exchangeButton.value = !exchangeButton.value
|
|
}
|
|
|
|
function getRem() {
|
|
let winWidth = window.innerWidth
|
|
const defaultRem = document.body.style.fontSize.replace('rem', '')
|
|
return (winWidth / 375) * defaultRem
|
|
}
|
|
|
|
function descHeightChange(exchangeType) {
|
|
nextTick(() => {
|
|
let rem = parseFloat(getRem())
|
|
if (!desc.value) return
|
|
let descHeight = window.getComputedStyle(desc.value).height.replace('rem', '')
|
|
descHeight = descHeight || desc.value.offsetHeight
|
|
let threeRowH = 3.875
|
|
let dpr = window.devicePixelRatio || 1
|
|
if (descHeight > threeRowH * rem) {
|
|
showExchangeButton.value = true
|
|
exchangeButton.value = true
|
|
showTotal.value = false
|
|
} else {
|
|
showExchangeButton.value = false
|
|
showTotal.value = true
|
|
}
|
|
})
|
|
}
|
|
|
|
function scrollTopBody() {
|
|
setTimeout(() => {
|
|
try {
|
|
if (mescrollContent.value)
|
|
mescrollContent.value.scrollTop = mescrollContent.value.scrollHeight || 0
|
|
} catch (e) {
|
|
console.log(e.message)
|
|
}
|
|
}, 300)
|
|
}
|
|
|
|
function connectionArtificial(event) {
|
|
try {
|
|
let qaId = event.parentNode ? event.parentNode.dataset.qaid : ''
|
|
let sendParmas = { reqAndResType: '1', msgText: '&转人工服务&', msgSource: manualService.value }
|
|
scrollTopBody()
|
|
store
|
|
?.dispatch?.('connectionArtificial', sendParmas)
|
|
.then(() => {
|
|
event.disabled = true
|
|
})
|
|
.catch((err) => console.log(err))
|
|
store
|
|
?.dispatch?.('userBehavior', { qaId, eventType: '5', eventMsg: '知识库进入人工服务' })
|
|
.catch((err) => console.log(err))
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
function richCallAnswer(item) {
|
|
if (!isBtnsubmit.value) return
|
|
isBtnsubmit.value = false
|
|
let sendParmas = {
|
|
reqAndResType: '1',
|
|
msgText: item.intent,
|
|
intentId: item.intentId,
|
|
msgSource: manualService.value,
|
|
}
|
|
scrollTopBody()
|
|
store
|
|
?.dispatch?.('sendingRobot', sendParmas)
|
|
.then(() => {
|
|
isBtnsubmit.value = true
|
|
})
|
|
.catch((err) => {
|
|
isBtnsubmit.value = true
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
function manualAnswer(event, item) {
|
|
let sendParmas = { reqAndResType: '1', msgText: '&转人工服务&', msgSource: manualService.value }
|
|
const toast = showLoadingToast({
|
|
message: '加载中...',
|
|
duration: 0,
|
|
loadingType: 'spinner',
|
|
forbidClick: true,
|
|
})
|
|
if (!sendLoading.value) {
|
|
scrollTopBody()
|
|
store
|
|
?.dispatch?.('sendingRobot', sendParmas)
|
|
.then(() => {
|
|
closeToast()
|
|
event.disabled = true
|
|
})
|
|
.catch((err) => {
|
|
closeToast()
|
|
console.log(err)
|
|
})
|
|
} else {
|
|
closeToast()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.text-template-box {
|
|
padding: 0;
|
|
}
|
|
|
|
.text-folding-box {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.total-introduce {
|
|
max-height: none;
|
|
}
|
|
|
|
.detailed-introduce {
|
|
max-height: 3.875rem;
|
|
}
|
|
|
|
.content-question-answer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8rem;
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
.content-question-answer--grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8rem;
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
.answer-items {
|
|
padding: 6rem 12rem;
|
|
background: #f0f6ff;
|
|
border: 1rem solid #d6e4ff;
|
|
border-radius: 16rem;
|
|
font-size: 13rem;
|
|
color: #025cea;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.answer-items.setGrey {
|
|
color: #d0d2db;
|
|
background: #f5f5f5;
|
|
border-color: #e8e8e8;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.answer-items[disabled] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.question-answer-help {
|
|
font-size: 13rem;
|
|
color: #666;
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
.answer-help-btn {
|
|
color: #025cea;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 13rem;
|
|
}
|
|
|
|
.unfold-box {
|
|
text-align: center;
|
|
margin-top: 8rem;
|
|
}
|
|
|
|
.unfold-box a {
|
|
font-size: 13rem;
|
|
color: #025cea;
|
|
}
|
|
|
|
.look-more-icon {
|
|
display: inline-block;
|
|
width: 12rem;
|
|
height: 12rem;
|
|
margin-left: 4rem;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.look-more-icon.active {
|
|
transform: rotate(180deg);
|
|
}
|
|
</style> |