FE_CRM/pages/clientDetail/clientDetail.vue

<template>
	<view class="page">
		<uni-card v-if="customerId" :is-shadow="false" :border="false" is-full>
			<view class="info">
				<view class="name">{{ form.customerName }}</view>
				<view class="text">客户编号：2124232</view>
				<view class="text">客户类型：{{ customerType }}</view>
				<view class="text">产品到期时间：{{ form.expireDate }}</view>
			</view>
		</uni-card>
		
		<uni-section title="基本信息" type="line">
			<view class="form">
				<uni-forms ref="baseForm" :modelValue="form" label-width="100" disabled>
					<uni-forms-item label="客户名称" name="name" required>
						<uni-easyinput v-if="isDetail" v-model="form.schoolId" disabled />
						<uni-data-picker v-else placeholder="请选择学校" popup-title="请选择学校" :localdata="schoolList" :map="{text: 'schoolName', value: 'schoolId'}" v-model="form.schoolId">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="省份">
						<uni-easyinput v-model="form.provience" disabled />
					</uni-forms-item>
					<uni-forms-item label="城市">
						<uni-easyinput v-model="form.city" disabled />
					</uni-forms-item>
					<uni-forms-item label="行业类型" required>
						<uni-easyinput v-if="isDetail" v-model="form.industryClassId" disabled />
						<uni-data-picker v-else placeholder="请选择行业类型" popup-title="请选择行业类型" preload :clear-icon="false" :localdata="industryClassList" :map="{text: 'industryClassName', value: 'industryClassId'}" v-model="form.industryClassId" @change="industryClassChange">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="行业" required>
						<uni-easyinput v-if="isDetail" v-model="form.industryId" disabled />
						<uni-data-picker v-else placeholder="请选择行业" popup-title="请选择行业" preload :clear-icon="false" :localdata="industryList" :map="{text: 'industryName', value: 'industryId'}" v-model="form.industryId" :readonly="form.industryClassId ? false : true">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="联系人姓名" name="name" required>
						<uni-easyinput v-model="form.name" placeholder="请输入联系人姓名" :disabled="isDetail" />
					</uni-forms-item>
					<uni-forms-item label="手机" name="phone">
						<uni-easyinput v-model="form.phone" placeholder="请输入手机" :disabled="isDetail" />
					</uni-forms-item>
					<uni-forms-item label="账号" name="account" required>
						<uni-easyinput v-model="form.account" placeholder="请以院校首字母+admin的格式来设置" :disabled="isDetail" />
					</uni-forms-item>
					<uni-forms-item label="职务" name="position">
						<uni-easyinput v-model="form.position" placeholder="请输入职务" :disabled="isDetail" />
					</uni-forms-item>
					<uni-forms-item label="邮箱" name="email">
						<uni-easyinput v-model="form.email" placeholder="请输入邮箱" :disabled="isDetail" />
					</uni-forms-item>
					<uni-forms-item label="产品到期时间">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.expireDate" disabled />
					</uni-forms-item>
					<uni-forms-item label="客户类型">
						<uni-easyinput v-model="customerType" disabled />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		
		<view class="action">
			<view class="item" @click="toPage('../addClient/addClient')">
				<uni-icons class="icon" custom-prefix="iconfont" type="icon-edit" size="20" color="#959595"></uni-icons>
				<view class="text">编辑</view>
			</view>
			<view class="item" @click="toPage('../ordered/ordered')">
				<uni-icons class="icon" custom-prefix="iconfont" type="icon-product" size="20" color="#959595"></uni-icons>
				<view class="text">已订阅产品</view>
			</view>
			<view class="item" @click="toPage('../orders/orders')">
				<uni-icons class="icon" custom-prefix="iconfont" type="icon-dingdan" size="20" color="#959595"></uni-icons>
				<view class="text">订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryCustomerDetails, querySchool, queryIndustryClass, queryIndustry } from '@/apis/modules/client.js'
	export default {
		data() {
			return {
				isDetail: false,
				customerId: '',
				// 客户类型
				customerTypeList: [{
					name: '正式',
					value: 1
				},
				{
					name: '试用',
					value: 2
				},
				{
					name: '到期',
					value: 3
				}],
				schoolList: [],
				industryClassList: [],
				industryList: [],
				form: {
					customerId: '',
					customerName: '',
					industryClassId: '',
					industryId: '',
					provinceId: '',
					account: '',
					name: '',
					phone: '',
					position: '',
					cityId: '',
					customerType: '',
					expireDate: '',
					email: '',
					schoolId: ''
				},
				customerType: '',
			}
		},
		onLoad(option) {
			this.customerId = option.customerId
			this.isDetail = !!option.show
			
			option.customerId && this.getInfo()
			this.getSchool()
			this.getIndustryClass()
		},
		methods: {
			// 获取详情
			getInfo() {
				queryCustomerDetails({
					customerId: this.customerId
				}).then(({ result }) => {
					const { customer } = result
					this.form = customer
					this.customerType = this.customerTypeList.find(e => e.value === customer.customerType).name
				}).catch(e => {})
			},
			// 获取学校列表
			getSchool() {
				querySchool({
					schoolName: '',
					provinceId: '',
					cityId: ''
				}).then(({ list }) => {
					this.schoolList = list
				}).catch(res => {})
			},
			// 获取行业类
			getIndustryClass() {
				queryIndustryClass().then(({ list }) => {
					this.industryClassList = list
				}).catch(res => {})
			},
			// 行业分类选择回调
			industryClassChange() {
				console.log(this.form.industryClassId)
				this.getIndustry()
			},
			// 获取行业
			getIndustry() {
				queryIndustry({
					industryClassId: this.form.industryClassId
				}).then(({ list }) => {
					this.industryList = list
				}).catch(res => {})
			},
			// 跳转
			toPage(path) {
				this.$util.to(path)
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding-bottom: 55px;
}
.info {
	.name {
		font-size: 16px;
		color: #333;
	}
}
.form {
	padding: 15px;
	background-color: #fff;
}
.action {
	z-index: 2;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	width: 100%;
	padding: 5px 10px;
	background-color: #fff;
	border-top: 1px solid #f3f3f3;
	.item {
		text-align: center;
	}
	.text {
		font-size: 10px;
		color: #959595;
	}
}
</style>