fm453/ctms-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首次完整推送，

Browse Source 
V：1.20240808.006
This commit is contained in:
fm453
2024-08-13 18:32:37 +08:00
parent 15be3e9373
commit c62d15b288
939 changed files with 111777 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

467
pages/ctms/order/create/create.vue Normal file
View File

@ -0,0 +1,467 @@
<template>
<view class="content">
<uni-notice-bar show-icon scrollable text="平台上新季,全路线大力优惠,欢迎来询！！！。" />
<view class="order-form">
<!-- 自定义表单校验 -->
<uni-forms ref="customForm" :rules="formRules" :modelValue="FormData">
<uni-section title="您要发运的车辆信息" type="line">
<uni-forms-item label="品牌车型" name="car_title">
<uni-easyinput type="text" v-model="FormData.car_title" placeholder="填写品牌车型" />
</uni-forms-item>
<uni-forms-item label="车牌号" name="car_no">
<uni-easyinput type="text" v-model="FormData.car_no" placeholder="无车牌时可填写车架号后六位" />
</uni-forms-item>
<text class="uniui-h6 help-block">无车牌时可填写车架号(至少后六位)</text>
<uni-forms-item label="是否临牌" name="isTempCarno">
<uni-data-checkbox v-model="FormData.isTempCarno" :multiple="false" :localdata="isTempCarno" />
</uni-forms-item>
<uni-forms-item label="车辆保价(万元)" required name="car_value">
<uni-easyinput type="number" v-model="FormData.car_value" placeholder="单位：万元;默认20" />
</uni-forms-item>
</uni-section>
<uni-section title="从哪里出发 - 运到哪儿去" type="line">
<uni-forms-item label="出发省份" required name="start_province">
<uni-data-picker placeholder="请选择省份" popup-title="请选择出发省份" :localdata="provinces"
v-model="FormData.start_province">
</uni-data-picker>
</uni-forms-item>
<uni-forms-item label="始发城市" required name="start_city">
<uni-easyinput v-model="FormData.start_city" placeholder="请填写出发城市名称" />
</uni-forms-item>
<uni-forms-item label="目标省份" required name="aim_province">
<uni-data-picker placeholder="请选择省份" popup-title="请选择运达省份" :localdata="provinces"
v-model="FormData.aim_province">
</uni-data-picker>
</uni-forms-item>
<uni-forms-item label="目标城市" required name="aim_city">
<uni-easyinput v-model="FormData.aim_city" placeholder="请填写目标运达城市名称" />
</uni-forms-item>
<uni-forms-item label="计划日期" name="date">
<uni-datetime-picker type="date" return-type="timestamp" v-model="FormData.date" />
</uni-forms-item>
</uni-section>
<uni-section title="联系信息" type="line">
<uni-forms-item label="您的姓名" name="from_name">
<uni-easyinput v-model="FormData.from_name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="手机号" required name="from_mobile">
<uni-easyinput v-model="FormData.from_mobile" placeholder="请输入联系电话" />
</uni-forms-item>
</uni-section>
<uni-forms-item label="备注" name="remark">
<uni-easyinput type="textarea" v-model="FormData.remark" placeholder="对运单做一些备注，比如 从哪里提车的；根据实际情况" />
</uni-forms-item>
</uni-forms>
<view class="button-group">
<button type="primary" size="mini" @click="formCheck('customForm')">确认提交</button>
<button type="default" size="mini" @click="draft">我再想想</button>
</view>
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
</view>
<uni-notice-bar
text="温馨提示: 请不要随车放置 贵重小件物品(如 眼镜\无线充电器\数据线\U盘\手表\Zipporr火机等)、精密仪器设备(如 电脑等)、易燃易爆物品，车内不得放置违规违禁物品(如 燃料油\火机\酒精\散装酒等)，否则司机有权拒载、平台有权拒单。" />
<uni-notice-bar text="炎热天气，不要随车装运水果，一定会闷坏的。" />
<text class="uniui-h6 help-block"></text>
</view>
</template>
<script>
import province from '@/common/province.js';
import letter from '@/common/letter.js';
import carP from '@/common/car-p.js';
import config from "@/config/ctms.config.js";
import store from '@/store/index.js';
import utils from "@/utils/common.js";
import ctms from '@/apis/ctms/index.js';
export default {
data() {
return {
userinfo: {},
FormData: {
start_province: '', //默认 460000
start_city: '',
aim_province: '', //默认 230000
aim_city: '',
date: Date(+7).now, //计划发运日期
car_value: 20, //单位：万。默认含20万运输险
car_title: '',
carno: '', //车牌/架号
isTempCarno: 0,
username: '',
mobile: '',
remark: ''
},
lsIndex: 'OrderCreateDraft',
//悬浮按钮
horizontal: 'right',
vertical: 'bottom',
direction: 'vertical', //horizontal水平展开；vertical垂直展开
pattern: {
color: '#7A7E83',
backgroundColor: '#fff',
selectedColor: '#007AFF',
buttonColor: '#fd8008',
iconColor: '#fff'
},
content: [{
iconPath: '/static/fab/c5.png',
selectedIconPath: '/static/fab/c5.png',
text: '草稿-5',
active: false,
diyfn: '-5' //自定义添加的一个字段
},
{
iconPath: '/static/fab/c4.png',
selectedIconPath: '/static/fab/c4.png',
text: '草稿-4',
active: false,
diyfn: '-4' //自定义添加的一个字段
},
{
iconPath: '/static/fab/c3.png',
selectedIconPath: '/static/fab/c3.png',
text: '草稿-3',
active: false,
diyfn: '-3' //自定义添加的一个字段
},
{
iconPath: '/static/fab/c2.png',
selectedIconPath: '/static/fab/c2.png',
text: '草稿-2',
active: false,
diyfn: '-2' //自定义添加的一个字段
},
{
iconPath: '/static/fab/c1.png',
selectedIconPath: '/static/fab/c1.png',
text: '草稿-1',
active: false,
diyfn: '-1' //自定义添加的一个字段
},
{
iconPath: '/static/fab/draft.png',
selectedIconPath: '/static/fab/draft-active.png',
text: '保存草稿',
active: false,
diyfn: false
},
],
// 单选性别数据源
sexs: [{
text: '男',
value: 0
}, {
text: '女',
value: 1
}, {
text: '保密',
value: 2
}],
//默认省份数据
provinces: [{
value: '460000',
text: "海南省"
},
{
value: '340000',
text: "安徽"
}
],
//车辆省份标识
carPs: carP.list,
letters: letter.list,
//是否临牌
isTempCarno: [{
text: '否',
value: 0
}, {
text: '是',
value: 1
}],
// 自定义表单校验规则
formRules: {
start_province: {
rules: [{
required: true,
errorMessage: '出发省份不能为空'
}]
},
aim_province: {
rules: [{
required: true,
errorMessage: '运达省份不能为空'
}]
},
start_city: {
rules: [{
required: true,
errorMessage: '出发城市不能为空'
}]
},
aim_city: {
rules: [{
required: true,
errorMessage: '运达城市不能为空'
}]
},
},
}
},
onLoad(o) {
// console.log(province.listByTitle['海南省']); //显示海南代码
var user = ctms.user.getInfo();
this.FormData.phone = user.mobile;
},
onReady() {
// 设置自定义表单校验规则，必须在节点渲染完毕后执行
this.$refs.customForm.setRules(this.formRules)
},
onShow: function() {
var lsIndex = this.lsIndex;
var res = uni.getStorageSync(lsIndex);
if (res) {
this.FormData = res;
}
this.provinces = province.listDatacom;
this.userinfo = getApp().globalData;
utils.debug(this.userinfo);
},
onHide() {
this.draft(); //界面隐藏时自动保存草稿
},
methods: {
//表单校验
formCheck(ref) {
this.$refs[ref].validate().then(res => {
utils.debug(res);
this.formSubmit();
}).catch(err => {
utils.debug(err);
uni.showToast({
icon: 'error',
title: err['0'].errorMessage
})
})
},
formSubmit: function(e) {
uni.showLoading({
title: '网络请求中'
})
var FormData,
_that = this;
if (e) {
//直接使用表单内建的提交机制
// uitls.debug('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
FormData = e.detail.value;
} else {
FormData = this.FormData;
}
ctms.order.book(FormData).then(
function(res) {
if (res) {
var oid = res.data.id;
uni.showModal({
title: '提交成功',
content: '是否前往查看详情',
success: function(res) {
//清空本次缓存，避免用户重复提交
uni.removeStorageSync(_that.lsIndex);
if (res.confirm) {
uni.navigateTo({
url: '../detail/detail?oid=' + oid
});
} else if (res.cancel) {
//将缓存存入历史草稿模板
uni.setStorageSync(_that.lsIndex + '-0',
FormData);
//重新载入页面
uni.redirectTo({
url: 'create'
});
}
}
})
} else {
uni.showToast({
title: "操作失败",
icon: "error"
});
}
}
);
uni.hideLoading();
},
//存储与取用草稿
/*TD：草稿逻辑
当前页面正在录入的内容，视为默认草稿数据，即时更新、主动保存；
索引-1~5：追加应用模板草稿或设置当前草稿为对应模板；后期考虑加入固定模板
*/
draft(e) {
//e是索引后缀
var lsIndex = this.lsIndex;
if (e) {
lsIndex = lsIndex + e;
}
uni.setStorageSync(lsIndex, this.FormData);
uni.showToast({
title: '草稿已保存'
})
},
useDraft(e) {
var _that = this;
//e为缓存索引
uni.showModal({
title: '覆盖提醒',
content: '即将应用该草稿中的临时数据',
success: function(res) {
if (res.confirm) {
var lsIndex = _that.lsIndex + e;
_that.FormData = uni.getStorageSync(lsIndex);
} else if (res.cancel) {
}
}
})
},
//浮窗按钮相关操作
fabClick(e) {
utils.debug('点击了悬浮按钮')
},
trigger(e) {
//检查是否存在模板，有则提示应用，无则创建保存
var eindex = e.index;
// this.content[e.index].active = !e.item.active;
var hasDraft = false;
var lsIndex = this.lsIndex;
if (!e.item.diyfn) {
//未设置这个difyfn字段的，是“保存草稿”按钮
return this.draft();
}
lsIndex = lsIndex + e.item.diyfn;
var res = uni.getStorageSync(lsIndex);
// console.log(e.item.diyfn);
// console.log('error',lsIndex);
// console.log(res);
var _that = this;
if (!res) {
//该按钮对应的缓存不存在，追加模板
return uni.showModal({
title: '提示',
content: `${e.item.text}对应的草稿不存在，创建吗？`,
success: function(res) {
if (res.confirm) {
_that.content[e.index].active = true;
return _that.draft(e.item.diyfn);
} else if (res.cancel) {
uni.showToast({
icon: 'error',
title: '操作已取消'
});
return false;
}
}
});
} else {
}
//缓存存在
return this.useDraft(e.item.diyfn);
}
}
}
</script>
<style>
.container {
/* #ifndef APP-NVUE */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* #endif */
}
.order-form {
padding: 15px;
background-color: #fff;
}
.segmented-control {
margin-bottom: 15px;
}
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}
.form-item {
display: flex;
align-items: center;
}
.button {
display: flex;
align-items: center;
height: 35px;
margin-left: 10px;
}
/*级联选择器*/
.data-pickerview {
height: 400px;
border: 1px #e5e5e5 solid;
}
.popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
/*自定义样式*/
.help-block {
display: block;
width: 100%;
color: #666666;
font-size: 0.8rem;
line-height: 1rem;
text-align: justify;
text-align-last: justify;
}
.uni-section {
margin-top: 0;
}
</style>

