sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
							<!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>
	<style>
		.card-list {
			display: flex;
			justify-content: center;
		}

		.card {
			width: 7rem;
			display: flex;
			background-color: #fff;
			margin: .2rem 0;
			padding: .2rem;
			border-radius: .2rem;
			justify-content: space-between;
		}

		.card-left {
			display: flex;
		}

		.card-img {
			width: 1.8rem;
			height: 1.8rem;
			background-color: #000;
		}

		.card-text {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: .1rem;
			width: 5rem
		}

		.card-title {
			font-size: .28rem;
			font-weight: 800;
			width: 3.5rem;
		}

		.card-date {
			font-size: .25rem;
		}

		.num {
			font-size: .3rem;
			text-align: right;
			font-weight: 800;
		}

		.inte {
			font-size: .25rem;
			color: #0097E0;
		}
		.mescroll{
			position: relative;
			height: 100%;/*如设置bottom:50px,则需height:auto才能生效*/
		}
	</style>
</head>

<body>

	<div id="app" style="background-color:#EDEDED">
		<div id="mescroll" class="mescroll-touch-y mescroll">
			<div v-show="lists.length > 0">
				<div class="card-list" v-for="(item,index) in lists" :key="index">

					<div class="card">
						<div class="card-left">
							<div>
								<img v-if="item.productImage==null" src="img/nothing.png" style="width:1.5rem;height:1.5rem">
								<img v-else :src="item.productImage" style="width:1.5rem;height:1.5rem">
							</div>
							<div class="card-text">
								<div style="display:flex;justify-content:space-between;">
									<div class="card-title">
										{{item.productMaktx}}
									</div>
									<div class="card-num">
										<div class="num">
											x{{item.productQty}}
										</div>
									</div>
								</div>
								<div>
									<div class="card-date">
										下单时间：{{item.createTime|formatDate}}
									</div>
									<div style="display:flex;justify-content:space-between;">

										<div style="font-size:.25rem">
											<div>
												发货时间：<span v-if="item.shipTime">{{item.shipTime|formatDate}}</span><span v-else>待发货</span>
											</div>

										</div>
										<div class="inte">
											-{{item.productAmount}}积分
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-show="lists.length == 0">
				<img src="./image/noData.png" style="margin:2rem auto" />
			</div>
		</div>
	</div>
</body>

</html>
<link rel="stylesheet" href="./mescroll/mescroll.min.css">
<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: {
				lists: [],
				storeId: '',
				size: 10,
				current: 1,
				totalPages: 1,
				frist: 1,
				mescroll: '',
				hasOther: false,
			},
			filters: {
				formatDate: function(time) {
						return time.substring(0,10)
				}
			},
			methods: {
				init: function() {
					this.storeId = $api.getStorage('userid');
					this.getOrderannal()
				},
				configs: function() {
					var _this = this;
					this.frist = 2;
					this.configDownAndPull("mescroll", function(mescroll) {
						_this.current = 1;
						_this.mescroll = mescroll;
						_this.getOrderannal(mescroll);
					}, function(mescroll) {
						if (_this.current < _this.totalPages) {
							_this.current = _this.current + 1;
							_this.getOrderannal(mescroll, 1);
						} else {
							mescroll.endSuccess(_this.size, false);
						}
					})
				},
				addMore: function() {
					var _this = this;
					if (_this.current < _this.totalPages) {
						_this.current = _this.current + 1;
						_this.getOrderannal(_this.mescroll, 1);
					} else {
						_this.hasOther = true;
					}
				},
				//获取列表
				getOrderannal: function(mescroll) {
					var params = {
							"shopId": this.storeId,
							"size": this.size,
							"current": this.current,
							"url": 'json',
							"type": 'body'
						},
						_this = this;
					this.$post('getOrderannal', params, function(ret) {
						if (ret.code == 0 || ret.code == '0') {
							_this.totalPages = ret.page.pages;
							_this.lists = _this.current == 1 ? ret.page.records : _this.lists.concat(ret.page.records);
							if (mescroll) {
								mescroll.endSuccess(_this.size, true);
							}
							if (_this.frist == 1) {
								_this.$nextTick(function() {
									_this.configs();
								})
							}
						}
					});
				}
			},
			mounted: function() {
				this.init();
			},
		})
	}
</script>