<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
|
<script lang="ts" setup>
|
import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
|
import type { MemberUserApi } from '#/api/member/user';
|
import type { PayWalletApi } from '#/api/pay/wallet/balance';
|
|
import { computed, nextTick, ref, toRefs, watch } from 'vue';
|
|
import { isEmpty } from '..\..\..\..\..\..\packages\utils\src';
|
|
import { useScroll } from '@vueuse/core';
|
import { Empty, message } from 'ant-design-vue';
|
|
import { getUser } from '#/api/member/user';
|
import { getWallet } from '#/api/pay/wallet/balance';
|
import AccountInfo from '#/views/member/user/detail/modules/account-info.vue';
|
import BasicInfo from '#/views/member/user/detail/modules/basic-info.vue';
|
|
import OrderBrowsingHistory from './order-browsing-history.vue';
|
import ProductBrowsingHistory from './product-browsing-history.vue';
|
|
const activeTab = ref<string>('会员信息');
|
|
const tabActivation = computed(() => (tab: string) => activeTab.value === tab);
|
|
/** tab 切换 */
|
const productBrowsingHistoryRef =
|
ref<InstanceType<typeof ProductBrowsingHistory>>();
|
const orderBrowsingHistoryRef =
|
ref<InstanceType<typeof OrderBrowsingHistory>>();
|
async function handleClick(tab: string) {
|
activeTab.value = tab;
|
await nextTick();
|
await getHistoryList();
|
}
|
|
/** 获得历史数据 */
|
async function getHistoryList() {
|
switch (activeTab.value) {
|
case '交易订单': {
|
await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value);
|
break;
|
}
|
case '会员信息': {
|
await getUserData();
|
await getUserWallet();
|
break;
|
}
|
case '最近浏览': {
|
await productBrowsingHistoryRef.value?.getHistoryList(conversation.value);
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
}
|
|
/** 加载下一页数据 */
|
async function loadMore() {
|
switch (activeTab.value) {
|
case '交易订单': {
|
await orderBrowsingHistoryRef.value?.loadMore();
|
break;
|
}
|
case '会员信息': {
|
break;
|
}
|
case '最近浏览': {
|
await productBrowsingHistoryRef.value?.loadMore();
|
break;
|
}
|
default: {
|
break;
|
}
|
}
|
}
|
|
/** 浏览历史初始化 */
|
const conversation = ref<MallKefuConversationApi.Conversation>(
|
{} as MallKefuConversationApi.Conversation,
|
); // 用户会话
|
async function initHistory(val: MallKefuConversationApi.Conversation) {
|
activeTab.value = '会员信息';
|
conversation.value = val;
|
await nextTick();
|
await getHistoryList();
|
}
|
defineExpose({ initHistory });
|
|
/** 处理消息列表滚动事件(debounce 限流) */
|
const scrollbarRef = ref<InstanceType<any>>();
|
const { arrivedState } = useScroll(scrollbarRef);
|
const { bottom } = toRefs(arrivedState);
|
watch(
|
() => bottom.value,
|
async (newVal) => {
|
if (newVal) {
|
await loadMore();
|
}
|
},
|
);
|
|
/** 查询用户钱包信息 */
|
const WALLET_INIT_DATA = {
|
balance: 0,
|
totalExpense: 0,
|
totalRecharge: 0,
|
} as PayWalletApi.Wallet; // 钱包初始化数据
|
const wallet = ref<PayWalletApi.Wallet>(WALLET_INIT_DATA); // 钱包信息
|
|
async function getUserWallet() {
|
if (!conversation.value.userId) {
|
wallet.value = WALLET_INIT_DATA;
|
return;
|
}
|
wallet.value =
|
(await getWallet({ userId: conversation.value.userId })) ||
|
WALLET_INIT_DATA;
|
}
|
|
/** 获得用户 */
|
const loading = ref(true); // 加载中
|
const user = ref<MemberUserApi.User>({} as MemberUserApi.User);
|
async function getUserData() {
|
loading.value = true;
|
try {
|
const res = await getUser(conversation.value.userId);
|
if (res) {
|
user.value = res;
|
} else {
|
user.value = {} as MemberUserApi.User;
|
message.error('会员不存在！');
|
}
|
} finally {
|
loading.value = false;
|
}
|
}
|
</script>
|
|
<template>
|
<div class="flex h-full flex-auto flex-col bg-background">
|
<div
|
class="mt-4 flex h-12 items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-1 before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
|
>
|
<div
|
:class="{
|
'before:border-b-2 before:border-primary': tabActivation('会员信息'),
|
}"
|
class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
|
@click="handleClick('会员信息')"
|
>
|
会员信息
|
</div>
|
<div
|
:class="{
|
'before:border-b-2 before:border-primary': tabActivation('最近浏览'),
|
}"
|
class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
|
@click="handleClick('最近浏览')"
|
>
|
最近浏览
|
</div>
|
<div
|
:class="{
|
'before:border-b-2 before:border-primary': tabActivation('交易订单'),
|
}"
|
class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
|
@click="handleClick('交易订单')"
|
>
|
交易订单
|
</div>
|
</div>
|
<div class="relative m-0 h-full w-full overflow-x-auto p-2">
|
<template v-if="!isEmpty(conversation)">
|
<div
|
v-loading="loading"
|
v-if="activeTab === '会员信息'"
|
class="relative overflow-y-auto overflow-x-hidden"
|
>
|
<!-- 基本信息 -->
|
<BasicInfo :user="user" mode="kefu">
|
<template #title>
|
<span class="text-sm font-bold">基本信息</span>
|
</template>
|
</BasicInfo>
|
<!-- 账户信息 -->
|
<AccountInfo
|
:column="1"
|
:user="user"
|
:wallet="wallet"
|
mode="kefu"
|
class="mt-2"
|
>
|
<template #title>
|
<span class="text-sm font-bold">账户信息</span>
|
</template>
|
</AccountInfo>
|
</div>
|
<div
|
v-show="activeTab !== '会员信息'"
|
ref="scrollbarRef"
|
class="relative h-full overflow-y-auto overflow-x-hidden"
|
>
|
<!-- 最近浏览 -->
|
<ProductBrowsingHistory
|
v-if="activeTab === '最近浏览'"
|
ref="productBrowsingHistoryRef"
|
/>
|
<!-- 交易订单 -->
|
<OrderBrowsingHistory
|
v-if="activeTab === '交易订单'"
|
ref="orderBrowsingHistoryRef"
|
/>
|
</div>
|
</template>
|
<Empty v-else description="请选择左侧的一个会话后开始" class="mt-[20%]" />
|
</div>
|
</div>
|
</template>
|
