Selaa lähdekoodia

feat: 首页活动分类新增图标+圆形蒙层网格入口

在「公益活动」标题下、保留原有横滚 tab 的前提下,新增 4 列图标网格:
- 后台配置了 iconUrl 的分类才会出现在网格中(最多展示 8 个)
- 网格项支持圆形蒙层背景图(bgImageUrl)
- 点击网格与点击 tab 走同一筛选逻辑(changeType 内按 id 同步 tab 选中态)
Developer 5 päivää sitten
vanhempi
commit
2e2806a014
1 muutettua tiedostoa jossa 51 lisäystä ja 2 poistoa
  1. 51 2
      pages/home.vue

+ 51 - 2
pages/home.vue

@@ -37,6 +37,14 @@
 				<view class="c-box-title-left">公益活动</view>
 				<view class="c-box-title-right adfac" @click="toTurnPage('/pagesHome/allActivity',false)">更多 <up-icon name="arrow-right" size="30rpx" style="margin-left: 10rpx;"></up-icon></view>
 			</view>
+			<view class="c-box-typegrid" v-if="typeGrid.length">
+				<view class="typegrid-item adffc" v-for="(item,index) in typeGrid" :key="item.id" :style="{'margin-right':(index+1)%4===0?'0':'20rpx'}" @click="changeType(item,index)">
+					<view class="typegrid-circle" :style="item.bgImageUrl?{backgroundImage:`url(${item.bgImageUrl})`,backgroundSize:'100% 100%'}:{}">
+						<image v-if="item.iconUrl" :src="item.iconUrl" mode="aspectFit"></image>
+					</view>
+					<view class="typegrid-name">{{item.name}}</view>
+				</view>
+			</view>
 			<view class="c-box-type">
 				<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
 					<view class="scroll-view-item_H" :id="'svih_'+index" v-for="(item,index) in typeList" :key="index" @click="changeType(item,index)">
@@ -118,6 +126,7 @@
 	const bannarOrigin = ref([])
 	const current = ref(0)
 	const typeList = ref([])
+	const typeGrid = ref([])
 	const tlIndex = ref(0)
 	const scrollLeft = ref(0)
 	const isOver = ref(false)
@@ -151,7 +160,9 @@
 	
 	const changeType = (item,index) => {
 		queryParams.value.categoryId = item.id;
-		tlIndex.value = index;
+		// grid 与 tab 是同一个筛选行为,但两者的 index 不对齐,按 id 在 typeList 中重新查找 tab 索引
+		const tabIdx = typeList.value.findIndex(t => t.id === item.id);
+		tlIndex.value = tabIdx >= 0 ? tabIdx : 0;
 		// if(typeList.value.length>4){
 		// 	if(index<3) scrollLeft.value = 0
 		// 	else{
@@ -186,7 +197,9 @@
 	const getTypeList = () => {
 		proxy.$api.get('/core/activity/category/list').then(({data:res})=>{
 			if(res.code!==0) return proxy.$showToast(res.msg)
-			typeList.value = [{id:'',name:'全部'},...res.data.map(d=>({id:d.id,name:d.categoryName}))];
+			typeList.value = [{id:'',name:'全部'},...res.data.map(d=>({id:d.id,name:d.categoryName,iconUrl:d.iconUrl||'',bgImageUrl:d.bgImageUrl||''}))];
+			// icon+圆形蒙层 grid:取前 8 个;至少有一个配过 icon 的才展示,避免空 grid
+			typeGrid.value = res.data.filter(d=>d.iconUrl).slice(0,8).map(d=>({id:d.id,name:d.categoryName,iconUrl:d.iconUrl,bgImageUrl:d.bgImageUrl||''}));
 		})
 	}
 	
@@ -362,6 +375,42 @@
 					}
 				}
 			}
+			&-typegrid{
+				width: 100%;
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 36rpx;
+				padding: 0 0;
+				box-sizing: border-box;
+				.typegrid-item{
+					width: calc((100% - 60rpx) / 4);
+					margin-bottom: 28rpx;
+					.typegrid-circle{
+						width: 112rpx;
+						height: 112rpx;
+						border-radius: 50%;
+						background: #F4F8FF;
+						background-repeat: no-repeat;
+						background-position: center;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						image{
+							width: 56rpx;
+							height: 56rpx;
+						}
+					}
+					.typegrid-name{
+						margin-top: 12rpx;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #151B29;
+						line-height: 30rpx;
+						text-align: center;
+					}
+				}
+			}
 			&-list{
 				width: 100%;
 				flex: 1;