Browse Source

feat(calendar): 添加禁用日期功能并优化地址列表显示

- 在日历组件中添加disabledDay属性支持禁用特定日期
- 新增calculateDistanceAddressList方法计算并排序地址距离
- 优化companionPetInfo页面地址列表的显示样式
- 在petList页面集成禁用日期功能并获取技师不接单日期
master
前端-胡立永 3 days ago
parent
commit
998c36cd9c
7 changed files with 91 additions and 9 deletions
  1. +22
    -1
      mixins/position.js
  2. +3
    -2
      pages/companionPetList/companionPetInfo.vue
  3. +3
    -0
      pages/companionPetList/companionPetList.vue
  4. +34
    -3
      pages/newOrder/petList.vue
  5. +6
    -0
      uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue
  6. +9
    -1
      uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
  7. +14
    -2
      uni_modules/uni-calendar/components/uni-calendar/util.js

+ 22
- 1
mixins/position.js View File

@ -37,6 +37,27 @@ export default {
})
return minDistance
}
},
calculateDistanceAddressList(teacherAddress){
if (!teacherAddress ||
teacherAddress.length == 0 ||
!this.position ||
!this.position.latitude ||
!this.position.longitude) {
return 0
}
teacherAddress.forEach((item, index) => {
item.distance = calculateDistance(
this.position.latitude,
this.position.longitude,
item.latitude,
item.longitude,
)
})
return teacherAddress.sort((a, b) => a.distance - b.distance)
},
}
}

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

@ -222,14 +222,15 @@
style="margin: 10rpx 0;"
:key="index"
v-for="(address, index) in addressList">
<view style="display: flex;align-items: center;flex-direction: column;">
<view style="display: flex;align-items: flex-start;flex-direction: column;">
<view style="flex: 1; padding-right: 10rpx;">
<text>可接单地址{{ index + 1 }}</text>
<text>{{ address.area }} {{ address.address }} {{ address.rangeNo ? address.rangeNo + '公里内' : '' }}</text>
</view>
<view v-if="address.appletOutDate && address.appletOutDate.length"
style="display: flex; justify-content: flex-end;">
style="display: flex; justify-content: center;
width: 100%;">
<view
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')">


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

@ -458,6 +458,9 @@
this.position.address = this.locationAddress
this.position.longitude = this.locationLongitude
this.position.latitude = this.locationLatitude
this.getCompanionList()
},
fail: (err) => {


+ 34
- 3
pages/newOrder/petList.vue View File

@ -107,7 +107,9 @@
<view v-if="showCalendar" class="calendar-popup">
<view class="calendar-mask"></view>
<view class="calendar-content">
<uni-calendar class="uni-calendar--hook" :selected="selectedDate" :startDate="startDate"
<uni-calendar class="uni-calendar--hook"
:disabledDay="outDateList"
:selected="selectedDate" :startDate="startDate"
:endDate="endDate" @change="change" :showMonth="false" />
<u-button color="#FFBF60" type="primary" @click="confirmCanlendar">确定</u-button>
</view>
@ -120,7 +122,12 @@
<script>
import { getDictList } from "@/api/system/user.js"
import { getPetList, delPet } from "@/api/system/pet"
import positionMixin from '../../mixins/position';
import {
getTeacherAddressList,
} from "@/api/order/order"
export default {
mixins: [positionMixin],
data() {
return {
defaultPhoto: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png',
@ -135,11 +142,14 @@ export default {
endDate: '',
showCalendar: false,
selectedDate: [],
currentPets: []
currentPets: [],
//
outDateList : ['2025-6-20'],
}
},
onShow() {
this.getPetList();
this.getOutDateList()
},
onPullDownRefresh() {
this.getPetList();
@ -169,8 +179,29 @@ export default {
this.showDel = false;
}
})
},
//
getOutDateList(){
if(!this.buyInfo.teacher || !this.buyInfo.teacher.userId){
return
}
console.log('this.buyInfo', this.buyInfo);
getTeacherAddressList({
userId : this.buyInfo.teacher.userId
}).then(response => {
if (response.code == 200) {
let addressList = this.calculateDistanceAddressList(response.data)
if(addressList && addressList[0] && addressList[0].appletOutDate){
this.outDateList = addressList[0].appletOutDate.map(n => n.date)
}
console.log(addressList, this.outDateList);
}
})
},
getPetTypeList() {
getDictList('pet_type').then(res => {
if (res.code == 200) {


+ 6
- 0
uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue View File

@ -55,6 +55,12 @@
export default {
emits:['change'],
props: {
disabledDay: {
type: Array,
default () {
return []
}
},
weeks: {
type: Object,
default () {


+ 9
- 1
uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue View File

@ -52,7 +52,8 @@
</view>
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"
:disabledDay="disabledDay"></calendar-item>
</view>
</view>
</view>
@ -94,6 +95,12 @@
},
emits:['close','confirm','change','monthSwitch'],
props: {
disabledDay: {
type: Array,
default () {
return []
}
},
date: {
type: String,
default: ''
@ -204,6 +211,7 @@
startDate: this.startDate,
endDate: this.endDate,
range: this.range,
disabledDay : this.disabledDay,
})
this.init(this.date)
},


+ 14
- 2
uni_modules/uni-calendar/components/uni-calendar/util.js View File

@ -6,7 +6,8 @@ class Calendar {
selected,
startDate,
endDate,
range
range,
disabledDay,
} = {}) {
// 当前日期
this.date = this.getDate(new Date()) // 当前初入日期
@ -22,6 +23,8 @@ class Calendar {
// 每周日期
this.weeks = {}
// this._getWeek(this.date.fullDate)
this.disabledDay = disabledDay || []
}
/**
* 设置日期
@ -171,6 +174,15 @@ class Calendar {
checked = true
}
}
//禁用日期
let dayDisable = true
for (let dj = 0; dj < this.disabledDay.length; dj++) {
if (this.disabledDay[dj] == nowDate) {
dayDisable = false
}
}
let data = {
fullDate: nowDate,
year: full.year,
@ -180,7 +192,7 @@ class Calendar {
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !(disableBefore && disableAfter),
disable: !(disableBefore && disableAfter) || !dayDisable,
isDay
}
if (info) {


Loading…
Cancel
Save