xinyouhe/crm-uni
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面接口数据

Browse Source
This commit is contained in:
浅念
2025-03-18 13:32:13 +08:00
parent 7b1332d182
commit 2f861263bd
3 changed files with 245 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/customer/detile.vue
+189 -50
View File
@@ -4,25 +4,36 @@
<view class="content"> <view class="content">
<view class="cell"> <view class="cell">
<view>渠道</view> <view>渠道</view>
<view class="right select" @click="showcartype = true"> <view class="right select" @click="showchannel = true">
<input placeholder="选择渠道" disabled v-model="car_type_name" /> <input placeholder="选择渠道" disabled v-model="channel_name" />
<u-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showcartype" @cancel="cancel('showcartype')" :columns="carTypeList" keyName="name" @confirm="cartypesChange"></u-picker> <u-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexqd" :show="showchannel" @cancel="cancel('showchannel')" :columns="channelList" keyName="name" @confirm="channelChange"></u-picker>
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon> <u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
</view> </view>
</view> </view>
<u-line></u-line>
<view class="cell"> <view class="cell">
<view>客户名称</view> <view>客户商机</view>
<view class="right select" @click="showmagnitude = true">
<input placeholder="选择客户商机" disabled v-model="magnitude_name" />
<u-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexsj" :show="showmagnitude" @cancel="cancel('showmagnitude')" :columns="magnitudeList" keyName="name" @confirm="magnitudeChange"></u-picker>
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
</view>
</view>
<u-line></u-line>
<view class="cell">
<view>客户名称 <text class="red">*</text></view>
<view class="right"> <view class="right">
<input placeholder="输入客户名称" v-model="form.contacts" /> <input placeholder="输入名称" v-model="form.contacts" />
</view> </view>
</view> </view>
<u-line></u-line> <u-line></u-line>
<view class="cell"> <view class="cell">
<view>性别</view> <view>性别</view>
<view class="right"> <view class="right">
<u-radio-group v-model="form.gender"> <u-radio-group v-model="form.sex">
<u-radio name="男">男</u-radio> <u-radio name="0">未知</u-radio>
<u-radio name="女">女</u-radio> <u-radio name="1">男</u-radio>
<u-radio name="2">女</u-radio>
</u-radio-group> </u-radio-group>
</view> </view>
</view> </view>
@@ -52,33 +63,33 @@
<view>客户偏好</view> <view>客户偏好</view>
<view class="right select" @click="showcartype = true"> <view class="right select" @click="showcartype = true">
<input placeholder="选择客户偏好" disabled v-model="car_type_name" /> <input placeholder="选择客户偏好" disabled v-model="car_type_name" />
<u-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showcartype" @cancel="cancel('showcartype')" :columns="carTypeList" keyName="name" @confirm="cartypesChange"></u-picker> <u-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')":defaultIndex="defaultIndexph" :show="showcartype" @cancel="cancel('showcartype')" :columns="carTypeList" keyName="name" @confirm="cartypesChange"></u-picker>
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon> <u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
</view> </view>
</view> </view>
<u-line></u-line> <u-line></u-line>
<view class="cell"> <view class="cell">
<view>客户等级</view> <view>客户分级</view>
<view class="right select" @click="showgrade = true"> <view class="right select" @click="showgrade = true">
<input placeholder="选择客户等级" disabled v-model="grade_name" /> <input placeholder="选择客户分级" disabled v-model="grade_name" />
<u-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showgrade" @cancel="cancel('showgrade')" :columns="getGradeList" keyName="name" @confirm="gradeHandler"></u-picker> <u-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexfj" :show="showgrade" @cancel="cancel('showgrade')" :columns="getGradeList" keyName="name" @confirm="gradeHandler"></u-picker>
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon> <u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
</view> </view>
</view> </view>
<u-line></u-line> <u-line></u-line>
<view class="cell"> <view class="cell">
<view>国家</view> <view>国家</view>
<view class="right select" @click="showenergy = true"> <view class="right select" @click="showarea = true">
<input placeholder="选择国家" disabled v-model="country_name" /> <input placeholder="选择国家" disabled v-model="country_name" />
<u-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showenergy" @cancel="cancel('showenergy')" :columns="areaList" keyName="name" @confirm="areaChange"></u-picker> <u-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexgj" :show="showarea" @cancel="cancel('showarea')" :columns="areaList" keyName="name" @confirm="areaChange"></u-picker>
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon> <u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
</view> </view>
</view> </view>
<u-line></u-line> <u-line></u-line>
<view class="cell"> <view class="cell">
<view>公司</view> <view>公司</view>
<view class="right select" @click="showenergy = true"> <view class="right select" @click="showmap = true">
<input placeholder="去定位" disabled v-model="country_name" /> <input placeholder="去定位" type="text" disabled v-model="form.address"/>
<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon> <u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
</view> </view>
</view> </view>
@@ -86,61 +97,64 @@
<view class="cell1"> <view class="cell1">
<view>备注(非必填)</view> <view>备注(非必填)</view>
<view class=""> <view class="">
<textarea auto-height v-model="form.describe" placeholder="详细情况..."/> <textarea auto-height v-model="form.describe" placeholder="请输入备注内容~"/>
</view> </view>
</view> </view>
</view> </view>
<u-gap height="10" bgColor="#F6F6F6"></u-gap> <u-gap height="10" bgColor="#F6F6F6"></u-gap>
<view class="steps"> <view class="steps">
<view class="title"> <view class="title">
<view class="">
跟进记录 <text class="status">跟进中</text> 跟进记录 <text class="status">跟进中</text>
</view> </view>
<u-steps current="0" direction="column" dot> <view class="btnjl" @click="followupFn">
<u-steps-item title="在线跟进"> 添加记录
<view slot="desc">
<view class="">
时间：2025-03-11 12:00:01
</view>
<view class="">
<image src="/static/image/customer/addr.png" mode=""></image>
</view> </view>
</view> </view>
</u-steps-item> <u-steps v-if="followList.length>0" :current="followList.length" direction="column" dot>
<u-steps-item title="拜访跟进"> <u-steps-item :title="item.type_txt" v-for="(item, index) in followList" :key="index">
<view slot="desc" class="desc"> <view slot="desc" class="desc">
<view class="" v-if="item.type==0">
<view class=""> <view class="">
<view class=""> <view class="">
时间：2025-03-11 12:00:01 时间：{{item.created_at}}
</view> </view>
<view class="">地址：迪拜某某地方</view> <view class="">地址：{{item.address}}</view>
<view class="">拜访内容：讨论需求</view> <view class="">拜访内容：{{item.audio_text}}</view>
</view> </view>
<view class=""> <view class="">
<image src="/static/image/customer/addr.png" mode=""></image> <image :src="item.oss_picture" mode=""></image>
</view> </view>
</view> </view>
</u-steps-item> <view class="" v-else>
<u-steps-item title="拜访跟进">
<view slot="desc" class="desc">
<view class=""> <view class="">
<view class=""> 时间：{{item.created_at}}
时间：2025-03-11 12:00:01
</view>
<view class="">地址：迪拜某某地方</view>
<view class="">拜访内容：讨论需求</view>
</view> </view>
<view class=""> <view class="">
<image src="/static/image/customer/addr.png" mode=""></image> <image :src="item.oss_picture" mode=""></image>
</view>
</view> </view>
</view> </view>
</u-steps-item> </u-steps-item>
</u-steps> </u-steps>
<!-- <empty :list="brandList"></empty> --> <empty :list="followList"></empty>
</view> </view>
<view class="zw"></view> <view class="zw"></view>
<view class="foot"> <view class="foot">
<button class="btn" @click="nextFn">提交</button> <button class="btn" @click="nextFn">提交</button>
</view> </view>
<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> </view>
</template> </template>
@@ -150,37 +164,118 @@
data() { data() {
return { return {
id:'', id:'',
followList:[],
showmap: false,
showmagnitude: false,
showgrade: false, showgrade: false,
showcartype: false, showcartype: false,
showenergy: false, showchannel: false,
showarea: false,
getGradeList:[], getGradeList:[],
carTypeList:[], carTypeList:[],
channelList:[],
magnitudeList:[],
areaList:[], areaList:[],
grade_name:'', grade_name:'',
car_type_name:'', car_type_name:'',
country_name:'', country_name:'',
channel_name:'',
magnitude_name:'',
defaultIndexqd:[0],
defaultIndexsj:[0],
defaultIndexph:[0],
defaultIndexfj:[0],
defaultIndexgj:[0],
form: { form: {
contacts: '', contacts: '',
gender: '男', sex: '0',
phone: '', phone: '',
email: '', email: '',
describe: '', describe: '',
grade:'', grade:'',
country_id:'', country_id:'',
car_type_id:'' car_type_id:'',
channel_id:'',
magnitude:'',
address:'',
} }
} }
}, },
onLoad(options) { onLoad(options) {
console.log(options); console.log(options);
this.id = options.id;
var that = this var that = this
this.getChannel()
this.getMagnitude()
this.getGrade()
this.carType()
this.area()
this.customerdetailfn()
}, },
onShow() {
this.followlistfn()
},
methods: { methods: {
leftClick(){ leftClick(){
uni.navigateBack({}) uni.navigateBack({})
}, },
//客户详情
customerdetailfn(){
request({
url:'customer/detail',
method:'get',
data: {
id:this.id,
}
}).then(res => {
this.form = res.data.data
that.channelList.forEach((item,index) => {
if(item.id == this.form.channel_id){
that.channel_name = item.name
that.defaultIndexqd=[index]
}
})
console.log(res.data.data)
})
},
// 跟进记录
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.channelList = [list]
})
},
//客户等级
getGrade(){ getGrade(){
request({ request({
url:'customer/getGrade', url:'customer/getGrade',
@@ -190,6 +285,7 @@
this.getGradeList = [list] this.getGradeList = [list]
}) })
}, },
//偏好
carType(){ carType(){
request({ request({
url:'carType/getAll', url:'carType/getAll',
@@ -199,27 +295,53 @@
this.carTypeList = [list] this.carTypeList = [list]
}) })
}, },
//国家
area(){ area(){
request({ request({
url:'area/getAll', url:'area/getCountry',
method:'get', method:'get',
}).then(res => { }).then(res => {
var list = res.data.data var list = res.data.data
this.areaList = [list] this.areaList = [list]
}) })
}, },
//商机
getMagnitude(){
request({
url:'customer/getMagnitude',
method:'get',
}).then(res => {
var list = res.data.data
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){ gradeHandler(val){
this.form.grade = val.value[0].brand_id this.form.grade = val.value[0].id
this.grade_name = val.value[0].name this.grade_name = val.value[0].name
this.showgrade = false this.showgrade = false
}, },
//国家切换事件
areaChange(val){ areaChange(val){
this.form.country_id = val.value[0].energy_id this.form.country_id = val.value[0].id
this.country_name = val.value[0].name this.country_name = val.value[0].name
this.showarea = false this.showarea = false
}, },
//偏好切换事件
cartypesChange(val){ cartypesChange(val){
this.form.car_type_id = val.value[0].energy_id this.form.car_type_id = val.value[0].id
this.car_type_name = val.value[0].name this.car_type_name = val.value[0].name
this.showcartype = false this.showcartype = false
}, },
@@ -234,8 +356,15 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.u-divider{ textarea {
margin: 0px 0px !important; min-height: 200rpx;// 设置默认高度 ，解决设置自适应高度之后高度无效问题
margin-top: 15px;
background-color: #F6F6F6;
padding: 15px;
border-radius: 10px;
}
.red{
color: red;
} }
.zw{ .zw{
height: 120px; height: 120px;
@@ -286,6 +415,9 @@
color: #999999; color: #999999;
} }
.title{ .title{
display: flex;
align-items: center;
justify-content: space-between;
color: #666666; color: #666666;
font-size: 32rpx; font-size: 32rpx;
margin-bottom: 15px; margin-bottom: 15px;
@@ -294,6 +426,13 @@
color: #3471FF; color: #3471FF;
margin-left: 10px; margin-left: 10px;
} }
.btnjl{
background: linear-gradient(to right, #3471FF, #6776FF);
color: white;
padding: 4px 10px;
border-radius: 20px;
font-size: 28rpx;
}
} }
} }
.foot{ .foot{
pages/customer/followup.vue
+19 -1
View File
@@ -152,12 +152,29 @@
uni.navigateBack({}) uni.navigateBack({})
}, },
// 获取当前位置 // 获取当前位置
getarrd(longitude,latitude){
const apiKey = 'AIzaSyBGvV-vX7C72PEbcYrTdmUj3qrubejWzNw';
uni.request({
url: `https://www.google.com/maps/embed/v1/view?key=${apiKey}&location=${longitude},${latitude}`,
success: (res) => {
console.log('逆地理编码结果：', res.data);
if (res.data.status === '1') {
const address = res.data.regeocode.formatted_address; // 具体地址
console.log('具体地址：', address);
}
},
fail: (err) => {
console.log('逆地理编码失败：', err);
}
});
},
getlocahost(){ getlocahost(){
uni.getLocation({ uni.getLocation({
type: 'wgs84', // 默认为 wgs84 坐标系，可选 gcj02 type: 'wgs84', // 默认为 wgs84 坐标系，可选 gcj02
success: function (res) { success: function (res) {
console.log('当前位置的经度：' + res.longitude); console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude); console.log('当前位置的纬度：' + res.latitude);
getarrd(res.longitude,res.latitude)
// 如果需要将经纬度转换为具体地址，可以使用逆地理编码 // 如果需要将经纬度转换为具体地址，可以使用逆地理编码
// 这里调用 uni.chooseLocation 或第三方地图服务（如高德、腾讯地图） // 这里调用 uni.chooseLocation 或第三方地图服务（如高德、腾讯地图）
}, },
@@ -168,6 +185,7 @@
console.log('获取位置完成'); console.log('获取位置完成');
} }
}); });
// uni.chooseLocation({ // uni.chooseLocation({
// success: function (res) { // success: function (res) {
// console.log('位置名称：' + res.name); // console.log('位置名称：' + res.name);
@@ -189,7 +207,7 @@
customer_id:this.id, customer_id:this.id,
} }
}).then(res => { }).then(res => {
this.followList = res.data.data.list this.followList = res.data.data
console.log(res.data.data) console.log(res.data.data)
}) })
}, },
pages/index/customer.vue
+17 -6
View File
@@ -1,10 +1,12 @@
<template> <template>
<view class="conts"> <view class="conts">
<z-paging ref="paging" v-model="datalist" @query="queryList" empty-view-text='暂无数据!'>
<template #top>
<view class="top"> <view class="top">
<view class="navbar">{{$t('customer.title')}}</view> <view class="navbar">{{$t('customer.title')}}</view>
<view class="topSearch"> <view class="topSearch">
<view class="left"> <view class="left">
<u-search v-model="value5" bgColor="#fff" search-icon="" :show-action="false" :placeholder="$t('customer.inputhd')"></u-search> <u-search v-model="value5" bgColor="#fff" search-icon=" " :show-action="false" :placeholder="$t('customer.inputhd')"></u-search>
<view @click="searchCli" class="search"> <view @click="searchCli" class="search">
<image src="/static/image/customer/search1.png" mode=""></image> <image src="/static/image/customer/search1.png" mode=""></image>
</view> </view>
@@ -14,14 +16,17 @@
</view> </view>
</view> </view>
</view> </view>
<z-paging ref="paging" v-model="datalist" @query="queryList" style="margin-top: 100px;" empty-view-text='暂无数据!'> </template>
<view class="list"> <view class="list">
<view class="contents" v-for="(item, index) in datalist" :key="index" > <view class="contents" v-for="(item, index) in datalist" :key="index" >
<view class="" @click="godetile(item)"> <view class="" @click="godetile(item)">
<view class="top"> <view class="top">
<view class="">{{item.created_at}}</view> <view class="">{{item.created_at}}</view>
<view class="tag">{{$t('followup')}}</view> <view class="right">
<text class="medal" :style="{color:(item.magnitude == 0 ?'#F5AB00' : item.magnitude == 1 ?'#8495B8': '#9B7200')}">{{item.magnitude_txt}}</text>
<text class="tag" :style="{background:(item.follow == 0 ?'#3471FF' : item.follow == 1 ?'#27C89C': '#FF4040')}">{{$t('followup')}}</text>
</view>
</view> </view>
<u-line margin="20rpx 0px"></u-line> <u-line margin="20rpx 0px"></u-line>
<view class="cont"> <view class="cont">
@@ -132,7 +137,7 @@
godetile(item){ godetile(item){
console.log(item) console.log(item)
uni.navigateTo({ uni.navigateTo({
url: '/pages/customer/detile' url: '/pages/customer/detile?id='+item.id
}); });
}, },
// 拨打电话 // 拨打电话
@@ -239,12 +244,18 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.tag{ .tag{
background: #3471FF;
color: white; color: white;
border-radius: 10px 0px 0px 10px; border-radius: 20px 0px 0px 20px;
padding: 3px 10px; padding: 3px 10px;
margin-right: -15px; margin-right: -15px;
} }
.right{
display: flex;
align-items: center;
.medal{
margin-right: 10px;
}
}
} }
.cont{ .cont{
padding: 0px 15px 10px; padding: 0px 15px 10px;