yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

sync：分类页样式重构 6cf9a35704

pull/142/MERGE
YunaiV 2025-04-27 12:42:14 +08:00
parent 70f9c004ea
commit 4fc6943391
1 changed files with 48 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
pages/index/category.vue
View File

@ -2,54 +2,52 @@
<template> <template>
<s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/category" title="分类"> <s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/category" title="分类">
<view class="s-category"> <view class="s-category">
<view class="three-level-wrap ss-flex ss-col-top" :style="[{ height: pageHeight + 'px' }]"> <view class="three-level-wrap ss-flex ss-col-top">
<!-- 商品分类（左） --> <!-- 商品分类（左） -->
<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]"> <view class="side-menu-wrap">
<view <scroll-view scroll-y :style="[{ height: pageHeight + 'px' }]">
class="menu-item ss-flex" <view
v-for="(item, index) in state.categoryList" class="menu-item ss-flex"
:key="item.id" v-for="(item, index) in state.categoryList"
:class="[{ 'menu-item-active': index === state.activeMenu }]" :key="item.id"
@tap="onMenu(index)" :class="[{ 'menu-item-active': index === state.activeMenu }]"
> @tap="onMenu(index)"
<view class="menu-title ss-line-1"> >
{{ item.name }} <view class="menu-title ss-line-1">
{{ item.name }}
</view>
</view> </view>
</view> </scroll-view>
</scroll-view> </view>
<!-- 商品分类（右） --> <!-- 商品分类（右） -->
<scroll-view <view class="goods-list-box" v-if="state.categoryList?.length">
class="goods-list-box" <scroll-view scroll-y :style="[{ height: pageHeight + 'px' }]">
scroll-y <image
:style="[{ height: pageHeight + 'px' }]" v-if="state.categoryList[state.activeMenu].picUrl"
v-if="state.categoryList?.length" class="banner-img"
@scrolltolower="handleScrollToLower" :src="sheep.$url.cdn(state.categoryList[state.activeMenu].picUrl)"
> mode="widthFix"
<image />
v-if="state.categoryList[state.activeMenu].picUrl" <first-one v-if="state.style === 'first_one'" :pagination="state.pagination" />
class="banner-img" <first-two v-if="state.style === 'first_two'" :pagination="state.pagination" />
:src="sheep.$url.cdn(state.categoryList[state.activeMenu].picUrl)" <second-one
mode="widthFix" v-if="state.style === 'second_one'"
/> :data="state.categoryList"
<first-one v-if="state.style === 'first_one'" :pagination="state.pagination" /> :activeMenu="state.activeMenu"
<first-two v-if="state.style === 'first_two'" :pagination="state.pagination" /> />
<second-one <uni-load-more
v-if="state.style === 'second_one'" v-if="
:data="state.categoryList" (state.style === 'first_one' || state.style === 'first_two') &&
:activeMenu="state.activeMenu" state.pagination.total > 0
/> "
<uni-load-more :status="state.loadStatus"
v-if=" :content-text="{
(state.style === 'first_one' || state.style === 'first_two') && contentdown: '点击查看更多',
state.pagination.total > 0 }"
" @tap="loadMore"
:status="state.loadStatus" />
:content-text="{ </scroll-view>
contentdown: '点击查看更多', </view>
}"
@tap="loadMore"
/>
</scroll-view>
</view> </view>
</view> </view>
</s-layout> </s-layout>
@ -154,6 +152,9 @@
height: 100%; height: 100%;
padding-left: 12rpx; padding-left: 12rpx;
background-color: #f6f6f6; background-color: #f6f6f6;
position: fixed;
left: 0;
top: 128rpx;
.menu-item { .menu-item {
width: 100%; width: 100%;
@ -224,8 +225,9 @@
.goods-list-box { .goods-list-box {
background-color: #fff; background-color: #fff;
width: calc(100vw - 100px); width: calc(100vw - 200rpx);
padding: 10px; padding: 10px;
margin-left: 200rpx;
} }
.banner-img { .banner-img {