luban-mall/pages/tabbar/index/index.vue

<template>
	<view class="pad-b150" v-if="!ifLoading">
		<status-nav :ifReturn="false" :navBarTitle="indexTitle" :marginBottom="0"></status-nav>
		<!-- 搜索 -->
		<view class="search-bg">
			<view class="search flex">
				<image class="search-img" src="/static/public/icon-search.png" mode="widthFix"></image>
				<input class="search-input" v-model="keyword" type="text" placeholder="请输入关键词" placeholder-style="color: #666666">
				<view class="search-line"></view>
				<view class="search-btn flex" @tap="toSearch">搜索</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper-pu newRadius="0" :bannerList="bannerList" newHeight="372rpx" newBottom="20rpx" :isplay='isplay'></swiper-pu>
		</view>
		<!-- 推荐列表 -->
		<view class="flag-list flex">
			<view class="flag-item" @tap="toLink(item.url)" v-for="(item,index) in recommendList" :key="index">
				<view class="flag-img"><image class="search-img" :src="item.src" mode="widthFix"></image></view>
				<view class="flag-txt clips1">{{item.title}}</view>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="index-product-list" v-for="(item,index) in productList" :key="index">
			<view class="product-list-title flex">
				<view class="txt">
					<text>{{item.title}}</text>
					<view class="line"></view>
				</view>
				<view class="more" @tap="toMore">
					<image src="/static/public/icon-more.png" mode="widthFix"></image>
				</view>
			</view>
			<product-list :list="item.goods" :newWidth="item.goods.length*460-490+'rpx'" @toDetail="toShopDetail"></product-list>
		</view>
		
		<!-- 疑难解答&行业资讯 -->
		<view class="index-news">
			<nav-tab :list="navTabList" :maxNum="1" @chooseEv="chooseEv"></nav-tab>
			<pull-list :list="askList" @toDetail="toArticleDetail" v-if="isLoading && showIndex==0"></pull-list>
			<pull-list :list="articleList" @toDetail="toArticleDetail" v-if="isLoading && showIndex==1"></pull-list>
		</view>
		<!-- 购物车btn -->
		<enter-cart></enter-cart>
		<!-- 底部tab -->
		<foot-tab></foot-tab>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import swiperPu from '@/components/swipers/swiper-pu'; 
	import enterCart from '@/components/enter-cart/enter-cart.vue';
	import footTab from '@/components/foot-tab/foot-tab.vue';
	import productList from '@/components/product-list/product-list.vue';
	import navTab from '@/components/nav-tab/nav-tab.vue';
	import pullList from '@/components/pull-list/pull-list.vue';
	import {getCartNum} from '@/jsFile/public-api.js';
	export default {
		components:{
			statusNav,
			swiperPu,
			productList,
			navTab,
			pullList,
			footTab,
			enterCart,
		},
		data() {
			return {
				padt:uni.getSystemInfoSync().statusBarHeight + 50,
				headHeight:'',//头部导航高
				keyword:'', //关键词
				bannerList:[], //轮播图列表
				isplay:false, //是否自动轮播
				playTimer:null, //间隔时间
				recommendList:[], //推荐列表
				productList:[],// 产品列表
				articleNavId:'',//文章导航id
				askList:[], //疑难解答列表
				articleList:[], //文章列表
				navTabList:[],//导航列表
				ifLoading:true,
				indexTitle:'',//标题
				cacheBusinessId:-1, //商户id
				isLoading:false,
				showIndex:0, //文章显示位置
			}
		},
		onLoad(op) {
			if(op.business_id){
				this.cacheBusinessId = op.business_id;
			}
		},
		onShow() {
			if(this.cacheBusinessId !== -1){
				this.$requst.post('/api/index/change-business',{business_id:this.cacheBusinessId}).then(res=>{
					if(res.code == 0){
						this.getHomeData();
						this.getArticleNav();
						this.userInfoEv();
					}
				})
			}else{
				this.getHomeData();
				this.getArticleNav();
				this.userInfoEv();
			}
			getCartNum();
			this.playTimer = setTimeout(()=>{
				this.isplay = true;
			},2000)
		},
		onReady() {
			
		},
		// 分享到微信
		onShareAppMessage() {
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		// 分享到朋友圈
		onShareTimeline(res){
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		onReachBottom(e) {
			if(this.articleList.length<this.total){
				this.page++;
				this.getArticleList();
			}
		},
		onHide() {
			clearTimeout(this.playTimer);
			this.isplay =false;
		},
		methods: {
			// 查询用户信息
			userInfoEv(){
				this.$requst.get('/api/user/info').then(res=>{
					if(res.code==0){
						uni.setStorageSync('business_id',res.data.business_id);
						uni.setStorageSync('business_code',res.data.business_code);
						this.getCompanyList(res.data.business_id);
					}
				})
			},
			// 查询工厂列表
			getCompanyList(business_id){
				this.$requst.post('/api/business/info',{business_id:business_id}).then(res=>{
					if(res.code==0) {
						this.indexTitle = res.data.alias;
					}
				})
			},
			// 获取首页数据
			getHomeData(){
				this.$requst.get('/api/index/home').then(res=>{
					if(res.code == 0){
						let bannerArr = [];
						let isVideo = false
						res.data.banner.forEach(item=>{
							let obj = {
								imgSrc:item.src,
								url:item.url,
								isVideo:isVideo,
							}
							bannerArr.push(obj)
						})
						this.bannerList = bannerArr;
						this.recommendList =res.data['banner-next-2'];
						this.productList = res.data.spu;
						this.ifLoading = false;
					}
				})
			},
			// 获取文章栏目
			getArticleNav(){
				this.$requst.get('/api/archives/category').then(res=>{
					if(res.code == 0){
						let newArr = [];
						res.data.forEach(item=>{
							let obj = {
								id:item.id,
								name:item.title
							}
							newArr.push(obj)
						})
						this.navTabList = newArr;
						// 获取文章列表
						this.getAskList();
						this.getArticleList();
					}
				})
			},
			// 切换事件
			chooseEv(index,id){
				if(this.showIndex !== index){
					this.showIndex = index;
				}
			},
			// 获取疑难解答列表
			getAskList(){ 
				uni.showLoading({
					title: '加载中'
				});
				this.isLoading = false;
				let params = {
					page:this.page,
					size:this.size,
					category_id:this.navTabList[0].id
				}
				this.$requst.get('/api/archives/list',params).then(res=>{
					if(res.code == 0){
						this.total = res.data.total;
						let newArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id:item.id,
								title:item.title,
								time:this.dateFormat(item.published_at.replace(/-/g,'/')),
								src:item.cover
							}
							newArr.push(obj)
						})
						this.askList = newArr;
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 获取文章列表
			getArticleList(){ 
				uni.showLoading({
					title: '加载中'
				});
				this.isLoading = false;
				let params = {
					page:this.page,
					size:this.size,
					category_id:this.navTabList[1].id
				}
				this.$requst.get('/api/archives/list',params).then(res=>{
					if(res.code == 0){
						this.total = res.data.total;
						let newArr = [];
						res.data.list.forEach(item=>{
							let obj = {
								id:item.id,
								title:item.title,
								time:this.dateFormat(item.published_at.replace(/-/g,'/')),
								src:item.cover
							}
							newArr.push(obj)
						})
						this.articleList = newArr;
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			// 时间格式转换
			dateFormat (dateData) {
			    var date = new Date(dateData)
			    var y = date.getFullYear()
			    var m = date.getMonth() + 1
			    m = m < 10 ? '0' + m : m
			    var d = date.getDate()
			    d = d < 10 ? '0' + d : d
			    const time = y + '.' + m + '.' + d
			    return time
			},

			// 去商品列表
			toMore(){
				uni.navigateTo({
					url:`/pages/tabbar/cate/cate`
				})
			},
			//去推荐详情页
			toLink(url){
				if(url !== ''){
					uni.navigateTo({
						url: `/${url}`
					})
				}
			},
			//去商品详情
			toShopDetail(id){
				uni.navigateTo({
					url:`/pagesA/shop/detail?id=${id.id}&source=shop`
				})
			},
			//去文章详情
			toArticleDetail(id){
				uni.navigateTo({
					url:`/pages/tabbar/news/detail?id=${id.id}`
				})
			},
			// 去搜索页面
			toSearch(){
				if(this.keyword !== ''){
					uni.navigateTo({
						url:`/pagesB/search/search?keyword=${this.keyword}`
					})
				}
			},
		}
	}
</script>

<style scoped>
	
</style>