Browse Source

refactor(companionList): 优化伴宠师列表展示逻辑并调整样式

- 重构伴宠师列表展示逻辑,使用 `companionList` 数据动态渲染
- 调整伴宠师信息展示样式,包括图片、姓名、性别、点赞数、距离和简介
- 添加无伴宠师时的提示信息
- 删除未使用的代码和注释
master
前端-胡立永 2 months ago
parent
commit
c605554faa
5 changed files with 81 additions and 157 deletions
  1. +1
    -1
      components/FilterPopup/FilterPopup.vue
  2. +2
    -2
      components/addressMap.vue
  3. +75
    -76
      pages/index.vue
  4. +3
    -1
      pages/newOrder/serviceNew.vue
  5. +0
    -77
      pages_order/task/AppletTask.java

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

@ -42,7 +42,7 @@
<view class="filter-section">
<view class="section-title">伴宠师等级</view>
<view class="tag-group">
<view :class="['tag-item', level === '3' ? 'active' : '']" @click="selectLevel('1')">
<view :class="['tag-item', level === '1' ? 'active' : '']" @click="selectLevel('1')">
<text>初级伴宠师</text>
</view>
<view :class="['tag-item', level === '2' ? 'active' : '']" @click="selectLevel('2')">


+ 2
- 2
components/addressMap.vue View File

