hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-02-02 03:34:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

分类页面：多级分类布局

Browse Source
This commit is contained in:
sfmind 2022-04-17 14:43:07 +08:00
parent 7c6e0b09ce
commit 082c686739
1 changed files with 100 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
yudao-ui-app/pages/category/category.vue
View File

@ -17,25 +17,19 @@
<view class="category-image"> <view class="category-image">
<u--image :showLoading="true" :src="categoryList[currentIndex].image" width="530rpx" height="160rpx" @click="click"></u--image> <u--image :showLoading="true" :src="categoryList[currentIndex].image" width="530rpx" height="160rpx" @click="click"></u--image>
</view> </view>
<view> <view class="sub-category-box" v-for="(item, index) in categoryList[currentIndex].children" :key="item.id">
<u-list class="prod-list" @scrolltolower="scrolltolower"> <view class="sub-category-header">
<u-list-item v-for="(item, index) in productList" :key="item.id"> <view class="title">{{ item.title }}</view>
<view class="prod-item" @click="handleProdItemClick(item.id)"> <view class="more">查看更多</view>
<u--image class="prod-image" width="140rpx" height="140rpx" :src="item.image"></u--image>
<view class="item-info">
<view class="info-text">
<u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
<u-gap height="2px"></u-gap>
<u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
</view> </view>
<view class="price-and-cart"> <u-grid class="sub-category-grid" col="3">
<custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price> <u-grid-item v-for="(subItem, index) in item.category" :key="subItem.id">
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon> <view class="sub-category-item">
<u-icon name="photo" :size="80"></u-icon>
<text class="sub-category-title">{{ subItem.title }}</text>
</view> </view>
</view> </u-grid-item>
</view> </u-grid>
</u-list-item>
</u-list>
</view> </view>
</view> </view>
</view> </view>
@ -43,119 +37,85 @@
</template> </template>
<script> <script>
import UText from '../../uni_modules/uview-ui/components/u-text/u-text'
export default { export default {
components: { UText },
data() { data() {
return { return {
currentIndex: 0, currentIndex: 0,
categoryList: [ categoryList: []
{
id: 1,
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
name: '关注'
},
{
id: 2,
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
name: '推荐'
},
{
id: 3,
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
name: '电影'
},
{
id: 4,
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
name: '科技'
},
{
id: 5,
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
name: '音乐'
},
{
id: 6,
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
name: '美食'
},
{
id: 7,
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
name: '文化'
},
{
id: 8,
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
name: '财经'
},
{
id: 9,
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
name: '手工'
} }
], },
productList: [ onLoad() {
for (let i = 0; i < 10; i++) {
this.categoryList.push({
id: i,
image: '',
name: '商品分类' + i,
children: [
{ {
id: 0, id: 0,
image: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '分类' + i + '-1',
title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。', category: [
desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。', {
price: '13.00' id: 0,
image: '',
title: '分类' + i + '-1-1'
}, },
{ {
id: 2, id: 2,
image: 'https://cdn.uviewui.com/uview/album/2.jpg', image: '',
title: '商品222', title: '分类' + i + '-1-2'
desc: '',
price: '23.00'
}, },
{ {
id: 3, id: 3,
image: 'https://cdn.uviewui.com/uview/album/3.jpg', image: '',
title: '商品333', title: '分类' + i + '-1-3'
desc: '商品描述信息2', }
price: '33.00' ]
}, },
{ {
id: 4, id: 1,
image: 'https://cdn.uviewui.com/uview/album/4.jpg', title: '分类' + i + '-2',
title: '商品444', category: [
desc: '商品描述信息4', {
price: '43.00' id: 0,
image: '',
title: '分类' + i + '-2-1'
}, },
{ {
id: 5, id: 2,
image: 'https://cdn.uviewui.com/uview/album/5.jpg', image: '',
title: '商品555', title: '分类' + i + '-2-2'
desc: '商品描述信息5', },
price: '53.00' {
id: 3,
image: '',
title: '分类' + i + '-2-3'
} }
] ]
} }
]
})
}
}, },
onLoad() {},
methods: { methods: {
handleSearchClick(e) { handleSearchClick(e) {
console.log('监听点击准备跳转页面') uni.$u.route('/pages/search/search')
}, },
handleCategoryClick(index) { handleCategoryClick(index) {
if (this.currentIndex !== index) { if (this.currentIndex !== index) {
this.currentIndex = index this.currentIndex = index
// TODO 查询下分类商品
} }
},
handleProdItemClick(productId) {
uni.$u.route('/pages/product/product', {
productId: productId
})
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container {
height: calc(100vh - 50px);
overflow: hidden;
}
.search-wrap { .search-wrap {
background: $custom-bg-color; background: $custom-bg-color;
padding: 20rpx; padding: 20rpx;
@ -181,37 +141,43 @@ export default {
} }
} }
.box-right { .box-right {
width: 550rpx; width: 570rpx;
padding-right: 20rpx;
.category-image { .category-image {
padding: 20rpx; padding: 20rpx;
} }
.prod-list { .sub-category-box {
height: auto !important; .sub-category-header {
.prod-item {
padding: 10rpx 20rpx;
background: #fff;
@include flex-space-between; @include flex-space-between;
border-bottom: $custom-border-style; padding: 20rpx;
.prod-image { .title {
font-size: 28rpx;
font-weight: 700;
}
.more {
font-size: 22rpx;
color: #939393;
}
}
.sub-category-grid {
padding: 0 15rpx;
.sub-category-item {
@include flex-center(column);
background: #fff;
.sub-category-image {
border-radius: 10rpx; border-radius: 10rpx;
/deep/ * { /deep/ * {
border-radius: 10rpx; border-radius: 10rpx;
} }
} }
.item-info { .sub-category-title {
width: 350rpx; margin: 15rpx 0;
padding: 5rpx; font-size: 24rpx;
.info-text {
height: 70rpx;
padding-bottom: 10rpx;
}
.price-and-cart {
@include flex-space-between;
} }
} }
} }