dvcp_v2_wechat_app/src/project/tianfuxing/AppHome/AppHome.vue

<template>
  <div class="home">
    <!-- <div class="header" :class="[isFixed ? 'header-active' : '']">
      <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
      <div class="nav-bar">
        <h2>天府星小程序</h2>
      </div>
    </div>
    <div></div>
    <image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" /> -->
    <div class="wrapper">
      <div class="nav">
        <div class="nav-item" hover-class="text-hover" @click="$linkTo('./ActivityList')">
          <image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home1.png" />
          <span>活动签到</span>
        </div>
        <div class="nav-item" hover-class="text-hover" @click="$linkTo('./PhotoReport')">
          <image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home2.png" />
          <span>文明拍</span>
        </div>
        <div class="nav-item" hover-class="text-hover" @click="$linkTo('./Culture')">
          <image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home3.png" />
          <span>海报接力</span>
        </div>
        <div class="nav-item" hover-class="text-hover" @click="$linkTo('./Ranking')">
          <image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home4.png" />
          <span>文明榜单</span>
        </div>
      </div>
      <swiper class="banner" indicatorDots circular :autoplay="true" :interval="5000" v-if="bannerList.length">
				<swiper-item v-for="(item, index) in bannerList" :key="index" @click="toDetail(item)">
          <image :src="item.imgUrl" mode="aspectFill" />
				</swiper-item>
			</swiper>
      <div class="section yh">
        <h2>商家优惠</h2>
        <div class="yh-list">
          <div class="yh-item" v-for="(item, index) in list" :key="index" hover-class="text-hover" @click="$linkTo('./StoreDetail?id=' + item.id)">
            <image :src="item.logoFiles[0].url" mode="aspectFill" />
            <div class="right">
              <h2>{{ item.merchantName }}</h2>
              <p>{{ item.title }}</p>
            </div>
          </div>
          <AiEmpty v-if="!list.length"></AiEmpty>
        </div>
        <div class="more" v-if="list.length" @click="$linkTo('./Store')" hover-class="text-hover">查看更多优惠</div>
      </div>
      <div class="section rz" v-if="!user.merchantInfo || user.merchantInfo.status !== '1'" >
        <h2>商家入驻</h2>
        <div class="rz-info">
          <div class="rz-item">
            <h3>商家权益</h3>
            <!-- <span>成都市金牛区xxxx大厦成都…</span> -->
          </div>
          <div class="rz-item">
            <h3>免费入驻</h3>
            <span>面对50万新区市民免费展示推荐</span>
          </div>
          <div class="rz-item">
            <h3>宣传报道</h3>
            <span>分批次获得媒体公开点名</span>
          </div>
          <div class="rz-item">
            <h3>出席仪式</h3>
            <span>邀请重点协会与商家代表参与启动仪式、颁奖仪式</span>
          </div>
          <div class="rz-item">
            <h3>直通车</h3>
            <span>商家诉求收集汇总反馈</span>
          </div>
        </div>
        <div class="more" @click="$linkTo('./AddMerchants')" hover-class="text-hover">我是商家，我要入驻</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'

  export default {
    appName: '首页',
    navigationBarTitleText: '天府星小程序',
    name: 'AppHome',
    enablePullDownRefresh: true,

    data () {
      return {
        current: 1,
        list: [],
        isMore: false,
        isFixed: false,
        statusBarHeight: 20,
        bannerList: []
      }
    },

    computed: {
      ...mapState(['user', 'token'])
    },

    onShow () {
      this.isMore = false
      this.getList()
    },

    onLoad () {
      if (!this.token) {
        this.autoLogin()
      } else {
        this.getUserInfo()
      }

      this.getBannerList()
    },

    methods: {
      ...mapActions(['autoLogin', 'getUserInfo']),

      getBannerList () {
        this.$instance.post(`/api/appbanner/getList`, null, {
          withoutToken: true
        }).then(res => {
          if (res.code === 0) {
            this.bannerList = res.data
          }
        }).catch(() => {
        })
      },

      toDetail (e) {
        if (e.type == '0') {  //0 h5链接； 1 小程序链接； 2外部小程序
          this.$linkTo(`/subPages/h5/webview?link=${e.linkUrl}&title=${e.title}`)
        } else if (e.type == '2') {
          wx.navigateToMiniProgram({
            appId: e.linkUrl
          })
        } else if (e.type == '3') {
          this.$linkTo(`./News?id=${e.id}`)
        }
      },

      getList () {
        this.$instance.post(`/api/appmerchantinfo/discountList`, null, {
          withoutToken: true,
          params: {
            current: 1,
            size: 4,
            status: 1
          }
        }).then(res => {
          if (res.code === 0) {
            this.list = res.data.records
            this.isMore = true
            uni.stopPullDownRefresh()
          } else {
            this.isMore = true
            uni.stopPullDownRefresh()
          }
        }).catch(() => {
          uni.stopPullDownRefresh()
        })
      }
    },

    onPullDownRefresh() {
      this.isMore = false
      this.current = 1
      this.getList()
      this.getBannerList()
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    position: relative;
    padding: 32px 0 60px;

    .bg-img {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 512px;
    }

    .wrapper {
      position: relative;
      z-index: 11;
      margin: 0 32px 32px;
    }

    .yh {
      .more {
        width: 100%;
        height: 88px;
        line-height: 88px;
        text-align: center;
        color: #687DA6;
        font-size: 28px;
      }

      .yh-list {
        padding: 0 24px;
      }

      .yh-item {
        display: flex;
        align-items: center;
        padding: 24px 0;
        border-bottom: 1px solid #EEEEEE;

        image {
          width: 112px;
          height: 112px;
          margin-right: 12px;
          border-radius: 8px;
        }

        .right {
          flex: 1;

          h2 {
            line-height: 48px;
            margin-bottom: 8px;
            font-size: 34px;
            color: #333333;
          }

          p {
            color: #FFB94C;
            font-size: 26px;
          }
        }
      }
    }

    .rz {
      padding-bottom: 48px;

      .rz-info {
        padding: 0 24px;
      }

      .rz-item {
        display: flex;
        margin-bottom: 24px;

        &:last-child {
          margin-bottom: 0;
        }

        h3 {
          width: 120px;
          line-height: 40px;
          margin-right: 40px;
          color: #999999;
          font-size: 28px;
          text-align: justify;
        }

        span {
          flex: 1;
          line-height: 40px;
          color: #333333;
          font-size: 28px;
        }
      }

      .more {
        width: 638px;
        height: 88px;
        line-height: 88px;
        margin: 36px auto 0;
        font-size: 34px;
        color: #FFFFFF;
        text-align: center;
        background-image: linear-gradient(90deg, #75BDFF 0%, #4783FF 100%);
        box-shadow: 0 8px 12px -4px rgba(133,196,255,0.65);
        border-radius: 8px;
      }
    }

    .section {
      margin-bottom: 24px;
      background: #FFFFFF;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
      border-radius: 16px;
      overflow: hidden;

      & > h2 {
        height: 96px;
        line-height: 96px;
        padding: 0 24px;
        font-size: 34px;
        color: #1D2229;
        background-image: linear-gradient(180deg, #DCEFFF 0%, rgba(220,239,255,0.00) 100%);
      }
    }

    .back-wrapper {
      position: fixed;
      z-index: 11;
      left: 20px;
      top: 24px;
      width: 40px;
      height: 40px;

      image {
        width: 40px;
        height: 40px;
      }
    }

    .header {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 111;
      width: 100%;
      opacity: 1;
      transition: all 0.2s ease;

      .nav-bar {
        position: relative;
        height: 88px;
        line-height: 88px;
        color: #000;
        font-size: 34px;
        font-weight: 600;
        text-align: center;

        image {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          width: 40px;
          height: 40px;
          padding: 24px 20px 0 20px;
          box-sizing: content-box;
        }
      }

      &.header-active {
        z-index: 1111;
        opacity: 1;
        color: #fff;
        background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);

        .nav-bar {
          color: #fff;
        }
      }
    }

    .banner {
      display: block;
      width: 686px;
      height: 352px;
      margin: 0 auto 32px;
      border-radius: 8px;
      overflow: hidden;

      image {
        width: 686px;
        height: 352px;
        border-radius: 8px;
      }
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 32px;
      padding: 0 36px;

      .nav-item {
        width: 112px;
        line-height: 1;
        text-align: center;

        image {
          width: 112px;
          height: 116px;
        }

        span {
          display: block;
          text-align: center;
          color: #333;
          font-size: 28px;
        }
      }
    }
  }
</style>