883 lines
26 KiB
Vue
883 lines
26 KiB
Vue
<!-- 订单详情 -->
|
||
<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">{{ orderDetail.mainOrderStatus }}</view>
|
||
<view class="order-tips">{{ orderDetail.mainOrderStatus === '已完成' ? '已完成飞行任务' :
|
||
orderDetail.mainOrderStatus === '待确认'?'请尽快确认完成订单':'请尽快执行任务'}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-content">
|
||
<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">{{ orderDetail.orderType.slice(0, 2) }}</text>
|
||
</view>
|
||
<view class="mc-lam">
|
||
<text class="lam-title">景区</text>
|
||
<text class="lam-value">{{ orderDetail.scenicName }}</text>
|
||
</view>
|
||
<view class="mc-lam">
|
||
<text class="lam-title">路线</text>
|
||
<text class="lam-value">{{ orderDetail.routeName }}</text>
|
||
</view>
|
||
<view class="mc-lam">
|
||
<text class="lam-title">货物重量</text>
|
||
<text class="lam-value">{{ orderDetail.cargoWeight }} KG</text>
|
||
</view>
|
||
<view class="mc-lam">
|
||
<text class="lam-title">附加费</text>
|
||
<text class="lam-value"><text>{{ orderDetail.surchargeAmount }}</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" v-if="!isPilot">
|
||
<text class="lam-title">订单号</text>
|
||
<text class="lam-value">{{ orderDetail.orderNo }}</text>
|
||
</view>
|
||
<view class="mc-lam">
|
||
<text class="lam-title">发起人</text>
|
||
<text class="lam-value">{{ orderDetail.orderInitiator }}</text>
|
||
</view>
|
||
<view class="mc-lam" v-if="isPilot">
|
||
<text class="lam-title">客户名称</text>
|
||
<text class="lam-value">{{ orderDetail.customerName }}</text>
|
||
</view>
|
||
<view class="mc-lam">
|
||
<text class="lam-title">手机号</text>
|
||
<text class="lam-value">{{ isPilot?orderDetail.phone:orderDetail.initiatorPhone }}</text>
|
||
</view>
|
||
<view class="mc-lam">
|
||
<text class="lam-title">操作员</text>
|
||
<text class="lam-value">{{ orderDetail.operatorName }}</text>
|
||
</view>
|
||
<view class="mc-lam">
|
||
<text class="lam-title">下单时间</text>
|
||
<text class="lam-value">{{ orderDetail.orderCreateTime }}</text>
|
||
</view>
|
||
<view class="mc-lam" v-if="!isPilot">
|
||
<text class="lam-title">订单确认人</text>
|
||
<text class="lam-value">{{ orderDetail.customerName }}</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="fly-message-content" :style="{backgroundImage: `url(${fileUrl+mask})`}"
|
||
v-for="(item, index) in orderDetail.orderTaskDetailList" :key="index">
|
||
<view class="action-detail">
|
||
<u-image @click="preview(orderDetail.attachmentMaterialList[0].fileFullPath||(fileUrl+defaultIcon))"
|
||
border-radius="20" width="140" height="140" class="action-detail-photo"
|
||
:src="orderDetail.attachmentMaterialList[0].fileFullPath||(fileUrl+defaultIcon)" />
|
||
<view class="action-detail-content">
|
||
<view class="action-device">{{ item.deviceName }}</view>
|
||
<view>重量: {{ item.cargoWeight }}KG</view>
|
||
<view class="action-operator">操作员: {{ item.operatorName }}</view>
|
||
</view>
|
||
<view class="action-detail-status" :style="{color: item.orderItemStatus==='未进行'?'#F8B500':'#666666'}">
|
||
{{ item.orderItemStatus }}
|
||
</view>
|
||
</view>
|
||
<view class="action-btns" v-if="isPilot&&!['已完成','待确认','已取消'].includes(orderDetail.mainOrderStatus)">
|
||
<u-button :custom-style="deleteCustomStyle" style="margin-left: auto;"
|
||
:hair-line="false" @click="handleDeleteAction(item)">删除</u-button>
|
||
<u-button type="warning" :custom-style="customStyle" style="margin-left: 20rpx;margin-right: 30rpx;"
|
||
:hair-line="false" @click="handleChangeAction(item)">更改状态</u-button>
|
||
</view>
|
||
<view class="action-btns" v-else />
|
||
</view>
|
||
<view class="message-empty" v-if="!orderDetail.orderTaskDetailList||orderDetail.orderTaskDetailList.length===0">
|
||
<u-image width="200rpx" height="130rpx" :src="fileUrl+empty" />
|
||
<view class="empty-text">
|
||
~暂无任务~
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-bottom" v-if="!['已完成','已取消'].includes(orderDetail.mainOrderStatus)">
|
||
<view class="add-action" @click="addAction" v-if="isPilot&&orderDetail.mainOrderStatus!=='待确认'">
|
||
新增任务
|
||
</view>
|
||
<view class="add-action" v-else-if="!isPilot&&orderDetail.mainOrderStatus==='待确认'"
|
||
@click="finishOrder">
|
||
完成订单
|
||
</view>
|
||
</view>
|
||
<u-popup v-model="showAddAction" mode="bottom" border-radius="40" @close="closeAddAction">
|
||
<view class="action-popup">
|
||
<view class="action-top">
|
||
<view class="action-close" />
|
||
<view class="action-title">{{current===0?'新增任务':'注意事项'}}</view>
|
||
<u-icon class="action-close" :name="fileUrl+closeIcon" size="32" @click="showAddAction=false" />
|
||
</view>
|
||
<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;" placeholder="请选择设备" type="select"
|
||
v-model="form.deviceName" @click="handleClickPick('设备')" :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="form.routeName" type="select" :clearable="false"
|
||
@click="handleClickPick('路线')" placeholder="请选择路线" />
|
||
</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.cargoWeight"
|
||
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" ref="uploadRef"
|
||
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>
|
||
</view>
|
||
<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>
|
||
</view>
|
||
<view v-else-if="current === 2">
|
||
<view class="action-attention">
|
||
<view class="attention-title">
|
||
应急程序<br/>
|
||
</view>
|
||
<view class="attention-content">
|
||
✅ 每架次配应急降落伞（需定期检修）；<br/>
|
||
✅ 预设迫降点（避开人群/水域，景区地图标注）；<br/>
|
||
✅ 乘客紧急通话按钮直连指挥中心。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="action-save" @click="handleSave">
|
||
{{current === 0 ? '保存' : current === 1 ? '下一页' : '我已知晓'}}
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-picker mode="selector" v-model="showPick" :default-selector="getDefaultSelector" :range="pickType==='设备'?equipments:routes"
|
||
range-key="value" confirm-color="#f7c04d" :title="`执行${pickType}`" @confirm="handleChangePick"></u-picker>
|
||
<u-modal v-model="showChangeState" title="更新状态" show-cancel-button confirm-color="#f7c04d" @confirm="handleChangeState">
|
||
<view class="slot-content">
|
||
<u-input placeholder="请选择任务状态" v-model="stateForm.taskStatusName"
|
||
@click="showChangeStatePick = true" type="select"/>
|
||
<u-picker mode="selector" v-model="showChangeStatePick" :default-selector="getDefaultStateSelector" :range="stateList"
|
||
range-key="value" confirm-color="#f7c04d" title="飞行任务状态" @confirm="handleClickState"></u-picker>
|
||
</view>
|
||
</u-modal>
|
||
<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>
|
||
<u-toast ref="uToast"></u-toast>
|
||
<DotLoading :show="dotLoading" />
|
||
</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 },
|
||
computed:{
|
||
// 获取选择器默认值
|
||
getDefaultSelector(){
|
||
const isDevice = this.pickType === '设备';
|
||
const index = isDevice ? this.form.deviceId : this.form.routeId;
|
||
const arr = isDevice ? this.equipments : this.routes;
|
||
return index?[arr.findIndex(item=>item.key === index)]:[0];
|
||
},
|
||
// 获取状态选择器默认值
|
||
getDefaultStateSelector(){
|
||
return [this.stateList.findIndex(item=>item.key === this.stateForm.taskStatus)]||[0];
|
||
}
|
||
},
|
||
data(){
|
||
return{
|
||
// #ifdef MP
|
||
// 微信小程序自定义导航栏参数
|
||
CustomBar: this.CustomBar || 0,
|
||
// #endif
|
||
// 上传api
|
||
uploadApi: configService.apiUrl+'/api/s3Storage',
|
||
// 上传请求头
|
||
uploadFileHeader: {
|
||
'Authorization':this.$store.state.vuex_token,
|
||
},
|
||
// 执行任务按钮样式
|
||
customStyle: {
|
||
backgroundColor: '#FEE547',
|
||
color: '#333333',
|
||
fontSize: '30rpx',
|
||
fontWeight: 'bold',
|
||
fontFamily: 'Source Han Sans SC',
|
||
width: '160rpx',
|
||
height: '72rpx',
|
||
borderRadius: '12rpx',
|
||
border: 'none'
|
||
},
|
||
deleteCustomStyle:{
|
||
backgroundColor: '#FFFFFF',
|
||
color: '#333333',
|
||
fontSize: '30rpx',
|
||
fontWeight: 'bold',
|
||
fontFamily: 'Source Han Sans SC',
|
||
width: '160rpx',
|
||
height: '70rpx',
|
||
borderRadius: '10rpx',
|
||
border: '2rpx solid #999999'
|
||
},
|
||
// 状态表单
|
||
stateForm: {
|
||
orderTaskId: '',
|
||
taskStatus: 0,
|
||
taskStatusName: '未进行'
|
||
},
|
||
// 上传文件
|
||
fileList: [],
|
||
//我的页图标基础路径
|
||
myFileUrl: configService.fileUrl + 'aerocraft/my/',
|
||
// 订单页图标基础路径
|
||
fileUrl: configService.fileUrl + 'aerocraft/order/',
|
||
// 轮播图
|
||
topBg: 'top-bg-a.png',
|
||
// 文字背景图
|
||
textBg: 'text-bg.png',
|
||
// 飞行任务空图标
|
||
empty: 'action-empty.png',
|
||
// 下拉三角
|
||
triangle: 'triangle.png',
|
||
// 弹窗关闭图标
|
||
closeIcon: 'close.png',
|
||
// 上传图片图标
|
||
uploadIcon: 'upload.png',
|
||
// 蒙层
|
||
mask: 'mask.png',
|
||
// 飞行任务默认图片
|
||
defaultIcon: 'default.png',
|
||
// 页面是否滚动到顶
|
||
topLevel: 0,
|
||
// 滚动顶部
|
||
scrollTop: 0,
|
||
// 展示任务新增弹窗
|
||
showAddAction: false,
|
||
// 执行设备列表
|
||
equipments:[],
|
||
// 显示选择器
|
||
showPick: false,
|
||
// 选择器类型
|
||
pickType: '',
|
||
// 显示状态更改弹窗
|
||
showChangeState: false,
|
||
showChangeStatePick: false,
|
||
// 任务form
|
||
form:{
|
||
orderId: '',
|
||
deviceName: '',
|
||
deviceId: '',
|
||
cargoWeight: '',
|
||
attachmentMaterialList: [],
|
||
routeId: '',
|
||
routeName: ''
|
||
},
|
||
// 新增任务加载
|
||
dotLoading: false,
|
||
// 路线列表
|
||
routes: [],
|
||
// 订单详情
|
||
orderDetail: {},
|
||
// 当前页
|
||
current: 0,
|
||
// 状态列表
|
||
stateList: [
|
||
{ key: 0, value: '未进行' },
|
||
{ key: 1, value: '进行中' },
|
||
{ key: 2, value: '已完成' },
|
||
{ key: 3, value: '已取消' },
|
||
],
|
||
isPilot: this.$store.state.user_type == 1,
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
const level = e.scrollTop/60;
|
||
if(level<=1) this.topLevel = level;
|
||
else this.topLevel = 1;
|
||
this.scrollTop = e.scrollTop;
|
||
},
|
||
onLoad(e) {
|
||
this.form.orderId = e.id;
|
||
this.init(e.id);
|
||
},
|
||
methods:{
|
||
// 初始化
|
||
async init(id){
|
||
if(!id) return;
|
||
let res = await this.$api.orderDetail(id);
|
||
if(res) this.orderDetail = res;
|
||
else this.$refs.uToast.show({type: 'error',title: "订单详情获取失败!"});
|
||
let resp = await this.$api.allRoutesByScenicId(res.attractionId);
|
||
if(resp){
|
||
this.routes = resp || [];
|
||
} else {
|
||
this.$refs.uToast.show({type: 'error',title: "景区路线获取失败!"});
|
||
}
|
||
let respx = await this.$api.obtainDeviceList({attractionId: res.attractionId});
|
||
if(respx){
|
||
this.equipments = respx || [];
|
||
} else {
|
||
this.$refs.uToast.show({type: 'error',title: "景区设备获取失败!"});
|
||
}
|
||
},
|
||
// 预览
|
||
preview(url){
|
||
this.$util.tools.methods.lookImage(0,[url]);
|
||
},
|
||
// 关闭弹窗
|
||
closeAddAction(){
|
||
this.clearForm();
|
||
this.showAddAction = false;
|
||
},
|
||
// 打开新增任务弹窗
|
||
addAction(){
|
||
this.showAddAction = true;
|
||
},
|
||
// 获取订单详情
|
||
async getOrderDetail(id){
|
||
let res = await this.$api.orderDetail(id);
|
||
if(res) this.orderDetail = res;
|
||
else this.$refs.uToast.show({type: 'error',title: "订单详情获取失败!"});
|
||
},
|
||
// 设备选择
|
||
handleClickPick(type){
|
||
this.pickType = type;
|
||
this.showPick = true;
|
||
},
|
||
// 上传图片
|
||
uploadFile(file){
|
||
this.form.attachmentMaterialList = [file];
|
||
},
|
||
// 删除图片
|
||
removeFile(index){
|
||
this.form.attachmentMaterialList = [];
|
||
},
|
||
// 选择器值改变
|
||
handleChangePick(index){
|
||
const valueForm = this.pickType==='设备' ?
|
||
{ list: this.equipments, id: 'deviceId', name: 'deviceName' } :
|
||
{ list: this.routes, id: 'routeId', name: 'routeName' }
|
||
const val = valueForm.list[index[0]];
|
||
this.form[valueForm.id] = val?.key || '';
|
||
this.form[valueForm.name] = val?.value || '';
|
||
},
|
||
// 选择飞行任务状态
|
||
handleClickState(index){
|
||
const val = this.stateList[index[0]];
|
||
this.stateForm.taskStatus = val.key;
|
||
this.stateForm.taskStatusName = val.value;
|
||
},
|
||
// 保存任务
|
||
async handleSave(){
|
||
if(this.current!==0){
|
||
this.showAddAction = this.current !== 2;
|
||
this.current = (this.current+1)%3;
|
||
return;
|
||
}
|
||
const data = this.form;
|
||
console.log(data);
|
||
let warningMessage = '';
|
||
if(!data.deviceId){
|
||
warningMessage = '请选择执行设备！';
|
||
}else if(!data.routeId){
|
||
warningMessage = '请选择执行路线！';
|
||
}else if(!data.cargoWeight||!/^-?\d*\.?\d+$/.test(data.cargoWeight)){
|
||
warningMessage = '载货重量格式错误！';
|
||
}else if(data.attachmentMaterialList.length===0){
|
||
warningMessage = '请上传货物图片！';
|
||
}else{
|
||
try {
|
||
this.dotLoading = true;
|
||
let res = await this.$api.addOrderTask(data);
|
||
if(res === undefined){
|
||
this.dotLoading = false;
|
||
this.$refs.uToast.show({type: 'error',title: '当前无法新增飞行任务！'});
|
||
return;
|
||
}
|
||
await this.clearForm();
|
||
await this.getOrderDetail(this.form.orderId);
|
||
this.dotLoading = false;
|
||
this.current += 1;
|
||
this.$refs.uToast.show({type: 'success',title: `飞行任务新增成功!`});
|
||
} catch (error) {
|
||
this.dotLoading = false;
|
||
this.$refs.uToast.show({type: 'error',title: '当前无法新增飞行任务！'});
|
||
}
|
||
return;
|
||
}
|
||
this.$refs.uToast.show({type: 'warning',title: warningMessage});
|
||
},
|
||
// 修改任务状态
|
||
async handleChangeState(){
|
||
try {
|
||
const { orderTaskId, taskStatus } = this.stateForm;
|
||
let res = await this.$api.editOrderStatus(orderTaskId, taskStatus);
|
||
this.showChangeState = false;
|
||
if(res === undefined){
|
||
this.$refs.uToast.show({type: 'error',title: '无法更改该飞行任务状态！'});
|
||
return;
|
||
}
|
||
this.$refs.uToast.show({type: 'success',title: `飞行任务状态更改成功!`});
|
||
await this.getOrderDetail(this.form.orderId);
|
||
this.stateForm = {
|
||
orderTaskId: '',
|
||
taskStatus: 0,
|
||
taskStatusName: '未进行'
|
||
};
|
||
} catch (error) {
|
||
this.showChangeState = false;
|
||
this.$refs.uToast.show({type: 'error',title: '无法更改该飞行任务状态！'});
|
||
}
|
||
},
|
||
// 清空表单
|
||
clearForm(){
|
||
this.current = 0;
|
||
this.fileList = [];
|
||
this.$refs['uploadRef'].lists = [];
|
||
this.form = {
|
||
orderId: this.form.orderId,
|
||
deviceName: '',
|
||
deviceId: '',
|
||
cargoWeight: '',
|
||
attachmentMaterialList: [],
|
||
routeId: '',
|
||
routeName: ''
|
||
};
|
||
},
|
||
// 删除任务
|
||
handleDeleteAction(item){
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否确认删除该飞行任务？',
|
||
confirmColor: '#FE020E',
|
||
success: async(res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
let res = await that.$api.deleteOrderTask(item.id);
|
||
console.log(res);
|
||
if(res === undefined){
|
||
that.$refs.uToast.show({type: 'error',title: "飞行任务无法删除!"});
|
||
return;
|
||
}
|
||
that.getOrderDetail(this.form.orderId);
|
||
that.clearForm();
|
||
that.$refs.uToast.show({type: 'success',title: "飞行任务删除成功!"});
|
||
} catch (error) {
|
||
that.$refs.uToast.show({type: 'error',title: "飞行任务无法删除!"});
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 更改任务状态
|
||
handleChangeAction({id, orderItemStatus}){
|
||
this.stateForm = {
|
||
orderTaskId: id,
|
||
taskStatusName: orderItemStatus,
|
||
taskStatus: this.stateList.find(item=>item.value===orderItemStatus).key
|
||
};
|
||
this.showChangeState = true;
|
||
},
|
||
// 完成订单
|
||
async finishOrder(){
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '订单完成',
|
||
content: '是否确认完成该订单？',
|
||
confirmColor: '#f7c04d',
|
||
success: async(res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
let res = await that.$api.completeOrder(that.orderDetail.id);
|
||
if(res === undefined){
|
||
that.$refs.uToast.show({type: 'error',title: "订单完成操作失败!"});
|
||
return;
|
||
}
|
||
that.getOrderDetail(that.form.orderId);
|
||
that.$refs.uToast.show({type: 'success', title: `订单完成操作成功!`});
|
||
} catch (error) {
|
||
that.$refs.uToast.show({type: 'error', title: `订单完成操作失败!`});
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</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{
|
||
margin-top: 54rpx;
|
||
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;
|
||
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;
|
||
}
|
||
}
|
||
&-content{
|
||
background-size: contain;
|
||
margin-top: 16rpx;
|
||
background-repeat: no-repeat;
|
||
// background: linear-gradient(0deg, #FFF6BD, #FFFDF1);
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(200,199,193,0.3);
|
||
border-radius: 16rpx;
|
||
margin-bottom: 26rpx;
|
||
.action-detail{
|
||
margin: 40rpx 20rpx 0;
|
||
display: flex;
|
||
&-photo{
|
||
margin-right: 20rpx;
|
||
}
|
||
&-content{
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
.action-device{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.action-operator{
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
&-status{
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #F8B500;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.action-btns{
|
||
margin-top: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
.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{
|
||
white-space: nowrap;
|
||
margin-right: 40rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.action-lam{
|
||
border-bottom: 2rpx solid #D9D9D9;
|
||
margin-bottom: 34rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-bottom: 30rpx;
|
||
.lam-title{
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #1A1A1A;
|
||
margin-right: 50rpx;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
::v-deep .u-default-hover{
|
||
border-color: #F8B500 !important;
|
||
background-color: #fdf6ec !important;
|
||
color: #f29100 !important;
|
||
&:active{
|
||
border-color: #F8B500 !important;
|
||
background-color: #fdf6ec !important;
|
||
color: #f29100 !important;
|
||
}
|
||
&:focus{
|
||
border-color: #F8B500 !important;
|
||
background-color: #fdf6ec !important;
|
||
color: #f29100 !important;
|
||
}
|
||
}
|
||
.slot-content{
|
||
padding: 10rpx 50rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
</style> |