hjq/aircraft-pilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
0cb68fb371
aircraft-pilot/aircraft/server/order/detail.vue

522 lines
14 KiB
Vue
Raw Normal View History

登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
<!-- 订单详情 -->
<template>
<view class="order-detail">
<Topnav :topLevel="topLevel" title="订单详情" defaultBackColor="#333333"
defaultNavTextColor="#333333" showBack />
<view class="order-top">
<u-image width="100%" :src="myFileUrl+topBg" mode="widthFix" />
<view class="top-abs" :style="{top: CustomBar+'px'}">
<view class="order-status">待接单</view>
<view class="order-tips">请尽快执行任务</view>
</view>
</view>
<view class="order-content">
完善订单详情静态界面
2025-07-25 00:38:34 +08:00
<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">
订单新增弹窗
2025-07-25 11:04:04 +08:00
<view class="add-action" @click="showAddAction=true">
完善订单详情静态界面
2025-07-25 00:38:34 +08:00
新增任务
</view>
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
</view>
订单新增弹窗
2025-07-25 11:04:04 +08:00
<u-popup v-model="showAddAction" mode="bottom" border-radius="40">
<view class="action-popup">
<view class="action-top">
<view class="action-close" />
新增订单弹窗调整
2025-07-29 01:03:38 +08:00
<view class="action-title">{{current===0?'新增任务':'注意事项'}}</view>
订单新增弹窗
2025-07-25 11:04:04 +08:00
<u-icon class="action-close" :name="fileUrl+closeIcon" size="32" @click="showAddAction=false" />
</view>
新增订单弹窗调整
2025-07-29 01:03:38 +08:00
<view v-if="current === 0">
<view class="action-lam" style="margin-top: 72rpx;">
<view class="lam-title">执行设备</view>
<u-input class="lam-input" placeholder-style="font-size:32rpx;color:#B3B3B3;"
custom-style="font-size:32rpx;"
v-model="form.equipmentName" @click="handleClickPick"
placeholder="请选择设备" type="select" :clearable="false" />
</view>
<view class="action-lam">
<view class="lam-title">载货重量</view>
<u-input class="lam-input" placeholder-style="font-size:32rpx;color:#B3B3B3;"
custom-style="font-size:32rpx;" v-model.number="form.weight"
placeholder="请填写重量" type="number" :clearable="false" />
<view class="lam-input-right">KG</view>
</view>
<view class="action-lamx">
<view class="lam-title">货物图片</view>
<view class="lam-upload">
<u-upload :action="uploadApi" max-count="1" :file-list="fileList"
width="200" height="200" custom-btn :multiple="false" :header="uploadFileHeader"
@on-success="uploadFile" @on-remove="removeFile" name="file">
<view slot="addBtn" class="lam-upload-btn">
<u-icon :name="fileUrl+uploadIcon" size="60"></u-icon>
<view class="lam-upload-btn-text">上传图片</view>
</view>
</u-upload>
</view>
</view>
订单新增弹窗
2025-07-25 11:04:04 +08:00
</view>
新增订单弹窗调整
2025-07-29 01:03:38 +08:00
<view v-else-if="current === 1">
<view class="action-attention">
<view class="attention-title">
1. 乘客管理<br/>准入条件<br/>
</view>
<view class="attention-content">
✅ 身高/体重限制（如：40kg-100kg，需明确公示）；<br/>
✅ 禁止孕妇、心血管疾病患者、醉酒者乘机；<br/>
✅ 签署《风险告知书》并购买保险。<br/>
</view>
<view class="attention-title">
行为规范<br/>
</view>
<view class="attention-content">
❗ 全程系紧安全带，禁止触碰舱门/舷窗；<br/>
❗ 禁止携带易燃易爆物品（含充电宝＞100Wh）；<br/>
❗ 飞行中禁用电子设备（防信号干扰）。<br/>
</view>
<view class="attention-title">
2. 飞行安全<br/>气象红线<br/>
</view>
<view class="attention-content">
🔸 风速＞8m/s、能见度＜1km、雷雨天气立即停飞；<br/>
🔸 高原景区需额外监测空气密度（影响升力）。<br/>
</view>
</view>
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
</view>
新增订单弹窗调整
2025-07-29 01:03:38 +08:00
<view v-else-if="current === 2">
<view class="action-attention">
<view class="attention-title">
应急程序<br/>
</view>
<view class="attention-content">
✅ 每架次配应急降落伞（需定期检修）；<br/>
✅ 预设迫降点（避开人群/水域，景区地图标注）；<br/>
✅ 乘客紧急通话按钮直连指挥中心。
</view>
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
</view>
</view>
新增订单弹窗调整
2025-07-29 01:03:38 +08:00
<view class="action-save" @click="handleSave">
{{current === 0 ? '保存' : current === 1 ? '下一页' : '我已知晓'}}
订单新增弹窗
2025-07-25 11:04:04 +08:00
</view>
</view>
</u-popup>
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
<u-picker mode="selector" v-model="showEquipment" :default-selector="getDefaultSelector" :range="equipments"
range-key="name" confirm-color="#f7c04d" title="执行设备选择" @confirm="handleChangePick"></u-picker>
完善订单详情静态界面
2025-07-25 00:38:34 +08:00
<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>
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
</view>
</template>
<script>
import Topnav from '@/components/topnav/index.vue';
import configService from '@/common/config.service.js';
export default {
// #ifdef MP
options: {
styleIsolation: 'shared'
},
// #endif
components: { Topnav },
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
computed:{
// 获取选择器默认值
getDefaultSelector(){
const index = this.form.equipmentId;
return index?[this.equipments.findIndex(item=>item.id === index)]:[0];
}
},
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
data(){
return{
// #ifdef MP
// 微信小程序自定义导航栏参数
CustomBar: this.CustomBar || 0,
// #endif
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
// 上传api
uploadApi: configService.apiUrl+'/api/s3Storage',
// 上传请求头
uploadFileHeader: {
'Authorization':this.$store.state.vuex_token,
},
// 上传文件
fileList: [],
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
//我的页图标基础路径
myFileUrl: configService.fileUrl + 'aerocraft/my/',
完善订单详情静态界面
2025-07-25 00:38:34 +08:00
// 订单页图标基础路径
fileUrl: configService.fileUrl + 'aerocraft/order/',
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
// 轮播图
topBg: 'top-bg.png',
完善订单详情静态界面
2025-07-25 00:38:34 +08:00
// 文字背景图
textBg: 'text-bg.png',
// 飞行任务空图标
empty: 'action-empty.png',
订单新增弹窗
2025-07-25 11:04:04 +08:00
// 下拉三角
triangle: 'triangle.png',
// 弹窗关闭图标
closeIcon: 'close.png',
// 上传图片图标
uploadIcon: 'upload.png',
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
// 页面是否滚动到顶
topLevel: 0,
完善订单详情静态界面
2025-07-25 00:38:34 +08:00
// 滚动顶部
scrollTop: 0,
订单新增弹窗
2025-07-25 11:04:04 +08:00
// 展示任务新增弹窗
showAddAction: false,
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
// 执行设备列表
equipments:[],
// 显示设备选择器
showEquipment: false,
订单新增弹窗
2025-07-25 11:04:04 +08:00
// 任务form
form:{
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
equipmentName: '',
equipmentId: '',
订单新增弹窗
2025-07-25 11:04:04 +08:00
weight: '',
photo: ''
新增订单弹窗调整
2025-07-29 01:03:38 +08:00
},
// 当前页
current: 0
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
}
},
onPageScroll(e) {
完善订单详情静态界面
2025-07-25 00:38:34 +08:00
const level = e.scrollTop/60;
if(level<=1) this.topLevel = level;
else this.topLevel = 1;
this.scrollTop = e.scrollTop;
},
订单新增弹窗
2025-07-25 11:04:04 +08:00
methods:{
// 设备选择
handleClickPick(){
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
this.showEquipment = true;
},
// 上传图片
uploadFile({fileFullPath}){
this.form.photo = fileFullPath;
},
// 删除图片
removeFile(index){
this.form.photo = "";
},
// 选择器值改变
handleChangePick(index){
const val = this.equipments[index[0]];
this.form.equipmentId = val?.id || '';
this.form.equipmentName = val?.name || '';
新增订单弹窗调整
2025-07-29 01:03:38 +08:00
},
// 保存任务
handleSave(){
if(this.current === 2){
this.showAddAction = false;
this.current = 0;
}
this.current += 1;
订单新增弹窗
2025-07-25 11:04:04 +08:00
}
}
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
}
</script>
<style scoped lang="scss">
.order-detail{
display: flex;
flex-direction: column;
min-height: 100vh;
.order-top{
width: 100%;
position: relative;
.top-abs{
position: absolute;
.order-status{
完善订单详情静态界面
2025-07-25 00:38:34 +08:00
margin-top: 54rpx;
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
margin-left: 32rpx;
font-family: Source Han Sans SC;
font-weight: bold;
font-size: 42rpx;
color: #333333;
}
.order-tips{
margin-top: 28rpx;
margin-left: 32rpx;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 28rpx;
color: #666666;
}
}
}
.order-content{
flex: 1;
z-index: 1;
margin-top: -230rpx;
background: #FFFFFF;
border-radius: 20rpx;
完善订单详情静态界面
2025-07-25 00:38:34 +08:00
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;
}
}
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
}
订单新增弹窗
2025-07-25 11:04:04 +08:00
.action-popup{
padding: 30rpx 34rpx;
.action-top{
display: flex;
align-items: center;
justify-content: space-between;
.action-title{
font-family: Source Han Sans SC;
font-weight: bold;
font-size: 36rpx;
color: #333333;
}
.action-close{
margin-top: -10rpx;
}
}
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
.action-lamx{
margin-top: 16rpx;
display: flex;
padding-bottom: 30rpx;
margin-bottom: 124rpx;
.lam-title{
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 32rpx;
color: #1A1A1A;
margin-right: 52rpx;
}
}
新增订单弹窗调整
2025-07-29 01:03:38 +08:00
.action-attention{
margin: 44rpx 0 72rpx;
font-family: Source Han Sans SC;
font-size: 30rpx;
color: #333333;
line-height: 60rpx;
.attention-title{
font-weight: bold;
}
}
订单新增弹窗
2025-07-25 11:04:04 +08:00
.action-lam{
border-bottom: 2rpx solid #D9D9D9;
margin-bottom: 34rpx;
display: flex;
align-items: center;
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
padding-bottom: 30rpx;
订单新增弹窗
2025-07-25 11:04:04 +08:00
.lam-title{
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 32rpx;
color: #1A1A1A;
margin-right: 50rpx;
}
完善订单任务新增弹窗
2025-07-28 01:20:29 +08:00
.lam-input{
flex: 1;
&::v-deep .u-icon__icon{
color: #333333 !important;
}
}
.lam-input-right{
font-family: Source Han Sans SC;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
}
.action-save{
display: flex;
justify-content: center;
align-items: center;
background: #FEE547;
border-radius: 12rpx;
font-family: Source Han Sans SC;
font-weight: bold;
font-size: 30rpx;
color: #333333;
padding: 30rpx 0;
margin-bottom: 44rpx;
&:active{
opacity: 0.8;
}
}
}
}
.lam-upload{
&-btn{
width: 200rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 20rpx;
border: 2rpx solid #CCCCCC;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&-text{
margin-top: 14rpx;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 28rpx;
color: #1A1A1A;
订单新增弹窗
2025-07-25 11:04:04 +08:00
}
}
登录逻辑微调，订单详情初框
2025-07-24 18:50:16 +08:00
}
</style>
Reference in New Issue Copy Permalink