| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
- <title>AUI快速完成布局</title>
- <link rel="stylesheet" type="text/css" href="../../css/api.css" />
- <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
- <link rel="stylesheet" type="text/css" href="../../css/html.css" />
- <style type="text/css">
- .text-white {
- color: #ffffff !important;
- }
- .aui-grid [class*=aui-col-] {
- padding: 0.75rem 0;
- }
- .aui-order-number {
- padding: 0.75rem;
- }
- .aui-card-list-user-avatar {
- width: 4rem;
- height: 3rem;
- }
- .aui-card-list-user-name {
- overflow: hidden;
- text-overflow: ellipsis;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- }
- .aui-card-list-user-info {
- text-align: right;
- color: #f00;
- margin-top: 10px;
- }
- .aui-top {
- padding: 7px 2px;
- border-bottom: 1px solid #ddd;
- width: 96%;
- margin-left: 2%;
- }
- .aui-state {
- float: right;
- }
- .aui-top .aui-state {
- color: #f00;
- }
- .aui-top .aui-state, .aui-top .aui-time {
- font-size: 0.6rem;
- }
- #user-info {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 2;
- }
- .top {
- padding-bottom: 1rem;
- }
- .aui-bottom {
- border-top: 1px solid #ddd;
- border-bottom: 0px solid #fff;
- text-align: right;
- }
- .aui-float-right {
- float: right;
- margin-top: 10px;
- }
- .aui-card-list-user-name {
- width: 96%;
- }
- #tab {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- z-index: 2;
- }
- .aui-state-success {
- color: #8ec31f !important;
- }
- .aui-card-list {
- margin-bottom: 0px;
- }
- [v-cloak] {
- display: none
- }
- .zmq-orderCode-img {
- position: absolute;
- margin-left: -1rem;
- }
- </style>
- </head>
- <body>
- <div id="app" v-cloak>
- <section class="aui-content top" >
- <div class="aui-card-list aui-border-t aui-border-b zmq-width-90 zmq-margin-top-10 zmq-radius-10" v-for="(i,index) in list" v-on:click="lookInfo">
- <div class="aui-top">
- <span class="aui-time zmq-text-msg" style="padding-left : 1rem"><img class="zmq-orderCode-img" src="../../image/drawable-xhdpi/jjs.png" />{{i.billType == 1 ? '供应商' : '客户'}} : {{i.operatingPer}}</span>
- <span class="aui-state zmq-btn-border zmq-text-msg zmq-padding-status" class="">{{i.billType == 1 ? '入库单' : '出库单'}}</span>
- </div>
- <div class="aui-card-list-header aui-card-list-user">
- <!--<i class="aui-iconfont aui-icon-right aui-font-size-12 aui-float-right zmq-position-absolute"></i>-->
- <div class="aui-card-list-user-name zmq-flex">
- <div class="aui-font-size-14">
- 金额：<em class="zmq-text-msg">￥{{i.payAmount}}</em>
- </div>
- <div class="aui-font-size-14 zmq-text-msg">
- {{i.payType}}
- </div>
- </div>
- <div class="aui-card-list-user-name zmq-flex">
- <div class="aui-font-size-14 zmq-text-explain">
- 登记时间：{{i.createTime}}
- </div>
- </div>
- </div>
- </div>
- </section>
- <img class="zmq-img-nodata" v-show="hasData == false" src="../../image/nodata.png" />
- <div v-show="upLock == false" class="zmq-text-explain zmq-textAlign-center zmq-margin-bottom-10 zmq-block-text">
- 已无更多数据
- </div>
- </div>
- </body>
- <script src="../../script/api.js" type="text/javascript"></script>
- <script type="text/javascript" src="../../script/aui-scroll.js"></script>
- <script type="text/javascript" src="../../script/vue.js"></script>
- <script type="text/javascript" src="../../script/httpRequest.js"></script>
- <script type="text/javascript" src="../../script/vue_plugins.js"></script>
- <script type="text/javascript">
- apiready = function() {
- var type = api.pageParam.type;
- var page = api.pageParam.page;
- new Vue({
- el : '#app',
- data : {
- retariler_id : '',
- type : type,
- list : [],
- getUrl : 'buyListUrl',
- page : page,
- // 分页组件
- current : 1,
- total : 1,
- // 是否可以上啦
- upLock : true,
- // 判断动作 -- 上啦还是下拉
- downData : 'down',
- // 是否有数据
- hasData : false,
- },
- methods : {
- init : function() {
- var _this = this;
- this.retariler_id = $api.getStorage("retailerid");
- this.getList();
- this.configHeaderRefush(function() {
- _this.downData = 'down';
- _this.upLock = true;
- _this.current = 1;
- _this.getList();
- })
- this.configBottomRefush(function(status) {
- if (_this.hasData == true) {
- // 开启上拉加载
- if (_this.total > _this.current) {
- _this.downData = 'up';
- _this.current = _this.current + 1;
- _this.getList();
- } else {
- // 上啦没有数据了
- _this.upLock = false;
- }
- }
- })
- },
- getList : function() {
- var data = {
- retailerId : this.retariler_id,
- current : this.current
- }, _this = this;
- this.$post(this.getUrl, data, function(ret) {
- if (ret.code == 0 || ret.code == '0') {
- _this.total = ret.page.pages;
- if (_this.downData == 'up') {
- _this.list = _this.list.concat(ret.page.records);
- } else {
- _this.list = ret.page.records;
- if (_this.list.length > 0) {
- _this.hasData = true;
- }
- }
- }
- })
- },
- lookInfo : function() {
- return;
- this.goWin("orderInfoList_win", "orderInfoList_win.html", "");
- }
- },
- mounted : function() {
- this.init();
- }
- })
- }
- </script>
- </html>
|
