dreamland/pages/index/list.vue

<template>
	<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8F8F8"
	:footerSets="{height:150, zIndex:100, bg:'none'}">
		<!-- 页面主体 -->
		<view slot="gBody" class="gui-margin">
		<ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
		<view class="main" v-if="state == 1">
			<view class="content" :style="height">
				<scroll-view class="menus" :scroll-into-view="view" scroll-with-animation scroll-y>
					<view class="wrapper">
						<view class="menu" :id="`menu-${v.id}`" :class="{'current': k == cate_index}" v-for="(v, k) in fetch.cate" :key="k" @tap="menu(k, v.id)">
							<text>{{ v.name }}</text>
						</view>
					</view>
				</scroll-view>
				<!-- goods list begin -->
				<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="top">
					<view class="wrapper">
						<swiper class="ads" id="ads" autoplay :interval="3000" indicator-dots v-if="fetch.focus.length > 0">
							<swiper-item v-for="(v, k) in fetch.focus" :key="k" @tap="go" :data-url="v.link">
								<image :src="v.pic"></image>
							</swiper-item>
						</swiper>
						<view class="list">
							<!-- category begin -->
							<view class="category" v-for="(v, k) in fetch.cate" :key="k" :id="`cate-${v.id}`"  v-if="k == cate_index">
								<view class="items">
									<!-- 商品 begin -->
									<view class="good" v-for="(v1, k1) in fetch.info[v.id]" :key="k1">
										<image :src="v1.pic_cover" class="image" @tap="location(v1.id_code)"></image>
										<view class="right" @tap="location(v1.id_code)">
											<text class="name">{{ v1.name }}</text>
											<text class="tips">{{ v1.desc }}</text>
											<view class="price_and_action" v-if="v1.buy == 1" style="display: none;">
												<text class="price">￥{{ v1.buy_price }}</text>
											</view>
										</view>
									</view>
									<!-- 商品 end -->
								</view>
							</view>
							<!-- category end -->
						</view>
					</view>
				</scroll-view>
				<!-- goods list end -->
			</view>
			<!-- content end -->
		</view>
		<view v-if="state == 2" class="d-flex w-100 h-100 flex-column just-content-center align-items-center">
			<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
				<view>您还没有任何阅览的小记</view>
				<view>小记可能就在你身边，快去寻找吧~</view>
			</view>
			<button type="primary" class="drink-btn" size="default" @tap="home">我的家园</button>
			<view class="font-size-sm text-color-primary" @tap="qun" style="display: none;">加入官方微信群</view>
		</view>
		
		<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
	</view>
	
	<!-- 边框使用 style 实现，可以根据自己项目实际情况修改 -->
	<view slot="gFooter" class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end" 
	style="height:150rpx;">
		<view class="gui-footer-icon-buttons" @tap="navChang(0)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
			:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe63b;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
			:class="[navCurrent == 0 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">首页</text>
		</view>
		<view class="gui-footer-icon-buttons" @tap="navChang(1)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
			:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6b8;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" 
			:class="[navCurrent == 1 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">交流</text>
		</view>
		<!-- 凸出按钮占位  普通按钮 实现下面的 gui-footer-icon-buttons 即可 -->
		<view class="gui-footer-icon-buttons"></view>
		<view class="gui-footer-icon-buttons" @tap="navChang(3)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
			:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe626;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text" 
			:class="[navCurrent == 3 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">客服</text>
		</view>
		<view class="gui-footer-icon-buttons" @tap="navChang(4)">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" 
			:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe6fe;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text" 
			:class="[navCurrent == 4 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">我的</text>
		</view>
		<!-- 使用定位方式实现凸出按钮 -->
		<view class="gui-footer-buttons-ab" @tap="navChang(2)">
			<text class="gui-footer-buttons-ab-icon gui-block-text gui-icons gui-bold" 
			:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">&#xe60b;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text" 
			:class="[navCurrent == 2 ? 'gui-nav-bottom-active-color' : 'gui-nav-bottom-color']">合小记</text>
		</view>
	</view>
	</gui-page>
</template>

<script>
import deverShare from '@/lib/dever/components/share.vue';
export default {
	components: {
		
	},
	data() {
		return {
			navCurrent: 2,
			state : 0,
			fetch : {
				cate : [],
				info : [],
				hot : [],
			},
			height : 'height:100%',
			cate_index: 0,//默认分类
			top: 0,
			view: '',
		}
	},
	components:{
		deverShare
	},
	onLoad() {
		
	},
	onShow() {
		this.navCurrent = 2;
		//this.Dever.checkLogin();
		this.getData();
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getData();
	},
	//下拉加载
	onReachBottom() {
		this.getData();
	},
	
	methods: {
		navChang : function (index) {
			this.navCurrent = index;
			
			if (index == 0) {
				this.Dever.location('index/index');
			}
		},
		getData : function() {
			var self = this;
			this.Dever.get(this, 'app/collection/?l=api.getList', {id:-1}, function(t) {
				if (t.cate.length > 0) {
					self.state = 1;
				} else {
					self.state = 2;
				}
				uni.getSystemInfo({
					success: function (res) {
						self.height = 'height:' + res.windowHeight + 'px';
					}
				})
			});
		},
		home : function() {
			this.Dever.location('index/index');
		},
		location : function(id) {
			this.Dever.location('dream/index?id=' + id);
		},
		
		go : function(e) {
			var link = e.currentTarget.dataset.url;
			if (link) {
				this.Dever.location(link);
			}
		},
		
		menu : function(index, id) {
			this.cate_index = index
		},
	}
};
</script>

<style>
.gui-text-small{font-size:20rpx;}
.gui-footer-icon-buttons{width:130rpx; height:80rpx; padding:10rpx; flex:1; position:relative; margin:0; background-color:#F8F8F8;}
.gui-footer-buttons-ab{position:absolute; z-index:101; left:325rpx; top:0rpx; width:110rpx; height:150rpx;}
.gui-footer-buttons-ab-icon{width:110rpx; height:110rpx; line-height:120rpx; text-align:center; font-size:68rpx; background-color:#F7F8FA; border-radius:100rpx;}
</style>