|
|
@@ -45,15 +45,6 @@
|
|
|
<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)">
|
|
|
- <view class="cl_item" :class="{'active':tlIndex===index}">
|
|
|
- <text>{{item.name}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
<view class="c-box-list" v-if="activityList.length">
|
|
|
<up-list @scrolltolower="scrolltolower" style="height: 100%;">
|
|
|
<up-list-item v-for="(item, index) in activityList" :key="item.id">
|
|
|
@@ -125,12 +116,10 @@
|
|
|
const bannarList = ref([])
|
|
|
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)
|
|
|
const activityList = ref([])
|
|
|
+ // 进入页面默认查全部(categoryId 为空),点图标网格才切到具体分类
|
|
|
const queryParams = ref({
|
|
|
page:1,
|
|
|
limit:10,
|
|
|
@@ -160,15 +149,6 @@
|
|
|
|
|
|
const changeType = (item,index) => {
|
|
|
queryParams.value.categoryId = item.id;
|
|
|
- // 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{
|
|
|
- // scrollLeft.value = (index-2)*172/2;
|
|
|
- // }
|
|
|
- // }
|
|
|
initList();
|
|
|
getActivityList();
|
|
|
}
|
|
|
@@ -197,8 +177,7 @@
|
|
|
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,iconUrl:d.iconUrl||'',bgImageUrl:d.bgImageUrl||''}))];
|
|
|
- // icon+圆形蒙层 grid:取前 8 个;至少有一个配过 icon 的才展示,避免空 grid
|
|
|
+ // icon 网格:取配过 icon 的前 8 个分类;空 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||''}));
|
|
|
})
|
|
|
}
|
|
|
@@ -298,22 +277,7 @@
|
|
|
::v-deep .u-swiper__wrapper__item__wrapper__image{
|
|
|
border-radius: 24rpx !important;
|
|
|
}
|
|
|
-
|
|
|
- .scroll-view_H {
|
|
|
- white-space: nowrap;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .scroll-view-item_H {
|
|
|
- display: inline-block;
|
|
|
- // width: 152rpx;
|
|
|
- height: 100%;
|
|
|
- margin-left: 20rpx;
|
|
|
- &:first-child{
|
|
|
- margin-left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+
|
|
|
.tab_page{
|
|
|
.c-box{
|
|
|
width: 100%;
|
|
|
@@ -354,30 +318,6 @@
|
|
|
line-height: 33rpx;
|
|
|
}
|
|
|
}
|
|
|
- &-type{
|
|
|
- width: 100%;
|
|
|
- height: 68rpx;
|
|
|
- margin-top: 31rpx;
|
|
|
- .cl_item{
|
|
|
- // width: 152rpx;
|
|
|
- padding: 0 21rpx;
|
|
|
- height: 68rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 34rpx;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #676775;
|
|
|
- line-height: 68rpx;
|
|
|
- text-align: center;
|
|
|
- &.active{
|
|
|
- background: #B7F358;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #151B29;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
&-typegrid{
|
|
|
width: 100%;
|
|
|
display: flex;
|