dvcp_v2_wechat_app/src/project/fengdu/AppHome/AppHome.vue

<template>
  <div class="page">
    <u-navbar :is-back="false" title="首页" title-color="#000" title-width="300" title-size="32" :background="backgroundNavbar" :title-bold="true"></u-navbar>
    <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="`${cdn}/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>

    <div class="card">
      <img class="card-left" src="./img/img-fengshouyinhang.png" alt="">
      <div class="card-right">
        <img src="./img/img-fengduxinnongren.png" alt="">
        <img src="./img/ic-jiaoyuhuzhu.png" alt="">
    </div>
    </div>
    <AiLogin ref="login"/>
  </div>
</template>
<script>
import {mapActions, mapState} from 'vuex'

export default {
  name: 'AppHome',
  appName: "首页",
  customNavigation: true,
  data() {
    return {
      cdn: "https://cdn.cunwuyun.cn/wxmp",
      swiperList: [],
      index: 0,
      grids: [],
      notices: [],
      search: {areaId: ''},
      backgroundNavbar: {
        // background: linear - gradient(138.6deg, #e3e8fbff 0%, #ecf4fdff 48%, #ffffffff 95%)
      }
    }
  },
  computed: {
    ...mapState(['user', 'token']),
    active() {
      return {
        fontSize: '22px',
        color: '#333333',
      }
    },
    noticeList() {
      let {notices} = this
      return notices?.length > 0 ? notices?.map(e => e.title) || ['暂无公告'] : ['暂无公告']
    }
  },
  onReady() {
    uni.setNavigationBarTitle({title: "丰收号"})
  },
  onLoad() {
    this.autoLogin().then(() => {
      this.getSwiperList();
      this.getGrids();
      this.getNotice();
    })
  },
  methods: {
    ...mapActions(['autoLogin', 'authCheck']),
    clickNotice(val) {
      const id = this.notices[val]["id"];
      if (id) {
        uni.navigateTo({
          url: "/mods/AppNotice/AppNotice?id=" + id
        })
      }
    },
    getNotice() {
      this.$instance.post("/app/appmininotice/list", null, {
        params: {size: 999},
        withoutToken: true
      }).then(res => {
        if (res?.data) {
          this.notices = 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/AppHome/AppHome`
    }
  },
}
</script>

<style scoped lang="scss">
@import "~dvcp-wui/common";

.page {
  width: 100%;
  min-height: 100%;
  // background-color: #F3F6F9;
  // background: url('./img/img-bg2.png') no-repeat;
  position: relative;
  .swiper-content {
    width: 100%;
    height: 292px;
    padding: 20px 32px 32px;
    box-sizing: border-box;
    background: #FFF;
  }

  .grid-content {
    box-sizing: border-box;
    background: #FFF;
    .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: 684px;
    height: 88px;
    box-sizing: border-box;
    padding: 0 24px;
    margin: 30px auto 30px;
    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;
    }
  }
  .card {
    background: #FFF;
    padding: 32px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .card-left {
      width: 322px;
      height: 462px;
    }
    .card-right {
      width: 334px;
      height: 462px;

      img {
        width: 334px;
        height: 216px;
      }
      img:last-child {
        margin-top: 24px;
      }
    }
  }
}
</style>