<!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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/myStroage.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/myUtils.js" type="text/javascript" charset="utf-8"></script>
<script src="js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
<script src="js/canvas2image.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="htmls/addBill.html">
新建账单
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="htmls/billsList.html">
账单列表
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="htmls/charts.html">
统计图表
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="htmls/settings.html">
设置
</a>
</li>
</ul>
</div>
</div>
</aside>
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
<h1 class="mui-title">今天的账单</h1>
</header>
<!-- 主页面内容容器 -->
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="ul_bills">
<div id="dv_totle" style="background-color: #FFFFFF;padding: 5px 10px;">
<h4>合计:{{totleNum}}件,{{amount}}元</h4>
<p>剩余金额{{balance}}元,日期:{{billDate}}</p>
</div>
<!-- 主界面具体展示内容 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell" v-for="(item,index) in bills"> <div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-red" v-on:tap="deleItem(item,$event)">删除</a>
<a class="mui-btn mui-btn-green" v-on:tap="edit(item,$event)">编辑</a>
</div>
<div class="mui-slider-handle">
<div class="mui-pull-left" style="margin-right: 7px;padding-top: 10px;">
<h2 style="color: #6D6D72;">{{index+1}}</h2>
</div>
<div class="mui-pull-left" style="border-left: 1px dashed #000000; padding-left: 5px;">
<p>{{item.id}}</p>
<p>市场:{{item.market}} 档口号:{{item.shop}}</p>
<p>款号-名称:{{item.productNoName}}</p>
<p style="font-size: 16px;color: #000000;">{{item.productNumber}}件*{{item.price}}元={{item.productNumber * item.price}}元</p>
</div>
</div>
</li>
</ul>
</div>
<div id="footer" style="padding: 10px 0;">
<button id="capture" type="button" class="mui-btn mui-btn-blue mui-btn-block">账单截图</button>
</div>
</div>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript" charset="utf-8">
window.addEventListener('refresh', function(e) {
// location.reload();
if (e.detail.action == 'editBalance') {
location.reload();
} else {
console.log('do nothing');
}
});
mui.init();
initDate(); //初始化数据
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
}); var date = new Date().toLocaleDateString(); // 从canvas提取图片image
function convertCanvasToImage(canvas, h, w) {
//新Image对象,可以理解为DOM;
var image = new Image();
image.height = h;
image.width = w;
//canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
//指定格式PNG
image.src = canvas.toDataURL("image/png");
return image;
} // 保存图片到相册中
function savePicture(dataUrl) {
var b = new plus.nativeObj.Bitmap('bitblmap');
plus.nativeUI.closeWaiting();
b.loadBase64Data(dataUrl, function() {
//保存到手机的文件名
var fileName = "untitled.png";
/*这里一定要是_doc目录*/
b.save("_doc/" + fileName, {
overwrite: true
}, function(object) {
//保存到相册
plus.gallery.save("_doc/" + fileName, function() {
mui.toast("图片已保存到相册");
}, function() {
mui.toast("图片保存失败");
});
}, function() {
mui.toast("图片保存失败");
});
}, function() {
mui.toast("图片保存失败");
});
}
mui.plusReady(function() {
//截图
document.getElementById('capture').addEventListener('tap', function() {
plus.nativeUI.showWaiting('截图中,请稍等...');
html2canvas(document.querySelector("#ul_bills"), {
scale: 2,
logging: false
}).then(canvas => {
//downLoadImage(canvas,'JoJo')
//mui.toast('截图成功');
var w = document.querySelector("#ul_bills").offsetWidth;
var h = document.querySelector("#ul_bills").offsetHeight; console.log('w:' + w);
console.log('h:' + h);
var img = convertCanvasToImage(canvas, h, w);
var dataUrl = img.src;
//console.log(dataUrl);
savePicture(dataUrl)
//document.getElementById('ul_bills').appendChild(img)
});
// });
})
/**
* 分享操作
* @param {plus.share.ShareService} s
*/
function shareWeixinMessage() {
sweixin.send({
type: 'image',
pictures: ["_www/superMan.jpg"],
extra: {
scene: "WXSceneSession"
}
}, function() {
mui.toast("分享成功!");
}, function(e) {
mui.toast("分享失败:" + e.message);
});
} //console.log(JSON.stringify(getBills()));
var appBills = new Vue({
el: '#ul_bills',
data: {
bills: [],
totleNum: 0,
amount: 0,
balance: 0,
billDate: date
},
methods: {
deleItem: function(item, elem) {
var element = elem.srcElement;
var li = element.parentNode.parentNode;
mui.confirm('确定要删除吗?', '提示', ['取消', '确认'], function(e) {
if (1 == e.index) {
var url_del = LIULURONG.url + '/api/billitem/delete'
mui.post(url_del, {
id: item.id
}, function(data) {
// var index = appBills.bills.indexOf(item);
// appBills.bills.splice(index, 1);
if (data.code == 200) {
initData();
} else {
mui.toast('服务器异常')
}
}, 'json');
mui.swipeoutClose(li);
} else {
mui.swipeoutClose(li);
}
}, 'div')
},
edit: function(item, elem) {
var element = elem.srcElement;
var li = element.parentNode.parentNode;
// console.log(JSON.stringify(item));
mui.openWindow('htmls/editBillItem.html', 'htmls/editBillItem.html', {
extras: {
billitem: item
}
})
mui.swipeoutClose(li);
}
}
}) //初始化页面数据
function initData() {
var url = LIULURONG.url + '/api/billitem/GetbyDate';
console.log(url);
mui.get(url, {"dateTime":date}, function(data) {
appBills.bills = data.billItems;
appBills.totleNum = data.totleNum;
appBills.amount = data.amount;
}, 'json');
}
initData(); //菜单跳转
mui('.mui-table-view').on('tap', 'a', function() {
var strHref = this.getAttribute('href');
if (strHref == null || strHref == undefined) {
return;
}
mui.openWindow(strHref, strHref); setTimeout(function() {
mui('.mui-off-canvas-wrap').offCanvas('close');
}, 500);
})
})
</script>
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/myStroage.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head> <body>
<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">新建账单</h1>
</header>
<div class="mui-content">
<div id="dvBalance">
<button id='showMarketPicker' class="mui-btn mui-btn-block" type='button'>南城</button>
<p style="padding:0 10px;">剩余金额:{{msg}}</p>
</div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>档口号</label>
<input id="addr" type="number" class="mui-input-clear" placeholder="档口名称">
</div> <div class="mui-input-row">
<label>名称-款号</label>
<input id="name" type="text" class="mui-input-clear" placeholder="请输入商品名称">
</div> <div class="mui-input-row">
<label>单价</label>
<input id="price" type="number" class="mui-input-clear" placeholder="请输入商品单价">
</div> <div class="mui-input-row">
<label>数量</label>
<input id="num" type="number" class="mui-input-clear" placeholder="请输入数量">
</div> </form>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btnAddContinue">继续添加【同档口】</button>
<button type="button" class="mui-btn mui-btn-green mui-btn-block" id="btnSave">继续添加【不同档口】</button>
</div>
</body> </html>
<script type="text/javascript">
mui.init({});
var strDate = new Date().toLocaleDateString();
var market = '南城';
var balance = 0;
mui.plusReady(function() {
balance = getBalance();
var vBalance = new Vue({
el: '#dvBalance',
data: {
msg: balance
}
})
var billData = null;
mui('.mui-title')[0].innerHTML = mui('.mui-title')[0].innerHTML + "(" + strDate + ")" var url = LIULURONG.url + '/api/billitem';
//继续添加【不同档口】
document.getElementById('btnSave').addEventListener('tap', function() {
mui.post(url, getBillData(), function(data) {
//清空表单信息
document.getElementById('addr').value = '';
document.getElementById('name').value = '';
document.getElementById('price').value = '';
document.getElementById('num').value = '';
mui.toast('添加成功,请继续添加!');
reloadIndexView();
}, 'json');
}) //继续添加【同档口】
document.getElementById('btnAddContinue').addEventListener('tap', function() {
mui.post(url, getBillData(), function(data) {
//清空表单信息
document.getElementById('name').value = '';
document.getElementById('price').value = '';
document.getElementById('num').value = '';
mui.toast('添加成功,请继续添加!');
reloadIndexView();
}, 'json');
}) function reloadIndexView() {
var parentView = plus.webview.currentWebview().opener();
mui.fire(parentView, 'refresh', {
'action': 'editBalance'
});
return true;
} //弹出选择框
document.getElementById('showMarketPicker').addEventListener('tap', function() {
var btnSelect = this;
var marketPicker = new mui.PopPicker();
marketPicker.setData([{
value: 'nc',
text: '南城'
},
{
value: 'wj',
text: '万佳'
}
]);
marketPicker.show(function(seleItem) {
console.log(seleItem[0].value);
btnSelect.innerText = seleItem[0].text;
market = seleItem[0].text;
})
})
}) //(addr, name, pirce, num, amount, date)
function getBillData() {
var market = document.getElementById('showMarketPicker').innerText;
var index = market.indexOf('-') + 1;
market = market.substr(index); var addr = document.getElementById('addr').value;
var name = document.getElementById('name').value;
var price = document.getElementById('price').value;
var num = document.getElementById('num').value;
var b = new bill(market, addr, name, price, num, );
console.log(JSON.stringify(b));
return b;
}
</script>
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/myStroage.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<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">账单列表</h1>
</header>
<div class="mui-content">
<div class="mui-scroll-wrapper" style="padding-top: 50px;">
<div class="mui-scroll">
<div id="dv_bills">
<div id="dv_search">
<button id='showDatePicker' class="mui-btn mui-btn-block" type='button'>请选择日期</button>
</div> <ul class="mui-table-view">
<li class="mui-table-view-cell" v-for="(item,index) in bills"> <div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-red" v-on:tap="deleItem(item,$event)">删除</a>
</div>
<div class="mui-slider-handle">
<div class="mui-pull-left" style="margin-right: 7px;padding-top: 10px;">
<h2 style="color: #6D6D72;">{{index+1}}</h2>
</div>
<div class="mui-pull-left" style="border-left: 1px dashed #000000; padding-left: 5px;">
<p>{{item.id}}</p>
<p>日期:{{item.creationDate}}</p>
<p>市场:{{item.market}} 档口号:{{item.shop}}</p>
<p>款号-名称:{{item.productNoName}}</p>
<p style="font-size: 16px;color: #000000;">{{item.productNumber}}件*{{item.price}}元={{item.productNumber * item.price}}元</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div> </div>
</body> </html>
<script type="text/javascript">
mui.init()
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
}) mui.plusReady(function() {
//初始化当天时间
var dDate = new Date();
dDate.setFullYear(dDate.getFullYear(), dDate.getMonth(), dDate.getDate());
document.getElementById('showDatePicker').innerText = dDate.getFullYear() + "-" + (dDate.getMonth() + 1) + "-" + dDate.getDate(); console.log(dDate);
var billsData = {};
var appBills = new Vue({
el: '#dv_bills',
data: {
'bills': billsData
}
}); //初始化页面数据
function initData() {
var url = LIULURONG.url + '/api/billitem';
mui.get(url, {}, function(resp) {
appBills.bills = resp.billItems;
}, 'json');
} function getDataByDate(datetime) {
plus.nativeUI.showWaiting();
var url = LIULURONG.url + '/api/billitem/GetbyDate';
console.log(datetime);
mui.get(url, {
"dateTime": datetime
}, function(resp) {
console.log(JSON.stringify(resp));
appBills.bills = resp.billItems;
plus.nativeUI.closeWaiting();
}, 'json');
}
initData(); //弹出选择框
document.getElementById('showDatePicker').addEventListener('tap', function() {
var btnSelect = this; plus.nativeUI.pickDate(function(e) {
var d = e.date;
btnSelect.innerText = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
//重新加载数据 getDataByDate(d.toJSON());
}, function(e) {
btnSelect.innerText = "您没有选择日期";
}, {
title: "请选择日期",
date: dDate,
});
})
})
</script>
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
<script src="../js/mui.js"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/myStroage.js" type="text/javascript" charset="utf-8"></script>
</head> <body>
<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">修改账单信息</h1>
</header>
<div class="mui-content">
<div id="dv_billItemEdit">
<div id="dvBalance">
<button id='showMarketPicker' class="mui-btn mui-btn-block" type='button'>{{market}}</button>
</div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>档口号</label>
<input id="addr" type="number" class="mui-input-clear" v-model="shop" placeholder="档口名称">
</div>
<div class="mui-input-row">
<label>名称-款号</label>
<input id="name" type="text" class="mui-input-clear" v-model="productNoName" placeholder="请输入商品名称">
</div>
<div class="mui-input-row">
<label>单价</label>
<input id="price" type="number" class="mui-input-clear" v-model="price" placeholder="请输入商品单价">
</div> <div class="mui-input-row">
<label>数量</label>
<input id="num" type="number" class="mui-input-clear" v-model="productNumber" placeholder="请输入数量">
</div>
</form>
<button type="button" class="mui-btn mui-btn-blue mui-btn-block" v-on:tap="edit()">确定</button>
</div>
</div>
</body> </html>
<script type="text/javascript">
mui.init()
mui.plusReady(function() {
var currentView = plus.webview.currentWebview();
var bill = currentView.billitem;
var url_edit = LIULURONG.url + "/api/billitem/edit";
var vm = new Vue({
el: '#dv_billItemEdit',
data: bill,
methods: {
edit: function() {
console.log(JSON.stringify(vm.$data));
vm.$data.market = document.getElementById('showMarketPicker').innerText;
mui.post(url_edit, vm.$data, function(resp) {
if (resp.code == 200) {
mui.toast('修改成功');
reloadIndexView();
} else {
mui.toast('修改失败');
}
}, 'json');
}
}
}) function reloadIndexView() {
var parentView = plus.webview.currentWebview().opener();
mui.fire(parentView, 'refresh', {
'action': 'editBalance'
});
return true;
} //弹出选择框
document.getElementById('showMarketPicker').addEventListener('tap', function() {
var btnSelect = this;
var marketPicker = new mui.PopPicker();
marketPicker.setData([{
value: 'nc',
text: '南城'
},
{
value: 'wj',
text: '万佳'
}
]);
marketPicker.show(function(seleItem) {
btnSelect.innerText = seleItem[0].text;
market = seleItem[0].text;
})
}) })
</script>
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.css" rel="stylesheet" />
<script src="../js/mui.js"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head> <body>
<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">金额设置</h1>
</header>
<div class="mui-content" id="dvBalance">
<div style="margin-top: 8px;background-color: #FFFFFF; padding: 5px 0;">
<p>剩余金额</p>
<div class="mui-input-row">
<input disabled="disabled" id="numBalance" type="text" class="mui-input-clear" v-model="msg">
</div>
</div> <div style="margin-top: 8px;background-color: #FFFFFF; padding: 5px 0;">
<p>增加金额</p>
<input id="numAdd" type="number" class="mui-input-clear" placeholder="请输入增加金额">
<button do='add' type="button" class="mui-btn mui-btn-green mui-btn-block" style="padding: 8px 0; margin: 5px 0;">确定</button>
</div> <div style="margin-top: 8px;background-color: #FFFFFF; padding: 5px 0;">
<p>减少金额</p>
<input id='numSub' type="number" class="mui-input-clear" placeholder="请输入减少金额">
<button do='sub' type="button" class="mui-btn mui-btn-red mui-btn-block" style="padding: 8px 0; margin: 5px 0;">确定</button>
</div> </div>
<div style="margin-top: 8px;background-color: #FFFFFF; padding: 5px 0;">
<button type="button" class="mui-btn mui-btn-yellow mui-btn-block" id="btnReset">重置金额</button>
</div>
</body> </html>
<script type="text/javascript">
mui.init({
beforeback: function(e) {
var indexView = plus.webview.currentWebview().opener().opener();
mui.fire(indexView,'refresh',{'action':'editBalance'})
}
})
var balance = 0;
//console.log(plus.webview.currentWebview().opener().id); mui.plusReady(function() {
//初始化剩余金额
balance = plus.storage.getItem('balance');
if (balance == null) {
plus.storage.setItem('balance', '0');
balance = 0;
}
var vBalance = new Vue({
el: '#dvBalance',
data: {
msg: balance
}
}) //增加减少金额
mui('.mui-content').on('tap', 'button', function() {
var action = this.getAttribute('do');
var num = this.parentNode.children[1].value;
if (action == 'add') {
balance = parseFloat(balance) + parseFloat(num);
} else {
balance = parseFloat(balance) - parseFloat(num);
}
mui.toast('修改成功:余额' + balance);
this.parentNode.children[1].value = '';
document.activeElement.blur();
plus.storage.setItem('balance', balance.toString()); //var b2 = plus.storage.getItem('balance');
vBalance.$data.msg = balance;
plus.webview.currentWebview().opener().opener().reload();
}) //重置金额
document.getElementById('btnReset').addEventListener('tap', function() {
mui.confirm('确定要重置金额吗?', '提示', ['取消', '确认'], function(e) {
if (e.index == 1) {
plus.storage.setItem('balance', '0');
balance = 0;
vBalance.$data.msg = balance;
plus.webview.currentWebview().opener().opener().reload();
mui.toast('初始金额:0')
} else {
mui.toast('你取消了重置!')
}
}, 'div') })
})
</script>

