sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
							<!DOCTYPE HTML>
<html>
	<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" />
		<link href="../../css/style2.css" rel="stylesheet" type="text/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
			}
			.aui-list-theme-one .aui-list-theme-item {
				width: 100%;
			}
			.aui-list-img {
				width: 35%;
				height: 6rem;
			}
			.aui-list-img img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<section class="aui-content top" v-cloak>
				<div class="aui-card-list aui-border-t aui-border-b zmq-width-90 zmq-margin-top-10 zmq-radius-10" v-show="type == '1'" v-for="(d,i) in list">
					<div class="aui-top">
						<span class="aui-time zmq-text-msg" style="padding-left : 1.1rem;"><img class="zmq-orderCode-img" style="position:absolute;margin-left: -1rem" src="../../image/drawable-xhdpi/wj.png" />{{d.logName}}</span>
						<span class="aui-state zmq-btn-border zmq-text-msg zmq-padding-status" class="">{{type == '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">{{d.amomt}}</em>
							</div>
							<!--<div class="aui-font-size-14 zmq-text-msg">
							银行卡
							</div>-->
						</div>
						<div class="aui-card-list-user-name zmq-flex">
							<div class="aui-font-size-14 zmq-text-explain">
								{{type == '1' ? '获取' : '消费'}}时间：{{d.createTime}}
							</div>
						</div>
					</div>
				</div>
				<div class="aui-card-list aui-border-t aui-border-b zmq-width-90 zmq-margin-top-10 zmq-radius-10" v-show="type == '2'" v-for="(s,i) in list">
					<div class="aui-top">
						<span class="aui-time zmq-text-msg" style="padding-left : 1.1rem;"><img class="zmq-orderCode-img" style="position:absolute;margin-left: -1rem" src="../../image/drawable-xhdpi/wj.png" />订单号：{{s.orderNum}}</span>
						<span class="aui-state zmq-btn-border zmq-text-msg zmq-padding-status" class="">{{type == '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">{{s.payAmunt}} 积分</em>
							</div>
							<div class="aui-font-size-14 zmq-text-msg">
							             兑换： {{s.totalAmount}} 个
							</div>
						</div>
						<div class="aui-card-list-user-name zmq-flex">
							<div class="aui-font-size-14 zmq-text-explain">
								{{type == '1' ? '获取' : '消费'}}时间：{{s.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 type="text/javascript" src="../../script/api.js"></script>
	<!--<script type="text/javascript" src="../../script/aui-tab.js" ></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;
			new Vue({
				el : '#app',
				data : {
					type : type,
					list : [],
					// 获取订单列表
					getJFlistUrl : 'getJFlistUrl',
					//  分页组件
					current : 1,
					total : 1,
					//  是否可以上啦
					upLock : true,
					//  判断动作 -- 上啦还是下拉
					downData : 'down',
					//  是否有数据
					hasData : false,
					//  获取消费记录
					getBuyListUrl : 'exchangeListUrl',
				},
				methods : {
					init : function() {
						var _this = this;
						this.retariler_id = $api.getStorage("retailerid");
						this.getListOrder();
						this.configHeaderRefush(function() {
							_this.downData = 'down';
							_this.upLock = true;
							_this.current = 1;
							_this.getListOrder();
						})
						this.configBottomRefush(function(status) {
							if (_this.hasData == true) {
								//  开启上拉加载
								if (_this.total > _this.current) {
									_this.downData = 'up';
									_this.current = _this.current + 1;
									_this.getListOrder();
								} else {
									//  上啦没有数据了
									_this.upLock = false;
								}
							}
						})
					},
					//  根据传来的方式获取列表
					getListOrder : function() {
						if (type == 1) {// 获取
							this.getList();
						} else {// 消费
							this.getBuyList();
						}
					},
					//  获取消费记录
					getBuyList : function() {
						var data = {
							retailerId : this.retariler_id,
							current : this.current,
							logType : type
						}, _this = this;
						this.$post(this.getBuyListUrl, 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;
									}else{
									    _this.hasData = false;
									}
								}
							}
						})
					},
					//  获取积分列表
					getList : function() {
						var data = {
							retailerId : this.retariler_id,
							current : this.current,
							logType : type
						}, _this = this;
						this.$post(this.getJFlistUrl, 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;
									}
								}
							}
						})
					},
				},
				mounted : function() {
					this.init();
				}
			})
		}
	</script>
</html>