938 lines
36 KiB
Vue
938 lines
36 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>随车物品：{{order.car_extra}}</view>
|
||
</view>
|
||
</uni-card>
|
||
</uni-section>
|
||
<uni-section title="链接" subTitle="使用系统浏览器打开" type="line" padding>
|
||
<uni-link :href="h5_url+'?oid='+oid" :text="h5_url"></uni-link>
|
||
</uni-section>
|
||
</view>
|
||
<view class="container">
|
||
<view class="uni-common-mt uni-form">
|
||
<uni-section title="（*）验车备注" type="line">
|
||
<view class="uni-form-item ">
|
||
<text class="help-block">请确认提醒客户，取下ETC卡并妥善放置</text>
|
||
</view>
|
||
|
||
<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>
|
||
|
||
<view class="uni-form-item ">
|
||
<button class="btn btn-success" @click="updata">上传数据</button>
|
||
</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"
|
||
:limit="1" :delIcon="null" title="行驶证照片" />
|
||
<input hidden="true" class="uni-input" v-model="order_up.driving_lisence"
|
||
placeholder="直接在此处填写图片地址也可以" />
|
||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1" title=""
|
||
:image-styles="imageStyles" @select="select1" @progress="progress1" @success="success1"
|
||
@fail="fail1" />
|
||
<button hidden="true" class="btn btn-primary" size="mini" @click="upload1">上传</button>
|
||
<button :hidden="order_up.driving_lisence == '' ? true : false" class="btn btn-danger" size="mini"
|
||
@click="reset1">重置</button>
|
||
<button class="btn btn-warning" size="mini" @click="recovery1">还原</button>
|
||
<button :hidden="order_up.driving_lisence == '' ? true : false" class="btn btn-success" size="mini"
|
||
@click="save1">保存</button>
|
||
</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" :limit="1"
|
||
:delIcon="null" title="正面车身照片" />
|
||
<input hidden="true" class="uni-input" v-model="order_up.thumb_f" placeholder="直接在此处填写图片地址也可以" />
|
||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1" title=""
|
||
:image-styles="imageStyles" @select="select2" @progress="progress2" @success="success2"
|
||
@fail="fail2" />
|
||
<button :hidden="order_up.thumb_f == '' ? true : false" class="btn btn-danger" size="mini"
|
||
@click="reset2">重置</button>
|
||
<button class="btn btn-warning" size="mini" @click="recovery2">还原</button>
|
||
<button :hidden="order_up.thumb_f == '' ? true : false" class="btn btn-success" size="mini"
|
||
@click="save2">保存</button>
|
||
</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" :limit="1"
|
||
:delIcon="null" title="尾部车身照" />
|
||
<input hidden="true" class="uni-input" v-model="order_up.thumb_b" placeholder="直接在此处填写图片地址也可以" />
|
||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1"
|
||
:image-styles="imageStyles" @select="select3" @progress="progress3" @success="success3"
|
||
@fail="fail3" />
|
||
<button :hidden="order_up.thumb_b == '' ? true : false" class="btn btn-danger" size="mini"
|
||
@click="reset3">重置</button>
|
||
<button class="btn btn-warning" size="mini" @click="recovery3">还原</button>
|
||
<button :hidden="order_up.thumb_b == '' ? true : false" class="btn btn-success" size="mini"
|
||
@click="save3">保存</button>
|
||
</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" :limit="1"
|
||
:delIcon="null" title="左侧车身照" />
|
||
<input hidden="true" class="uni-input" v-model="order_up.thumb_l" placeholder="直接在此处填写图片地址也可以" />
|
||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1"
|
||
:image-styles="imageStyles" @select="select4" @progress="progress4" @success="success4"
|
||
@fail="fail4" />
|
||
<button :hidden="order_up.thumb_l == '' ? true : false" class="btn btn-danger" size="mini"
|
||
@click="reset4">重置</button>
|
||
<button class="btn btn-warning" size="mini" @click="recovery4">还原</button>
|
||
<button :hidden="order_up.thumb_l == '' ? true : false" class="btn btn-success" size="mini"
|
||
@click="save4">保存</button>
|
||
</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" :limit="1"
|
||
:delIcon="null" title="右侧车照" />
|
||
<input hidden="true" class="uni-input" v-model="order_up.thumb_r" placeholder="直接在此处填写图片地址也可以" />
|
||
<uni-file-picker ref="files" :auto-upload="true" file-mediatype="image" mode="grid" :limit="1"
|
||
:image-styles="imageStyles" @select="select5" @progress="progress5" @success="success5"
|
||
@fail="fail5" />
|
||
<button :hidden="order_up.thumb_r == '' ? true : false" class="btn btn-danger" size="mini"
|
||
@click="reset5">重置</button>
|
||
<button class="btn btn-warning" size="mini" @click="recovery5">还原</button>
|
||
<button :hidden="order_up.thumb_r == '' ? true : false" class="btn btn-success" size="mini"
|
||
@click="save5">保存</button>
|
||
</view>
|
||
</uni-section>
|
||
|
||
<uni-section title="选择剩余验车图片并点击上传" type="line">
|
||
<view class="example-body">
|
||
<uni-file-picker v-model="fileLists" ref="thumbs" :auto-upload="true" file-mediatype="image" mode="grid"
|
||
:limit="99" title="其他验车照片" :image-styles="imageStyles" @select="multiSelect"
|
||
@progress="multiProgress" @success="multiSuccess" @fail="multiFail" />
|
||
|
||
<button hidden="true" class="btn btn-danger" size="mini" @click="multiSelectAdd">添加照片至列表</button>
|
||
<button hidden="true" class="btn btn-default" size="mini" @click="multiSelectCover">重选照片并覆盖</button>
|
||
|
||
<button class="btn btn-primary" size="mini" @click="uploadThumbs">上传所选图片</button>
|
||
<button class="btn btn-success" size="mini" @click="saveThumbs">保存验车图片</button>
|
||
</view>
|
||
</uni-section>
|
||
|
||
<button class="btn btn-warning" @click="saveAll">保存并上传全部验车信息</button>
|
||
|
||
|
||
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
|
||
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
|
||
</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: {
|
||
//行驶证随车按钮切换
|
||
radioChangeDriving(e) {
|
||
// console.log(e.detail);
|
||
Hi._that.order_up.is_driving_lisence = e.detail.value;
|
||
},
|
||
|
||
//仅上传验车数据
|
||
updata() {
|
||
this.submit('data');
|
||
},
|
||
|
||
// 文件选择与上传
|
||
//行驶证
|
||
select1(e) {
|
||
//缓存文件
|
||
Hi._that.driving_lisence_files = e.tempFiles;
|
||
},
|
||
progress1(e) {
|
||
console.log('上传中...', e);
|
||
},
|
||
fail1(e) {
|
||
console.log('上传失败...', e);
|
||
},
|
||
success1(e) {
|
||
console.log('上传成功...', e);
|
||
var files = e.tempFiles;
|
||
var file = files[0];
|
||
var callback = 'driving_lisence';
|
||
Hi._that.order_up[callback] = file.url;
|
||
uni.setStorageSync(callback, file.url);
|
||
},
|
||
recovery1() {
|
||
//还原，恢复使用刚上传的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
var ls = uni.getStorageSync('driving_lisence');
|
||
if (ls) Hi._that.order_up.driving_lisence = ls;
|
||
},
|
||
reset1() {
|
||
//重置，使用最初的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
Hi._that.order_up.driving_lisence = '';
|
||
},
|
||
save1() {
|
||
var callback = 'driving_lisence';
|
||
if (!Hi._that.order_up[callback]) {
|
||
uni.showToast({
|
||
title: "未选择照片",
|
||
icon: "error"
|
||
});
|
||
return false;
|
||
}
|
||
//仅提交该项数据
|
||
this.submit(callback);
|
||
},
|
||
upload1() {
|
||
console.log('准备开始上传')
|
||
},
|
||
|
||
//车前
|
||
select2(e) {
|
||
console.log('选择文件：', e);
|
||
//缓存文件
|
||
Hi._that.thumb_f_files = e.tempFiles;
|
||
},
|
||
progress2(e) {
|
||
console.log('上传中...');
|
||
console.log(e);
|
||
},
|
||
fail2(e) {
|
||
console.log('上传失败...');
|
||
console.log(e);
|
||
},
|
||
success2(e) {
|
||
console.log('上传成功...');
|
||
console.log(e);
|
||
var files = e.tempFiles;
|
||
var file = files[0];
|
||
var callback = 'thumb_f';
|
||
Hi._that.order_up[callback] = file.url;
|
||
uni.setStorageSync(callback, file.url);
|
||
},
|
||
recovery2() {
|
||
//还原，恢复使用刚上传的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
var ls = uni.getStorageSync('thumb_f');
|
||
if (ls) Hi._that.order_up.thumb_f = ls;
|
||
},
|
||
reset2() {
|
||
//重置，使用最初的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
Hi._that.order_up.thumb_f = '';
|
||
},
|
||
save2() {
|
||
var callback = 'thumb_f';
|
||
if (!Hi._that.order_up[callback]) {
|
||
uni.showToast({
|
||
title: "未选择照片",
|
||
icon: "error"
|
||
});
|
||
return false;
|
||
}
|
||
//仅提交该项数据
|
||
this.submit(callback);
|
||
},
|
||
|
||
//车尾
|
||
select3(e) {
|
||
console.log('选择文件：', e);
|
||
//缓存文件
|
||
Hi._that.thumb_b_files = e.tempFiles;
|
||
},
|
||
progress3(e) {
|
||
console.log('上传中...');
|
||
console.log(e);
|
||
},
|
||
fail3(e) {
|
||
console.log('上传失败...');
|
||
console.log(e);
|
||
},
|
||
success3(e) {
|
||
console.log('上传成功...');
|
||
console.log(e);
|
||
var files = e.tempFiles;
|
||
var file = files[0];
|
||
var callback = 'thumb_b';
|
||
Hi._that.order_up[callback] = file.url;
|
||
uni.setStorageSync(callback, file.url);
|
||
},
|
||
recovery3() {
|
||
//还原，恢复使用刚上传的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
var ls = uni.getStorageSync('thumb_b');
|
||
if (ls) Hi._that.order_up.thumb_b = ls;
|
||
},
|
||
reset3() {
|
||
//重置，使用最初的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
Hi._that.order_up.thumb_b = '';
|
||
},
|
||
save3() {
|
||
var callback = 'thumb_b';
|
||
if (!Hi._that.order_up[callback]) {
|
||
uni.showToast({
|
||
title: "未选择照片",
|
||
icon: "error"
|
||
});
|
||
return false;
|
||
}
|
||
//仅提交该项数据
|
||
this.submit(callback);
|
||
},
|
||
|
||
//车左
|
||
select4(e) {
|
||
console.log('选择文件：', e);
|
||
//缓存文件
|
||
Hi._that.thumb_l_files = e.tempFiles;
|
||
},
|
||
progress4(e) {
|
||
console.log('上传中...');
|
||
console.log(e);
|
||
},
|
||
fail4(e) {
|
||
console.log('上传失败...');
|
||
console.log(e);
|
||
},
|
||
success4(e) {
|
||
console.log('上传成功...');
|
||
console.log(e);
|
||
var files = e.tempFiles;
|
||
var file = files[0];
|
||
var callback = 'thumb_l';
|
||
Hi._that.order_up[callback] = file.url;
|
||
uni.setStorageSync(callback, file.url);
|
||
},
|
||
|
||
recovery4() {
|
||
//还原，恢复使用刚上传的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
var ls = uni.getStorageSync('thumb_l');
|
||
if (ls) Hi._that.order_up.thumb_l = ls;
|
||
},
|
||
reset4() {
|
||
//重置，使用最初的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
Hi._that.order_up.thumb_l = '';
|
||
},
|
||
save4() {
|
||
var callback = 'thumb_l';
|
||
if (!Hi._that.order_up[callback]) {
|
||
uni.showToast({
|
||
title: "未选择照片",
|
||
icon: "error"
|
||
});
|
||
return false;
|
||
}
|
||
//仅提交该项数据
|
||
this.submit(callback);
|
||
},
|
||
|
||
//车右
|
||
select5(e) {
|
||
console.log('选择文件：', e);
|
||
//缓存文件
|
||
Hi._that.thumb_r_files = e.tempFiles;
|
||
},
|
||
progress5(e) {
|
||
console.log('上传中...');
|
||
console.log(e);
|
||
},
|
||
fail5(e) {
|
||
console.log('上传失败...');
|
||
console.log(e);
|
||
},
|
||
success5(e) {
|
||
console.log('上传成功...');
|
||
console.log(e);
|
||
var files = e.tempFiles;
|
||
var file = files[0];
|
||
var callback = 'thumb_r';
|
||
Hi._that.order_up[callback] = file.url;
|
||
uni.setStorageSync(callback, file.url);
|
||
},
|
||
recovery5() {
|
||
//还原，恢复使用刚上传的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
var ls = uni.getStorageSync('thumb_r');
|
||
if (ls) Hi._that.order_up.thumb_r = ls;
|
||
},
|
||
reset5() {
|
||
//重置，使用最初的图片
|
||
uni.showToast({
|
||
title: "操作成功",
|
||
icon: "success"
|
||
});
|
||
Hi._that.order_up.thumb_r = '';
|
||
},
|
||
save5() {
|
||
var callback = 'thumb_r';
|
||
if (!Hi._that.order_up[callback]) {
|
||
uni.showToast({
|
||
title: "未选择照片",
|
||
icon: "error"
|
||
});
|
||
return false;
|
||
}
|
||
//仅提交该项数据
|
||
this.submit(callback);
|
||
},
|
||
|
||
//多图同时上传，限定只在APP端使用;
|
||
multiSelect(e) {
|
||
//点上传组件的加号选择图片的方式;该方式下选择临时图片后并不会将预览结果添加到fileLists中;
|
||
console.log('选择文件：', e);
|
||
// 缓存文件
|
||
// Hi._that.fileLists.push.apply(Hi._that.fileLists,e.tempFiles);
|
||
// console.log(Hi._that.fileLists);
|
||
Hi._that.thumbs_files = e.tempFiles;
|
||
// console.log(Hi._that.thumbs_files);
|
||
},
|
||
multiProgress(e) {
|
||
// console.log('多选上传进度>>>');
|
||
// console.log(e);
|
||
},
|
||
multiSuccess(e) {
|
||
//上传成功后会合并到对应的fileLists数据中
|
||
console.log('多选上传成功');
|
||
console.log(e);
|
||
var files = e.tempFiles;
|
||
var callback = 'thumbs';
|
||
var list = [];
|
||
for (let i in files) {
|
||
var f = files[i];
|
||
var t = f.url;
|
||
list.push(t);
|
||
}
|
||
Hi._that.order_up[callback] = list;
|
||
uni.setStorageSync(callback, list);
|
||
},
|
||
multiFail(e) {
|
||
console.log('多选上传失败');
|
||
console.log(e);
|
||
},
|
||
uploadThumbs() {
|
||
const files = Hi._that.thumbs_files;
|
||
if (!files) {
|
||
uni.showToast({
|
||
title: "请先选择照片",
|
||
icon: "error"
|
||
});
|
||
return false;
|
||
}
|
||
this.$refs.thumbs.upload();
|
||
},
|
||
saveThumbs() {
|
||
var callback = 'thumbs';
|
||
// console.log(Hi._that.order_up.thumbs);
|
||
// console.log('上传成功返回结果的待保存文件列表');
|
||
// console.log(Hi._that.order_up[callback]);
|
||
|
||
//先检测文件列表fileLists----eg:上传成功后又有删除了部分图片的情况,不能使用前面的上传成功返回结果作为此处待保存的数据
|
||
// console.log('有增/删后的文件显现列表');
|
||
// console.log(Hi._that.fileLists);
|
||
var files = Hi._that.fileLists;
|
||
var list = [];
|
||
var f, t;
|
||
for (let i in files) {
|
||
f = files[i];
|
||
t = f.url;
|
||
list.push(t);
|
||
}
|
||
Hi._that.order_up[callback] = list;
|
||
this.submit('thumbs');
|
||
},
|
||
|
||
//以下两个功能在启用自动上传后不启用 Start
|
||
multiSelectCover() {
|
||
//覆盖方式
|
||
uni.chooseImage({
|
||
count: 99, //限制99张，但不是对所有客户端或浏览器都有效
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album'], //从相册选择
|
||
success: function(res) {
|
||
// console.log(JSON.stringify(res.tempFilePaths));
|
||
var files = res.tempFiles;
|
||
var fs = [];
|
||
for (var i in files) {
|
||
var file = files[i];
|
||
var _fs = {
|
||
url: file.path,
|
||
extname: 'jpg',
|
||
name: ''
|
||
}
|
||
fs.push(_fs);
|
||
}
|
||
Hi._that.fileLists = fs; //用于呈现
|
||
Hi._that.tmpfiles = files; //替换储存待传
|
||
}
|
||
});
|
||
},
|
||
multiSelectAdd() {
|
||
//追加方式
|
||
uni.chooseImage({
|
||
count: 99, //限制99张，但不是对所有客户端或浏览器都有效
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album'], //从相册选择
|
||
success: function(res) {
|
||
// console.log(JSON.stringify(res.tempFilePaths));
|
||
var files = res.tempFiles;
|
||
var fs = [];
|
||
for (var i in files) {
|
||
var file = files[i];
|
||
Hi._that.tmpfiles.push(file); //追加储存待传
|
||
var _fs = {
|
||
url: file.path,
|
||
extname: 'jpg',
|
||
name: ''
|
||
}
|
||
fs.push(_fs);
|
||
}
|
||
for (var j in Hi._that.fileLists) {
|
||
var _fs = Hi._that.fileLists[j];
|
||
fs.push(_fs);
|
||
}
|
||
Hi._that.fileLists = fs; //用于展示已选与已有
|
||
}
|
||
});
|
||
},
|
||
//以上两个功能在启用自动上传后不启用 End
|
||
|
||
saveAll() {
|
||
//多选上传的图片组数据为异步保存,要先做一次编排
|
||
var callback = 'thumbs';
|
||
var files = Hi._that.fileLists;
|
||
var list = [];
|
||
for (let i in files) {
|
||
var f = files[i];
|
||
var t = f.url;
|
||
list.push(t);
|
||
}
|
||
Hi._that.order_up[callback] = list;
|
||
|
||
this.submit('all');
|
||
},
|
||
|
||
//浮窗按钮相关操作
|
||
fabClick(e) {
|
||
console.log('点击了悬浮按钮')
|
||
},
|
||
trigger(e) {
|
||
var eindex = e.index;
|
||
var hasDraft = false;
|
||
var lsIndex = this.lsIndex + '-' + this.oid;
|
||
if (!e.item.diyfn) {
|
||
//全部保存
|
||
this.submit('all');
|
||
uni.setStorageSync(lsIndex, this.order_up);
|
||
} else {
|
||
uni.showToast({
|
||
title: '暂不支持',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
},
|
||
|
||
submit: function(op) {
|
||
var _that = this;
|
||
return ctms.order.yanche(this.oid, this.order_up, op).then(
|
||
function(res) {
|
||
if (!res) {
|
||
return uni.showToast({
|
||
title: "提交失败!",
|
||
icon: "fail"
|
||
});
|
||
}
|
||
|
||
if (op == 'driving_lisence') {
|
||
Hi._that.driving_lisence.url = Hi._that.driving_lisence_files[0].url;
|
||
}
|
||
if (op == 'thumb_f') {
|
||
Hi._that.thumb_f.url = Hi._that.thumb_f_files[0].url;
|
||
}
|
||
if (op == 'thumb_b') {
|
||
Hi._that.thumb_b.url = Hi._that.thumb_b_files[0].url;
|
||
}
|
||
if (op == 'thumb_l') {
|
||
Hi._that.thumb_l.url = Hi._that.thumb_l_files[0].url;
|
||
}
|
||
if (op == 'thumb_r') {
|
||
Hi._that.thumb_r.url = Hi._that.thumb_r_files[0].url;
|
||
}
|
||
|
||
return uni.showToast({
|
||
title: "保存成功!",
|
||
icon: "success"
|
||
});
|
||
}
|
||
);
|
||
},
|
||
|
||
getOderDetail: function(e) {
|
||
var _that = this;
|
||
ctms.order.checkDetail(this.oid).then((res) => {
|
||
if (res) {
|
||
var order = res;
|
||
_that.oid = order.id;
|
||
order = _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();
|
||
|
||
var res = ctms.order.detail(this.oid);
|
||
if (res) {
|
||
this.order = res;
|
||
this.formatOrder(res, false);
|
||
} else {
|
||
this.getOderDetail();
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
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> |