<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/iconfont.css" rel="stylesheet" />
<link href="../css/common.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
<script src="../js/mui.min.js"></script>
<script src="../js/public.js"></script>
<script src="../js/common.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/exif.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="take_order">
<div class="bg-y-ffcc00 padding-10 wxrow">
<div class="flex1 b-333">
运单号：xxxxx
</div>
<div class="wxaround" onclick="clicked('barcode_scan.html',true,true)">
<span class="iconfont icon-saoma g-009999 size18"></span>
</div>
</div>
<div class="bg-w-fff padding-10 margin-t10">
<div class="bold">
地址信息
</div>
<div class='send-view margin-t20'>
<div class='send-tips'>寄</div>
<div class='triangle-left'></div>
<div class='triangle-right'></div>
<div class='import-view' data-type="consigner">
<span class='iconfont icon-daoru margin-r5'></span>
<span class='size12'>导入</span>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxaround size12'>姓名：</div>
<div class='flex2 padding-r10'>
<input type='text' class='send-input consigner-name' v-model="consignerName" placeholder='请输入姓名'></input>
</div>
<div class='wxaround size12'>手机：</div>
<div class='flex3'>
<input type='number' class='send-input consigner-phone' v-model="consignerPhone" placeholder='请输入手机'></input>
</div>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxaround size12'>详细地址：</div>
<div class='flex2 padding-r10'>
<input type='text' class='send-input consigner-address' v-model="consignerAddress" placeholder='请输入详细地址'></input>
</div>
<div class='fix-add wxaround select-address' data-type="consigner-address">
<input type="hidden" class="consigner-address-lng" />
<input type="hidden" class="consigner-address-lat" />
<span class='iconfont icon-dingwei size18'></span>
</div>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxaround size12'>身份证号：</div>
<div class='flex2'>
<input type='text' class='send-input' v-model="consignerIdCard" placeholder='请输入身份证号'></input>
</div>
</div>
</div>
<div class='send-view margin-t30'>
<div class='send-tips collect-tips'>收</div>
<div class='triangle-left collect-triangle-left'></div>
<div class='triangle-right collect-triangle-right'></div>
<div class='import-view' data-type="consignee">
<span class='iconfont icon-daoru margin-r5'></span>
<span class='size12'>导入</span>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxaround size12'>姓名：</div>
<div class='flex2 padding-r10'>
<input type='text' class='send-input consignee-name' v-model="consigneeName" placeholder='请输入姓名'></input>
</div>
<div class='wxaround size12'>手机：</div>
<div class='flex3'>
<input type='number' class='send-input consignee-phone' v-model="consigneePhone" placeholder='请输入手机'></input>
</div>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxaround size12'>详细地址：</div>
<div class='flex2 padding-r10'>
<input type='text' class='send-input consignee-address' v-model="consigneeAddress" placeholder='请输入详细地址'></input>
</div>
<div class='fix-add wxaround select-address' data-type="consignee-address">
<input type="hidden" class="consignee-address-lng" />
<input type="hidden" class="consignee-address-lat" />
<span class='iconfont icon-dingwei size18'></span>
</div>
</div>
</div>
</div>
<div class="bg-w-fff padding-10 margin-t10">
<div class="bold">
物品信息
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxaround width50 size12'>名称</div>
<div class='flex1'>
<input type='text' class='send-input' v-model="goodName" placeholder='请输入名称'></input>
</div>
<div class='wxaround width50 size12'>类型</div>
<div class='flex1 relative'>
<select class="mui-btn send-select">
<option>请选择类型</option>
<option value="item-1">item-1</option>
<option value="item-2">item-2</option>
<option value="item-3">item-3</option>
<option value="item-4">item-4</option>
<option value="item-5">item-5</option>
</select>
<span class="iconfont icon-xiajiantou po-down"></span>
</div>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxaround width50 size12'>重量</div>
<div class='flex1 relative'>
<input type='text' class='send-input' placeholder='请输入重量'></input>
<span class="po-down">kg</span>
</div>
<div class='wxaround width50 size12'>数量</div>
<div class='flex1'>
<input type='text' class='send-input' placeholder='请输入名称'></input>
</div>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxaround width50 size12'>打包费
</div>
<div class='flex1 relative'>
<select class="mui-btn send-select">
<option>请选择类型</option>
<option value="item-1">item-1</option>
<option value="item-2">item-2</option>
<option value="item-3">item-3</option>
<option value="item-4">item-4</option>
<option value="item-5">item-5</option>
</select>
<span class="iconfont icon-xiajiantou po-down"></span>
</div>
<div class='wxaround width50 size12'>保价费</div>
<div class='flex1 relative'>
<input type='text' class='send-input' placeholder='请输入保价费'></input>
<span class="po-down">元</span>
</div>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxaround width50 size12'>备注</div>
<div class='flex1 relative'>
<input type='text' class='send-input' placeholder='请输入备注'></input>
</div>
</div>
</div>
<div class="bg-w-fff padding-10 margin-t10">
<div class="bold">
费用信息
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxcenter width60 size12'>计费模式</div>
<div class='flex1 relative'>
<select class="mui-btn send-select" v-model="billModel">
<option>请选择计费模式</option>
<option value="item-1">计费-1</option>
<option value="item-2">计费-2</option>
<option value="item-3">计费-3</option>
<option value="item-4">item-4</option>
<option value="item-5">item-5</option>
</select>
<span class="iconfont icon-xiajiantou po-down"></span>
</div>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxcenter width60 size12'>关闭月结</div>
<div class='flex1'>
<div class="mui-switch " id="mySwitch">
<div class="mui-switch-handle"></div>
</div>
</div>
</div>
<div class='margin-t20 wxrow b-333'>
<div class='wxcenter width60 size12'>费用总计</div>
<div class='flex1'>
<span class="bold">25.50元</span>
</div>
</div>
</div>
<div class="bg-w-fff padding-10 margin-t10">
<div class="bold">
拍摄照片
</div>
<div class='margin-t10 wxrow img-list'>
<!--<img src="../img/bc-img1.png" class="send-img" />
<img src="../img/ceshi.jpg" class="send-img" />
<img src="../img/head.png" class="send-img" />
<img src="../img/head.png" class="send-img" />
<img src="../img/head.png" class="send-img" />
<img src="../img/head.png" class="send-img" />-->
<!--<img id="showImg" src="../img/head.png" class="send-img" />-->
<div class="send-img add-img" onclick="captureImage()">
<div class="send-img-choose-inside wxaround">
<span class="iconfont icon-tubiao_huabanfuben size20 b-999"></span>
</div>
</div>
</div>
</div>
<div class="padding-10">
<button type="button" class="btn-take">下单</button>
</div>
</div>
<script>
mui.init();
function getDefaultData() {
return {
//寄件人
consignerName: '',
consignerPhone: '',
consignerAddress: '',
consignerIdCard: '',
//收件人
consigneeName: '',
consigneePhone: '',
consigneeAddress: '',
//物品信息
goodName: '',
goodType: '',
goodWeight: '',
goodAmount: '',
goodPack: '',
goodOffer: '',
goodRemark: '',
billModel: ''
}
}
let take_order = new Vue({
el: '#take_order',
data: getDefaultData(),
methods: {
resetData: function() { //重置数据
Object.assign(this.$data, getDefaultData());
}
}
});
function clearView() {
mui.plusReady(function() {
var view = plus.nativeObj.View.getViewById('view');
var view1 = plus.nativeObj.View.getViewById('view1');
if(view) {
view.close();
view1.close();
}
})
}
//导入地址信息
function importInfo(t, n, p, d) {
if(t == 'consigner') {
take_order.consignerName = n;
take_order.consignerPhone = p
take_order.consignerAddress = d;
}
if(t == 'consignee') {
take_order.consigneeName = n;
take_order.consigneePhone = p
take_order.consigneeAddress = d;
}
}
function scaned(t, r, f) {
console.log(t)
console.log(r)
console.log(f)
if(!f || f == 'null') {
img.src = '../img/barcode.png';
} else {
plus.io.resolveLocalFileSystemURL(f, function(entry) {
img.src = entry.toLocalURL();
});
// img.src = 'http://localhost:8020/'+f;
}
}
let maxNum = 9;
let imgTotalNum = 0;
let imgList = null;
// 拍照
function captureImage() {
imgList = ddsd.qsa('.send-img').length - 1;
imgTotalNum = maxNum - imgList;
let bts = [{
title: "拍照",
style: "destructive"
}, {
title: "从相册选择"
}];
plus.nativeUI.actionSheet({
title: "上传拍摄图片",
cancel: "取消",
buttons: bts
},
function(e) {
if(e.index == 1) {
let cmr = plus.camera.getCamera();
cmr.captureImage(function(path) {
plus.io.resolveLocalFileSystemURL(path, function(entry) {
showImg(entry.toLocalURL());
ddsd.qs('.send-img').style.height = ddsd.qs('.add-img').offsetWidth - 2 + 'px';
}, function(e) {
ddsd.toast('读取拍照文件错误：' + e.message);
});
},
function(error) {
ddsd.toast("失败: " + error.message);
}, {
filename: '_doc/camera/',
index: 1
}
);
} else if(e.index == 2) {
plus.gallery.pick(function(e) {
for(var i in e.files) {
showImg(e.files[i]);
}
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image",
multiple: true,
system: false,
maximum: imgTotalNum,
onmaxed: function() {
plus.nativeUI.toast('最多可以选择'+ imgTotalNum +'张图片')
}
});
}
}
);
}
// 添加播放项
function createItem(entry) {
let img = document.createElement('img');
img.className = 'send-img';
img.src = entry.toLocalURL();
ddsd.qs('.img-list').insertBefore(img, ddsd.qs('.img-list').firstChild);
}
var f1 = new Array();
let previewImageList = [];
function showImg(url) {
plus.nativeUI.showWaiting( "加载中..." );
if ((imgList - 1) > 0) {
imgTotalNum = imgTotalNum - (imgList - 1);
}
// 兼容以“file:”开头的情况
if(0 != url.toString().indexOf("file://")) {
url = "file://" + url;
}
var _div_ = ddsd.qs('.img-list');
var _img_ = new Image();
_img_.src = url; // 传过来的图片路径在这里用。
_img_.className = 'send-img';
_img_.onclick = function() {
console.log(f1)
plus.nativeUI.previewImage(previewImageList,{
current:0,
loop:true
});
};
_img_.onload = function() {
var tmph = _img_.height;
var tmpw = _img_.width;
var isHengTu = tmpw > tmph;
var max = Math.max(tmpw, tmph);
var min = Math.min(tmpw, tmph);
var bili = min / max;
if(max > 1200) {
max = 1200;
min = Math.floor(bili * max);
}
tmph = isHengTu ? min : max;
tmpw = isHengTu ? max : min;
_img_.style.height = ddsd.qs('.add-img').offsetWidth - 2 + 'px';
_img_.onload = null;
plus.io.resolveLocalFileSystemURL(url, function(entry) {
entry.file(function(file) {
ddsd.log(file)
canvasResize(file, {
width: tmpw,
height: tmph,
crop: false,
quality: 50, //压缩质量
rotate: 0,
callback: function(data, width, height) {
f1.push(data);
_img_.src = data;
_div_.appendChild(_img_);
previewImageList.push(file.fullPath)
if ((ddsd.qsa('.send-img').length - 1) == 9) {
ddsd.qs('.add-img').style.display = 'none';
}
plus.nativeUI.closeWaiting();
}
});
});
},
function(e) {
plus.nativeUI.closeWaiting();
console.log(e.message);
});
};
};
mui.plusReady(function() {
var img = null;
function update(t, r, f) {
outSet('扫描成功：');
outLine(t);
outLine(r);
outLine('\n图片地址：' + f);
if(!f || f == 'null') {
img.src = '../img/barcode.png';
} else {
plus.io.resolveLocalFileSystemURL(f, function(entry) {
img.src = entry.toLocalURL();
});
//img.src = 'http://localhost:13131/'+f;
}
}
document.getElementById("mySwitch").addEventListener("toggle", function(event) {
if(event.detail.isActive) {
console.log("你启动了开关");
} else {
console.log("你关闭了开关");
}
})
var alist = document.getElementsByClassName("send-img");
if(alist) {
for(var i = 0; i < alist.length; i++) {
alist[i].style.height = alist[i].offsetWidth + "px";;
}
}
//导入发货信息
mui("body").on('tap', '.import-view', function(e) {
var type = this.dataset.type;
var webview = mui.openWindow({
url: 'search_add.html',
id: 'search_add.html',
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
titleNView: { // 窗口的标题栏控件
autoBackButton: true,
titleText: '查询地址', // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
titleSize: "17px", // 字体大小,默认17px
backgroundColor: "#FFCC00", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
}
},
extras: {
type: type
}
});
})
//获取地址信息
mui("body").on('tap', '.select-address', function(e) {
var address = document.querySelector('.' + this.dataset.type).value;
var type = this.dataset.type;
if('Android' === plus.os.name && navigator.userAgent.indexOf('StreamApp') > 0) {
plus.nativeUI.toast('当前环境暂不支持地图插件');
return;
}
var ws = plus.webview.currentWebview();
var wm = plus.webview.getWebviewById(plus.runtime.appid);
wm && wm.evalJS("preateClear()");
var subpage = mui.openWindow({
url: 'maps_map.html',
id: 'maps_map.html',
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
titleNView: { // 窗口的标题栏控件
autoBackButton: true,
titleText: '位置信息', // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
titleSize: "17px", // 字体大小,默认17px
backgroundColor: "#FFCC00", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
}
},
extras: {
address: address,
type: type
}
});
//页面转场的时候清除掉view。
subpage.addEventListener('loaded', function() {
subpage.show('slide-in-right', 200, function() {
view.clear();
view1.clear();
});
});
})
//下单
mui("body").on('tap', '.btn-take', function() {
// if(!take_order.consignerName.Trim()) {
// ddsd.toast('请输入寄件人姓名');
// return false;
// }
// if(!take_order.consignerPhone.Trim()) {
// ddsd.toast('请输入寄件人电话');
// return false;
// }
// if(!take_order.consignerAddress.Trim()) {
// ddsd.toast('请输入寄件人地址');
// return false;
// }
// if(!take_order.consignerIdCard.Trim()) {
// ddsd.toast('请输入寄件人身份证');
// return false;
// }
// if(!take_order.consigneeName.Trim()) {
// ddsd.toast('请输入收件人姓名');
// return false;
// }
// if(!take_order.consigneePhone.Trim()) {
// ddsd.toast('请输入收件人手机');
// return false;
// }
// if(!take_order.consigneeAddress.Trim()) {
// ddsd.toast('请输入收件人地址');
// return false;
// }
console.log(take_order.billModel)
/* mui.openWindow({
url: 'wait_pay.html',
id: 'wait_pay.html',
styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
titleNView: { // 窗口的标题栏控件
autoBackButton: true,
titleText: '等待支付', // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题
titleColor: "#000000", // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
titleSize: "17px", // 字体大小,默认17px
backgroundColor: "#FFCC00", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
}
}
});*/
})
})
function setAddress() {
mui.plusReady(function() {
var addressJson = plus.storage.getItem('addressJson')
var addressData = JSON.parse(addressJson);
document.querySelector('.' + addressData.type).value = addressData.address;
document.querySelector('.' + addressData.type + '-lng').value = addressData.longitude;
document.querySelector('.' + addressData.type + '-lat').value = addressData.latitude;
})
}
</script>
</body> </html>
