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