494 lines
11 KiB
Plaintext
494 lines
11 KiB
Plaintext
<template>
|
|
<!-- 骨架屏 -->
|
|
<view v-if="loading" class="task-list-container skeleton-loading">
|
|
<!-- 顶部标签栏 -->
|
|
<view class="tab-bar">
|
|
<view v-for="(tab, index) in tabs" :key="index" class="tab-item">
|
|
<view class="skeleton-tab-text"></view>
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: 100vw; height: 120rpx"> </view>
|
|
|
|
<!-- 骨架屏订单列表 -->
|
|
<view class="order-list">
|
|
<!-- 骨架屏任务卡片 1 -->
|
|
<view v-for="item in 3" class="task-section skeleton-card">
|
|
<view class="" style="display: flex; align-items: center; justify-content: space-between;" >
|
|
<view class="skeleton-tag"></view>
|
|
<view class="skeleton-time-group">
|
|
<view class="icon-placeholder"></view>
|
|
<view class="skeleton-time-text"></view>
|
|
</view>
|
|
</view>
|
|
<view class="skeleton-merchant-info">
|
|
<view class="skeleton-merchant-name"></view>
|
|
<view class="skeleton-distance"></view>
|
|
</view>
|
|
<view class="skeleton-address-info">
|
|
<view class="icon-placeholder"></view>
|
|
<view class="skeleton-address-text"></view>
|
|
</view>
|
|
<view class="skeleton-price-time-row">
|
|
<view class="skeleton-price"></view>
|
|
<view class="skeleton-time-group">
|
|
<view class="icon-placeholder"></view>
|
|
<view class="skeleton-time-text"></view>
|
|
</view>
|
|
</view>
|
|
<view class="skeleton-button"></view>
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: 100vw; display: flex; justify-content: center; margin-top: 20rpx; " >
|
|
<view class="" style="width: 200rpx; height: 40rpx; background-color: #fff; border-radius: 4rpx; " >
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view v-else class="task-list-container" style="padding-top: 60rpx;" >
|
|
<!-- 顶部标签栏 -->
|
|
<view class="tab-bar">
|
|
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
|
|
@click="switchTab(index)">
|
|
<text class="tab-text">{{ tab }}</text>
|
|
<view v-if="activeTab === index" class="active-line"></view>
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: 100vw; height: 120rpx; ">
|
|
|
|
</view>
|
|
<!-- 订单列表 -->
|
|
<view class="order-list">
|
|
<view @click="gopage()" v-for="(orderItem,orderIndex) in 3 " :key="orderIndex" class="task-section">
|
|
<!-- 高价单标签 -->
|
|
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
|
|
<view v-if="activeTab==0" class="high-price-tag" style="border-radius: 8rpx;" >
|
|
<image :src="Service.GetIconImg('/static/index/task/fire.png')" style="width: 24rpx; height: 24rpx;" mode=""></image>
|
|
<text class="high-price-text" style="margin-left: 4rpx;" >高价单</text>
|
|
</view>
|
|
<view v-else class="high-price-tag" :style="{'border':activeTab==1?'1rpx solid #52C41A':'1rpx solid #FAAD14','color':activeTab==1?'#52C41A':'#FAAD14' }" style="background-color: #fff;" >
|
|
<text class="high-price-text">{{activeTab==1?'待取单':'配送中'}}</text>
|
|
</view>
|
|
<view class="" v-if="activeTab!==0" style="display: flex; align-items: baseline;">
|
|
<up-icon name="phone" color="var(--nav-mian)" size="20"></up-icon>
|
|
<text style="margin-left: 10rpx; color: var(--nav-mian); ">拨打商家</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商家信息 -->
|
|
<view class="merchant-info">
|
|
<text class="merchant-name">老北京炸酱面</text>
|
|
<text class="distance">500m</text>
|
|
</view>
|
|
|
|
<!-- 地址信息 -->
|
|
<view class="address-info">
|
|
<up-icon name="map" color="#999" size="24rpx" />
|
|
<text class="address-text">北京市朝阳区三里屯SOHO</text>
|
|
<text v-if="activeTab!==0" class="address-text">共3件商品</text>
|
|
</view>
|
|
<!-- 商品次数-->
|
|
<view v-if="activeTab==1" class="address-info">
|
|
<text class="address-text">共3件商品</text>
|
|
</view>
|
|
|
|
<!-- 价格和取餐时间 -->
|
|
<view class="price-time-row">
|
|
<view v-if="activeTab==0" class="">
|
|
<text class="price">¥5.50</text>
|
|
<text style="color: var(--nav-mian); font-weight: 600; margin-left: 10rpx; ">/单</text>
|
|
</view>
|
|
<view v-if="activeTab==1" class="">
|
|
<text style="font-size: 30rpx; font-weight: 600; color: #1890FF; ">取件码: </text>
|
|
<text style="color: var(--nav-mian); font-weight: 600; margin-left: 10rpx; ">A121</text>
|
|
</view>
|
|
<view v-if="activeTab==2" class="">
|
|
<text class="address-text">据您1.2km</text>
|
|
</view>
|
|
<view class="pickup-time">
|
|
<up-icon name="clock" color="#FF9500" size="24rpx" />
|
|
<text class="time-text" :style="{'color':activeTab==0?'#FAAD14':'#FF0000'}" >{{activeTab==0?'12:30 前取餐':'12:30 前送达'}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 立即抢单按钮 -->
|
|
<up-button type="primary" @click="buttonClick()" :color="activeTab==0?'#1890FF':(activeTab==1?'#52C41A':'#52C41A')" size="large" class="grab-btn">{{ activeTab==0?'立即抢单':(activeTab==1?'我已取餐':'确认送达') }}</up-button>
|
|
</view>
|
|
|
|
<!-- 没有更多任务提示 -->
|
|
<up-loadmore :status="status" />
|
|
<view class="" style="width: 100vw; height: 60rpx; " ></view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { ref } from 'vue'
|
|
import { Service } from '@/Service/Service'
|
|
|
|
let loading = ref(true)
|
|
// 标签数据
|
|
const tabs = ['新任务', '待取货', '配送中']
|
|
const activeTab = ref(0)
|
|
let status = ref('nomore')
|
|
|
|
|
|
|
|
onLoad(() => {
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
})
|
|
|
|
// 页面跳转
|
|
const gopage = () => {
|
|
if (activeTab.value == 0) {
|
|
Service.GoPage('/pages/order/grabOrder')
|
|
} else {
|
|
Service.GoPage('/pages/order/orderDetail')
|
|
}
|
|
}
|
|
|
|
|
|
const buttonClick=()=>{
|
|
|
|
if(activeTab.value==2){
|
|
Service.GoPage('/pages/order/finish')
|
|
}
|
|
}
|
|
|
|
// 切换标签
|
|
const switchTab = (index : number) => {
|
|
activeTab.value = index
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
/* 顶部标签栏 */
|
|
.tab-bar {
|
|
display: flex;
|
|
background-color: #FFFFFF;
|
|
padding: 20rpx 0 0;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.tab-item.active .tab-text {
|
|
color: var(--nav-mian);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.active-line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 110rpx;
|
|
height: 6rpx;
|
|
background-color: var(--nav-mian);
|
|
border-radius: 3rpx;
|
|
}
|
|
|
|
/* 订单列表 */
|
|
.order-list {
|
|
padding: 0rpx 30rpx;
|
|
}
|
|
|
|
.task-section {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
|
|
/* 标签样式 */
|
|
.high-price-tag {
|
|
width: fit-content;
|
|
background-color: #FF7875;
|
|
color: #FFFFFF;
|
|
padding: 5rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.status-tag {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
left: 20rpx;
|
|
padding: 5rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.status-tag.pending {
|
|
background-color: #4CD964;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.status-tag.delivering {
|
|
background-color: #FF9500;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* 右侧操作按钮 */
|
|
.right-action {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
}
|
|
|
|
.call-btn {
|
|
padding: 5rpx 15rpx;
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
/* 信息展示 */
|
|
.merchant-info {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.merchant-name {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.distance {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.address-info {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.address-text {
|
|
margin-left: 10rpx;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 价格和时间 */
|
|
.price-time-row {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.price {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #FF3B30;
|
|
}
|
|
|
|
.pickup-code {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pickup-time {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.time-text {
|
|
margin-left: 8rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.grab-btn {
|
|
margin-top: 25rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.grab-btn {
|
|
background-color: #007AFF;
|
|
}
|
|
|
|
/* 没有更多任务 */
|
|
.no-more-tasks {
|
|
margin-top: 40rpx;
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.no-more-text {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
/* 骨架屏样式 */
|
|
.skeleton-loading .skeleton-card {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.skeleton-tab-text {
|
|
width: 80rpx;
|
|
height: 30rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.skeleton-tag {
|
|
width: 100rpx;
|
|
height: 30rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 15rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.skeleton-merchant-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.skeleton-merchant-name {
|
|
width: 200rpx;
|
|
height: 34rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.skeleton-distance {
|
|
width: 60rpx;
|
|
height: 28rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.skeleton-address-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.icon-placeholder {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.skeleton-address-text {
|
|
width: 400rpx;
|
|
height: 28rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.skeleton-price-time-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
.skeleton-price {
|
|
width: 80rpx;
|
|
height: 36rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.skeleton-time-group {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.skeleton-time-text {
|
|
width: 150rpx;
|
|
height: 26rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.skeleton-button {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: #f0f0f0;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
/* 骨架屏动画 */
|
|
.skeleton-card .skeleton-tag::after,
|
|
.skeleton-card .skeleton-merchant-name::after,
|
|
.skeleton-card .skeleton-distance::after,
|
|
.skeleton-card .skeleton-address-text::after,
|
|
.skeleton-card .icon-placeholder::after,
|
|
.skeleton-card .skeleton-price::after,
|
|
.skeleton-card .skeleton-time-text::after,
|
|
.skeleton-card .skeleton-button::after,
|
|
.skeleton-loading .skeleton-tab-text::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
</style> |