You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

634 lines
19 KiB

<template>
<view class="home-content">
<view class="card-container">
<view class="float-button">
<image @click="changeOrderType" style="width: 112rpx; height: 112rpx;" slot='cover'
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/SystemOrderCircle.png">
</view>
<view>
<view class="top-select">
<view style="width: 50%;">
<view class="top-select-left" @click="getLocationInfo">
<uni-icons type="location-filled" size="20" color="#FFB13F"></uni-icons>
<text v-if="isCheckLocation"
style="color: #FFB13F ;font-size: 28rpx;font-weight: 400; line-height: 28rpx; width: 280rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{locationName}}</text>
<text v-else style="color: #AAAAAA;font-size: 28rpx;font-weight: 400;">选择地址</text>
</view>
</view>
<view style="width: 50%;">
<view class="top-select-right" @click="toggleCalendar('bottom')">
<image style="width: 32rpx; height: 32rpx; margin-right: 10rpx;" slot='cover'
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/Calendar.png"/>
<text v-if="isCheckTime" style="color: #FFB13F;font-size: 28rpx;font-weight: 400;">
{{selectedDateShowText}}共{{selectedDate.length}}天</text>
<text v-else style="color: #AAAAAA;font-size: 28rpx;font-weight: 400;">选择时间</text>
</view>
<view>
<uni-popup ref="popup" background-color="#fff" @change="changePopup">
<view class="popupBottom">
<uni-calendar ref="calendar" class="uni-calendar--hook" :selected="selectedDate"
:startDate="startDate" :endDate="endDate" :showMonth="false"
@change="changeCalendar" @confirm="changeCalendar" @close="close" />
<view style="display: flex; justify-content: center; align-items: center;">
<!-- <button class="bottom-btn" @click="closePopup">确定</button> -->
<image @click="closePopup" style="width: 670rpx; height: 80rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/yesButton.png" />
</view>
</view>
</uni-popup>
</view>
</view>
</view>
</view>
<view style="display: flex; margin: 10rpx 20rpx 0 20rpx;">
<!-- <view>
<image v-show="isCatCheck" @click="changeSelectedPet('cat')"
style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/CatCheck.png" />
<image v-show="!isCatCheck" @click="changeSelectedPet('cat')"
style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/CatUncheck.png" />
</view>
<view>
<image v-show="isDogCheck" @click="changeSelectedPet('dog')"
style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/DogCheck.png" />
<image v-show="!isDogCheck" @click="changeSelectedPet('dog')"
style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/DogUncheck.png" />
</view> -->
<view style="padding: 10rpx 20rpx;border-radius: 50rpx;background-color: #fff;
display: flex;align-items: center;justify-content: center;width: 450rpx;margin-right: 30rpx;
color: #AAAAAA;" @click="openFilterPopup">
<text>伴宠师条件筛选</text>
<uni-icons type="forward" size="30rpx" color="#aaa"
style="margin-top: 7rpx;margin-left: 10rpx;"></uni-icons>
</view>
<!-- 筛选弹窗组件 -->
<filter-popup ref="filterPopup" @confirm="handleFilterConfirm"></filter-popup>
<uni-easyinput style="border-radius: 84rpx; width: 224rpx; height: 96rpx;" borderColor="#FFB13F"
prefixIcon="search" v-model="value" placeholder="输入名称" @iconClick="iconClick"></uni-easyinput>
<!-- <view style="width: 50%;" class="card">
<uni-data-checkbox multiple selectedColor="#FFB13F" v-model="selectedPet" :localdata="catOrdog"
@change="changeSelectedPet"></uni-data-checkbox>
</view>
<view style="width: 50%;">
<uni-easyinput style="border-radius: 30rpx;" borderColor="#FFB13F" prefixIcon="search"
v-model="value" placeholder="搜索" @iconClick="iconClick"></uni-easyinput>
</view> -->
<!-- <checkbox-group>
<label>
<checkbox value="cb" checked="true" color="#FFB13F" style="transform:scale(0.7)" />选中
</label>
<label>
<checkbox class="color_FFB13F" value="cb" color="#FFB13F" style="transform:scale(0.7)" />未选中
</label>
</checkbox-group> -->
</view>
<view>
<view v-if="companionList.length > 0">
<uni-row :span="12" v-for="(item,index) in companionList" :key="index">
<uni-card :is-shadow="false" padding=0 margin="10px"
@click="getInfo(item.userId)">
<view class="personal-list-item">
<view class="personal-info">
<view>
<!-- <image class="people-img" slot='cover'
:src="item&&item.staffImages&&item.staffImages.length>0?item.staffImages[0].url:defaultStaffIamge">
</image> -->
<image class="people-img" slot='cover'
:src="item.userImage">
</image>
</view>
<view class="personal-info-1">
<view class="personal-info-2">
<view class="personal-info-title">
<view class="personal-name">
{{ item.userName || '匿名' }}
</view>
<view class="personal-sex">
<img :src="item.appletUsersTeacher.sex == 0?'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_m.png':
'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_f.png'" alt="sex"
style="width: 20px;height: 20px;" />
</view>
</view>
<view class="personal-star" @click="checkIsLike">
<text style="color: #FFB13F;">客户点赞数{{ item.appletUsersTeacher.thumbsUp || 0 }}</text>
<uni-icons v-if="isLike" type="hand-up-filled" size="20"
color="#FFB13F"></uni-icons>
<uni-icons v-else type="hand-up" size="20" color="#FFB13F"></uni-icons>
</view>
</view>
<view class="personal-info-3" style="width: 100%;">
<view class="ellipsis" v-if="item.distanceText">
距离{{ item.distanceText }}km
</view>
<view class="ellipsis" v-else>
暂无距离估测
</view>
</view>
<view class="personal-info-4" style="width: 100%;">
<view class="ellipsis" style="max-width: 225px;">
简介:{{ item.appletUsersTeacher.userBrief || '暂无' }}
</view>
</view>
</view>
</view>
</view>
<view>
<view class="personal-item-bottom">
<text class="personal-item-bottom-text">养宠{{ item.experience || 0 }}年 | 评价{{ item.commentNum || 0 }}条 | 服务小结{{ item.serviceSummaryNum || 0 }}份</text>
</view>
</view>
</uni-card>
</uni-row>
</view>
<view v-else
style="
color: #AAAAAA;
display: flex; justify-content: center; align-items: center; height: 100px; font-size: 16px; font-weight: bold;">
暂无数据
</view>
</view>
</view>
</view>
</template>
<script>
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
import uniFab from '@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue'
import FilterPopup from '@/components/FilterPopup/FilterPopup.vue'
import positionMixin from '../../mixins/position';
// import {
// getCompanionList,
// getCompanionInfo
// } from "@/api/system/companion"
import {
getTeacherList,
} from "@/api/order/order"
export default {
mixins: [positionMixin],
data() {
return {
allInfo: {
isCheckLocation: false,
locationName: '',
locationLatitude: '',
locationLongitude: '',
locationAddress: '',
selectedDate: [],
isCheckTime: false,
},
// 筛选条件
filterOptions: {
gender: '',
petTypes: [],
level: ''
},
selectedDate: [],
startDate: '',
endDate: '',
isCheckLocation: false,
locationName: '',
locationLatitude: '',
locationLongitude: '',
locationAddress: '',
isCheckTime: false,
selectedDateShowText: '',
isCatCheck: true,
isDogCheck: true,
petTypes: ['1', '2'],
value: '',
companionList: [],
isLike: false,
likeNum: 560,
defaultStaffIamge: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png',
}
},
components: {
uniPopup,
FilterPopup
},
onLoad: function(option) {
let info = JSON.parse(decodeURIComponent(option.info));
this.allInfo = info
console.log('this.allInfo', this.allInfo);
this.setInfo()
this.getCompanionList()
},
mounted() {
this.getCalendarDate();
},
methods: {
setInfo() {
this.isCheckLocation = this.allInfo.isCheckLocation
this.locationName = this.allInfo.locationName
this.locationLatitude = this.allInfo.locationLatitude
this.locationLongitude = this.allInfo.locationLongitude
this.locationAddress = this.allInfo.locationAddress
this.selectedDate = this.allInfo.selectedDate
this.isCheckTime = this.allInfo.isCheckTime
if (this.allInfo.selectedDate.length == 1) {
this.selectedDateShowText = this.allInfo.selectedDate[0].date.replace(/-/g, "/") + ' '
} else if (this.allInfo.selectedDate.length > 1) {
this.selectedDateShowText = this.allInfo.selectedDate[0].date.replace(/-/g, "/") + '...' + ' '
}
},
checkIsLike() {
this.isLike = !this.isLike
this.$forceUpdate()
},
changeOrderType() {
uni.navigateTo({
url: '/pages/newOrder/serviceNew2'
});
},
getInfo(id) {
if (id) {
uni.navigateTo({
// url: '/pages/companionPetList/companionPetInfo',
url: `/pages/companionPetList/companionPetInfo?id=${id}`
});
}
},
trigger(e) {
uni.showModal({
title: '提示',
content: `激活状态:${e.item.active};选中项:${e.item.text}`,
success(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
fabClick() {
uni.showToast({
title: '点击了悬浮按钮',
icon: 'none'
});
},
getCompanionList() {
// let data = {
// longitude: this.locationLongitude,
// latitude: this.locationLatitude,
// petTypes: this.selectedPet,
// staffName: '',
// address: this.locationAddress
// }
let data = {
address: "上海市浦东新区浦东南路150弄",
latitude: 29.56471,
longitude: 106.55073,
petTypes: ["1", "2"],
staffName: "君"
}
console.log('data', data);
// getCompanionList(data).then(response => {
// if (response.code == 200) {
// this.companionList = response.rows
// console.log(response);
// }
// console.log(response);
// })
getTeacherList(data).then(response => {
if (response.code == 200) {
this.companionList = response.rows
this.calculateTeacherListDistance()
}
console.log(response);
})
},
calculateTeacherListDistance(){
this.companionList.forEach(item => {
item.distanceText = this.calculateDistanceAddress(item.appletAddresseList)
})
},
iconClick() {},
changeSelectedPet(type) {
console.log('changeSelectedPet type', type);
if (type == 'cat') {
this.isCatCheck = !this.isCatCheck
if (this.petTypes.includes('1')) {
if (!this.isCatCheck) {
this.petTypes = this.petTypes.filter(item => item !== '1');
}
} else {
this.isCatCheck ? this.petTypes.push('1') : ''
}
} else {
this.isDogCheck = !this.isDogCheck
if (this.petTypes.includes('2')) {
if (!this.isDogCheck) {
this.petTypes = this.petTypes.filter(item => item !== '2');
}
} else {
this.isDogCheck ? this.petTypes.push('2') : ''
}
}
console.log('this.petTypes', this.petTypes);
},
toggleCalendar(type) {
this.type = type
uni.hideTabBar()
this.$refs.popup.open(type)
},
closePopup() {
this.$refs.popup.close()
setTimeout(() => {
uni.showTabBar()
}, 300)
},
changePopup(e) {
console.log('当前模式:' + e.type + ',状态:' + e.show);
if (e.show) {
uni.hideTabBar()
} else {
setTimeout(() => {
uni.showTabBar()
}, 300)
}
},
close() {
console.log('弹窗关闭');
},
confirm(e) {
console.log('confirm 返回:', e)
},
changeCalendar(e) {
console.log('change 返回:', e)
this.selectedDateShowText = ''
// 选中日期
const selectedValue = this.selectedDate.find(item => item.date === e.fulldate)
if (selectedValue) {
// 存在则移除
this.selectedDate = this.selectedDate.filter(item => item.date !== e.fulldate);
} else {
this.selectedDate.push({
date: e.fulldate,
info: 'time'
})
}
if (this.selectedDate.length > 0) {
this.isCheckTime = true
if (this.selectedDate.length == 1) {
this.selectedDateShowText = this.selectedDate[0].date.replace(/-/g, "/") + ' '
} else {
this.selectedDateShowText = this.selectedDate[0].date.replace(/-/g, "/") + '...' + ' '
}
} else {
this.isCheckTime = false
}
},
getCalendarDate() {
let tomorrow = new Date()
tomorrow.setDate(tomorrow.getDate() + 2);
this.startDate = this.formatDate(tomorrow);
// 获取三个月后的日期
let threeMonthsLater = new Date();
threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
this.endDate = this.formatDate(threeMonthsLater);
},
formatDate(date) {
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');
return year + '-' + month + '-' + day;
},
getLocationInfo() {
wx.chooseLocation({
type: 'gcj02', // 坐标系,默认为 wgs84 返回 gps 原始坐标,gcj02 返回可用于 wx.openLocation 的坐标
success: (res) => {
// 成功回调
this.isCheckLocation = true
this.locationName = res.address
this.locationLongitude = res.longitude
this.locationLatitude = res.latitude
this.locationAddress = res.address
console.log('选择的位置:', res);
this.position.address = this.locationAddress
this.position.longitude = this.locationLongitude
this.position.latitude = this.locationLatitude
},
fail: (err) => {
// 失败回调
console.error('选择位置失败:', err);
}
});
},
// 打开筛选弹窗
openFilterPopup() {
this.$refs.filterPopup.open()
},
// 处理筛选确认
handleFilterConfirm(filterData) {
console.log('筛选条件:', filterData)
this.filterOptions = filterData
// 根据筛选条件重新获取数据
this.getCompanionList()
},
}
}
</script>
<style lang="scss">
.home-content {
background: linear-gradient(360deg, #F5F5F7 0%, #FFBF60 99%);
.card-container {
margin: 0;
padding: 0;
.uni-card {
border-radius: 16rpx;
}
.top-select {
background-color: #fff;
border: 1px solid #EBEEF5;
// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
margin: 0 10px 10px 10px;
border-radius: 16rpx;
padding: 13px;
.top-select-left {
display: flex;
flex-wrap: nowrap;
align-items: center;
// justify-content: space-around;
}
.top-select-right {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
}
.float-button {
z-index: 10;
position: fixed;
bottom: 100rpx;
/* 距离底部的距离 */
right: 32rpx;
/* 距离右侧的距离 */
// width: 50px;
// /* 按钮的宽度 */
// height: 50px;
}
.is-input-border {
border-radius: 84rpx;
height: 96rpx;
width: 224rpx;
}
.card {
// border-radius: 50rpx;
width: 50%;
background-color: #fff;
border: 1px solid #EBEEF5;
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
margin-right: 20rpx;
// height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
}
.personal-list-item {
padding: 10px 0px 0px 0;
.personal-info {
display: flex;
align-items: center;
justify-content: flex-start;
.people-img {
width: 168rpx;
height: 168rpx;
border: #FEA714 5rpx solid;
border-radius: 20rpx;
}
.personal-info-1 {
margin-left: 10px;
width: 100%;
.personal-info-2 {
display: flex;
flex-wrap: wrap;
.personal-info-title {
display: flex;
flex-wrap: wrap;
width: 60%;
}
.personal-name {
color: #333;
font-size: 32rpx;
// line-height: 32rpx;
margin-right: 10rpx;
font-weight: 900;
font-style: normal;
}
.personal-star {
color: #FFAA48;
font-size: 24rpx;
font-weight: 400;
line-height: 32rpx;
}
}
.personal-info-3 {
display: flex;
align-items: baseline;
font-size: 28rpx;
line-height: 32rpx;
margin-top: 5px;
color: #FFAA48;
font-weight: 900;
}
.personal-info-4 {
display: flex;
align-items: baseline;
font-size: 24rpx;
margin-top: 10px;
color: #7D8196;
font-weight: 400;
line-height: 32rpx;
}
}
}
}
.personal-item-bottom {
height: 60rpx;
background-color: #FFF4E5;
margin: 20rpx 0 20rpx 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8rpx;
.personal-item-bottom-text {
color: #A94F20;
margin: 14rpx;
font-size: 24rpx;
font-weight: 400;
}
}
.popupBottom {
z-index: 99;
height: 950rpx;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10rpx 20rpx;
border-radius: 20rpx 20rpx 0 0;
background-color: #fff;
.bottom-btn {
width: 100%;
border-radius: 120rpx;
background: #FFB13F;
font-size: 32rpx;
color: #FFFFFF;
}
}
::v-deep .wx-radio-input.wx-radio-input-checked {
background-color: #00875a !important;
border-color: #00875a !important;
color: #ffffff !important;
}
.color_FFB13F {
color: #FFB13F;
}
}
}
</style>