212 lines
7.6 KiB
Vue
212 lines
7.6 KiB
Vue
<template>
|
|
<view>
|
|
<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 class="pad-x160">
|
|
<view class="flexs clips1 pad-z20 fon24"
|
|
@tap="chooseCate(index,item.id)" :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">
|
|
<view class="pad-sx20" :style="{width: newWidth+'px'}">
|
|
<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl>
|
|
</view>
|
|
<scroll-view scroll-y="true" @scrolltolower="scrollBottomEv" :style="{height: scrollHeight +'px'}">
|
|
<view class=" posir" style="padding-bottom: 220rpx;">
|
|
<view class="disac bbt-d9 pad-sx30" @tap="goDetail(index)" v-for="(item,index) in dataList" :key="index">
|
|
<image class="radius30 flexs borbot-cc" :src="item.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
|
|
<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
|
|
<view class="fon30 colb clips2">{{item.title}}</view>
|
|
<view class="">
|
|
<view class="fon36 textc mar-x36">￥{{item.price}}</view>
|
|
<view @tap.stop="addCartEv(item.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 class="mar-s40" v-if="total==dataList.length"><pitera textStr="——到底啦——"></pitera></view>
|
|
<view class="loading-box" v-show="ifLoading" style="position: absolute;left: 50%;transform: translateX(-50%);" :style="{bottom:footHeight+10+'px'}">
|
|
<view class="loader-16"></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 { 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:[
|
|
// {id:1,title:'推荐套装'},
|
|
// {id:1,title:'推荐套装'},
|
|
// {id:1,title:'推荐套装'},
|
|
// {id:1,title:'推荐套装'},
|
|
// {id:1,title:'推荐套装'},
|
|
// {id:1,title:'推荐套装'},
|
|
// {id:1,title:'推荐套装'},
|
|
// {id:1,title:'推荐套装'},
|
|
// {id:1,title:'推荐套装'},
|
|
// {id:1,title:'推荐套装'},
|
|
],
|
|
secendCateList:[
|
|
{title:'标题一'},
|
|
{title:'标题二标题二'},
|
|
{title:'标题三'},
|
|
{title:'标题四'},
|
|
{title:'标题五'},
|
|
{title:'标题六标题六标题六'},
|
|
{title:'标题七'},
|
|
{title:'标题八'},
|
|
{title:'标题九'},
|
|
],
|
|
activeIndex:0,
|
|
dataList:[
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题',price:199},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
// {imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg', title:'标题标题标题标题标题标题标题',price:20000},
|
|
],
|
|
page:1,
|
|
size:10,
|
|
total:0,
|
|
flag:true,
|
|
ifLoading:false,
|
|
pid:''//分类id
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
footHeight: state => state.moduleA.footHeight,
|
|
}),
|
|
},
|
|
onLoad(op) {
|
|
console.log(this.footHeight);
|
|
this.scrollHeight = this.scrollHeight - this.footHeight;
|
|
if(op.index) {
|
|
this.current = op.index;
|
|
}
|
|
this.checkShopCate();
|
|
},
|
|
methods: {
|
|
// 查询商品列表
|
|
checkShopList(id){
|
|
this.ifLoading = true;
|
|
let params = {
|
|
page:this.page,// query 否 1 页数
|
|
size:this.size,// query 否 10 每页数量
|
|
pid:id
|
|
}
|
|
this.$requst.post('/api/spu/list',params).then(res=>{
|
|
if(res.code==0) {
|
|
this.total = res.data.total;
|
|
if(this.page==1) this.dataList = [];
|
|
if(res.data.list.length) {
|
|
res.data.list.forEach(item=>{
|
|
let obj = {
|
|
id:item.id,
|
|
skuId:item.skuId,
|
|
imgsrc:item.cover,
|
|
title:item.name,
|
|
price:this.$toolAll.tools.changeNum(parseInt(item.price)+'')
|
|
}
|
|
this.dataList.push(obj);
|
|
})
|
|
}
|
|
}
|
|
this.ifLoading = false;
|
|
})
|
|
},
|
|
// 查询左侧分类列表
|
|
checkShopCate(){
|
|
this.$requst.post('/api/spu/category').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.pid = this.cateList[0].id;
|
|
this.checkShopList(this.cateList[0].id);
|
|
}
|
|
})
|
|
},
|
|
scrollBottomEv(){
|
|
console.log('触底了');
|
|
if(this.total!=this.dataList.length) {
|
|
this.page++;
|
|
this.checkShopList(this.pid);
|
|
}
|
|
},
|
|
// 一级分类选择
|
|
chooseCate(index,id) {
|
|
this.current = index;
|
|
this.page = 1;
|
|
this.pid = id;
|
|
this.checkShopList(id);
|
|
},
|
|
goDetail(id) {
|
|
uni.navigateTo({
|
|
url:'/pagesB/shop-detail/shop-detail'
|
|
})
|
|
},
|
|
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('加入购物车成功(*^▽^*)')
|
|
} else {
|
|
this.$toolAll.tools.showToast(res.msg)
|
|
}
|
|
})
|
|
},
|
|
// tab点击事件
|
|
clickTab(index){
|
|
this.activeIndex = index;
|
|
},
|
|
}
|
|
}
|
|
</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);}
|
|
</style>
|