409
pages/ctms/order/detail/check.vue Normal file
View 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>

50
pages/ctms/order/detail/detail.css Normal file
View File

@ -0,0 +1,50 @@
.container {
overflow: hidden;
}
.custom-cover {
flex: 1;
flex-direction: row;
position: relative;
}
.cover-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: rgba($color: #000000, $alpha: 0.4);
display: flex;
flex-direction: row;
align-items: center;
padding-left: 15px;
font-size: 14px;
color: #fff;
}
.card-actions {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 45px;
border-top: 1px #eee solid;
}
.card-actions-item {
display: flex;
flex-direction: row;
align-items: center;
}
.card-actions-item-text {
font-size: 12px;
color: #666;
margin-left: 5px;
}
.cover-image {
flex: 1;
height: 150px;
}
.no-border {
border-width: 0;
}

163
pages/ctms/order/detail/detail.vue Normal file
View File

@ -0,0 +1,163 @@
<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="联系信息" type="line">
<uni-card :is-shadow="false">
<view class="uni-body">
<view @click="callTo(order.sender_mobiles)"> <uni-icons type="phone" size="20" color="#0095F6" />
发车人：{{order.sender_name}} <em> {{order.sender_mobiles}} </em></view>
<view @click="callTo(order.receiver_mobiles)"> <uni-icons type="phone" size="20"
color="#0095F6" />接车人：{{order.receiver_name}}<em>{{order.receiver_mobiles}}</em></view>
<view>送车地址：{{order.aim_address}}</view>
</view>
</uni-card>
</uni-section>
<uni-section title="费用信息" type="line">
<uni-card :is-shadow="false">
<view class="uni-body">
<view>总运费：{{order.fee_total}} 元</view>
<view>现付：<text class="error">{{order.pay_send}} </text>元</view>
<view>到付：<text class="error">{{order.pay_receive}} </text>元</view>
</view>
</uni-card>
</uni-section>
<uni-section title="链接" subTitle="使用系统浏览器打开" type="line">
<view class="uni-form-item ">
<view class="title">
<uni-link :href="h5_url+'?oid='+oid" :text="h5_url"></uni-link>
</view>
</view>
</uni-section>
<uni-section title="操作提示" type="line">
<uni-card :is-shadow="false">
<view class="uni-body">
<view>订单详情页首次打开时需要联网搜索运单信息；</view>
<view>打开过一次的运单信息将会缓存在APP内一段时间，在这期间即使手机没有网络也能查看</view>
<view>如果需要查看该运单的最新信息，可通过下拉本页面进行刷新（手机需要联网）</view>
</view>
</uni-card>
<view class="uni-form-item ">
<view class="title">
<button class="btn btn-warning" @click="actCheck()">查看验车记录</button>
</view>
</view>
</uni-section>
</view>
</template>
<script>
import config from "@/config/ctms.config.js";
import ctms from '@/apis/ctms/index.js';
export default {
data() {
return {
userinfo: {},
oid: 0,
order: {
id: 1,
car_id: 1,
car_number: '车牌号',
car_title: '车型号',
start_city: "起运城市",
from_province: '起运省份',
aim_city: "目的城市",
to_province: '目标省份',
signdate: '下单日期',
car_extra: '随车物品',
checker: '验车人',
receiver_name: '收车人姓名',
receiver_mobiles: '收车人电话',
sender_name: '发车人姓名',
sender_mobiles: '发车人电话',
},
h5_url: '',
}
},
methods: {
getOderDetail: function(e) {
var _that = this;
ctms.order.checkDetail(this.oid).then((res) => {
if (res) {
_that.order = res;
uni.showToast({
title: "查询完成!",
icon: "success"
});
uni.stopPullDownRefresh();
}
});
},
actCheck() {
uni.navigateTo({
url: './check?oid=' + this.oid
})
},
callTo(tel) {
uni.makePhoneCall({
phoneNumber: tel
})
}
},
onLoad(o) {
this.oid = o.oid;
this.h5_url = config.h5_view;
this.userinfo = ctms.user.getInfo();
},
onShow: function() {
var res = ctms.order.detail(this.oid);
if (res) {
this.order = res;
} else {
this.getOderDetail();
}
},
onPullDownRefresh() {
this.getOderDetail();
uni.stopPullDownRefresh();
},
//标题栏按钮响应,仅在APP-PLUS下支持
onNavigationBarButtonTap(e) {
//#ifdef APP-PLUS
uni.shareWithSystem({
summary: '运单【 ' + this.order.sn + ' 】摘要：' + this.order.signdate + '，由' + this.order
.from_province + this.order.start_city + '-->发往-->' + this.order.to_province + this.order
.aim_city + "的车辆：" + this.order.car_title + "--" + this.order.car_number + "。点击链接可查阅更多信息",
href: this.h5_url + "?oid=" + this.oid,
success() {
// 分享完成，请注意此时不一定是成功分享
},
fail() {
// 分享失败
}
})
//#endif
//#ifdef H5
var summary = '运单【 ' + this.order.sn + ' 】摘要：' + this.order.signdate + '，由' + this.order
.from_province + this.order.start_city + '-->发往-->' + this.order.to_province + this.order
.aim_city + "的车辆：" + this.order.car_title + "--" + this.order.car_number + "。点击链接可查阅更多信息:" + this
.h5_url + "?oid=" + this.oid;
uni.setClipboardData({
data: summary
})
//#endif
}
}
</script>
<style>
@import url("detail.css");
</style>

