378 lines
12 KiB
Vue
378 lines
12 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 id="tab" :list="classifyList" v-model="current" @input="clickTab" itemColor="#000000" lineColor="#000000">
|
||
<!-- 自定义tabs样式 -->
|
||
<!-- <view slot="title"></view> -->
|
||
</swiper-tab>
|
||
</view>
|
||
<view class="pad-zy40" style="padding-bottom: 66px;">
|
||
<swiper class="swiper-page pad-s40" :style="{ height: swiperHeight - (statusBarHeight + 126) +'px'}" :current="current" @change="swiperChange">
|
||
<swiper-item v-for="(item,index) in classifyList" :key="index">
|
||
<scroll-view :scroll-y="isScroll" @scrolltolower="scrollBottomEv" :style="{ height: swiperHeight - (statusBarHeight + 126) +'px'}">
|
||
<!-- 活动商品 start -->
|
||
<view v-for="(item1,index1) in dataList[index][0]" :key="index1" class="mar-x50">
|
||
<h1 class="fon36 bold">{{item1.name}}</h1>
|
||
<view class="colpeili fon26 mar-s20 mar-x40 clips1">{{item1.subtitle}}</view>
|
||
<view class="posir" @tap="goDetail(item1.id)">
|
||
<image class="radius30 animated fadeIn" :src="item1.cover" mode="aspectFill" lazy-load style="height: 425rpx;width: 100%;"></image>
|
||
<view v-if="item1.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||
</view>
|
||
</view>
|
||
<!-- 活动商品 end -->
|
||
|
||
<!-- 子商品 start -->
|
||
<view class="disjbac fw">
|
||
<view @tap="goDetail(item2.id)" class="width47 mar-x50 posir" v-for="(item2,index2) in dataList[index][1]" :key="index2">
|
||
<image :src="item2.cover" mode="aspectFill" lazy-load style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item2.name}}</view>
|
||
<view class="fon30 colpeili">￥{{item2.price}}</view>
|
||
<view v-if="item2.tag!=''" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
||
</view>
|
||
</view>
|
||
<!-- 子商品 end -->
|
||
<!-- 暂无更多数据 -->
|
||
<pitera v-if="noMore"></pitera>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</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列表
|
||
swiperHeight:uni.getSystemInfoSync().screenHeight,
|
||
publicColor:'', // 主题颜色
|
||
showTop:false, // 是否显示回到顶部
|
||
dataList:[], // 数据列表
|
||
page:1, // 第几页
|
||
size:200, // 数量
|
||
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;
|
||
let info = uni.createSelectorQuery().select('.tab-nav');
|
||
info.boundingClientRect(data=>{
|
||
if(data.top==this.statusBarHeight){
|
||
this.isScroll = true;
|
||
} else {
|
||
this.isScroll = false;
|
||
}
|
||
}).exec();
|
||
},
|
||
onHide() {
|
||
// 关闭自动轮播
|
||
this.isAutoPlay = false;
|
||
},
|
||
onUnload() {
|
||
// 关闭自动轮播
|
||
this.isAutoPlay = false;
|
||
},
|
||
onReady() {
|
||
// 获取ID为tab元素的信息
|
||
// uni.createSelectorQuery().in(this).select('#tab').boundingClientRect().exec(rect => {
|
||
// this.swiperHeight = this.swiperHeight - rect[0].height
|
||
// });
|
||
},
|
||
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;
|
||
},
|
||
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.classifyList.forEach(item=>{
|
||
this.dataList.push([[],[]]);
|
||
})
|
||
this.$nextTick(()=>{
|
||
//查询商品列表
|
||
this.checkList();
|
||
})
|
||
}
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
}).catch(err=>{
|
||
this.$toolAll.tools.showToast(err.msg);
|
||
})
|
||
},
|
||
// 视图容器触底事件
|
||
scrollBottomEv(){
|
||
// 判断总数是否等于数组长度，如果相等显示暂无更多，否则继续执行列表事件
|
||
if(this.total!=(this.dataList[this.current][0].length+this.dataList[this.current][1].length)){
|
||
// 页数每次+1
|
||
this.page++
|
||
this.checkList(); // 调用列表事件
|
||
} else {
|
||
this.noMore = true;
|
||
}
|
||
},
|
||
// 查询商品列表
|
||
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.current] = [[],[]];
|
||
}
|
||
// 设置列表总数
|
||
this.total = res.data.total;
|
||
if(res.data.list.length){
|
||
res.data.list.forEach(item=>{
|
||
if(item.home_display=='big'){
|
||
this.dataList[this.current][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[this.current][1].push(item);
|
||
}
|
||
})
|
||
}
|
||
if(this.total == (this.dataList[this.current][0].length + this.dataList[this.current][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;
|
||
},
|
||
// 列表滑动事件
|
||
swiperChange(e){
|
||
this.current = e.detail.current;
|
||
// 调用执行列表查询事件
|
||
this.executeCheckList();
|
||
},
|
||
// 执行列表查询事件
|
||
executeCheckList(){
|
||
this.page = 1;
|
||
this.classifyId = this.classifyList[this.current].id
|
||
// 调用列表查询事件
|
||
this.checkList();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|