From 094657ad33942dc57bdf025a8dc031a645231d5c Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Mon, 19 May 2025 20:47:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(companionPetList):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80=E5=9C=B0=E5=9B=BE=E7=BB=84=E4=BB=B6=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=AD=9B=E9=80=89=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加了新的地址地图组件 `addressMap.vue`，用于显示伴宠师的可接单地址，并优化了伴宠师列表的筛选逻辑，支持根据性别、宠物类型和等级进行筛选。同时，修复了伴宠师等级选择的bug，并调整了部分样式。
---
 components/FilterPopup/FilterPopup.vue      |   4 +-
 components/addressMap.vue                   | 125 ++++++++++++++++++++++++++++
 mixins/position.js                          |   1 +
 pages/companionPetList/companionPetInfo.vue |  19 ++++-
 pages/companionPetList/companionPetList.vue |  21 ++++-
 pages/newOrder/serviceNew.vue               |   6 +-
 6 files changed, 167 insertions(+), 9 deletions(-)
 create mode 100644 components/addressMap.vue

diff --git a/components/FilterPopup/FilterPopup.vue b/components/FilterPopup/FilterPopup.vue
index 600339c..1c92a0e 100644
--- a/components/FilterPopup/FilterPopup.vue
+++ b/components/FilterPopup/FilterPopup.vue
@@ -42,10 +42,10 @@
 			<view class="filter-section">
 				<view class="section-title">伴宠师等级</view>
 				<view class="tag-group">
-					<view :class="['tag-item', level === '初级伴宠师' ? 'active' : '']" @click="selectLevel('初级伴宠师')">
+					<view :class="['tag-item', level === '1' ? 'active' : '']" @click="selectLevel('1')">
 						<text>初级伴宠师</text>
 					</view>
-					<view :class="['tag-item', level === '高级伴宠师' ? 'active' : '']" @click="selectLevel('高级伴宠师')">
+					<view :class="['tag-item', level === '2' ? 'active' : '']" @click="selectLevel('2')">
 						<text>高级伴宠师</text>
 					</view>
 				</view>