207
pages/ctms/order/index/index.vue Normal file
View File

@ -0,0 +1,207 @@
<template>
<view class="content">
<view class="uni-common-mt uni-form">
<form @submit="formSubmit" @reset="formReset">
<view class="uni-form-item ">
<view class="title">车牌号:</view>
<input class="uni-input" name="carno" v-model="search.carno"
:placeholder="'车牌号或车架号,如 '+demoCarno" />
</view>
<view class="uni-form-item ">
<view class="title">手机号:</view>
<input class="uni-input" name="phone" readonly="readonly" disabled="disabled" :value="search.phone"
type="text" placeholder="发车人或收车人的手机号" />
</view>
<view class="uni-form-item" v-if="false">
<view class="title">运单号:</view>
<input class="uni-input" name="ordersn" v-model="search.ordersn" type="text"
placeholder="完整的运单号码" />
</view>
<view class="uni-form-item">
<view class="help-block">
如果搜索不出结果，可尝试检查一下搜索条件是否正确无误。
</view>
</view>
<uni-notice-bar text="手机号为自动获取您登陆时使用的手机号，如果需要更换查询用的手机号，请退出账号并使用新手机号登陆."></uni-notice-bar>
<view class="uni-btn-v">
<button class="btn btn-success" form-type="submit">查询</button>
<button class="btn btn-error" type="default" form-type="reset">重置</button>
</view>
</form>
</view>
</view>
</template>
<script>
import config from "@/config/ctms.config.js";
import store from '@/store/index.js';
import utils from "@/utils/common.js";
import ctms from '@/apis/ctms/index.js';
export default {
data() {
return {
search: {
carno: '',
phone: '',
ordersn: ''
},
demoCarno: config.demoCarno,
lsIndex: 'OrderSearchTabbar'
}
},
computed: {
},
methods: {
checkLogin() {
return ctms.user.checkLogin()
},
formSubmit: function(e) {
var _that = this;
// utils.debug('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
//进行表单检查
var formData = e.detail.value;
ctms.order.search(formData, 0, 5).then(
function(res) {
if (res.code == 200) {
uni.showToast({
title: "查询完成!",
icon: "success"
});
_that.goTo('order/list/list');
} else {
uni.showToast({
title: "没有查询到相关订单!",
icon: "fail"
});
}
}
);
},
formReset: function(e) {
// utils.debug('清空数据')
},
goTo(page) {
page = config.pageDir + page;
uni.navigateTo({
url: page
});
}
},
onLoad() {
var user = ctms.user.checkLogin();
var user = store.state.userCloud;
this.search.phone = user.mobile;
},
onShow: function() {}
}
</script>
<style>
body {
background-color: #e6e6e60e;
}
radio,
checkbox,
switch {
transform: scale(1.5);
margin-left: 1rem;
margin-right: 1rem;
margin-top: 36rpx;
}
input {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 66rpx;
border-bottom: 1upx #333 dashed;
}
.uni-input {
padding: 0;
}
.content {
padding-bottom: 50rpx;
}
.header {
text-align: center;
}
.header>image {
width: 300rpx;
height: 300rpx;
}
.uni-form {
width: 94%;
margin: 0rpx 3% 0 3%;
}
.uni-form-item {
width: 100%;
display: inline-flex;
height: 96rpx;
line-height: 96rpx;
}
.uni-form-item .title,
.uni-form-item .data {}
/**不生效**/
.uni-form-item .title {
width: 150rpx;
padding: 40rpx 20rpx;
text-align: justify;
text-align-last: justify;
}
.uni-form .uni-btn-v {
margin-top: 50rpx;
}
.radio {
width: auto;
}
.btn {
margin: 40rpx 30rpx;
}
.btn-success {
background-color: #09BB07;
color: #fff;
}
.btn-error {
background-color: #fc0107;
color: #fff;
}
.footer {
display: block;
/* width: 100%; */
font-size: 1rem;
height: 1rem;
line-height: 1.5rem;
margin: 1.5rem;
}
.help-block {
display: block;
width: 100%;
color: #666666;
font-size: 0.8rem;
line-height: 1rem;
margin: 1.5rem;
}
</style>

