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="getPageTitle()"
				:safeAreaInsetTop="true"
				:fixed="true"
				bgColor="#FFFFFF00"
				@leftClick="onTouchBack"
			>
			</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="customer"
					:rules="rules"
					:labelStyle="form_tile_title"
				>
					<u-form-item
						prop="name"
						borderBottom
						ref="name"
						label="姓名*"
					>
						<input
							:placeholder="rules['name'].message"
							class="form_input"
							:value="customer.name"
							placeholder-class="form_holder"
							@blur="rules['name'].validator"
						/>
					</u-form-item>
					
					<u-form-item
						label="电话*"
						prop="phone"
						borderBottom
						ref="phone"
					>
						<input
							:placeholder="rules['phone'].message"
							class="form_input"
							placeholder-class="form_holder"
							:value="customer.phone"
							@blur="rules['phone'].validator"
						/>
					</u-form-item>
					<u-form-item
						label="行业"
						prop="industry"
						borderBottom
						ref="industry"
					>
						<input
							:placeholder="rules['industry'].message"
							class="form_input"
							:value="customer.industry"
							placeholder-class="form_holder"
							@blur="rules['industry'].validator"
						/>
						
					</u-form-item>
					<u-form-item
						label="需求*"
						prop="demand"
						borderBottom
						ref="demand"
						@click="onClickToSelectNeeds"
					>
						<input
							:placeholder="rules['demand'].message"
							class="form_input"
							:disabled="true"
							placeholder-class="form_holder"
							:value="customer.demand"
						/>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="城市*"
						prop="city"
						borderBottom
						ref="city"
						@click="onClickToSelectCity"
					>
						<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
							<input
								:placeholder="rules['city'].message"
								class="form_input"
								:disabled="true"
								:value="customer.city"
								placeholder-class="form_holder"
							/>
						</pick-regions>
						<u-icon
							slot="right" 
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="详细地址"
						prop="address"
						borderBottom
						ref="address"
						labelWidth="120rpx"
					>
						<input
							:placeholder="rules['address'].message"
							class="form_input"
							:value="customer.address"
							placeholder-class="form_holder"
							@blur="rules['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['descmsg'].message"
							class="form_input_textarea"
							placeholder-class="form_holder"
							:value="customer.descmsg"
							@blur="rules['descmsg'].validator"
						></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="comfirm_button" @click="onConfirm">
			<text class="text_comfirm">{{getConfirmButtonText()}}</text>
		</view>
		<u-popup :show="isNeedSelectShowing"
			mode="bottom"
			borderRadius="20rpx"
			round="20rpx"
			:safeAreaInsetBottom="true"
			@close="onNeedsSelectClose"
		>
			<NeedsSelect
				ref="NeedsSelect"
				:selected="getNeedSelecedViewProps()"
			></NeedsSelect>
		</u-popup>
	</view>
</template>

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

				uni.hideLoading();
				
				var info	= Define.onNetMessage(res);
				if(!info){
					return false;
				}
				//成功以后，检查当前所有客户，在第几页
				var key = Define.FireKeys.AddNewCustomerSuccess;
				this.$fire.fire(key,this.customer.phone);
				this.onTouchBack();
			},
			///当需求选择界面关闭的时候回调
			onNeedsSelectClose(){
				this.isNeedSelectShowing = false;
			},
			/**
			 * 获取需求选择界面需要的props
			 */
			getNeedSelecedViewProps(){
				var props = [];
				var names = Define.UserNeeds;
				for(var i = 0;i<names.length;i++){
					props.push(false);
				}
				var nds 		= this.customer.demand;
				if(nds == ''){
					//如果没有需求
					return props;
				}
				//进行分割
				var arr			= nds.split(';');
				console.log("对用户需求进行分割：",arr);
				for(var i = 0;i<arr.length;i++){
					var ndm	= arr[i];
					var idx	= names.indexOf(ndm);
					if(idx != -1){
						props[idx] = true;
					}
				}
				
				return props;
			},
			/**
			 * 获取最下方按钮显示的内容
			 */
			getConfirmButtonText(){
				var customer 	= this.customer;
				var id			= customer.id;
				if(id != -1){
					return '更新';
				}
				return '提交';
			},
			/**
			 * 获取页面标题
			 */
			getPageTitle(){
				var customer 	= this.customer;
				var id			= customer.id;
				if(id != -1){
					return '更新客户';
				}
				return '新增客户';
			}
		},
	}
</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>