324 lines
10 KiB
Vue
324 lines
10 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { useThemeStore } from "@/store/useThemeStore";
|
|
import { useAppStore } from '@/store/useAppStore'
|
|
import { questionIndexApi, questionSuccessApi, questionFailApi } from '@/api/account'
|
|
import { openUrl } from '@/module/utils/openUrl'
|
|
|
|
const themeStore = useThemeStore()
|
|
const appStore = useAppStore()
|
|
const scrollHeight = computed(() => {
|
|
return appStore.windowInfo.screenHeight - appStore.windowInfo.statusBarHeight - 50
|
|
})
|
|
const lastId = ref('')
|
|
const questions = ref([])
|
|
const inputVal = ref('')
|
|
const faqs = ref([])
|
|
function genId() {
|
|
return '' + Date.now() + Math.ceil(Math.random() * 100000);
|
|
}
|
|
function newMsg(msg, type, mtype) {
|
|
const id = genId()
|
|
faqs.value.push({
|
|
id,
|
|
msg,
|
|
type,
|
|
mtype,
|
|
commited: false,
|
|
})
|
|
lastId.value = ''
|
|
setTimeout(() => {
|
|
lastId.value = id
|
|
}, 200);
|
|
}
|
|
const defaultAnswer = () => {
|
|
newMsg('I\'m unable to answer your question. Please click the online customer service at the top right corner.', 2, 'msg')
|
|
}
|
|
|
|
const questionClick = (item) => {
|
|
if (item.type === 2) {
|
|
newMsg(item.display, 1, 'msg')
|
|
questionIndexApi(item.id).then(({ data }) => {
|
|
console.log('getQuestionsApi', data);
|
|
if (!data || !data?.data) {
|
|
defaultAnswer()
|
|
} else {
|
|
const _data = JSON.parse(data?.data)
|
|
if (Array.isArray(_data)) {
|
|
newMsg(_data, 2, 'list')
|
|
} else {
|
|
newMsg(_data, 2, 'msg')
|
|
}
|
|
}
|
|
})
|
|
return
|
|
}
|
|
if (item.type === 6) {
|
|
return
|
|
}
|
|
if (item.type === 7) {
|
|
openUrl(appStore.FAQ)
|
|
return
|
|
}
|
|
}
|
|
const getQustionList = async () => {
|
|
const { data } = await questionIndexApi()
|
|
console.log("getQuestionsApi:", data);
|
|
const _data = JSON.parse(data?.data)
|
|
questions.value = _data
|
|
}
|
|
const onNoZan = (id, msgId) => {
|
|
const idx = faqs.value.findIndex(item => item.id === msgId)
|
|
if (idx > -1) {
|
|
if (faqs.value[idx].commited) {
|
|
return
|
|
}
|
|
faqs.value[idx].commited = true
|
|
questionFailApi({ questionId: id })
|
|
newMsg('Sorry, please contact online customer service.', 1, 'msg')
|
|
}
|
|
|
|
}
|
|
const onZan = (id, msgId) => {
|
|
const idx = faqs.value.findIndex(item => item.id === msgId)
|
|
if (idx > -1) {
|
|
if (faqs.value[idx].commited) {
|
|
return
|
|
}
|
|
faqs.value[idx].commited = true
|
|
questionSuccessApi({ questionId: id })
|
|
newMsg('I\'m glad that I could help you.!', 1, 'msg')
|
|
}
|
|
}
|
|
const onSend = () => {
|
|
if (!inputVal.value) {
|
|
return
|
|
}
|
|
newMsg(inputVal.value, 1, 'msg')
|
|
inputVal.value = ''
|
|
setTimeout(() => {
|
|
newMsg('Sorry, I\'m unable to answer your question. Please click the online customer service at the top right corner.', 2, 'msg')
|
|
}, 1000);
|
|
}
|
|
const toOnlineService = () => {
|
|
openUrl(appStore.FAQ)
|
|
}
|
|
onLoad(() => {
|
|
getQustionList()
|
|
})
|
|
</script>
|
|
<template>
|
|
<mobile-custom-layout title="Self-service Customer" bgColor="#2F0101" :headBgColor="themeStore.theme.bgColor"
|
|
:paddingTop="appStore.headerStyle.height" :show-customer="false">
|
|
<template #head-right>
|
|
<view @click="toOnlineService">
|
|
<theme-image src="@/static/account/customer_head.png" class="icon-kf-head"></theme-image>
|
|
</view>
|
|
</template>
|
|
<scroll-view scroll-y class="w-full p-2 scroll" :style="{ height: scrollHeight + 'px' }"
|
|
:scroll-into-view="'t_' + lastId">
|
|
<view class="w-full question-list">
|
|
<view class="w-full question-content">
|
|
<view v-for="item in questions" :key="item.id" @click="questionClick(item)"
|
|
class="flex items-center question-item">
|
|
<view class="dot"></view>
|
|
<view class="question-text" v-if="item.type === 1">
|
|
<rich-text :nodes="item.text"></rich-text>
|
|
</view>
|
|
<view class="question-text" v-else>
|
|
{{ item.display }}
|
|
</view>
|
|
</view>
|
|
<view class="flex items-center justify-center online-service" @click="toOnlineService">
|
|
<theme-image src="@/static/account/customer.png" class="icon-kf"></theme-image>
|
|
<view class="btn-txt">{{ $t('account.contact') }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-for="item in faqs" :key="item.id" :id="'t_' + item.id" class="w-full flex msg-item"
|
|
:class="[item.type === 1 ? 'req-right' : 'req-left']">
|
|
<theme-image v-if="item.type === 1" src="@/static/icon-avatar.png" class="icon-avatar"
|
|
style="margin-left: 10rpx;"></theme-image>
|
|
<theme-image v-else src="@/static/account/customer.png" class="icon-avatar"
|
|
style="margin-right: 10rpx;"></theme-image>
|
|
<view class="relative msg-text" :class="[item.type === 1 ? 'mr-10' : 'ml-10']">
|
|
<template v-if="item.mtype === 'msg'">
|
|
{{ item.msg }}
|
|
</template>
|
|
<template v-else>
|
|
<view v-for="child in item.msg" :key="child.id" @click="questionClick(child)"
|
|
class="flex items-center question-item"
|
|
:style="{ paddingLeft: child.type === 2 ? '24rpx' : '0px' }">
|
|
<view class="dot" v-if="child.type === 2"></view>
|
|
<view class="question-text" v-if="child.type === 1">
|
|
<rich-text :nodes="child.text"></rich-text>
|
|
</view>
|
|
<view class="question-text" v-else>
|
|
{{ child.display }}
|
|
</view>
|
|
<view class="is-usefull pos-absolute flex items-center"
|
|
v-if="item.type === 2 && child.type === 1 && child.solveType === 2">
|
|
<theme-image src="@/static/account/dianzan.png" class="icon-use"
|
|
style="margin-right: 10rpx;" @click="onZan(child.id, item.id)"></theme-image>
|
|
<theme-image src="@/static/account/daozan.png" class="icon-use zan-reverse"
|
|
style="margin-right: 10rpx;" @click="onNoZan(child.id, item.id)"></theme-image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
</view>
|
|
</view>
|
|
<empty-hold height="120rpx"></empty-hold>
|
|
</scroll-view>
|
|
<view class="w-full input-line safe-area">
|
|
<view class="w-full flex items-center input-content">
|
|
<view class="flex-1 p-1 input-box">
|
|
<input type="text" v-model="inputVal" class="w-full ft12"
|
|
placeholder="Please enter your question" />
|
|
</view>
|
|
<view class="submit-btn ml-2 ft13 flex-center" @click="onSend">Send</view>
|
|
</view>
|
|
</view>
|
|
</mobile-custom-layout>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
}
|
|
|
|
.scroll {
|
|
box-sizing: border-box;
|
|
|
|
.question-list {
|
|
padding: 20rpx 100rpx;
|
|
margin-bottom: 40rpx;
|
|
|
|
.question-content {
|
|
padding: 18rpx 24rpx;
|
|
border-radius: 16rpx;
|
|
background-color: #58070D;
|
|
|
|
.online-service {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
height: 80rpx;
|
|
border-radius: 14rpx;
|
|
background: linear-gradient(180deg, #6F0000 0%, #580000 100%);
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
|
|
|
|
.icon-kf {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
}
|
|
|
|
.btn-txt {
|
|
margin-left: 12rpx;
|
|
font-size: 30rpx;
|
|
color: #E2A1A9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.question-item {
|
|
padding: 14rpx 0;
|
|
|
|
.dot {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
background-color: #E2A1A9;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.question-text {
|
|
margin-left: 12rpx;
|
|
color: #E2A1A9;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.msg-item {
|
|
align-items: start;
|
|
margin-bottom: 80rpx;
|
|
justify-content: flex-start;
|
|
|
|
.icon-avatar {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
}
|
|
|
|
.is-usefull {
|
|
bottom: -60rpx;
|
|
right: 10rpx;
|
|
}
|
|
|
|
.icon-use {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.zan-reverse {
|
|
margin-left: 30rpx;
|
|
}
|
|
}
|
|
|
|
.req-right {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.req-left {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.msg-text {
|
|
max-width: 520rpx;
|
|
padding: 12rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #59070D;
|
|
font-size: 26rpx;
|
|
color: #E2A1A9;
|
|
}
|
|
|
|
.mr-10 {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.ml-10 {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.icon-kf-head {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
}
|
|
|
|
.input-line {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
background-color: #280000;
|
|
|
|
.input-content {
|
|
height: 120rpx;
|
|
padding: 0 24rpx;
|
|
|
|
.input-box {
|
|
height: 56rpx;
|
|
background-color: #5A0107;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.submit-btn {
|
|
height: 56rpx;
|
|
width: 100rpx;
|
|
background-color: #5A0107;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
</style> |