公司小程序
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.

532 lines
12 KiB

<!--新增客户页面-->
<template>
<view class="main">
<view class="back" />
<u-navbar
:title="getPageTitle()"
:safeAreaInsetTop="true"
:fixed="true"
bgColor="#FFFFFF00"
@leftClick="onTouchBack"
>
</u-navbar>
<image class="top_banner" :src="getTopicImageUrl()" mode="widthFix" />
<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;
}else{
customer = {
address : '',
city : '',
demand : '',
descmsg : '',
id : -1,
industry : '',
name : '',
phone : '',
};
}
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;
console.log("退出新增用户界面!");
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 '新增客户';
},
/**
* 顶部top的图片背景
*/
getTopicImageUrl(){
return getApp().globalData.mainPageData.keHuToppic.toppicadd.picurl;
}
},
}
</script>
<style lang="scss" scoped>
.top{
width: 750rpx;
height: auto;
position: relative;
}
.top_banner{
position: relative;
width: 750rpx;
height: auto;
}
.body{
width: 702rpx;
height: 1140rpx;
position: relative;
left: 24rpx;
right: 24rpx;
top: -50rpx;
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: -20rpx;
}
.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>