今天的账单

合计：{{totleNum}}件，{{amount}}元

剩余金额{{balance}}元，日期：{{billDate}}

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

手机扫一扫

移动阅读更方便

你可能感兴趣的文章

如何使用Java + React计算个人所得税？

前端Vue仿企查查天眼查知识产权标准信息列表组件

前端Vue自定义顶部搜索框热门搜索历史搜索用于搜索跳转使用