公司小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

485 lines
11 KiB

<!--新增客户页面-->
<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"
@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="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:{
///点击了返回按钮
onTouchBack(){
uni.navigateBack({
});
},
///点击要求选择需求
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>