最新文章

  1. armp启动
  2. python 爬虫
  3. [笔记]一个测试浏览器对html5支持的网站
  4. CentOS安装VMware Tools
  5. Java新手如何学习Spring、Struts、Hibernate三大框架?(转)
  6. Docker镜像压缩
  7. .NET Core开源API网关 – Ocelot中文文档
  8. request redirection
  9. 朴素贝叶斯算法简介及python代码实现分析
  10. HDOJ2032_杨辉三角
  11. OpenCV 无法启动此程序,因为计算机中丢失opencv_core249.dll。请尝试重新安装改程序已解决此问题
  12. uboot移植
  13. python中datetime与string的相互转换
  14. 求组合数的O(n^2)和O(n)解法及模板
  15. [scala] scala 函数 (⑦)
  16. SaltStack salt-ssh 用法
  17. Flask初级(十)flash与前台交互post详解
  18. javac老提示无效的标记
  19. 【Leetcode】【Easy】Climbing Stairs
  20. HttpWebRequest类之基本定义

热门文章

  1. DNS的解析过程
  2. type元类创建类的方法
  3. 没有找到mfc100.dll
  4. VS2010-MFC(对话框:颜色对话框)
  5. 云-腾讯云-云点播:云点播(VOD)
  6. SpringCloud学习笔记(六):Feign+Ribbon负载均衡
  7. 第十三篇:一点一滴学ibatis(二)映射文件
  8. Hive学习详细版
  9. 机器学习-线性回归算法(单变量)Linear Regression with One Variable
  10. js怎样截取字符串后几位以及截取字符串前几位