Ver código fonte

feat(客户详情): 添加搜索记录功能及订单统计

- 新增搜索记录组件,展示用户搜索历史及相关信息
- 在客户详情页添加卖书和买书订单数统计
- 在标签页中增加搜索记录选项
ylong 3 dias atrás
pai
commit
7f6eb848a2

+ 15 - 0
src/views/customer/list/components/customer-detail.vue

@@ -26,6 +26,16 @@
                     <el-text>总订单数</el-text>
                 </template>
             </el-statistic>
+            <el-statistic :value="detail.sellNum" style="margin-left: 80px">
+                <template #title>
+                    <el-text>卖书订单数</el-text>
+                </template>
+            </el-statistic>
+            <el-statistic :value="detail.buyNum" style="margin-left: 80px">
+                <template #title>
+                    <el-text>买书订单数</el-text>
+                </template>
+            </el-statistic>
         </div>
 
         <el-tabs v-model="activeName" class="demo-tabs flex-1">
@@ -44,6 +54,10 @@
             <el-tab-pane label="意见反馈" name="fallback">
                 <fallback-info :userId="currentRow.id" />
             </el-tab-pane>
+            <el-tab-pane label="搜索记录" name="searchLog">
+                <search-log :row="currentRow" />
+            </el-tab-pane>
+            
         </el-tabs>
     </ele-drawer>
 </template>
@@ -52,6 +66,7 @@
     import baseInfo from '@/views/customer/list/components/detail/base-info.vue';
     import accountChange from '@/views/customer/list/components/detail/account-change.vue';
     import scanLog from '@/views/customer/list/components/detail/scan-log.vue';
+    import searchLog from '@/views/customer/list/components/detail/search-log.vue';
     import recommendInfo from '@/views/customer/list/components/detail/recommend-info.vue';
     import fallbackInfo from '@/views/customer/list/components/detail/fallback-info.vue';
     import request from '@/utils/request';

+ 55 - 0
src/views/customer/list/components/detail/search-log.vue

@@ -0,0 +1,55 @@
+<template>
+    <common-table ref="pageRef" :pageConfig="pageConfig" :columns="columns" :tools="false"
+        :bodyStyle="{ padding: 0 }" />
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue';
+import CommonTable from '@/components/CommonPage/CommonTable.vue';
+
+defineOptions({ name: 'SearchLog' });
+
+const props = defineProps({
+    row: {
+        type: Object,
+        default() {
+            return {};
+        }
+    }
+});
+/** 页面组件实例 */
+const pageRef = ref(null);
+
+const pageConfig = reactive({
+    fileName: '搜索记录',
+    cacheKey: 'searchLogTable'
+});
+
+watch(
+    () => props.row,
+    (row) => {
+        if (!row || (row && !row.id)) return;
+        pageConfig.pageUrl = `/user/userSearchLog/getUserSearchLogList/${row.id}`;
+        pageRef.value?.reload();
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+);
+
+/** 表格列配置 */
+const columns = ref([
+    { label: '序号', type: 'index', align: 'center', width: 60 },
+    { label: '搜索词', prop: 'keyword', align: 'center' },
+    { label: '点击商品', prop: 'bookName', align: 'center' },
+    { label: '搜索时间', prop: 'createTime', align: 'center' },
+    { label: '是否加购', prop: 'isAddCart', align: 'center' },
+    { label: '是否下单', prop: 'isOrdered', align: 'center' }
+]);
+
+//刷新表格
+function reload(where) {
+    pageRef.value?.reload(where);
+}
+</script>