sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->

<head>
	<meta name="referrer" content="always" />
	<meta charset='utf-8' />
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="x-dns-prefetch-control" content="on">
	<meta name="description" content="">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script src="js/vue.js"></script>
	<script src="js/vant-ui.js"></script>
	<script src="js/main.js"></script>
	<title></title>
</head>
<style>
	.youhuijuan .title {
		width: 100%;
		height: 0.7rem;
		position: fixed;
		left: 0;
		top: 0rem;
		font-size: 0.28rem;
		background-color: #fff;
	}

	.youhuijuan {
		padding-top: 0.8rem;
	}
	.mescroll{
		padding-top: .5rem;
	}
</style>

<body>
	<div id="app" style="overflow-y:scroll !important" v-cloak>
		<div class="pageView youhuijuan">
			<div class="title flex jlr a-center" style="background-color : #fff;z-index:2222;width : 100%">
				<div class="item flex a-center j-center" v-for="(status,index) in couponStatus" v-bind:class="chooseStatusIndex == index ? 'on' : ''" v-on:click="chooseStatus(index)">{{ status.name }}</div>
			</div>
			<div>
				<div class="boxs mescroll-touch-y mescroll" id="mescroll">
					<ul>
						<li v-for="(item,index) in couponList">
							<div class="youhuiLeft flex a-center j-center">
								<div class="flex a-end j-center">
									<em>￥</em>
									<h2>{{ item.bonus }}</h2>
								</div>
							</div>
							<div class="youhuiInfos flex col">
								<div class="infos">
									<h2>{{ item.bonus }}元优惠券</h2>
									<span>失效时间：{{ item.expireTime }}</span>
								</div>
								<div class="bottom flex a-center jlr" @click="item.state = !item.state">
									<span>适用型号：{{ item.tireSize }}</span>
								</div>
							</div>
						</li>
					</ul>
					<div v-show="couponList.length == 0" style="text-align:center;position:absolute;top:0px;width:100%">
						<img src="./image/noData.png" style="margin:1rem auto" />
					</div>
				</div>
			</div>
			<!-- <div style="overflow-y:scroll">
			<ul style="overflow-y:scroll">
				<div v-for="(item,index) in couponList" :key="index" id="mescroll">
					<li class="flex a-center">
						<div class="youhuiLeft flex a-center j-center">
							<div class="flex a-end j-center">
								<em>￥</em>
								<h2>{{ item.bonus }}</h2>
							</div>
						</div>
						<div class="youhuiInfos flex col">
							<div class="infos">
								<h2>{{ item.bonus }}元优惠劵</h2>
								<span>失效时间：{{ item.expireTime }}</span>
							</div>
							<div class="bottom flex a-center jlr" @click="item.state = !item.state">
								<span>适用型号：{{ item.tireSize }}</span>
							</div>
						</div>
					</li>
				</div>
		</div> -->
		</div>
	</div>
</body>
<link rel="stylesheet" href="./mescroll/mescroll.min.css">
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
<script type="text/javascript" src="../script/api.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() {
		new Vue({
			el: '#app',
			data: {
				couponList: [],
				userid: '',
				chooseStatusIndex: 0,
				couponStatus: [{
					name: '未使用',
					code: 1,
				}, {
					name: '已使用',
					code: 2
				}, {
					name: '已失效',
					code: 3
				}],
				frist : 1,
				current : 1,
				size : 10,
				totalPages : 1,
				hasOther : false,
				mescroll : '',
			},
			methods: {
				init: function() {
					this.userid = $api.getStorage('userid');
					this.getCouponList();
				},
				addMore : function(){
					var _this = this;
					if (_this.current < _this.totalPages) {
							_this.current = _this.current + 1;
							_this.getCouponList(_this.mescroll, 1);
						} else {
							_this.hasOther = true;
						}
				},
				//  获取优惠券列表
				getCouponList: function(mescroll) {
					var url = "getCouponListU",_this = this,data = {
						  useType : this.couponStatus[this.chooseStatusIndex].code,
							storeId : this.userid,
							current : this.current,
							size : this.size,
							url : 'json',
							type : 'body'
					};
					this.$post(url,data,function(ret){
						if(ret.code == 0 || ret.code == '0'){
							_this.couponList = _this.current == 1 ? ret.page.records : _this.couponList.concat(ret.page.records);
							_this.totalPages = ret.page.pages;
							if(mescroll){
                 mescroll.endSuccess()
							}
							if(_this.frist == 1){
								_this.$nextTick(function(){
									_this.configs()
								})
							}
						}
					})
				},
				configs : function(){
					var _this = this;
					this.frist = 2;
					this.configDownAndPull("mescroll",function(mescroll){
						   _this.mescroll = mescroll;
							 _this.current = 1;
							 _this.getCouponList(mescroll);
					},function(mescroll){
							 if(_this.current < _this.totalPages){
								 _this.current = _this.current + 1;
								 _this.getCouponList(mescroll,1);
							 }else{
								 mescroll.endSuccess(_this.size,false);
							 }
					});
					// this.configBottomRefush(function(){
					// 	if (_this.current < _this.totalPages) {
					// 		_this.current = _this.current + 1;
					// 		_this.getCouponList(_this.mescroll, 1);
					// 	} else {
					// 		_this.hasOther = true;
					// 	}
					// })
				},
				//  选择这个状态
				chooseStatus: function(index) {
					this.current = 1;
					this.chooseStatusIndex = index;
					this.getCouponList(this.mescroll);
				}
			},
			mounted: function() {
				this.init();
			}
		})
	}
</script>

</html>