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