From 93bfb1c5512db9feceb16cd3084a92d4dedf615e Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 19 六月 2025 19:58:23 +0800
Subject: [PATCH] 客户管理（详情）
---
manager/src/views/customer/index.vue | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 171 insertions(+), 2 deletions(-)
diff --git a/manager/src/views/customer/index.vue b/manager/src/views/customer/index.vue
index 40112e7..6208375 100644
--- a/manager/src/views/customer/index.vue
+++ b/manager/src/views/customer/index.vue
@@ -68,6 +68,7 @@
@on-selection-change="showSelect"
>
<template slot-scope="{ row, index }" slot="action">
+ <Button type="info" size="small" style="margin-right: 5px" @click="openInfo(row)">鏌ョ湅璇︽儏</Button>
<Button type="info" size="small" style="margin-right: 5px" @click="openEdit(row)">缂栬緫鏍囩</Button>
<Button type="error" size="small" style="margin-right: 5px" @click="joinBlack(row)">鍔犲叆榛戝悕鍗�</Button>
</template>
@@ -87,6 +88,82 @@
></Page>
</Row>
+ <Modal
+ v-model="showCustomerInfo"
+ :title="modelTitle"
+ width="700"
+ :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 />
+
+ <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 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>
+ </div>
+ </Modal>
+<!-- 鏍囩寮圭獥-->
<Modal
v-model="showCustomerTag"
:title="modelTitle"
@@ -125,7 +202,7 @@
<script>
import JsonExcel from "vue-json-excel";
-import {getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions} from "@/api/customer";
+import {getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions,getCustomerInfo} from "@/api/customer";
import {addCustomerBlackByPC} from "@/api/customer-black.js"
export default {
@@ -135,6 +212,30 @@
},
data(){
return{
+ customerInfo: {
+ birthday: null,
+ blackId: null,
+ clientEnum: null,
+ createTime: "",
+ customerTagList: [],
+ disabled: true,
+ experience: null,
+ face: "",
+ gradeId: null,
+ haveStore: false,
+ id: "",
+ lastLoginDate: "",
+ mobile: null,
+ nickName: "",
+ openId: null,
+ point: 10,
+ region: "",
+ regionId: "",
+ sex: 0,
+ storeId: null,
+ totalPoint: 0,
+ username: ""
+ },
loading: false, // 琛ㄥ崟鍔犺浇鐘舵��
//鏌ヨ瀹㈡埛鍒楄〃璇锋眰鍙傛暟
searchForm:{
@@ -225,8 +326,9 @@
selectCount: 0, // 宸查�夋暟閲�
selectList: [], // 宸查�夋暟鎹垪琛�
+ //瀹㈡埛璇︽儏瀵硅瘽妗�---
+ showCustomerInfo:false,
//瀹㈡埛鏍囩瀵硅瘽妗�---
-
showCustomerTag:false,
submitLoading:false,
selectLoading:false,
@@ -301,6 +403,39 @@
this.selectList = e.map(d => d.id);
this.selectCount = e.length;
},
+ //鏌ョ湅璇︽儏
+ openInfo(row){
+ this.showCustomerInfo = true;
+ this.modelTitle = "鐢ㄦ埛璇︽儏"
+ getCustomerInfo(row.id).then(res =>{
+ if(res.code === 200){
+ this.customerInfo = {
+ birthday: res.data.birthday || null,
+ blackId: res.data.blackId || null,
+ clientEnum: res.data.clientEnum || null,
+ createTime: res.data.createTime || '',
+ customerTagList: res.data.customerTagList || [],
+ disabled: res.data.disabled || false,
+ experience: res.data.experience || null,
+ face: res.data.face || '榛樿澶村儚URL',
+ gradeId: res.data.gradeId || null,
+ haveStore: res.data.haveStore || false,
+ id: res.data.id || '',
+ lastLoginDate: res.data.lastLoginDate || '',
+ mobile: res.data.mobile || null,
+ nickName: res.data.nickName || '寰俊鐢ㄦ埛',
+ openId: res.data.openId || null,
+ point: res.data.point || 0,
+ region: res.data.region || '',
+ regionId: res.data.regionId || '',
+ sex: res.data.sex || 0,
+ storeId: res.data.storeId || null,
+ totalPoint: res.data.totalPoint || 0,
+ username: res.data.username || ''
+ };
+ }
+ })
+ },
// 缂栬緫鏍囩
openEdit(row){
this.showCustomerTag = true
@@ -360,6 +495,40 @@
</script>
<style lang="scss" scoped>
+.customer-detail {
+ padding: 16px;
+}
+
+.avatar-section {
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.basic-info {
+ margin-left: 16px;
+}
+
+.basic-info h3 {
+ margin: 0 0 8px 0;
+ font-size: 18px;
+}
+
+.basic-info p {
+ margin: 6px 0;
+ color: #808695;
+ font-size: 14px;
+}
+
+.tags-section {
+ margin-top: 16px;
+ padding-top: 16px;
+}
+
+.tags-section h4 {
+ margin-bottom: 12px;
+ color: #17233d;
+}
.export {
margin: 10px 20px 10px 0;
}
--
Gitblit v1.8.0