首次完整推送，
V：1.20240808.006
This commit is contained in:
fm453
409
pages/ctms/order/detail/check.vue
Normal file
409
pages/ctms/order/detail/check.vue
Normal file
@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-section title="基础信息" type="line">
|
||||
<uni-card :is-shadow="false">
|
||||
<view class="uni-body">
|
||||
<view>车辆：{{order.car_title}} -- {{order.car_number}}</view>
|
||||
<view>运单号：{{order.sn}}</view>
|
||||
<view>日期：{{order.signdate}}</view>
|
||||
<view>起运地：{{order.from_province}}-{{order.start_city}} =>
|
||||
目的地：{{order.to_province}}-{{order.aim_city}}
|
||||
</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
</uni-section>
|
||||
<uni-section title="链接" subTitle="使用系统浏览器打开" type="line" padding>
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">
|
||||
<uni-link :href="h5_url+'?oid='+oid" :text="h5_url"></uni-link>
|
||||
</view>
|
||||
</view>
|
||||
</uni-section>
|
||||
</view>
|
||||
|
||||
<view class="container">
|
||||
<view class="uni-common-mt uni-form">
|
||||
<uni-section title="（*）验车备注" type="line">
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">验车人</view>
|
||||
<view class="data">
|
||||
<input class="uni-input" name="checker" v-model="order_up.checker" placeholder="验车人的名字" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">公里数</view>
|
||||
<view class="data">
|
||||
<input class="uni-input" name="start_km" v-model="order_up.start_km" placeholder="当前仪表盘公里数" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">行驶证</view>
|
||||
<radio-group name="is_driving_lisence" class="radio" @change="radioChangeDriving">
|
||||
<label>
|
||||
<radio value="1" :checked="order_up.is_driving_lisence==1?true:false" /><text>未随车</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="0" :checked="order_up.is_driving_lisence==-1?true:false" /><text>不确定</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item ">
|
||||
<view class="title">随车物品</view>
|
||||
<view class="data">
|
||||
<textarea name="car_extra" auto-height placeholder-style="color:#F76260" placeholder=""
|
||||
v-model="order_up.car_extra" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-section>
|
||||
</view>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="driving_lisence" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="行驶证照片" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_f" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="正面车身照片" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_b" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="尾部车身照" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_l" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="左侧车身照" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="thumb_r" :auto-upload="false" file-mediatype="image" mode="grid"
|
||||
file-extname="png,jpg,gif" :limit="1" :delIcon="null" title="右侧车照" />
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
<uni-section title="点击图片可查看" type="line">
|
||||
<view class="example-body">
|
||||
<uni-file-picker v-model="fileLists" ref="thumbs" :auto-upload="false" file-mediatype="image"
|
||||
mode="grid" file-extname="png,jpg,gif" :limit="fileLists.length" @select="multiSelect"
|
||||
title="其他验车照片" :image-styles="imageStyles" :delIcon="null" />
|
||||
|
||||
</view>
|
||||
</uni-section>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/config/ctms.config.js";
|
||||
import ctms from '@/apis/ctms/index.js';
|
||||
import Hi from '@/common/util.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
oid: 0,
|
||||
order: {
|
||||
id: 0,
|
||||
remark: '备注',
|
||||
},
|
||||
|
||||
h5_url: '',
|
||||
//要上传修改的订单数据部分（留空的则服务端不覆盖）
|
||||
order_up: {
|
||||
driving_lisence: '',
|
||||
thumb_f: '',
|
||||
thumb_b: '',
|
||||
thumb_l: '',
|
||||
thumb_r: '',
|
||||
thumbs: [],
|
||||
start_km: 0,
|
||||
is_driving_lisence: 0,
|
||||
car_extra: '',
|
||||
checker: ''
|
||||
},
|
||||
driving_lisence: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '行驶证'
|
||||
},
|
||||
thumb_f: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '车头照'
|
||||
},
|
||||
thumb_b: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '车尾照'
|
||||
},
|
||||
thumb_r: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '右车身'
|
||||
},
|
||||
thumb_l: {
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: '左车身'
|
||||
},
|
||||
//订单详情thumbs转换为可显部分 //该字段未启用
|
||||
thumbs: [{
|
||||
url: '',
|
||||
extname: 'jpg',
|
||||
name: 'thumbs[]'
|
||||
}],
|
||||
thumbs_files: [], //多图待上传
|
||||
//呈现多图列表 //通过组件内加号选择上传的多图列表也加入到这
|
||||
fileLists: [],
|
||||
/*{
|
||||
url: '//public.hiluker.com/fm.jpg',
|
||||
extname: 'jpg',
|
||||
name: 'thumbs[]',
|
||||
_src: '/pics/X/Y/Z/.test.jpg' //BY FM453，自行添加的一个属性，将图片原始目录数据保存，备用
|
||||
}*/
|
||||
//所有已选多图 //该字段未启用
|
||||
tmpfiles: [{}], //{'blob:http://localhost:3000/4c9d3b56-041b-40fb-8c2b-221ae9d56a56'}
|
||||
|
||||
//图片上传组件样式定义
|
||||
imageStyles: {
|
||||
width: 128,
|
||||
height: 128,
|
||||
border: {
|
||||
radius: '2%',
|
||||
color: '#ddd',
|
||||
},
|
||||
},
|
||||
listStyles: {
|
||||
// 是否显示边框
|
||||
border: true,
|
||||
// 是否显示分隔线
|
||||
dividline: true,
|
||||
// 线条样式
|
||||
borderStyle: {
|
||||
width: 1,
|
||||
color: 'blue',
|
||||
style: 'dashed',
|
||||
radius: 2
|
||||
},
|
||||
},
|
||||
|
||||
//悬浮按钮
|
||||
horizontal: 'right',
|
||||
vertical: 'bottom',
|
||||
direction: 'vertical', //horizontal水平展开；vertical垂直展开
|
||||
pattern: {
|
||||
color: '#7A7E83',
|
||||
backgroundColor: '#eef',
|
||||
selectedColor: '#007AFF',
|
||||
buttonColor: '#fd8008',
|
||||
iconColor: '#fff'
|
||||
},
|
||||
content: [{
|
||||
iconPath: '/static/c1.png',
|
||||
selectedIconPath: '/static/c1.png',
|
||||
text: '保存草稿',
|
||||
active: false,
|
||||
diyfn: '1' //自定义添加的一个字段
|
||||
},
|
||||
{
|
||||
iconPath: '/static/submit.png',
|
||||
selectedIconPath: '/static/submit-active.png',
|
||||
text: '确认上传',
|
||||
active: false,
|
||||
diyfn: false
|
||||
}
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getOderDetail: function(e) {
|
||||
var _that = this;
|
||||
ctms.order.checkDetail(this.oid).then((res) => {
|
||||
if (res) {
|
||||
var order = res;
|
||||
_that.oid = order.id;
|
||||
order = Hi._that.formatOrder(order, false);
|
||||
_that.order = order;
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
});
|
||||
},
|
||||
//order,订单详情原始数据; restore,是否重新存储
|
||||
formatOrder: function(order, restore = false) {
|
||||
if (order.driving_lisence) {
|
||||
Hi._that.driving_lisence.url = order.driving_lisence_url;
|
||||
}
|
||||
if (order.thumb_f) {
|
||||
Hi._that.thumb_f.url = order.thumb_f_url;
|
||||
}
|
||||
if (order.thumb_b) {
|
||||
Hi._that.thumb_b.url = order.thumb_b_url;
|
||||
}
|
||||
if (order.thumb_r) {
|
||||
Hi._that.thumb_r.url = order.thumb_r_url;
|
||||
}
|
||||
if (order.thumb_l) {
|
||||
Hi._that.thumb_l.url = order.thumb_l_url;
|
||||
}
|
||||
|
||||
if (order.thumbs) {
|
||||
var f, l;
|
||||
const t = [];
|
||||
for (let fi in order.thumbs_url) {
|
||||
f = order.thumbs_url[fi];
|
||||
l = {
|
||||
url: f.url,
|
||||
extname: 'jpg',
|
||||
name: 'thumbs',
|
||||
_src: f.src
|
||||
};
|
||||
// console.log(l)
|
||||
t.push(l);
|
||||
}
|
||||
Hi._that.fileLists = t;
|
||||
}
|
||||
|
||||
// console.log(Hi._that.fileLists);
|
||||
if (order.checker) {
|
||||
Hi._that.order_up.checker = order.checker;
|
||||
} else {
|
||||
Hi._that.order_up.checker = Hi._that.userinfo.username;
|
||||
}
|
||||
if (order.car_extra) {
|
||||
Hi._that.order_up.car_extra = order.car_extra;
|
||||
}
|
||||
if (order.start_km) {
|
||||
Hi._that.order_up.start_km = order.start_km;
|
||||
}
|
||||
if (order.no_driving_lisence) {
|
||||
Hi._that.order_up.is_driving_lisence = order
|
||||
.no_driving_lisence; //确认行驶证未随车
|
||||
}
|
||||
if (restore) {
|
||||
var lsIndex = Hi._that.orderLsIndex + '-' + Hi._that.oid;
|
||||
uni.setStorageSync(lsIndex, order);
|
||||
}
|
||||
return order;
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(o) {
|
||||
Hi._that = this; //在部分函数内部，无法再直接调用this，所以改用该方法赋值后再调用，效果等同于this
|
||||
this.oid = o.oid;
|
||||
this.h5_url = config.h5_view;
|
||||
this.userinfo = ctms.user.getInfo();
|
||||
},
|
||||
onShow() {
|
||||
var res = ctms.order.detail(this.oid);
|
||||
if (res) {
|
||||
this.order = res;
|
||||
this.formatOrder(res, false);
|
||||
} else {
|
||||
this.getOderDetail();
|
||||
}
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.getOderDetail();
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.example-body {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.custom-image-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-form-item .title {
|
||||
width: 150rpx;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn[size='mini'] {
|
||||
margin-right: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #42b983;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #fc8105;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #f00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0095f6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
border: #bbb solid 1rpx;
|
||||
}
|
||||
|
||||
/*调整下上传组件样式*/
|
||||
.icon-add {
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.file-image {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
|
||||
.file-image>image {
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #f00;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
margin: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user