625 lines
13 KiB
Plaintext
625 lines
13 KiB
Plaintext
<template>
|
|
<view v-if="isLoading" class="rider-home-skeleton">
|
|
<!-- 用户信息区域骨架 -->
|
|
<view class="skeleton-user-info">
|
|
<view class="skeleton-user-header">
|
|
<view class="skeleton-avatar"></view>
|
|
<view class="skeleton-user-details">
|
|
<view class="skeleton-user-name"></view>
|
|
<view class="skeleton-user-id"></view>
|
|
</view>
|
|
<view class="skeleton-setting-icon"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计数据区域骨架 -->
|
|
<view class="skeleton-stats-section">
|
|
<view class="skeleton-stat-item">
|
|
<view class="skeleton-stat-label"></view>
|
|
<view class="skeleton-stat-value income"></view>
|
|
</view>
|
|
<view class="skeleton-stat-item">
|
|
<view class="skeleton-stat-label"></view>
|
|
<view class="skeleton-stat-value completed"></view>
|
|
</view>
|
|
<view class="skeleton-stat-item">
|
|
<view class="skeleton-stat-label"></view>
|
|
<view class="skeleton-stat-value ongoing"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 接单按钮骨架 -->
|
|
<view class="skeleton-action-section">
|
|
<view class="skeleton-accept-orders-btn"></view>
|
|
</view>
|
|
|
|
<!-- 附近高价单骨架 -->
|
|
<view class="skeleton-high-price-orders">
|
|
<view class="skeleton-section-title"></view>
|
|
|
|
<!-- 循环生成多个订单项骨架 -->
|
|
<view class="skeleton-order-item" v-for="index in 3" :key="index">
|
|
<view class="skeleton-order-header">
|
|
<view class="skeleton-high-price-tag"></view>
|
|
<view class="skeleton-order-price"></view>
|
|
</view>
|
|
<view class="skeleton-order-content">
|
|
<view class="skeleton-restaurant-name"></view>
|
|
<view class="skeleton-pickup-time">
|
|
<view class="skeleton-clock-icon"></view>
|
|
<view class="skeleton-pickup-time-text"></view>
|
|
</view>
|
|
</view>
|
|
<view class="skeleton-distance"></view>
|
|
<view class="skeleton-address"></view>
|
|
<view class="skeleton-grab-order-btn"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多骨架 -->
|
|
<view class="skeleton-loadmore"></view>
|
|
</view>
|
|
|
|
<!-- 实际内容 -->
|
|
<view v-else class="rider-home">
|
|
<!-- 用户信息区域 -->
|
|
<view class="user-info">
|
|
<view class="user-header">
|
|
<image :src="Service.GetMateUrlByImg('/static/dele/home/test.jpeg')" mode="aspectFit" class="avatar">
|
|
</image>
|
|
<view class="user-details">
|
|
<text class="user-name">大大怪将军</text>
|
|
<text class="user-id">ID: LN007 · 已下线</text>
|
|
</view>
|
|
<up-icon @click="Service.GoPage('/pages/my/edit')" name="setting" size="32rpx" color="#333333"></up-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计数据区域 -->
|
|
<view class="stats-section">
|
|
<view class="stat-item">
|
|
<text class="stat-label">今日收入</text>
|
|
<text class="stat-value income">¥86.50</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-label">已完成</text>
|
|
<text class="stat-value completed">5单</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-label">进行中</text>
|
|
<text class="stat-value ongoing">6单</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 接单按钮 -->
|
|
<view class="action-section">
|
|
<up-button type="primary" shape="circle" size="default" class="accept-orders-btn"
|
|
@click="toggleAcceptOrders">{{ userStatus === '已上线' ? '接单中 · 点击暂停' : '点击开始接单' }}</up-button>
|
|
</view>
|
|
|
|
<!-- 附近高价单 -->
|
|
<view class="high-price-orders">
|
|
<view class="section-title">附近高价单</view>
|
|
<view class="order-item" @click="Service.GoPage('/pages/order/grabOrder')" v-for="(order, index) in 3" :key="index">
|
|
<view class="order-header">
|
|
<view class="high-price-tag">高价单</view>
|
|
<text class="order-price">¥20</text>
|
|
</view>
|
|
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
|
|
<text class="restaurant-name">王记炸酱面</text>
|
|
<view class="pickup-time">
|
|
<up-icon name="clock" size="24rpx" color="#FF9500"></up-icon>
|
|
<text class="pickup-time-text">12:30 前取餐</text>
|
|
</view>
|
|
</view>
|
|
<text class="distance">距您 0.8km</text>
|
|
<text class="address">朝阳区三里屯路123号</text>
|
|
<up-button shape="circle" type="primary" size="mini" class="grab-order-btn"
|
|
:style="{backgroundColor: '#1890FF'}">立即抢单</up-button>
|
|
</view>
|
|
</view>
|
|
<up-loadmore :status="status" />
|
|
<view class="" style="width: 100%; height: 60rpx; ">
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { ref, onMounted } from 'vue';
|
|
import { Service } from '@/Service/Service';
|
|
|
|
|
|
// 加载状态
|
|
const isLoading = ref(true);
|
|
|
|
let userStatus = ref('已下线')
|
|
let status = ref('nomore')
|
|
|
|
onLoad(() => {
|
|
setTimeout(() => {
|
|
isLoading.value = false
|
|
}, 1500)
|
|
})
|
|
|
|
// 切换接单状态
|
|
const toggleAcceptOrders = () => {
|
|
userStatus.value = userStatus.value === '已上线' ? '已下线' : '已上线';
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page{
|
|
background-color: #F6f6f6;
|
|
}
|
|
|
|
/* 骨架屏通用样式 */
|
|
.skeleton-user-info,
|
|
.skeleton-stats-section,
|
|
.skeleton-action-section,
|
|
.skeleton-high-price-orders,
|
|
.skeleton-order-item,
|
|
.skeleton-order-header,
|
|
.skeleton-order-content,
|
|
.skeleton-pickup-time {
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
/* 用户信息区域骨架 */
|
|
.skeleton-user-info {
|
|
background-color: #E6F7FF;
|
|
padding: 40rpx 30rpx;
|
|
}
|
|
|
|
.skeleton-user-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.skeleton-avatar {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: #d0d0d0;
|
|
border: 1px solid #fff;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-user-details {
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.skeleton-user-name {
|
|
width: 200rpx;
|
|
height: 36rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 8rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-user-id {
|
|
width: 250rpx;
|
|
height: 28rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 6rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-setting-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 6rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
/* 统计数据区域骨架 */
|
|
.skeleton-stats-section {
|
|
background-color: #ffffff;
|
|
margin: 20rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.skeleton-stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.skeleton-stat-label {
|
|
width: 120rpx;
|
|
height: 28rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 10rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-stat-value {
|
|
width: 150rpx;
|
|
height: 36rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 6rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
/* 接单按钮骨架 */
|
|
.skeleton-action-section {
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.skeleton-accept-orders-btn {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 45rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
/* 附近高价单骨架 */
|
|
.skeleton-high-price-orders {
|
|
margin-top: 20rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.skeleton-section-title {
|
|
width: 200rpx;
|
|
height: 32rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 20rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-order-item {
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 25rpx;
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.skeleton-order-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.skeleton-high-price-tag {
|
|
width: 100rpx;
|
|
height: 32rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 16rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-order-price {
|
|
width: 80rpx;
|
|
height: 32rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 6rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-order-content {
|
|
margin-bottom: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.skeleton-restaurant-name {
|
|
width: 200rpx;
|
|
height: 30rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 12rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-pickup-time {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.skeleton-clock-icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 4rpx;
|
|
margin-right: 8rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-pickup-time-text {
|
|
width: 200rpx;
|
|
height: 26rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 4rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-distance {
|
|
width: 150rpx;
|
|
height: 26rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 4rpx;
|
|
margin-bottom: 12rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-address {
|
|
width: 400rpx;
|
|
height: 26rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 4rpx;
|
|
margin-bottom: 20rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-grab-order-btn {
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 30rpx;
|
|
position: absolute;
|
|
bottom: 25rpx;
|
|
right: 25rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
/* 加载更多骨架 */
|
|
.skeleton-loadmore {
|
|
margin: 0 250rpx;
|
|
height: 40rpx;
|
|
background-color: #d0d0d0;
|
|
margin-bottom: 20rpx;
|
|
opacity: 0.6;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
|
|
|
|
/* 骨架屏加载动画 */
|
|
@keyframes skeleton-loading {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 设置延迟，让骨架屏各部分加载动画错开 */
|
|
.skeleton-user-info {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.skeleton-stats-section {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.skeleton-action-section {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.skeleton-high-price-orders {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.skeleton-order-item:nth-child(2) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.skeleton-order-item:nth-child(3) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.skeleton-order-item:nth-child(4) {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
// 骨架屏end
|
|
|
|
|
|
|
|
.rider-home {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* 用户信息区域 */
|
|
.user-info {
|
|
background-color: #E6F7FF;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.user-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
border: 1px solid #fff;
|
|
}
|
|
|
|
.user-details {
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
display: block;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.user-id {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
/* 统计数据区域 */
|
|
.stats-section {
|
|
background-color: #ffffff;
|
|
margin: 20rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.income {
|
|
color: var(--nav-diluted);
|
|
}
|
|
|
|
.completed {
|
|
color: var(--nav-vice);
|
|
}
|
|
|
|
.ongoing {
|
|
color: #FF9500;
|
|
}
|
|
|
|
/* 接单按钮 */
|
|
.action-section {
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.accept-orders-btn {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
font-size: 32rpx;
|
|
background-color: #52C41A;
|
|
}
|
|
|
|
/* 附近高价单 */
|
|
.high-price-orders {
|
|
margin-top: 20rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.order-item {
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 25rpx;
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.order-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.high-price-tag {
|
|
background-color: #FFF1F0;
|
|
color: #FF4D4F;
|
|
font-size: 24rpx;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.order-price {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #FF4D4F;
|
|
}
|
|
|
|
.restaurant-name {
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
display: block;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.pickup-time {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.pickup-time-text {
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.distance {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
display: block;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.address {
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
display: block;
|
|
margin-bottom: 20rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.grab-order-btn {
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
font-size: 26rpx;
|
|
position: absolute;
|
|
bottom: 25rpx;
|
|
right: 25rpx;
|
|
}
|
|
|
|
/* uview组件样式覆盖 */
|
|
::v-deep .u-button--primary {
|
|
background-color: var(--nav-vice);
|
|
border-color: var(--nav-vice);
|
|
}
|
|
|
|
::v-deep .u-button--mini {
|
|
background-color: var(--nav-mian);
|
|
border-color: var(--nav-mian);
|
|
}
|
|
</style> |