spinz777/src/pages/account/CustomService.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 { getQuestionsApi, questionIndexApi } 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
    })
    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
}

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>
                <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">
                        <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="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>
                    </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">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;

        .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-top: 60rpx;
        justify-content: flex-start;

        .icon-avatar {
            width: 54rpx;
            height: 54rpx;
        }
    }

    .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>