首页入库

src/project/shandong10086/AppHome/AppHome.vue

@@ -0,0 +1,508 @@
+<template>
+  <div class="page">
+    <div class="search-wrap">
+      <AiAreaPicker v-model="search.areaId" :name.sync="areaName" @input="getCategoryList" :areaId="$areaId">
+        <u-icon :label="areaName" name="arrow-down-fill" color="#fff" size="16" label-pos="left" label-color="#fff"
+                label-size="40" margin-right="16"/>
+      </AiAreaPicker>
+      <div class="search fill" @click="$linkTo('/mods/AppContent/contentManager?moduleId=' + search.moduleId)">
+        <u-icon name="search" color="#ffffff" size="40"></u-icon>
+        <span class="desc">请输入新闻资讯标题</span>
+      </div>
+    </div>
+    <div class="header-bg"></div>
+    <img class="border" src="../../static/img/border.png" alt=""/>
+    <div class="swiper-content">
+      <u-swiper :list="swiperList" mode="none" height="240" bg-color="none" @click="handleBannerClick"/>
+    </div>
+    <div class="grid-content">
+      <u-grid :col="4" hover-class="text-hover" :border="false">
+        <u-grid-item v-for="(item, index) in grids" :key="index" :custom-style="{ padding: '8px 0' }" bg-color="none"
+                     class="grid-item" @click="handleClick(item)">
+          <img :src="item.pictureUrl" alt=""/>
+          <div class="grid-text">{{ item.name }}</div>
+        </u-grid-item>
+      </u-grid>
+    </div>
+    <!--    <div class="notice">-->
+    <!--      <img src="../../static/img/notice-new.png" alt="">-->
+    <!--      <u-notice-bar mode="vertical" color="#4181FF" style="flex: 1;" :volume-icon="false" :is-circular="false"-->
+    <!--                    duration="5000" speed="5000" :list="noticeList" @click="clickNotice"/>-->
+    <!--    </div>-->
+    <template v-if="activeList.length > 0">
+      <header>推荐专题</header>
+      <scroll-view :scroll-x="true" style="width: 100%" class="scroll-wrap">
+        <div class="scroll-card"
+             :style="{ background: 'url(' + item.pictureUrl + ') no-repeat no-repeat;background-size:100% 100%;' }"
+             v-for="(item, index) in activeList" :key="index" @click="handleActive(item)"/>
+      </scroll-view>
+    </template>
+    <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"/>
+      <div class="list-wrap" v-if="categoryList && categoryList.length > 0">
+        <div class="list-card" v-for="(category, index) in categoryList" :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="../../static/img/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>
+      <AiEmpty v-else/>
+    </template>
+    <AiLogin ref="login"/>
+  </div>
+</template>
+<script>
+import {mapActions, mapState} from 'vuex'
+
+export default {
+  name: 'AppHome',
+  label: "首页",
+  data() {
+    return {
+      areaName: '',
+      swiperList: [],
+      index: 0,
+      grids: [],
+      activeList: [],
+      notices: [],
+      categorys: [],
+      categoryList: [],
+      search: {areaId: ''},
+    }
+  },
+  computed: {
+    ...mapState(['global', 'user', 'token']),
+    active() {
+      return {
+        fontSize: '22px',
+        color: '#333333',
+      }
+    },
+    noticeList() {
+      let {notices} = this
+      return notices?.length > 0 ? notices?.map((e) => e.title) || ['暂无公告'] : ['暂无公告']
+    },
+  },
+  onLoad() {
+    this.autoLogin().then(() => {
+      this.getSwiperList();
+      this.getName();
+      this.getGrids();
+      this.getActive();
+      this.getNotice();
+    })
+  },
+  methods: {
+    ...mapActions(['autoLogin', 'authCheck']),
+    getName() {
+      this.$instance
+      .post('/app/appcontentmoduleinfo/listByName', null, {
+        params: {names: '新闻发布'},
+        withoutToken: true,
+      })
+      .then((res) => {
+        if (res?.data?.[0]?.categoryList?.length) {
+          this.categorys = res.data[0]['categoryList']
+          this.search.moduleId = res.data[0]['id']
+          this.search.categoryId = res.data[0]['categoryList'][0]['id']
+          this.getCategoryList()
+        }
+      })
+    },
+    tabChange(idx) {
+      this.index = idx
+      this.search.categoryId = this.categorys[idx]['id']
+      this.getCategoryList()
+    },
+
+    getCategoryList() {
+      this.$instance
+      .post('/app/appcontentinfo/list', null, {
+        params: {...this.search, size: 100},
+      })
+      .then((res) => {
+        if (res?.data) {
+          this.categoryList = res.data.records
+        }
+      })
+    },
+    clickNotice(val) {
+      const id = this.notices[val]['id']
+      if (id) {
+        uni.navigateTo({
+          url: '/mods/AppNotice/AppNotice?id=' + id,
+        })
+      }
+    },
+    handleActive({type, appId, url}) {
+      if (type == 0) {
+        uni.navigateToMiniProgram({appId})
+      } else if (type == 1) {
+        this.$linkTo('/subPages/h5/webview?link=' + url)
+      }
+    },
+    getNotice() {
+      this.$instance
+      .post('/app/appmininotice/list', null, {
+        params: {size: 999},
+        withoutToken: true,
+      })
+      .then((res) => {
+        if (res?.data) {
+          this.notices = res.data.records
+        }
+      })
+    },
+    getActive() {
+      this.$instance
+      .post('/app/appminitopicconfig/list', null, {
+        params: {size: 999},
+        withoutToken: true,
+      })
+      .then((res) => {
+        if (res?.data) {
+          this.activeList = res.data.records
+        }
+      })
+    },
+    /**
+     * 获取顶部九宫格
+     */
+    getGrids() {
+      this.$instance
+      .post('/app/appminihomeconfig/list', null, {
+        params: {picked: 1},
+        withoutToken: true,
+      })
+      .then((res) => {
+        if (res?.data) {
+          this.grids = res.data.records
+        }
+      })
+    },
+    getSwiperList() {
+      this.$instance
+      .post('/app/appbanner/listForWx', null, {
+        withoutToken: true,
+      })
+      .then((res) => {
+        if (res?.data) {
+          this.swiperList = res.data?.map((e) => ({...e, image: e.imgUrl})) || []
+        }
+      })
+    },
+    handleClick({type, appId, modulePath, url, checkType, corpId}) {
+      //先判读是不是系统应用
+      if (type != '0') {
+        if (type == '1') {
+          uni.navigateToMiniProgram({appId})
+        } else if (type == '2') {
+          uni.navigateTo({url: '/subPages/h5/webview?link=' + url})
+        } else if (type == '3') {
+          this.$linkTo(url)
+        } else if (type == '4') {
+          uni.openCustomerServiceChat({
+            extInfo: {url: url},
+            corpId: corpId,
+            fail: () => {
+              this.$u.toast('请使用普通微信打开小程序进行咨询')
+            },
+          })
+        }
+      } else if (type && type == "0") {
+        uni.showLoading({title: '正在进入应用...'})
+        this.authCheck({checkType, modulePath}).finally(() => uni.hideLoading())
+      }
+    },
+    handleBannerClick(index) {
+      if (!this.swiperList[index].linkUrl) return
+
+      if (this.swiperList[index].type == '0') {
+        //0 h5链接； 1 小程序链接； 2外部小程序
+        this.$linkTo(`/subPages/h5/webview?link=${this.swiperList?.[index]?.linkUrl}&title=${this.swiperList?.[index]?.title}`)
+      } else if (this.swiperList[index].type == '1') {
+        this.$linkTo(`${this.swiperList?.[index]?.linkUrl}`)
+      } else {
+        wx.navigateToMiniProgram({
+          appId: this.swiperList[index].linkUrl,
+        })
+      }
+    },
+  },
+
+  onShareAppMessage() {
+    return {
+      title: '欢迎使用数字乡村治理服务一体化平台~',
+      path: `/pages/home/home`,
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import '~dvcp-wui/common';
+
+.page {
+  width: 100%;
+  min-height: 100%;
+  background-color: #f3f6f9;
+  position: relative;
+
+  .search-wrap {
+    width: 750px;
+    height: 64px;
+    box-sizing: border-box;
+    padding: 0 32px;
+    display: flex;
+    background-color: #4181ff;
+    align-items: center;
+
+    .search {
+      height: 100%;
+      background: #000000;
+      border-radius: 32px;
+      opacity: 0.2;
+      box-sizing: border-box;
+      padding: 0 32px;
+      display: flex;
+      align-items: center;
+      margin-left: 32px;
+      margin-top: 6px;
+
+      .desc {
+        font-size: 28px;
+        color: #ffffff;
+        margin-left: 16px;
+      }
+    }
+  }
+
+  .area-content {
+    height: 96px;
+    line-height: 96px;
+    background-color: #2d80fb;
+
+    .area-ai {
+      display: block;
+      width: 200px;
+      margin-left: 34px;
+      text-align: left;
+    }
+
+    .picker-location {
+      text-align: left;
+    }
+  }
+
+  .header-bg {
+    width: 100%;
+    height: 160px;
+    background-color: #4181ff;
+  }
+
+  .border {
+    width: 100%;
+    height: 40px;
+  }
+
+  .swiper-content {
+    width: 686px;
+    height: 240px;
+    margin: -176px auto 24px;
+  }
+
+  .grid-content {
+    box-sizing: border-box;
+    margin-bottom: 48px;
+
+    .grid-item {
+      img {
+        width: 108px;
+        height: 108px;
+        object-fit: fill;
+      }
+
+      .grid-text {
+        font-size: 26px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 36px;
+      }
+    }
+  }
+
+  ::v-deep .notice {
+    width: 686px;
+    height: 88px;
+    box-sizing: border-box;
+    padding: 0 24px;
+    margin: 30px auto 48px;
+    background: #ffffff;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > img {
+      width: 128px;
+      height: 52px;
+    }
+
+    .u-news-item {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  .list-wrap {
+    box-sizing: border-box;
+    padding: 32px;
+
+    .list-card {
+      width: 100%;
+      min-height: 100px;
+      background: #ffffff;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+      border-radius: 16px;
+      box-sizing: border-box;
+      padding: 32px;
+      margin-bottom: 24px;
+
+      .header {
+        font-size: 36px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 50px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
+
+      .content-wrap {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+        margin-top: 24px;
+        position: relative;
+
+        .img {
+          width: 100%;
+          height: 350px;
+        }
+
+        .min-img {
+          width: 204px;
+          height: 204px;
+        }
+
+        .play-icon {
+          width: 80px;
+          height: 80px;
+          border-radius: 50%;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      .bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 24px;
+
+        .left {
+          display: flex;
+          align-items: center;
+          font-size: 28px;
+          font-weight: 400;
+          color: #999999;
+
+          .tag {
+            width: 144px;
+            height: 48px;
+            background: #eeeeee;
+            border-radius: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28px;
+            font-weight: 400;
+            color: #999999;
+            margin-right: 16px;
+          }
+        }
+
+        .right {
+          font-size: 28px;
+          font-weight: 400;
+          color: #999999;
+          display: flex;
+          align-items: center;
+
+          em {
+            font-style: normal;
+            color: #4181ff;
+          }
+        }
+      }
+    }
+  }
+
+  header {
+    font-size: 44px;
+    font-weight: 600;
+    color: #333333;
+    padding: 0 16px;
+    margin-bottom: 32px;
+    margin-left: 32px;
+  }
+
+  .scroll-wrap {
+    box-sizing: border-box;
+    padding: 0 32px;
+    width: 100%;
+    white-space: nowrap;
+    margin-bottom: 24px;
+
+    .scroll-card {
+      display: inline-block;
+      width: 440px;
+      height: 240px;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+      border-radius: 16px;
+      margin-right: 32px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>