From 2f861263bda9656db436f27796e1caaea8a7b06b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Tue, 18 Mar 2025 13:32:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/customer/detile.vue   | 255 ++++++++++++++++++++++++++++--------
 pages/customer/followup.vue |  20 ++-
 pages/index/customer.vue    |  47 ++++---
 3 files changed, 245 insertions(+), 77 deletions(-)

diff --git a/pages/customer/detile.vue b/pages/customer/detile.vue
index fdfbc76..3b2fd21 100644
--- a/pages/customer/detile.vue
+++ b/pages/customer/detile.vue
@@ -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{
diff --git a/pages/customer/followup.vue b/pages/customer/followup.vue
index a015611..0035079 100644
--- a/pages/customer/followup.vue
+++ b/pages/customer/followup.vue
@@ -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)
 				})
 			},
diff --git a/pages/index/customer.vue b/pages/index/customer.vue
index d2ff33c..730537a 100644
--- a/pages/index/customer.vue
+++ b/pages/index/customer.vue
@@ -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;