mdapp/pages/cust/create.vue

<template>
	<view class="page">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="姓名" prop="name" required>
					<u-input placeholder="请输入客户姓名" v-model="form.name" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="性别" prop="sex" required>
					<u-radio-group v-model="form.sex" active-color="#2979ff">
						<u-radio name="male">先生</u-radio>
						<u-radio name="female">女士</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label-width="150" label="手机号" prop="phone" required>
					<u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="备注信息" prop="remark" label-position="top">
					<u-input placeholder="客户描述说明,如客户意向户型或面积等信息" v-model="form.remark" type="textarea"></u-input>
				</u-form-item>
			</u-form>
			<u-gap height="60"></u-gap>
			<u-button type="primary" :diabled="submitButtonDisabled" @click="submitHandle">提交</u-button>
		</view>
		<!-- 列表选择 -->
		<u-select mode="single-column" :list="propertySelectList" v-model="propertySelectShow" @confirm="propertySelectConfirm"></u-select>
		<u-select mode="single-column" :list="salerSelectList" v-model="salerSelectShow" @confirm="salerSelectConfirm"></u-select>
		<!-- modal -->
		<u-modal v-model="submitModalShow" content="请务必仔细确认各项信息是否正确" :show-cancel-button="true" @confirm="submit()"></u-modal>
		<u-modal v-model="modalShow" :content="modalContent" :show-cancel-button="true" @cancel="modalCancel()" @confirm="modalConfirm()"></u-modal>
		<!-- utoast -->
		<u-toast ref="uToast" />
	</view>
</template>
<script>
export default {
	data() {
		return {
			isEdit: false,
			form: {
				name: null,
				phone: null,
				sex: 'male',
				remark: null,
				estate_id: null,
				estate_name: null,
				saler_id: null,
				saler_name: null
			},
			customer_id: null,
			submitButtonDisabled: true,
			rules: {
				name: [
					{
						required: true,
						message: '姓名不得为空',
						trigger: ['change', 'blur']
					},
				],
				phone: [
					{
						required: true,
						message: '手机号不得为空',
						trigger: ['change', 'blur']
					},
					// 11个字符判断
					{
						len: 11,
						message: '手机号格式不正确',
						trigger: ['change', 'blur']
					},
				],
				estate_name: [
					{
						required: true,
						message: '意向项目不能为空',
						trigger: ['change']
					},
				]
			},

			propertySelectShow: false,
			propertySelectList: [],

			salerSelectShow: false,
			salerSelectList: [],
			submitModalShow: false,
			modalShow: false,
			modalContent: ''
		};
	},
	onLoad(data) {
		const that = this
		const eventChannel = that.getOpenerEventChannel(); // that 需指向 this
		// 监听data事件，获取上一页面通过eventChannel.emit传送到当前页面的数据
		if (eventChannel.on) {
			eventChannel.on('data', data => {
				if (data) {
					that.form.name = data.info.name;
					that.form.phone = data.info.phone;
					that.form.sex = data.info.sex;
					that.form.remark = data.info.demand;
					that.form.id = data.info.id;
					that.isEdit = true
					wx.setNavigationBarTitle({
						title: '编辑客户-' + data.info.name
					})
				}
			})
		}
	},
	created () {
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		// 选择所属项目回调
		propertySelectConfirm(e) {
			e.map((val, index) => {
				this.form.estate_id = val.value;
				this.form.estate_name = val.label;
			});
		},
		submitHandle() {
			const that = this
			this.$refs.uForm.validate(valid => {
				if (valid) {
					// 验证成功
					let apiStr = 'apicustomeradd'
					let params = {
						phone_type: 1,
						name: that.form.name,
						phone: that.form.phone,
						sex: that.form.sex,
						demand: that.form.remark,
					}
					if(that.isEdit) {
						apiStr = 'apicustomeredit'
						params.id = that.form.id
					}
					uni.api.cust[apiStr](params).then(res => {
						if (that.isEdit) {
							uni.$msgConfirm('编辑成功', () => {
								uni.reLaunch({
									url: '/pages/cust/list'
								})
							}, () => {
								uni.reLaunch({
									url: '/pages/cust/list'
								})
							})
						} else {
							uni.$msgConfirm('添加成功,是否前往客户列表？', () => {
								uni.reLaunch({
									url: '/pages/cust/list'
								})
							}, () => {
								this.form = {
									name: null,
									phone: null,
									sex: 'male',
									remark: null,
									estate_id: null,
									estate_name: null,
								}
							})
						}
					})
				} else {
					console.log('验证失败');
				}
			});
		},

		// 获取手机号
		getPhoneNumber: function(e) {
			// 点击获取手机号码按钮
			let _that = this;
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				_that.$refs.uToast.show({
					title: '您可以在个人设置中再次绑定',
					type: 'warning'
				});
				setTimeout(() => {
					_that.reLunchUser();
				}, 1500);
				return; // 即用户拒绝授权
			}
			console.log(e.detail.errMsg);
			console.log(e.detail.iv);
			console.log(e.detail.encryptedData);
			let iv = e.detail.iv;
			let encryptedData = e.detail.encryptedData;
			// 不是登陆完第一时间授权
			wx.login({
				success(res) {
					if (res.code) {
						// 设置用户手机号
						_that.setUserPhoneNumber(encryptedData, iv, res.code);
					} else {
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'warning'
						});
						console.log('登录失败！' + res.errMsg);
					}
				}
			});
		},
		// 以下是工具函数
		// 关闭键盘
		hideKeyboard() {
			uni.hideKeyboard();
		},
		// 格式化日期的月份或天数的显示（小于10，在前面增加0）
		getFormatDate(value) {
			if (value == undefined || value == '') {
				return '';
			}
			var str = value;
			if (parseInt(value) < 10) {
				str = '0' + value;
			}
			return str;
		}
	}
};
</script>
<style lang="scss">
.page {
	padding: 20rpx;
	background-color: #ffffff;
}

.form {
	border-radius: 10rpx;
	padding: 0 40rpx;
}

.popup-body {
	.tips-title {
		font-size: $u-p;
		margin-bottom: 20rpx;
	}

	.tips-content {
		font-size: $u-p2;
		color: $u-tips-color;
		margin-bottom: 60rpx;
	}
}

.id_card {
	color: #606266;
	width: 100%;
	height: 350rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f4f5f6;
	font-size: $u-p2;
}

.footer {
	position: absolute;
	text-align: center;
	bottom: 40rpx;
	font-size: $u-p2;

	.agreement {
		color: $u-type-error;
	}
}

.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding: 20rpx;
}
</style>