给分类页面添加主题色

pages/index/category.vue

@@ -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)">
+						:class="[
-						<view class="menu-title ss-line-1">
+						  { '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>

pages/index/components/second-second.vue

@@ -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;