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"><image class="school" src="@/static/image/school.png" mode="widthFix"></image>{{ form.customerName }}</view>
				<view class="text">客户类型：{{ customerType }}</view>
				<view class="text">产品到期时间：{{ form.expireDate || '' }}</view>
			</view>
		</uni-card>
		
		<view class="block">
			<view class="l-title">基本信息</view>
			<view class="form-list">
				<view :class="['line req', {err: err === 'customerName'}]">
					<view class="name">客户名称</view>
					<view v-if="customerId" class="val">{{ form.customerName }}</view>
					<view v-else :class="['ph', {val: form.customerName}]" @click="schoolVisible = true">{{ form.customerName || '请选择学校' }}</view>
				</view>
				<view class="line">
					<view class="name">省份</view>
					<view class="val">{{ form.provinceName }}</view>
				</view>
				<view class="line">
					<view class="name">城市</view>
					<view class="val">{{ form.cityName }}</view>
				</view>
				<view :class="['line req', {err: err === 'industryClass'}]">
					<view class="name">行业类型</view>
					<view v-if="isDetail" class="val">{{ form.industryClassName }}</view>
					<uni-data-picker v-else class="picker-input" placeholder="请选择行业类型" popup-title="请选择行业类型" preload :clear-icon="false" :localdata="industryClassList" :map="{text: 'industryClassName', value: 'industryClassId'}" v-model="form.industryClassId" @change="industryClassChange"></uni-data-picker>
				</view>
				<view :class="['line req', {err: err === 'industry'}]">
					<view class="name">行业</view>
					<view v-if="isDetail" class="val">{{ form.industryName }}</view>
					<uni-data-picker v-else class="picker-input" placeholder="请选择行业" popup-title="请选择行业" preload :clear-icon="false" :localdata="industryList" :map="{text: 'industryName', value: 'industryId'}" v-model="form.industryId" :readonly="form.industryClassId ? false : true" @change="handleErr('industry')"></uni-data-picker>
				</view>
				<view :class="['line req', {err: err === 'name'}]">
					<view class="name">联系人姓名</view>
					<view v-if="isDetail" class="val">{{ form.name }}</view>
					<input v-else type="text" placeholder="请输入" v-model="form.name" @change="handleErr('name')">
				</view>
				<view :class="['line req', {err: err === 'phone'}]">
					<view class="name">手机</view>
					<view v-if="isDetail" class="val">{{ form.phone }}</view>
					<input v-else type="number" maxlength="11" placeholder="请输入" v-model="form.phone" @change="handleErr('phone')">
				</view>
				<view :class="['line req', {err: err === 'account'}]">
					<view class="name">账号</view>
					<view v-if="isDetail" class="val">{{ form.account }}</view>
					<input v-else type="text" placeholder="请以院校首字母+admin的格式来设置" v-model="form.account" @change="handleErr('account')">
				</view>
				<view class="line">
					<view class="name">职务</view>
					<view v-if="isDetail" class="val">{{ form.position }}</view>
					<input v-else type="text" placeholder="请输入" v-model="form.position">
				</view>
				<view class="line">
					<view class="name">邮箱</view>
					<view v-if="isDetail" class="val">{{ form.email }}</view>
					<input v-else type="text" placeholder="请输入" v-model="form.email">
				</view>
				<view v-if="customerId" class="line">
					<view class="name">产品到期时间</view>
					<view class="val">{{ form.expireDate }}</view>
				</view>
				<view v-if="customerId" class="line">
					<view class="name">客户类型</view>
					<view class="val">{{ customerType }}</view>
				</view>
			</view>
		</view>
		
		<view v-if="isDetail" class="action">
			<view class="item" @click="toPage(`../clientDetail/clientDetail?customerId=${customerId}`)">
				<uni-icons class="icon" custom-prefix="iconfont" type="icon-edit" size="30" color="#959595"></uni-icons>
				<view class="text">编辑</view>
			</view>
			<view class="item" @click="toPage(`/order/ordered/ordered?customerId=${customerId}`)">
				<uni-icons class="icon" custom-prefix="iconfont" type="icon-product" size="30" color="#959595"></uni-icons>
				<view class="text">已订阅产品</view>
			</view>
			<view class="item" @click="toPage(`/order/curClient/curClient?customerId=${customerId}&name=${form.customerName}`)">
				<uni-icons class="icon" custom-prefix="iconfont" type="icon-dingdan" size="30" color="#959595"></uni-icons>
				<view class="text">订单</view>
			</view>
		</view>
		<view v-else class="btn-wrap">
			<view class="btn" @click="submit">确定</view>
		</view>
		
		<view class="popup-mask" v-show="schoolVisible" @click="closeSchool"></view>
		<view class="popup" v-show="schoolVisible">
			<view class="top">请选择学校</view>
			<uni-icons class="close" type="closeempty" size="20" @click="closeSchool"></uni-icons>
			<uni-search-bar class="search" radius="5" placeholder="请输入学校名称" v-model="keyword" clearButton="auto" cancelButton="none" />
			<view class="list">
				<view class="item" v-for="item in schoolList" @click="schoolChange(item)">{{ item.schoolName }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryCustomerDetails, querySchool, queryIndustryClass, queryIndustry, queryCustomerIsExists, addCustomer, updateCustomer } from '@/apis/modules/client.js'
	export default {
		data() {
			return {
				isDetail: false,
				customerId: '',
				// 客户类型
				customerTypeList: [{
					name: '正式',
					value: 1
				},
				{
					name: '试用',
					value: 2
				},
				{
					name: '到期',
					value: 3
				}],
				nameRepeat: false,
				schoolVisible: false,
				keyword: '',
				searchTimer: null,
				schoolList: [],
				schoolListAll: [],
				industryClassList: [],
				industryList: [],
				form: {
					countries: '中国',
					customerId: '',
					customerName: '',
					industryClassId: '',
					industryId: '',
					provinceId: '',
					provinceName: '',
					account: '',
					name: '',
					phone: '',
					position: '',
					cityId: '',
					cityName: '',
					customerType: '',
					expireDate: '',
					email: '',
					schoolId: ''
				},
				customerType: '',
				err: ''
			}
		},
		watch: {
			keyword () {
				clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.filterSchool()
				}, 500)
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.customerId = options.customerId
			this.isDetail = !!options.show
			
			options.customerId && this.getInfo()
			// 非详情才需要查询学校和行业
			if (!this.isDetail) {
				this.getSchool()
				this.getIndustryClass()
			}
			// 设置标题
			uni.setNavigationBarTitle({
				title: options.customerId ?
					(options.show ?
						'客户详情' :
						'编辑客户') :
						'新增客户'
			})
		},
		methods: {
			// 获取详情
			getInfo() {
				uni.showLoading({
					title: '加载中'
				})
				queryCustomerDetails({
					customerId: this.customerId
				}).then(({ result }) => {
					const { customer } = result
					this.form = customer
					!this.isDetail && customer.industryClassId && this.getIndustry()
					this.customerType = this.customerTypeList.find(e => e.value === customer.customerType).name
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			// 获取学校列表
			getSchool() {
				querySchool({
					schoolName: '',
					provinceId: '',
					cityId: ''
				}).then(({ list }) => {
					this.schoolListAll = list
					this.schoolList = list
				}).catch(res => {})
			},
			// 学校模糊匹配
			filterSchool() {
				const { keyword } = this
				this.schoolList = keyword ? 
					this.schoolListAll.filter(e => e.schoolName.includes(keyword)) :
					this.schoolListAll
			},
			// 关闭学校弹框
			closeSchool() {
				this.schoolVisible = false
				this.keyword = ''
			},
			// 客户名称选择回调
			schoolChange(school) {
				const { form } = this
				const { schoolId } = school
				form.schoolId = schoolId
				form.customerName = school.schoolName
				form.provinceId = school.provinceId
				form.provinceName = school.provinceName
				form.cityId = school.cityId
				form.cityName = school.cityName
				this.closeSchool()
				// 客户名称判重
				queryCustomerIsExists({
					schoolId
				}).then(res => {
					this.nameRepeat = false
					this.handleErr('customerName')
				}).catch(res => {
					this.nameRepeat = true
					this.err = 'customerName'
				})
			},
			// 处理错误提示
			handleErr(val) {
				if (val === this.err) this.err = ''
			},
			// 获取行业类
			getIndustryClass() {
				queryIndustryClass().then(({ list }) => {
					this.industryClassList = list
				}).catch(res => {})
			},
			// 行业分类选择回调
			industryClassChange() {
				this.handleErr('industryClass')
				this.getIndustry()
			},
			// 获取行业
			getIndustry() {
				queryIndustry({
					industryClassId: this.form.industryClassId
				}).then(({ list }) => {
					this.industryList = list
				}).catch(res => {})
			},
			// 跳转
			toPage(path) {
				this.$util.to(path)
			},
			// 提交
			submit() {
				const refs = this.$refs
				const { form } = this
				const { schoolId, industryClassId, industryId, name, phone, account } = form
				if (!schoolId) {
					this.err = 'customerName'
					return this.$util.errMsg('请选择客户！')
				}
				if (this.nameRepeat) {
					this.err = 'customerName'
					return this.$util.errMsg('客户已存在！')
				}
				if (!industryClassId) {
					this.err = 'industryClass'
					return this.$util.errMsg('请选择行业类型！')
				}
				if (!industryId) {
					this.err = 'industry'
					return this.$util.errMsg('请选择行业！')
				}
				if (!name) {
					this.err = 'name'
					return this.$util.errMsg('请输入联系人姓名！')
				}
				if (!phone) {
					this.err = 'phone'
					return this.$util.errMsg('请输入手机！')
				}
				if (!/^1[3456789]\d{9}$/.test(phone)) {
					this.err = 'phone'
					return this.$util.errMsg('请输入正确的手机！')
				}
				if (!account) {
					this.err = 'account'
					return this.$util.errMsg('请输入账号！')
				}
				uni.showLoading({
					title: '提交中'
				})
				if (this.customerId) {
					updateCustomer(form).then(res => {
						uni.hideLoading()
						this.$util.sucMsg('编辑成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}).catch(res => {})
				} else {
					addCustomer(form).then(({ customerId }) => {
						uni.hideLoading()
						const that = this
						uni.showModal({
							title: '提示',
							content: '创建客户成功，是否马上为该客户创建订单？',
							success: function (res) {
								if (res.confirm) {
									// 选择是则直接跳转到新建订单页面，并且选中当前新加的客户
									uni.redirectTo({
										url: `/order/orderDetail/orderDetail?customerId=${customerId}`
									})
								} else if (res.cancel) {
									uni.navigateBack()
								}
							}
						})
					}).catch(res => {})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding-bottom: 170rpx;
	-webkit-overflow-scrolling: touch;
}
.info {
	.name {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
		font-size: 16px;
		color: #333;
	}
	.school {
		width: 48rpx;
		margin-right: 10rpx;
	}
}
.action {
	z-index: 2;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	width: 100%;
	padding: 5px 10px;
	padding-bottom: env(safe-area-inset-bottom);
	background-color: #fff;
	border-top: 1px solid #f3f3f3;
	box-shadow: 0 -2px 2px #f5f5f5;
	box-sizing: border-box;
	.item {
		text-align: center;
	}
	.text {
		font-size: 10px;
		color: #959595;
	}
}
</style>