1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.         <title></title>
  7.         <script src="js/mui.min.js"></script>
  8.         <link href="css/mui.min.css" rel="stylesheet" />
  9.         <script src="js/myStroage.js" type="text/javascript" charset="utf-8"></script>
  10.         <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  11.         <script src="js/myUtils.js" type="text/javascript" charset="utf-8"></script>
  12.         <script src="js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
  13.         <script src="js/canvas2image.js" type="text/javascript" charset="utf-8"></script>
  14.     </head>
  15.     <body>
  16.         <!-- 主界面菜单同时移动 -->
  17.         <!-- 侧滑导航根容器 -->
  18.         <div class="mui-off-canvas-wrap mui-draggable">
  19.             <!-- 主页面容器 -->
  20.             <div class="mui-inner-wrap">
  21.                 <!-- 菜单容器 -->
  22.                 <aside class="mui-off-canvas-left" id="offCanvasSide">
  23.                     <div class="mui-scroll-wrapper">
  24.                         <div class="mui-scroll">
  25.                             <!-- 菜单具体展示内容 -->
  26.                             <ul class="mui-table-view">
  27.                                 <li class="mui-table-view-cell">
  28.                                     <a class="mui-navigate-right" href="htmls/addBill.html">
  29.                                         新建账单
  30.                                     </a>
  31.                                 </li>
  32.                                 <li class="mui-table-view-cell">
  33.                                     <a class="mui-navigate-right" href="htmls/billsList.html">
  34.                                         账单列表
  35.                                     </a>
  36.                                 </li>
  37.                                 <li class="mui-table-view-cell">
  38.                                     <a class="mui-navigate-right" href="htmls/charts.html">
  39.                                         统计图表
  40.                                     </a>
  41.                                 </li>
  42.                                 <li class="mui-table-view-cell">
  43.                                     <a class="mui-navigate-right" href="htmls/settings.html">
  44.                                         设置
  45.                                     </a>
  46.                                 </li>
  47.                             </ul>
  48.                         </div>
  49.                     </div>
  50.                 </aside>
  51.                 <!-- 主页面标题 -->
  52.                 <header class="mui-bar mui-bar-nav">
  53.                     <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
  54.                     <h1 class="mui-title">今天的账单</h1>
  55.                 </header>
  56.                 <!-- 主页面内容容器 -->
  57.                 <div class="mui-content mui-scroll-wrapper">
  58.                     <div class="mui-scroll">
  59.                         <div id="ul_bills">
  60.                             <div id="dv_totle" style="background-color: #FFFFFF;padding: 5px 10px;">
  61.                                 <h4>合计：{{totleNum}}件，{{amount}}元</h4>
  62.                                 <p>剩余金额{{balance}}元，日期：{{billDate}}</p>
  63.                             </div>
  64.                             <!-- 主界面具体展示内容 -->
  65.                             <ul class="mui-table-view">
  66.                                 <li class="mui-table-view-cell" v-for="(item,index) in bills">
  67.  
  68.                                     <div class="mui-slider-right mui-disabled">
  69.                                         <a class="mui-btn mui-btn-red" v-on:tap="deleItem(item,$event)">删除</a>
  70.                                         <a class="mui-btn mui-btn-green" v-on:tap="edit(item,$event)">编辑</a>
  71.                                     </div>
  72.                                     <div class="mui-slider-handle">
  73.                                         <div class="mui-pull-left" style="margin-right: 7px;padding-top: 10px;">
  74.                                             <h2 style="color: #6D6D72;">{{index+1}}</h2>
  75.                                         </div>
  76.                                         <div class="mui-pull-left" style="border-left: 1px dashed #000000; padding-left: 5px;">
  77.                                             <p>{{item.id}}</p>
  78.                                             <p>市场:{{item.market}} 档口号:{{item.shop}}</p>
  79.                                             <p>款号-名称:{{item.productNoName}}</p>
  80.                                             <p style="font-size: 16px;color: #000000;">{{item.productNumber}}件*{{item.price}}元={{item.productNumber * item.price}}元</p>
  81.                                         </div>
  82.                                     </div>
  83.                                 </li>
  84.                             </ul>
  85.                         </div>
  86.                         <div id="footer" style="padding: 10px 0;">
  87.                             <button id="capture" type="button" class="mui-btn mui-btn-blue mui-btn-block">账单截图</button>
  88.                         </div>
  89.                     </div>
  90.                 </div>
  91.                 <div class="mui-off-canvas-backdrop"></div>
  92.             </div>
  93.         </div>
  94.     </body>
  95. </html>
  96. <script type="text/javascript" charset="utf-8">
  97.     window.addEventListener('refresh', function(e) {
  98.         // location.reload();
  99.         if (e.detail.action == 'editBalance') {
  100.             location.reload();
  101.         } else {
  102.             console.log('do nothing');
  103.         }
  104.     });
  105.     mui.init();
  106.     initDate(); //初始化数据
  107.     mui('.mui-scroll-wrapper').scroll({
  108.         deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  109.     });
  110.  
  111.     var date = new Date().toLocaleDateString();
  112.  
  113.     // 从canvas提取图片image
  114.     function convertCanvasToImage(canvas, h, w) {
  115.         //新Image对象,可以理解为DOM;
  116.         var image = new Image();
  117.         image.height = h;
  118.         image.width = w;
  119.         //canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
  120.         //指定格式PNG
  121.         image.src = canvas.toDataURL("image/png");
  122.         return image;
  123.     }
  124.  
  125.     // 保存图片到相册中
  126.     function savePicture(dataUrl) {
  127.         var b = new plus.nativeObj.Bitmap('bitblmap');
  128.         plus.nativeUI.closeWaiting();
  129.         b.loadBase64Data(dataUrl, function() {
  130.             //保存到手机的文件名
  131.             var fileName = "untitled.png";
  132.             /*这里一定要是_doc目录*/
  133.             b.save("_doc/" + fileName, {
  134.                 overwrite: true
  135.             }, function(object) {
  136.                 //保存到相册
  137.                 plus.gallery.save("_doc/" + fileName, function() {
  138.                     mui.toast("图片已保存到相册");
  139.                 }, function() {
  140.                     mui.toast("图片保存失败");
  141.                 });
  142.             }, function() {
  143.                 mui.toast("图片保存失败");
  144.             });
  145.         }, function() {
  146.             mui.toast("图片保存失败");
  147.         });
  148.     }
  149.     mui.plusReady(function() {
  150.         //截图
  151.         document.getElementById('capture').addEventListener('tap', function() {
  152.             plus.nativeUI.showWaiting('截图中，请稍等...');
  153.             html2canvas(document.querySelector("#ul_bills"), {
  154.                 scale: 2,
  155.                 logging: false
  156.             }).then(canvas => {
  157.                 //downLoadImage(canvas,'JoJo')
  158.                 //mui.toast('截图成功');
  159.                 var w = document.querySelector("#ul_bills").offsetWidth;
  160.                 var h = document.querySelector("#ul_bills").offsetHeight;
  161.  
  162.                 console.log('w:' + w);
  163.                 console.log('h:' + h);
  164.                 var img = convertCanvasToImage(canvas, h, w);
  165.                 var dataUrl = img.src;
  166.                 //console.log(dataUrl);
  167.                 savePicture(dataUrl)
  168.                 //document.getElementById('ul_bills').appendChild(img)
  169.             });
  170.             // });
  171.         })
  172.         /**
  173.          * 分享操作
  174.          * @param {plus.share.ShareService} s
  175.          */
  176.         function shareWeixinMessage() {
  177.             sweixin.send({
  178.                 type: 'image',
  179.                 pictures: ["_www/superMan.jpg"],
  180.                 extra: {
  181.                     scene: "WXSceneSession"
  182.                 }
  183.             }, function() {
  184.                 mui.toast("分享成功！");
  185.             }, function(e) {
  186.                 mui.toast("分享失败：" + e.message);
  187.             });
  188.         }
  189.  
  190.         //console.log(JSON.stringify(getBills()));
  191.         var appBills = new Vue({
  192.             el: '#ul_bills',
  193.             data: {
  194.                 bills: [],
  195.                 totleNum: 0,
  196.                 amount: 0,
  197.                 balance: 0,
  198.                 billDate: date
  199.             },
  200.             methods: {
  201.                 deleItem: function(item, elem) {
  202.                     var element = elem.srcElement;
  203.                     var li = element.parentNode.parentNode;
  204.                     mui.confirm('确定要删除吗？', '提示', ['取消', '确认'], function(e) {
  205.                         if (1 == e.index) {
  206.                             var url_del = LIULURONG.url + '/api/billitem/delete'
  207.                             mui.post(url_del, {
  208.                                 id: item.id
  209.                             }, function(data) {
  210.                                 // var index = appBills.bills.indexOf(item);
  211.                                 // appBills.bills.splice(index, 1);
  212.                                 if (data.code == 200) {
  213.                                     initData();
  214.                                 } else {
  215.                                     mui.toast('服务器异常')
  216.                                 }
  217.                             }, 'json');
  218.                             mui.swipeoutClose(li);
  219.                         } else {
  220.                             mui.swipeoutClose(li);
  221.                         }
  222.                     }, 'div')
  223.                 },
  224.                 edit: function(item, elem) {
  225.                     var element = elem.srcElement;
  226.                     var li = element.parentNode.parentNode;
  227.                     // console.log(JSON.stringify(item));
  228.                     mui.openWindow('htmls/editBillItem.html', 'htmls/editBillItem.html', {
  229.                         extras: {
  230.                             billitem: item
  231.                         }
  232.                     })
  233.                     mui.swipeoutClose(li);
  234.                 }
  235.             }
  236.         })
  237.  
  238.         //初始化页面数据
  239.         function initData() {
  240.             var url = LIULURONG.url + '/api/billitem/GetbyDate';
  241.             console.log(url);
  242.             mui.get(url, {"dateTime":date}, function(data) {
  243.                 appBills.bills = data.billItems;
  244.                 appBills.totleNum = data.totleNum;
  245.                 appBills.amount = data.amount;
  246.             }, 'json');
  247.         }
  248.         initData();
  249.  
  250.         //菜单跳转
  251.         mui('.mui-table-view').on('tap', 'a', function() {
  252.             var strHref = this.getAttribute('href');
  253.             if (strHref == null || strHref == undefined) {
  254.                 return;
  255.             }
  256.             mui.openWindow(strHref, strHref);
  257.  
  258.             setTimeout(function() {
  259.                 mui('.mui-off-canvas-wrap').offCanvas('close');
  260.             }, 500);
  261.         })
  262.     })
  263. </script>
  1. <!doctype html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title></title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link href="../css/mui.css" rel="stylesheet" />
  9.         <link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
  10.         <link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
  11.         <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
  12.         <script src="../js/myStroage.js" type="text/javascript" charset="utf-8"></script>
  13.         <script src="../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  14.         <script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  15.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  16.     </head>
  17.  
  18.     <body>
  19.         <header class="mui-bar mui-bar-nav">
  20.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  21.             <h1 class="mui-title">新建账单</h1>
  22.         </header>
  23.         <div class="mui-content">
  24.             <div id="dvBalance">
  25.                 <button id='showMarketPicker' class="mui-btn mui-btn-block" type='button'>南城</button>
  26.                 <p style="padding:0 10px;">剩余金额:{{msg}}</p>
  27.             </div>
  28.             <form class="mui-input-group">
  29.                 <div class="mui-input-row">
  30.                     <label>档口号</label>
  31.                     <input id="addr" type="number" class="mui-input-clear" placeholder="档口名称">
  32.                 </div>
  33.  
  34.                 <div class="mui-input-row">
  35.                     <label>名称-款号</label>
  36.                     <input id="name" type="text" class="mui-input-clear" placeholder="请输入商品名称">
  37.                 </div>
  38.  
  39.                 <div class="mui-input-row">
  40.                     <label>单价</label>
  41.                     <input id="price" type="number" class="mui-input-clear" placeholder="请输入商品单价">
  42.                 </div>
  43.  
  44.                 <div class="mui-input-row">
  45.                     <label>数量</label>
  46.                     <input id="num" type="number" class="mui-input-clear" placeholder="请输入数量">
  47.                 </div>
  48.  
  49.             </form>
  50.             <button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btnAddContinue">继续添加【同档口】</button>
  51.             <button type="button" class="mui-btn mui-btn-green mui-btn-block" id="btnSave">继续添加【不同档口】</button>
  52.         </div>
  53.     </body>
  54.  
  55. </html>
  56. <script type="text/javascript">
  57.     mui.init({});
  58.     var strDate = new Date().toLocaleDateString();
  59.     var market = '南城';
  60.     var balance = 0;
  61.     mui.plusReady(function() {
  62.         balance = getBalance();
  63.         var vBalance = new Vue({
  64.             el: '#dvBalance',
  65.             data: {
  66.                 msg: balance
  67.             }
  68.         })
  69.         var billData = null;
  70.         mui('.mui-title')[0].innerHTML = mui('.mui-title')[0].innerHTML + "(" + strDate + ")"
  71.  
  72.         var url = LIULURONG.url + '/api/billitem';
  73.         //继续添加【不同档口】
  74.         document.getElementById('btnSave').addEventListener('tap', function() {
  75.             mui.post(url, getBillData(), function(data) {
  76.                 //清空表单信息
  77.                 document.getElementById('addr').value = '';
  78.                 document.getElementById('name').value = '';
  79.                 document.getElementById('price').value = '';
  80.                 document.getElementById('num').value = '';
  81.                 mui.toast('添加成功，请继续添加！');
  82.                 reloadIndexView();
  83.             }, 'json');
  84.         })
  85.  
  86.         //继续添加【同档口】
  87.         document.getElementById('btnAddContinue').addEventListener('tap', function() {
  88.             mui.post(url, getBillData(), function(data) {
  89.                 //清空表单信息
  90.                 document.getElementById('name').value = '';
  91.                 document.getElementById('price').value = '';
  92.                 document.getElementById('num').value = '';
  93.                 mui.toast('添加成功，请继续添加！');
  94.                 reloadIndexView();
  95.             }, 'json');
  96.         })
  97.  
  98.         function reloadIndexView() {
  99.             var parentView = plus.webview.currentWebview().opener();
  100.             mui.fire(parentView, 'refresh', {
  101.                 'action': 'editBalance'
  102.             });
  103.             return true;
  104.         }
  105.  
  106.         //弹出选择框
  107.         document.getElementById('showMarketPicker').addEventListener('tap', function() {
  108.             var btnSelect = this;
  109.             var marketPicker = new mui.PopPicker();
  110.             marketPicker.setData([{
  111.                     value: 'nc',
  112.                     text: '南城'
  113.                 },
  114.                 {
  115.                     value: 'wj',
  116.                     text: '万佳'
  117.                 }
  118.             ]);
  119.             marketPicker.show(function(seleItem) {
  120.                 console.log(seleItem[0].value);
  121.                 btnSelect.innerText = seleItem[0].text;
  122.                 market = seleItem[0].text;
  123.             })
  124.         })
  125.     })
  126.  
  127.     //(addr, name, pirce, num, amount, date)
  128.     function getBillData() {
  129.         var market = document.getElementById('showMarketPicker').innerText;
  130.         var index = market.indexOf('-') + 1;
  131.         market = market.substr(index);
  132.  
  133.         var addr = document.getElementById('addr').value;
  134.         var name = document.getElementById('name').value;
  135.         var price = document.getElementById('price').value;
  136.         var num = document.getElementById('num').value;
  137.         var b = new bill(market, addr, name, price, num, );
  138.         console.log(JSON.stringify(b));
  139.         return b;
  140.     }
  141. </script>
  1. <!doctype html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title></title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link href="../css/mui.css" rel="stylesheet" />
  9.         <link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
  10.         <link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
  11.         <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
  12.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  13.         <script src="../js/myStroage.js" type="text/javascript" charset="utf-8"></script>
  14.         <script src="../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  15.         <script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  16.     </head>
  17.     <body>
  18.         <header class="mui-bar mui-bar-nav">
  19.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  20.             <h1 class="mui-title">账单列表</h1>
  21.         </header>
  22.         <div class="mui-content">
  23.             <div class="mui-scroll-wrapper" style="padding-top: 50px;">
  24.                 <div class="mui-scroll">
  25.                     <div id="dv_bills">
  26.                         <div id="dv_search">
  27.                             <button id='showDatePicker' class="mui-btn mui-btn-block" type='button'>请选择日期</button>
  28.                         </div>
  29.  
  30.                         <ul class="mui-table-view">
  31.                             <li class="mui-table-view-cell" v-for="(item,index) in bills">
  32.  
  33.                                 <div class="mui-slider-right mui-disabled">
  34.                                     <a class="mui-btn mui-btn-red" v-on:tap="deleItem(item,$event)">删除</a>
  35.                                 </div>
  36.                                 <div class="mui-slider-handle">
  37.                                     <div class="mui-pull-left" style="margin-right: 7px;padding-top: 10px;">
  38.                                         <h2 style="color: #6D6D72;">{{index+1}}</h2>
  39.                                     </div>
  40.                                     <div class="mui-pull-left" style="border-left: 1px dashed #000000; padding-left: 5px;">
  41.                                         <p>{{item.id}}</p>
  42.                                         <p>日期:{{item.creationDate}}</p>
  43.                                         <p>市场:{{item.market}} 档口号:{{item.shop}}</p>
  44.                                         <p>款号-名称:{{item.productNoName}}</p>
  45.                                         <p style="font-size: 16px;color: #000000;">{{item.productNumber}}件*{{item.price}}元={{item.productNumber * item.price}}元</p>
  46.                                     </div>
  47.                                 </div>
  48.                             </li>
  49.                         </ul>
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.  
  54.         </div>
  55.     </body>
  56.  
  57. </html>
  58. <script type="text/javascript">
  59.     mui.init()
  60.     mui('.mui-scroll-wrapper').scroll({
  61.         deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  62.     })
  63.  
  64.     mui.plusReady(function() {
  65.         //初始化当天时间
  66.         var dDate = new Date();
  67.         dDate.setFullYear(dDate.getFullYear(), dDate.getMonth(), dDate.getDate());
  68.         document.getElementById('showDatePicker').innerText = dDate.getFullYear() + "-" + (dDate.getMonth() + 1) + "-" + dDate.getDate();
  69.  
  70.         console.log(dDate);
  71.         var billsData = {};
  72.         var appBills = new Vue({
  73.             el: '#dv_bills',
  74.             data: {
  75.                 'bills': billsData
  76.             }
  77.         });
  78.  
  79.         //初始化页面数据
  80.         function initData() {
  81.             var url = LIULURONG.url + '/api/billitem';
  82.             mui.get(url, {}, function(resp) {
  83.                 appBills.bills = resp.billItems;
  84.             }, 'json');
  85.         }
  86.  
  87.         function getDataByDate(datetime) {
  88.             plus.nativeUI.showWaiting();
  89.             var url = LIULURONG.url + '/api/billitem/GetbyDate';
  90.             console.log(datetime);
  91.             mui.get(url, {
  92.                 "dateTime": datetime
  93.             }, function(resp) {
  94.                 console.log(JSON.stringify(resp));
  95.                 appBills.bills = resp.billItems;
  96.                 plus.nativeUI.closeWaiting();
  97.             }, 'json');
  98.         }
  99.         initData();
  100.  
  101.         //弹出选择框
  102.         document.getElementById('showDatePicker').addEventListener('tap', function() {
  103.             var btnSelect = this;
  104.  
  105.             plus.nativeUI.pickDate(function(e) {
  106.                 var d = e.date;
  107.                 btnSelect.innerText = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
  108.                 //重新加载数据
  109.  
  110.                 getDataByDate(d.toJSON());
  111.             }, function(e) {
  112.                 btnSelect.innerText = "您没有选择日期";
  113.             }, {
  114.                 title: "请选择日期",
  115.                 date: dDate,
  116.             });
  117.         })
  118.     })
  119. </script>
  1. <!doctype html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title></title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link href="../css/mui.css" rel="stylesheet" />
  9.         <link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
  10.         <link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
  11.         <script src="../js/mui.js"></script>
  12.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  13.         <script src="../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  14.         <script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  15.         <script src="../js/myStroage.js" type="text/javascript" charset="utf-8"></script>
  16.     </head>
  17.  
  18.     <body>
  19.         <header class="mui-bar mui-bar-nav">
  20.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  21.             <h1 class="mui-title">修改账单信息</h1>
  22.         </header>
  23.         <div class="mui-content">
  24.             <div id="dv_billItemEdit">
  25.                 <div id="dvBalance">
  26.                     <button id='showMarketPicker' class="mui-btn mui-btn-block" type='button'>{{market}}</button>
  27.                 </div>
  28.                 <form class="mui-input-group">
  29.                     <div class="mui-input-row">
  30.                         <label>档口号</label>
  31.                         <input id="addr" type="number" class="mui-input-clear" v-model="shop" placeholder="档口名称">
  32.                     </div>
  33.                     <div class="mui-input-row">
  34.                         <label>名称-款号</label>
  35.                         <input id="name" type="text" class="mui-input-clear" v-model="productNoName" placeholder="请输入商品名称">
  36.                     </div>
  37.                     <div class="mui-input-row">
  38.                         <label>单价</label>
  39.                         <input id="price" type="number" class="mui-input-clear" v-model="price" placeholder="请输入商品单价">
  40.                     </div>
  41.  
  42.                     <div class="mui-input-row">
  43.                         <label>数量</label>
  44.                         <input id="num" type="number" class="mui-input-clear" v-model="productNumber" placeholder="请输入数量">
  45.                     </div>
  46.                 </form>
  47.                 <button type="button" class="mui-btn mui-btn-blue mui-btn-block" v-on:tap="edit()">确定</button>
  48.             </div>
  49.         </div>
  50.     </body>
  51.  
  52. </html>
  53. <script type="text/javascript">
  54.     mui.init()
  55.     mui.plusReady(function() {
  56.         var currentView = plus.webview.currentWebview();
  57.         var bill = currentView.billitem;
  58.         var url_edit = LIULURONG.url + "/api/billitem/edit";
  59.         var vm = new Vue({
  60.             el: '#dv_billItemEdit',
  61.             data: bill,
  62.             methods: {
  63.                 edit: function() {
  64.                     console.log(JSON.stringify(vm.$data));
  65.                     vm.$data.market = document.getElementById('showMarketPicker').innerText;
  66.                     mui.post(url_edit, vm.$data, function(resp) {
  67.                         if (resp.code == 200) {
  68.                             mui.toast('修改成功');
  69.                             reloadIndexView();
  70.                         } else {
  71.                             mui.toast('修改失败');
  72.                         }
  73.                     }, 'json');
  74.                 }
  75.             }
  76.         })
  77.  
  78.         function reloadIndexView() {
  79.             var parentView = plus.webview.currentWebview().opener();
  80.             mui.fire(parentView, 'refresh', {
  81.                 'action': 'editBalance'
  82.             });
  83.             return true;
  84.         }
  85.  
  86.         //弹出选择框
  87.         document.getElementById('showMarketPicker').addEventListener('tap', function() {
  88.             var btnSelect = this;
  89.             var marketPicker = new mui.PopPicker();
  90.             marketPicker.setData([{
  91.                     value: 'nc',
  92.                     text: '南城'
  93.                 },
  94.                 {
  95.                     value: 'wj',
  96.                     text: '万佳'
  97.                 }
  98.             ]);
  99.             marketPicker.show(function(seleItem) {
  100.                 btnSelect.innerText = seleItem[0].text;
  101.                 market = seleItem[0].text;
  102.             })
  103.         })
  104.  
  105.     })
  106. </script>
  1. <!doctype html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title></title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <link href="../css/mui.css" rel="stylesheet" />
  9.         <script src="../js/mui.js"></script>
  10.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  11.     </head>
  12.  
  13.     <body>
  14.         <header class="mui-bar mui-bar-nav">
  15.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  16.             <h1 class="mui-title">金额设置</h1>
  17.         </header>
  18.         <div class="mui-content" id="dvBalance">
  19.             <div style="margin-top: 8px;background-color: #FFFFFF; padding: 5px 0;">
  20.                 <p>剩余金额</p>
  21.                 <div class="mui-input-row">
  22.                     <input disabled="disabled" id="numBalance" type="text" class="mui-input-clear" v-model="msg">
  23.                 </div>
  24.             </div>
  25.  
  26.             <div style="margin-top: 8px;background-color: #FFFFFF; padding: 5px 0;">
  27.                 <p>增加金额</p>
  28.                 <input id="numAdd" type="number" class="mui-input-clear" placeholder="请输入增加金额">
  29.                 <button do='add' type="button" class="mui-btn mui-btn-green mui-btn-block" style="padding: 8px 0; margin: 5px 0;">确定</button>
  30.             </div>
  31.  
  32.             <div style="margin-top: 8px;background-color: #FFFFFF; padding: 5px 0;">
  33.                 <p>减少金额</p>
  34.                 <input id='numSub' type="number" class="mui-input-clear" placeholder="请输入减少金额">
  35.                 <button do='sub' type="button" class="mui-btn mui-btn-red mui-btn-block" style="padding: 8px 0; margin: 5px 0;">确定</button>
  36.             </div>
  37.  
  38.         </div>
  39.         <div style="margin-top: 8px;background-color: #FFFFFF; padding: 5px 0;">
  40.             <button type="button" class="mui-btn mui-btn-yellow mui-btn-block" id="btnReset">重置金额</button>
  41.         </div>
  42.     </body>
  43.  
  44. </html>
  45. <script type="text/javascript">
  46.     mui.init({
  47.         beforeback: function(e) {
  48.             var indexView = plus.webview.currentWebview().opener().opener();
  49.             mui.fire(indexView,'refresh',{'action':'editBalance'})
  50.         }
  51.     })
  52.     var balance = 0;
  53.     //console.log(plus.webview.currentWebview().opener().id);
  54.  
  55.     mui.plusReady(function() {
  56.         //初始化剩余金额
  57.         balance = plus.storage.getItem('balance');
  58.         if (balance == null) {
  59.             plus.storage.setItem('balance', '0');
  60.             balance = 0;
  61.         }
  62.         var vBalance = new Vue({
  63.             el: '#dvBalance',
  64.             data: {
  65.                 msg: balance
  66.             }
  67.         })
  68.  
  69.         //增加减少金额
  70.         mui('.mui-content').on('tap', 'button', function() {
  71.             var action = this.getAttribute('do');
  72.             var num = this.parentNode.children[1].value;
  73.             if (action == 'add') {
  74.                 balance = parseFloat(balance) + parseFloat(num);
  75.             } else {
  76.                 balance = parseFloat(balance) - parseFloat(num);
  77.             }
  78.             mui.toast('修改成功：余额' + balance);
  79.             this.parentNode.children[1].value = '';
  80.             document.activeElement.blur();
  81.             plus.storage.setItem('balance', balance.toString());
  82.  
  83.             //var b2 = plus.storage.getItem('balance');
  84.             vBalance.$data.msg = balance;
  85.             plus.webview.currentWebview().opener().opener().reload();
  86.         })
  87.  
  88.         //重置金额
  89.         document.getElementById('btnReset').addEventListener('tap', function() {
  90.             mui.confirm('确定要重置金额吗？', '提示', ['取消', '确认'], function(e) {
  91.                 if (e.index == 1) {
  92.                     plus.storage.setItem('balance', '0');
  93.                     balance = 0;
  94.                     vBalance.$data.msg = balance;
  95.                     plus.webview.currentWebview().opener().opener().reload();
  96.                     mui.toast('初始金额：0')
  97.                 } else {
  98.                     mui.toast('你取消了重置！')
  99.                 }
  100.             }, 'div')
  101.  
  102.         })
  103.     })
  104. </script>

