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.
529 lines
12 KiB
529 lines
12 KiB
<!--新增客户页面-->
|
|
<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>
|
|
|