Browse Source

feat(companionPetList): 添加地址地图组件并优化筛选逻辑

添加了新的地址地图组件 `addressMap.vue`,用于显示伴宠师的可接单地址,并优化了伴宠师列表的筛选逻辑,支持根据性别、宠物类型和等级进行筛选。同时,修复了伴宠师等级选择的bug,并调整了部分样式。
master
前端-胡立永 2 weeks ago
parent
commit
094657ad33
6 changed files with 167 additions and 9 deletions
  1. +2
    -2
      components/FilterPopup/FilterPopup.vue
  2. +125
    -0
      components/addressMap.vue
  3. +1
    -0
      mixins/position.js
  4. +17
    -2
      pages/companionPetList/companionPetInfo.vue
  5. +18
    -3
      pages/companionPetList/companionPetList.vue
  6. +4
    -2
      pages/newOrder/serviceNew.vue

+ 2
- 2
components/FilterPopup/FilterPopup.vue View File

@ -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>


+ 125
- 0
components/addressMap.vue View File

@ -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>

+ 1
- 0
mixins/position.js View File

@ -11,6 +11,7 @@ export default {
...mapState(['position']),
},
methods: {
calculateDistance,
calculateDistanceAddress(teacherAddress) {
if (!teacherAddress ||
teacherAddress.length == 0 ||


+ 17
- 2
pages/companionPetList/companionPetInfo.vue View File

@ -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({


+ 18
- 3
pages/companionPetList/companionPetList.vue View File

@ -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) {


+ 4
- 2
pages/newOrder/serviceNew.vue View File

@ -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}}


Loading…
Cancel
Save