完善订单详情静态界面
This commit is contained in:
parent
a2645471e8
commit
0973045234
@ -11,8 +11,87 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="order-content">
|
<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>
|
||||||
|
<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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -34,15 +113,26 @@ export default {
|
|||||||
// #endif
|
// #endif
|
||||||
//我的页图标基础路径
|
//我的页图标基础路径
|
||||||
myFileUrl: configService.fileUrl + 'aerocraft/my/',
|
myFileUrl: configService.fileUrl + 'aerocraft/my/',
|
||||||
|
// 订单页图标基础路径
|
||||||
|
fileUrl: configService.fileUrl + 'aerocraft/order/',
|
||||||
// 轮播图
|
// 轮播图
|
||||||
topBg: 'top-bg.png',
|
topBg: 'top-bg.png',
|
||||||
|
// 文字背景图
|
||||||
|
textBg: 'text-bg.png',
|
||||||
|
// 飞行任务空图标
|
||||||
|
empty: 'action-empty.png',
|
||||||
// 页面是否滚动到顶
|
// 页面是否滚动到顶
|
||||||
topLevel: 0,
|
topLevel: 0,
|
||||||
|
// 滚动顶部
|
||||||
|
scrollTop: 0,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onPageScroll(e) {
|
onPageScroll(e) {
|
||||||
|
const level = e.scrollTop/60;
|
||||||
}
|
if(level<=1) this.topLevel = level;
|
||||||
|
else this.topLevel = 1;
|
||||||
|
this.scrollTop = e.scrollTop;
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -57,7 +147,7 @@ export default {
|
|||||||
.top-abs{
|
.top-abs{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
.order-status{
|
.order-status{
|
||||||
margin-top: 68rpx;
|
margin-top: 54rpx;
|
||||||
margin-left: 32rpx;
|
margin-left: 32rpx;
|
||||||
font-family: Source Han Sans SC;
|
font-family: Source Han Sans SC;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -80,7 +170,105 @@ export default {
|
|||||||
margin-top: -230rpx;
|
margin-top: -230rpx;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 20rpx;
|
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>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user