FE_CRM/pages/clientDetail/clientDetail.vue

<template>
	<view class="page">
		<uni-card :is-shadow="false" :border="false" is-full>
			<view class="info">
				<view class="name">华工大学</view>
				<view class="text">客户编号：2124232</view>
				<view class="text">客户类型：2124232</view>
				<view class="text">商务经理：2124232</view>
				<view class="text">产品到期时间：2124232</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-model="form.city" placeholder="请选择客户名称" disabled />
					</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-model="form.city" placeholder="请选择班级" disabled />
					</uni-forms-item>
					<uni-forms-item label="联系人姓名" name="contact" required>
						<uni-easyinput v-model="form.contact" placeholder="请输入联系人姓名" disabled />
					</uni-forms-item>
					<uni-forms-item label="手机" name="contact">
						<uni-easyinput v-model="form.contact" placeholder="请输入手机" disabled />
					</uni-forms-item>
					<uni-forms-item label="账号" name="contact" required>
						<uni-easyinput v-model="form.contact" placeholder="请以院校首字母+admin的格式来设置" disabled />
					</uni-forms-item>
					<uni-forms-item label="职务" name="contact">
						<uni-easyinput v-model="form.contact" placeholder="请输入职务" disabled />
					</uni-forms-item>
					<uni-forms-item label="邮箱" name="contact">
						<uni-easyinput v-model="form.contact" placeholder="请输入邮箱" disabled />
					</uni-forms-item>
					<uni-forms-item label="产品到期时间">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.datetimesingle" disabled />
					</uni-forms-item>
					<uni-forms-item label="客户类型">
						<uni-easyinput v-model="form.city" 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>
	export default {
		data() {
			return {
				candidates: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口'],
				dataTree: [{
						text: "一年级",
						value: "1-0",
						children: [{
								text: "1.1班",
								value: "1-1"
							},
							{
								text: "1.2班",
								value: "1-2"
							}
						]
					},
					{
						text: "二年级",
						value: "2-0",
						children: [{
								text: "2.1班",
								value: "2-1"
							},
							{
								text: "2.2班",
								value: "2-2"
							}
						]
					},
					{
						text: "三年级",
						value: "3-0",
						disable: true
					}
				],
				form: {
					name: '',
					provience: '',
					city: '',
					industryId: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399
				},
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, {
					text: '保密',
					value: 2
				}],
			}
		},
		onLoad() {
			
		},
		methods: {
			onchange(e) {
				console.log('---------onchange:', e);
			},
			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 {
	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>