diff --git a/components/addressMap.vue b/components/addressMap.vue
new file mode 100644
index 0000000..ce1456b
--- /dev/null
+++ b/components/addressMap.vue
@@ -0,0 +1,125 @@
+<template>
+	<view 
+	class="addressMap"
+	v-if="position.latitude && addressList.length">
+		<map
+		style="width: 100%;height: 500rpx;border-radius: 20rpx;" 
+		:layer-style='5' 
+		:show-location='true'
+		:latitude="positionMap.latitude" 
+		:longitude="positionMap.longitude" 
+		:markers="addressMarkers" 
+		:scale="scale" 
+		@markertap="markertap"
+		id="mapId"
+		@callouttap="callouttap">
+		</map>
+	</view>
+</template>
+
+<script>
+    import positionMixin from '@/mixins/position';
+	export default {
+		mixins: [positionMixin],
+		name:"addressMap",
+		props : {
+			addressList : {
+				default : []
+			},
+		},
+		computed : {
+			addressMarkers(){
+				
+				if (!this.addressList ||
+				    this.addressList.length == 0 ||
+				    !this.position || 
+				    !this.position.latitude || 
+				    !this.position.longitude) {
+				    return []
+				}
+				
+				this.addressList.forEach((item, index) => {
+				    let distance = this.calculateDistance(
+				        this.position.latitude,
+				        this.position.longitude,
+				        item.latitude,
+				        item.longitude,
+				    )
+					
+					item.width = 20 //图标icon 宽度
+					item.height = 28 //图标icon 高度
+				    item.distance = distance
+					item.iconPath = ''
+				})
+				
+				this.addressList.sort((a,b) => {
+					return a.distance - b.distance
+				})
+
+				// 计算最大距离并设置缩放比例
+				if (this.addressList.length > 1) {
+					let maxDistance = 0
+					for (let i = 0; i < this.addressList.length; i++) {
+						for (let j = i + 1; j < this.addressList.length; j++) {
+							const distance = this.calculateDistance(
+								this.addressList[i].latitude,
+								this.addressList[i].longitude,
+								this.addressList[j].latitude,
+								this.addressList[j].longitude
+							)
+							maxDistance = Math.max(maxDistance, distance)
+						}
+					}
+					// 根据最大距离设置缩放比例
+					// 距离越大，缩放比例越小
+					if (maxDistance > 10) { // 10公里以上
+						this.scale = 12
+					} else if (maxDistance > 5) { // 5-10公里
+						this.scale = 13
+					} else if (maxDistance > 2) { // 2-5公里
+						this.scale = 14
+					} else { // 2公里以内
+						this.scale = 15
+					}
+				}
+				
+				return this.addressList
+			},
+			positionMap(){
+				if(this.addressMarkers.length == 0){
+					return {
+						latitude : 0,
+						longitude : 0,
+					}
+				}
+				
+				return {
+					latitude : this.addressMarkers[0].latitude,
+					longitude : this.addressMarkers[0].longitude,
+				}
+			}
+		},
+		data() {
+			return {
+				scale : 15,
+			};
+		},
+		methods : {
+			markertap(e){
+				console.log(e);
+				this.addressList.forEach(item => {
+					if(item.id == e.detail.markerId){
+						this.$emit('clickAddress', item)
+					}
+				})
+			},
+			callouttap(e){},
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+.addressMap{
+	padding-bottom: 30rpx;
+}
+</style>
\ No newline at end of file
diff --git a/mixins/position.js b/mixins/position.js
index 238a316..b3519f6 100644
--- a/mixins/position.js
+++ b/mixins/position.js
@@ -11,6 +11,7 @@ export default {
         ...mapState(['position']),
 	},
 	methods: {
+		calculateDistance,
         calculateDistanceAddress(teacherAddress) {
             if (!teacherAddress || 
                 teacherAddress.length == 0 ||
diff --git a/pages/companionPetList/companionPetInfo.vue b/pages/companionPetList/companionPetInfo.vue
index 2f5d5eb..1948206 100644
--- a/pages/companionPetList/companionPetInfo.vue
+++ b/pages/companionPetList/companionPetInfo.vue
@@ -222,7 +222,7 @@
 						style="margin: 10rpx 0;"
                         :key="index"
 						v-for="(address, index) in addressList">
-							<view style="display: flex; justify-content: space-between; align-items: center;">
+							<view style="display: flex;align-items: center;flex-direction: column;">
                                 <view style="flex: 1; padding-right: 10rpx;">
                                     <text>可接单地址{{ index + 1 }}：</text>
                                     <text>{{ address.area }} {{ address.address }} {{ address.rangeNo ? address.rangeNo + '公里内' : '' }}</text>
@@ -234,15 +234,20 @@
                                     style="font-size: 20rpx; color: #FFB13F; display: flex; align-items: center; padding: 2rpx 8rpx; background-color: #FFF9F0; border-radius: 20rpx;"
                                     @click="selectDate = address.appletOutDate.map(n => n.date);$refs.calendarPopup.open('bottom')">
                                         <uni-icons type="calendar" size="20rpx" color="#FFB13F" style="margin-right: 2rpx;"></uni-icons>
-                                        <text>不接单{{address.appletOutDate.length}}天</text>
+                                        <text>点击查看不接单{{address.appletOutDate.length}}天</text>
                                     </view>
                                 </view>
                             </view>
 						</view>
 					</view>
+					
+					<addressMap :addressList="addressList" @clickAddress="clickAddress"/>
+					
 				</uni-card>
 			</view>
 			
+			
+			
 			<view class="service-record" style="padding-bottom: 55px;">
 				<uni-card :is-shadow="false" padding=0 margin="10px">
 					<view class="service-record-title" slot="title">
@@ -352,8 +357,12 @@
 	} from "@/api/order/order"
 	import uniRate from '@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue';
     import positionMixin from '../../mixins/position';
+	import addressMap from '@/components/addressMap.vue'
 	export default {
 		mixins: [positionMixin],
+		components : {
+			addressMap
+		},
 		data() {
 			return {
 				currentCompanionPetId: '',
@@ -472,6 +481,12 @@
 			this.getCurrentCompanionPetInfo(this.currentCompanionPetId)
 		},
 		methods: {
+			clickAddress(address){
+				if(address.appletOutDate && address.appletOutDate.length > 0){
+					this.selectDate = address.appletOutDate.map(n => n.date);
+					this.$refs.calendarPopup.open('bottom')
+				}
+			},
             toBuy(){
                 this.buyInfo.teacher = this.companionInfo
                 uni.navigateTo({
diff --git a/pages/companionPetList/companionPetList.vue b/pages/companionPetList/companionPetList.vue
index d9122ad..0b90ec3 100644
--- a/pages/companionPetList/companionPetList.vue
+++ b/pages/companionPetList/companionPetList.vue
@@ -253,6 +253,10 @@
 			},
 			getInfo(id) {
 				if (id) {
+					
+					let info = encodeURIComponent(JSON
+								.stringify(this.allInfo))
+					
 					uni.navigateTo({
 						// url: '/pages/companionPetList/companionPetInfo',
 						url: `/pages/companionPetList/companionPetInfo?id=${id}`
@@ -287,12 +291,23 @@
 				// 	address: this.locationAddress
 				// }
 				let data = {
-					address: "上海市浦东新区浦东南路150弄",
+					// address: "上海市浦东新区浦东南路150弄",
 					latitude: 29.56471,
 					longitude: 106.55073,
-					petTypes: ["1", "2"],
-					staffName: "君"
+					// petTypes: ["1", "2"],
+					userName: this.value,
 				}
+				
+				if(this.filterOptions.gender){
+					data.sex = this.filterOptions.gender == '男' ? 0 : 1
+				}
+				if(this.filterOptions.petTypes.length){
+					data.petTypes = this.filterOptions.petTypes.join(',')
+				}
+				if(this.filterOptions.level){
+					data.level = this.filterOptions.level
+				}
+				
 				console.log('data', data);
 				// getCompanionList(data).then(response => {
 				// 	if (response.code == 200) {
diff --git a/pages/newOrder/serviceNew.vue b/pages/newOrder/serviceNew.vue
index e4f55e7..4850ad6 100644
--- a/pages/newOrder/serviceNew.vue
+++ b/pages/newOrder/serviceNew.vue
@@ -30,8 +30,10 @@
 		</view>
 
         <view class="order-type-select" v-if="buyInfo.teacher">
-            <view class="order-type-title order-type-title-custom">
-                <view class="order-type-title-main">
+            <view class="order-type-title order-type-title-custom"
+			style="border-radius: 10rpx;">
+                <view class="order-type-title-main"
+				style="padding-left: 10rpx;">
 					<image style="width: 40rpx; height: 40rpx; margin-right: 10rpx;" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderIcon.png"></image>
                     <view class="main-title">
                         下单方式：指定喂养员 - {{buyInfo.teacher.userName}}