first commit
This commit is contained in:
@@ -0,0 +1,689 @@
|
||||
<template>
|
||||
|
||||
<view class="skeleton-container" v-if="isLoading">
|
||||
<!-- 用户信息区域骨架 -->
|
||||
<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"></view>
|
||||
</view>
|
||||
<view class="skeleton-stat-item">
|
||||
<view class="skeleton-stat-label"></view>
|
||||
<view class="skeleton-stat-value"></view>
|
||||
</view>
|
||||
<view class="skeleton-stat-item">
|
||||
<view class="skeleton-stat-label"></view>
|
||||
<view class="skeleton-stat-value"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 接单按钮骨架 -->
|
||||
<view class="skeleton-action-section">
|
||||
<view class="skeleton-accept-orders-btn"></view>
|
||||
</view>
|
||||
|
||||
<!-- 消息通知骨架 -->
|
||||
<view class="skeleton-message-header">
|
||||
<view class="skeleton-message-title"></view>
|
||||
<view class="skeleton-message-more"></view>
|
||||
</view>
|
||||
|
||||
<!-- 订单消息卡片骨架 -->
|
||||
<view class="skeleton-message-card">
|
||||
<view class="skeleton-card-avatar"></view>
|
||||
<view class="skeleton-card-content">
|
||||
<view class="skeleton-card-header">
|
||||
<view class="skeleton-card-title"></view>
|
||||
<view class="skeleton-card-time"></view>
|
||||
</view>
|
||||
<view class="skeleton-order-info"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 附近高价单骨架 -->
|
||||
<view class="skeleton-high-price-orders">
|
||||
<view class="skeleton-section-title"></view>
|
||||
<!-- 3个订单项骨架 -->
|
||||
<view class="skeleton-order-item" v-for="(item, 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-restaurant-name"></view>
|
||||
<view class="skeleton-pickup-time"></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="" style="margin: 20rpx; display: flex; align-items: center; justify-content: space-between; ">
|
||||
<view class="" style="font-size: 32rpx; font-weight: 600;">
|
||||
消息通知
|
||||
</view>
|
||||
<view class="" @click="Service.GoPage('/pages/my/noticeList')"
|
||||
style="display: flex; align-items: baseline; ">
|
||||
查看更多
|
||||
<up-icon size="14" bold="true" name="arrow-right"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style=" display: flex; margin: 20rpx; padding: 20rpx 30rpx; background-color: #fff; border-radius: 20rpx;">
|
||||
<view class=""
|
||||
style="width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #FAFAFA; display: flex; align-items: center; justify-content: center; ">
|
||||
<image :src="Service.GetIconImg('/static/index/home/shop.png')" style="width: 50rpx; height: 50rpx;"
|
||||
alt=""></image>
|
||||
</view>
|
||||
<view class="" style="flex: 1; margin-left: 20rpx; ">
|
||||
<view class="" style="display: flex; justify-content: space-between;">
|
||||
<view class="restaurant-name" style="display: flex;align-items: center;">
|
||||
订单已完成配送
|
||||
<view class=""
|
||||
style=" margin-left: 10rpx; width: 10rpx; height: 10rpx; border-radius: 50%; background-color: red;">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="color: #333;font-size: 26rpx; ">
|
||||
30分钟前
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style=" color: #333; font-size: 28rpx;">
|
||||
您的订单#DD20251015123456 已完成配送，请确认收货
|
||||
</view>
|
||||
</view>
|
||||
</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-container {
|
||||
background-color: #F6f6f6;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* 用户信息区域骨架 */
|
||||
.skeleton-user-info {
|
||||
background-color: #E6F7FF;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.skeleton-user-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #e6e6e6;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-user-details {
|
||||
margin-left: 20rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.skeleton-user-name {
|
||||
width: 200rpx;
|
||||
height: 36rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 18rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-user-id {
|
||||
width: 300rpx;
|
||||
height: 28rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 14rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-setting-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 16rpx;
|
||||
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;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.skeleton-stat-label {
|
||||
width: 100rpx;
|
||||
height: 28rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 14rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-stat-value {
|
||||
width: 80rpx;
|
||||
height: 36rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 18rpx;
|
||||
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: #e6e6e6;
|
||||
border-radius: 45rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* 消息通知骨架 */
|
||||
.skeleton-message-header {
|
||||
margin: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.skeleton-message-title {
|
||||
width: 150rpx;
|
||||
height: 32rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 16rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-message-more {
|
||||
width: 120rpx;
|
||||
height: 28rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 14rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* 订单消息卡片骨架 */
|
||||
.skeleton-message-card {
|
||||
display: flex;
|
||||
margin: 20rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-card-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #e6e6e6;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-card-content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.skeleton-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skeleton-card-title {
|
||||
width: 200rpx;
|
||||
height: 28rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 14rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-card-time {
|
||||
width: 100rpx;
|
||||
height: 26rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 13rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-order-info {
|
||||
width: 100%;
|
||||
height: 28rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 14rpx;
|
||||
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: #e6e6e6;
|
||||
border-radius: 16rpx;
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.skeleton-order-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.skeleton-high-price-tag {
|
||||
width: 80rpx;
|
||||
height: 24rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 12rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-order-price {
|
||||
width: 60rpx;
|
||||
height: 32rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 16rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-restaurant-name {
|
||||
width: 180rpx;
|
||||
height: 30rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 15rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-pickup-time {
|
||||
width: 150rpx;
|
||||
height: 26rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 13rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-distance {
|
||||
width: 120rpx;
|
||||
height: 26rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 13rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-address {
|
||||
width: 55%;
|
||||
height: 26rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 13rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-grab-order-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 30rpx;
|
||||
position: absolute;
|
||||
bottom: 25rpx;
|
||||
right: 25rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* 加载更多骨架 */
|
||||
.skeleton-loadmore {
|
||||
|
||||
height: 60rpx;
|
||||
margin: 20rpx 200rpx;
|
||||
background-color: #e6e6e6;
|
||||
border-radius: 10rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* 骨架屏动画 */
|
||||
@keyframes skeleton-loading {
|
||||
0% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户信息区域 */
|
||||
.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;
|
||||
font-weight: 600;
|
||||
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>
|
||||
Reference in New Issue
Block a user