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

feat: 增加页面空状态组件

Browse Source
This commit is contained in:
苟川东 2025-04-21 15:41:43 +08:00
parent f976613ae8
commit b9b20e49da
4 changed files with 91 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/me-empty/me-empty.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<view class="me-empty flex-direction-column" :style="{marginTop}">
<view class="image"></view>
<view class="empty-text">{{text}}</view>
</view>
</template>
<script setup>
const props = defineProps({
text: {
type: String,
required: false,
default: '暂无任何数据',
},
marginTop: {
type: String,
required: false,
default: '176rpx',
}
});
</script>
<style lang="scss" scoped>
.me-empty {
.image {
width: 400rpx;
height: 400rpx;
background: var(--emptyData)
}
.empty-text {
width: 400rpx;
height: 72rpx;
font-size: 28rpx;
color: var(--contentColor30);
line-height: 72rpx;
text-align: center;
}
}
</style>

84
pages/index/index.vue
View File

@ -1,53 +1,59 @@
<template>
<IndexSkeleton v-if="data.is_show_skeleton"></IndexSkeleton>
<view v-else class="ctr">
<view class="fixed-top">
<me-top title="接单大厅"></me-top>
</view>
<template v-else>
<view class="ctr">
<view class="fixed-top">
<me-top title="接单大厅"></me-top>
</view>
<me-empty-space :height="listMarginTop"></me-empty-space>
<view class="list">
<view class="order-item" v-for="(item, index) in data.list" :key="index">
<view class="top flex-sb">
<view class="type flex-l" @click="toDetail(item.id)">{{item.order_info.item_title}}</view>
<view class="price flex-r important-color" v-if="item.order_info.receive_type === 1">上门报价</view>
<view class="price flex-r" v-else>平台已收款</view>
</view>
<view class="content flex-sb">
<view class="left" @click="toDetail(item.id)">
<view class="address-name flex-l">
{{item.order_info.address}}
<me-empty-space :height="listMarginTop"></me-empty-space>
<view class="list" v-if="data.list.length > 0">
<view class="order-item" v-for="(item, index) in data.list" :key="index">
<view class="top flex-sb">
<view class="type flex-l" @click="toDetail(item.id)">{{item.order_info.item_title}}</view>
<view class="price flex-r important-color" v-if="item.order_info.receive_type === 1">上门报价</view>
<view class="price flex-r" v-else>平台已收款</view>
</view>
<view class="content flex-sb">
<view class="left" @click="toDetail(item.id)">
<view class="address-name flex-l">
{{item.order_info.address}}
</view>
<view class="address flex-l">
{{helpers.removeCommas(item.order_info.area.merge_name)}}
</view>
<view class="time-ctr flex-l" v-if="item.order_info.plan_time !== null">
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
<text class="time">{{helpers.formatDate(item.order_info.plan_time)}}</text>
</view>
</view>
<view class="address flex-l">
{{helpers.removeCommas(item.order_info.area.merge_name)}}
</view>
<view class="time-ctr flex-l" v-if="item.order_info.plan_time !== null">
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
<text class="time">{{helpers.formatDate(item.order_info.plan_time)}}</text>
<view class="right">
<view class="icon-ctr flex-c">
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
</view>
<view class="distance flex-c" v-if="item.order_info.lng == 0 || item.order_info.lat == 0">未知距离</view>
<view class="distance flex-c" v-else>{{formatDistance(item.order_info.lat, item.order_info.lng)}}</view>
</view>
</view>
<view class="right">
<view class="icon-ctr flex-c">
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
</view>
<view class="distance flex-c" v-if="item.order_info.lng == 0 || item.order_info.lat == 0">未知距离</view>
<view class="distance flex-c" v-else>{{formatDistance(item.order_info.lat, item.order_info.lng)}}</view>
<view class="discount flex-l" v-if="item.order_info.receive_type === 1">已支付订金：{{item.order_info.online_amount}}元抵扣{{item.order_info.discount_amount}}元</view>
<view class="btn-ctr flex-sb">
<me-button @click="acceptOrder(index, item.id)" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
<me-button @click="rejectOrder(index, item.id)" active-color="var(--contentBgColor)" text="拒 接" width="166rpx" text-color="var(--titleColor)"></me-button>
</view>
</view>
<view class="discount flex-l" v-if="item.order_info.receive_type === 1">已支付订金：{{item.order_info.online_amount}}元抵扣{{item.order_info.discount_amount}}元</view>
<view class="btn-ctr flex-sb">
<me-button @click="acceptOrder(index, item.id)" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
<me-button @click="rejectOrder(index, item.id)" active-color="var(--contentBgColor)" text="拒 接" width="166rpx" text-color="var(--titleColor)"></me-button>
</view>
<me-empty v-else text="暂无工单"></me-empty>
<view class="refresh flex-c" @click="refreshStart()" hover-class="auto-mask-layer-radius100" hover-start-time="0" hover-stay-time="50">
<view class="icon flex-c" :style="{ transform: `rotate(${refresh.rotate_deg}deg)` }">
<me-icon type="icon-reset-left-line" color="#FFFFFF" size="60rpx"></me-icon>
</view>
</view>
<me-empty-space height="100"></me-empty-space>
</view>
<view class="refresh flex-c" @click="refreshStart()" hover-class="auto-mask-layer-radius100" hover-start-time="0" hover-stay-time="50">
<view class="icon flex-c" :style="{ transform: `rotate(${refresh.rotate_deg}deg)` }">
<me-icon type="icon-reset-left-line" color="#FFFFFF" size="60rpx"></me-icon>
</view>
</view>
<me-empty-space height="100"></me-empty-space>
</view>
</template>
</template>
<script setup>

5
pages/workbench/workbench.vue
View File

@ -12,7 +12,8 @@
</view>
<me-empty-space :height="listMarginTop"></me-empty-space>
<view class="list">
<view class="list" v-if="data.list.length > 0">
<view class="order-item" v-for="(item, index) in data.list" :key="index">
<view class="top flex-sb">
<view class="type flex-l" @click="toDetail(item.id)">{{item.order_info.item_title}}</view>
@ -68,6 +69,8 @@
</view>
</view>
</view>
<me-empty v-else text="暂无工单"></me-empty>
<me-empty-space height="100"></me-empty-space>
</view>
</template>

4
theme/theme.scss
View File

@ -14,7 +14,7 @@
--navbarBgColor: #FFFFFF; // 导航背景
--defaultUserAvatar: url("/static/img/default-user.png") no-repeat center / 100%;
--emptyData: url("https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20241018/fda50c010550e9a93311de89e1e0b0e1.png") no-repeat center / 100%;
--emptyData: url("https://allocatr.oss-cn-hangzhou.aliyuncs.com/uploads/20250421/831dbec0752dd56996789ba5ed4c5e10.png") no-repeat center / 100%;
}
@mixin dark-theme() {
@ -33,7 +33,7 @@
--navbarBgColor: #1D1D1D;
--defaultUserAvatar: url("/static/img/default-user-dark.png") no-repeat center / 100%;
--emptyData: url("https://jl-td.oss-cn-chengdu.aliyuncs.com/uploads/20241018/6dbc6a080b19e70d3500e418db24eeb7.png") no-repeat center / 100%;
--emptyData: url("https://allocatr.oss-cn-hangzhou.aliyuncs.com/uploads/20250421/c1f8e22464c78e396aff3688d5970878.png") no-repeat center / 100%;
}
/*亮色模式-自动样式*/