From 8836a082381427a671d5e75e9536dfc1fef8da6b Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期五, 27 六月 2025 09:09:32 +0800
Subject: [PATCH] 客户详情：客户分析，视频浏览记录
---
manager/src/views/customer/index.vue | 269 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 205 insertions(+), 64 deletions(-)
diff --git a/manager/src/views/customer/index.vue b/manager/src/views/customer/index.vue
index 6208375..b4dffa6 100644
--- a/manager/src/views/customer/index.vue
+++ b/manager/src/views/customer/index.vue
@@ -91,73 +91,89 @@
<Modal
v-model="showCustomerInfo"
:title="modelTitle"
- width="700"
+ width="850"
:mask-closable="false"
>
- <div class="customer-detail">
- <div class="avatar-section">
- <Avatar :src="customerInfo.face" size="large" />
- <div class="basic-info">
- <h3>{{ customerInfo.nickName || '寰俊鐢ㄦ埛' }}</h3>
- <p>ID: {{ customerInfo.id }}</p>
- <p>鐢ㄦ埛鍚�: {{ customerInfo.username }}</p>
- </div>
- </div>
- <Divider />
+ <!-- 涓诲唴瀹瑰尯 -->
+ <Tabs v-model="activeTab" @on-click="handleTabChange">
+ <TabPane label="鍩虹璧勬枡" name="basic">
+ <div class="customer-detail">
+ <div class="avatar-section">
+ <Avatar :src="customerInfo.face" size="large" />
+ <div class="basic-info">
+ <h3>{{ customerInfo.nickName || '寰俊鐢ㄦ埛' }}</h3>
+ <p>ID: {{ customerInfo.id }}</p>
+ <p>鐢ㄦ埛鍚�: {{ customerInfo.username }}</p>
+ </div>
+ </div>
- <div class="detail-grid">
- <div class="detail-row">
- <span class="detail-label">鎬у埆锛�</span>
- <span class="detail-value">{{ customerInfo.sex === 0 ? "濂�" : "鐢�"}}</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">鍦板尯锛�</span>
- <span class="detail-value">{{ customerInfo.region || '鏈缃�' }}</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">鎵嬫満鍙凤細</span>
- <span class="detail-value">{{ customerInfo.mobile || '鏈粦瀹�' }}</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">褰撳墠绉垎锛�</span>
- <span class="detail-value">{{ customerInfo.point }}</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">鎬荤Н鍒嗭細</span>
- <span class="detail-value">{{ customerInfo.totalPoint }}</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">璐﹀彿鐘舵�侊細</span>
- <span class="detail-value">
+ <Divider />
+ <div class="detail-grid">
+ <div class="detail-row">
+ <span class="detail-label">鎬у埆锛�</span>
+ <span class="detail-value">{{ customerInfo.sex === 0 ? "濂�" : "鐢�"}}</span>
+ </div>
+ <div class="detail-row">
+ <span class="detail-label">鍦板尯锛�</span>
+ <span class="detail-value">{{ customerInfo.region || '鏈缃�' }}</span>
+ </div>
+ <div class="detail-row">
+ <span class="detail-label">鎵嬫満鍙凤細</span>
+ <span class="detail-value">{{ customerInfo.mobile || '鏈粦瀹�' }}</span>
+ </div>
+ <div class="detail-row">
+ <span class="detail-label">褰撳墠绉垎锛�</span>
+ <span class="detail-value">{{ customerInfo.point }}</span>
+ </div>
+ <div class="detail-row">
+ <span class="detail-label">鎬荤Н鍒嗭細</span>
+ <span class="detail-value">{{ customerInfo.totalPoint }}</span>
+ </div>
+ <div class="detail-row">
+ <span class="detail-label">璐﹀彿鐘舵�侊細</span>
+ <span class="detail-value">
<Tag :color="customerInfo.disabled ? 'error' : 'success'">
{{ customerInfo.disabled ? '宸茬鐢�' : '姝ｅ父' }}
</Tag>
</span>
+ </div>
+ <div class="detail-row">
+ <span class="detail-label">鏄惁鍏宠仈搴楅摵锛�</span>
+ <span class="detail-value">{{ customerInfo.haveStore ? '鏄�' : '鍚�' }}</span>
+ </div>
+ <div class="detail-row">
+ <span class="detail-label">娉ㄥ唽鏃堕棿锛�</span>
+ <span class="detail-value">{{ customerInfo.createTime }}</span>
+ </div>
+ <div class="detail-row">
+ <span class="detail-label">鏈�鍚庣櫥褰曟椂闂达細</span>
+ <span class="detail-value">{{ customerInfo.lastLoginDate }}</span>
+ </div>
</div>
- <div class="detail-row">
- <span class="detail-label">鏄惁鍏宠仈搴楅摵锛�</span>
- <span class="detail-value">{{ customerInfo.haveStore ? '鏄�' : '鍚�' }}</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">娉ㄥ唽鏃堕棿锛�</span>
- <span class="detail-value">{{ customerInfo.createTime }}</span>
- </div>
- <div class="detail-row">
- <span class="detail-label">鏈�鍚庣櫥褰曟椂闂达細</span>
- <span class="detail-value">{{ customerInfo.lastLoginDate }}</span>
+ <div v-if="customerInfo.customerTagList && customerInfo.customerTagList.length > 0" class="tags-section">
+ <h4>鐢ㄦ埛鏍囩</h4>
+ <div>
+ <Tag v-for="tag in customerInfo.customerTagList" :key="tag" color="default" style="margin-right: 8px;">
+ {{ tag }}
+ </Tag>
+ </div>
</div>
</div>
+ </TabPane>
+ <TabPane label="瑙嗛娴忚鍘嗗彶" name="history">
+ <watch-history
+ ref="watchHistoryRef"
+ :memberId="customerInfo.id"
+ key="history"/>
+ </TabPane>
+ <TabPane label="琛屼负鍒嗘瀽" name="actionAnalyse" >
+ <div class="chart-container">
+ <div ref="chart" class="chart-content"></div>
+ </div>
+ </TabPane>
+ </Tabs>
- <div v-if="customerInfo.customerTagList && customerInfo.customerTagList.length > 0" class="tags-section">
- <h4>鐢ㄦ埛鏍囩</h4>
- <div>
- <Tag v-for="tag in customerInfo.customerTagList" :key="tag" color="default" style="margin-right: 8px;">
- {{ tag }}
- </Tag>
- </div>
- </div>
- </div>
<div slot="footer">
<Button type="primary" @click="showCustomerInfo = false">鍏抽棴</Button>
@@ -202,16 +218,25 @@
<script>
import JsonExcel from "vue-json-excel";
-import {getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions,getCustomerInfo} from "@/api/customer";
+import {memberActionAnalyse,getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions,getCustomerInfo} from "@/api/customer";
import {addCustomerBlackByPC} from "@/api/customer-black.js"
+import WatchHistory from "./WatchHistory.vue";
+import * as echarts from 'echarts';
export default {
name:"customer",
components:{
- "download-excel": JsonExcel,
+ WatchHistory,
+ "download-excel": JsonExcel
+
},
+
data(){
return{
+ myChart: null,
+ activeTab: 'basic', // 褰撳墠婵�娲荤殑鏍囩椤�
+ userId: '', // 褰撳墠鏌ョ湅鐨勭敤鎴稩D
+
customerInfo: {
birthday: null,
blackId: null,
@@ -352,14 +377,107 @@
blackParam:{
storeId:'',
userId:'',
- }
+ },
+
+
}
},
+
mounted(){
this.init();
},
methods:{
+ showLoading() {
+ if (this.myChart) {
+ this.myChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓�...',
+ color: '#1890ff',
+ textColor: '#333',
+ maskColor: 'rgba(255, 255, 255, 0.8)',
+ zlevel: 0,
+ fontSize: 14,
+ showSpinner: true,
+ spinnerRadius: 10,
+ lineWidth: 2,
+ fontWeight: 'normal'
+ });
+ }
+ },
+
+ hideLoading() {
+ if (this.myChart) {
+ this.myChart.hideLoading();
+ }
+ },
+ getEmptyOption() {
+ return {
+ title: {
+ text: '鏆傛棤鏁版嵁',
+ left: 'center',
+ top: 'center',
+ textStyle: {
+ color: '#999',
+ fontWeight: 'normal',
+ fontSize: 16
+ }
+ },
+ series: []
+ };
+ },
+ initEcharts(id){
+ // 閿�姣佹棫瀹炰緥
+ if (this.myChart) {
+ this.myChart.dispose();
+ }
+
+ this.myChart = echarts.init(this.$refs.chart);
+ this.showLoading()
+ memberActionAnalyse(id).then(res =>{
+ let option;
+ this.hideLoading()
+ if (res.code === 200){
+ const chartData = Object.entries(res.data).map(([name, value]) => ({
+ value,
+ name
+ }));
+ console.log(chartData)
+ if (chartData.length ===0){
+ option = this.getEmptyOption();
+ }else {
+ option = {
+ title: {
+ text: '鐢ㄦ埛琛屼负鍒嗘瀽',
+ left: 'center'
+ },
+
+ tooltip: {
+ trigger: 'item'
+ },
+ series: [{
+ radius: ['40%', '70%'],
+ type: 'pie',
+ data: chartData,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }]
+ };
+ }
+
+ this.myChart.setOption(option);
+ }
+ })
+ },
+ // 鏍囩椤靛垏鎹㈠鐞�
+ handleTabChange(tabName) {
+ this.activeTab = tabName;
+ },
+
// 鑾峰緱鍟嗗涓嬫媺妗嗘暟鎹�
getStoreSelectOptions(){
this.storeSelectLoading = true;
@@ -384,12 +502,12 @@
// 鑾峰緱瀹㈡埛鏍囩涓嬫媺妗嗘暟鎹�
getCustomerTagSelectOptions(){
this.selectLoading = true;
- getTagList().then(res =>{
- this.selectLoading = false;
- if (res.code === 200){
- this.tagList = res.data;
- }
- })
+ // getTagList().then(res =>{
+ // this.selectLoading = false;
+ // if (res.code === 200){
+ // this.tagList = res.data;
+ // }
+ // })
},
init(){
this.getCustomerList();
@@ -403,10 +521,16 @@
this.selectList = e.map(d => d.id);
this.selectCount = e.length;
},
+ memberActionAnalyse(id){
+
+ },
//鏌ョ湅璇︽儏
openInfo(row){
this.showCustomerInfo = true;
this.modelTitle = "鐢ㄦ埛璇︽儏"
+
+ this.activeTab = "basic"
+
getCustomerInfo(row.id).then(res =>{
if(res.code === 200){
this.customerInfo = {
@@ -435,6 +559,8 @@
};
}
})
+
+ this.initEcharts(row.id);
},
// 缂栬緫鏍囩
openEdit(row){
@@ -495,6 +621,21 @@
</script>
<style lang="scss" scoped>
+.chart-container {
+ width: 100%;
+ height: 100%; /* 鏀逛负100%濉厖鐖跺鍣� */
+ min-height: 400px; /* 鏈�灏忛珮搴︿繚闅� */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ margin: auto; /* 鏂板 */
+}
+.chart-content {
+ width: 400px;
+ height: 400px;
+ margin: 0 auto;
+}
.customer-detail {
padding: 16px;
}
--
Gitblit v1.8.0