feat: 首页骨架屏

This commit is contained in:
gcd 2025-03-31 23:33:42 +08:00
parent 972f54416e
commit 1edd204961
2 changed files with 335 additions and 5 deletions

View File

@ -0,0 +1,328 @@
<template name="skeleton">
<view class="sk-container">
<view class="ctr ctr data-v-1cf27b2a data-v-1cf27b2a">
<view class="fixed-top fixed-top data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-top/me-top" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="me-top top--me-top data-v-e4d1a339 top--data-v-e4d1a339">
<view class="status-bar top--status-bar data-v-e4d1a339 top--data-v-e4d1a339" style="height:47px"></view>
<view class="capsule top--capsule flex-c top--flex-c data-v-e4d1a339 top--data-v-e4d1a339" style="height:40px">
<view class="icon-ctr top--icon-ctr flex-c top--flex-c data-v-e4d1a339 top--data-v-e4d1a339">
<image class="icon top--icon data-v-e4d1a339 top--data-v-e4d1a339 sk-image" mode="aspectFill"></image>
</view>
<text class="title top--title data-v-e4d1a339 top--data-v-e4d1a339 sk-transparent sk-text-14-2857-544 sk-text">接单大厅</text>
</view>
</view>
</view>
</view>
<view is="components/me-empty-space/me-empty-space" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="me-empty-space space--me-empty-space" style="height:87px"></view>
</view>
<view class="list list data-v-1cf27b2a data-v-1cf27b2a">
<view class="order-item order-item data-v-1cf27b2a data-v-1cf27b2a">
<view class="top top flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view class="type flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-11 sk-text"></view>
<view class="price flex-r important-color data-v-1cf27b2a sk-transparent sk-text-14-2857-661 sk-text"></view>
</view>
<view class="content content flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view class="left left data-v-1cf27b2a data-v-1cf27b2a">
<view class="address-name flex-l data-v-1cf27b2a sk-transparent sk-text-15-9091-8 sk-text">安徽省蚌埠市禹会区钓鱼台街道迎河路</view>
<view class="address flex-l data-v-1cf27b2a sk-transparent sk-text-18-1818-59 sk-text">安徽省蚌埠市禹会区</view>
<view class="time-ctr time-ctr flex-l flex-l data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
<text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-time icon--icon-time sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text style="line-height: 60rpx;" class="time data-v-1cf27b2a sk-transparent sk-text-18-1818-121 sk-text">周日 25年3月23日 14:30</text>
</view>
</view>
<view class="right right data-v-1cf27b2a data-v-1cf27b2a">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
<text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-navigation icon--icon-navigation sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 30px; line-height: 30px;"></text>
</view>
</view>
</view>
<view class="distance flex-c data-v-1cf27b2a sk-transparent sk-text-18-1818-876 sk-text">7.54公里</view>
</view>
</view>
<view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付订金123.00元抵扣200元</view>
<view class="btn-ctr btn-ctr flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" hover-class="fixed-mask-layer-radius8" hover-start-time="0" hover-stay-time="50" style="width:230px;margin-top:0;margin-bottom:0">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:#EEEEEE;color:#FFFFFF">
<view class="icon button--icon data-v-c61a7656 button--data-v-c61a7656">
<view is="components/me-icon/me-icon" class="data-v-c61a7656 button--data-v-c61a7656">
<view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
<text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-flashlight icon--icon-flashlight sk-pseudo sk-pseudo-circle" style="color: #FFFFFF; font-size: 22px; line-height: 22px;"></text>
</view>
</view>
</view>
<text class="text button--text data-v-c61a7656 button--data-v-c61a7656 sk-transparent sk-text-34-3750-426 sk-text" style="background-position-x: 50%;">确认接单</text>
</view>
</view>
</view>
<view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" hover-class="fixed-mask-layer-radius8" hover-start-time="0" hover-stay-time="50" style="width:83px;margin-top:0;margin-bottom:0">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:#EEEEEE;color:var(--titleColor)">
<text class="text button--text data-v-c61a7656 button--data-v-c61a7656 sk-transparent sk-text-34-3750-763 sk-text" style="background-position-x: 50%;"> </text>
</view>
</view>
</view>
</view>
</view>
<view class="order-item order-item data-v-1cf27b2a data-v-1cf27b2a">
<view class="top top flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view class="type flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-11 sk-text"></view>
<view class="price flex-r important-color data-v-1cf27b2a sk-transparent sk-text-14-2857-661 sk-text"></view>
</view>
<view class="content content flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view class="left left data-v-1cf27b2a data-v-1cf27b2a">
<view class="address-name flex-l data-v-1cf27b2a sk-transparent sk-text-15-9091-8 sk-text">安徽省蚌埠市禹会区钓鱼台街道迎河路</view>
<view class="address flex-l data-v-1cf27b2a sk-transparent sk-text-18-1818-59 sk-text">安徽省蚌埠市禹会区</view>
<view class="time-ctr time-ctr flex-l flex-l data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
<text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-time icon--icon-time sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text style="line-height: 60rpx;" class="time data-v-1cf27b2a sk-transparent sk-text-18-1818-121 sk-text">周日 25年3月23日 14:30</text>
</view>
</view>
<view class="right right data-v-1cf27b2a data-v-1cf27b2a">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
<text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-navigation icon--icon-navigation sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 30px; line-height: 30px;"></text>
</view>
</view>
</view>
<view class="distance flex-c data-v-1cf27b2a sk-transparent sk-text-18-1818-876 sk-text">7.54公里</view>
</view>
</view>
<view class="discount flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-318 sk-text">已支付订金123.00元抵扣200元</view>
<view class="btn-ctr btn-ctr flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" hover-class="fixed-mask-layer-radius8" hover-start-time="0" hover-stay-time="50" style="width:230px;margin-top:0;margin-bottom:0">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:#EEEEEE;color:#FFFFFF">
<view class="icon button--icon data-v-c61a7656 button--data-v-c61a7656">
<view is="components/me-icon/me-icon" class="data-v-c61a7656 button--data-v-c61a7656">
<view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
<text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-flashlight icon--icon-flashlight sk-pseudo sk-pseudo-circle" style="color: #FFFFFF; font-size: 22px; line-height: 22px;"></text>
</view>
</view>
</view>
<text class="text button--text data-v-c61a7656 button--data-v-c61a7656 sk-transparent sk-text-34-3750-426 sk-text" style="background-position-x: 50%;">确认接单</text>
</view>
</view>
</view>
<view is="components/me-button/me-button" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="btn-container button--btn-container data-v-c61a7656 button--data-v-c61a7656" hover-class="fixed-mask-layer-radius8" hover-start-time="0" hover-stay-time="50" style="width:83px;margin-top:0;margin-bottom:0">
<view class="data-v-c61a7656 button--data-v-c61a7656 flex-c button--flex-c btn button--btn" style="background-color:#EEEEEE;color:var(--titleColor)">
<text class="text button--text data-v-c61a7656 button--data-v-c61a7656 sk-transparent sk-text-34-3750-763 sk-text" style="background-position-x: 50%;"> </text>
</view>
</view>
</view>
</view>
</view>
<view class="order-item order-item data-v-1cf27b2a data-v-1cf27b2a">
<view class="top top flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view class="type flex-l data-v-1cf27b2a sk-transparent sk-text-14-2857-955 sk-text">灶台维修</view>
<view class="price flex-r important-color data-v-1cf27b2a sk-transparent sk-text-14-2857-608 sk-text"></view>
</view>
<view style="min-height: auto" class="content content flex-sb flex-sb data-v-1cf27b2a data-v-1cf27b2a">
<view class="left left data-v-1cf27b2a data-v-1cf27b2a">
<view class="address-name flex-l data-v-1cf27b2a sk-transparent sk-text-15-9091-504 sk-text">安徽省蚌埠市禹会区钓鱼台街道迎河路</view>
</view>
<view class="right right data-v-1cf27b2a data-v-1cf27b2a">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-1cf27b2a data-v-1cf27b2a">
<view is="components/me-icon/me-icon" class="data-v-1cf27b2a data-v-1cf27b2a">
<view class="flex-c icon--flex-c data-v-f0c409e8 icon--data-v-f0c409e8">
<text class="me-icon icon--me-icon data-v-f0c409e8 icon--data-v-f0c409e8 icon-navigation icon--icon-navigation sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 30px; line-height: 30px;"></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.ctr {
padding: 0 32rpx;
box-sizing: border-box;
.fixed-top {
position: fixed;
top: 0;
background-color: var(--pageBgColor);
width: 686rpx;
}
.refresh {
width: 108rpx;
height: 108rpx;
background: var(--themeColor);
border-radius: 50%;
position: fixed;
bottom: 64rpx;
right: 32rpx;
}
.rotate {
animation: spin 0.5s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
.order-item {
.discount {
padding: 0!important;
}
}
}
</style>
<style>
.sk-transparent {
color: transparent !important;
}
.sk-text-14-2857-544 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 44.8000rpx;
position: relative !important;
}
.sk-text {
background-origin: content-box !important;
background-clip: content-box !important;
background-color: transparent !important;
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-14-2857-11 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-661 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-15-9091-8 {
background-image: linear-gradient(transparent 15.9091%, #EEEEEE 0%, #EEEEEE 84.0909%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-59 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-981 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-876 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-318 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-text-34-3750-426 {
background-image: linear-gradient(transparent 34.3750%, #EEEEEE 0%, #EEEEEE 65.6250%, transparent 0%) !important;
background-size: 100% 96.0000rpx;
position: relative !important;
}
.sk-text-34-3750-763 {
background-image: linear-gradient(transparent 34.3750%, #EEEEEE 0%, #EEEEEE 65.6250%, transparent 0%) !important;
background-size: 100% 96.0000rpx;
position: relative !important;
}
.sk-text-14-2857-151 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-853 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-15-9091-270 {
background-image: linear-gradient(transparent 15.9091%, #EEEEEE 0%, #EEEEEE 84.0909%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-826 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-121 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-983 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-100 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-text-34-3750-322 {
background-image: linear-gradient(transparent 34.3750%, #EEEEEE 0%, #EEEEEE 65.6250%, transparent 0%) !important;
background-size: 100% 96.0000rpx;
position: relative !important;
}
.sk-text-34-3750-439 {
background-image: linear-gradient(transparent 34.3750%, #EEEEEE 0%, #EEEEEE 65.6250%, transparent 0%) !important;
background-size: 100% 96.0000rpx;
position: relative !important;
}
.sk-text-14-2857-955 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-608 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-15-9091-504 {
background-image: linear-gradient(transparent 15.9091%, #EEEEEE 0%, #EEEEEE 84.0909%, transparent 0%) !important;
position: relative !important;
}
.sk-image {
background: #EFEFEF !important;
}
.sk-pseudo::before, .sk-pseudo::after {
background: #EFEFEF !important;
background-image: none !important;
color: transparent !important;
border-color: transparent !important;
}
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
border-radius: 0 !important;
}
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
border-radius: 50% !important;
}
.sk-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}
</style>
<script setup lang="ts">
</script>

View File

@ -1,5 +1,6 @@
<template>
<view class="ctr">
<IndexSkeleton v-if="data.is_show_skeleton"></IndexSkeleton>
<view v-else class="ctr">
<view class="fixed-top">
<me-top :title="data.isPullDownRefresh ? '刷新中…' : '接单大厅'"></me-top>
</view>
@ -54,10 +55,11 @@ import {onLoad, onShow, onReachBottom} from '@dcloudio/uni-app'
import {ref, reactive, computed, watch, inject} from 'vue'
import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeTop from "../../components/me-top/me-top.vue";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space";
import MeTop from "../../components/me-top/me-top";
import helpers from "../../utils/helpers";
import api from "../../api/api";
import IndexSkeleton from "./index-skeleton";
const listMarginTop = computed(() => {
return (inject('globalData').statusBarH + (inject('globalData').customBarH - inject('globalData').statusBarH)) * 2
@ -75,7 +77,7 @@ const data = reactive({
page: 1,
page_size: 10,
last_page: 0,
rotateDeg: null,
is_show_skeleton: true,
list: []
})
const getList = () => {
@ -86,7 +88,7 @@ const getList = () => {
} else {
data.list = data.list.concat(helpers.deepObj(res.data))
}
// data.isShowSkeleton = false
data.is_show_skeleton = false
}).catch(() => {}).finally(() => {
refreshComplete()
})