Initial commit,修正
This commit is contained in:
Executable
+13
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:28:13
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:33
|
||||
*/
|
||||
|
||||
p{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.mui-bar-popover {
|
||||
width: 30%;
|
||||
}
|
||||
Executable
+119
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/icons-extra.css">
|
||||
<!--App自定义的css-->
|
||||
<!-- <link rel="stylesheet" type="text/css" href="../../mui/css/app.css"> -->
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="detail.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="app">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<nav class="mui-bar mui-bar-tab ">
|
||||
<a class="mui-tab-item" href="#Popover_0"><i class="mui-icon mui-icon-list"></i> 发车方</a>
|
||||
<a class="mui-tab-item" href="#Popover_1"><i class="mui-icon mui-icon-list"></i> 接车方</a>
|
||||
<a class="mui-tab-item" href="#Popover_2"><i class="mui-icon mui-icon-list"></i> 其他</a>
|
||||
</nav>
|
||||
<div class="mui-content">
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
[{{oid}}]<h4>{{order.car_number}}</h4>
|
||||
<h5 class="mui-pullright">{{order.car_title}}</h5>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 运单号:{{order.sn}}</p>
|
||||
<p> 日期:{{order.signdate}}</p>
|
||||
<p>起运地:{{order.from_province}}-{{order.start_city}} => 目的地:{{order.to_province}}-{{order.aim_city}}</p>
|
||||
<p> 随车物品:{{order.car_extra}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">联系信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 发车人:{{order.sender_name}} <em> {{order.sender_mobiles}} </em></p>
|
||||
<p> 接车人:{{order.receiver_name}}<em>{{order.receiver_mobiles}}</em></p>
|
||||
<p>送车地址:{{order.aim_address}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">费用信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 总运费:{{order.fee_total}} 元</p>
|
||||
<p> 现付:<span class="red">{{order.pay_send}} </span>元</p>
|
||||
<p> 到付:<span class="red">{{order.pay_receive}}</span> 元</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="mui-card">
|
||||
<div class="mui-card-header mui-card-media">
|
||||
<div class="mui-card-media-body">
|
||||
<p class="mui-ellipsis">验车照片</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mui-card-content mui-card-media" style="height:40vw;background-image:url('')">
|
||||
<img :src="order.thumb_b">
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">关联信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 经办人:{{order.employee_title}} </p>
|
||||
<p> 验车人:{{order.checker}} </p>
|
||||
<p> 委托人:{{order.wtdw}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mui-content-padded mui-hidden" id="PrintError"></div>
|
||||
|
||||
<div id="Popover_0" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.sender_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Popover_1" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.receiver_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Popover_2" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'remark.html?oid=' + order.id ">详情备注</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="detail.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+118
@@ -0,0 +1,118 @@
|
||||
/**
|
||||
* @Author: 嗨噜客科技(www.hiluker.cn) <fm453>
|
||||
* @Date: 2021-09-30T01:47:50+08:00
|
||||
* @Email: fm453@hiluker.com
|
||||
* @Last modified by: fm453
|
||||
* @Last modified time: 2021-09-30T01:50:53+08:00
|
||||
*/
|
||||
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#app', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'轿运物流信息系统',
|
||||
menus: menus
|
||||
},
|
||||
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:'发车人电话',
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
//
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
console.log(o)
|
||||
this.oid = getUriQueryVariable('oid');
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
console.log(o)
|
||||
},
|
||||
});
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init({
|
||||
swipeBack:true, //启用右滑关闭功能
|
||||
});
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//取运单信息
|
||||
function getOrderDetail(){
|
||||
var url = apis.domain+apis.OrderDetail;
|
||||
var data = {
|
||||
pid: apis.pid,
|
||||
oid: vm.oid
|
||||
};
|
||||
mui.ajax(url,{
|
||||
data:data,
|
||||
dataType:'json',//服务器返回json格式数据
|
||||
type:'post',//HTTP请求类型
|
||||
timeout:10000,//超时时间设置为10秒;
|
||||
// crossDomain:true, //跨域
|
||||
// headers:{'Content-Type':'application/json'},
|
||||
success:function(res){
|
||||
switch(res.code){
|
||||
case 200 :
|
||||
//将查询结果缓存在本地
|
||||
localStorage.setItem('orderDetail-'+vm.oid,JSON.stringify(res.data));
|
||||
//显示数据
|
||||
vm.order = res.data;
|
||||
document.getElementById('pagename').innerText = res.data.car_title + '-' + res.data.car_number;
|
||||
document.title = res.data.car_title + '-' + res.data.car_number + '|' + res.data.start_city +'发到'+ res.data.aim_city;
|
||||
break;
|
||||
|
||||
case 400:
|
||||
default:
|
||||
// document.getElementById('pagename').innerText = '未查询到结果!';
|
||||
break;
|
||||
}
|
||||
},
|
||||
error:function(xhr,type,errorThrown){
|
||||
console.log(type);
|
||||
document.getElementById('pagename').innerText = '查询失败!';
|
||||
document.getElementById('PrintError').innerText = '您好,信息查询失败。如果可以,请您将此页截屏发送给我们(微信: sanyabaike ),以帮助我们找到问题并改进,感谢您的支持!' + errorThrown ;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden","");
|
||||
document.getElementById("PrintError").setAttribute("class",newClass);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderDetail();
|
||||
});
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:26:35
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-28 22:28:07
|
||||
*/
|
||||
Executable
+93
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/icons-extra.css">
|
||||
<!--App自定义的css-->
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/app.css">
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
|
||||
<!--侧滑菜单部分-->
|
||||
<aside id="offCanvasSide" class="mui-off-canvas-left mui-slide-in">
|
||||
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="title">{{ctms}}</div>
|
||||
<div class="content">
|
||||
本系统由{{Company.name}}开发推出,为您提供轿运物流订单信息管理等实用功能。
|
||||
<span class="android-only">-Android Phone-
|
||||
</span>
|
||||
<p style="margin: 10px 15px;">
|
||||
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭边栏</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title" style="margin-bottom: 25px;">功能列表</div>
|
||||
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
|
||||
<li class="mui-table-view-cell" v-for="menu in Page.menus">
|
||||
<a class="mui-navigate-right" :href="'../' + menu.link">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title"></div>
|
||||
<div class="content">
|
||||
Powered by {{Company.title}} {{version}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!--主界面部分-->
|
||||
<div class="mui-inner-wrap">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="mui-content-padded" style="text-align: center;">
|
||||
<h1>开发完善中</h1>
|
||||
</div>
|
||||
<div class="mui-content">
|
||||
<img src="../../static/in-dev.jpg" width="100%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="mui-bar mui-bar-tab">
|
||||
<a class="mui-tab-item" href="../../index.html">
|
||||
⇤ 首页
|
||||
</a>
|
||||
<span class="mui-tab-item mui-active" href="#" id="offCanvasShow" >
|
||||
<span class="mui-icon mui-icon-bars">
|
||||
</span>
|
||||
<span class="mui-tab-label">功能</span>
|
||||
</span>
|
||||
<span class="mui-tab-item" href="#" id="alertBtnHelp">
|
||||
<span class="mui-icon mui-icon-extra mui-icon-extra-lamp">
|
||||
</span>
|
||||
<span class="mui-tab-label">帮助</span>
|
||||
</span>
|
||||
|
||||
</nav>
|
||||
<!-- off-canvas backdrop -->
|
||||
<div class="mui-off-canvas-backdrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="index.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+167
@@ -0,0 +1,167 @@
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#offCanvasWrapper', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'客户资料',
|
||||
menus: menus
|
||||
},
|
||||
search:{
|
||||
carno:'',
|
||||
phone:'',
|
||||
city:''
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
TestFunc(){
|
||||
console.log('测试下添加个自定义函数方法')
|
||||
}
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
// console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
// console.log(o)
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
console.log(o)
|
||||
}
|
||||
});
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init();
|
||||
//侧滑容器父节点
|
||||
var offCanvasWrapper = mui('#offCanvasWrapper');
|
||||
//主界面容器
|
||||
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
||||
//菜单容器
|
||||
var offCanvasSide = document.getElementById("offCanvasSide");
|
||||
if (!mui.os.android) {
|
||||
var spans = document.querySelectorAll('.android-only');
|
||||
for (var i = 0, len = spans.length; i < len; i++) {
|
||||
spans[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
//移动效果是否为整体移动
|
||||
var moveTogether = false;
|
||||
|
||||
//主界面‘显示侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasShow').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('show');
|
||||
});
|
||||
//菜单界面,‘关闭侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasHide').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
//主界面和侧滑菜单界面均支持区域滚动;
|
||||
mui('#offCanvasSideScroll').scroll();
|
||||
mui('#offCanvasContentScroll').scroll();
|
||||
//实现ios平台原生侧滑关闭页面;
|
||||
if (mui.os.plus && mui.os.ios) {
|
||||
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件,故该demo直接屏蔽popGesture功能
|
||||
plus.webview.currentWebview().setStyle({
|
||||
'popGesture': 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("alertBtnHelp").addEventListener('tap', function() {
|
||||
mui.toast('感谢使用,请查看页面中的使用说明');
|
||||
});
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function checkOrder(formid){
|
||||
var form = document.getElementById(formid);
|
||||
var url = apis.domain+apis.JiaocheSearch;
|
||||
var data = vm.search;
|
||||
mui.post(url,{search:data,pid:apis.pid},function(res){
|
||||
console.log(res);
|
||||
if(res){
|
||||
switch(res.code){
|
||||
case 200 :
|
||||
//将查询结果缓存在本地
|
||||
var orders = res.data.data.orders;
|
||||
var o = JSON.stringify(orders);
|
||||
console.log(o);
|
||||
localStorage.setItem('JiaocheList',o);
|
||||
|
||||
//跳转到列表页
|
||||
mui.openWindow({
|
||||
url:'list.html',
|
||||
id:'JiaocheList',
|
||||
styles:{
|
||||
top:44, //新页面顶部位置
|
||||
bottom:0, //新页面底部位置
|
||||
width:'100%', //新页面宽度,默认为100%
|
||||
height:'100%' //新页面高度,默认为100%
|
||||
},
|
||||
extras:{
|
||||
orders:res.data.data.orders ,//自定义扩展参数,可以用来处理页面间传值
|
||||
},
|
||||
createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
|
||||
show:{
|
||||
autoShow:true,//页面loaded事件发生后自动显示,默认为true
|
||||
aniShow:'slide-in-right',//页面显示动画,默认为”slide-in-right“;
|
||||
duration:200//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
|
||||
},
|
||||
waiting:{
|
||||
autoShow:true,//自动显示等待框,默认为true
|
||||
title:'正在加载...',//等待对话框上显示的提示内容
|
||||
options:{
|
||||
width:'100%',//等待框背景区域宽度,默认根据内容自动计算合适宽度
|
||||
height:'100%',//等待框背景区域高度,默认根据内容自动计算合适高度
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 400:
|
||||
default:
|
||||
document.getElementById('pagename').innerText = '未查询到结果!';
|
||||
break;
|
||||
}
|
||||
}else{
|
||||
document.getElementById('pagename').innerText = '查询失败!';
|
||||
document.getElementById('PrintError').innerText = '您好,系统查询失败。如果可以,请您将此页截屏发送给我们(微信: sanyabaike ),以帮助我们找到问题并改进,感谢您的支持!' + res ;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden","");
|
||||
document.getElementById("PrintError").setAttribute("class",newClass);
|
||||
}
|
||||
},'json');
|
||||
return false;
|
||||
}
|
||||
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
// titleNView: { // 窗口的标题栏控件
|
||||
// titleText:"", // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题
|
||||
// titleColor:"#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
|
||||
// titleSize:"17px", // 字体大小,默认17px
|
||||
// backgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
|
||||
// progress:{ // 标题栏控件的进度条样式
|
||||
// color:"#00FF00", // 进度条颜色,默认值为"#00FF00"
|
||||
// height:"2px" // 进度条高度,默认值为"2px"
|
||||
// },
|
||||
// splitLine:{ // 标题栏控件的底部分割线,类似borderBottom
|
||||
// color:"#CCCCCC", // 分割线颜色,默认值为"#CCCCCC"
|
||||
// height:"1px" // 分割线高度,默认值为"2px"
|
||||
// }
|
||||
// }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mui('body').on("tap",'a',function(e){
|
||||
var url = e.target.href;
|
||||
var title = e.target.innerHTML;
|
||||
openUrl(url,title);
|
||||
});
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:26:39
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:07
|
||||
*/
|
||||
Executable
+85
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<!--App自定义的css-->
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/app.css">
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="list.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
|
||||
<!--侧滑菜单部分-->
|
||||
<aside id="offCanvasSide" class="mui-off-canvas-left mui-slide-in">
|
||||
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="title">{{ctms}}</div>
|
||||
<div class="content">
|
||||
本系统由{{Company.name}}开发推出,为您提供轿运物流订单信息管理等实用功能。
|
||||
<span class="android-only">-Android Phone-
|
||||
</span>
|
||||
<p style="margin: 10px 15px;">
|
||||
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭边栏</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title" style="margin-bottom: 25px;">功能列表</div>
|
||||
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
|
||||
<li class="mui-table-view-cell" v-for="menu in Page.menus">
|
||||
<a class="mui-navigate-right" :href="'../' + menu.link">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title"></div>
|
||||
<div class="content">
|
||||
Powered by {{Company.title}} {{version}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!--主界面部分-->
|
||||
<div class="mui-inner-wrap">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="mui-card" v-for="order in orders" :data-oid="order.id" :data-carid="order.car_id">
|
||||
<div class="mui-card-header ">
|
||||
<h3>{{order.car_number}}</h3>
|
||||
<h4 class="mui-pullright">{{order.car_title}}</h4>
|
||||
</div>
|
||||
<div class="mui-card-content" >
|
||||
<p> 日期:{{order.signdate}}</p>
|
||||
<p>起运地:{{order.start_city}} => 目的地:{{order.aim_city}}</p>
|
||||
</div>
|
||||
<div class="mui-card-footer">
|
||||
<a class="mui-card-link" :href="'detail.html?oid=' + order.id +''">在途跟踪</a>
|
||||
<a class="mui-card-link" :href="'detail.html?oid=' + order.id +''">运单信息</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- off-canvas backdrop -->
|
||||
<div class="mui-off-canvas-backdrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="list.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+104
@@ -0,0 +1,104 @@
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#offCanvasWrapper', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'轿运物流信息系统',
|
||||
menus: menus
|
||||
},
|
||||
orders:{
|
||||
0:{
|
||||
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:'发车人电话',
|
||||
},
|
||||
},
|
||||
total:0,
|
||||
pager:1,
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
// console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
// console.log(o)
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
// console.log(o)
|
||||
}
|
||||
})
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init();
|
||||
//侧滑容器父节点
|
||||
var offCanvasWrapper = mui('#offCanvasWrapper');
|
||||
//主界面容器
|
||||
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
||||
//菜单容器
|
||||
var offCanvasSide = document.getElementById("offCanvasSide");
|
||||
if (!mui.os.android) {
|
||||
var spans = document.querySelectorAll('.android-only');
|
||||
for (var i = 0, len = spans.length; i < len; i++) {
|
||||
spans[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
//菜单界面,‘关闭侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasHide').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
//主界面和侧滑菜单界面均支持区域滚动;
|
||||
mui('#offCanvasSideScroll').scroll();
|
||||
mui('#offCanvasContentScroll').scroll();
|
||||
//实现ios平台原生侧滑关闭页面;
|
||||
if (mui.os.plus && mui.os.ios) {
|
||||
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件,故该demo直接屏蔽popGesture功能
|
||||
plus.webview.currentWebview().setStyle({
|
||||
'popGesture': 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mui('body').on("tap",'a',function(e){
|
||||
var url = e.target.href;
|
||||
var title = e.target.innerHTML;
|
||||
openUrl(url,title);
|
||||
});
|
||||
|
||||
//取运单列表缓存
|
||||
function getOrderList(){
|
||||
var orders = JSON.parse(localStorage.getItem('OrderList'));
|
||||
vm.orders = orders;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderList();
|
||||
});
|
||||
Executable
+13
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:28:13
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:33
|
||||
*/
|
||||
|
||||
p{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.mui-bar-popover {
|
||||
width: 30%;
|
||||
}
|
||||
Executable
+98
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/icons-extra.css">
|
||||
<!--App自定义的css-->
|
||||
<!-- <link rel="stylesheet" type="text/css" href="../../mui/css/app.css"> -->
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="detail.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="app">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<nav class="mui-bar mui-bar-tab ">
|
||||
<a class="mui-tab-item" href="#Popover_0"><i class="mui-icon mui-icon-list"></i> 发车方</a>
|
||||
<a class="mui-tab-item" href="#Popover_1"><i class="mui-icon mui-icon-list"></i> 接车方</a>
|
||||
</nav>
|
||||
<div class="mui-content">
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
[{{oid}}]<h4>{{order.car_number}}</h4>
|
||||
<h5 class="mui-pullright">{{order.car_title}}</h5>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 运单号:{{order.sn}}</p>
|
||||
<p> 日期:{{order.signdate}}</p>
|
||||
<p>起运地:{{order.from_province}}-{{order.start_city}} => 目的地:{{order.to_province}}-{{order.aim_city}}</p>
|
||||
<p> 经办人:{{order.employee_title}} </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">联系信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 发车人:{{order.sender_name}} <em> {{order.sender_mobiles}} </em></p>
|
||||
<p> 接车人:{{order.receiver_name}}<em>{{order.receiver_mobiles}}</em></p>
|
||||
<p>送车地址:{{order.aim_address}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">费用信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 总运费:{{order.fee_total}} 元</p>
|
||||
<p> 现付:<span class="red">{{order.pay_send}} </span>元</p>
|
||||
<p> 到付:<span class="red">{{order.pay_receive}}</span> 元</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">运单备注</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p v-html="order.remark"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mui-content-padded mui-hidden" id="PrintError"></div>
|
||||
|
||||
<div id="Popover_0" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.sender_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Popover_1" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.receiver_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="detail.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+118
@@ -0,0 +1,118 @@
|
||||
/**
|
||||
* @Author: 嗨噜客科技(www.hiluker.cn) <fm453>
|
||||
* @Date: 2021-09-30T01:47:50+08:00
|
||||
* @Email: fm453@hiluker.com
|
||||
* @Last modified by: fm453
|
||||
* @Last modified time: 2021-09-30T01:50:53+08:00
|
||||
*/
|
||||
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#app', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'轿运物流信息系统',
|
||||
menus: menus
|
||||
},
|
||||
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:'发车人电话',
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
//
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
console.log(o)
|
||||
this.oid = getUriQueryVariable('oid');
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
console.log(o)
|
||||
},
|
||||
});
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init({
|
||||
swipeBack:true, //启用右滑关闭功能
|
||||
});
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//取运单信息
|
||||
function getOrderDetail(){
|
||||
var url = apis.domain+apis.JiaocheDetail;
|
||||
var data = {
|
||||
pid: apis.pid,
|
||||
oid: vm.oid
|
||||
};
|
||||
mui.ajax(url,{
|
||||
data:data,
|
||||
dataType:'json',//服务器返回json格式数据
|
||||
type:'post',//HTTP请求类型
|
||||
timeout:10000,//超时时间设置为10秒;
|
||||
// crossDomain:true, //跨域
|
||||
// headers:{'Content-Type':'application/json'},
|
||||
success:function(res){
|
||||
switch(res.code){
|
||||
case 200 :
|
||||
//将查询结果缓存在本地
|
||||
localStorage.setItem('orderDetail-'+vm.oid,JSON.stringify(res.data));
|
||||
//显示数据
|
||||
vm.order = res.data;
|
||||
document.getElementById('pagename').innerText = res.data.car_title + '-' + res.data.car_number;
|
||||
document.title = res.data.car_title + '-' + res.data.car_number + '|' + res.data.start_city +'=>'+ res.data.aim_city;
|
||||
break;
|
||||
|
||||
case 400:
|
||||
default:
|
||||
// document.getElementById('pagename').innerText = '未查询到结果!';
|
||||
break;
|
||||
}
|
||||
},
|
||||
error:function(xhr,type,errorThrown){
|
||||
console.log(type);
|
||||
document.getElementById('pagename').innerText = '查询失败!';
|
||||
document.getElementById('PrintError').innerText = '您好,信息查询失败。如果可以,请您将此页截屏发送给我们(微信: sanyabaike ),以帮助我们找到问题并改进,感谢您的支持!' + errorThrown ;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden","");
|
||||
document.getElementById("PrintError").setAttribute("class",newClass);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderDetail();
|
||||
});
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:26:35
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-28 22:28:07
|
||||
*/
|
||||
Executable
+137
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/icons-extra.css">
|
||||
<!--App自定义的css-->
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/app.css">
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
|
||||
<!--侧滑菜单部分-->
|
||||
<aside id="offCanvasSide" class="mui-off-canvas-left mui-slide-in">
|
||||
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="title">{{ctms}}</div>
|
||||
<div class="content">
|
||||
本系统由{{Company.name}}开发推出,为您提供轿运物流订单信息管理等实用功能。
|
||||
<span class="android-only">-Android Phone-
|
||||
</span>
|
||||
<p style="margin: 10px 15px;">
|
||||
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭边栏</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title" style="margin-bottom: 25px;">功能列表</div>
|
||||
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
|
||||
<li class="mui-table-view-cell" v-for="menu in Page.menus">
|
||||
<a class="mui-navigate-right" :href="'../' + menu.link">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title"></div>
|
||||
<div class="content">
|
||||
Powered by {{Company.title}} {{version}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!--主界面部分-->
|
||||
<div class="mui-inner-wrap">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="mui-content-padded">
|
||||
<p style="padding: 5px 20px;margin-bottom: 5px;">
|
||||
<button type="button" class="mui-btn mui-btn-defualt mui-btn-block" style="padding: 10px;">
|
||||
交车查询
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="mui-input-group" style="margin-bottom: 15px;" id="order-form">
|
||||
<div class="mui-input-row">
|
||||
<label>车牌号</label>
|
||||
<input type="text" class="mui-input-clear" placeholder="如 LB163 ,无需号牌前缀" v-model="search.carno" name="carno">
|
||||
</div>
|
||||
<div class="mui-input-row">
|
||||
<label>手机号</label>
|
||||
<input type="text" class="mui-input-clear" placeholder="可使用接车人/发车人手机号" v-model="search.phone" name="phone">
|
||||
</div>
|
||||
<div class="mui-input-row">
|
||||
<label>始发地</label>
|
||||
<input type="text" class="mui-input-clear" placeholder="仅支持城市名称" v-model="search.city" name="city">
|
||||
</div>
|
||||
|
||||
<div class="mui-button-row" style="height:120px;">
|
||||
<button type="button" class="mui-btn mui-btn-primary" style="width:80px;height:80px;border-radius: 50%;margin-top: 20px;font-size:18px;" onclick="checkOrder('order-form');" id="submit">查询</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mui-content" id="PrintError"></div>
|
||||
|
||||
<div class="mui-content-padded">
|
||||
<p style="padding: 5px 20px;margin-bottom: 5px;">
|
||||
<button type="button" class="mui-btn mui-btn-default mui-btn-block" style="padding: 10px;">
|
||||
使用说明
|
||||
</button>
|
||||
</p>
|
||||
<div id="infoHelp">
|
||||
<h3>订单查询目前支持:</h3>
|
||||
<p>(1)通过发车人/接车人手机号+车牌号(仅输入尾数串)/车架号(后5位数字),如"<span class="orange">琼B</span> <span class="red">LB163</span>",仅输入'<span class="red">LB163</span>'即可进行查询。</p>
|
||||
<p>(2)批量查询某同一目的地的运单。</p>
|
||||
<h3>关于界面操作:</h3>
|
||||
<p>本界面支持页面左右拖动手势、页面内容上下滑动;</p>
|
||||
<p>您可通过以下方式打开侧滑边栏,查看更多功能链接:
|
||||
<ol style="color:#555;">
|
||||
<li>在当前页面向右拖动;</li>
|
||||
<li>点击页面左上角<span class="mui-icon mui-icon-bars"></span> 图标;</li>
|
||||
<li>点击左下角的主页按钮;</li>
|
||||
</ol>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="mui-bar mui-bar-tab">
|
||||
<a class="mui-tab-item" href="../../index.html">
|
||||
⇤ 首页
|
||||
</a>
|
||||
<span class="mui-tab-item mui-active" href="#" id="offCanvasShow" >
|
||||
<span class="mui-icon mui-icon-bars">
|
||||
</span>
|
||||
<span class="mui-tab-label">功能</span>
|
||||
</span>
|
||||
<span class="mui-tab-item" href="#" id="alertBtnHelp">
|
||||
<span class="mui-icon mui-icon-extra mui-icon-extra-lamp">
|
||||
</span>
|
||||
<span class="mui-tab-label">帮助</span>
|
||||
</span>
|
||||
|
||||
</nav>
|
||||
<!-- off-canvas backdrop -->
|
||||
<div class="mui-off-canvas-backdrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="index.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+167
@@ -0,0 +1,167 @@
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#offCanvasWrapper', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'交车单查询',
|
||||
menus: menus
|
||||
},
|
||||
search:{
|
||||
carno:'',
|
||||
phone:'',
|
||||
city:''
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
TestFunc(){
|
||||
console.log('测试下添加个自定义函数方法')
|
||||
}
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
// console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
// console.log(o)
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
console.log(o)
|
||||
}
|
||||
});
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init();
|
||||
//侧滑容器父节点
|
||||
var offCanvasWrapper = mui('#offCanvasWrapper');
|
||||
//主界面容器
|
||||
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
||||
//菜单容器
|
||||
var offCanvasSide = document.getElementById("offCanvasSide");
|
||||
if (!mui.os.android) {
|
||||
var spans = document.querySelectorAll('.android-only');
|
||||
for (var i = 0, len = spans.length; i < len; i++) {
|
||||
spans[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
//移动效果是否为整体移动
|
||||
var moveTogether = false;
|
||||
|
||||
//主界面‘显示侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasShow').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('show');
|
||||
});
|
||||
//菜单界面,‘关闭侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasHide').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
//主界面和侧滑菜单界面均支持区域滚动;
|
||||
mui('#offCanvasSideScroll').scroll();
|
||||
mui('#offCanvasContentScroll').scroll();
|
||||
//实现ios平台原生侧滑关闭页面;
|
||||
if (mui.os.plus && mui.os.ios) {
|
||||
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件,故该demo直接屏蔽popGesture功能
|
||||
plus.webview.currentWebview().setStyle({
|
||||
'popGesture': 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("alertBtnHelp").addEventListener('tap', function() {
|
||||
mui.toast('感谢使用,请查看页面中的使用说明');
|
||||
});
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function checkOrder(formid){
|
||||
var form = document.getElementById(formid);
|
||||
var url = apis.domain+apis.JiaocheSearch;
|
||||
var data = vm.search;
|
||||
mui.post(url,{search:data,pid:apis.pid},function(res){
|
||||
console.log(res);
|
||||
if(res){
|
||||
switch(res.code){
|
||||
case 200 :
|
||||
//将查询结果缓存在本地
|
||||
var orders = res.data.data.orders;
|
||||
var o = JSON.stringify(orders);
|
||||
console.log(o);
|
||||
localStorage.setItem('JiaocheList',o);
|
||||
|
||||
//跳转到列表页
|
||||
mui.openWindow({
|
||||
url:'list.html',
|
||||
id:'JiaocheList',
|
||||
styles:{
|
||||
top:44, //新页面顶部位置
|
||||
bottom:0, //新页面底部位置
|
||||
width:'100%', //新页面宽度,默认为100%
|
||||
height:'100%' //新页面高度,默认为100%
|
||||
},
|
||||
extras:{
|
||||
orders:res.data.data.orders ,//自定义扩展参数,可以用来处理页面间传值
|
||||
},
|
||||
createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
|
||||
show:{
|
||||
autoShow:true,//页面loaded事件发生后自动显示,默认为true
|
||||
aniShow:'slide-in-right',//页面显示动画,默认为”slide-in-right“;
|
||||
duration:200//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
|
||||
},
|
||||
waiting:{
|
||||
autoShow:true,//自动显示等待框,默认为true
|
||||
title:'正在加载...',//等待对话框上显示的提示内容
|
||||
options:{
|
||||
width:'100%',//等待框背景区域宽度,默认根据内容自动计算合适宽度
|
||||
height:'100%',//等待框背景区域高度,默认根据内容自动计算合适高度
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 400:
|
||||
default:
|
||||
document.getElementById('pagename').innerText = '未查询到结果!';
|
||||
break;
|
||||
}
|
||||
}else{
|
||||
document.getElementById('pagename').innerText = '查询失败!';
|
||||
document.getElementById('PrintError').innerText = '您好,系统查询失败。如果可以,请您将此页截屏发送给我们(微信: sanyabaike ),以帮助我们找到问题并改进,感谢您的支持!' + res ;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden","");
|
||||
document.getElementById("PrintError").setAttribute("class",newClass);
|
||||
}
|
||||
},'json');
|
||||
return false;
|
||||
}
|
||||
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
// titleNView: { // 窗口的标题栏控件
|
||||
// titleText:"", // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题
|
||||
// titleColor:"#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
|
||||
// titleSize:"17px", // 字体大小,默认17px
|
||||
// backgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
|
||||
// progress:{ // 标题栏控件的进度条样式
|
||||
// color:"#00FF00", // 进度条颜色,默认值为"#00FF00"
|
||||
// height:"2px" // 进度条高度,默认值为"2px"
|
||||
// },
|
||||
// splitLine:{ // 标题栏控件的底部分割线,类似borderBottom
|
||||
// color:"#CCCCCC", // 分割线颜色,默认值为"#CCCCCC"
|
||||
// height:"1px" // 分割线高度,默认值为"2px"
|
||||
// }
|
||||
// }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mui('body').on("tap",'a',function(e){
|
||||
var url = e.target.href;
|
||||
var title = e.target.innerHTML;
|
||||
openUrl(url,title);
|
||||
});
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:26:39
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:07
|
||||
*/
|
||||
Executable
+83
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<!--App自定义的css-->
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/app.css">
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="list.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
|
||||
<!--侧滑菜单部分-->
|
||||
<aside id="offCanvasSide" class="mui-off-canvas-left mui-slide-in">
|
||||
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="title">{{ctms}}</div>
|
||||
<div class="content">
|
||||
本系统由{{Company.name}}开发推出,为您提供轿运物流订单信息管理等实用功能。
|
||||
<span class="android-only">-Android Phone-
|
||||
</span>
|
||||
<p style="margin: 10px 15px;">
|
||||
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭边栏</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title" style="margin-bottom: 25px;">功能列表</div>
|
||||
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
|
||||
<li class="mui-table-view-cell" v-for="menu in Page.menus">
|
||||
<a class="mui-navigate-right" :href="'../' + menu.link">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title"></div>
|
||||
<div class="content">
|
||||
Powered by {{Company.title}} {{version}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!--主界面部分-->
|
||||
<div class="mui-inner-wrap">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
|
||||
<div class="mui-card" v-for="order in orders" :data-oid="order.id" :data-carid="order.car_id">
|
||||
<div class="mui-card-header ">
|
||||
<h3>{{order.car_number}}</h3>
|
||||
<h4 class="mui-pullright">{{order.car_title}}</h4>
|
||||
</div>
|
||||
<div class="mui-card-content" >
|
||||
<p> 日期:{{order.signdate}}</p>
|
||||
<p>起运地:{{order.start_city}} => 目的地:{{order.aim_city}}</p>
|
||||
<a class="mui-card-link mui-btn mui-btn-defualt mui-btn-block" :href="'detail.html?oid=' + order.id +''" style="padding: 10px;">查看交车详情</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- off-canvas backdrop -->
|
||||
<div class="mui-off-canvas-backdrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="list.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+104
@@ -0,0 +1,104 @@
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#offCanvasWrapper', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'交车单',
|
||||
menus: menus
|
||||
},
|
||||
orders:{
|
||||
0:{
|
||||
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:'发车人电话',
|
||||
},
|
||||
},
|
||||
total:0,
|
||||
pager:1,
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
// console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
// console.log(o)
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
// console.log(o)
|
||||
}
|
||||
})
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init();
|
||||
//侧滑容器父节点
|
||||
var offCanvasWrapper = mui('#offCanvasWrapper');
|
||||
//主界面容器
|
||||
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
||||
//菜单容器
|
||||
var offCanvasSide = document.getElementById("offCanvasSide");
|
||||
if (!mui.os.android) {
|
||||
var spans = document.querySelectorAll('.android-only');
|
||||
for (var i = 0, len = spans.length; i < len; i++) {
|
||||
spans[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
//菜单界面,‘关闭侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasHide').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
//主界面和侧滑菜单界面均支持区域滚动;
|
||||
mui('#offCanvasSideScroll').scroll();
|
||||
mui('#offCanvasContentScroll').scroll();
|
||||
//实现ios平台原生侧滑关闭页面;
|
||||
if (mui.os.plus && mui.os.ios) {
|
||||
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件,故该demo直接屏蔽popGesture功能
|
||||
plus.webview.currentWebview().setStyle({
|
||||
'popGesture': 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mui('body').on("tap",'a',function(e){
|
||||
var url = e.target.href;
|
||||
var title = e.target.innerHTML;
|
||||
openUrl(url,title);
|
||||
});
|
||||
|
||||
//取运单列表缓存
|
||||
function getOrderList(){
|
||||
var orders = JSON.parse(localStorage.getItem('JiaocheList'));
|
||||
vm.orders = orders;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderList();
|
||||
});
|
||||
Executable
+13
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:28:13
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:33
|
||||
*/
|
||||
|
||||
p{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.mui-bar-popover {
|
||||
width: 30%;
|
||||
}
|
||||
Executable
+119
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/icons-extra.css">
|
||||
<!--App自定义的css-->
|
||||
<!-- <link rel="stylesheet" type="text/css" href="../../mui/css/app.css"> -->
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="detail.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="app">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<nav class="mui-bar mui-bar-tab ">
|
||||
<a class="mui-tab-item" href="#Popover_0"><i class="mui-icon mui-icon-list"></i> 发车方</a>
|
||||
<a class="mui-tab-item" href="#Popover_1"><i class="mui-icon mui-icon-list"></i> 接车方</a>
|
||||
<a class="mui-tab-item" href="#Popover_2"><i class="mui-icon mui-icon-list"></i> 其他</a>
|
||||
</nav>
|
||||
<div class="mui-content">
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
[{{oid}}]<h4>{{order.car_number}}</h4>
|
||||
<h5 class="mui-pullright">{{order.car_title}}</h5>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 运单号:{{order.sn}}</p>
|
||||
<p> 日期:{{order.signdate}}</p>
|
||||
<p>起运地:{{order.from_province}}-{{order.start_city}} => 目的地:{{order.to_province}}-{{order.aim_city}}</p>
|
||||
<p> 随车物品:{{order.car_extra}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">联系信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 发车人:{{order.sender_name}} <em> {{order.sender_mobiles}} </em></p>
|
||||
<p> 接车人:{{order.receiver_name}}<em>{{order.receiver_mobiles}}</em></p>
|
||||
<p>送车地址:{{order.aim_address}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">费用信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 总运费:{{order.fee_total}} 元</p>
|
||||
<p> 现付:<span class="red">{{order.pay_send}} </span>元</p>
|
||||
<p> 到付:<span class="red">{{order.pay_receive}}</span> 元</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="mui-card">
|
||||
<div class="mui-card-header mui-card-media">
|
||||
<div class="mui-card-media-body">
|
||||
<p class="mui-ellipsis">验车照片</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mui-card-content mui-card-media" style="height:40vw;background-image:url('')">
|
||||
<img :src="order.thumb_b">
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">关联信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 经办人:{{order.employee_title}} </p>
|
||||
<p> 验车人:{{order.checker}} </p>
|
||||
<p> 委托人:{{order.wtdw}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mui-content-padded mui-hidden" id="PrintError"></div>
|
||||
|
||||
<div id="Popover_0" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.sender_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Popover_1" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.receiver_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Popover_2" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'remark.html?oid=' + order.id ">详情备注</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="detail.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+121
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* @Author: 嗨噜客科技(www.hiluker.cn) <fm453>
|
||||
* @Date: 2021-09-30T01:47:50+08:00
|
||||
* @Email: fm453@hiluker.com
|
||||
* @Last modified by: fm453
|
||||
* @Last modified time: 2021-09-30T01:50:53+08:00
|
||||
*/
|
||||
|
||||
//用户检测
|
||||
// const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#app', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company: params.Company,
|
||||
Page: {
|
||||
title: '轿运物流信息系统',
|
||||
menus: menus
|
||||
},
|
||||
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: '发车人电话',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//
|
||||
},
|
||||
created: function(o) { //实例创建完成时
|
||||
console.log(o)
|
||||
},
|
||||
mounted: function(o) { //页面初始化方法
|
||||
console.log(o)
|
||||
this.oid = getUriQueryVariable('oid');
|
||||
},
|
||||
destroyed: function(o) { //实例销毁方法
|
||||
console.log(o)
|
||||
},
|
||||
});
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init({
|
||||
swipeBack: true, //启用右滑关闭功能
|
||||
});
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url, title) {
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//取运单信息
|
||||
function getOrderDetail() {
|
||||
var url = apis.domain + apis.OrderDetail;
|
||||
var data = {
|
||||
pid: apis.pid,
|
||||
oid: vm.oid
|
||||
};
|
||||
mui.ajax(url, {
|
||||
data: data,
|
||||
dataType: 'json', //服务器返回json格式数据
|
||||
type: 'post', //HTTP请求类型
|
||||
timeout: 10000, //超时时间设置为10秒;
|
||||
// crossDomain:true, //跨域
|
||||
// headers:{'Content-Type':'application/json'},
|
||||
success: function(res) {
|
||||
switch (res.code) {
|
||||
case 200:
|
||||
//将查询结果缓存在本地
|
||||
localStorage.setItem('orderDetail-' + vm.oid, JSON.stringify(res.data));
|
||||
//显示数据
|
||||
vm.order = res.data;
|
||||
document.getElementById('pagename').innerText = res.data.car_title + '-' + res.data
|
||||
.car_number;
|
||||
document.title = res.data.car_title + '-' + res.data.car_number + '|' + res.data
|
||||
.start_city + '=>' + res.data.aim_city;
|
||||
break;
|
||||
|
||||
case 400:
|
||||
default:
|
||||
// document.getElementById('pagename').innerText = '未查询到结果!';
|
||||
break;
|
||||
}
|
||||
},
|
||||
error: function(xhr, type, errorThrown) {
|
||||
console.log(type);
|
||||
document.getElementById('pagename').innerText = '查询失败!';
|
||||
document.getElementById('PrintError').innerText =
|
||||
'您好,信息查询失败。如果可以,请您将此页截屏发送给我们(微信: sanyabaike ),以帮助我们找到问题并改进,感谢您的支持!' + errorThrown;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden", "");
|
||||
document.getElementById("PrintError").setAttribute("class", newClass);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
mui.ready(function() {
|
||||
mui.toast('数据加载中……');
|
||||
getOrderDetail();
|
||||
});
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:26:35
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-28 22:28:07
|
||||
*/
|
||||
Executable
+143
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/icons-extra.css">
|
||||
<!--App自定义的css-->
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/app.css">
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
|
||||
<!--侧滑菜单部分-->
|
||||
<aside id="offCanvasSide" class="mui-off-canvas-left mui-slide-in">
|
||||
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="title">{{ctms}}</div>
|
||||
<div class="content">
|
||||
本系统由{{Company.name}}开发推出,为您提供轿运物流订单信息管理等实用功能。
|
||||
<span class="android-only">-Android Phone-
|
||||
</span>
|
||||
<p style="margin: 10px 15px;">
|
||||
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block"
|
||||
style="padding: 5px 20px;">关闭边栏</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title" style="margin-bottom: 25px;">功能列表</div>
|
||||
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
|
||||
<li class="mui-table-view-cell" v-for="menu in Page.menus">
|
||||
<a class="mui-navigate-right" :href="'../' + menu.link">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title"></div>
|
||||
<div class="content">
|
||||
Powered by {{Company.title}} {{version}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!--主界面部分-->
|
||||
<div class="mui-inner-wrap">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="mui-content-padded">
|
||||
<p style="padding: 5px 20px;margin-bottom: 5px;">
|
||||
<button type="button" class="mui-btn mui-btn-success mui-btn-block"
|
||||
style="padding: 10px;">
|
||||
订单查询
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="mui-input-group" style="margin-bottom: 15px;" id="order-form">
|
||||
<div class="mui-input-row">
|
||||
<label>车牌号</label>
|
||||
<input type="text" class="mui-input-clear" placeholder="如 LB163 ,无需号牌前缀"
|
||||
v-model="search.carno" name="carno">
|
||||
</div>
|
||||
<div class="mui-input-row">
|
||||
<label>手机号</label>
|
||||
<input type="text" class="mui-input-clear" placeholder="可使用接车人/发车人手机号"
|
||||
v-model="search.phone" name="phone">
|
||||
</div>
|
||||
<div class="mui-input-row">
|
||||
<label>目的地</label>
|
||||
<input type="text" class="mui-input-clear" placeholder="仅支持城市名称" v-model="search.city"
|
||||
name="city">
|
||||
</div>
|
||||
|
||||
<div class="mui-button-row" style="height:120px;">
|
||||
<button type="button" class="mui-btn mui-btn-primary"
|
||||
style="width:80px;height:80px;border-radius: 50%;margin-top: 20px;font-size:18px;"
|
||||
onclick="checkOrder('order-form');" id="submit">查询</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mui-content" id="PrintError"></div>
|
||||
|
||||
<div class="mui-content-padded">
|
||||
<p style="padding: 5px 20px;margin-bottom: 5px;">
|
||||
<button type="button" class="mui-btn mui-btn-primary mui-btn-block"
|
||||
style="padding: 10px;">
|
||||
使用说明
|
||||
</button>
|
||||
</p>
|
||||
<div id="infoHelp">
|
||||
<h3>订单查询目前支持:</h3>
|
||||
<p>(1)通过发车人/接车人手机号+车牌号(仅输入尾数串)/车架号(后5位数字),如"<span class="orange">琼B</span> <span
|
||||
class="red">LB163</span>",仅输入'<span class="red">LB163</span>'即可进行查询。</p>
|
||||
<p>(2)批量查询某同一目的地的运单。</p>
|
||||
<h3>关于界面操作:</h3>
|
||||
<p>本界面支持页面左右拖动手势、页面内容上下滑动;</p>
|
||||
<p>您可通过以下方式打开侧滑边栏,查看更多功能链接:
|
||||
<ol style="color:#555;">
|
||||
<li>在当前页面向右拖动;</li>
|
||||
<li>点击页面左上角<span class="mui-icon mui-icon-bars"></span> 图标;</li>
|
||||
<li>点击左下角的主页按钮;</li>
|
||||
</ol>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="mui-bar mui-bar-tab">
|
||||
<a class="mui-tab-item" href="../../index.html">
|
||||
⇤ 首页
|
||||
</a>
|
||||
<span class="mui-tab-item mui-active" href="#" id="offCanvasShow">
|
||||
<span class="mui-icon mui-icon-bars">
|
||||
</span>
|
||||
<span class="mui-tab-label">功能</span>
|
||||
</span>
|
||||
<span class="mui-tab-item" href="#" id="alertBtnHelp">
|
||||
<span class="mui-icon mui-icon-extra mui-icon-extra-lamp">
|
||||
</span>
|
||||
<span class="mui-tab-label">帮助</span>
|
||||
</span>
|
||||
|
||||
</nav>
|
||||
<!-- off-canvas backdrop -->
|
||||
<div class="mui-off-canvas-backdrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="index.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+170
@@ -0,0 +1,170 @@
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#offCanvasWrapper', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'运单查询',
|
||||
menus: menus
|
||||
},
|
||||
search:{
|
||||
carno:'',
|
||||
phone:'',
|
||||
city:''
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
TestFunc(){
|
||||
console.log('测试下添加个自定义函数方法')
|
||||
}
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
// console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
// console.log(o)
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
console.log(o)
|
||||
}
|
||||
});
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init();
|
||||
//侧滑容器父节点
|
||||
var offCanvasWrapper = mui('#offCanvasWrapper');
|
||||
//主界面容器
|
||||
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
||||
//菜单容器
|
||||
var offCanvasSide = document.getElementById("offCanvasSide");
|
||||
if (!mui.os.android) {
|
||||
var spans = document.querySelectorAll('.android-only');
|
||||
for (var i = 0, len = spans.length; i < len; i++) {
|
||||
spans[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
//移动效果是否为整体移动
|
||||
var moveTogether = false;
|
||||
|
||||
//主界面‘显示侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasShow').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('show');
|
||||
});
|
||||
//菜单界面,‘关闭侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasHide').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
//主界面和侧滑菜单界面均支持区域滚动;
|
||||
mui('#offCanvasSideScroll').scroll();
|
||||
mui('#offCanvasContentScroll').scroll();
|
||||
//实现ios平台原生侧滑关闭页面;
|
||||
if (mui.os.plus && mui.os.ios) {
|
||||
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件,故该demo直接屏蔽popGesture功能
|
||||
plus.webview.currentWebview().setStyle({
|
||||
'popGesture': 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("alertBtnHelp").addEventListener('tap', function() {
|
||||
mui.toast('感谢使用,请查看页面中的使用说明');
|
||||
});
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function checkOrder(formid){
|
||||
var form = document.getElementById(formid);
|
||||
var url = apis.domain+apis.OrderSearch;
|
||||
var data = vm.search;
|
||||
mui.post(url,{search:data,pid:apis.pid},function(res){
|
||||
console.log(res);
|
||||
if(res){
|
||||
switch(res.code){
|
||||
case 200 :
|
||||
//将查询结果缓存在本地
|
||||
var orders = res.data.data.orders;
|
||||
var o = JSON.stringify(orders);
|
||||
console.log(o);
|
||||
localStorage.setItem('OrderList',o);
|
||||
|
||||
//跳转到列表页
|
||||
mui.openWindow({
|
||||
url:'list.html',
|
||||
id:'OrderList',
|
||||
styles:{
|
||||
top:44, //新页面顶部位置
|
||||
bottom:0, //新页面底部位置
|
||||
width:'100%', //新页面宽度,默认为100%
|
||||
height:'100%' //新页面高度,默认为100%
|
||||
},
|
||||
extras:{
|
||||
orders:res.data.data.orders ,//自定义扩展参数,可以用来处理页面间传值
|
||||
},
|
||||
createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
|
||||
show:{
|
||||
autoShow:true,//页面loaded事件发生后自动显示,默认为true
|
||||
aniShow:'slide-in-right',//页面显示动画,默认为”slide-in-right“;
|
||||
duration:200//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
|
||||
},
|
||||
waiting:{
|
||||
autoShow:true,//自动显示等待框,默认为true
|
||||
title:'正在加载...',//等待对话框上显示的提示内容
|
||||
options:{
|
||||
width:'100%',//等待框背景区域宽度,默认根据内容自动计算合适宽度
|
||||
height:'100%',//等待框背景区域高度,默认根据内容自动计算合适高度
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 400:
|
||||
default:
|
||||
document.getElementById('pagename').innerText = '未查询到结果!';
|
||||
break;
|
||||
}
|
||||
}else{
|
||||
document.getElementById('pagename').innerText = '查询失败!';
|
||||
document.getElementById('PrintError').innerText = '您好,系统查询失败。如果可以,请您将此页截屏发送给我们(微信: sanyabaike ),以帮助我们找到问题并改进,感谢您的支持!' + res ;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden","");
|
||||
document.getElementById("PrintError").setAttribute("class",newClass);
|
||||
}
|
||||
},'json');
|
||||
return false;
|
||||
}
|
||||
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
// titleNView: { // 窗口的标题栏控件
|
||||
// titleText:"", // 标题栏文字,当不设置此属性时,默认加载当前页面的标题,并自动更新页面的标题
|
||||
// titleColor:"#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
|
||||
// titleSize:"17px", // 字体大小,默认17px
|
||||
// backgroundColor:"#F7F7F7", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
|
||||
// progress:{ // 标题栏控件的进度条样式
|
||||
// color:"#00FF00", // 进度条颜色,默认值为"#00FF00"
|
||||
// height:"2px" // 进度条高度,默认值为"2px"
|
||||
// },
|
||||
// splitLine:{ // 标题栏控件的底部分割线,类似borderBottom
|
||||
// color:"#CCCCCC", // 分割线颜色,默认值为"#CCCCCC"
|
||||
// height:"1px" // 分割线高度,默认值为"2px"
|
||||
// }
|
||||
// }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mui('body').on("tap",'a',function(e){
|
||||
console.log(e.target);
|
||||
var url = e.target.href;
|
||||
var title = e.target.innerHTML;
|
||||
console.log(url);
|
||||
console.log(title);
|
||||
openUrl(url,title);
|
||||
});
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:26:39
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:07
|
||||
*/
|
||||
Executable
+86
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<!--App自定义的css-->
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/app.css">
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="list.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
|
||||
<!--侧滑菜单部分-->
|
||||
<aside id="offCanvasSide" class="mui-off-canvas-left mui-slide-in">
|
||||
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="title">{{ctms}}</div>
|
||||
<div class="content">
|
||||
本系统由{{Company.name}}开发推出,为您提供轿运物流订单信息管理等实用功能。
|
||||
<span class="android-only">-Android Phone-
|
||||
</span>
|
||||
<p style="margin: 10px 15px;">
|
||||
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭边栏</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title" style="margin-bottom: 25px;">功能列表</div>
|
||||
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
|
||||
<li class="mui-table-view-cell" v-for="menu in Page.menus">
|
||||
<a class="mui-navigate-right" :href="'../' + menu.link">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title"></div>
|
||||
<div class="content">
|
||||
Powered by {{Company.title}} {{version}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!--主界面部分-->
|
||||
<div class="mui-inner-wrap">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
|
||||
<div class="mui-card" v-for="order in orders" :data-oid="order.id" :data-carid="order.car_id">
|
||||
<div class="mui-card-header ">
|
||||
<h3>{{order.car_number}}</h3>
|
||||
<h4 class="mui-pullright">{{order.car_title}}</h4>
|
||||
</div>
|
||||
<div class="mui-card-content" >
|
||||
<p> 日期:{{order.signdate}}</p>
|
||||
<p>起运地:{{order.start_city}} => 目的地:{{order.aim_city}}</p>
|
||||
</div>
|
||||
<div class="mui-card-footer">
|
||||
<a class="mui-card-link" :href="'detail.html?oid=' + order.id +''">在途跟踪</a>
|
||||
<a class="mui-card-link" :href="'detail.html?oid=' + order.id +''">运单信息</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- off-canvas backdrop -->
|
||||
<div class="mui-off-canvas-backdrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="list.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+104
@@ -0,0 +1,104 @@
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#offCanvasWrapper', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'运单列表',
|
||||
menus: menus
|
||||
},
|
||||
orders:{
|
||||
0:{
|
||||
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:'发车人电话',
|
||||
},
|
||||
},
|
||||
total:0,
|
||||
pager:1,
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
// console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
// console.log(o)
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
// console.log(o)
|
||||
}
|
||||
})
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init();
|
||||
//侧滑容器父节点
|
||||
var offCanvasWrapper = mui('#offCanvasWrapper');
|
||||
//主界面容器
|
||||
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
||||
//菜单容器
|
||||
var offCanvasSide = document.getElementById("offCanvasSide");
|
||||
if (!mui.os.android) {
|
||||
var spans = document.querySelectorAll('.android-only');
|
||||
for (var i = 0, len = spans.length; i < len; i++) {
|
||||
spans[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
//菜单界面,‘关闭侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasHide').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
//主界面和侧滑菜单界面均支持区域滚动;
|
||||
mui('#offCanvasSideScroll').scroll();
|
||||
mui('#offCanvasContentScroll').scroll();
|
||||
//实现ios平台原生侧滑关闭页面;
|
||||
if (mui.os.plus && mui.os.ios) {
|
||||
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件,故该demo直接屏蔽popGesture功能
|
||||
plus.webview.currentWebview().setStyle({
|
||||
'popGesture': 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mui('body').on("tap",'a',function(e){
|
||||
var url = e.target.href;
|
||||
var title = e.target.innerHTML;
|
||||
openUrl(url,title);
|
||||
});
|
||||
|
||||
//取运单列表缓存
|
||||
function getOrderList(){
|
||||
var orders = JSON.parse(localStorage.getItem('OrderList'));
|
||||
vm.orders = orders;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderList();
|
||||
});
|
||||
Executable
+13
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:28:13
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:33
|
||||
*/
|
||||
|
||||
p{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.mui-bar-popover {
|
||||
width: 30%;
|
||||
}
|
||||
Executable
+54
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<link rel="shortcut icon" href="static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<link rel="stylesheet" href="orderremark.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="app">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
|
||||
<div class="mui-content">
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
[{{oid}}]<h3>{{order.car_number}}</h3>
|
||||
<h4 class="mui-pullright">{{order.car_title}}</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 运单号:{{order.sn}}</p>
|
||||
<p> 日期:{{order.signdate}}</p>
|
||||
<p>起运地:{{order.from_province}}-{{order.start_city}} => 目的地:{{order.to_province}}-{{order.aim_city}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">运单备注</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p v-html="order.remark"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mui-content-padded" id="PrintError"></div>
|
||||
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="remark.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+65
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* @Author: 嗨噜客科技(www.hiluker.cn) <fm453>
|
||||
* @Date: 2021-09-30T01:33:43+08:00
|
||||
* @Email: fm453@hiluker.com
|
||||
* @Last modified by: fm453
|
||||
* @Last modified time: 2021-09-30T01:51:35+08:00
|
||||
*/
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#app', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'轿运物流信息系统',
|
||||
menus: menus
|
||||
},
|
||||
oid:0,
|
||||
order:{
|
||||
id:1,
|
||||
remark:'备注',
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
//
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
console.log(o)
|
||||
this.oid = getUriQueryVariable('oid');
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
console.log(o)
|
||||
},
|
||||
});
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init({
|
||||
swipeBack:true, //启用右滑关闭功能
|
||||
});
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
|
||||
//取运单信息
|
||||
function getOrderDetail(){
|
||||
var data = {
|
||||
pid: apis.pid,
|
||||
oid: vm.oid
|
||||
};
|
||||
var order = JSON.parse(localStorage.getItem('orderDetail-'+vm.oid));
|
||||
console.log(order);
|
||||
vm.order = order;
|
||||
return false;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderDetail();
|
||||
});
|
||||
Executable
+13
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:28:13
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:33
|
||||
*/
|
||||
|
||||
p{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.mui-bar-popover {
|
||||
width: 30%;
|
||||
}
|
||||
Executable
+119
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/icons-extra.css">
|
||||
<!--App自定义的css-->
|
||||
<!-- <link rel="stylesheet" type="text/css" href="../../mui/css/app.css"> -->
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="detail.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="app">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<nav class="mui-bar mui-bar-tab ">
|
||||
<a class="mui-tab-item" href="#Popover_0"><i class="mui-icon mui-icon-list"></i> 发车方</a>
|
||||
<a class="mui-tab-item" href="#Popover_1"><i class="mui-icon mui-icon-list"></i> 接车方</a>
|
||||
<a class="mui-tab-item" href="#Popover_2"><i class="mui-icon mui-icon-list"></i> 其他</a>
|
||||
</nav>
|
||||
<div class="mui-content">
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
[{{oid}}]<h4>{{order.car_number}}</h4>
|
||||
<h5 class="mui-pullright">{{order.car_title}}</h5>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 运单号:{{order.sn}}</p>
|
||||
<p> 日期:{{order.signdate}}</p>
|
||||
<p>起运地:{{order.from_province}}-{{order.start_city}} => 目的地:{{order.to_province}}-{{order.aim_city}}</p>
|
||||
<p> 随车物品:{{order.car_extra}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">联系信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 发车人:{{order.sender_name}} <em> {{order.sender_mobiles}} </em></p>
|
||||
<p> 接车人:{{order.receiver_name}}<em>{{order.receiver_mobiles}}</em></p>
|
||||
<p>送车地址:{{order.aim_address}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">费用信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 总运费:{{order.fee_total}} 元</p>
|
||||
<p> 现付:<span class="red">{{order.pay_send}} </span>元</p>
|
||||
<p> 到付:<span class="red">{{order.pay_receive}}</span> 元</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="mui-card">
|
||||
<div class="mui-card-header mui-card-media">
|
||||
<div class="mui-card-media-body">
|
||||
<p class="mui-ellipsis">验车照片</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mui-card-content mui-card-media" style="height:40vw;background-image:url('')">
|
||||
<img :src="order.thumb_b">
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">关联信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 经办人:{{order.employee_title}} </p>
|
||||
<p> 验车人:{{order.checker}} </p>
|
||||
<p> 委托人:{{order.wtdw}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mui-content-padded mui-hidden" id="PrintError"></div>
|
||||
|
||||
<div id="Popover_0" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.sender_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Popover_1" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.receiver_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Popover_2" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'remark.html?oid=' + order.id ">详情备注</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="detail.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+117
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* @Author: 嗨噜客科技(www.hiluker.cn) <fm453>
|
||||
* @Date: 2021-09-30T01:47:50+08:00
|
||||
* @Email: fm453@hiluker.com
|
||||
* @Last modified by: fm453
|
||||
* @Last modified time: 2021-09-30T01:50:53+08:00
|
||||
*/
|
||||
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#app', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'轿运物流信息系统',
|
||||
menus: menus
|
||||
},
|
||||
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:'发车人电话',
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
//
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
console.log(o)
|
||||
this.oid = getUriQueryVariable('oid');
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
console.log(o)
|
||||
},
|
||||
});
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init({
|
||||
swipeBack:true, //启用右滑关闭功能
|
||||
});
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//取运单信息
|
||||
function getOrderDetail(){
|
||||
var url = apis.domain+apis.OrderDetail;
|
||||
var data = {
|
||||
pid: apis.pid,
|
||||
oid: vm.oid
|
||||
};
|
||||
mui.ajax(url,{
|
||||
data:data,
|
||||
dataType:'json',//服务器返回json格式数据
|
||||
type:'post',//HTTP请求类型
|
||||
timeout:10000,//超时时间设置为10秒;
|
||||
// crossDomain:true, //跨域
|
||||
// headers:{'Content-Type':'application/json'},
|
||||
success:function(res){
|
||||
switch(res.code){
|
||||
case 200 :
|
||||
//将查询结果缓存在本地
|
||||
localStorage.setItem('orderDetail-'+vm.oid,JSON.stringify(res.data));
|
||||
//显示数据
|
||||
vm.order = res.data;
|
||||
// document.getElementById('pagename').innerText = obj.Page.title;
|
||||
break;
|
||||
|
||||
case 400:
|
||||
default:
|
||||
// document.getElementById('pagename').innerText = '未查询到结果!';
|
||||
break;
|
||||
}
|
||||
},
|
||||
error:function(xhr,type,errorThrown){
|
||||
console.log(type);
|
||||
document.getElementById('pagename').innerText = '查询失败!';
|
||||
document.getElementById('PrintError').innerText = '您好,信息查询失败。如果可以,请您将此页截屏发送给我们(微信: sanyabaike ),以帮助我们找到问题并改进,感谢您的支持!' + errorThrown ;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden","");
|
||||
document.getElementById("PrintError").setAttribute("class",newClass);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderDetail();
|
||||
});
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:26:39
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:07
|
||||
*/
|
||||
Executable
+78
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<!--App自定义的css-->
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/app.css">
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="list.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
|
||||
<!--侧滑菜单部分-->
|
||||
<aside id="offCanvasSide" class="mui-off-canvas-left mui-slide-in">
|
||||
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="title">{{ctms}}</div>
|
||||
<div class="content">
|
||||
本系统由{{Company.name}}开发推出,为您提供轿运物流订单信息管理等实用功能。
|
||||
<span class="android-only">-Android Phone-
|
||||
</span>
|
||||
<p style="margin: 10px 15px;">
|
||||
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭边栏</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title" style="margin-bottom: 25px;">功能列表</div>
|
||||
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
|
||||
<li class="mui-table-view-cell" v-for="menu in Page.menus">
|
||||
<a class="mui-navigate-right" :href="'../' + menu.link">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title"></div>
|
||||
<div class="content">
|
||||
Powered by {{Company.title}} {{version}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!--主界面部分-->
|
||||
<div class="mui-inner-wrap">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
|
||||
<div class="mui-content-padded" style="text-align: center;">
|
||||
<h1>开发完善中</h1>
|
||||
</div>
|
||||
<div class="mui-content">
|
||||
<img src="../../static/in-dev.jpg" width="100%">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- off-canvas backdrop -->
|
||||
<div class="mui-off-canvas-backdrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="list.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+104
@@ -0,0 +1,104 @@
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#offCanvasWrapper', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'网点信息',
|
||||
menus: menus
|
||||
},
|
||||
orders:{
|
||||
0:{
|
||||
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:'发车人电话',
|
||||
},
|
||||
},
|
||||
total:0,
|
||||
pager:1,
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
// console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
// console.log(o)
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
// console.log(o)
|
||||
}
|
||||
})
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init();
|
||||
//侧滑容器父节点
|
||||
var offCanvasWrapper = mui('#offCanvasWrapper');
|
||||
//主界面容器
|
||||
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
||||
//菜单容器
|
||||
var offCanvasSide = document.getElementById("offCanvasSide");
|
||||
if (!mui.os.android) {
|
||||
var spans = document.querySelectorAll('.android-only');
|
||||
for (var i = 0, len = spans.length; i < len; i++) {
|
||||
spans[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
//菜单界面,‘关闭侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasHide').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
//主界面和侧滑菜单界面均支持区域滚动;
|
||||
mui('#offCanvasSideScroll').scroll();
|
||||
mui('#offCanvasContentScroll').scroll();
|
||||
//实现ios平台原生侧滑关闭页面;
|
||||
if (mui.os.plus && mui.os.ios) {
|
||||
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件,故该demo直接屏蔽popGesture功能
|
||||
plus.webview.currentWebview().setStyle({
|
||||
'popGesture': 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mui('body').on("tap",'a',function(e){
|
||||
var url = e.target.href;
|
||||
var title = e.target.innerHTML;
|
||||
openUrl(url,title);
|
||||
});
|
||||
|
||||
//取运单列表缓存
|
||||
function getOrderList(){
|
||||
var orders = JSON.parse(localStorage.getItem('OrderList'));
|
||||
vm.orders = orders;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderList();
|
||||
});
|
||||
Executable
+13
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:28:13
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:33
|
||||
*/
|
||||
|
||||
p{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.mui-bar-popover {
|
||||
width: 30%;
|
||||
}
|
||||
Executable
+119
@@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/icons-extra.css">
|
||||
<!--App自定义的css-->
|
||||
<!-- <link rel="stylesheet" type="text/css" href="../../mui/css/app.css"> -->
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="detail.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="app">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<nav class="mui-bar mui-bar-tab ">
|
||||
<a class="mui-tab-item" href="#Popover_0"><i class="mui-icon mui-icon-list"></i> 发车方</a>
|
||||
<a class="mui-tab-item" href="#Popover_1"><i class="mui-icon mui-icon-list"></i> 接车方</a>
|
||||
<a class="mui-tab-item" href="#Popover_2"><i class="mui-icon mui-icon-list"></i> 其他</a>
|
||||
</nav>
|
||||
<div class="mui-content">
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
[{{oid}}]<h4>{{order.car_number}}</h4>
|
||||
<h5 class="mui-pullright">{{order.car_title}}</h5>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 运单号:{{order.sn}}</p>
|
||||
<p> 日期:{{order.signdate}}</p>
|
||||
<p>起运地:{{order.from_province}}-{{order.start_city}} => 目的地:{{order.to_province}}-{{order.aim_city}}</p>
|
||||
<p> 随车物品:{{order.car_extra}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">联系信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 发车人:{{order.sender_name}} <em> {{order.sender_mobiles}} </em></p>
|
||||
<p> 接车人:{{order.receiver_name}}<em>{{order.receiver_mobiles}}</em></p>
|
||||
<p>送车地址:{{order.aim_address}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">费用信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 总运费:{{order.fee_total}} 元</p>
|
||||
<p> 现付:<span class="red">{{order.pay_send}} </span>元</p>
|
||||
<p> 到付:<span class="red">{{order.pay_receive}}</span> 元</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="mui-card">
|
||||
<div class="mui-card-header mui-card-media">
|
||||
<div class="mui-card-media-body">
|
||||
<p class="mui-ellipsis">验车照片</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mui-card-content mui-card-media" style="height:40vw;background-image:url('')">
|
||||
<img :src="order.thumb_b">
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="mui-card">
|
||||
<div class="mui-card-header ">
|
||||
<h4 class="mui-pullright">关联信息</h4>
|
||||
</div>
|
||||
<div class="mui-card-content mui-content-padded" >
|
||||
<p> 经办人:{{order.employee_title}} </p>
|
||||
<p> 验车人:{{order.checker}} </p>
|
||||
<p> 委托人:{{order.wtdw}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mui-content-padded mui-hidden" id="PrintError"></div>
|
||||
|
||||
<div id="Popover_0" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.sender_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Popover_1" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'tel:'+ order.receiver_mobiles ">电话</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Popover_2" class="mui-popover mui-bar-popover">
|
||||
<div class="mui-popover-arrow"></div>
|
||||
<ul class="mui-table-view">
|
||||
<li class="mui-table-view-cell"><a :href="'remark.html?oid=' + order.id ">详情备注</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="detail.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+117
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* @Author: 嗨噜客科技(www.hiluker.cn) <fm453>
|
||||
* @Date: 2021-09-30T01:47:50+08:00
|
||||
* @Email: fm453@hiluker.com
|
||||
* @Last modified by: fm453
|
||||
* @Last modified time: 2021-09-30T01:50:53+08:00
|
||||
*/
|
||||
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#app', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'轿运物流信息系统',
|
||||
menus: menus
|
||||
},
|
||||
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:'发车人电话',
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
//
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
console.log(o)
|
||||
this.oid = getUriQueryVariable('oid');
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
console.log(o)
|
||||
},
|
||||
});
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init({
|
||||
swipeBack:true, //启用右滑关闭功能
|
||||
});
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//取运单信息
|
||||
function getOrderDetail(){
|
||||
var url = apis.domain+apis.OrderDetail;
|
||||
var data = {
|
||||
pid: apis.pid,
|
||||
oid: vm.oid
|
||||
};
|
||||
mui.ajax(url,{
|
||||
data:data,
|
||||
dataType:'json',//服务器返回json格式数据
|
||||
type:'post',//HTTP请求类型
|
||||
timeout:10000,//超时时间设置为10秒;
|
||||
// crossDomain:true, //跨域
|
||||
// headers:{'Content-Type':'application/json'},
|
||||
success:function(res){
|
||||
switch(res.code){
|
||||
case 200 :
|
||||
//将查询结果缓存在本地
|
||||
localStorage.setItem('orderDetail-'+vm.oid,JSON.stringify(res.data));
|
||||
//显示数据
|
||||
vm.order = res.data;
|
||||
// document.getElementById('pagename').innerText = obj.Page.title;
|
||||
break;
|
||||
|
||||
case 400:
|
||||
default:
|
||||
// document.getElementById('pagename').innerText = '未查询到结果!';
|
||||
break;
|
||||
}
|
||||
},
|
||||
error:function(xhr,type,errorThrown){
|
||||
console.log(type);
|
||||
document.getElementById('pagename').innerText = '查询失败!';
|
||||
document.getElementById('PrintError').innerText = '您好,信息查询失败。如果可以,请您将此页截屏发送给我们(微信: sanyabaike ),以帮助我们找到问题并改进,感谢您的支持!' + errorThrown ;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden","");
|
||||
document.getElementById("PrintError").setAttribute("class",newClass);
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderDetail();
|
||||
});
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:26:39
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-29 22:24:07
|
||||
*/
|
||||
Executable
+78
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">汽车托运管理系统</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<!--App自定义的css-->
|
||||
<link rel="stylesheet" type="text/css" href="../../mui/css/app.css">
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="list.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
|
||||
<!--侧滑菜单部分-->
|
||||
<aside id="offCanvasSide" class="mui-off-canvas-left mui-slide-in">
|
||||
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
<div class="title">{{ctms}}</div>
|
||||
<div class="content">
|
||||
本系统由{{Company.name}}开发推出,为您提供轿运物流订单信息管理等实用功能。
|
||||
<span class="android-only">-Android Phone-
|
||||
</span>
|
||||
<p style="margin: 10px 15px;">
|
||||
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭边栏</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="title" style="margin-bottom: 25px;">功能列表</div>
|
||||
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
|
||||
<li class="mui-table-view-cell" v-for="menu in Page.menus">
|
||||
<a class="mui-navigate-right" :href="'../' + menu.link">
|
||||
{{menu.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="title"></div>
|
||||
<div class="content">
|
||||
Powered by {{Company.title}} {{version}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!--主界面部分-->
|
||||
<div class="mui-inner-wrap">
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
|
||||
<div class="mui-scroll">
|
||||
|
||||
<div class="mui-content-padded" style="text-align: center;">
|
||||
<h1>开发完善中</h1>
|
||||
</div>
|
||||
<div class="mui-content">
|
||||
<img src="../../static/in-dev.jpg" width="100%">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- off-canvas backdrop -->
|
||||
<div class="mui-off-canvas-backdrop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="list.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+104
@@ -0,0 +1,104 @@
|
||||
//用户检测
|
||||
const User = checkUser();
|
||||
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#offCanvasWrapper', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company:params.Company,
|
||||
Page:{
|
||||
title:'板车信息',
|
||||
menus: menus
|
||||
},
|
||||
orders:{
|
||||
0:{
|
||||
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:'发车人电话',
|
||||
},
|
||||
},
|
||||
total:0,
|
||||
pager:1,
|
||||
},
|
||||
created:function(o){ //实例创建完成时
|
||||
// console.log(o)
|
||||
},
|
||||
mounted:function(o){ //页面初始化方法
|
||||
// console.log(o)
|
||||
},
|
||||
destroyed:function(o){ //实例销毁方法
|
||||
// console.log(o)
|
||||
}
|
||||
})
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init();
|
||||
//侧滑容器父节点
|
||||
var offCanvasWrapper = mui('#offCanvasWrapper');
|
||||
//主界面容器
|
||||
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
||||
//菜单容器
|
||||
var offCanvasSide = document.getElementById("offCanvasSide");
|
||||
if (!mui.os.android) {
|
||||
var spans = document.querySelectorAll('.android-only');
|
||||
for (var i = 0, len = spans.length; i < len; i++) {
|
||||
spans[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
//菜单界面,‘关闭侧滑菜单’按钮的点击事件
|
||||
document.getElementById('offCanvasHide').addEventListener('tap', function() {
|
||||
offCanvasWrapper.offCanvas('close');
|
||||
});
|
||||
//主界面和侧滑菜单界面均支持区域滚动;
|
||||
mui('#offCanvasSideScroll').scroll();
|
||||
mui('#offCanvasContentScroll').scroll();
|
||||
//实现ios平台原生侧滑关闭页面;
|
||||
if (mui.os.plus && mui.os.ios) {
|
||||
mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件,故该demo直接屏蔽popGesture功能
|
||||
plus.webview.currentWebview().setStyle({
|
||||
'popGesture': 'none'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function openUrl(url,title){
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mui('body').on("tap",'a',function(e){
|
||||
var url = e.target.href;
|
||||
var title = e.target.innerHTML;
|
||||
openUrl(url,title);
|
||||
});
|
||||
|
||||
//取运单列表缓存
|
||||
function getOrderList(){
|
||||
var orders = JSON.parse(localStorage.getItem('OrderList'));
|
||||
vm.orders = orders;
|
||||
}
|
||||
|
||||
mui.ready(function(){
|
||||
mui.toast('数据加载中……');
|
||||
getOrderList();
|
||||
});
|
||||
Executable
+12
@@ -0,0 +1,12 @@
|
||||
/*
|
||||
* @Author: fm453
|
||||
* @Date: 2021-03-28 22:26:35
|
||||
* @Last Modified by: fm453
|
||||
* @Last Modified time: 2021-03-28 22:28:07
|
||||
*/
|
||||
.mui-input-group .mui-input-row {
|
||||
height: 50px;
|
||||
}
|
||||
form .mui-input-group{
|
||||
padding:45px;
|
||||
}
|
||||
Executable
+51
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../vue/js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<meta charset="utf-8">
|
||||
<title id="title">CTMS登陆</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<link rel="shortcut icon" href="../../static/favicon.ico">
|
||||
|
||||
<!--标准mui.css-->
|
||||
<link rel="stylesheet" href="../../mui/css/mui.min.css">
|
||||
<!--页面内定义的css-->
|
||||
<link rel="stylesheet" href="login.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="vue-area">
|
||||
<!--主界面部分-->
|
||||
<header class="mui-bar mui-bar-nav">
|
||||
<h1 class="mui-title" id="pagename">{{Page.title}}</h1>
|
||||
</header>
|
||||
|
||||
<div class="mui-content">
|
||||
<img src="../../static/login-bg.png" width="100%">
|
||||
</div>
|
||||
<div class="mui-content-padded">
|
||||
<form class="mui-input-group" style="padding:45px;" id="login-form">
|
||||
<div class="mui-input-row">
|
||||
<label>账号</label>
|
||||
<input type="text" class="mui-input-clear" placeholder="请输入账号/手机" v-model="login.username" name="username">
|
||||
</div>
|
||||
<div class="mui-input-row">
|
||||
<label>密码</label>
|
||||
<input type="password" class="mui-input-clear" placeholder="请输入密码" v-model="login.passwd" name="passwd">
|
||||
</div>
|
||||
|
||||
<button type="button" class="mui-btn mui-btn-primary mui-btn-block" onclick="appLogin('login-form');">登陆</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mui-content-padded">
|
||||
<div id="PrintError" class="mui-hidden">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script src="../../mui/js/mui.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="../../app.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="login.js" type="text/javascript" charset="utf-8"></script>
|
||||
Executable
+123
@@ -0,0 +1,123 @@
|
||||
/*————————vue预定义————————*/
|
||||
var vm = new Vue({
|
||||
el: '#vue-area', //该ID元素必须被包含于body以内
|
||||
data: {
|
||||
ctms: params.ctms,
|
||||
version: params.version,
|
||||
Company: params.Company,
|
||||
Page: {
|
||||
title: '轿运物流信息系统',
|
||||
menus: menus
|
||||
},
|
||||
login: {
|
||||
username: '',
|
||||
passwd: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
TestFunc() {
|
||||
console.log('测试下添加个自定义函数方法')
|
||||
}
|
||||
},
|
||||
created: function(o) { //实例创建完成时
|
||||
// console.log(o)
|
||||
},
|
||||
mounted: function(o) { //页面初始化方法
|
||||
// console.log(o)
|
||||
},
|
||||
destroyed: function(o) { //实例销毁方法
|
||||
console.log(o)
|
||||
}
|
||||
})
|
||||
|
||||
/*————————MUI操作————————*/
|
||||
mui.init();
|
||||
|
||||
/*————————其他事件响应——————————*/
|
||||
function appLogin(formid) {
|
||||
var form = document.getElementById(formid);
|
||||
var url = apis.domain + apis.UserLogin;
|
||||
var data = vm.login;
|
||||
if (!data.username || !data.passwd) return false;
|
||||
mui.post(url, {
|
||||
search: data,
|
||||
pid: apis.pid
|
||||
}, function(res) {
|
||||
if (res) {
|
||||
switch (res.code) {
|
||||
case 200:
|
||||
//将查询结果缓存在本地
|
||||
var user = res.data.user,
|
||||
nowtime = new Date().getTime() / 1000;
|
||||
user.expiretime = nowtime + 60 * 60 * 4; //有效期4个小时
|
||||
var o = JSON.stringify(user);
|
||||
console.log(o);
|
||||
localStorage.setItem('User', o);
|
||||
//跳转到首页
|
||||
mui.openWindow({
|
||||
url: '../../index.html',
|
||||
id: 'app-index',
|
||||
styles: {
|
||||
top: 44, //新页面顶部位置
|
||||
bottom: 0, //新页面底部位置
|
||||
width: '100%', //新页面宽度,默认为100%
|
||||
height: '100%' //新页面高度,默认为100%
|
||||
},
|
||||
extras: {
|
||||
//自定义扩展参数,可以用来处理页面间传值
|
||||
},
|
||||
createNew: false, //是否重复创建同样id的webview,默认为false:不重复创建,直接显示
|
||||
show: {
|
||||
autoShow: true, //页面loaded事件发生后自动显示,默认为true
|
||||
aniShow: 'slide-in-right', //页面显示动画,默认为”slide-in-right“;
|
||||
duration: 200 //页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
|
||||
},
|
||||
waiting: {
|
||||
autoShow: true, //自动显示等待框,默认为true
|
||||
title: '正在加载...', //等待对话框上显示的提示内容
|
||||
options: {
|
||||
width: '100%', //等待框背景区域宽度,默认根据内容自动计算合适宽度
|
||||
height: '100%', //等待框背景区域高度,默认根据内容自动计算合适高度
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
break;
|
||||
|
||||
case 400:
|
||||
default:
|
||||
document.getElementById('pagename').innerText = '登陆失败!';
|
||||
document.getElementById('PrintError').innerText = '您好,登陆失败!提示:' + res.msg;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden", "");
|
||||
document.getElementById("PrintError").setAttribute("class", newClass);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
document.getElementById('pagename').innerText = '登陆失败!';
|
||||
document.getElementById('PrintError').innerText =
|
||||
'您好,登陆失败,请联系管理员或技术人员。如果可以,请您将此页截屏发送给我们(微信: sanyabaike ),以便我们更快为您解决问题!' + res;
|
||||
let classAtr = document.getElementById("PrintError").getAttribute("class");
|
||||
let newClass = classAtr.replace("mui-hidden", "");
|
||||
document.getElementById("PrintError").setAttribute("class", newClass);
|
||||
}
|
||||
}, 'json');
|
||||
return false;
|
||||
}
|
||||
|
||||
function openUrl(url, title) {
|
||||
mui.openWindow({
|
||||
url: url,
|
||||
id: encodeURI(url),
|
||||
styles: {}
|
||||
});
|
||||
}
|
||||
|
||||
mui('body').on("tap", 'a', function(e) {
|
||||
console.log(e.target);
|
||||
var url = e.target.href;
|
||||
var title = e.target.innerHTML;
|
||||
console.log(url);
|
||||
console.log(title);
|
||||
openUrl(url, title);
|
||||
});
|
||||
Reference in New Issue
Block a user