139 lines
4.4 KiB
Vue
139 lines
4.4 KiB
Vue
<template>
|
|
<view>
|
|
<status-container :ifReturn="false" titlet="分类">
|
|
<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
|
|
<view class="dis">
|
|
<view>
|
|
<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
|
|
<view class="pad-x160">
|
|
<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">
|
|
<view class="pad-sx20" :style="{width: newWidth+'px'}">
|
|
<swiper-tab-jl :list="secendCateList" v-model="activeIndex" @changeEv="clickTab" itemColor="#FFFFFF"></swiper-tab-jl>
|
|
</view>
|
|
<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">￥{{$toolAll.tools.changeNum(item.price)}}</view>
|
|
<view @tap.stop="addCartEv(index)" 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"><pitera textStr="——到底啦——"></pitera></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';
|
|
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 - 100,
|
|
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},
|
|
],
|
|
ifloading:false,
|
|
flag:true
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
if(op.index) {
|
|
this.current = op.index;
|
|
}
|
|
},
|
|
methods: {
|
|
scrollBottomEv(e){
|
|
if(this.flag){
|
|
this.flag = false;
|
|
this.ifloading = true;
|
|
setTimeout(()=>{
|
|
for (let i = 0; i < 2; i++) {
|
|
let obj = {
|
|
title:'标题',content:'描述描述描述描述描述描述描述描述描述描述描述描述',price:199,xiaol:99
|
|
}
|
|
this.dataList[e].push(obj);
|
|
}
|
|
this.ifloading = false;
|
|
this.flag = true;
|
|
},1000)
|
|
// 重新渲染组件
|
|
this.$forceUpdate();
|
|
}
|
|
},
|
|
// 一级分类选择
|
|
chooseCate(index) {
|
|
this.current = index;
|
|
},
|
|
goDetail(id) {
|
|
uni.navigateTo({
|
|
url:'/pagesB/shop-detail/shop-detail'
|
|
})
|
|
},
|
|
addCartEv(id) {
|
|
this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
|
|
},
|
|
// 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>
|