436 lines
8.7 KiB
Plaintext
436 lines
8.7 KiB
Plaintext
<template>
|
||
|
||
<view v-if="loading" class="skeleton-container">
|
||
<!-- 骨架屏 - 订单成功区域 -->
|
||
<view class="skeleton-card">
|
||
<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="skeleton-card">
|
||
<view class="skeleton-line skeleton-order-id"></view>
|
||
<view class="skeleton-line skeleton-order-item"></view>
|
||
<view class="skeleton-line skeleton-order-item"></view>
|
||
<view class="skeleton-line skeleton-order-item"></view>
|
||
<view class="skeleton-product-image"></view>
|
||
</view>
|
||
|
||
<!-- 骨架屏 - 收入详情卡片 -->
|
||
<view class="skeleton-card">
|
||
<view class="skeleton-line skeleton-section-title"></view>
|
||
<view class="skeleton-income-item">
|
||
<view class="skeleton-line skeleton-income-label"></view>
|
||
<view class="skeleton-line skeleton-income-amount"></view>
|
||
</view>
|
||
<view class="skeleton-income-item">
|
||
<view class="skeleton-line skeleton-income-label"></view>
|
||
<view class="skeleton-line skeleton-income-amount"></view>
|
||
</view>
|
||
<view class="skeleton-divider"></view>
|
||
<view class="skeleton-income-item">
|
||
<view class="skeleton-line skeleton-income-label"></view>
|
||
<view class="skeleton-line skeleton-income-total"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 骨架屏 - 底部按钮 -->
|
||
<view class="skeleton-buttons">
|
||
<view class="skeleton-button skeleton-button-outline"></view>
|
||
<view class="skeleton-button skeleton-button-filled"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else class="order-complete-page">
|
||
<!-- 订单成功区域 -->
|
||
<view class="success-card">
|
||
<view class="success-icon">
|
||
<up-icon name="checkmark-circle" size="60" color="#07C160" />
|
||
</view>
|
||
<view class="success-title">订单已送达！</view>
|
||
<view class="success-desc">感谢您的服务，本次配送费¥5.50已入账</view>
|
||
</view>
|
||
|
||
<!-- 订单详情卡片 -->
|
||
<view class="order-detail-card">
|
||
<view class="order-info-item">
|
||
<text class="label">订单号：</text>
|
||
<text class="value">MT20251017123456</text>
|
||
</view>
|
||
<view class="order-info-item">
|
||
<text>共3件商品</text>
|
||
</view>
|
||
<view class="order-info-item">
|
||
<text>XX小区3栋502室</text>
|
||
</view>
|
||
<view class="order-info-item">
|
||
<text class="highlight-text">请放门口，勿按门铃</text>
|
||
</view>
|
||
|
||
<!-- 商品图片占位 -->
|
||
<view class="product-image-placeholder"></view>
|
||
</view>
|
||
|
||
<!-- 收入详情卡片 -->
|
||
<view class="income-detail-card">
|
||
<view class="section-title">本单收入</view>
|
||
<view class="income-item">
|
||
<text class="label">配送费</text>
|
||
<text class="amount positive">+¥5.50</text>
|
||
</view>
|
||
<view class="income-item">
|
||
<text class="label">冲单奖</text>
|
||
<text class="amount bonus">+¥3.00</text>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="income-item total">
|
||
<text class="label">总收入</text>
|
||
<text class="amount total-amount">¥8.50</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮区域 -->
|
||
<view class="bottom-buttons">
|
||
<up-button class="view-income-btn" shape="circle" type="default"
|
||
@click="Service.GoPageTab('/pages/index/income')">
|
||
查看收入
|
||
</up-button>
|
||
<up-button class="continue-btn" shape="circle" type="primary"
|
||
@click="Service.GoPageTab('/pages/index/task')">
|
||
继续接单
|
||
</up-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { Service } from "@/Service/Service"
|
||
import { ref } from 'vue'
|
||
|
||
let loading = ref(true)
|
||
|
||
// 页面加载时的逻辑
|
||
onLoad(() => {
|
||
setTimeout(() => {
|
||
loading.value = false;
|
||
}, 1500);
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.order-complete-page {
|
||
overflow: hidden;
|
||
padding-bottom: 40rpx;
|
||
|
||
// 导航栏样式
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 40rpx 30rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.nav-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
// 成功卡片样式
|
||
.success-card {
|
||
margin: 30rpx;
|
||
padding: 60rpx 30rpx;
|
||
background-color: #f0f9ff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.success-icon {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.success-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.success-desc {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
// 订单详情卡片样式
|
||
.order-detail-card {
|
||
margin: 0 30rpx 30rpx;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.order-info-item {
|
||
margin-bottom: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
|
||
.label {
|
||
color: #666;
|
||
}
|
||
|
||
.value {
|
||
color: #333;
|
||
}
|
||
|
||
.highlight-text {
|
||
color: #ff6b35;
|
||
}
|
||
}
|
||
|
||
// 商品图片占位
|
||
.product-image-placeholder {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border: 2rpx solid #333;
|
||
background-color: #fff;
|
||
margin-top: 20rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
// 收入详情卡片样式
|
||
.income-detail-card {
|
||
margin: 0 30rpx 40rpx;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.income-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
font-size: 28rpx;
|
||
|
||
.label {
|
||
color: #666;
|
||
}
|
||
|
||
.amount {
|
||
font-weight: 600;
|
||
|
||
&.positive {
|
||
color: #07C160;
|
||
}
|
||
|
||
&.bonus {
|
||
color: #f79009;
|
||
}
|
||
|
||
&.total-amount {
|
||
color: #ff3b30;
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
|
||
&.total {
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.divider {
|
||
height: 1rpx;
|
||
background-color: #e0e0e0;
|
||
margin: 10rpx 0;
|
||
}
|
||
}
|
||
|
||
// 底部按钮样式
|
||
.bottom-buttons {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: #fff;
|
||
width: 100vw;
|
||
display: flex;
|
||
padding: 20rpx 30rpx;
|
||
gap: 30rpx;
|
||
|
||
.view-income-btn,
|
||
.continue-btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 32rpx;
|
||
border-radius: 45rpx;
|
||
}
|
||
|
||
.view-income-btn {
|
||
border: 2rpx solid #007aff;
|
||
color: #007aff;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.continue-btn {
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 骨架屏基础样式
|
||
.skeleton-loading {
|
||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||
background-size: 200% 100%;
|
||
animation: skeleton-loading 1.5s infinite;
|
||
}
|
||
|
||
@keyframes skeleton-loading {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
// 骨架屏容器样式
|
||
.skeleton-container {
|
||
}
|
||
|
||
// 骨架屏卡片样式
|
||
.skeleton-card {
|
||
margin: 30rpx;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
// 骨架屏线条通用样式
|
||
.skeleton-line {
|
||
height: 32rpx;
|
||
background-color: #f0f0f0;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
}
|
||
|
||
// 成功区域骨架
|
||
.skeleton-success-icon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background-color: #f0f0f0;
|
||
border-radius: 50%;
|
||
margin: 0 auto 30rpx;
|
||
|
||
}
|
||
|
||
.skeleton-success-title {
|
||
width: 50%;
|
||
height: 40rpx;
|
||
margin: 0 auto 20rpx;
|
||
}
|
||
|
||
.skeleton-success-desc {
|
||
width: 80%;
|
||
height: 32rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
// 订单详情骨架
|
||
.skeleton-order-id {
|
||
width: 100%;
|
||
}
|
||
|
||
.skeleton-order-item {
|
||
width: 70%;
|
||
}
|
||
|
||
.skeleton-product-image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background-color: #f0f0f0;
|
||
border-radius: 8rpx;
|
||
margin-top: 20rpx;
|
||
|
||
}
|
||
|
||
// 收入详情骨架
|
||
.skeleton-section-title {
|
||
width: 40%;
|
||
height: 36rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.skeleton-income-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.skeleton-income-label {
|
||
width: 30%;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.skeleton-income-amount {
|
||
width: 25%;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.skeleton-income-total {
|
||
width: 25%;
|
||
margin-bottom: 0;
|
||
height: 36rpx;
|
||
}
|
||
|
||
.skeleton-divider {
|
||
height: 1rpx;
|
||
background-color: #e0e0e0;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
// 按钮骨架
|
||
.skeleton-buttons {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: #fff;
|
||
width: 100vw;
|
||
display: flex;
|
||
padding: 20rpx 30rpx;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.skeleton-button {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
border-radius: 45rpx;
|
||
}
|
||
|
||
.skeleton-button-outline {
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.skeleton-button-filled {
|
||
background-color: #f0f0f0;
|
||
}
|
||
</style> |