264 lines
6.7 KiB
Vue
264 lines
6.7 KiB
Vue
<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);
|
|
},
|
|
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>
|