给分类页面添加主题色
This commit is contained in:
parent
627006ff53
commit
55bff8f100
@ -6,8 +6,12 @@
|
||||
<!-- 商品分类（左） -->
|
||||
<scroll-view class="side-menu-wrap" scroll-y :style="[{ height: pageHeight + 'px' }]">
|
||||
<view class="menu-item ss-flex" v-for="(item, index) in state.categoryList" :key="item.id"
|
||||
:class="[{ 'menu-item-active': index === state.activeMenu }]" @tap="onMenu(index)">
|
||||
<view class="menu-title ss-line-1">
|
||||
:class="[
|
||||
{ 'menu-item-active': index === state.activeMenu && state.themeType == '' },
|
||||
{ [state.themeType + 'vv']: index === state.activeMenu && state.themeType }
|
||||
]"
|
||||
@tap="onMenu(index)">
|
||||
<view class="menu-title ss-line-1" :class="state.themeType && index === state.activeMenu ? `${state.themeType}v` : ''">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
@ -25,7 +29,7 @@
|
||||
:activeMenu="state.activeMenu" />
|
||||
<!-- 样式2 -->
|
||||
<second-second ref="secondRef" v-show="state.typeId === '2'" :data="state.categoryList"
|
||||
:activeMenu="state.activeMenu" />
|
||||
:activeMenu="state.activeMenu" :vl="state.themeType" />
|
||||
|
||||
<uni-load-more v-if="
|
||||
(state.style === 'first_one' || state.style === 'first_two') &&
|
||||
@ -60,6 +64,7 @@
|
||||
import {
|
||||
handleTree
|
||||
} from '@/sheep/util';
|
||||
const app = computed(() => sheep.$store('app'));
|
||||
const state = reactive({
|
||||
style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
|
||||
categoryList: [], // 商品分类树
|
||||
@ -73,9 +78,9 @@
|
||||
pageSize: 6,
|
||||
},
|
||||
loadStatus: '',
|
||||
typeId:'1'
|
||||
typeId:'1',
|
||||
themeType:app.value.platform.themeType
|
||||
});
|
||||
const app = computed(() => sheep.$store('app'));
|
||||
state.typeId = app.value.platform.goodsType;//判断是什么样式
|
||||
// console.log(app.value.platform.goodsType,"------------------------")
|
||||
const secondRef = ref(null);
|
||||
@ -102,7 +107,7 @@
|
||||
const onMenu = (val) => {
|
||||
state.activeMenu = val;
|
||||
if (state.style === 'second_one' && secondRef.value) {
|
||||
secondRef.value.onFilterItem(state.categoryList[state.activeMenu].children[0].id);
|
||||
secondRef.value.onFilterItem(state.categoryList[state.activeMenu].children[0].id,0);
|
||||
}
|
||||
if (state.style === 'first_one' || state.style === 'first_two') {
|
||||
state.pagination.pageNo = 1;
|
||||
@ -153,6 +158,9 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
|
||||
|
||||
.s-category {
|
||||
:deep() {
|
||||
.side-menu-wrap {
|
||||
@ -242,4 +250,64 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 主题颜色 */
|
||||
|
||||
.lvv{
|
||||
color:rgba(72,204,82) !important;
|
||||
}
|
||||
.bluev{
|
||||
color:rgba(28,165,233) !important;
|
||||
}
|
||||
.pinkv{
|
||||
color:#ff448f !important;
|
||||
}
|
||||
.orangev{
|
||||
color:#fe5c2d !important;
|
||||
}
|
||||
|
||||
.lvvv{
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background:rgba(72,204,82) !important;
|
||||
}
|
||||
}
|
||||
.bluevv{
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background:rgba(28,165,233);
|
||||
}
|
||||
}
|
||||
.pinkvv{
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background:#ff448f !important;
|
||||
}
|
||||
}
|
||||
.orangevv{
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background:#fe5c2d !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,11 @@
|
||||
<view>
|
||||
<view class="top_class">
|
||||
<scroll-view scroll-x class="scroll">
|
||||
<view @click="onFilterItem(item.id)" class="list on"
|
||||
<view @click="onFilterItem(item.id,index)" class="list"
|
||||
:class="[
|
||||
{ 'on': index == state.currItem && props.vl == '' },
|
||||
{ [props.vl + 'v']: index == state.currItem && props.vl }
|
||||
]"
|
||||
v-for="(item, index) in props.data[activeMenu].children" :key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
@ -42,7 +46,11 @@
|
||||
</view>
|
||||
</view>
|
||||
<slot name="cart">
|
||||
<view class="buy-box ss-flex ss-col-center ss-row-center"> 去购买</view>
|
||||
<view class="buy-box ss-flex ss-col-center ss-row-center"
|
||||
:class="[
|
||||
{ [props.vl + 'v']: props.vl }
|
||||
]"
|
||||
> 去购买</view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
@ -89,6 +97,10 @@
|
||||
default: () => ({}),
|
||||
},
|
||||
activeMenu: [Number, String],
|
||||
vl: {
|
||||
type: String,
|
||||
default:''
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
@ -106,14 +118,17 @@
|
||||
iconStatus: false, // true - 单列布局；false - 双列布局
|
||||
keyword: '',
|
||||
categoryId: 0,
|
||||
loadStatus: ''
|
||||
loadStatus: '',
|
||||
currItem:0
|
||||
});
|
||||
|
||||
// 清空列表
|
||||
function emptyList() {
|
||||
state.pagination.list = [];
|
||||
}
|
||||
const onFilterItem = (id) => {
|
||||
const onFilterItem = (id,index) => {
|
||||
console.log(index,"indexindex")
|
||||
state.currItem = index
|
||||
// 清空 + 加载数据
|
||||
emptyList();
|
||||
getList(id);
|
||||
@ -166,6 +181,24 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.lvv{
|
||||
background:rgba(72,204,82) !important;
|
||||
color:white !important;
|
||||
}
|
||||
.bluev{
|
||||
background:rgba(28,165,233) !important;
|
||||
color:white !important;
|
||||
}
|
||||
.pinkv{
|
||||
background:#ff448f !important;
|
||||
color:white !important;
|
||||
}
|
||||
.orangev{
|
||||
background:#fe5c2d !important;
|
||||
color:white !important;
|
||||
}
|
||||
|
||||
//lg
|
||||
.lg-goods-card {
|
||||
overflow: hidden;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user