MUI使用vue示例的更多相关文章

  1. 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

    一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...

  2. 第一个vue示例-高仿微信

    这时我学习vue写的第一个demo,因为以前学过angular,所以这次看vue的时候是先写demo,在写的过程中遇到不会的在看书的方式学习的,因为是针对性学习,所以可以快速的对vue有个大概的认识, ...

  3. mui打包vue项目

    1,新建app项目,打包vue,修改config/index.js的输出路径 2,把build打包后的dist目录下的文件拷到app目录下 3.修改app下面的index文件,改变压缩格式,修改“/s ...

  4. axios的post请求方法---以Vue示例

    Axios向后端提交数据的参数格式是json,而并非用的是form传参,post表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使 ...

  5. Vue示例教程

    <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...

  6. VUE2.0 饿了吗视频学习笔记(一)：VUE示例data.json

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "selle ...

  7. hbuilder mui html vue ul li 自定义循环赋值ID

    <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view ...

  8. Vue Router的官方示例改造

    基于Vue Router 2018年8月的官方文档示例,改造一下,通过一个最简单的例子,解决很多初学者的一个困惑. 首先是官方文档示例代码 <!DOCTYPE html> <html ...

  9. MUI开发记录

    最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器 安卓模拟器有很多,我这里以夜神模 ...

