315 lines
6.5 KiB
Plaintext
315 lines
6.5 KiB
Plaintext
<template>
|
|
|
|
<view v-if="loading" class="skeleton-container">
|
|
<!-- 成功提示区域骨架 -->
|
|
<view class="success-section skeleton-success-section">
|
|
<view class="skeleton-success-icon"></view>
|
|
<view class="skeleton-line skeleton-success-title"></view>
|
|
<view class="skeleton-line skeleton-success-desc"></view>
|
|
</view>
|
|
|
|
<!-- 订单信息卡片骨架 -->
|
|
<view class="order-card skeleton-order-card">
|
|
<view class="order-item" v-for="i in 4" :key="i">
|
|
<view class="skeleton-line skeleton-order-label"></view>
|
|
<view class="skeleton-line skeleton-order-value"></view>
|
|
</view>
|
|
|
|
<!-- 查看详情按钮骨架 -->
|
|
<view class="skeleton-line skeleton-view-detail-btn"></view>
|
|
</view>
|
|
|
|
<!-- 底部占位 -->
|
|
<view class="bottom-space"></view>
|
|
|
|
<!-- 底部按钮区域骨架 -->
|
|
<view class="bottom-buttons skeleton-bottom-buttons">
|
|
<view class="skeleton-line skeleton-continue-btn"></view>
|
|
<view class="skeleton-line skeleton-view-progress-btn"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="abnormal-reported-page">
|
|
<!-- 成功提示区域 -->
|
|
<view class="success-section">
|
|
<view class="success-icon">
|
|
<up-icon name="checkmark-circle-fill" size="80" color="#4CD964"></up-icon>
|
|
</view>
|
|
<view class="success-title">异常已上报！</view>
|
|
<view class="success-desc">配送计时已暂停，不影响您的准时率</view>
|
|
</view>
|
|
|
|
<!-- 订单信息卡片 -->
|
|
<view class="order-card">
|
|
<view class="order-item">
|
|
<text class="order-label">订单号</text>
|
|
<text class="order-value" style="font-weight: 600;">MT20251017123456</text>
|
|
</view>
|
|
<view class="order-item">
|
|
<text class="order-label">商品信息</text>
|
|
<text class="order-value">共3件商品</text>
|
|
</view>
|
|
<view class="order-item">
|
|
<text class="order-label">配送地址</text>
|
|
<text class="order-value">XX小区3栋502室</text>
|
|
</view>
|
|
<view class="order-item">
|
|
<text class="order-label">用户备注</text>
|
|
<text class="order-value remark-text">请放门口，勿按门铃</text>
|
|
</view>
|
|
|
|
<!-- 查看详情按钮 -->
|
|
<view @click="Service.GoPage('/pages/my/abnormalDetail')" class="view-detail-btn">
|
|
<text>查看详情</text>
|
|
<up-icon name="arrow-right" size="20" color="#999"></up-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部占位 -->
|
|
<view class="bottom-space"></view>
|
|
|
|
<!-- 底部按钮区域 -->
|
|
<view class="bottom-buttons">
|
|
<up-button @click="Service.GoPageTab('/pages/index/task')" type="primary" size="default" class="continue-btn">
|
|
继续接单
|
|
</up-button>
|
|
<up-button @click="Service.GoPage('/pages/my/abnormalDetail')" type="default" size="default" class="view-progress-btn">
|
|
查看异常进度
|
|
</up-button>
|
|
</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)
|
|
// 页面加载时的逻辑
|
|
onLoad(() => {
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
|
|
// 成功提示区域样式
|
|
.success-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60rpx 30rpx;
|
|
background-color: #F6FFFB;
|
|
margin: 20rpx;
|
|
}
|
|
|
|
.success-icon {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.success-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.success-desc {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
// 订单卡片样式
|
|
.order-card {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
border-radius: 12rpx;
|
|
margin: 0 30rpx;
|
|
box-shadow: 0 0 10rpx 0 #e2e2e2;
|
|
}
|
|
|
|
.order-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.order-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.order-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.order-value {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
text-align: right;
|
|
flex: 1;
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.remark-text {
|
|
color: #FF6F00;
|
|
}
|
|
|
|
// 查看详情按钮样式
|
|
.view-detail-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 30rpx;
|
|
padding-top: 30rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
// 底部占位
|
|
.bottom-space {
|
|
height: 280rpx;
|
|
}
|
|
|
|
// 底部按钮区域样式
|
|
.bottom-buttons {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
gap: 20rpx;
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
}
|
|
|
|
.continue-btn {
|
|
border-radius: 50rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
font-size: 32rpx;
|
|
background-color: #007AFF;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.view-progress-btn {
|
|
border-radius: 50rpx;
|
|
height: 100rpx;
|
|
line-height: 98rpx;
|
|
font-size: 32rpx;
|
|
color: #007AFF;
|
|
border: 1rpx solid #007AFF;
|
|
background-color: #fff;
|
|
}
|
|
|
|
|
|
// 骨架屏基础样式和动画
|
|
.skeleton-line,
|
|
.skeleton-success-icon,
|
|
.skeleton-loading {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-loading 1.5s infinite;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
@keyframes skeleton-loading {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
// 骨架屏公共样式
|
|
.skeleton-line {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
// 骨架屏容器
|
|
.skeleton-container {
|
|
width: 100%;
|
|
}
|
|
|
|
// 成功提示区域骨架样式
|
|
.skeleton-success-section {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.skeleton-success-icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background-color: #f0f0f0;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.skeleton-success-title {
|
|
width: 40%;
|
|
height: 40rpx;
|
|
margin-bottom: 16rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.skeleton-success-desc {
|
|
width: 70%;
|
|
height: 30rpx;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
// 订单卡片骨架样式
|
|
.skeleton-order-card {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.skeleton-order-label {
|
|
width: 20%;
|
|
height: 32rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.skeleton-order-value {
|
|
width: 50%;
|
|
height: 32rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.skeleton-view-detail-btn {
|
|
width: 25%;
|
|
height: 32rpx;
|
|
border-radius: 16rpx;
|
|
margin-top: 30rpx;
|
|
margin-left: auto;
|
|
}
|
|
|
|
// 底部按钮区域骨架样式
|
|
.skeleton-bottom-buttons {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.skeleton-continue-btn {
|
|
width: 49%;
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.skeleton-view-progress-btn {
|
|
width: 49%;
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
</style> |