<!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>