页面功能修改
This commit is contained in:
浅念
@@ -205,13 +205,16 @@
|
||||
url: '/pages/customer/maph5'
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
uni.navigateTo({
|
||||
url: '/pages/customer/map'
|
||||
});
|
||||
// #endif
|
||||
|
||||
},
|
||||
gomap1(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/customer/map'
|
||||
});
|
||||
},
|
||||
mapclose(){
|
||||
this.showmap = false
|
||||
|
||||
+133
-249
@@ -2,72 +2,31 @@
|
||||
<view>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" :title="$t('navbar.customerinfo')"></uni-nav-bar>
|
||||
<view class="content">
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.CustomerChannel')}}</view>
|
||||
<view class="right select" @click="showchannel = true">
|
||||
<!-- <input :placeholder="$t('customer.CustomerChannelinput')" disabled v-model="channel_name" /> -->
|
||||
<view class="" :class="['content2', { placeholder: !channel_name }]">{{channel_name || $t('customer.CustomerChannelinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
<view class="contents" >
|
||||
<view class="top">
|
||||
<view class="name">{{datas.contacts}}</view>
|
||||
<view class="right">
|
||||
<text class="medal" :style="{color:(datas.magnitude == 0 ?'#F5AB00' : datas.magnitude == 1 ?'#8495B8': '#9B7200')}">{{datas.magnitude_txt}}</text>
|
||||
<text class="tag" :style="{background:(datas.follow == 0 ?'#3471FF' : datas.follow == 1 ?'#27C89C': '#FF4040')}">{{datas.follow_txt}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-line margin="20rpx 0px" color="#fff" :hairline="false"></u-line>
|
||||
<view class="cont">
|
||||
<view class="title">
|
||||
<view class=""><text class="name">{{datas.phone}}</text></view>
|
||||
<view class="ststus">渠道：{{datas.channel_name}}</view>
|
||||
</view>
|
||||
<view class="info"><text class="sex">{{datas.sex_txt}}</text> | <text class="addr">{{datas.country_name}}</text><text class="type">{{datas.car_type_name}}</text>
|
||||
</view>
|
||||
<view v-if="datas.email!=''">Email: {{datas.email}}</view>
|
||||
<view v-if="datas.WhatsApp!=''">WhatsAPP: {{datas.WhatsApp}}</view>
|
||||
<view v-if="datas.address!=''">公司: {{datas.address}}</view>
|
||||
<view v-if="datas.describe!=''">备注: {{datas.describe}}</view>
|
||||
</view>
|
||||
<view class="edt">
|
||||
<view class="btn" @click="editFn"><image src="/static/image/customer/edit.png" mode=""></image><text> {{$t('edtbtn')}}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Medal')}}</view>
|
||||
<view class="right select" @click="showmagnitude = true">
|
||||
<!-- <input :placeholder="$t('customer.Medalinput')" disabled v-model="magnitude_name" /> -->
|
||||
<view class="" :class="['content2', { placeholder: !magnitude_name }]">{{magnitude_name || $t('customer.Medalinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.CustomerName')}} <text class="red">*</text></view>
|
||||
<view class="right">
|
||||
<input :placeholder="$t('customer.CustomerNameinput')" v-model="form.contacts" />
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('gender')}}</view>
|
||||
<view class="right">
|
||||
<u-radio-group v-model="form.sex">
|
||||
<u-radio :name="Number(0)">{{$t('gender0')}}</u-radio>
|
||||
<u-radio :name="Number(1)" class="u-m-lr-10">{{$t('gender1')}}</u-radio>
|
||||
<u-radio :name="Number(2)">{{$t('gender2')}}</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('mine.lxcall')}} <text class="red">*</text></view>
|
||||
<view class="right">
|
||||
<input :placeholder="$t('mine.lxcallinputhd')" v-model="form.phone" />
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">Email</view>
|
||||
<view class="right">
|
||||
<input :placeholder="$t('customer.Emailinput')" v-model="form.email" />
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">WhatsApp</view>
|
||||
<view class="right">
|
||||
<input :placeholder="$t('customer.WhatsAppinput')" v-model="form.WhatsApp" />
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Customerph')}}</view>
|
||||
<view class="right select" @click="showcartype = true">
|
||||
<!-- <input :placeholder="$t('customer.Customerphinput')" disabled v-model="car_type_name" /> -->
|
||||
<view class="" :class="['content2', { placeholder: !car_type_name }]">{{car_type_name || $t('customer.Customerphinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Cstomerfj')}}</view>
|
||||
<view class="right select" @click="showgrade = true">
|
||||
@@ -76,31 +35,6 @@
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Country')}}</view>
|
||||
<view class="right select" @click="showarea = true">
|
||||
<!-- <input :placeholder="$t('customer.Countryinput')" disabled v-model="country_name" /> -->
|
||||
<view class="" :class="['content2', { placeholder: !country_name }]">{{country_name || $t('customer.Countryinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Company')}}</view>
|
||||
<view class="right select" @click="gomap">
|
||||
<!-- <input :placeholder="$t('customer.Companyinput')" type="text" disabled v-model="form.address"/> -->
|
||||
<view class="" :class="['content2', { placeholder: !address }]">{{address || $t('customer.Companyinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell1">
|
||||
<view class="item">{{$t('customer.Remarks')}}</view>
|
||||
<view class="">
|
||||
<textarea auto-height v-model="form.describe" :placeholder="$t('customer.Remarksinputhd')"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#F6F6F6"></u-gap>
|
||||
<view class="steps">
|
||||
@@ -141,14 +75,10 @@
|
||||
<empty :list="followList"></empty>
|
||||
</view>
|
||||
<view class="zw"></view>
|
||||
<view class="foot">
|
||||
<!-- <view class="foot">
|
||||
<button class="btn" @click="nextFn">{{$t('submit')}}</button>
|
||||
</view>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexqd" :show="showchannel" @cancel="cancel('showchannel')" @close="close('showchannel')" :columns="channelList" keyName="name" @confirm="channelChange"></u-picker>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexsj" :show="showmagnitude" @cancel="cancel('showmagnitude')" @close="close('showmagnitude')" :columns="magnitudeList" keyName="name" @confirm="magnitudeChange"></u-picker>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')":defaultIndex="defaultIndexph" :show="showcartype" @cancel="cancel('showcartype')" @close="close('showcartype')" :columns="carTypeList" keyName="name" @confirm="cartypesChange"></u-picker>
|
||||
</view> -->
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexfj" :show="showgrade" @cancel="cancel('showgrade')" @close="close('showgrade')" :columns="getGradeList" keyName="name" @confirm="gradeHandler"></u-picker>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexgj" :show="showarea" @cancel="cancel('showarea')" @close="close('showarea')" :columns="areaList" keyName="name" @confirm="areaChange"></u-picker>
|
||||
|
||||
<!-- <u-popup :show="showmap" :round="10" mode="bottom" @close="mapclose">
|
||||
<view class="mapcont">
|
||||
@@ -178,40 +108,12 @@
|
||||
showcartype: false,
|
||||
showchannel: false,
|
||||
showarea: false,
|
||||
getGradeList:[],
|
||||
carTypeList:[],
|
||||
channelList:[],
|
||||
magnitudeList:[],
|
||||
getGradeList1:[],
|
||||
carTypeLis1:[],
|
||||
channelList1:[],
|
||||
magnitudeList1:[],
|
||||
areaList1:[],
|
||||
areaList:[],
|
||||
getGradeList:[],
|
||||
grade_name:'',
|
||||
car_type_name:'',
|
||||
country_name:'',
|
||||
channel_name:'',
|
||||
magnitude_name:'',
|
||||
defaultIndexqd:[0],
|
||||
defaultIndexsj:[0],
|
||||
defaultIndexph:[0],
|
||||
defaultIndexfj:[0],
|
||||
defaultIndexgj:[0],
|
||||
form: {
|
||||
contacts: '',
|
||||
sex: 0,
|
||||
phone: '',
|
||||
email: '',
|
||||
describe: '',
|
||||
grade:'',
|
||||
country_id:'',
|
||||
car_type_id:'',
|
||||
channel_id:'',
|
||||
magnitude:'',
|
||||
address:'',
|
||||
lat:'',
|
||||
lng:'',
|
||||
},
|
||||
datas:''
|
||||
|
||||
@@ -221,11 +123,7 @@
|
||||
console.log(options);
|
||||
this.id = options.id;
|
||||
var that = this
|
||||
this.getChannel()
|
||||
this.getMagnitude()
|
||||
this.getGrade()
|
||||
this.carType()
|
||||
this.area()
|
||||
this.customerdetailfn()
|
||||
|
||||
},
|
||||
@@ -250,36 +148,12 @@
|
||||
},
|
||||
select(){
|
||||
var that=this;
|
||||
that.channelList1.forEach((item,index) => {
|
||||
if(item.id == that.form.channel_id){
|
||||
that.channel_name = item.name
|
||||
that.defaultIndexqd=[index]
|
||||
}
|
||||
})
|
||||
that.getGradeList1.forEach((item,index) => {
|
||||
if(item.id == that.form.grade){
|
||||
that.grade_name = item.name
|
||||
that.defaultIndexfj=[index]
|
||||
}
|
||||
})
|
||||
that.carTypeList1.forEach((item,index) => {
|
||||
if(item.id == that.form.car_type_id){
|
||||
that.car_type_name = item.name
|
||||
that.defaultIndexph=[index]
|
||||
}
|
||||
})
|
||||
that.magnitudeList1.forEach((item,index) => {
|
||||
if(item.id == that.form.magnitude){
|
||||
that.magnitude_name = item.name
|
||||
that.defaultIndexsj=[index]
|
||||
}
|
||||
})
|
||||
that.areaList1.forEach((item,index) => {
|
||||
if(item.id == that.form.country_id){
|
||||
that.country_name = item.name
|
||||
that.defaultIndexgj=[index]
|
||||
}
|
||||
})
|
||||
},
|
||||
//客户详情
|
||||
customerdetailfn(){
|
||||
@@ -321,17 +195,6 @@
|
||||
mapconfirm(){
|
||||
this.showmap = false
|
||||
},
|
||||
//渠道
|
||||
getChannel(){
|
||||
request({
|
||||
url:'customer/getChannel',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.channelList1 = list
|
||||
this.channelList = [list]
|
||||
})
|
||||
},
|
||||
//客户等级
|
||||
getGrade(){
|
||||
request({
|
||||
@@ -343,68 +206,31 @@
|
||||
this.getGradeList1 = list
|
||||
})
|
||||
},
|
||||
//偏好
|
||||
carType(){
|
||||
request({
|
||||
url:'carType/getAll',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.carTypeList1 = list
|
||||
this.carTypeList = [list]
|
||||
})
|
||||
},
|
||||
//国家
|
||||
area(){
|
||||
request({
|
||||
url:'area/getCountry',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.areaList1 = list
|
||||
this.areaList = [list]
|
||||
})
|
||||
},
|
||||
//商机
|
||||
getMagnitude(){
|
||||
request({
|
||||
url:'customer/getMagnitude',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.magnitudeList1 = list
|
||||
this.magnitudeList = [list]
|
||||
})
|
||||
},
|
||||
//商机切换事件
|
||||
magnitudeChange(val){
|
||||
this.form.magnitude = val.value[0].id
|
||||
this.magnitude_name = val.value[0].name
|
||||
this.showmagnitude = false
|
||||
},
|
||||
//通道切换事件
|
||||
channelChange(val){
|
||||
this.form.channel_id = val.value[0].id
|
||||
this.channel_name = val.value[0].name
|
||||
this.showchannel = false
|
||||
},
|
||||
//客户等级切换事件
|
||||
gradeHandler(val){
|
||||
this.form.grade = val.value[0].id
|
||||
this.grade_name = val.value[0].name
|
||||
this.showgrade = false
|
||||
},
|
||||
//国家切换事件
|
||||
areaChange(val){
|
||||
this.form.country_id = val.value[0].id
|
||||
this.country_name = val.value[0].name
|
||||
this.showarea = false
|
||||
},
|
||||
//偏好切换事件
|
||||
cartypesChange(val){
|
||||
this.form.car_type_id = val.value[0].id
|
||||
this.car_type_name = val.value[0].name
|
||||
this.showcartype = false
|
||||
request({
|
||||
url:'customer/grade',
|
||||
method:'post',
|
||||
data:{
|
||||
id:this.id,
|
||||
grade:this.form.grade
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
// if(res.data.code ==0){
|
||||
// setTimeout(() => {
|
||||
// uni.reLaunch({
|
||||
// url: '/pages/index/customer',// 替换为你要跳转的页面路径
|
||||
// });
|
||||
// }, 1000);
|
||||
// }
|
||||
})
|
||||
},
|
||||
cancel(val){
|
||||
this[val] = false
|
||||
@@ -412,6 +238,11 @@
|
||||
close(val){
|
||||
this[val] = false
|
||||
},
|
||||
editFn(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/customer/editdetile?id='+this.id
|
||||
});
|
||||
},
|
||||
nextFn(){
|
||||
request({
|
||||
url:'customer/save',
|
||||
@@ -459,10 +290,6 @@
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
.content{
|
||||
padding-top: 10px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.cell{
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -472,20 +299,14 @@
|
||||
font-weight: 500;
|
||||
.item{
|
||||
width: 90px;
|
||||
color: #666666;
|
||||
}
|
||||
background: #f6f6f6;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.arrowright{
|
||||
margin-right: -15px;
|
||||
}
|
||||
.cell1{
|
||||
font-size: 32rpx;
|
||||
padding: 18px 20px;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
.item{
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
text-align: right;
|
||||
}
|
||||
@@ -494,6 +315,85 @@
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.content{
|
||||
padding: 10px 15px;
|
||||
background: #FFFFFF;
|
||||
.contents{
|
||||
background-color:#F6F6F6;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
.edt{
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
padding-bottom: 10px;
|
||||
image{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
color: #3471FF;
|
||||
text-align: right;
|
||||
padding: 0px 15px 0px;
|
||||
}
|
||||
.top{
|
||||
padding: 10px 15px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tag{
|
||||
color: white;
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
padding: 3px 10px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.medal{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.name{
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.cont{
|
||||
padding: 0px 15px 10px;
|
||||
font-size: 24rpx;
|
||||
|
||||
.title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #222222;
|
||||
}
|
||||
.ststus{
|
||||
color: #666666;
|
||||
}
|
||||
.info,.desc{
|
||||
color: #78758E;
|
||||
line-height: 26px;
|
||||
}
|
||||
.sex{
|
||||
margin-right: 5px;
|
||||
}
|
||||
.addr{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.type{
|
||||
margin-left: 5px;
|
||||
color: #3471FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps{
|
||||
padding: 15px;
|
||||
background: #fff;
|
||||
@@ -527,20 +427,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot{
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
background: #FFFFFF;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn{
|
||||
background: linear-gradient(to right, #3471FF, #6776FF);
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 92%;
|
||||
margin-bottom: 40px;
|
||||
margin: 15px 4%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,477 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" :title="$t('navbar.customerinfo')"></uni-nav-bar>
|
||||
<view class="content">
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.CustomerChannel')}}</view>
|
||||
<view class="right select" @click="showchannel = true">
|
||||
<!-- <input :placeholder="$t('customer.CustomerChannelinput')" disabled v-model="channel_name" /> -->
|
||||
<view class="" :class="['content2', { placeholder: !channel_name }]">{{channel_name || $t('customer.CustomerChannelinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Medal')}}</view>
|
||||
<view class="right select" @click="showmagnitude = true">
|
||||
<!-- <input :placeholder="$t('customer.Medalinput')" disabled v-model="magnitude_name" /> -->
|
||||
<view class="" :class="['content2', { placeholder: !magnitude_name }]">{{magnitude_name || $t('customer.Medalinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.CustomerName')}} <text class="red">*</text></view>
|
||||
<view class="right">
|
||||
<input :placeholder="$t('customer.CustomerNameinput')" v-model="form.contacts" />
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('gender')}}</view>
|
||||
<view class="right">
|
||||
<u-radio-group v-model="form.sex">
|
||||
<u-radio :name="Number(0)">{{$t('gender0')}}</u-radio>
|
||||
<u-radio :name="Number(1)" class="u-m-lr-10">{{$t('gender1')}}</u-radio>
|
||||
<u-radio :name="Number(2)">{{$t('gender2')}}</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('mine.lxcall')}} <text class="red">*</text></view>
|
||||
<view class="right">
|
||||
<input :placeholder="$t('mine.lxcallinputhd')" v-model="form.phone" />
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">Email</view>
|
||||
<view class="right">
|
||||
<input :placeholder="$t('customer.Emailinput')" v-model="form.email" />
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">WhatsApp</view>
|
||||
<view class="right">
|
||||
<input :placeholder="$t('customer.WhatsAppinput')" v-model="form.WhatsApp" />
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Customerph')}}</view>
|
||||
<view class="right select" @click="showcartype = true">
|
||||
<!-- <input :placeholder="$t('customer.Customerphinput')" disabled v-model="car_type_name" /> -->
|
||||
<view class="" :class="['content2', { placeholder: !car_type_name }]">{{car_type_name || $t('customer.Customerphinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Cstomerfj')}}</view>
|
||||
<view class="right select" @click="showgrade = true">
|
||||
<view class="" :class="['content2', { placeholder: !grade_name }]">{{grade_name || $t('customer.Cstomerfjinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view> -->
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Country')}}</view>
|
||||
<view class="right select" @click="showarea = true">
|
||||
<!-- <input :placeholder="$t('customer.Countryinput')" disabled v-model="country_name" /> -->
|
||||
<view class="" :class="['content2', { placeholder: !country_name }]">{{country_name || $t('customer.Countryinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.Company')}}</view>
|
||||
<view class="right select" @click="gomap">
|
||||
<!-- <input :placeholder="$t('customer.Companyinput')" type="text" disabled v-model="form.address"/> -->
|
||||
<view class="" :class="['content2', { placeholder: !form.address }]">{{form.address || $t('customer.Companyinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-line></u-line>
|
||||
<view class="cell1">
|
||||
<view class="item">{{$t('customer.Remarks')}}</view>
|
||||
<view class="">
|
||||
<textarea auto-height v-model="form.describe" :placeholder="$t('customer.Remarksinputhd')"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zw"></view>
|
||||
<view class="foot">
|
||||
<button class="btn" @click="nextFn">{{$t('submit')}}</button>
|
||||
</view>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexqd" :show="showchannel" @cancel="cancel('showchannel')" @close="close('showchannel')" :columns="channelList" keyName="name" @confirm="channelChange"></u-picker>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexsj" :show="showmagnitude" @cancel="cancel('showmagnitude')" @close="close('showmagnitude')" :columns="magnitudeList" keyName="name" @confirm="magnitudeChange"></u-picker>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')":defaultIndex="defaultIndexph" :show="showcartype" @cancel="cancel('showcartype')" @close="close('showcartype')" :columns="carTypeList" keyName="name" @confirm="cartypesChange"></u-picker>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexfj" :show="showgrade" @cancel="cancel('showgrade')" @close="close('showgrade')" :columns="getGradeList" keyName="name" @confirm="gradeHandler"></u-picker>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexgj" :show="showarea" @cancel="cancel('showarea')" @close="close('showarea')" :columns="areaList" keyName="name" @confirm="areaChange"></u-picker>
|
||||
|
||||
<!-- <u-popup :show="showmap" :round="10" mode="bottom" @close="mapclose">
|
||||
<view class="mapcont">
|
||||
<view class="header">
|
||||
<view class="cancel" @click="mapclose">取消</view>
|
||||
<view class="title">地图位置</view>
|
||||
<view class="confirm" @click="mapconfirm">确定</view>
|
||||
</view>
|
||||
<view class="map">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</u-popup> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id:'',
|
||||
followList:[],
|
||||
showmap: false,
|
||||
showmagnitude: false,
|
||||
showgrade: false,
|
||||
showcartype: false,
|
||||
showchannel: false,
|
||||
showarea: false,
|
||||
getGradeList:[],
|
||||
carTypeList:[],
|
||||
channelList:[],
|
||||
magnitudeList:[],
|
||||
getGradeList1:[],
|
||||
carTypeLis1:[],
|
||||
channelList1:[],
|
||||
magnitudeList1:[],
|
||||
areaList1:[],
|
||||
areaList:[],
|
||||
grade_name:'',
|
||||
car_type_name:'',
|
||||
country_name:'',
|
||||
channel_name:'',
|
||||
magnitude_name:'',
|
||||
defaultIndexqd:[0],
|
||||
defaultIndexsj:[0],
|
||||
defaultIndexph:[0],
|
||||
defaultIndexfj:[0],
|
||||
defaultIndexgj:[0],
|
||||
form: {
|
||||
contacts: '',
|
||||
sex: 0,
|
||||
phone: '',
|
||||
email: '',
|
||||
describe: '',
|
||||
grade:'',
|
||||
country_id:'',
|
||||
car_type_id:'',
|
||||
channel_id:'',
|
||||
magnitude:'',
|
||||
address:'',
|
||||
lat:'',
|
||||
lng:'',
|
||||
},
|
||||
datas:''
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options);
|
||||
this.id = options.id;
|
||||
var that = this
|
||||
this.getChannel()
|
||||
this.getMagnitude()
|
||||
// this.getGrade()
|
||||
this.carType()
|
||||
this.area()
|
||||
this.customerdetailfn()
|
||||
|
||||
},
|
||||
onShow() {
|
||||
if(uni.getStorageSync('location')){
|
||||
this.location = JSON.parse(uni.getStorageSync('location'))
|
||||
this.form.address = this.location.address
|
||||
this.form.lng = this.location.lng
|
||||
this.form.lat = this.location.lat
|
||||
console.log(this.location)
|
||||
}
|
||||
this.followlistfn()
|
||||
},
|
||||
methods: {
|
||||
leftClick(){
|
||||
uni.navigateBack({})
|
||||
},
|
||||
gomap(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/customer/map'
|
||||
});
|
||||
},
|
||||
select(){
|
||||
var that=this;
|
||||
that.channelList1.forEach((item,index) => {
|
||||
if(item.id == that.form.channel_id){
|
||||
that.channel_name = item.name
|
||||
that.defaultIndexqd=[index]
|
||||
}
|
||||
})
|
||||
// that.getGradeList1.forEach((item,index) => {
|
||||
// if(item.id == that.form.grade){
|
||||
// that.grade_name = item.name
|
||||
// that.defaultIndexfj=[index]
|
||||
// }
|
||||
// })
|
||||
that.carTypeList1.forEach((item,index) => {
|
||||
if(item.id == that.form.car_type_id){
|
||||
that.car_type_name = item.name
|
||||
that.defaultIndexph=[index]
|
||||
}
|
||||
})
|
||||
that.magnitudeList1.forEach((item,index) => {
|
||||
if(item.id == that.form.magnitude){
|
||||
that.magnitude_name = item.name
|
||||
that.defaultIndexsj=[index]
|
||||
}
|
||||
})
|
||||
that.areaList1.forEach((item,index) => {
|
||||
if(item.id == that.form.country_id){
|
||||
that.country_name = item.name
|
||||
that.defaultIndexgj=[index]
|
||||
console.log(that.country_name)
|
||||
}
|
||||
})
|
||||
},
|
||||
//客户详情
|
||||
customerdetailfn(){
|
||||
var that=this;
|
||||
request({
|
||||
url:'customer/detail',
|
||||
method:'get',
|
||||
data: {
|
||||
id:this.id,
|
||||
}
|
||||
}).then(res => {
|
||||
that.datas = res.data.data
|
||||
that.form = res.data.data
|
||||
that.select()
|
||||
})
|
||||
},
|
||||
// 跟进记录
|
||||
followlistfn(){
|
||||
request({
|
||||
url:'follow/list',
|
||||
method:'get',
|
||||
data: {
|
||||
customer_id:this.id,
|
||||
}
|
||||
}).then(res => {
|
||||
this.followList = res.data.data
|
||||
console.log(res.data.data)
|
||||
})
|
||||
},
|
||||
//添加跟进
|
||||
followupFn(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/customer/followup?id='+this.id
|
||||
});
|
||||
},
|
||||
mapclose(){
|
||||
this.showmap = false
|
||||
},
|
||||
mapconfirm(){
|
||||
this.showmap = false
|
||||
},
|
||||
//渠道
|
||||
getChannel(){
|
||||
request({
|
||||
url:'customer/getChannel',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.channelList1 = list
|
||||
this.channelList = [list]
|
||||
})
|
||||
},
|
||||
//客户等级
|
||||
getGrade(){
|
||||
request({
|
||||
url:'customer/getGrade',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.getGradeList = [list]
|
||||
this.getGradeList1 = list
|
||||
})
|
||||
},
|
||||
//偏好
|
||||
carType(){
|
||||
request({
|
||||
url:'carType/getAll',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.carTypeList1 = list
|
||||
this.carTypeList = [list]
|
||||
})
|
||||
},
|
||||
//国家
|
||||
area(){
|
||||
request({
|
||||
url:'area/getCountry',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.areaList1 = list
|
||||
this.areaList = [list]
|
||||
this.select()
|
||||
})
|
||||
},
|
||||
//商机
|
||||
getMagnitude(){
|
||||
request({
|
||||
url:'customer/getMagnitude',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.magnitudeList1 = list
|
||||
this.magnitudeList = [list]
|
||||
})
|
||||
},
|
||||
//商机切换事件
|
||||
magnitudeChange(val){
|
||||
this.form.magnitude = val.value[0].id
|
||||
this.magnitude_name = val.value[0].name
|
||||
this.showmagnitude = false
|
||||
},
|
||||
//通道切换事件
|
||||
channelChange(val){
|
||||
this.form.channel_id = val.value[0].id
|
||||
this.channel_name = val.value[0].name
|
||||
this.showchannel = false
|
||||
},
|
||||
//客户等级切换事件
|
||||
gradeHandler(val){
|
||||
this.form.grade = val.value[0].id
|
||||
this.grade_name = val.value[0].name
|
||||
this.showgrade = false
|
||||
},
|
||||
//国家切换事件
|
||||
areaChange(val){
|
||||
this.form.country_id = val.value[0].id
|
||||
this.country_name = val.value[0].name
|
||||
this.showarea = false
|
||||
},
|
||||
//偏好切换事件
|
||||
cartypesChange(val){
|
||||
this.form.car_type_id = val.value[0].id
|
||||
this.car_type_name = val.value[0].name
|
||||
this.showcartype = false
|
||||
},
|
||||
cancel(val){
|
||||
this[val] = false
|
||||
},
|
||||
close(val){
|
||||
this[val] = false
|
||||
},
|
||||
nextFn(){
|
||||
request({
|
||||
url:'customer/save',
|
||||
method:'post',
|
||||
data:this.form
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
if(res.data.code ==0){
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/customer',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.u-m-lr-10{
|
||||
margin: 0px 10px;
|
||||
}
|
||||
.placeholder {
|
||||
color: #999; /* 占位符颜色 */
|
||||
}
|
||||
textarea {
|
||||
min-height: 200rpx;// 设置默认高度 ，解决设置自适应高度之后高度无效问题
|
||||
margin-top: 15px;
|
||||
background-color: #F6F6F6;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.red{
|
||||
color: red;
|
||||
}
|
||||
.zw{
|
||||
height: 120px;
|
||||
}
|
||||
.uniui-right{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
.content{
|
||||
padding-top: 10px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.cell{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding: 18px 20px;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
.item{
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
.arrowright{
|
||||
margin-right: -15px;
|
||||
}
|
||||
.cell1{
|
||||
font-size: 32rpx;
|
||||
padding: 18px 20px;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
.item{
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
text-align: right;
|
||||
}
|
||||
.select{
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.foot{
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
background: #FFFFFF;
|
||||
z-index: 1;
|
||||
}
|
||||
.btn{
|
||||
background: linear-gradient(to right, #3471FF, #6776FF);
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 92%;
|
||||
margin-bottom: 40px;
|
||||
margin: 15px 4%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" :title="$t('subsuccess')"></uni-nav-bar>
|
||||
<view class="contents">
|
||||
<image src="/static/image/customer/success.png" mode=""></image>
|
||||
<view class="">{{$t('subsuccess')}}</view>
|
||||
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#F6F6F6"></u-gap>
|
||||
<view class="cont">
|
||||
<view>{{$t('nexttime')}}</view>
|
||||
<view class="coll">
|
||||
<u-row justify="space-between" gutter="10">
|
||||
<u-col span="4">
|
||||
<view class="item" :class="{ active: actives=='1' }" @click="active('1')">
|
||||
{{$t('onedaygj')}}
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<view class="item" :class="{ active: actives=='3' }" @click="active('3')">
|
||||
{{$t('threedaygj')}}
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<view class="item" :class="{ active: actives=='7' }" @click="active('7')">
|
||||
{{$t('sevendaygj')}}
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
<view class="coll">
|
||||
<view class="item" :class="{ active: actives=='auto' }" @click="active('auto')">
|
||||
{{time || $t('autodaygj')}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<button class="btn" @click="nextFn">{{$t('submit')}}</button>
|
||||
</view>
|
||||
<u-datetime-picker
|
||||
:show="shownexttime"
|
||||
closeOnClickOverlay
|
||||
v-model="nexttime"
|
||||
mode="datetime"
|
||||
@confirm="confirmnext"
|
||||
@cancel="cancelnext"
|
||||
@close="close('shownexttime')"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id:'',
|
||||
actives:'',
|
||||
time:'',
|
||||
shownexttime:false,
|
||||
nexttime: Number(new Date()),
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options);
|
||||
this.id = options.id;
|
||||
},
|
||||
methods: {
|
||||
leftClick(){
|
||||
uni.navigateBack({})
|
||||
},
|
||||
active(item){
|
||||
console.log(item)
|
||||
if(item=='auto'){
|
||||
this.shownexttime = true
|
||||
}
|
||||
this.actives = item
|
||||
},
|
||||
result(time, mode) {
|
||||
const timeFormat = uni.$u.timeFormat
|
||||
switch (mode) {
|
||||
case 'datetime':
|
||||
return timeFormat(time, 'yyyy-mm-dd hh:MM')
|
||||
case 'date':
|
||||
return timeFormat(time, 'yyyy-mm-dd')
|
||||
case 'year-month':
|
||||
return timeFormat(time, 'yyyy-mm')
|
||||
case 'time':
|
||||
return time
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
cancelnext() {
|
||||
this.shownexttime = false
|
||||
},
|
||||
confirmnext(e) {
|
||||
this.shownexttime = false
|
||||
this.nexttime = e.value
|
||||
this.time = this.result(e.value, e.mode)
|
||||
console.log(this.nexttime)
|
||||
},
|
||||
getLaterDate(dayNum, dateTime = null) {
|
||||
// 如果为null,则格式化当前时间为时间戳
|
||||
if (!dateTime) dateTime = +new Date();
|
||||
// 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
|
||||
if (dateTime.toString().length == 10) dateTime *= 1000;
|
||||
const timestamp = +new Date(Number(dateTime));
|
||||
|
||||
const one_day = 86400000; // 24 * 60 * 60 * 1000;
|
||||
const addVal = dayNum * one_day + timestamp;
|
||||
//x天后的日期
|
||||
const date = new Date(addVal);
|
||||
|
||||
//格式化日期
|
||||
const filters = n => {
|
||||
return n < 10 ? (n = '0' + n) : n;
|
||||
};
|
||||
const month = filters(date.getMonth() + 1);
|
||||
const day = filters(date.getDate());
|
||||
const hours = filters(date.getHours());
|
||||
const minutes = filters(date.getMinutes());
|
||||
const seconds = filters(date.getSeconds());
|
||||
const lastTime = `${date.getFullYear()}/${month}/${day} ${hours}:${minutes}:${seconds}`;
|
||||
// console.log(lastTime)
|
||||
return addVal;
|
||||
},
|
||||
nextFn(){
|
||||
var nexttime=this.nexttime;
|
||||
if(this.actives==1){
|
||||
nexttime = this.getLaterDate(1)
|
||||
}
|
||||
if(this.actives==3){
|
||||
nexttime = this.getLaterDate(3)
|
||||
}
|
||||
if(this.actives==7){
|
||||
nexttime = this.getLaterDate(7)
|
||||
}
|
||||
console.log(nexttime)
|
||||
request({
|
||||
url:'customer/followNext',
|
||||
method:'post',
|
||||
data:{
|
||||
id:this.id,
|
||||
follow_next:nexttime/1000
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
if(res.data.code ==0){
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/customer',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.contents{
|
||||
text-align: center;
|
||||
padding-bottom: 15px;
|
||||
image{
|
||||
margin-top: 20px;
|
||||
width:392rpx;
|
||||
height:308rpx;
|
||||
}
|
||||
}
|
||||
.cont{
|
||||
padding: 15px;
|
||||
}
|
||||
.active{
|
||||
color: white !important;
|
||||
background: linear-gradient(to right, #3471FF, #6776FF) !important;
|
||||
}
|
||||
.coll{
|
||||
margin-top: 10px;
|
||||
.item{
|
||||
background: #ECF2FF;
|
||||
color: #3471FF;
|
||||
border-radius: 8px;
|
||||
padding:10px 0px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
background: linear-gradient(to right, #3471FF, #6776FF);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
width: 92%;
|
||||
margin-bottom: 40px;
|
||||
margin: 15px 4%;
|
||||
}
|
||||
</style>
|
||||
+206
-10
@@ -1,6 +1,36 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" :title="$t('navbar.addfollowup')"></uni-nav-bar>
|
||||
<view class="contents" >
|
||||
<view class="top">
|
||||
<view class="name">{{userdatas.contacts}}</view>
|
||||
<view class="right">
|
||||
<text class="medal" :style="{color:(userdatas.magnitude == 0 ?'#F5AB00' : userdatas.magnitude == 1 ?'#8495B8': '#9B7200')}">{{userdatas.magnitude_txt}}</text>
|
||||
<text class="tag" :style="{background:(userdatas.follow == 0 ?'#3471FF' : userdatas.follow == 1 ?'#27C89C': '#FF4040')}">{{userdatas.follow_txt}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-line margin="20rpx 0px" color="#fff" :hairline="false"></u-line>
|
||||
<view class="cont">
|
||||
<view class="title">
|
||||
<view class=""><text class="name">{{userdatas.phone}}</text></view>
|
||||
<view class="ststus">渠道：{{userdatas.channel_name}}</view>
|
||||
</view>
|
||||
<view class="info"><text class="sex">{{userdatas.sex_txt}}</text> | <text class="addr">{{userdatas.country_name}}</text><text class="type">{{userdatas.car_type_name}}</text>
|
||||
</view>
|
||||
<view v-if="userdatas.email!=''">Email: {{userdatas.email}}</view>
|
||||
<view v-if="userdatas.WhatsApp!=''">WhatsAPP: {{userdatas.WhatsApp}}</view>
|
||||
<view v-if="userdatas.address!=''">公司: {{userdatas.address}}</view>
|
||||
<view v-if="userdatas.describe!=''">备注: {{userdatas.describe}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell2">
|
||||
<view class="item">{{$t('customer.Cstomerfj')}}</view>
|
||||
<view class="right select" @click="showgrade = true">
|
||||
<view class="" :class="['content2', { placeholder: !grade_name }]">{{grade_name || $t('customer.Cstomerfjinput')}}</view>
|
||||
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="10" bgColor="#F6F6F6"></u-gap>
|
||||
<view class="content">
|
||||
<view class="cell">
|
||||
<view class="item">{{$t('customer.followtype')}}</view>
|
||||
@@ -49,7 +79,7 @@
|
||||
<view>{{$t('customer.Visitcontent')}}</view>
|
||||
<view class="yuyin">
|
||||
<textarea auto-height v-model="form.audio_text" :placeholder="$t('customer.Visiinputhd')"/>
|
||||
<image src="/static/image/customer/yuyin.png" mode="" @tap="startRecognizebd"></image>
|
||||
<!-- <image src="/static/image/customer/yuyin.png" mode="" @tap="startRecognizebd"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
<u-line v-if="form.type==0"></u-line>
|
||||
@@ -96,17 +126,19 @@
|
||||
</view>
|
||||
<u-gap height="100" bgColor="#fff"></u-gap>
|
||||
<view class="foot">
|
||||
<button class="btn1" @click="shownexttime=true">{{$t('customer.NextReminder')}}</button>
|
||||
<!-- <button class="btn1" @click="shownexttime=true">{{$t('customer.NextReminder')}}</button> -->
|
||||
<button class="btn" @click="nextFn">{{$t('submit')}}</button>
|
||||
</view>
|
||||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexfj" :show="showgrade" @cancel="cancel('showgrade')" @close="close('showgrade')" :columns="getGradeList" keyName="name" @confirm="gradeHandler"></u-picker>
|
||||
|
||||
<u-datetime-picker
|
||||
:show="show"
|
||||
closeOnClickOverlay
|
||||
v-model="firstFollow"
|
||||
mode="datetime"
|
||||
@confirm="confirm"
|
||||
@cancel="cancel"
|
||||
@change="change"
|
||||
@cancel="cancel('show')"
|
||||
@close="close('show')"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
@@ -128,10 +160,16 @@
|
||||
return {
|
||||
id:'',
|
||||
show:false,
|
||||
showgrade:false,
|
||||
shownexttime:false,
|
||||
firstFollow: Number(new Date()),
|
||||
nexttime: Number(new Date()),
|
||||
followList:[],
|
||||
getGradeList1:[],
|
||||
getGradeList:[],
|
||||
grade_name:'',
|
||||
defaultIndexfj:[0],
|
||||
grade:'',
|
||||
form: {
|
||||
customer_id:'',
|
||||
type: '1',
|
||||
@@ -143,7 +181,8 @@
|
||||
remark:'',
|
||||
picture:''
|
||||
},
|
||||
datas:''
|
||||
datas:'',
|
||||
userdatas:''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -151,7 +190,9 @@
|
||||
this.id = options.id;
|
||||
this.form.customer_id = options.id;
|
||||
var that = this
|
||||
this.getGrade()
|
||||
this.getlocahost()
|
||||
this.customerdetailfn()
|
||||
this.followlistfn()
|
||||
},
|
||||
methods: {
|
||||
@@ -161,6 +202,66 @@
|
||||
close(val){
|
||||
this[val]=false
|
||||
},
|
||||
selectgd(){
|
||||
var that=this;
|
||||
that.getGradeList1.forEach((item,index) => {
|
||||
if(item.id == that.userdatas.grade){
|
||||
that.grade_name = item.name
|
||||
that.defaultIndexfj=[index]
|
||||
}
|
||||
})
|
||||
},
|
||||
//客户等级
|
||||
getGrade(){
|
||||
request({
|
||||
url:'customer/getGrade',
|
||||
method:'get',
|
||||
}).then(res => {
|
||||
var list = res.data.data
|
||||
this.getGradeList = [list]
|
||||
this.getGradeList1 = list
|
||||
// this.selectgd()
|
||||
})
|
||||
},
|
||||
//客户等级切换事件
|
||||
gradeHandler(val){
|
||||
this.grade = val.value[0].id
|
||||
this.grade_name = val.value[0].name
|
||||
this.showgrade = false
|
||||
request({
|
||||
url:'customer/grade',
|
||||
method:'post',
|
||||
data:{
|
||||
id:this.id,
|
||||
grade:this.grade
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
icon: 'none'
|
||||
});
|
||||
})
|
||||
},
|
||||
cancel(val){
|
||||
this[val] = false
|
||||
},
|
||||
close(val){
|
||||
this[val] = false
|
||||
},
|
||||
//客户详情
|
||||
customerdetailfn(){
|
||||
var that=this;
|
||||
request({
|
||||
url:'customer/detail',
|
||||
method:'get',
|
||||
data: {
|
||||
id:this.id,
|
||||
}
|
||||
}).then(res => {
|
||||
that.userdatas = res.data.data
|
||||
that.selectgd()
|
||||
})
|
||||
},
|
||||
// 获取当前位置
|
||||
getarrd(longitude,latitude){
|
||||
const apiKey = 'AIzaSyBGvV-vX7C72PEbcYrTdmUj3qrubejWzNw';
|
||||
@@ -227,6 +328,7 @@
|
||||
},
|
||||
//保存跟进
|
||||
nextFn(){
|
||||
|
||||
request({
|
||||
url:'follow/save',
|
||||
method:'post',
|
||||
@@ -238,7 +340,9 @@
|
||||
});
|
||||
if(res.data.code ==0){
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({})
|
||||
uni.navigateTo({
|
||||
url: '/pages/customer/followsuccess?id='+this.id
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
@@ -258,9 +362,6 @@
|
||||
return ''
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.show = false
|
||||
},
|
||||
confirm(e) {
|
||||
this.show = false
|
||||
this.form.firstFollowtime = this.result(e.value, e.mode)
|
||||
@@ -304,7 +405,8 @@
|
||||
uploadfn(imgUrl,name){
|
||||
var that = this;
|
||||
uni.uploadFile({
|
||||
url: 'http://219.157.255.213:9007/upload',
|
||||
// url: 'http://api.crm.hnxinyouhe.com/upload',
|
||||
url: 'http://219.157.255.213:9007',
|
||||
filePath: imgUrl,
|
||||
name: 'files',
|
||||
header:{'content-type': 'application/x-www-form-urlencoded','Authorization': 'Bearer ' + uni.getStorageSync('token')},
|
||||
@@ -414,10 +516,104 @@
|
||||
.u-divider{
|
||||
margin: 0px 0px !important;
|
||||
}
|
||||
.contents{
|
||||
background-color:#F6F6F6;
|
||||
border-radius: 10px;
|
||||
margin: 0px 15px 10px;
|
||||
.edt{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn{
|
||||
background: linear-gradient(to right, #3471FF, #6776FF);
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
padding: 4px 0px;
|
||||
}
|
||||
.top{
|
||||
padding: 10px 15px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tag{
|
||||
color: white;
|
||||
border-radius: 20px 0px 0px 20px;
|
||||
padding: 3px 10px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.medal{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.name{
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.cont{
|
||||
padding: 0px 15px 10px;
|
||||
font-size: 24rpx;
|
||||
|
||||
.title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #222222;
|
||||
}
|
||||
.ststus{
|
||||
color: #666666;
|
||||
}
|
||||
.info,.desc{
|
||||
color: #78758E;
|
||||
line-height: 26px;
|
||||
}
|
||||
.sex{
|
||||
margin-right: 5px;
|
||||
}
|
||||
.addr{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.type{
|
||||
margin-left: 5px;
|
||||
color: #3471FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding-top: 10px;
|
||||
background: #FFFFFF;
|
||||
// height: calc(100vh - 44px);
|
||||
|
||||
}
|
||||
.cell2{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
padding: 18px 20px;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
margin: 0px 15px 10px;
|
||||
.item{
|
||||
width: 90px;
|
||||
color: #666666;
|
||||
}
|
||||
background: #f6f6f6;
|
||||
border-radius: 10px;
|
||||
.right{
|
||||
text-align: right;
|
||||
}
|
||||
.select{
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.cell{
|
||||
position: relative;
|
||||
@@ -462,7 +658,7 @@
|
||||
background: linear-gradient(to right, #3471FF, #6776FF);
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
width: 45%;
|
||||
width: 93%;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
margin-top: 20px;
|
||||
|
||||
+96
-125
@@ -2,9 +2,18 @@
|
||||
<view>
|
||||
<view id="map" style="height: 100vh;"></view>
|
||||
<!-- 输入框事件 -->
|
||||
<view class="search-box">
|
||||
<input id="search-box" type="text" v-model="cityInfo.address" @input="ListeningInputBox" placeholder="请输入搜索地址...">
|
||||
<view id="btn">确定</view>
|
||||
<view style="display: flex; padding: 30rpx; position: fixed;width: 93%; background: white; top: 0px;">
|
||||
<input v-model="value" type="text" id="search-box" placeholder="请输入" class="search" @input="getPlacesList" />
|
||||
<view class="btn" @click="nextfn">确定</view>
|
||||
|
||||
</view>
|
||||
<view class="card" v-if="list.length > 0">
|
||||
<view class="item" v-for="(item, index) in list" :key="index">
|
||||
<view @click="confirm(item)">
|
||||
<span class="title">{{item.structured_formatting.main_text}}</span>
|
||||
<span>{{item.structured_formatting.secondary_text}}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -12,13 +21,17 @@
|
||||
import { Loader } from "@googlemaps/js-api-loader";
|
||||
const loader = new Loader({
|
||||
// google服务的KEY
|
||||
apiKey: "AIzaSyBGvV-vX7C72PEbcYrTdmUj3qrubejWzNw",
|
||||
apiKey: "AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I",
|
||||
version: "weekly",
|
||||
libraries: ["places"]
|
||||
});
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
map:'',
|
||||
value: '',
|
||||
// 模糊匹配数据
|
||||
list: [],
|
||||
cityInfo:{
|
||||
lat: '',
|
||||
lng: '',
|
||||
@@ -36,6 +49,50 @@ export default {
|
||||
this.initMap()
|
||||
},
|
||||
methods:{
|
||||
nextfn(){
|
||||
uni.setStorageSync('location',JSON.stringify(this.cityInfo));
|
||||
uni.navigateBack({})
|
||||
},
|
||||
// 模糊查询地址
|
||||
getPlacesList() {
|
||||
var that = this
|
||||
var text = this.value
|
||||
return new Promise(async(resolve, reject) => {
|
||||
if (!text){
|
||||
that.list = []
|
||||
resolve([])
|
||||
}
|
||||
const autocomplete = new google.maps.places.AutocompleteService();
|
||||
autocomplete.getPlacePredictions({ input: text }, function(predictions, status) {
|
||||
that.list = predictions
|
||||
});
|
||||
});
|
||||
},
|
||||
confirm(item){
|
||||
var that = this
|
||||
// var latlng = JSON.parse(JSON.stringify(place.geometry.location))
|
||||
console.log("place===", item.description)
|
||||
that.value = item.description
|
||||
that.cityInfo.address=item.description
|
||||
var geocoder = new google.maps.Geocoder();
|
||||
// var address = document.getElementById("address").value;
|
||||
geocoder.geocode( { 'address': item.description}, function(results, status) {
|
||||
console.log(results)
|
||||
var latlng = JSON.parse(JSON.stringify(results[0].geometry.location))
|
||||
console.log(latlng)
|
||||
// // 将地图中心点指向用户所选位置，并设置标记
|
||||
that.map.setCenter(latlng);
|
||||
that.cityInfo.lat=latlng.lat
|
||||
that.cityInfo.lng=latlng.lng
|
||||
var searchmarker = new google.maps.Marker({
|
||||
map: that.map,
|
||||
position: results[0].geometry.location,
|
||||
title: results[0].formatted_address
|
||||
});
|
||||
|
||||
});
|
||||
that.list =[]
|
||||
},
|
||||
initMap() {
|
||||
var that = this
|
||||
loader
|
||||
@@ -45,7 +102,7 @@ export default {
|
||||
type: 'wgs84', // 默认为 wgs84 坐标系，可选 gcj02
|
||||
success: function (res) {
|
||||
console.log(res)
|
||||
const map = new google.maps.Map(document.getElementById("map"),
|
||||
that.map = new google.maps.Map(document.getElementById("map"),
|
||||
{
|
||||
center: { lat:res.latitude, lng: res.longitude},
|
||||
zoom: 12,// 地图缩放参数
|
||||
@@ -56,7 +113,7 @@ export default {
|
||||
)
|
||||
var marker = new google.maps.Marker({
|
||||
position: { lat:res.latitude, lng: res.longitude},
|
||||
map: map,
|
||||
map: that.map,
|
||||
draggable: true, // 允许拖动标记
|
||||
icon: {
|
||||
url: 'https://now.guua.com/attachs/default/location_shop.png',
|
||||
@@ -68,7 +125,7 @@ export default {
|
||||
// 监听标记拖动事件
|
||||
marker.addListener('dragend', () => {
|
||||
const position = marker.getPosition();
|
||||
map.setCenter(position);
|
||||
that.map.setCenter(position);
|
||||
// 根据标记位置获取地址信息
|
||||
const geocoder = new google.maps.Geocoder();
|
||||
geocoder.geocode({ location: position }, (results, status) => {
|
||||
@@ -78,12 +135,8 @@ export default {
|
||||
that.cityInfo.address = results[0].formatted_address;
|
||||
that.cityInfo.lat = position.lat();
|
||||
that.cityInfo.lng = position.lng();
|
||||
console.log(that.cityInfo)
|
||||
// cityInfo.address = results[0].formatted_address;
|
||||
// updateInfo({
|
||||
// formatted_address: results[0].formatted_address,
|
||||
// geometry: { location: position },
|
||||
// });
|
||||
that.value = results[0].formatted_address;
|
||||
console.log(that.cityInfo)
|
||||
} else {
|
||||
alert('无法获取地址信息');
|
||||
}
|
||||
@@ -102,121 +155,39 @@ export default {
|
||||
.catch((e) => {
|
||||
console.log(e)
|
||||
})
|
||||
},
|
||||
ListeningInputBox() {
|
||||
// 创建 Autocomplete 实例
|
||||
const input = document.getElementById("search-box");
|
||||
const autocomplete = new google.maps.places.AutocompleteService();
|
||||
// 设置 Autocomplete 参数
|
||||
// autocomplete.setFields(["geometry", "name"]);
|
||||
// 添加事件监听器，当用户选择某个地点时，在地图上标记出所选位置
|
||||
// LoadAnimation(true)
|
||||
autocomplete.getPlacePredictions(this.cityInfo.address, function() {
|
||||
const place = autocomplete.getPlace();
|
||||
var latlng = JSON.parse(JSON.stringify(place.geometry.location))
|
||||
console.log("place===", latlng)
|
||||
getAddress(latlng.lat, latlng.lng);
|
||||
if (!place.geometry) {
|
||||
console.log("返回的地理信息无效！");
|
||||
return;
|
||||
}
|
||||
// 将地图中心点指向用户所选位置，并设置标记
|
||||
if (searchmarker) { //去除marker标记点
|
||||
searchmarker.setMap(null)
|
||||
searchmarker = ""
|
||||
}
|
||||
map.setCenter(place.geometry.location);
|
||||
searchmarker = new google.maps.Marker({
|
||||
map: map,
|
||||
position: place.geometry.location,
|
||||
title: place.name,
|
||||
});
|
||||
});
|
||||
},
|
||||
getAddress(latitude, longitude) {
|
||||
var that=this
|
||||
// 根据经纬度发起 Reverse Geocoding API 请求，获取地址信息
|
||||
var geocoder = new google.maps.Geocoder();
|
||||
var latlng = {
|
||||
lat: latitude,
|
||||
lng: longitude
|
||||
};
|
||||
this.cityInfo.lats = latitude
|
||||
this.cityInfo.lng = longitude
|
||||
geocoder.geocode({
|
||||
location: latlng
|
||||
}, function(results, status) {
|
||||
if (status === 'OK') {
|
||||
if (results[0]) {
|
||||
console.log(results[0])
|
||||
for (var i = 0; i < results.length; i++) {
|
||||
var components = results[i].address_components;
|
||||
for (var j = 0; j < components.length; j++) {
|
||||
var component = components[j];
|
||||
if (component.types.includes("country")) {
|
||||
console.log("国家: ====>" + component.long_name);
|
||||
cityInfo.country = component.long_name || '暂无';
|
||||
} else if (component.types.includes("administrative_area_level_1")) {
|
||||
console.log("省/州: ====>" + component.long_name);
|
||||
cityInfo.province = component.long_name || '暂无';
|
||||
} else if (component.types.includes("locality")) {
|
||||
console.log("城市: ====> " + component.long_name);
|
||||
cityInfo.city = component.long_name || '暂无';
|
||||
} else if (component.types.includes("sublocality_level_1")) {
|
||||
console.log("区/县: ====>" + component.long_name);
|
||||
cityInfo.district = component.long_name || '暂无';
|
||||
} else if (component.types.includes("route")) {
|
||||
console.log("路/街道名: ====> " + component.long_name);
|
||||
cityInfo.street = component.long_name || '暂无';
|
||||
} else if (component.types.includes("street_number")) {
|
||||
console.log("门牌号: ====> " + component.long_name);
|
||||
cityInfo.door = component.long_name || '暂无';
|
||||
}
|
||||
}
|
||||
}
|
||||
that.cityInfo.address = results[0].formatted_address;
|
||||
console.log("cityInfo==========", that.cityInfo)
|
||||
|
||||
// addInfo(cityInfo)
|
||||
|
||||
} else {
|
||||
alert('找不到地址信息');
|
||||
}
|
||||
} else {
|
||||
alert('获取地址信息失败：' + status);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.search-box{
|
||||
width: 99%;
|
||||
left: 2%;
|
||||
top: 80px;
|
||||
font-size: 12px;
|
||||
position: fixed;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#search-box {
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0px 1px 3px #ddd;
|
||||
width:70%;
|
||||
background: #fff;
|
||||
}
|
||||
#btn{
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #bbbbbb;
|
||||
border-radius: 6px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.search {
|
||||
flex: 1;
|
||||
height: 70rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-right: 20rpx;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.btn {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #3c9cff;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.card {
|
||||
position: fixed;width: 100%; top:60px;
|
||||
background-color: white;
|
||||
padding: 0 30rpx;
|
||||
.item {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 2rpx solid #ccc;
|
||||
.title {
|
||||
margin-right: 20rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user