book-shop/pages/mall/index.vue

<template>
	<view class="page">
		<!-- 带tab的导航栏 -->
		<NvabarTopSearch url="/pages/search" placeholder="搜索" >
			<!-- showSlot -->
			<!-- <view class="shopcart" @click="goShoppingCart">
				<u-badge type="error" count="1" :offset="[-10, -10]" size="mini"></u-badge>
				<u-icon size="48" name="chat"></u-icon>
			</view> -->
		</NvabarTopSearch>
		<!-- 轮播图 -->
		<view class="banner-swiper">
			<u-swiper height="300rpx" :list="bannerSwiperList" img-mode="scaleToFill" mode="round" name="pic_url" border-radius="20" @click="swiperClick"></u-swiper>
		</view>
		<!-- 金刚区 -->
		<view class="dial-nav"><dial-nav imgSize="88rpx" :list="dialNavList" img-name="pic_url" label-name="button_name" :mode="10"></dial-nav></view>
		<!-- 海报区 -->
		<Poster v-if="posterList[0]" :data="posterList[0].elements"></Poster>
		
		<!-- 热门推荐 -->
		<goodsModel type="hot" :list="hotGoodsList" v-if="hotGoodsList&&hotGoodsList.length>0"></goodsModel>
		<goodsModel type="recommend" :list="recommendGoodsList" v-if="recommendGoodsList&&recommendGoodsList.length>0"></goodsModel>
		
		<view class="cateTitle">
			<text>好物推荐</text>
		</view>
		<view class="cardGoodsBox">
			<!-- <CardGoods v-for="(item, index) in goodsList" :key="index" :data="item"></CardGoods> -->
			<cardGoodsModel :list="goodsList"></cardGoodsModel>
		</view>
		
		<NoData height="60vh" type="order" v-if="goodsPage.finish&&goodsList.length==0"></NoData>
		
		<!-- <view class="loadmore" v-else>
			<u-loadmore :status="goodsPage.finish?'nomore':goodsPage.loading?'loading':'loadmore'" :load-text="loadText" color="#aaa"/>
		</view> -->
		<LoadMore v-else :loadtype="goodsPage"></LoadMore>
		<button class="serviceBtn" open-type="contact" >
			<u-icon size="46" name="server-fill"></u-icon>
			<text>客服</text>
		</button>
	</view>
</template>

<script>
// 组件
import NvabarTopSearch from '@/components/navbar/navbar-top-search.vue';
import DialNav from '@/components/nav/dial-nav.vue';
import Poster from '@/pages/mall/components/poster.vue';
import goodsModel from '@/pages/mall/components/goodsModel.vue';
import cardGoodsModel from '@/pages/mall/components/cardGoodsModel.vue';
import { goType } from '../../utils/pub';

export default {
	components: {
		NvabarTopSearch,
		DialNav,
		Poster,
		goodsModel,
		cardGoodsModel
	},
	data() {
		return {
			// 轮播图
			bannerSwiperList: [],
			// 金刚区
			dialNavList: [],
			// 三图
			posterList:[],
			// 热门商品
			hotGoodsList:[],
			// 推荐
			recommendGoodsList:[],
			// 首页推荐列表
			goodsList: [],
			goodsPage:{
				page:1,
				loading:false,
				finish:false,
			},
			
		};
	},
	onLoad() {
		this.getHomeData();
		this.getHotGoodsList();
		this.getRecommendGoodsList();
		this.getGoodsList();
	},
	onPullDownRefresh(){
		this.getHomeData();
		this.goodsPage = {
			page:1,
			loading:false,
			finish:false,
		}
		// this.goodsList = [];
		this.getHotGoodsList();
		this.getRecommendGoodsList();
		this.getGoodsList();
	},
	onReachBottom(){
		console.log('滚动到底部')
		// this.getData();
		this.getGoodsList();
	},
	
	methods: {
		getHomeData() {
			// this.bannerSwiperList = bannerSwiperList;
			// this.dialNavList = dialNavList;
			this.getMallSwiperFun();
			this.getMallMenusFun();
			this.getSelfElementList();
		},
		// 获取轮播图
		getMallSwiperFun(){
			this.$u.api.getMallSwiperAjax().then(({code,data})=>{
				if(code==1){
					this.bannerSwiperList = data;
				}
			}).catch(()=>{
				
			})
		},
		// 获取金刚区按钮组
		getMallMenusFun(){
			this.$u.api.getMallMenuAjax().then(({code,data})=>{
				if(code==1){
					this.dialNavList = data;
				}
			}).catch(()=>{
				
			})
		},
		// 轮播图标记
		swiperClick(e){
			goType(this.bannerSwiperList[e]);
		},
		// 三图位置接口
		getSelfElementList(){
			this.$u.api.getSelfElementListAjax().then(({data})=>{
				console.log(data);
				this.posterList = data.data;
			})
		},
		// 去购物粗
		goShoppingCart() {
			uni.navigateTo({
				url: '/pages-mall/pages/shopping-cart'
			});
		},
		// 获取热门商品(主页默认取第一页数据)
		getHotGoodsList(){
			this.$u.api.getGoodsListAjax({
				page:1,
				tags_type:'hot',
			}).then(({code,data})=>{
				if(code==1){
					this.hotGoodsList = data.data;
				}
			}).catch(()=>{
				
			})
		},
		// 获取推荐商品(主页默认取第一页数据)
		getRecommendGoodsList(){
			this.$u.api.getGoodsListAjax({
				page:1,
				tags_type:'recommend',
			}).then(({code,data})=>{
				if(code==1){
					this.recommendGoodsList = data.data;
				}
			}).catch(()=>{
				
			})
		},
		// 获取商品列表
		getGoodsList(){
			if(this.goodsPage.finish) return false;
			if(this.goodsPage.loading) return false;
			this.goodsPage.loading = true;
			this.$u.api.getGoodsListAjax({
				page:this.goodsPage.page,
			}).then(({code,data})=>{
				uni.stopPullDownRefresh();
				this.goodsPage.loading = false;
				if(code==1){
					if(data.last_page<=data.current_page){
						this.goodsPage.finish = true;
					}
					if(data.current_page==1){
						this.goodsList = data.data;
					}else{
						this.goodsList=this.goodsList.concat(data.data);
					}
				}else{
					this.goodsPage.finish = true;
				}				
				this.goodsPage.page = data.current_page+1;
			}).catch(()=>{
				uni.stopPullDownRefresh();
				this.goodsPage.loading = false;
				this.goodsPage.finish = true;
			})
		},
	}
};
</script>

<style lang="scss" scoped>
	.cateTitle{
		// height: 80rpx;
		margin: 30rpx 30rpx;
		border-left: 10rpx solid $app-theme-color;
		padding: 0 10rpx;
		font-size: 36rpx;
		font-weight: bold;
	}
.shopcart {
	position: relative;
	display: flex;
	align-items: center;
}

.banner-swiper {
	padding: 0 30rpx;
	background-color: $app-theme-bg-color;
}
.dial-nav {
	background-color: $app-theme-bg-color;
}
.recommendGoods {
	.list {
		padding: 0 30rpx;
	}
}
.serviceBtn{
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: rgba($app-theme-color,.8);
	color: #fff;
	position: fixed;
	right: 30rpx;
	bottom: 30rpx;
	z-index: 999;
	padding: 0;
	&::after{
		content: '';
		border:none;
	}
	text{
		font-size: 24rpx;
		line-height: 1;
		margin-top: 6rpx;
	}
}
</style>