hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工作台骨架屏

Browse Source
This commit is contained in:
苟川东 2025-04-13 22:38:40 +08:00
parent 93a4a5d707
commit 99bcb178a6
3 changed files with 331 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages/index/index-skeleton.vue
View File

@ -219,11 +219,6 @@
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;

323
pages/workbench/workbench-skeleton.vue Normal file
View File

@ -0,0 +1,323 @@
<template name="skeleton">
<view class="sk-container">
<view class="ctr ctr data-v-cda3a350 data-v-cda3a350">
<view class="fixed-top fixed-top data-v-cda3a350 data-v-cda3a350">
<view is="components/me-top/me-top" class="data-v-cda3a350 data-v-cda3a350">
<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-32 sk-text">工作台</text>
</view>
</view>
</view>
<view class="filter flex-sb line-after data-v-cda3a350 sk-pseudo sk-pseudo-circle">
<view class="filter-item filter-item flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="data-v-cda3a350 title flex-c sk-transparent sk-text-0-0000-179 sk-text">进行中(1)</view>
</view>
<view class="filter-item filter-item flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="data-v-cda3a350 title flex-c sk-transparent sk-text-0-0000-567 sk-text">今日(0)</view>
</view>
<view class="filter-item filter-item flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="data-v-cda3a350 title flex-c sk-transparent sk-text-0-0000-602 sk-text">明日(0)</view>
</view>
<view class="filter-item filter-item flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="data-v-cda3a350 title flex-c sk-transparent sk-text-0-0000-602 sk-text">全部(0)</view>
</view>
</view>
</view>
<view is="components/me-empty-space/me-empty-space" class="data-v-cda3a350 data-v-cda3a350">
<view class="me-empty-space space--me-empty-space" style="height:137px"></view>
</view>
<view class="list list data-v-cda3a350 data-v-cda3a350">
<view class="order-item order-item data-v-cda3a350 data-v-cda3a350">
<view class="top top flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="type flex-l data-v-cda3a350 sk-transparent sk-text-14-2857-977 sk-text">乳胶漆</view>
<view class="price flex-r important-color data-v-cda3a350 sk-transparent sk-text-14-2857-990 sk-text"></view>
</view>
<view class="content content flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="left left data-v-cda3a350 data-v-cda3a350">
<view class="address-name flex-l data-v-cda3a350 sk-transparent sk-text-15-9091-41 sk-text">222</view>
<view class="address data-v-cda3a350 sk-transparent sk-text-18-1818-14 sk-text">四川省成都市双流区</view>
<view class="time-ctr time-ctr flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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 class="time data-v-cda3a350 sk-transparent sk-text-18-1818-755 sk-text">周一 25年3月31日 11:33</text>
</view>
</view>
<view class="right right data-v-cda3a350 data-v-cda3a350">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-cda3a350 sk-transparent sk-text-18-1818-111 sk-text">未知距离</view>
</view>
</view>
<view class="user user flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="left left data-v-cda3a350 data-v-cda3a350">
<view class="user-name user-name flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-user icon--icon-user sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 18px; line-height: 18px;"></text>
</view>
</view>
<view class="name data-v-cda3a350 sk-transparent sk-text-0-0000-613 sk-text">wwww</view>
</view>
<view class="phone flex-l data-v-cda3a350 sk-transparent sk-text-0-0000-533 sk-text">11111</view>
</view>
<view class="right right flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-cda3a350 data-v-cda3a350" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-call icon--icon-call sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 40px; line-height: 40px;"></text>
</view>
</view>
</view>
</view>
</view>
<view class="operate-ctr operate-ctr flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="status-ctr status-ctr flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-progress-2-line icon--icon-progress-2-line sk-pseudo sk-pseudo-circle" style="color: #E18F00; font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="text data-v-cda3a350 sk-transparent sk-text-14-2857-371 sk-text">待联系客户</text>
</view>
<view class="operate operate flex-r flex-r data-v-cda3a350 data-v-cda3a350">
<view class="btn btn flex-c flex-c data-v-cda3a350 data-v-cda3a350" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-arrow-up-line icon--icon-arrow-up-line sk-pseudo sk-pseudo-circle" style="color: #FFFFFF; font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="data-v-cda3a350 sk-transparent sk-text-14-2857-25 sk-text">上报异常</text>
</view>
</view>
</view>
</view>
<view class="order-item order-item data-v-cda3a350 data-v-cda3a350">
<view class="top top flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="type flex-l data-v-cda3a350 sk-transparent sk-text-14-2857-977 sk-text">乳胶漆</view>
<view class="price flex-r important-color data-v-cda3a350 sk-transparent sk-text-14-2857-990 sk-text"></view>
</view>
<view class="content content flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="left left data-v-cda3a350 data-v-cda3a350">
<view class="address-name flex-l data-v-cda3a350 sk-transparent sk-text-15-9091-41 sk-text">222</view>
<view class="address data-v-cda3a350 sk-transparent sk-text-18-1818-14 sk-text">四川省成都市双流区</view>
<view class="time-ctr time-ctr flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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 class="time data-v-cda3a350 sk-transparent sk-text-18-1818-755 sk-text">周一 25年3月31日 11:33</text>
</view>
</view>
<view class="right right data-v-cda3a350 data-v-cda3a350">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-cda3a350 sk-transparent sk-text-18-1818-111 sk-text">未知距离</view>
</view>
</view>
<view class="user user flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="left left data-v-cda3a350 data-v-cda3a350">
<view class="user-name user-name flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-user icon--icon-user sk-pseudo sk-pseudo-circle" style="color: var(--descriptionColor); font-size: 18px; line-height: 18px;"></text>
</view>
</view>
<view class="name data-v-cda3a350 sk-transparent sk-text-0-0000-613 sk-text">wwww</view>
</view>
<view class="phone flex-l data-v-cda3a350 sk-transparent sk-text-0-0000-533 sk-text">11111</view>
</view>
<view class="right right flex-c flex-c data-v-cda3a350 data-v-cda3a350">
<view class="icon-ctr icon-ctr flex-c flex-c data-v-cda3a350 data-v-cda3a350" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-call icon--icon-call sk-pseudo sk-pseudo-circle" style="color: var(--themeColor); font-size: 40px; line-height: 40px;"></text>
</view>
</view>
</view>
</view>
</view>
<view class="operate-ctr operate-ctr flex-sb flex-sb data-v-cda3a350 data-v-cda3a350">
<view class="status-ctr status-ctr flex-l flex-l data-v-cda3a350 data-v-cda3a350">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-progress-2-line icon--icon-progress-2-line sk-pseudo sk-pseudo-circle" style="color: #E18F00; font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="text data-v-cda3a350 sk-transparent sk-text-14-2857-371 sk-text">待联系客户</text>
</view>
<view class="operate operate flex-r flex-r data-v-cda3a350 data-v-cda3a350">
<view class="btn btn flex-c flex-c data-v-cda3a350 data-v-cda3a350" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
<view is="components/me-icon/me-icon" class="data-v-cda3a350 data-v-cda3a350">
<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-arrow-up-line icon--icon-arrow-up-line sk-pseudo sk-pseudo-circle" style="color: #FFFFFF; font-size: 20px; line-height: 20px;"></text>
</view>
</view>
<text class="data-v-cda3a350 sk-transparent sk-text-14-2857-25 sk-text">上报异常</text>
</view>
</view>
</view>
</view>
<view class="order-item order-item data-v-cda3a350 data-v-cda3a350"></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;
.filter {
width: 686rpx;
height: 100rpx;
.filter-item {
width: 170rpx;
height: 100%;
position: relative;
.title {
width: 120rpx;
font-size: 28rpx;
color: var(--summaryColor);
line-height: 40rpx;
}
.title-active {
color: var(--themeColor) !important;
}
.select-style {
position: absolute;
bottom: 0;
width: 122rpx;
height: 4rpx;
background: var(--themeColor);
border-radius: 2rpx;
}
}
}
}
.order-item .operate-ctr .operate .btn {
background-color: #EEEEEE;
}
}
</style>
<style>
.sk-transparent {
color: transparent !important;
}
.sk-text-14-2857-32 {
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-0-0000-179 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-0-0000-567 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-0-0000-602 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-14-2857-977 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-990 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-15-9091-41 {
background-image: linear-gradient(transparent 15.9091%, #EEEEEE 0%, #EEEEEE 84.0909%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-14 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-755 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-18-1818-111 {
background-image: linear-gradient(transparent 18.1818%, #EEEEEE 0%, #EEEEEE 81.8182%, transparent 0%) !important;
position: relative !important;
}
.sk-text-0-0000-613 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-0-0000-533 {
background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
background-size: 100% 28.0000rpx;
position: relative !important;
}
.sk-text-14-2857-371 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
position: relative !important;
}
.sk-text-14-2857-25 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-image {
background: #EFEFEF !important;
}
.sk-pseudo::before, .sk-pseudo::after {
background: #EFEFEF none !important;
color: transparent !important;
border-color: transparent !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>

9
pages/workbench/workbench.vue
View File

@ -1,5 +1,6 @@
<template>
<view class="ctr" v-if="data.list !== null && countOrder !== undefined">
<WorkbenchSkeleton v-if="isShowSkeleton"></WorkbenchSkeleton>
<view class="ctr" v-else>
<view class="fixed-top">
<me-top title="工作台"></me-top>
<view class="filter flex-sb line-after">
@ -80,6 +81,12 @@ import MeTop from "../../components/me-top/me-top.vue";
import api from "../../api/api";
import helpers from "../../utils/helpers";
import enums from "../../utils/enums";
import WorkbenchSkeleton from "./workbench-skeleton.vue";
//是否显示骨架屏
const isShowSkeleton = computed(() => {
return data.list === null || countOrder === undefined
})
const getOrderStatusText = (status) => {
return enums.WORKBENCH_STATUS_TEXT[status]