269 lines
7.5 KiB
Vue
269 lines
7.5 KiB
Vue
<template>
|
|
<view v-if="isLoding">
|
|
<status-container :ifReturn="false" titlet="分类">
|
|
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
|
<view class="dis">
|
|
<view class="cate-left-box">
|
|
<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
|
|
<view>
|
|
<view class="flexs clips1 pad-z20 fon24"
|
|
@tap="chooseCate(index)" :style="{backgroundColor: current==index ? '#ff3673' : '#FFFFFF',color: current==index ? '#FFFFFF' : '#000000'}"
|
|
v-for="(item,index) in cateList" :key="index" style="min-width: 160rpx;height: 86rpx;line-height: 86rpx;box-sizing: border-box;" >{{item.title}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="pad-zy20" style="width: 100%;position: relative;">
|
|
<view class="cate-title">{{cateList[current].title}}</view>
|
|
<scroll-view :style="{height: scrollHeight +'px'}" style="padding-top: 60rpx;box-sizing: border-box;"
|
|
scroll-y="true"
|
|
:scroll-into-view="doms"
|
|
scroll-with-animation
|
|
@scroll="scrolls"
|
|
@scrolltolower="scrollBottomEv">
|
|
<view class="posir" :id="'product'+index" v-for="(item,index) in dataList" :key="index">
|
|
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(item1.id)" v-for="(item1,index1) in item" :key="index1">
|
|
<view class="cate-txt">
|
|
<image class="radius30 flexs borbot-cc" :src="item1.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
|
|
<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
|
|
<view class="fon30 colb clips2">{{item1.title}}</view>
|
|
<view class="">
|
|
<view class="fon36 textc mar-x36">￥{{item1.price}}</view>
|
|
<view @tap.stop="addCartEv(item1.skuId)" class="colf disjcac fon24 radius30 cate-btn">
|
|
<i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i>
|
|
立即选购
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</status-container>
|
|
<!-- 底部tab -->
|
|
<foot-tab current="1"></foot-tab>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import listOne from '@/components/list/list-one';
|
|
import pitera from '@/components/nothing/pitera';
|
|
import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
|
|
// 底部组件
|
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
|
import {getCartNum} from '@/jsFile/public-api.js';
|
|
import { mapState } from 'vuex'//引入mapState
|
|
export default {
|
|
components:{
|
|
'foot-tab' :footTab,
|
|
listOne,
|
|
pitera,
|
|
swiperTabJl
|
|
},
|
|
data() {
|
|
return {
|
|
current:0,
|
|
scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
|
|
newWidth:uni.getSystemInfoSync().windowWidth,
|
|
cateList:[], //分类导航列表
|
|
activeIndex:0,
|
|
secendCateList:[],
|
|
dataList:[], //商品列表
|
|
total:0,
|
|
flag:true,
|
|
ifLoading:false,
|
|
pid:'',//分类id
|
|
doms:'',
|
|
topList:[],
|
|
heightData: 0,
|
|
scroll:true,
|
|
cateCurrent:0,
|
|
isLoding:false,
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
footHeight: state => state.moduleA.footHeight,
|
|
}),
|
|
},
|
|
onLoad(op) {
|
|
this.scrollHeight = this.scrollHeight - this.footHeight;
|
|
if(op.index) {
|
|
this.cateCurrent = op.index;
|
|
}
|
|
this.checkShopCate();
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title:'喜兜兜-分类',
|
|
path:uni.getStorageSync('page-path-options'),
|
|
imageUrl:'/static/public/xdd-logo.png'
|
|
}
|
|
},
|
|
methods: {
|
|
// 查询商品列表
|
|
checkShopList(){
|
|
uni.showLoading({
|
|
title:'加载中'
|
|
})
|
|
for(let i=0;i<this.cateList.length;i++){
|
|
this.ifLoading = true;
|
|
let params = {
|
|
page:1,
|
|
size:9999,
|
|
category_id:this.cateList[i].id
|
|
}
|
|
this.$requst.post('/api/spu/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,
|
|
skuId:item.skuId,
|
|
imgsrc:item.cover,
|
|
title:item.name,
|
|
price:item.price
|
|
}
|
|
newArr.push(obj);
|
|
})
|
|
this.dataList[i] = newArr;
|
|
if(i == this.cateList.length-1){
|
|
this.current = this.cateCurrent;
|
|
this.doms = 'product'+this.current;
|
|
setTimeout(()=>{
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('.cate-title').boundingClientRect(data => {
|
|
this.heightData = data.height
|
|
}).exec();
|
|
},200)
|
|
this.getNodesInfo();
|
|
this.ifLoading = false;
|
|
uni.hideLoading();
|
|
this.isLoding =true;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
// 查询左侧分类列表
|
|
checkShopCate(){
|
|
this.$requst.post('/api/spu/category',{hasChildren:1}).then(res=>{
|
|
if(res.code==0) {
|
|
this.cateList = res.data;
|
|
setTimeout(()=>{
|
|
// 获取元素宽
|
|
const query = wx.createSelectorQuery().in(this)
|
|
query.select('.cate-left-box').boundingClientRect((rect) => {
|
|
this.newWidth = this.newWidth - rect.width - 20;
|
|
}).exec()
|
|
},200)
|
|
this.checkShopList();
|
|
}
|
|
})
|
|
},
|
|
|
|
scrollBottomEv(){
|
|
console.log('触底了');
|
|
// setTimeout(()=>{
|
|
// this.current =this.cateList.length - 1;
|
|
// },80)
|
|
},
|
|
|
|
// 一级分类选择
|
|
chooseCate(index) {
|
|
if(this.scroll){
|
|
if(this.current !== index){
|
|
this.scroll =false;
|
|
this.current =index
|
|
this.doms = 'product'+index
|
|
}
|
|
this.scroll = true;
|
|
}
|
|
},
|
|
|
|
// 滚动
|
|
scrolls(e){
|
|
this.scroll =false;
|
|
let scrollTop = e.target.scrollTop
|
|
for(let i =0;i<this.topList.length;i++){
|
|
let h1 = this.topList[i];
|
|
let h2 = this.topList[i+1];
|
|
if(scrollTop>=h1&&scrollTop<h2-5){
|
|
this.current = i
|
|
}
|
|
}
|
|
this.scroll =true;
|
|
},
|
|
|
|
// 改变topList
|
|
getNodesInfo(){
|
|
setTimeout(()=>{
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.selectAll('.posir').boundingClientRect().exec((res)=>{
|
|
let nodes = res[0]
|
|
let rel =[];
|
|
nodes.map(item=>{
|
|
rel.push(item.top-uni.getSystemInfoSync().statusBarHeight-50-this.heightData)
|
|
})
|
|
this.topList = rel
|
|
// console.log(this.topList,234)
|
|
})
|
|
},200)
|
|
},
|
|
|
|
|
|
// 计算顶部距离
|
|
setTop(){
|
|
this.getElementData('#index-cate-bg', (res) => {
|
|
let el = res[0];
|
|
this.scrollTop = el.top;
|
|
if(this.scrollTop==this.statusHeight+35){
|
|
this.isShow = false;
|
|
}else{
|
|
this.isShow = true;
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取DOM距离
|
|
getElementData(el, callback) {
|
|
uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
|
|
callback(data[0]);
|
|
});
|
|
},
|
|
|
|
// 跳转详情页
|
|
goDetail(id) {
|
|
uni.navigateTo({
|
|
url:'/pagesB/shop-detail/shop-detail?id='+id
|
|
})
|
|
},
|
|
|
|
// 加入购物车
|
|
addCartEv(id) {
|
|
this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
|
|
if(res.code==0) {
|
|
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
|
|
getCartNum();
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg)
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.cate-btn{background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);width: 170rpx;height: 60rpx;box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);}
|
|
.disac {flex-wrap: wrap;}
|
|
.cate-txt{
|
|
display: flex;
|
|
}
|
|
.cate-title{position: absolute;left:0; top:0; width: 100%; background-color: #fff; font-size: 24rpx;line-height: 60rpx;color: #666; z-index: 9;text-indent: 20rpx;}
|
|
</style>
|