54
pages/ctms/order/list/list.css Normal file
View File

@ -0,0 +1,54 @@
.container {
overflow: hidden;
}
.custom-cover {
flex: 1;
flex-direction: row;
position: relative;
}
.cover-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: rgba($color: #000000, $alpha: 0.4);
display: flex;
flex-direction: row;
align-items: center;
padding-left: 15px;
font-size: 14px;
color: #fff;
}
.card-actions {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 45px;
border-top: 1px #eee solid;
}
.card-actions-item {
display: flex;
flex-direction: row;
align-items: center;
}
.card-actions-item-text {
font-size: 12px;
color: #666;
margin-left: 5px;
}
.cover-image {
flex: 1;
height: 150px;
}
.no-border {
border-width: 0;
}
.pagination{
margin:20px 20px;
}

232
pages/ctms/order/list/list.vue Normal file
View File

@ -0,0 +1,232 @@
<template>
<view class="container">
<uni-card v-if="!totalCount" title="查询结果" sub-title="" extra="" padding="10px 0">
<view class="uni-body uni-mt-5">
<view>
<text>没有查询到相关运单</text>
</view>
</view>
</uni-card>
<uni-section v-else :title="'运单'+order.id" type="line" v-for="order in orders" :data-oid="order.id"
:data-carid="order.car_id">
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0" :thumbnail="avatar">
<template v-slot:title>
<uni-list>
<uni-list-item :show-switch="false" :title="order.car_title + ' ' + order.car_number" />
</uni-list>
</template>
<view class="uni-body uni-mt-5">
<view>
<text>日期：{{order.signdate}}</text>
</view>
<view>
<text>起运地：{{order.start_city}} => 目的地：{{order.aim_city}}</text>
</view>
<view>
<text>验车人：{{order.checker}}</text>
</view>
</view>
<view slot="actions" class="card-actions">
<view v-if="order.is_checked" class="card-actions-item" @click="showCheck(order.id)">
<uni-icons type="images" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">验车情况</text>
</view>
<view class="card-actions-item" @click="actionsCheck(order.id)">
<uni-icons type="cloud-upload" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">上传验车</text>
</view>
<view class="card-actions-item" @click="actionsDetail(order.id)">
<uni-icons type="link" size="18" color="#999"></uni-icons>
<text class="card-actions-item-text">详情</text>
</view>
</view>
</uni-card>
</uni-section>
<view class="pagination">
<uni-pagination :show-icon="false" :total="totalCount" :pageSize='psize' v-model='page' title="分页栏"
@change="newPage" />
</view>
<uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
:vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />
</view>
</template>
<script>
import utils from "@/utils/common.js";
import config from "@/config/ctms.config.js";
import ctms from '@/apis/ctms/index.js';
export default {
data() {
return {
userinfo: {},
orders: {},
employees: {},
stores: {},
totalCount: 0, //一共多少条数据
psize: 10,
page: 1,
avatar: '@/static/logo.png',
//悬浮按钮
fabs: {
horizontal: 'left',
vertical: 'bottom',
direction: 'horizontal', //horizontal水平展开；vertical垂直展开
pattern: {
color: '#7A7E83',
backgroundColor: '#fff',
selectedColor: '#007AFF',
buttonColor: '#fff',
iconColor: '#aaa'
},
content: [{
iconPath: '/static/fab/home.png',
selectedIconPath: '/static/fab/homeactive.png',
text: '首页',
active: false,
diyfn: 'home'
},
{
iconPath: '/static/fab/guanzhu.png',
selectedIconPath: '/static/fab/guanzhuactive.png',
text: '关注',
active: false,
diyfn: 'news'
},
{
iconPath: '/static/fab/me.png',
selectedIconPath: '/static/fab/meactive.png',
text: '用户',
active: false,
diyfn: 'user'
},
{
iconPath: '/static/fab/news.png',
selectedIconPath: '/static/fab/newsactive.png',
text: '公告',
active: false,
diyfn: 'notice'
}
]
}
}
},
methods: {
showCheck(e) {
uni.navigateTo({
url: '../detail/check?oid=' + e
})
},
actionsDetail(e) {
uni.navigateTo({
url: '../detail/detail?oid=' + e
})
},
actionsCheck(e) {
uni.navigateTo({
url: '../yanche/yanche?oid=' + e
})
},
//分页器动作
newPage(e) {
var page = e.current;
this.page = page;
var res = ctms.order.list(this.page);
if (res) {
this.orders = res.orders;
} else {
this.checkOrder();
}
},
//刷新列表
checkOrder() {
var _that = this;
ctms.order.search(null, this.page, this.psize).then(
function(res) {
if (res) {
_that.orders = res.orders;
_that.totalCount = res.total;
uni.showToast({
title: "查询完成!",
icon: "success"
});
} else {
_that.orders = {}
_that.totalCount = 0;
}
}
);
},
//浮窗按钮相关操作
fabClick(e) {
// utils.debug('点击了悬浮按钮')
},
fabTrigger(e) {
var eindex = e.index;
this.fabs.content[e.index].active = !e.item.active;
if (!e.item.diyfn) {
//未设置这个difyfn字段的，无操作
return false;
}
var diyfn = e.item.diyfn,
dir = config.pageDir,
page;
switch (diyfn) {
case 'home':
page = 'tabbar/index/index';
return uni.reLaunch({
url: dir + page
})
break;
case 'news':
page = 'news/list/list';
break;
case 'user':
page = 'me/index';
break;
case 'notice':
page = 'tabbar/notice/index';
return uni.reLaunch({
url: dir + page
})
break;
}
return uni.navigateTo({
url: dir + page
})
}
},
onLoad() {
// utils.debug('运单列表页启动')
},
onShow() {
var res = ctms.order.list(this.page);
if (res) {
this.orders = res.orders;
this.totalCount = res.total;
}
},
onPullDownRefresh() {
this.page = 1;
this.checkOrder();
setTimeout(() => {
uni.stopPullDownRefresh();
}, 3000);
}
}
</script>
<style>
@import url("list.css");
@import url("../../statusBar.css");
</style>

938
pages/ctms/order/yanche/yanche.vue Normal file
View File

@ -0,0 +1,938 @@
<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>