数字平昌首页调整

src/project/szpc/AppHome/AppHome.vue

@@ -33,7 +33,7 @@
              v-for="(item,index) in activeList" :key="index" @click="handleActive(item)"/>
       </scroll-view>
     </template>
-    <template v-if="categorys&&categorys.length>0">
+    <!-- <template v-if="categorys&&categorys.length>0">
       <u-tabs :list="categorys.map(e=>({name:e.categoryName}))" font-size="40" bg-color="transparent"
               inactive-color="#999999" :active-item-style="active"
               :is-scroll="true" :current="index" @change="tabChange"/>
@@ -65,6 +65,45 @@
         </div>
       </div>
       <AiEmpty v-else/>
+    </template> -->
+    <template>
+      <div v-for="(row, r) in categorys" :key="r" v-if="categorys.length">
+        <!-- <u-tabs :list="row.map(e=>({name:e.categoryName}))" font-size="40" bg-color="transparent"
+              inactive-color="#999999" :active-item-style="active"
+              :is-scroll="true" :current="index" @change="tabChange()"/> -->
+        <div class="tab-list">
+          <div class="item" :class="nameIndex == categoryIndexList[r] ? 'active' : ''" v-for="(name, nameIndex) in row" :key="nameIndex" @click="tabClick(r, nameIndex)">{{name.categoryName}}<span></span></div>
+        </div>
+        <div class="list-wrap" v-if="row[categoryIndexList[r]] && row[categoryIndexList[r]].records && row[categoryIndexList[r]].records.length>0">
+          <div class="list-card" v-for="(category,index) in row[categoryIndexList[r]].records" :key="index"
+              @click="$linkTo('/mods/AppContent/contentDetail?id='+category.id)">
+            <div class="header">{{ category.title }}</div>
+            <div class="content-wrap"
+                v-if="category.contentType==0 && category.files && category.files.length<3&&category.files.length>0">
+              <img class="img" :src="item.url" v-for="(item,index) in category.files.slice(0,1)" :key="index.id">
+            </div>
+            <div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length >= 3">
+              <img class="min-img" :src="item.url" v-for="(item,index) in  category.files.slice(0,3)" :key="index.id">
+            </div>
+            <div class="content-wrap" v-if="category.contentType == 1">
+              <img class="img" :src="category.pictureUrl" alt=""/>
+              <img class="play-icon" :src="`${cdn}/play.png`" alt=""/>
+            </div>
+            <div class="bottom">
+              <div class="left">
+                <div class="tag">{{ category.categoryName }}</div>
+                {{ category.createTime }}
+              </div>
+              <div class="right">
+                <em>{{ category.viewCount }}</em>
+                人看过
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="more-text" v-if="row[categoryIndexList[r]].records.length > 5" @click="$linkTo('/mods/AppContent/AppContent?names='+row[categoryIndexList[r]].categoryName)">查看更多 ></div>
+        <AiEmpty v-if="row[categoryIndexList[r]] && row[categoryIndexList[r]].records && !row[categoryIndexList[r]].records.length"/>
+      </div>
     </template>
     <AiLogin ref="login"/>
   </div>
@@ -83,7 +122,9 @@ export default {
       grids: [],
       activeList: [],
       notices: [],
+      categoryTypeList: [],
       categorys:[],
+      categoryIndexList: [0, 0, 0, 0],
       categoryList: [],
       search: {areaId: ''},
     }
@@ -121,13 +162,35 @@ export default {
         withoutToken: true
       }).then(res => {
         if (res?.data[0]?.categoryList?.length) {
-          this.categorys = res.data[0]["categoryList"];
+          this.categoryTypeList = res.data[0]["categoryList"];
           this.search.moduleId = res.data[0]['id']
           this.search.categoryId = res.data[0]['categoryList'][0]['id']
-          this.getCategoryList()
+          // this.getCategoryList()
+
+          this.getNewList(res.data[0]['id'])
         }
       })
     },
+    getNewList(moduleId) {
+      this.categorys = [[], [], [], [], []]
+      this.categoryTypeList.map((item, index) => {
+        this.$instance.post("/app/appcontentinfo/list", null, {
+          params: {moduleId: moduleId, categoryId: item.id, size: 6}
+        }).then(res => {
+          if (res?.data) {
+            item.records = [...res.data.records]
+            this.$forceUpdate()
+            var i = parseInt(index/3)
+            var indexs = index%3
+            this.categorys[i][indexs] = item
+          }
+        })
+      })
+    },
+    tabClick(index, val) {
+      this.categoryIndexList[index] = val
+      this.$forceUpdate()
+    },
     tabChange(idx) {
       this.index = idx
       this.search.categoryId = this.categorys[idx]['id']
@@ -487,5 +550,43 @@ export default {
       }
     }
   }
+
+  .tab-list {
+    padding-left: 32px;
+    .item {
+      display: inline-block;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 40px;
+      color: #999;
+      line-height: 56px;
+      width: 192px;
+      padding-right: 32px;
+      position: relative;
+    }
+    .active {
+      font-size: 44px;
+      color: #333;
+      span {
+        width: 48px;
+        height: 8px;
+        background: #4181FF;
+        border-radius: 4px;
+        position: absolute;
+        top: 64px;
+        left: 50%;
+        margin-left: -48px;
+      }
+    }
+  }
+
+  .more-text {
+    font-family: PingFangSC-Regular;
+    font-size: 28px;
+    color: #999;
+    line-height: 40px;
+    text-align: center;
+    margin-bottom: 36px;
+  }
 }
 </style>