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="container">
      <div class="swiper-content">
        <u-swiper :list="swiperList" mode="none" height="364" 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="https://cdn.cunwuyun.cn/fengdu/img-fengshouyinhang.png" @click="$linkTo('/mods/AppNewFarmerBank/AppNewFarmerBank')" alt="">
        <div class="card-right">
          <img src="https://cdn.cunwuyun.cn/fengdu/img-fengduxinnongren.png" alt="" @click="$linkTo('/mods/AppNewFarmer/AppNewFarmer')">
          <img src="https://cdn.cunwuyun.cn/fengdu/ic-jiaoyuhuzhu.png" alt="" @click="$linkTo('/mods/AppHelpEachOther/AppHelpEachOther')">
        </div>
      </div>
      <AiLogin ref="login"/>
    </div>
  </div>
</template>
<script>
import {mapActions, mapState} from 'vuex'

export default {
  name: 'AppHome',
  appName: "首页",
  customNavigation: true,
  navigationBarBackgroundColor: '#ffffff',
  navigationBarTextStyle: 'black',
  data() {
    return {
      cdn: "https://cdn.cunwuyun.cn/wxmp",
      swiperList: [],
      index: 0,
      grids: [],
      notices: [],
      search: {areaId: ''},
      backgroundNavbar: {
        background: 'url(https://cdn.cunwuyun.cn/fengdu/mdpi_img-bg1.png) no-repeat',
        backgroundSize: '100% 100%',
      }
    }
  },
  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({ loginWay: 'qujing' }).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%;
  height: 100vh;

  .container{
    background: url('https://cdn.cunwuyun.cn/fengdu/mdpi_img-bg2.png') no-repeat;
    background-size: 100% auto;
    .swiper-content {
      width: 100%;
      height: 416px;
      padding: 20px 32px 32px;
      box-sizing: border-box;
    }

    .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>