dreamland/pages/index/list.vue

<template>
	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8"
	:footerSets="{height:150, zIndex:100, bg:'none'}" :isLoading="pageLoading">
		<!-- 页面主体 -->
		<view slot="gBody">
			
			<view class="gui-margin-top">
				<gui-swiper :swiperItems="fetch.focus" 
				:width="750" :height="330" @taped="taped"></gui-swiper>
			</view>
					
			<view class="gui-flex gui-rows gui-justify-content-center gui-margin-top">
				<view style="width:500rpx;">
					<gui-segmented-control :items="cate" :current="0" borderRadius="50rpx" @change="menu"></gui-segmented-control>
				</view>
			</view>
		
			<block v-if="state == 1">
				<view class="gui-grids gui-flex gui-rows gui-wrap gui-margin-top gui-bg-gray menu">
					<gui-switch-navigation :items="fetch.cate" :currentIndex="nav_index" @change="nav"  activeDirection="center" textAlign="center" activeLineBg="linear-gradient(to right, #008AFF,#008AFF)" ></gui-switch-navigation>
				</view>
				<view class="gui-margin gui-card-list gui-flex gui-rows gui-wrap gui-space-between gui-margin-top">
					<view class="gui-card-item" hover-class="gui-tap" v-for="(v, k) in fetch.info" :key="k" @click="view(v.id_code)">
						<view class="gui-card-img" style="height:100%">
							<gui-image :width="330" :height="191"
							:src="v.pic_cover"></gui-image>
							<text class="gui-card-mask-title gui-absolute-lb gui-bg-black-opacity5 gui-block-text gui-color-white gui-h6 gui-border-box gui-text-center">{{v.name}}</text>
						</view>
					</view>
				</view>
			</block>

			<gui-empty v-if="state == 2">
				<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
					<image class="gui-empty-img" src="@/static/dreamland/img/kong.png"></image>
				</view>
				<text slot="text" 
				class="gui-text-small gui-block-text gui-text-center gui-margin-top" style="color:#9DABFF;">您还没有可以阅览的合小记</text>
			</gui-empty>
		</view>
		
		<view slot="gPendant" style="display: none;">
			<text class="gui-block-text pendant gui-color-white gui-bg-primary gui-icons">社区</text>
		</view>
		
		<foot ref="foot" slot="gFooter" :value="foot_value"></foot>
		<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
	</gui-page>
</template>

<script>
import deverShare from '@/lib/dever/components/share.vue';
import foot from '@/pages/index/foot.vue';
export default {
	data() {
		return {
			foot_value : 2,
			state : 0,
			fetch : {
				cate : [],
				info : [],
				focus : [],
			},
			cate : ["推荐", "私藏"],
			cate_index: 0,//默认分类
			nav_index : 0,
		}
	},
	components:{
		deverShare,foot
	},
	onLoad() {
		this.getInfo();
	},
	onShow() {
		this.$nextTick(function() {
			this.$refs.foot.cur = this.foot_value;
		});
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getInfo();
	},
	//下拉加载
	onReachBottom() {
		this.getData(2, false);
	},
	
	methods: {
		getInfo : function() {
			var self = this;
			var data = {};
			data.id = -1;
			data.type = this.cate_index + 1;
			this.nav_index = 0;
			this.Dever.get(this, 'app/collection/?l=api.getList', data, function(t) {
				if (t.cate.length > 0) {
					self.state = 1;
				} else {
					self.state = 2;
				}
			});
		},
		getData : function(page, index) {
			var self = this;
			if (!index) {
				index = this.nav_index;
			}
			var data = {};
			data.id = -1;
			data.type = this.cate_index + 1;
			data.cate = this.fetch.cate[index].id;
			this.Dever.page([page, 'info'], this, 'app/collection/?l=api.getListData', data);
		},
		view : function(id) {
			this.Dever.location('dream/index?id=' + id);
		},
		menu : function(e) {
			this.cate_index = e
			this.getInfo();
		},
		
		nav : function(e) {
			this.nav_index = e;
			this.getData(1, e);
		},
		taped : function(e){
			this.Dever.location(this.fetch.focus[e].link, 'webview', this.fetch.focus[e].name);
		}
	}
};
</script>

<style>
.pendant{width:88rpx; height:88rpx; border-radius:88rpx; text-align:center; line-height:88rpx; font-size:24rpx;margin-top: 10rpx;}
.menu{width:750rpx; padding:15rpx 30rpx;  box-sizing: border-box; padding-bottom:0;}
.gui-text-small{font-size:20rpx;}
</style>