@ -73,9 +73,9 @@
//
//
if (maxDistance > 100) { //
this.scale = 2
}else if (maxDistance > 50) { //
this.scale = 5
}else if (maxDistance > 50) { //
this.scale = 8
}else if (maxDistance > 10) { // 10
this.scale = 10
} else if (maxDistance > 5) { // 5-10


+ 75
- 76
pages/index.vue View File

@ -149,36 +149,42 @@
</view>
</view>
<view class="split-line"></view>
<view class="companion-content">
<view class="companion-content"
v-for="(item,index) in companionList" :key="index"
v-if="index < 1">
<view class="companion-item">
<view class="companion-info">
<image class="companion-img" slot='cover'
:src="defaultCompanion.staffImages && defaultCompanion.staffImages.length > 0 ? defaultCompanion.staffImages[0].url : defaultStaffIamge">
:src="item.userImage">
</image>
<view class="companion-info-1">
<view class="companion-info-2">
<view class="companion-info-title">
<view class="companion-name">
{{defaultCompanion.name}}
{{ item.userName || '匿名' }}
</view>
<view class="companion-sex">
<image :src="defaultCompanion.gender == '1' ? '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: 40rpx;height: 40rpx;" />
<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="companion-info-star">
<text style="color: #FFB13F;">客户点赞数{{defaultCompanion.star}}</text>
<uni-icons type="hand-up-filled" size="18" color="#FFB13F"></uni-icons>
<text style="color: #FFB13F;">点赞数{{ item.appletUsersTeacher.thumbsUp || 0 }}</text>
<uni-icons type="hand-up-filled" size="20" color="#FFB13F"></uni-icons>
</view>
</view>
<view class="companion-info-3" style="width: 100%;">
<view class="ellipsis">
距离{{defaultCompanion.distance}}km
<view class="ellipsis" v-if="item.distanceText">
距离{{ item.distanceText }}km
</view>
<view class="ellipsis" v-else>
{{ '<' }}1km
</view>
</view>
<view class="companion-info-4" style="width: 100%;">
<view class="ellipsis" style="max-width: 450rpx;">
简介{{defaultCompanion.shortDescription}}
<view class="ellipsis" style="max-width: 225px;">
简介{{ item.appletUsersTeacher.userBrief || '暂无' }}
</view>
</view>
</view>
@ -186,10 +192,16 @@
</view>
<view>
<view class="companion-item-bottom">
<text class="companion-item-bottom-text">养宠{{defaultCompanion.year}} | 评价{{defaultCompanion.record}} | 服务小结{{defaultCompanion.serviceNum}}</text>
<text class="companion-item-bottom-text">养宠{{ item.experience || 0 }} | 评价{{ item.commentNum || 0 }} | 服务小结{{ item.serviceSummaryNum || 0 }}</text>
</view>
</view>
</view>
<view class="no-data" v-if="companionList.length == 0">
<view class="no-data-text">
您周边没有伴宠师呢
</view>
</view>
</uni-card>
</view>
@ -240,7 +252,7 @@
style="width: 100%;" mode="widthFix" alt="service" />
</view>
<view class="card-container">
<!-- <view class="card-container">
<uni-card :is-shadow="false" padding="0px" margin="10px">
<view class="title-img4"></view>
<uni-row class="demo-uni-row">
@ -258,7 +270,7 @@
</uni-row>
</uni-card>
</view>
</view> -->
<view>
<image style="height: 132rpx; width: 710rpx; margin: 0 20rpx 20rpx 20rpx;"
@ -343,7 +355,10 @@
getOpenIdKey,
setOpenIdKey
} from '@/utils/auth'
import { getTeacherListIndex } from '@/api/home'
// import { getTeacherListIndex } from '@/api/home'
import {
getTeacherList,
} from "@/api/order/order"
import Kefu from './common/kefu.vue'
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
import NewUserCoupon from './components/NewUserCoupon.vue';
@ -409,6 +424,7 @@
numTime: "2024.12.12",
},
currentCoupon: null,
companionList: [],
}
},
components: {
@ -604,72 +620,43 @@
}
});
},
getCompanionList() {
getLocation(){
return new Promise((resolve, reject) => {
uni.getLocation({
type: 'gcj02',
success: (res) => {
resolve(res)
}
})
})
},
async getCompanionList() {
// 使
let data = {
address: this.locationAddress || "上海市浦东新区浦东南路150弄",
latitude: this.locationLatitude || 31.22514,
longitude: this.locationLongitude || 121.49857,
petTypes: ["1", "2"],
staffName: ""
latitude: this.position.latitude,
longitude: this.position.longitude,
}
console.log('获取周边伴宠师参数:', data);
// Vuexposition mixin使
this.$store.commit('setPosition', {
address: this.locationAddress,
longitude: this.locationLongitude,
latitude: this.locationLatitude
});
getTeacherListIndex(data).then(response => {
if (response.code == 200 && response.rows && response.rows.length > 0) {
const nearbyTeacher = response.rows[0];
console.log('伴宠师原始数据:', nearbyTeacher);
// 使mixincalculateDistanceAddress
let distance = 0;
if (nearbyTeacher.addressList && nearbyTeacher.addressList.length > 0) {
distance = this.calculateDistanceAddress(nearbyTeacher.addressList);
} else if (nearbyTeacher.latitude && nearbyTeacher.longitude) {
//
const addressList = [{
latitude: nearbyTeacher.latitude,
longitude: nearbyTeacher.longitude
}];
distance = this.calculateDistanceAddress(addressList);
}
//
let userImageUrl = "";
if (typeof nearbyTeacher.userImage === 'string') {
userImageUrl = nearbyTeacher.userImage;
} else if (nearbyTeacher.userImage && Array.isArray(nearbyTeacher.userImage) && nearbyTeacher.userImage.length > 0) {
userImageUrl = nearbyTeacher.userImage[0].url || "";
}
//
this.defaultCompanion = {
name: nearbyTeacher.userName || '宠小二',
gender: nearbyTeacher.gender || '1', // 1-2-
star: nearbyTeacher.likeNum || 0,
distance: distance.toFixed(1),
shortDescription: nearbyTeacher.shortDescription || '专业伴宠师,用心照顾每一位小宠物',
staffImages: [{
url: userImageUrl || "https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png"
}],
year: nearbyTeacher.serviceAge || 1, //
record: nearbyTeacher.commentNum || 0, //
serviceNum: nearbyTeacher.serviceSummaryNum || 0 //
}
console.log('周边伴宠师信息:', this.defaultCompanion);
} else {
console.log('没有找到周边伴宠师或返回数据有误');
if(!data.latitude){
let res = await this.getLocation()
data.latitude = res.latitude
data.longitude = res.longitude
}
getTeacherList(data).then(response => {
if (response.code == 200) {
this.companionList = response.rows
this.calculateTeacherListDistance()
}
}).catch(err => {
console.error('获取周边伴宠师失败:', err);
console.log(response);
})
},
calculateTeacherListDistance(){
this.companionList.forEach(item => {
item.distanceText = this.calculateDistanceAddress(item.appletAddresseList)
})
this.companionList.sort((a,b) => a.distanceText - b.distanceText)
},
getOrder(value) {
if (value) {
@ -975,6 +962,18 @@
background-color: #F5F5F7 !important;
}
.no-data{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.no-data-text{
font-size: 24rpx;
color: #999;
}
}
.home-content {
position: relative;


+ 3
- 1
pages/newOrder/serviceNew.vue View File

@ -29,7 +29,9 @@
</view>
</view>
<view class="order-type-select" v-if="buyInfo.teacher">
<view class="order-type-select"
style="padding-bottom: 0rpx;"
v-if="buyInfo.teacher">
<view class="order-type-title order-type-title-custom"
style="border-radius: 10rpx;">
<view class="order-type-title-main"


+ 0
- 77
pages_order/task/AppletTask.java View File

@ -1,77 +0,0 @@
package com.ruoyi.model.domain;
import java.math.BigDecimal;
import java.time.LocalDateTime;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.ruoyi.common.annotation.Excel;
import com.ruoyi.common.core.domain.BaseAudit;
import lombok.Data;
/**
* 任务中心对象 applet_task
*
* @author daixiande
*/
@Data
public class AppletTask extends BaseAudit {
private static final long serialVersionUID = 1L;
/** 标识 */
private Long id;
/** 当前状态0待接受1以接受 */
@Excel(name = "当前状态0待接受1以接受")
private Integer status;
/** 下单用户标识 */
@Excel(name = "下单用户标识")
private Long memberId;
/** 任务类型名称 */
@Excel(name = "任务类型名称")
private String taskName;
/** 任务小图 */
@Excel(name = "任务小图")
private String taskIcon;
/** 任务报酬 */
@Excel(name = "任务报酬")
private BigDecimal taskMoney;
/** 图片 */
@Excel(name = "图片")
private String image;
/** 标题 */
@Excel(name = "标题")
private String title;
/** 主题 */
@Excel(name = "主题")
private String theme;
/** 任务截至时间 */
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@Excel(name = "任务截至时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime taskEndTime;
/** 任务进度 */
@Excel(name = "任务进度")
private Integer taskState;
/** 审核状态 */
@Excel(name = "审核状态")
private Integer examineState;
/** 审核说明 */
@Excel(name = "审核说明")
private String examineText;
/** 审核图片 */
@Excel(name = "审核图片")
private String examineImage;
/** DEL_FLAG */
private Long delFlag;
}

Loading…
Cancel
Save