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.
368 lines
9.5 KiB
368 lines
9.5 KiB
<template> |
|
<view class="productSort"> |
|
<view class="header acea-row row-center-wrapper"> |
|
<cu-custom :isBack="true"> |
|
<block slot="content"> |
|
<view @click="goGoodSearch()" class="search acea-row row-between-wrapper" :style="'width:calc('+CustomBarLeft+'px - 54rpx);'"> |
|
<text class="iconfont icon-xiazai5"></text> |
|
|
|
<!-- <image src="../../../static/images/scan.png" /> --> |
|
</view> |
|
</block> |
|
</cu-custom> |
|
</view> |
|
<view :style="[{height:CustomBar + 'px'}]"></view> |
|
|
|
<view class="category-box"> |
|
<swiper class="category" @change="swiperChange" :style="categoryList[0].length <= 5?'height: 190rpx;':''"> |
|
<swiper-item v-for="(category, index) in categoryList" :key="index" class="category-item "> |
|
<view class="acea-row"> |
|
<view class="min-item" v-for="item in category" :key="item.id" @click="goGoodsList(item)"> |
|
<view class="img-box"> |
|
<image class="img" :src="item.pic" mode="aspectFill"></image> |
|
</view> |
|
<view class="title">{{item.cateName}}</view> |
|
</view> |
|
</view> |
|
</swiper-item> |
|
</swiper> |
|
<view class="swiper-dots acea-row row-center"> |
|
<view :class="'dot ' + (swiperCurrent === index ? 'dot-active' : '')" v-for="(dot, index) in categoryList.length" :key="index"></view> |
|
</view> |
|
</view> |
|
|
|
<view class="list-box" :style="categoryList[0].length <= 5?addBottom?heightList[0]:heightList[1]:addBottom?heightList[2]:heightList[3]"> |
|
<view class="nav-box acea-row row-around"> |
|
<view class="item" @click="changeNav(0)"> |
|
<view :class="'title ' + (navActive == 0 ? 'active' : '')">综合</view> |
|
</view> |
|
<view class="item" @click="changeNav(1)"> |
|
<view :class="'title ' + (navActive == 1 ? 'active' : '')">销量</view> |
|
</view> |
|
<view class="item" @click="changeNav(2)"> |
|
<view :class="'title acea-row row-middle ' + (navActive == 2 ? 'active' : '')"> |
|
<view class="">价格</view> |
|
<view :class="'jiantou ' + (priceSort?priceSort == 1?'up':'down':'')"></view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<PromotionGood :benefit="goodsList" /> |
|
</view> |
|
<!-- <view class="aside"> |
|
<view |
|
class="item acea-row row-center-wrapper" |
|
:class="categoryDivindex === navActive ? 'on' : ''" |
|
v-for="(item, categoryDivindex) in category" |
|
:key="categoryDivindex" |
|
@click="asideTap(categoryDivindex)" |
|
> |
|
<text>{{ item.cateName }}</text> |
|
</view> |
|
</view> |
|
<view class="conter"> |
|
<view v-for="(item, eq) in category" :key="eq"> |
|
<view class="listw" v-if="eq === navActive"> |
|
<view class="title acea-row row-center-wrapper" ref="title"> |
|
<view class="line"></view> |
|
<view class="name">{{ item.cateName }}</view> |
|
<view class="line"></view> |
|
</view> |
|
<view class="list acea-row"> |
|
<view |
|
class="item acea-row row-column row-middle" |
|
v-for="(child, categoryIndex) in item.children" |
|
:key="categoryIndex" |
|
@click="goGoodsList(child)" |
|
> |
|
<view class="picture"> |
|
<image :src="child.pic" /> |
|
</view> |
|
<view class="name line1">{{ child.cateName }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view style="height:100rpx;"></view> --> |
|
<Tabbar :pagePath="pagePath"></Tabbar> |
|
</view> |
|
</template> |
|
<script> |
|
import { |
|
getCategory, |
|
getHostProducts |
|
} from "@/api/store"; |
|
// import { trim } from "@/utils"; |
|
import Tabbar from '@/components/Tabbar'; |
|
import PromotionGood from '@/components/PromotionGood' |
|
|
|
export default { |
|
name: "GoodsClass", |
|
components: { |
|
Tabbar, |
|
PromotionGood |
|
}, |
|
props: {}, |
|
data: function() { |
|
return { |
|
CustomBar: this.CustomBar, |
|
CustomBarLeft: this.CustomBarLeft, |
|
addBottom: this.addBottom, |
|
pagePath: '', |
|
swiperCurrent: 0, |
|
categoryList: [], |
|
// category: [], |
|
heightList: [ |
|
'min-height: calc(100vh - 492rpx);', |
|
'min-height: calc(100vh - 452rpx);', |
|
'min-height: calc(100vh - 682rpx);', |
|
'min-height: calc(100vh - 642rpx);' |
|
], |
|
navActive: 0, |
|
priceSort: 0, |
|
goodsList: [], |
|
// search: "", |
|
// lock: false, |
|
}; |
|
}, |
|
watch: { |
|
// "$yroute.query.id": function(n) { |
|
// if (n) { |
|
// this.activeCateId(n); |
|
// } |
|
// } |
|
}, |
|
onLoad() { |
|
uni.hideTabBar(); |
|
let pages = getCurrentPages(); |
|
this.pagePath = '/' + pages[pages.length - 1].route; |
|
}, |
|
onShow() { |
|
|
|
}, |
|
mounted: function() { |
|
this.loadCategoryData(); |
|
}, |
|
methods: { |
|
goGoodSearch() { |
|
this.$yrouter.push("/pages/shop/GoodSearch/index"); |
|
}, |
|
swiperChange(e) { |
|
this.swiperCurrent = e.detail.current; |
|
}, |
|
goGoodsList(child) { |
|
this.$yrouter.push({ |
|
path: "/pages/shop/GoodsList/index", |
|
query: { id: child.id, title: child.cateName } |
|
}); |
|
}, |
|
// activeCateId(n) { |
|
// let index = 0; |
|
// n = parseInt(n); |
|
// if (!n) return; |
|
// this.category.forEach((cate, i) => { |
|
// if (cate.id === n) index = i; |
|
// }); |
|
// if (index !== this.navActive) { |
|
// this.asideTap(index); |
|
// } |
|
// }, |
|
loadCategoryData() { |
|
getCategory().then(res => { |
|
// this.category = res.data; |
|
let arr = [], |
|
minArr = []; |
|
res.data.forEach(val => { |
|
if (minArr.length === 10) { |
|
minArr = []; |
|
} |
|
if (minArr.length === 0) { |
|
arr.push(minArr); |
|
} |
|
minArr.push(val); |
|
}) |
|
this.categoryList = arr; |
|
// this.$nextTick(() => { |
|
// if (this.$yroute.query.id) { |
|
// this.activeCateId(this.$yroute.query.id); |
|
// } |
|
// }); |
|
}); |
|
getHostProducts(1, 20).then(res => { |
|
this.goodsList = res.data; |
|
}); |
|
}, |
|
changeNav(i) { |
|
if(this.navActive == i && this.navActive != 2) return; |
|
this.navActive = i; |
|
if(this.navActive == 2) { |
|
if(this.priceSort == 0) this.priceSort = 1; |
|
else if (this.priceSort == 1) this.priceSort = 2; |
|
else if (this.priceSort == 2) this.priceSort = 1; |
|
} else { |
|
this.priceSort = 0; |
|
} |
|
}, |
|
// submitForm: function() { |
|
// var val = trim(this.search); |
|
// if (val) { |
|
// this.$yrouter.push({ |
|
// path: "/pages/shop/GoodsList/index", |
|
// query: { s: val } |
|
// }); |
|
// setTimeout(() => (this.search = ""), 500); |
|
// } |
|
// }, |
|
// asideTap(index) { |
|
// this.navActive = index; |
|
// } |
|
} |
|
} |
|
</script> |
|
<style lang="less" scoped> |
|
/* .productSort { |
|
height: 100%; |
|
} */ |
|
|
|
.header { |
|
padding-bottom: 12rpx; |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
z-index: 100; |
|
background: #F1F1F1; |
|
width: 750rpx; |
|
.search { |
|
height: 62rpx; |
|
background: #E3E3E3; |
|
border-radius: 16rpx; |
|
padding: 0rpx 16rpx; |
|
margin-left: 26rpx; |
|
margin-right: 22rpx; |
|
.iconfont { |
|
font-size: 30rpx; |
|
color: #3A3A3C; |
|
font-weight: 600; |
|
} |
|
image { |
|
width: 48rpx; |
|
height: 48rpx; |
|
} |
|
} |
|
} |
|
|
|
.category-box { |
|
padding: 20rpx 20rpx 32rpx; |
|
swiper { |
|
width: 710rpx; |
|
height: 380rpx; |
|
swiper-item { |
|
padding: 0rpx 12rpx; |
|
.min-item { |
|
margin-bottom: 20rpx; |
|
margin-right: 18rpx; |
|
.img-box { |
|
background: #FFFFFF; |
|
width: 124rpx; |
|
height: 124rpx; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15); |
|
border-radius: 16rpx; |
|
.img { |
|
width: 124rpx; |
|
height: 124rpx; |
|
border-radius: 16rpx; |
|
} |
|
} |
|
.title { |
|
padding-top: 16rpx; |
|
font-size: 22rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 30rpx; |
|
text-align: center; |
|
} |
|
} |
|
.min-item:nth-child(5n) { |
|
margin-right: 0rpx; |
|
} |
|
} |
|
} |
|
|
|
.swiper-dots { |
|
.dot { |
|
width: 92rpx; |
|
height: 6rpx; |
|
background: #2DB5AE; |
|
margin: 0rpx 4rpx; |
|
opacity: 0.24; |
|
} |
|
.dot-active { |
|
opacity: 1; |
|
transition: opacity 2s cubic-bezier(.18,.89,.17,.88); |
|
} |
|
} |
|
} |
|
|
|
.list-box { |
|
width: 100vw; |
|
background: #FFFFFF; |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
.nav-box { |
|
width: 100vw; |
|
height: 104rpx; |
|
padding: 32rpx 32rpx 26rpx; |
|
.item { |
|
min-width: 66rpx; |
|
text-align: center; |
|
position: relative; |
|
.title { |
|
font-size: 26rpx; |
|
font-family: SourceHanSansSCVF; |
|
font-weight: 400; |
|
color: #999999; |
|
line-height: 38rpx; |
|
.jiantou { |
|
width: 0rpx; |
|
height: 0rpx; |
|
border-top: 0rpx solid transparent; |
|
border-left: 6rpx solid transparent; |
|
border-bottom: 10rpx solid transparent; |
|
border-right: 6rpx solid transparent; |
|
margin-left: 4rpx; |
|
} |
|
.up { |
|
border-top: 0rpx solid transparent; |
|
border-bottom: 10rpx solid #999999; |
|
} |
|
.down { |
|
border-top: 10rpx solid #999999; |
|
border-bottom: 0rpx solid transparent; |
|
} |
|
} |
|
.active { |
|
color: #3A3A3C; |
|
font-weight: 500; |
|
} |
|
.title::after { |
|
display: block; |
|
content: ''; |
|
width: 100%; |
|
height: 4rpx; |
|
background: #2DB5AE; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
opacity: 0; |
|
transform:scaleX(0); |
|
transition: all .2s cubic-bezier(.18,.89,.17,.88),opacity .15s ease; |
|
} |
|
.active::after { |
|
opacity: 1; |
|
transform: scaleX(1); |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|