dreamland/pages/dream/func/shop.vue

<template name="shop">
	<view>
		<view class="grace-space-between">
			<view class="grace-waterfall-item" v-for="(v, k) in productList" :key="k">
				<view class="grace-img-card-item" v-for="(v1, k1) in v" :key="k1" @click="view(v1.id)">
					<image :src="v1.pic_cover" mode="widthFix" class="grace-waterfall-img" style="height:auto"></image>
					<text class="grace-img-card-title">{{v1.name}}</text>
					<view class="grace-img-card-more">
						<text class="grace-img-card-price">{{v1.price}}</text>
						<text class="grace-img-card-btn">购买</text>
					</view>
				</view>
			</view>
		</view>
		<graceLoading :loadingType="loadingType"></graceLoading>
	</view>
</template>

<script>
export default {
	name: "shop",
	props: {
		content_id : {
			type : String,
			value : null
		},
		width : {
			type : String,
			default : '100%'
		},
		param : {},
		index : 0
	},
    data() {
    	return {
			page : 1,
			loadingType: 3,
			productList : [[],[]]
		}
    },
	mounted() {
		this.getData();
	},
	methods:{
		getData : function() {
			var self = this;
			//避免重复加载
			if(this.loadingType != 3){return ;}
			this.loadingType = 1;
			
			this.Dever.get(this, 'app/collection/?l=api.getProduct', {code:this.Dever.config.code, content_id:this.content_id,noloading:1,noconcat:1,page:this.page}, function(t) {
				if (t && t.product && t.product.length > 0) {
					var lArr = [];
					var rArr = [];
					for (var i = 0; i < t.product.length; i++) {
						if (i % 2 == 0) {
							lArr.push(t.product[i]);
						} else {
							rArr.push(t.product[i]);
						}
					}
					self.productList = [lArr, rArr];
					self.loadingType = 3;
					self.page++;
				} else {
					self.loadingType = 2;
				}
			});
		},
		getInfo : function(t) {
			//触底刷新
		},
		view : function(id) {
			this.Dever.location('dream/product?id=' + id + '&table=collection/product&code=' + this.Dever.config.code);
		}
	},
}
</script>

<style>
.grace-waterfall-item{width:340rpx;}
.grace-waterfall-img{width:340rpx;}
.grace-img-card-item:last-child {
	min-height:600rpx;
}
</style>