409 lines
14 KiB
Vue
409 lines
14 KiB
Vue
<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> |