huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-23 07:41:53 +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

234
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>
<view class="item-info"> <u-grid class="sub-category-grid" col="3">
<view class="info-text"> <u-grid-item v-for="(subItem, index) in item.category" :key="subItem.id">
<u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text> <view class="sub-category-item">
<u-gap height="2px"></u-gap> <u-icon name="photo" :size="80"></u-icon>
<u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text> <text class="sub-category-title">{{ subItem.title }}</text>
</view>
<view class="price-and-cart">
<custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
<u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
</view>
</view>
</view> </view>
</u-list-item> </u-grid-item>
</u-list> </u-grid>
</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', onLoad() {
name: '关注' for (let i = 0; i < 10; i++) {
}, this.categoryList.push({
{ id: i,
id: 2, image: '',
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', name: '商品分类' + i,
name: '推荐' children: [
}, {
{ id: 0,
id: 3, title: '分类' + i + '-1',
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', category: [
name: '电影' {
}, id: 0,
{ image: '',
id: 4, title: '分类' + i + '-1-1'
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png', },
name: '科技' {
}, id: 2,
{ image: '',
id: 5, title: '分类' + i + '-1-2'
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', },
name: '音乐' {
}, id: 3,
{ image: '',
id: 6, title: '分类' + i + '-1-3'
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', }
name: '美食' ]
}, },
{ {
id: 7, id: 1,
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png', title: '分类' + i + '-2',
name: '文化' category: [
}, {
{ id: 0,
id: 8, image: '',
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', title: '分类' + i + '-2-1'
name: '财经' },
}, {
{ id: 2,
id: 9, image: '',
image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', title: '分类' + i + '-2-2'
name: '手工' },
} {
], id: 3,
productList: [ image: '',
{ title: '分类' + i + '-2-3'
id: 0, }
image: 'https://cdn.uviewui.com/uview/album/1.jpg', ]
title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。', }
desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。', ]
price: '13.00' })
},
{
id: 2,
image: 'https://cdn.uviewui.com/uview/album/2.jpg',
title: '商品222',
desc: '',
price: '23.00'
},
{
id: 3,
image: 'https://cdn.uviewui.com/uview/album/3.jpg',
title: '商品333',
desc: '商品描述信息2',
price: '33.00'
},
{
id: 4,
image: 'https://cdn.uviewui.com/uview/album/4.jpg',
title: '商品444',
desc: '商品描述信息4',
price: '43.00'
},
{
id: 5,
image: 'https://cdn.uviewui.com/uview/album/5.jpg',
title: '商品555',
desc: '商品描述信息5',
price: '53.00'
}
]
} }
}, },
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 {
border-radius: 10rpx; font-size: 28rpx;
/deep/ * { font-weight: 700;
border-radius: 10rpx;
}
} }
.more {
font-size: 22rpx;
color: #939393;
}
}
.item-info { .sub-category-grid {
width: 350rpx; padding: 0 15rpx;
padding: 5rpx;
.info-text { .sub-category-item {
height: 70rpx; @include flex-center(column);
padding-bottom: 10rpx; background: #fff;
.sub-category-image {
border-radius: 10rpx;
/deep/ * {
border-radius: 10rpx;
}
} }
.price-and-cart {
@include flex-space-between; .sub-category-title {
margin: 15rpx 0;
font-size: 24rpx;
} }
} }
} }