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

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>