180 lines
3.6 KiB
Plaintext
180 lines
3.6 KiB
Plaintext
<template>
|
|
<view 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 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 type="primary" size="default" class="continue-btn">
|
|
继续接单
|
|
</up-button>
|
|
<up-button type="default" size="default" class="view-progress-btn">
|
|
查看异常进度
|
|
</up-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
// 页面加载时的逻辑
|
|
onLoad(() => {
|
|
console.log('异常上报成功页面加载')
|
|
})
|
|
</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;
|
|
}
|
|
</style> |