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.
591 lines
16 KiB
591 lines
16 KiB
<template>
|
|
<!-- 商品分类第一种布局样式 -->
|
|
<view class='productSort copy-data' :style="{height:pageHeight}">
|
|
<view :style="{paddingTop: sysHeight + 'px'}" class="text--w111-999">
|
|
<view class="h-80 px-32 flex-y-center">
|
|
<!-- #ifdef MP -->
|
|
<view class="flex-1 h-58 flex-y-center rd-30rpx bg--w111-fff px-32" @tap="goSearch">
|
|
<!-- #endif -->
|
|
<!-- #ifndef MP -->
|
|
<view class="w-full h-58 flex-y-center rd-30rpx bg--w111-fff px-32" @tap="goSearch">
|
|
<!-- #endif -->
|
|
<text class="iconfont icon-ic_search fs-28"></text>
|
|
<text class="fs-24 pl-18">请输入商品名称1</text>
|
|
</view>
|
|
<!-- 胶囊占据的位置 -->
|
|
<!-- #ifdef MP -->
|
|
<view class="ml-12" :style="'width:'+getHeight.barWidth+'px'"></view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<view class="scroll-box">
|
|
<view class='aside'>
|
|
<scroll-view scroll-y="true" scroll-with-animation='true' :style="[asideHeights]">
|
|
<view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'
|
|
v-for="(item,index) in productList" :key="index" @click='tap(index,"b"+index)'>
|
|
<view class="top-ra">
|
|
<text></text>
|
|
</view>
|
|
<text>{{item.cate_name}}</text>
|
|
<view class="bottom-ra">
|
|
<text></text>
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="item" v-if="isFooter"></view>
|
|
<!-- #endif -->
|
|
</scroll-view>
|
|
</view>
|
|
<view class='conter' v-if="level == 2">
|
|
<scroll-view scroll-y="true" :scroll-into-view="toView" @scroll="scroll" scroll-with-animation='true'
|
|
class="conterScroll height-add">
|
|
<block v-for="(item,index) in productList" :key="index">
|
|
<view class='listw' :id="'b'+index">
|
|
<view class="card mt-20">
|
|
<view class="title" @tap="goPage(1,`/pages/goods/goods_list/index?cid=${item.id}&title=${item.cate_name}`)">{{item.cate_name}} <text class="iconfont icon-ic_rightarrow"></text> </view>
|
|
<view class="grid_box">
|
|
<block v-for="(itemn,indexn) in item.children" :key="indexn">
|
|
<navigator hover-class='none'
|
|
:url='"/pages/goods/goods_list/index?sid="+itemn.id+"&title="+itemn.cate_name'
|
|
class='item acea-row row-column row-middle'>
|
|
<easy-loadimage
|
|
mode="widthFix"
|
|
:image-src="itemn.pic"
|
|
width="130rpx"
|
|
height="130rpx"
|
|
borderRadius="12rpx"></easy-loadimage>
|
|
<view class='cate_name line1'>{{itemn.cate_name}}</view>
|
|
</navigator>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view :style='"height:"+(height-heightDiv)+"rpx;"'></view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="conter relative" v-else-if="level == 3">
|
|
<view class="flex-1 pl-24 pr-20 abs-lt" v-if="productList.length && productList[navActive].children.length">
|
|
<view class="flex mt-24 mb-16">
|
|
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-464"
|
|
show-scrollbar="false">
|
|
<view class="inline-block mr-16"
|
|
v-for="(item,index) in productList[navActive].children" :key="index">
|
|
<view class="w-144 h-56 rd-30rpx bg--w111-fff flex-center fs-24 text--w111-333"
|
|
:class="index == tabClick ? 'cate_active':''"
|
|
@tap="longClick(index,item)">{{item.cate_name}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="bntCon w-56 h-56 rd-30rpx bg--w111-fff flex-center ml-16"
|
|
@tap="openCateDrawer()">
|
|
<text class="iconfont icon-ic_downarrow fs-32 text--w111-333"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="h-96" v-if="productList.length && productList[navActive].children.length"></view>
|
|
<view v-if="imageShow">
|
|
<emptyPage title="暂无商品，去看点别的吧～" ></emptyPage>
|
|
</view>
|
|
<scroll-view scroll-y="true" scroll-with-animation='true'
|
|
class="conterScroll" :style="[conterHeights]" v-if="productList.length">
|
|
<block>
|
|
<view class='listw' v-for="(item,index) in productList[navActive].children" v-if="tabClick == index">
|
|
<view class="card mb-20" v-if="item.children && item.children.length">
|
|
<view class="title" @tap="goPage(1,`/pages/goods/goods_list/index?sid=${item.id}&title=${item.cate_name}`)">
|
|
<text>{{item.cate_name}} </text>
|
|
<text class="iconfont icon-ic_rightarrow"></text>
|
|
</view>
|
|
<view class="grid_box">
|
|
<block v-for="(itemn,indexn) in item.children" :key="indexn">
|
|
<navigator hover-class='none'
|
|
:url='"/pages/goods/goods_list/index?tid="+itemn.id+"&title="+itemn.cate_name'
|
|
class='item acea-row row-column row-middle'>
|
|
<easy-loadimage
|
|
mode="widthFix"
|
|
:image-src="itemn.pic"
|
|
width="130rpx"
|
|
height="130rpx"
|
|
borderRadius="12rpx"></easy-loadimage>
|
|
<view class='cate_name line1'>{{itemn.cate_name}}</view>
|
|
</navigator>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<view :style='"height:"+(height-heightDiv)+"rpx;"'></view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="more_box abs-lt w-full bg--w111-fff rd-b-32rpx z-20" v-if="showCateDrawer && level == 3">
|
|
<view :style="{paddingTop: sysHeight + 'px'}">
|
|
<view class="h-80 px-32 flex-y-center">
|
|
<!-- #ifdef MP -->
|
|
<view class="flex-1 h-58 flex-y-center rd-30rpx bg--w111-f5f5f5 px-32">
|
|
<!-- #endif -->
|
|
<!-- #ifndef MP -->
|
|
<view class="w-full h-58 flex-y-center rd-30rpx bg--w111-f5f5f5 px-32">
|
|
<!-- #endif -->
|
|
<text class="iconfont icon-ic_search fs-28"></text>
|
|
<text class="fs-24 text--w111-999 pl-18">请输入商品名称</text>
|
|
</view>
|
|
<!-- 胶囊占据的位置 -->
|
|
<!-- #ifdef MP -->
|
|
<view class="ml-12" :style="'width:'+getHeight.barWidth+'px'"></view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<view class="pt-32 pl-30 pr-30">
|
|
<view>
|
|
<view class="fs-32 text--w111-333" v-if="productList[navActive].children.length">
|
|
{{productList[navActive].children[tabClick].cate_name}}
|
|
</view>
|
|
<view class="grid-column-4 grid-gap-24rpx mt-24">
|
|
<view class="w-154 h-56 rd-30rpx flex-center fs-24 text--w111-333 bg--w111-f5f5f5"
|
|
v-for="(item,index) in productList[navActive].children" :key="index"
|
|
@tap="longClick(index,item)"
|
|
:class="index===tabClick?'cate_active':''">
|
|
{{item.cate_name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-center fs-24 text--w111-999 h-80 mt-32" @tap="closeCateDrawer">
|
|
<text>点击收起 <text class="iconfont icon-ic_uparrow pl-4"></text> </text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mask" v-show="showCateDrawer" @tap="closeCateDrawer"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
let windowBottom = uni.getSystemInfoSync().windowBottom;
|
|
import {getCategoryList} from '@/api/store.js';
|
|
import { getCategoryVersion } from '@/api/api.js';
|
|
import {mapState,mapGetters} from "vuex"
|
|
import emptyPage from '@/components/emptyPage.vue';
|
|
const app = getApp();
|
|
export default {
|
|
props: {
|
|
level:{
|
|
type:Number,
|
|
default:2
|
|
},
|
|
isFooter:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
pdHeight:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
},
|
|
components: {
|
|
emptyPage
|
|
},
|
|
data() {
|
|
return {
|
|
navlist: [],
|
|
productList: [],
|
|
navActive: 0,
|
|
number: "",
|
|
height: 0,
|
|
heightDiv: 0,
|
|
hightArr: [],
|
|
toView: "",
|
|
tabbarH: 0,
|
|
footH: 0,
|
|
windowHeight: 0,
|
|
pageHeight: '100%',
|
|
sysHeight: sysHeight,
|
|
// #ifdef APP-PLUS
|
|
pageHeight: app.globalData.windowHeight,
|
|
// #endif
|
|
footerStatus: false,
|
|
lock: false,
|
|
tabClick:0,
|
|
showCateDrawer: false,
|
|
getHeight: this.$util.getWXStatusHeight()
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
cartNum: state => state.indexData.cartNum
|
|
}),
|
|
asideHeights(){
|
|
let H = `calc(100% - ${this.pdHeight*2 + 96}rpx - env(safe-area-inset-bottom))`
|
|
return{
|
|
//#ifdef H5
|
|
height: this.isFooter?H:'100%'
|
|
//#endif
|
|
// #ifdef MP || APP-PLUS
|
|
height: this.isFooter?H:'100%'
|
|
//#endif
|
|
}
|
|
},
|
|
conterHeights(){
|
|
let H = `calc(100% - ${this.pdHeight*2 + 192}rpx - env(safe-area-inset-bottom))`
|
|
let H2 = `calc(100% - ${this.pdHeight*2 + 192}rpx - env(safe-area-inset-bottom))`
|
|
let HZ = `calc(100% - 96rpx - env(safe-area-inset-bottom))`
|
|
return{
|
|
//#ifdef H5
|
|
height: this.isFooter?H:HZ
|
|
//#endif
|
|
// #ifdef MP || APP-PLUS
|
|
height: this.isFooter?H2:HZ
|
|
//#endif
|
|
}
|
|
},
|
|
imageShow(){
|
|
let obj = this.productList.length && this.productList[this.navActive].children.length && this.productList[this.navActive].children[this.tabClick] &&
|
|
this.productList[this.navActive].children[this.tabClick].hasOwnProperty("children")
|
|
return !obj
|
|
}
|
|
},
|
|
// watch:{
|
|
// cartNum(){
|
|
// this.getCartList(1);
|
|
// }
|
|
// },
|
|
mounted() {
|
|
let that = this
|
|
this.getAllCategory();
|
|
// #ifdef H5
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
that.pageHeight = res.windowHeight + 'px'
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
methods: {
|
|
footHeight(data) {
|
|
this.footH = data
|
|
},
|
|
closeCateDrawer() {
|
|
this.showCateDrawer = false;
|
|
},
|
|
openCateDrawer() {
|
|
this.showCateDrawer = true;
|
|
},
|
|
// 导航栏点击
|
|
longClick(index, item) {
|
|
this.tabClick = index; //设置导航点击了哪一个
|
|
// this.sid = this.categoryErList[index].id;
|
|
// this.page = 1;
|
|
// this.loadend = false;
|
|
// this.tempArr = [];
|
|
// this.productslist();
|
|
},
|
|
infoScroll: function() {
|
|
let that = this;
|
|
let len = that.productList.length;
|
|
this.number = that.productList[len - 1].children.length;
|
|
let height = 0;
|
|
let hightArr = [];
|
|
//设置商品列表高度
|
|
let query = uni.createSelectorQuery().in(this);
|
|
query.select(".conter").boundingClientRect();
|
|
query.exec(function(res){
|
|
height = res[0].height;
|
|
})
|
|
for (let i = 0; i < len; i++) {
|
|
//获取元素所在位置
|
|
let query = uni.createSelectorQuery().in(this);
|
|
let idView = "#b" + i;
|
|
query.select(idView).boundingClientRect();
|
|
query.exec(function(res) {
|
|
let top = res[0].top;
|
|
that.hightArr.push(top);
|
|
if(len == that.hightArr.length){
|
|
//设置转化比例
|
|
uni.getSystemInfo({
|
|
success: function(res) {
|
|
let per = (750 / res.windowWidth);
|
|
that.height = height * per;
|
|
that.heightDiv = (that.hightArr[that.hightArr.length-1] - that.hightArr[that.hightArr.length-2])*per;
|
|
},
|
|
});
|
|
}
|
|
});
|
|
};
|
|
},
|
|
tap: function(index, id) {
|
|
this.toView = id;
|
|
this.navActive = index;
|
|
this.tabClick = 0;
|
|
this.$set(this, 'lock', true);
|
|
},
|
|
getAllCategory() {
|
|
getCategoryList().then(res => {
|
|
this.productList = res.data;
|
|
if(this.level == 2){
|
|
this.$nextTick(res => {
|
|
this.infoScroll();
|
|
})
|
|
}
|
|
})
|
|
},
|
|
scroll: function(e) {
|
|
let scrollTop = e.detail.scrollTop;
|
|
let scrollArr = this.hightArr;
|
|
if (this.lock) {
|
|
this.$set(this, 'lock', false);
|
|
return;
|
|
}
|
|
for (let i = 0; i < scrollArr.length; i++) {
|
|
if (scrollTop >= 0 && scrollTop < scrollArr[1] - scrollArr[0]) {
|
|
this.navActive = 0
|
|
} else if (scrollTop >= scrollArr[i] - scrollArr[0] && scrollTop < scrollArr[i + 1] - scrollArr[
|
|
0]) {
|
|
this.navActive = i
|
|
} else if (scrollTop >= scrollArr[scrollArr.length - 1] - scrollArr[0]) {
|
|
this.navActive = scrollArr.length - 1
|
|
}
|
|
}
|
|
uni.$emit('scroll');
|
|
},
|
|
searchSubmitValue: function(e) {
|
|
if (this.$util.trim(e.detail.value).length > 0)
|
|
uni.navigateTo({
|
|
url: '/pages/goods/goods_list/index?searchValue=' + e.detail.value
|
|
})
|
|
else
|
|
return this.$util.Tips({
|
|
title: '请填写要搜索的产品信息'
|
|
});
|
|
},
|
|
goSearch() {
|
|
uni.navigateTo({
|
|
url: '/pages/goods/goods_search/index'
|
|
})
|
|
},
|
|
goPage(type, url){
|
|
if(type == 1){
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}else if(type == 2){
|
|
uni.switchTab({
|
|
url
|
|
})
|
|
}else if(type == 3){
|
|
uni.navigateBack();
|
|
}
|
|
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
page {
|
|
/* height: 100%; */
|
|
background: #f5f5f5;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.bntCon{
|
|
position: relative;
|
|
&:before{
|
|
position: absolute;
|
|
content: '';
|
|
width: 6rpx;
|
|
height: 80rpx;
|
|
background: radial-gradient( rgba(0,0,0,0.082) 0%, rgba(0,0,0,0) 100%);
|
|
left:-22rpx;
|
|
}
|
|
}
|
|
|
|
/deep/uni-scroll-view{
|
|
padding-bottom: 0!important;
|
|
}
|
|
.height-add {
|
|
height: 100%;
|
|
}
|
|
.sys-title {
|
|
z-index: 10;
|
|
position: relative;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 34rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
.productSort {
|
|
display: flex;
|
|
flex-direction: column;
|
|
//#ifdef MP
|
|
height: calc(100vh - var(--window-top)) !important;
|
|
//#endif
|
|
//#ifndef MP
|
|
height: 100vh
|
|
//#endif
|
|
}
|
|
|
|
.productSort .header {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.productSort .header .input {
|
|
width: 700rpx;
|
|
height: 60rpx;
|
|
background-color: #fff;
|
|
border-radius: 50rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 25rpx;
|
|
}
|
|
|
|
.productSort .header .input .iconfont {
|
|
font-size: 35rpx;
|
|
color: #555;
|
|
}
|
|
|
|
.productSort .header .input .placeholder {
|
|
color: #999;
|
|
}
|
|
|
|
.productSort .header .input input {
|
|
font-size: 26rpx;
|
|
height: 100%;
|
|
width: 597rpx;
|
|
}
|
|
|
|
.productSort .scroll-box {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
// #ifndef MP
|
|
uni-scroll-view {
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
// #endif
|
|
|
|
.productSort .aside {
|
|
width: 168rpx;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.productSort .aside .item {
|
|
height: 96rpx;
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
|
|
.productSort .aside .item.on {
|
|
background-color: #f5f5f5;
|
|
width: 100%;
|
|
color: var(--view-theme);
|
|
font-weight: 500;
|
|
position: relative;
|
|
&:before{
|
|
content:'';
|
|
width:6rpx;
|
|
height: 48rpx;
|
|
background-color: var(--view-theme);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-radius: 0 10rpx 10rpx 0;
|
|
}
|
|
.top-ra{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background-color: #f5f5f5;
|
|
position: absolute;
|
|
right: 0;
|
|
top:-32rpx;
|
|
text{
|
|
position: absolute;
|
|
top:0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
display: inline-block;
|
|
border-radius: 0 0 24rpx 0;
|
|
}
|
|
}
|
|
.bottom-ra{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background-color: #f5f5f5;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom:-32rpx;
|
|
text{
|
|
position: absolute;
|
|
top:0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
display: inline-block;
|
|
border-radius: 0 24rpx 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.productSort .conter {
|
|
flex: 1;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
padding: 0 20rpx;
|
|
position: relative;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.productSort .conter .banner{
|
|
width: 100%;
|
|
height: 160rpx;
|
|
border-radius: 16rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.productSort .conter .card{
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx 24rpx;
|
|
}
|
|
.productSort .conter .card .title{
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 40rpx;
|
|
}
|
|
.productSort .conter .card .iconfont{
|
|
font-size: 24rpx;
|
|
}
|
|
.productSort .conter .card .grid_box{
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-template-rows: auto;
|
|
grid-row-gap: 32rpx;
|
|
grid-column-gap: 50rpx;
|
|
margin-top: 20rpx;
|
|
.cate_name{
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
line-height: 34rpx;
|
|
margin-top: 12rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.cate_active {
|
|
color: var(--view-theme);
|
|
background: var(--view-minorColorT);
|
|
border: 1px solid var(--view-theme);
|
|
}
|
|
.pl-30 {
|
|
padding-left: 30rpx;
|
|
}
|
|
</style>
|
|
|