sai/QCN_rider
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Ls
2026-02-12 12:19:20 +08:00
commit 219fd9be5c
529 changed files with 169918 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
.svn/pristine/c3/c3554f7eb28bf0d72a7df9682d2c7b16d7f2ec2c.svn-base Normal file
View File

@@ -0,0 +1,436 @@
<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>