590 lines
18 KiB
Vue
590 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<view class="syr-list-page">
|
|||
|
|
<!-- 自定义导航栏 -->
|
|||
|
|
<custom-navbar
|
|||
|
|
title="门店手艺人列表"
|
|||
|
|
:show-back="true"
|
|||
|
|
backgroundColor="#fff"
|
|||
|
|
></custom-navbar>
|
|||
|
|
|
|||
|
|
<!-- 手艺人列表 -->
|
|||
|
|
<scroll-view
|
|||
|
|
class="syr-list-scroll"
|
|||
|
|
scroll-y="true"
|
|||
|
|
:style="{height: scrollViewHeight + 'px'}"
|
|||
|
|
@scrolltolower="loadMore"
|
|||
|
|
>
|
|||
|
|
<view class="syr-list-container">
|
|||
|
|
|
|||
|
|
<!-- 手艺人网格列表 -->
|
|||
|
|
<view class="syr-grid">
|
|||
|
|
<view
|
|||
|
|
v-for="(artisan, index) in artisanList"
|
|||
|
|
:key="artisan.id"
|
|||
|
|
class="syr-card"
|
|||
|
|
@click="goArtisanDetail(artisan)"
|
|||
|
|
>
|
|||
|
|
<!-- 头像部分 -->
|
|||
|
|
<view class="syr-avatar-container">
|
|||
|
|
<image
|
|||
|
|
:src="artisan.avatar || defaultAvatar"
|
|||
|
|
class="syr-avatar"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 信息部分 -->
|
|||
|
|
<view class="syr-info">
|
|||
|
|
<!-- 第一行：名字和距离 -->
|
|||
|
|
<view class="syr-name-row">
|
|||
|
|
<text class="syr-name">{{ artisan.name }}</text>
|
|||
|
|
<view class="syr-distance">
|
|||
|
|
<image
|
|||
|
|
src="/static/images/icons/address_icon.png"
|
|||
|
|
class="distance-icon"
|
|||
|
|
></image>
|
|||
|
|
<text class="distance-text">{{ formatDistance(artisan.distance) }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 第二行：从业经历 -->
|
|||
|
|
<view class="syr-experience-row">
|
|||
|
|
<text class="syr-experience">从业经历</text>
|
|||
|
|
<image
|
|||
|
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/0a9bcad4-a3b2-457f-bdfd-d659d6b1b084.png"
|
|||
|
|
class="experience-icon"
|
|||
|
|
@click.stop="goQualification(artisan)"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 第三行：入驻时间 -->
|
|||
|
|
<view class="syr-join-row">
|
|||
|
|
<text class="syr-join">入驻{{ formatWorkingYears(artisan.working_years) }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载状态 -->
|
|||
|
|
<view class="loading-status">
|
|||
|
|
<text v-if="loading" class="loading-text">加载中...</text>
|
|||
|
|
<text v-if="finished && artisanList.length > 0" class="no-more-text">~ 暂时只有这些了 ~</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 空状态 -->
|
|||
|
|
<!-- <view v-if="!loading && artisanList.length === 0" class="empty-state">
|
|||
|
|
<image
|
|||
|
|
src="/static/images/common/empty.png"
|
|||
|
|
class="empty-image"
|
|||
|
|
></image>
|
|||
|
|
<text class="empty-text">暂无手艺人</text>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from "@/utils/request";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
artisanList: [], // 手艺人列表
|
|||
|
|
loading: false, // 加载状态
|
|||
|
|
finished: false, // 是否已加载完毕
|
|||
|
|
page: 1, // 当前页码
|
|||
|
|
limit: 10, // 每页数量
|
|||
|
|
total: 0, // 总数量
|
|||
|
|
shopId: null, // 店铺ID
|
|||
|
|
scrollViewHeight: 0, // 滚动区域高度
|
|||
|
|
|
|||
|
|
// 默认头像
|
|||
|
|
defaultAvatar: "https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/yh/1756713709528-717.png?x-oss-process=image/resize,p_40"
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad(options) {
|
|||
|
|
// 从路由参数获取店铺ID
|
|||
|
|
if (options.shopId) {
|
|||
|
|
this.shopId = options.shopId;
|
|||
|
|
} else if (options.id) {
|
|||
|
|
// 也可能是从店铺详情页面传过来的id
|
|||
|
|
this.shopId = options.id;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log("接收到的店铺ID:", this.shopId);
|
|||
|
|
|
|||
|
|
// 计算滚动区域高度
|
|||
|
|
this.calculateScrollHeight();
|
|||
|
|
|
|||
|
|
// 获取手艺人列表
|
|||
|
|
this.getArtisanList();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onReady() {
|
|||
|
|
// 页面加载完成后再计算一次高度，确保准确
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.calculateScrollHeight();
|
|||
|
|
}, 100);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 计算滚动区域高度
|
|||
|
|
calculateScrollHeight() {
|
|||
|
|
const systemInfo = uni.getSystemInfoSync();
|
|||
|
|
// 获取导航栏高度，假设为44px（可以根据实际情况调整）
|
|||
|
|
const navBarHeight = 44;
|
|||
|
|
// 状态栏高度
|
|||
|
|
const statusBarHeight = systemInfo.statusBarHeight || 0;
|
|||
|
|
// 计算可用高度
|
|||
|
|
this.scrollViewHeight = systemInfo.windowHeight - (navBarHeight + statusBarHeight);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取手艺人列表
|
|||
|
|
getArtisanList() {
|
|||
|
|
if (this.loading || this.finished) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.loading = true;
|
|||
|
|
|
|||
|
|
// 获取用户位置
|
|||
|
|
const userLocation = this.getUserLocation();
|
|||
|
|
console.log("获取到的用户位置:", userLocation);
|
|||
|
|
|
|||
|
|
const params = {
|
|||
|
|
page: this.page,
|
|||
|
|
limit: this.limit
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (this.shopId) {
|
|||
|
|
params.sjid = this.shopId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 传递位置参数给后端
|
|||
|
|
if (userLocation) {
|
|||
|
|
params.userLat = userLocation.latitude;
|
|||
|
|
params.userLngz = userLocation.longitude;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
request
|
|||
|
|
.post("/user/sjSyrBind/syrList", params)
|
|||
|
|
.then((res) => {
|
|||
|
|
console.log("手艺人列表接口返回:", res);
|
|||
|
|
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
const resultData = res.data || {};
|
|||
|
|
const list = resultData.list || [];
|
|||
|
|
const total = resultData.count || list.length || 0;
|
|||
|
|
|
|||
|
|
// 格式化数据时传入用户位置用于距离计算
|
|||
|
|
const formattedList = this.formatArtisanList(list, userLocation);
|
|||
|
|
console.log("格式化后的列表（包含距离）:", formattedList);
|
|||
|
|
|
|||
|
|
if (this.page === 1) {
|
|||
|
|
this.artisanList = formattedList;
|
|||
|
|
} else {
|
|||
|
|
this.artisanList = [...this.artisanList, ...formattedList];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.total = total;
|
|||
|
|
|
|||
|
|
if (list.length < this.limit) {
|
|||
|
|
this.finished = true;
|
|||
|
|
} else {
|
|||
|
|
this.page += 1;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.error("接口返回错误:", res);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || '获取手艺人列表失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
console.error("获取手艺人列表失败:", err);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '网络错误，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化手艺人列表数据
|
|||
|
|
formatArtisanList(list, userLocation = null) {
|
|||
|
|
if (!list || list.length === 0) {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果没有传入用户位置，尝试获取
|
|||
|
|
if (!userLocation) {
|
|||
|
|
userLocation = this.getUserLocation();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 模拟数据，用于调试布局
|
|||
|
|
const mockData = [
|
|||
|
|
{ id: 1, name: "梅子", working_years: "1年6个月", distance: 32.29 },
|
|||
|
|
{ id: 2, name: "王安宇", working_years: "10年10个月", distance: 2.29 },
|
|||
|
|
{ id: 3, name: "王安宇...", working_years: "10年10个月", distance: 2.29 },
|
|||
|
|
{ id: 4, name: "梅子", working_years: "1年6个月", distance: 2.29 }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 正式环境使用接口数据
|
|||
|
|
const dataToUse = list.length > 0 ? list : mockData;
|
|||
|
|
|
|||
|
|
return list.map((item) => {
|
|||
|
|
// 计算从业年限
|
|||
|
|
let workingYears = "0年0个月";
|
|||
|
|
if (item.working_years) {
|
|||
|
|
workingYears = item.working_years;
|
|||
|
|
} else if (item.add_time) {
|
|||
|
|
// 从 add_time 计算
|
|||
|
|
const createdDate = new Date(item.add_time);
|
|||
|
|
const now = new Date();
|
|||
|
|
const years = now.getFullYear() - createdDate.getFullYear();
|
|||
|
|
const months = now.getMonth() - createdDate.getMonth();
|
|||
|
|
let totalMonths = years * 12 + months;
|
|||
|
|
if (totalMonths < 0) totalMonths = 0;
|
|||
|
|
const formattedYears = Math.floor(totalMonths / 12);
|
|||
|
|
const formattedMonths = totalMonths % 12;
|
|||
|
|
workingYears = `${formattedYears}年${formattedMonths}个月`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算距离
|
|||
|
|
let distance = null;
|
|||
|
|
if (userLocation && userLocation.latitude && userLocation.longitude &&
|
|||
|
|
item.latitude && item.longitude) {
|
|||
|
|
try {
|
|||
|
|
const lat1 = parseFloat(userLocation.latitude);
|
|||
|
|
const lng1 = parseFloat(userLocation.longitude);
|
|||
|
|
const lat2 = parseFloat(item.latitude);
|
|||
|
|
const lng2 = parseFloat(item.longitude);
|
|||
|
|
|
|||
|
|
// 调用距离计算函数
|
|||
|
|
distance = this.calculateDistance(lat1, lng1, lat2, lng2);
|
|||
|
|
console.log(`计算距离: 用户(${lat1},${lng1}) -> 手艺人(${lat2},${lng2}) = ${distance}km`);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error("计算距离失败:", e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
id: item.id || item.user_id || '',
|
|||
|
|
name: item.name || item.nick_name || '手艺人',
|
|||
|
|
avatar: item.head_photo,
|
|||
|
|
working_years: workingYears,
|
|||
|
|
distance: distance, // 距离字段
|
|||
|
|
latitude: item.latitude, // 保留经纬度供后续使用
|
|||
|
|
longitude: item.longitude,
|
|||
|
|
service_count: item.service_count || 0,
|
|||
|
|
good_rating: item.good_rating || '100%',
|
|||
|
|
default_times: item.default_times,
|
|||
|
|
work_state: item.work_state,
|
|||
|
|
is_ok: item.is_ok,
|
|||
|
|
is_del: item.is_del
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化从业年限显示
|
|||
|
|
formatWorkingYears(yearsStr) {
|
|||
|
|
// 如果已经是格式化好的字符串，直接返回
|
|||
|
|
if (typeof yearsStr === 'string') {
|
|||
|
|
return yearsStr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 否则尝试转换
|
|||
|
|
try {
|
|||
|
|
// 假设是月份数
|
|||
|
|
const months = parseInt(yearsStr);
|
|||
|
|
if (!isNaN(months)) {
|
|||
|
|
const y = Math.floor(months / 12);
|
|||
|
|
const m = months % 12;
|
|||
|
|
return `${y}年${m}个月`;
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error("格式化从业年限失败:", e);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return "0年0个月";
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 添加距离计算函数（Haversine公式）
|
|||
|
|
calculateDistance(lat1, lng1, lat2, lng2) {
|
|||
|
|
// 将度转换为弧度
|
|||
|
|
const toRad = (angle) => (angle * Math.PI) / 180;
|
|||
|
|
|
|||
|
|
const R = 6371; // 地球半径（公里）
|
|||
|
|
const dLat = toRad(lat2 - lat1);
|
|||
|
|
const dLng = toRad(lng2 - lng1);
|
|||
|
|
|
|||
|
|
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|||
|
|
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
|
|||
|
|
Math.sin(dLng / 2) * Math.sin(dLng / 2);
|
|||
|
|
|
|||
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|||
|
|
const distance = R * c;
|
|||
|
|
|
|||
|
|
return parseFloat(distance.toFixed(2)); // 保留2位小数
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取用户位置（修改为返回完整对象）
|
|||
|
|
getUserLocation() {
|
|||
|
|
let addressRes = {};
|
|||
|
|
let userAdrees = uni.getStorageSync("userAdrees");
|
|||
|
|
|
|||
|
|
if (userAdrees) {
|
|||
|
|
addressRes = userAdrees.addressRes;
|
|||
|
|
} else {
|
|||
|
|
addressRes = getApp().globalData.addressRes;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保返回包含经纬度的对象
|
|||
|
|
if (addressRes && addressRes.latitude && addressRes.longitude) {
|
|||
|
|
return {
|
|||
|
|
latitude: parseFloat(addressRes.latitude),
|
|||
|
|
longitude: parseFloat(addressRes.longitude),
|
|||
|
|
address: addressRes.address
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return null;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化距离显示
|
|||
|
|
formatDistance(distance) {
|
|||
|
|
if (!distance && distance !== 0) {
|
|||
|
|
return "距离未知";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是字符串，尝试转换为数字
|
|||
|
|
const numDistance = typeof distance === 'string' ? parseFloat(distance) : distance;
|
|||
|
|
|
|||
|
|
if (isNaN(numDistance)) {
|
|||
|
|
return distance;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保留两位小数
|
|||
|
|
return `${numDistance.toFixed(2)}Km`;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载更多
|
|||
|
|
loadMore() {
|
|||
|
|
if (!this.finished) {
|
|||
|
|
this.getArtisanList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 跳转到手艺人（员工）详情页
|
|||
|
|
goArtisanDetail(artisan) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/user/employee-detail?id=${artisan.id}`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 跳转到资质页面
|
|||
|
|
goQualification(artisan) {
|
|||
|
|
// 跳转到资质页面，传递手艺人ID
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/user/qualifications?id=${artisan.id}`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 下拉刷新
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
// 重置页码和状态
|
|||
|
|
this.page = 1;
|
|||
|
|
this.finished = false;
|
|||
|
|
this.artisanList = [];
|
|||
|
|
|
|||
|
|
// 重新加载数据
|
|||
|
|
this.getArtisanList();
|
|||
|
|
|
|||
|
|
// 停止下拉刷新
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.syr-list-page {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
|
|||
|
|
.syr-list-scroll {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.syr-list-container {
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
padding: 0 35rpx;
|
|||
|
|
|
|||
|
|
.syr-header {
|
|||
|
|
padding: 30rpx 0 20rpx;
|
|||
|
|
|
|||
|
|
.syr-count {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.syr-grid {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.syr-card {
|
|||
|
|
width: 331rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|||
|
|
|
|||
|
|
.syr-avatar-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 327rpx;
|
|||
|
|
|
|||
|
|
.syr-avatar {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.syr-info {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
|
|||
|
|
.syr-name-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
|
|||
|
|
.syr-name {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.syr-distance {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.distance-icon {
|
|||
|
|
transform: translateY(-1rpx);
|
|||
|
|
width: 18rpx;
|
|||
|
|
height: 21rpx;
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.distance-text {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.syr-experience-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
|
|||
|
|
.experience-icon {
|
|||
|
|
width: 68rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.syr-experience {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 37rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-right: 14rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.syr-join-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.join-icon {
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.syr-join {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-status {
|
|||
|
|
padding: 40rpx 0;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.loading-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.no-more-text {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #CECECE;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 100rpx 0;
|
|||
|
|
|
|||
|
|
.empty-image {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|