hjq/aircraft-pilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善订单详情静态界面

Browse Source
This commit is contained in:
Double-_-Z 2025-07-25 00:38:34 +08:00
parent a2645471e8
commit 0973045234
1 changed files with 193 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
aircraft/server/order/detail.vue
View File

@ -11,8 +11,87 @@
</view>
</view>
<view class="order-content">
123
<view class="fly-message">
<view class="message-title">
<view class="text-content">飞行信息</view>
<u-image class="text-bg" width="148" height="28"
:src="fileUrl+textBg" />
</view>
<view class="message-content">
<view class="mc-lam">
<text class="lam-title">订单类型</text>
<text class="lam-value">载人</text>
</view>
<view class="mc-lam">
<text class="lam-title">景区</text>
<text class="lam-value">白云山</text>
</view>
<view class="mc-lam">
<text class="lam-title">路线</text>
<text class="lam-value">南门→山顶广场</text>
</view>
<view class="mc-lam">
<text class="lam-title">货物重量</text>
<text class="lam-value">56 KG</text>
</view>
<view class="mc-lam">
<text class="lam-title">附加费</text>
<text class="lam-value"><text>100</text>元</text>
</view>
</view>
</view>
<view class="fly-message">
<view class="message-title">
<view class="text-content">订单信息</view>
<u-image class="text-bg" width="148" height="28"
:src="fileUrl+textBg" />
</view>
<view class="message-content">
<view class="mc-lam">
<text class="lam-title">发起人</text>
<text class="lam-value">李晓霞</text>
</view>
<view class="mc-lam">
<text class="lam-title">客户名称</text>
<text class="lam-value">李晓霞</text>
</view>
<view class="mc-lam">
<text class="lam-title">手机号</text>
<text class="lam-value">13624566325</text>
</view>
<view class="mc-lam">
<text class="lam-title">操作员</text>
<text class="lam-value">陈新生</text>
</view>
<view class="mc-lam">
<text class="lam-title">下单时间</text>
<text class="lam-value">2025-07-06 14:02:08</text>
</view>
</view>
</view>
<view class="fly-message">
<view class="message-title">
<view class="text-content">飞行任务</view>
<u-image class="text-bg" width="148" height="28"
:src="fileUrl+textBg" />
</view>
<view class="message-empty">
<u-image width="200rpx" height="130rpx" :src="fileUrl+empty" />
<view class="empty-text">
~暂无任务~
</view>
</view>
</view>
</view>
<view class="order-bottom">
<view class="add-action">
新增任务
</view>
</view>
<u-back-top :scrollTop="scrollTop" zIndex="100" :duration="500"
:iconStyle="{ color: '#fff' }" :customStyle="{background: 'linear-gradient(180deg, #f8b500 0%, #fceabb 100%)',
boxShadow: '0rpx 0rpx 12rpx rgba(202,202,182,0.5)',
filter: 'opacity(0.96)'}"></u-back-top>
</view>
</template>
@ -34,15 +113,26 @@ export default {
// #endif
//我的页图标基础路径
myFileUrl: configService.fileUrl + 'aerocraft/my/',
// 订单页图标基础路径
fileUrl: configService.fileUrl + 'aerocraft/order/',
// 轮播图
topBg: 'top-bg.png',
// 文字背景图
textBg: 'text-bg.png',
// 飞行任务空图标
empty: 'action-empty.png',
// 页面是否滚动到顶
topLevel: 0,
// 滚动顶部
scrollTop: 0,
}
},
onPageScroll(e) {
}
const level = e.scrollTop/60;
if(level<=1) this.topLevel = level;
else this.topLevel = 1;
this.scrollTop = e.scrollTop;
},
}
</script>
@ -57,7 +147,7 @@ export default {
.top-abs{
position: absolute;
.order-status{
margin-top: 68rpx;
margin-top: 54rpx;
margin-left: 32rpx;
font-family: Source Han Sans SC;
font-weight: bold;
@ -80,7 +170,105 @@ export default {
margin-top: -230rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 40rpx 30rpx 20rpx;
padding: 40rpx 30rpx calc(150rpx + env(safe-area-inset-bottom));
.fly-message{
display: flex;
flex-direction: column;
margin-bottom: 40rpx;
.message-title{
position: relative;
height: 52rpx;
.text-content{
z-index: 1;
font-family: Source Han Sans SC;
font-weight: bold;
font-size: 36rpx;
color: #333333;
position: absolute;
}
.text-bg{
z-index: 0;
top: 0;position: absolute;
left: 0;
margin-top: 24rpx;
}
}
.message-empty{
margin-top: 16rpx;
padding: 90rpx 30rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.empty-text{
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 30rpx;
color: #999999;
margin-top: 30rpx;
}
}
.message-content{
margin-top: 16rpx;
background: #F7F7F7;
border-radius: 30rpx;
display: flex;
flex-direction: column;
padding: 0 30rpx;
overflow: hidden;
.mc-lam{
display: flex;
align-items: center;
justify-content: space-between;
padding: 36rpx 0;
border-bottom: 2rpx solid #E6E6E6;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 32rpx;
&:nth-last-child(1){
border-bottom: none;
}
.lam-title{
color: #5E5E5E;
}
.lam-value{
color: #333333;
text{
margin-right: 12rpx;
color: #FA6400;
font-family: Arial;
font-weight: bold;
font-size: 34rpx;
}
}
}
}
}
}
.order-bottom{
z-index: 2;
position: fixed;
bottom: -2rpx;
width: 100%;
background-color: #FFFFFF;
padding: 16rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
.add-action{
background: #FEE547;
border-radius: 12rpx;
font-family: Source Han Sans SC;
font-weight: bold;
font-size: 30rpx;
color: #333333;
display: flex;
align-items: center;
justify-content: center;
padding: 30rpx 0;
&:active{
margin: 4rpx 0;
font-size: 26rpx;
opacity: 0.8;
}
}
}
}
</style>