332 lines
9.4 KiB
Vue
332 lines
9.4 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav
|
||
:ifTitle="true"
|
||
:ifReturn="false"
|
||
:ifCenter="true"
|
||
:navBarTitle="'首页'"></status-nav>
|
||
<view :style="{paddingTop: statusBarHeight +'px'}">
|
||
<view class="pad-sx20 pad-zy40">
|
||
<!-- 搜索输入框 start -->
|
||
<view class="radius30 disac pad-zy40 pad-sx30 mar-x40" style="background-color: #f2f1f7;">
|
||
<image src="/static/public/icon-search.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
|
||
<input @confirm="searchEv" class="pad-z20 width100 fon36" type="text" v-model="searchText" placeholder="搜索" />
|
||
</view>
|
||
<!-- 搜索输入框 end -->
|
||
|
||
<!-- 轮播图 start -->
|
||
<swiper-pu v-if="bannerList.length" :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'230'" :newRadius="'15'" :newBottom="'10'"></swiper-pu>
|
||
<!-- 轮播图 end -->
|
||
</view>
|
||
<!-- <view class="tab-nav" style="position: sticky;z-index: 10;" :style="{ top: statusBarHeight +'px'}"> -->
|
||
<swiper-tab :list="classifyList" v-model="current" @input="clickTab" itemColor="#000000" lineColor="#000000"></swiper-tab>
|
||
<!-- </view> -->
|
||
<view class="pad40 pad-x180">
|
||
<listOne :list="dataList[1]" :activityList="dataList[0]"></listOne>
|
||
<pitera v-if="noMore"></pitera>
|
||
</view>
|
||
</view>
|
||
<!-- 底部tab -->
|
||
<foot-tab :titleList="titleList" :imgList="imgList"></foot-tab>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var app = getApp();
|
||
// tab组件
|
||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||
// 轮播图组件
|
||
import swiperPu from '@/components/swiper-pu.vue';
|
||
// 暂无更多组件
|
||
import pitera from '@/components/nothing/pitera.vue';
|
||
// 列表组件
|
||
import listOne from '@/components/list/list-one.vue';
|
||
// 公共接口
|
||
import {checkBanner} from '@/jsFile/publicAPI.js';
|
||
// 底部导航组件
|
||
import footTab from '@/components/foot-tab.vue';
|
||
export default {
|
||
components:{
|
||
swiperPu,
|
||
pitera,
|
||
swiperTab,
|
||
listOne,
|
||
footTab
|
||
},
|
||
data() {
|
||
return {
|
||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
|
||
searchText:'',// 搜索内容
|
||
classifyList: [
|
||
// {//默认结构
|
||
// id:1,
|
||
// title: '翡翠'
|
||
// }
|
||
],
|
||
current:0, // 当前显示tab及swiper列表
|
||
publicColor:'', // 主题颜色
|
||
showTop:false, // 是否显示回到顶部
|
||
dataList:[], // 数据列表
|
||
page:1, // 第几页
|
||
size:10, // 数量
|
||
total:0, // 总数
|
||
titleList:uni.getStorageSync('footTitle'), // 底部导航文字
|
||
imgList:uni.getStorageSync('footimg'), // 底部导航图标
|
||
ifNet:true,
|
||
noNetwork:'当前无网络连接',
|
||
refTime:null, // 刷新定时器
|
||
refNum:0, // 刷新次数
|
||
bannerList:[], // 轮播图
|
||
isAutoPlay:false,// 是否开启自动轮播
|
||
classifyId:'',//分类id
|
||
noMore:false,
|
||
isScroll:false
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
e.scrollTop > 360 ? this.showTop = true : this.showTop = false;
|
||
},
|
||
onHide() {
|
||
// 关闭自动轮播
|
||
this.isAutoPlay = false;
|
||
},
|
||
onUnload() {
|
||
// 关闭自动轮播
|
||
this.isAutoPlay = false;
|
||
},
|
||
onReady() {
|
||
// uni.createSelectorQuery().in(this).select('#swiper-box').boundingClientRect().exec(rect => {
|
||
// this.swiperHeight = rect[0].width
|
||
// });
|
||
},
|
||
onShow() {
|
||
// 网络检测
|
||
this.checkNet();
|
||
this.isAutoPlay = true; // 开启自动轮播
|
||
},
|
||
onShareAppMessage(res) {
|
||
var shareObj = {
|
||
title: '', // 默认是小程序的名称(可以写slogan等)
|
||
path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}` // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
};
|
||
return shareObj;
|
||
},
|
||
onReachBottom() {
|
||
if(this.total != (this.dataList[0].length + this.dataList[1].length)){
|
||
this.page++
|
||
this.checkList();
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// 查询是否显示视频
|
||
this.$toolAll.tools.isVedio();
|
||
// 获取当前页面url
|
||
this.$toolAll.tools.obtainUrl();
|
||
// if(options.q!=undefined){
|
||
// // 解码一：unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")；
|
||
// // 解码二：decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
|
||
// let str = unescape(options.q);
|
||
// // console.log(str);
|
||
// let len1 = str.indexOf('invite_code=');
|
||
// let len2 = str.indexOf('channel=');
|
||
// let len3 = str.indexOf('source_code=');
|
||
// let newInvite = '';
|
||
// let newChanel = '';
|
||
// let newsource_code = '';
|
||
// if(len1!=-1) newInvite = str.slice((len1+12),(len1+12+32));
|
||
// if(len2!=-1) newChanel = str.slice((len2+8),(len2+8+8));
|
||
// if(len3!=-1) newsource_code = str.slice((len3+12),(len3+12+32));
|
||
// }
|
||
// const query = wx.createSelectorQuery()
|
||
// query.select('.statusHNH').boundingClientRect((rect) => {
|
||
// // log('状态栏+标题栏：',rect.height);
|
||
// uni.setStorageSync('statusHNH',rect.height)
|
||
// this.statusHNH = rect.height
|
||
// }).exec()
|
||
this.checkSwi();//查询轮播图
|
||
this.classifyEv();// 调用分类查询事件
|
||
if(options.invite_code!=undefined){
|
||
uni.setStorageSync('existCode',options.invite_code);
|
||
uni.setStorageSync('transientUrl',`/pages/tabbar/my/my`);
|
||
uni.navigateTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
}
|
||
if(uni.getStorageSync('phone_active')){
|
||
this.$toolAll.tools.clearShare();
|
||
}
|
||
},
|
||
methods: {
|
||
goDetail(id){//前往详情页
|
||
if(uni.getStorageSync('phone_active')){
|
||
uni.navigateTo({
|
||
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
},
|
||
// 分类查询
|
||
classifyEv(){
|
||
this.$requst.post('/api/spu/category').then(res=>{
|
||
if(res.code==0){
|
||
this.classifyList = res.data;
|
||
if(this.classifyList.length){
|
||
// 分类第一次加载，设置分类id
|
||
this.classifyId = this.classifyList[0].id;
|
||
this.$nextTick(()=>{
|
||
//查询商品列表
|
||
this.checkList();
|
||
})
|
||
}
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
},
|
||
// 查询商品列表
|
||
checkList(){
|
||
let params = {
|
||
page:this.page,
|
||
size:this.size,
|
||
category_id: this.classifyId,//分类id
|
||
}
|
||
if(this.page!=1){
|
||
uni.showLoading({
|
||
title:'加载中...'
|
||
})
|
||
}
|
||
this.$requst.post('/api/spu/home',params).then(res=>{
|
||
if(res.code==0){
|
||
if(this.page==1) {
|
||
this.dataList = [[],[]];
|
||
}
|
||
// 设置列表总数
|
||
this.total = res.data.total;
|
||
if(res.data.list.length){
|
||
res.data.list.forEach(item=>{
|
||
if(item.home_display=='big'){
|
||
this.dataList[0].push(item);
|
||
} else {
|
||
let twoObj = {
|
||
amount: item.amount,
|
||
cover: item.cover,
|
||
home_display: item.home_display,
|
||
id: item.id,
|
||
name: item.name,
|
||
original_price: this.$toolAll.tools.changeNum(item.original_price),
|
||
price: this.$toolAll.tools.changeNum(item.price),
|
||
stock: item.stock,
|
||
subtitle: item.subtitle,
|
||
tag: item.tag
|
||
}
|
||
this.dataList[1].push(item);
|
||
}
|
||
})
|
||
}
|
||
if(this.total == (this.dataList[0].length + this.dataList[1].length)){
|
||
this.noMore = true;
|
||
}
|
||
uni.hideLoading();
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
},
|
||
// 顶部轮播查询事件
|
||
checkSwi(){
|
||
checkBanner({position:'home-banner'}).then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.length!=0){
|
||
res.data.forEach(item=>{
|
||
let isVideo = false
|
||
if(item.type!='img') isVideo = true
|
||
let banObj = {
|
||
imgSrc:this.$http + item.src,
|
||
url:item.url,
|
||
isVideo:isVideo,
|
||
poster:this.$http + item.src,
|
||
}
|
||
this.bannerList.push(banObj)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
searchEv(){//搜索事件
|
||
if(uni.getStorageSync('phone_active')){
|
||
uni.navigateTo({
|
||
url:`/pagesB/searchPage/searchPage?keyWorld=${ this.searchText }`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
}
|
||
},
|
||
// 网络检测事件
|
||
checkNet(){
|
||
uni.getNetworkType({
|
||
success: (res)=> {
|
||
if(res.networkType=='none'){
|
||
uni.setStorageSync('isNet',false)
|
||
this.ifNet = false
|
||
if((this.refNum++)==5){
|
||
clearInterval(this.refTime)
|
||
this.noNetwork = '刷新失败'
|
||
this.refNum = 0
|
||
}
|
||
this.publicColor = uni.getStorageSync('publicColor')
|
||
} else {
|
||
uni.setStorageSync('isNet',true)
|
||
this.ifNet = true
|
||
clearInterval(this.refTime)
|
||
if(this.noNetwork == '正在刷新...') {
|
||
getCurrentPages()[getCurrentPages().length - 1].onLoad()
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 刷新事件
|
||
refresh(){
|
||
this.noNetwork = '正在刷新...'
|
||
this.refTime = setInterval(()=>{
|
||
this.checkNet()
|
||
},1000)
|
||
},
|
||
// tab点击事件
|
||
clickTab(index){
|
||
// 设置选中下标
|
||
this.current = index;
|
||
// 调用执行列表查询事件
|
||
this.executeCheckList();
|
||
},
|
||
// 执行列表查询事件
|
||
executeCheckList(){
|
||
this.page = 1;
|
||
this.classifyId = this.classifyList[this.current].id
|
||
// 调用列表查询事件
|
||
this.checkList();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
scroll-view ::-webkit-scrollbar {
|
||
display: none !important;
|
||
width: 0 !important;
|
||
height: 0 !important;
|
||
-webkit-appearance: none;
|
||
background: transparent;
|
||
}
|
||
</style>
|