714 lines
14 KiB
Plaintext
714 lines
14 KiB
Plaintext
<template>
|
|
<!-- 导航栏 -->
|
|
<view class=""
|
|
style="padding:50rpx 20rpx 18rpx; box-sizing: border-box; position: fixed;top: 0; left: 0; width: 100vw; background-color: #fff; display: flex; align-items: center; justify-content: space-between;">
|
|
<view class="" @click="Service.GoPageBack()">
|
|
<up-icon name="arrow-left" size="32rpx"></up-icon>
|
|
</view>
|
|
<view class="">
|
|
收入详情
|
|
</view>
|
|
<view class="" style="color: var(--nav-banbacor);">
|
|
<image :src="Service.GetIconImg('/static/index/order/message.png')" style="width: 32rpx; height: 32rpx; "
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="" style="width: 100%; height: 100rpx; ">
|
|
|
|
</view>
|
|
<view v-if="loading" class="skeleton-container">
|
|
<!-- 标题骨架屏 -->
|
|
<view class="skeleton-section-title"></view>
|
|
|
|
<!-- 收入卡片骨架屏 -->
|
|
<view class="skeleton-card">
|
|
<view class="skeleton-row">
|
|
<view class="skeleton-order-id"></view>
|
|
<view class="skeleton-status"></view>
|
|
</view>
|
|
<view class="skeleton-row" v-for="item in 3" >
|
|
<view class="skeleton-order-id" style="width: 30%;" ></view>
|
|
<view class="skeleton-status"></view>
|
|
</view>
|
|
<view class="skeleton-total-row">
|
|
<view class="skeleton-total-label"></view>
|
|
<view class="skeleton-total-amount"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 配送信息标题骨架屏 -->
|
|
<view class="skeleton-section-title"></view>
|
|
|
|
<!-- 订单信息卡片骨架屏 -->
|
|
<view class="skeleton-card">
|
|
<!-- 商家信息骨架屏 -->
|
|
<view class="skeleton-address-item">
|
|
<view class="skeleton-address-content">
|
|
<view class="skeleton-address-text">
|
|
<view class="skeleton-name"></view>
|
|
<view class="skeleton-address-line"></view>
|
|
</view>
|
|
<view class="skeleton-call-btn"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户信息骨架屏 -->
|
|
<view class="skeleton-address-item">
|
|
<view class="skeleton-address-content">
|
|
<view class="skeleton-address-text">
|
|
<view class="skeleton-name"></view>
|
|
<view class="skeleton-address-line"></view>
|
|
</view>
|
|
<view class="skeleton-call-btn"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 时间信息骨架屏 -->
|
|
<view class="skeleton-time"></view>
|
|
</view>
|
|
|
|
<!-- 底部提示骨架屏 -->
|
|
<view class="skeleton-bottom-tip"></view>
|
|
</view>
|
|
|
|
<!-- 实际内容 -->
|
|
<view class="order-detail-container">
|
|
<view class="section-title" style="margin: 20rpx 0;" >订单信息</view>
|
|
<!-- 订单收入信息卡片 -->
|
|
<view class="income-card">
|
|
<view class="income-header">
|
|
<text class="order-id">订单 MT20251017123456</text>
|
|
<text class="status">已到账</text>
|
|
</view>
|
|
|
|
<view class="income-details">
|
|
<view class="income-item">
|
|
<text class="income-type">配送费</text>
|
|
<text class="income-amount blue">+¥5.50</text>
|
|
</view>
|
|
<view class="income-item">
|
|
<text class="income-type">冲单奖</text>
|
|
<text class="income-amount orange">+¥3.00</text>
|
|
</view>
|
|
<view class="income-item">
|
|
<text class="income-type">恶劣天气补贴</text>
|
|
<text class="income-amount green">+¥2.00</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="total-income">
|
|
<text class="total-label">总计收入</text>
|
|
<text class="total-amount">¥10.50</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单信息卡片 -->
|
|
<view class="section-title">配送信息</view>
|
|
<view class="info-card">
|
|
<!-- 商家信息 -->
|
|
<view class="merchant-info">
|
|
<view class="merchant-detail">
|
|
<view class="merchant-text">
|
|
<text class="merchant-name">张亮麻辣烫 (五道口店)</text>
|
|
<text class="merchant-address">成府路28号</text>
|
|
</view>
|
|
</view>
|
|
<view class="call-btn" @click="callMerchant">
|
|
<up-icon name="phone" color="var(--nav-mian)" size="28rpx"></up-icon>
|
|
<text class="call-text">拨打商家</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 用户信息 -->
|
|
<view class="user-info">
|
|
<view class="user-detail">
|
|
<view class="user-text">
|
|
<text class="user-name">张*</text>
|
|
<text class="user-address">XX小区3栋502</text>
|
|
</view>
|
|
</view>
|
|
<view class="call-btn" @click="callUser">
|
|
<up-icon name="phone" color="var(--nav-mian)" size="28rpx"></up-icon>
|
|
<text class="call-text">拨打用户</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单时间信息 -->
|
|
<view class="order-time-info">
|
|
<text class="time-text">2025-10-17 18:30 下单 · 19:15 送达</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部提示 -->
|
|
<view class="bottom-tip">
|
|
<text class="tip-text">收入明细如有疑问，请联系客服</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { Service } from '@/Service/Service'
|
|
// 加载状态
|
|
const loading = ref(true)
|
|
|
|
|
|
// 拨打商家电话
|
|
const callMerchant = () => {
|
|
uni.makePhoneCall({
|
|
phoneNumber: '13800138000'
|
|
})
|
|
}
|
|
|
|
// 拨打用户电话
|
|
const callUser = () => {
|
|
uni.makePhoneCall({
|
|
phoneNumber: '13900139000'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 模拟数据加载
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1500)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
|
|
/* 实际内容样式 */
|
|
.order-detail-container {
|
|
background-color: #f5f5f5;
|
|
padding: 0 20rpx ;
|
|
}
|
|
|
|
/* 订单收入信息卡片 */
|
|
.income-card {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.income-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.order-id {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.status {
|
|
font-size: 28rpx;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.income-details {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.income-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.income-type {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.income-amount {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.income-amount.blue {
|
|
color: #1890ff;
|
|
}
|
|
|
|
.income-amount.orange {
|
|
color: #fa8c16;
|
|
}
|
|
|
|
.income-amount.green {
|
|
color: #52c41a;
|
|
}
|
|
|
|
.total-income {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.total-label {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.total-amount {
|
|
font-size: 36rpx;
|
|
color: #ff4d4f;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 订单信息卡片 */
|
|
.info-card {
|
|
margin-top: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 34rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
/* 商家信息 */
|
|
.merchant-info {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-bottom: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.merchant-detail {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.merchant-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.merchant-name {
|
|
display: block;
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.merchant-address {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
/* 用户信息 */
|
|
.user-info {
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.user-detail {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.user-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.user-name {
|
|
display: block;
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.user-address {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 拨打电话按钮 */
|
|
.call-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.call-text {
|
|
font-size: 24rpx;
|
|
color: #1890ff;
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
/* 订单时间信息 */
|
|
.time-text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 底部提示 */
|
|
.bottom-tip {
|
|
text-align: center;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.tip-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.order-detail {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* 订单状态样式 */
|
|
.order-status {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 订单基本信息样式 */
|
|
.order-basic-info {
|
|
background-color: #fff;
|
|
margin: 20rpx 20rpx;
|
|
padding: 30rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.info-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.label {
|
|
color: #666;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.value {
|
|
color: #333;
|
|
}
|
|
|
|
.value.highlight {
|
|
color: var(--nav-diluted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.value.price {
|
|
color: var(--nav-diluted);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.clock-icon {
|
|
color: #666;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
/* 地图区域样式 */
|
|
.map-section {
|
|
margin: 20rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.map-placeholder {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
background-color: #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
border: 1rpx solid #e8e8e8;
|
|
}
|
|
|
|
.map-placeholder::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, #f5f5f5 25%, #e6e6e6 25%, #e6e6e6 50%, #f5f5f5 50%, #f5f5f5 75%, #e6e6e6 75%, #e6e6e6 100%);
|
|
background-size: 20rpx 20rpx;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.map-hint {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 地址区域样式 */
|
|
.address-section {
|
|
background-color: #fff;
|
|
margin: 20rpx;
|
|
padding: 30rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 30rpx;
|
|
font-weight: 800;
|
|
color: #333;
|
|
margin-bottom: 25rpx;
|
|
}
|
|
|
|
.address-content {
|
|
position: relative;
|
|
}
|
|
|
|
.store-name,
|
|
.user-name {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 15rpx;
|
|
display: block;
|
|
}
|
|
|
|
.address {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
margin-bottom: 25rpx;
|
|
display: block;
|
|
}
|
|
|
|
.pickup-code,
|
|
.remark {
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.code-label,
|
|
.code-value {
|
|
color: var(--nav-mian);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.remark-label,
|
|
.remark-content {
|
|
color: #faad14;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 底部按钮样式 */
|
|
.bottom-action {
|
|
background-color: #fff;
|
|
width: 100vw;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.confirm-btn {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
font-size: 32rpx;
|
|
line-height: 90rpx;
|
|
border-radius: 45rpx;
|
|
}
|
|
/* 骨架屏样式 */
|
|
.skeleton-container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding: 0 20rpx 60rpx;
|
|
}
|
|
|
|
/* 标题骨架屏 */
|
|
.skeleton-section-title {
|
|
width: 160rpx;
|
|
height: 34rpx;
|
|
background-color: #e6e6e6;
|
|
margin: 30rpx 0;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
/* 卡片骨架屏 */
|
|
.skeleton-card {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
/* 收入卡片骨架屏 */
|
|
.skeleton-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.skeleton-order-id {
|
|
width: 60%;
|
|
height: 32rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-status {
|
|
width: 15%;
|
|
height: 28rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-line {
|
|
width: 100%;
|
|
height: 28rpx;
|
|
background-color: #e6e6e6;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-total-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.skeleton-total-label {
|
|
width: 40%;
|
|
height: 30rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-total-amount {
|
|
width: 25%;
|
|
height: 36rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
/* 地址信息骨架屏 */
|
|
.skeleton-address-item {
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.skeleton-address-item:last-child {
|
|
margin-bottom: 20rpx;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.skeleton-address-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.skeleton-address-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.skeleton-name {
|
|
width: 60%;
|
|
height: 30rpx;
|
|
background-color: #e6e6e6;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-address-line {
|
|
width: 80%;
|
|
height: 26rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
.skeleton-call-btn {
|
|
width: 150rpx;
|
|
height: 50rpx;
|
|
background-color: #e6e6e6;
|
|
border-radius: 25rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
/* 时间信息骨架屏 */
|
|
.skeleton-time {
|
|
width: 70%;
|
|
height: 26rpx;
|
|
background-color: #e6e6e6;
|
|
margin-top: 20rpx;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
/* 底部提示骨架屏 */
|
|
.skeleton-bottom-tip {
|
|
margin: 0 100rpx;
|
|
height: 24rpx;
|
|
background-color: #e6e6e6;
|
|
margin-top: 30rpx;
|
|
border-radius: 4rpx;
|
|
animation: shimmer 1.5s infinite;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 骨架屏动画 */
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -1000px 0;
|
|
}
|
|
100% {
|
|
background-position: 1000px 0;
|
|
}
|
|
}
|
|
|
|
/* 为骨架屏元素添加渐变背景 */
|
|
.skeleton-section-title,
|
|
.skeleton-order-id,
|
|
.skeleton-status,
|
|
.skeleton-line,
|
|
.skeleton-total-label,
|
|
.skeleton-total-amount,
|
|
.skeleton-name,
|
|
.skeleton-address-line,
|
|
.skeleton-call-btn,
|
|
.skeleton-time,
|
|
.skeleton-bottom-tip {
|
|
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 1000px 100%;
|
|
}
|
|
</style> |