<template>
<view class="pad-b150" v-if="!ifLoading">
<status-nav :ifReturn="false" navBarTitle="首页" :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="articleList" @toDetail="toArticleDetail"></pull-list>
</view>
<!-- 暂无更多内容 -->
<view class="more-txt" v-if="totalAll == total">暂无更多内容</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 {slidePosition} from '@/jsFile/public-api.js';
import { mapState } from 'vuex'//引入mapState
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
articleList:[], //文章列表
navTabList:[],//导航列表
currentIndex:0, //当前位置
page:1, //第几页
size:5, //查询条数
total:0, //数量
totalAll:-1,//总数
ifLoading:true,
}
},
computed:{
...mapState({
geList: state => state.moduleA.geList,
}),
},
// 分享到微信
onShareAppMessage() {
},
// 分享到朋友圈
onShareTimeline(){
},
onShow() {
slidePosition().then(res=>{
if(res.code==0) {
console.log(res.data,74);
}
})
this.playTimer = setTimeout(()=>{
this.isplay = true;
},2000)
},
onLoad() {
this.getHomeData();
this.getArticleNav();
},
onReady() {
},
onReachBottom(e) {
if(this.articleList.length<this.total){
this.page++;
this.getArticleList();
}else{
this.totalAll = this.total;
return false;
}
},
onHide() {
clearTimeout(this.playTimer);
this.isplay =false;
},
methods: {
// 获取首页数据
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){
res.data.forEach(item=>{
let obj = {
id:item.id,
name:item.title
}
this.navTabList.push(obj)
})
this.articleNavId = this.navTabList[0].id;
// 获取文章列表
this.getArticleList();
}
})
},
// 切换事件
chooseEv(index,id){
if(this.currentIndex !== index){
this.articleList = [];
this.page = 1;
this.currentIndex = index;
this.articleNavId = id;
// 获取文章列表
this.getArticleList();
}
},
// 获取文章列表
getArticleList(){
uni.showLoading();
let params = {
page:this.page,
size:this.size,
category_id:this.articleNavId
}
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),
src:item.cover
}
newArr.push(obj)
})
this.articleList = newArr;
}
uni.hideLoading();
})
},
// 时间格式转换
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(){
uni.navigateTo({
url:`/pagesB/search/search?keyword=${this.keyword}`
})
},
}
}
</script>
<style scoped>
page{
background-color: #eaeaea;
}
</style>