随机推荐

  1. 关于Unity3D中函数说明

    Camera.SetReplacementShader(Shader shader , String replacementTag); 说明: 根据replacementTag设置以后的相机渲染用哪个 ...

  2. ssm下使用分页插件PageHelper进行分页

    1. 导入maven依赖: <dependency> <groupId>com.github.pagehelper</groupId> <artifactId ...

  3. SSL和TLS漏洞验证

    工具下载:git clone https://github.com/drwetter/testssl.sh.git 实验环境:192.168.1.22(bee-box v1.6) 192.168.1. ...

  4. CentOS7-Minimal安装MySQL服务

    CentOS7默认安装的是Mariadb而不是mysql,而Mariadb是mysql的一个分支, 安装mysql会覆盖Mariadb 一.下载MySQL官方的 Yum Repository [roo ...

  5. 连接 MySQL 报错：Lost connection to MySQL server at 'reading authorization packet', system error: 34

    报错信息: Lost connection to MySQL server at 解决方案: use mysql; ; flush privileges; 参考: https://blog.csdn. ...

  6. 「题解」：[组合数学][DP]：地精部落

    拿到这道题秒懂题意:波动序列. 然鹅不会打.想了一节课,想打纯组合数学,结果找不到规律. 想的是先假设拍出一个序列,然后交换其中的元素求组合, 无奈没啥规律可循,显然不能一口气求出来(我说的是我没办法 ...

  7. Flask从入门到入土

    一.flask介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对 ...

  8. Bean容器的初始化

    Bean容器的初始化

  9. Js中的onblur和onfocus事件应用介绍

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失 ...

  10. Android之AbsoluteLayout(绝对布局)

    1.属性简介 为了适配不同机型,绝对布局使用很少! android:layout_x="50dp" android:layout_y="100dp"也只有在Ab ...