dreamland/pages/index/list.vue

<template>
	<gui-page :customFooter="true" :customHeader="true" iphoneXButtomStyle="background:#F8F8F8"
		:footerSets="{height:150, zIndex:100, bg:'none'}" :isLoading="pageLoading" :headerStyle="headerStyle">
		<view slot="gHeader">
					<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
						<view class="gui-flex1 gui-text-center">
							<text class="gui-h4 gui-ellipsis gui-primary-color">合小记</text>
						</view>
					</view>
				</view>
		<!-- 页面主体 -->
		<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 {
				homePage : 'pages/index/my',
				foot_value: 2,
				state: 0,
				fetch: {
					cate: [],
					info: [],
					focus: [],
				},
				cate: ["推荐", "私藏"],
				cate_index: 0, //默认分类
				nav_index: 0,
				headerStyle: 'background-color:#F8F8F8',
			}
		},
		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>