xiaochengxu/pages/AddNewCustomer/AddNewCustomer.vue

<!--新增客户页面-->
<template>
	<view class="main_background">
		
		<view class="top">
			<image class="top_banner" src="../../static/images/kehu/bg_2.png">
			</image>
			<u-navbar
				title="客户新增"
				:safeAreaInsetTop="true"
				:fixed="true"
				bgColor="#FFFFFF00"
			>
			</u-navbar>
		</view>
		<view class="body">
			<view style="width:100%;height:129rpx;position: absolute;top: 0;left: 0;right: 0;">
				<view style="width: 8rpx;height: 22rpx;background: #D49B4B;opacity: 1;border-radius: 1px 5px 5px 1px;position: absolute;top: 42rpx;left: 20rpx;"/>
				<text class="title_text">客户资料填写</text>
			</view>
			<view class="u-form-body">
				<u-form
					labelPosition="left"
					ref="form1"
					:model="model"
					:rules="rules"
					:labelStyle="form_tile_title"
				>
					<u-form-item
						prop="userInfo.name"
						borderBottom
						ref="name"
						label="姓名*"
					>
						<input
							:placeholder="rules['userInfo.name'].message"
							class="form_input"
							:value="model.userInfo.name"
							placeholder-class="form_holder"
							@blur="rules['userInfo.name'].validator"
						/>
					</u-form-item>
					
					<u-form-item
						label="电话*"
						prop="userInfo.phone"
						borderBottom
						ref="phone"
					>
						<input
							:placeholder="rules['userInfo.phone'].message"
							class="form_input"
							placeholder-class="form_holder"
							:value="model.userInfo.phone"
							@blur="rules['userInfo.phone'].validator"
						/>
					</u-form-item>
					<u-form-item
						label="行业"
						prop="userInfo.industry"
						borderBottom
						ref="industry"
					>
						<input
							:placeholder="rules['userInfo.industry'].message"
							class="form_input"
							:value="model.userInfo.industry"
							placeholder-class="form_holder"
							@blur="rules['userInfo.industry'].validator"
						/>
						
					</u-form-item>
					<u-form-item
						label="需求*"
						prop="userInfo.needs"
						borderBottom
						ref="needs"
						@click="onClickToSelectNeeds"
					>
						<input
							:placeholder="rules['userInfo.needs'].message"
							class="form_input"
							:disabled="true"
							placeholder-class="form_holder"
							:value="getUserNeedString()"
						/>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="城市*"
						prop="userInfo.city"
						borderBottom
						ref="city"
						@click="onClickToSelectCity"
					>
						<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
							<input
								:placeholder="rules['userInfo.city'].message"
								class="form_input"
								:disabled="true"
								:value="model.userInfo.city"
								placeholder-class="form_holder"
							/>
						</pick-regions>
						<u-icon
							slot="right" 
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="详细地址"
						prop="userInfo.address"
						borderBottom
						ref="address"
						labelWidth="120rpx"
					>
						<input
							:placeholder="rules['userInfo.address'].message"
							class="form_input"
							:value="model.userInfo.address"
							placeholder-class="form_holder"
							@blur="rules['userInfo.address'].validator"
						/>
					</u-form-item>
				</u-form>
				<u-gap height="37rpx"/>
				<view style="width: 662rpx;height: 190rpx;background-color: #0081FF00;">
					<text class="form_label_style">详细描述</text>
					<u-gap height="20rpx"/>
					<view
						class="more_info_box"
					>
						<textarea
							:placeholder="rules['userInfo.intro'].message"
							class="form_input_textarea"
							placeholder-class="form_holder"
							@blur="rules['userInfo.intro'].validator"
						>{{model.userInfo.intro}}</textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="comfirm_button" @click="onConfirm">
			<text class="text_comfirm">提交</text>
		</view>
		<u-popup :show="isNeedSelectShowing"
			mode="bottom"
			borderRadius="20rpx"
			round="20rpx"
			:safeAreaInsetBottom="true"
			@close="onNeedsSelectClose"
		>
			<NeedsSelect
				ref="NeedsSelect"
				:selected="getNeedSelecedViewProps()"
			></NeedsSelect>
		</u-popup>
		<u-overlay :show="isShowUploadSuccess" @click="isShowUploadSuccess = false">
			<UploadSuccess></UploadSuccess>
		</u-overlay>
		
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import NeedsSelect from '@/components/NeedsSelect/NeedsSelect.vue'
	import UploadSuccess from '@/components/UploadSuccess/UploadSuccess.vue'
	export default {
		created() {
			var key = this.$Define.FireKeys.NeedsSelectedCallback;
			console.log("created");
			this.$fire.on(
				key,result=>{
					//无论result是什么，都需要将弹出界面挂壁
					this.isNeedSelectShowing = false;
					var status = result['status'];
					if(status){
						console.log("更新客户的needs显示。");
						var needs = result['selected'];
						//先吧用户的需求给清理了
						this.model.userInfo.needs = [];
						var ids = [];
						for(var i = 0;i<needs.length;i++){
							var b = needs[i];
							if(b){
								ids.push(i);
							}
						}
						this.model.userInfo.needs = ids;
					}
				}
			);
		},	
		destroyed(){
			var key = this.$Define.FireKeys.NeedsSelectedCallback;
			this.$fire.off(key);
		},
		components:{
			pickRegions,NeedsSelect,UploadSuccess
		},
		
		data() {
			return {
				///需求选择界面是否在显示
				isNeedSelectShowing : false,
				isShowUploadSuccess : false,
				model : {
					userInfo : {
						///名字
						name : '',
						///电话号码
						phone : '',
						///行业
						industry : '',
						///需求
						needs: [],
						///所在城市
						city: '',
						///具体地址
						address: '',
						///详细描述
						intro: '',
					}
				},
				rules:{
					'userInfo.name' : {
						type: 'string',
						required: true,
						message : '请输入姓名',
						validator : (object)=>{
							this.model.userInfo.name = object.detail.value;
						}
					},
					'userInfo.phone' : {
						type: 'string',
						required: true,
						message : '请输入客户电话',
						///校验用户是否输入了正确的手机号码
						validator : (object)=>{
							var suc = uni.$u.test.mobile(object.detail.value);
							if(!suc){
								uni.$u.toast("请输入正确的电话号码！");
							}else{
								this.model.userInfo.phone = object.detail.value;
							}
							
							return suc;
						}
					},
					'userInfo.industry' : {
						type: 'string',
						required: false,
						message : '请输入客户行业',
						validator : (object)=>{
							this.model.userInfo.industry = object.detail.value;
						}
					},
					'userInfo.needs' : {
						type : 'array',
						required : true,
						message : '请选择客户需求',
					},
					///选择用户的城市
					'userInfo.city' : {
						type : 'string',
						required : true,
						message: '请选择客户所在城市',
					},
					'userInfo.address' : {
						type: 'string',
						required: false,
						message : '请输入客户详细地址',
						validator : (object)=>{
							this.model.userInfo.address = object.detail.value;
						}
					},
					'userInfo.intro' : {
						type: 'string',
						required: false,
						message : '请输入对此客户的详细描述',
						validator : (object)=>{
							this.model.userInfo.intro = object.detail.value;
						}
					},
				},
				region:[],
				defaultRegion:['四川省','成都市','武侯区'],
				form_tile_title : {
								height: '37rpx',
								fontSize: '26rpx',
								fontWeight: 400,
								color: '#666666',
							},
			};
		},
		methods:{
			///点击要求选择需求
			onClickToSelectNeeds(){
				//关闭软键盘
				uni.hideKeyboard();
				this.isNeedSelectShowing = true;
			},
			///点击并选择城市
			onClickToSelectCity(){
				uni.hideKeyboard();
			},
			// 获取选择的地区
			handleGetRegion(region){
				this.region = region;
				this.model.userInfo.city = this.regionName();
				this.$refs.form1.validateField('userInfo.city');
			},
			regionName(){
				return this.region.map(item=>item.name).join(' ');
			},
			///点击了提交按钮
			onConfirm(){
				console.log(this.model.userInfo);
				this.isShowUploadSuccess = true;
			},
			///当需求选择界面关闭的时候回调
			onNeedsSelectClose(){
				this.isNeedSelectShowing = false;
			},
			///获取用户需求
			getUserNeedString(){
				var names = this.$Define.UserNeeds;
				var str = "";
				for(var i = 0;i<this.model.userInfo.needs.length;i++){
					var id = this.model.userInfo.needs[i];
					var na = names[id];
					str += na + " ";
				}
				return str;
			},
			/**
			 * 获取需求选择界面需要的props
			 */
			getNeedSelecedViewProps(){
				var props = [];
				var names = this.$Define.UserNeeds;
				for(var i = 0;i<names.length;i++){
					props.push(false);
				}
				var nds = this.model.userInfo.needs;
				for(var i = 0;i<nds.length;i++){
					var id = nds[i];
					props[id] = true;
				}
				return props;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main_background{
		opacity: 1;
		position: relative;
		margin: 0 auto;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background-color: #F6F6F6;
	}
	.top{
		width: 750rpx;
		height: 424rpx;
		position: relative;
	}
	.top_banner{
		position: relative;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 424rpx;
	}
	.body{
		width: 702rpx;
		height: 1140rpx;
		position: relative;
		left: 24rpx;
		right: 24rpx;
		top: -129rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
	}
	
	.u-form-body{
		position: absolute;width: 662rpx;top: 70rpx;left: 20rpx;right: 20rpx;height: 1060rpx;
	}
	
	.title_text{
		width: 192rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 38rpx;
		top: 30rpx;
	}
	
	.form_input{
		//background-color: #0081FF;
		width: 100%;
		height: 90rpx;
		text-align: right;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}
	
	.form_input_textarea{
		//background-color: #0081FF;
		width: 100%;
		height: 168rpx;
		text-align: left;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}
	
	.form_holder{
		width: 100%;
		height: 90rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-right: 10rpx;
	}
	
	.form_label_style{
		height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		opacity: 1;
	}
	.more_info_box{
		width: 662rpx;
		height: 166rpx;
		background: #FFFFFF;
		border: 1rpx solid #E2E2E2;
		opacity: 1;
		border-radius: 12rpx;
	}
	.comfirm_button{
		width: 702rpx;
		height: 90rpx;
		background: #D49B4B;
		opacity: 1;
		border-radius: 93rpx;
		position: relative;
		left: 24rpx;
		right: 24rpx;
		top: -100rpx;
	}
	.text_comfirm{
		width: 72rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
		position: absolute;
		top: 20rpx;
		left: 315rpx;
	}
</style>