zhjwxt/admin/src/app/views/customer_resources/components/UserProfile.vue

<template>
	<el-dialog
	  v-model="showDialog"
	  title="客户详情"
	  width="80%"
	  class="user-profile p-6"
	  :destroy-on-close="true"
	>
	
		<!-- 顶部用户信息 -->
		<el-card class="mb-4">
			<div class="flex items-center">
				<el-avatar :size="60" class="mr-4" :src="user.headimg"/>
				<div>
					<h2 class="text-xl font-bold">{{ user.nickname }}</h2>
					<div style="display: flex; gap: 200px;margin-top: 10px;">
					    <p>ID: U{{ user.member_id }}</p>
					    <p>电话: {{ user.mobile }}</p>
					    <p>住址: {{ user.address }}</p>
					</div>
				</div>
			</div>
		</el-card>

		<!-- 标签导航 -->
		<el-tabs v-model="activeTab" class="mb-4">
			<el-tab-pane label="六要素" name="six-elements" />
			<el-tab-pane label="修改日志" name="log" />
			<el-tab-pane label="学生情况" name="student" />
			<el-tab-pane label="订单列表" name="orders" />
			<el-tab-pane label="沟通记录列表" name="communication_records" />
		</el-tabs>

		<!-- 六要素信息卡片 -->
		<el-card v-if="activeTab === 'six-elements'">
			<h3 class="text-lg font-bold mb-4">六要素信息</h3>
			<el-row :gutter="20" class="mb-2">
				<el-col :span="12">需求购买力：<el-tag>{{ info.purchasePower }}</el-tag></el-col>
				<el-col :span="12">认知理念：<el-tag>{{ info.knowledge }}</el-tag></el-col>
				
			</el-row>
			<el-row :gutter="20" class="mb-2">
				<el-col :span="12">距离：<span>{{ info.distance }}</span></el-col>
				<el-col :span="12">可谈上课时间：<span>{{ info.canTalkDate }}</span></el-col>
			</el-row>
			
			<el-row :gutter="20" class="mb-2">
				<el-col :span="12">承诺到访时间：<span>{{ info.promisedVisitDate }}</span></el-col>
				<el-col :span="12">实际到访时间：<span>{{ info.actualVisitDate }}</span></el-col>
			</el-row>
			<el-row :gutter="20" class="mb-2">
				<el-col :span="12">电话后的意向程度：<el-tag>{{ info.phoneIntention }}</el-tag></el-col>
				<el-col :span="12">是否关单：
					<el-tag :type="info.isClosed ? 'success' : 'danger'">{{ info.isClosed ? '是' : '否' }}</el-tag>
				</el-col>
			</el-row>

			<!-- 备注与访问情况 -->
			<el-form label-position="top" class="mt-4">
				<el-form-item label="沟通备注">
					<el-input v-model="info.notes" placeholder="填写备注" disabled/>
				</el-form-item>
				<el-form-item label="一访情况">
					<el-input v-model="info.visit1" placeholder="填写一访情况" disabled/>
				</el-form-item>
				<el-form-item label="二访情况">
					<el-input v-model="info.visit2" placeholder="填写二访情况" disabled/>
				</el-form-item>
			</el-form>
		</el-card>
  
		<el-card v-if="activeTab === 'log'">
			<log :value="user.id"/>
		</el-card>
		
		<el-card v-if="activeTab === 'student'">
			<student :value="user.id"/>
		</el-card>
		
		<el-card v-if="activeTab === 'orders'">
			<orders :value="user.id"/>
		</el-card>
		
		<el-card v-if="activeTab === 'communication_records'">
			<CommunicationRecords :customer_resource_id="user.id"/>
		</el-card>
		
  
  </el-dialog>
</template>

<script setup>
	import { useDictionary } from '@/app/api/dict'
	import { ref, reactive, computed, watch } from 'vue'
	import Log from '@/app/views/customer_resources/components/log.vue'
	import Student from '@/app/views/customer_resources/components/student_courses.vue'
	import Orders from '@/app/views/customer_resources/components/order_table.vue'
	import CommunicationRecords from '@/app/views/communication_records/communication_records.vue'
	let showDialog = ref(false)

	
	const activeTab = ref('six-elements')

	const user = reactive({
		id: '',
		member_id:'',
		nickname: '',
		headimg: '',
		mobile:'',
		address:''
	})

	const info = reactive({
		purchasePower: '',
		knowledge: '',
		distance: '',
		canTalkDate: '',
		promisedVisitDate: '',
		actualVisitDate: '',
		phoneIntention: '',
		isClosed: '',
		notes: '',
		visit1: '',
		visit2: ''
	})
	
	let call_intentList = ref([])
	let purchase_powerList = ref([])
	let concept_awarenessList = ref([])
	
	const setFormData = async (row) => {
		call_intentList.value = await (
			await useDictionary('preliminarycustomerintention')
		).data.dictionary
		
		purchase_powerList.value = await (
			await useDictionary('customer_purchasing_power')
		).data.dictionary
		
		concept_awarenessList.value = await (
			await useDictionary('cognitive_concept')
		).data.dictionary
		
		
		user.id = row.id;
		user.nickname = row.member_info.nickname;
		user.member_id = row.member_info.member_id;
		user.headimg = row.member_info.headimg;
		user.mobile = row.member_info.mobile;
		user.address = row.member_info.address;
		
		
		info.purchasePower = purchase_powerList.value.flat().find(item => item.value == row.six.purchase_power)?.name || '';
		info.knowledge = concept_awarenessList.value.flat().find(item => item.value == row.six.concept_awareness)?.name || '';
		info.distance = row.six.distance;
		info.canTalkDate = row.six.preferred_class_time;
		info.promisedVisitDate = row.six.promised_visit_time;
		info.actualVisitDate = row.six.actual_visit_time;
		info.phoneIntention =  call_intentList.value.flat().find(item => item.value == row.six.call_intent)?.name || '';
		info.isClosed = row.six.is_closed == 1 ? true : false;
		info.notes = row.six.communication;
		info.visit1 = row.six.first_visit_status;
		info.visit2 = row.six.second_visit_status;
		console.log(call_intentList.value);
	}
	
	defineExpose({
	  showDialog,
	  setFormData
	})
</script>

<style scoped>
	.user-profile {

		margin: 0 auto;
	}
</style>