You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
4.0 KiB
173 lines
4.0 KiB
<template>
|
|
<view class="themes-classify">
|
|
<image class="themes-classify__img" :src="shopData.bgimg" mode="widthFix"></image>
|
|
<block v-if="flag">
|
|
<themes-head
|
|
:navHeight="navHeight"
|
|
:shopData="shopData"
|
|
:isShowNav="false"
|
|
:navIndex="1"
|
|
></themes-head>
|
|
<view class="themes-content">
|
|
<view class="themes-content__left">
|
|
<view
|
|
class="classify-item"
|
|
:class="{ actived: currentIndex === '' }"
|
|
@tap="selectAll()"
|
|
>全部</view
|
|
>
|
|
<view
|
|
class="classify-item"
|
|
v-for="(item, index) in shopCategory"
|
|
:key="index"
|
|
:class="{ actived: currentIndex === index }"
|
|
@tap="categoryHandle(item.id, index)"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<view class="themes-content__right">
|
|
<view class="classify-tabs">
|
|
<view
|
|
class="classify-tabs__item"
|
|
:class="{ actived: isSelectAll }"
|
|
@tap="selectCategoryAll()"
|
|
>全部</view
|
|
>
|
|
<view
|
|
class="classify-tabs__item"
|
|
v-for="(item, index) in shopCategorychild"
|
|
:key="index"
|
|
:class="{ actived: curidx === index && !isSelectAll }"
|
|
@tap="categoryChildHandle(item.id, index)"
|
|
>{{ item.name }}</view
|
|
>
|
|
</view>
|
|
<scroll-view
|
|
class="themes-content__scroll"
|
|
:scroll-y="true"
|
|
@scrolltolower="getmorecomment"
|
|
>
|
|
<classifyShop :shopProduct="shopProduct"></classifyShop>
|
|
<loading v-if="loading"></loading>
|
|
<nomore v-if="nomore"></nomore>
|
|
<nodata text="没有查找到相关商品" v-if="nodata"></nodata>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<loading v-else></loading>
|
|
<!-- 悬浮按钮 -->
|
|
<drag-button></drag-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixin } from '../logic/classify.js';
|
|
import themesHead from "./components/themes-head.vue";
|
|
import classifyShop from "./components/classify-shop.vue";
|
|
|
|
export default {
|
|
mixins: [myMixin],
|
|
components: {
|
|
themesHead,
|
|
classifyShop,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.themes-classify {
|
|
height: 100vh;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
z-index: 1;
|
|
&__img {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 1020rpx;
|
|
}
|
|
}
|
|
.themes-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
margin-top: 28rpx;
|
|
background: #fff;
|
|
position: relative;
|
|
border-radius: 12rpx 12rpx 0 0;
|
|
display: flex;
|
|
flex: 1;
|
|
&__left {
|
|
width: 180rpx;
|
|
flex-shrink: 0;
|
|
background: #f8f9fa;
|
|
overflow-y: scroll;
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
&__right {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
padding: 28rpx 28rpx 0;
|
|
position: relative;
|
|
/deep/ .nodata {
|
|
margin-left: -30rpx;
|
|
}
|
|
}
|
|
&__scroll {
|
|
height: calc(100% - 86rpx);
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
.classify-item {
|
|
height: 110rpx;
|
|
line-height: 110rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
&.actived {
|
|
color: #D11800;
|
|
background: #fff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.classify-tabs {
|
|
display: flex;
|
|
margin-bottom: 30rpx;
|
|
overflow-x: scroll;
|
|
& ::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
&__item {
|
|
flex-shrink: 0;
|
|
min-width: 80rpx;
|
|
box-sizing: border-box;
|
|
margin-right: 20rpx;
|
|
padding: 0 18rpx;
|
|
font-size: 22rpx;
|
|
line-height: 42rpx;
|
|
border-radius: 42rpx;
|
|
color: #666666;
|
|
background: #f7f7f7;
|
|
&.actived {
|
|
background: linear-gradient(150deg, #FFF4F4 0%, #FFE0E1 100%);
|
|
color: #D11800;
|
|
}
|
|
}
|
|
}
|
|
/deep/ .nomore {
|
|
margin-left: 32rpx;
|
|
}
|
|
/deep/ .nodata {
|
|
width: calc(100vw - 180rpx);
|
|
}
|
|
}
|
|
</style>
|