rebatedine-mini/src/pages/index.vue

<template>
  <view class="index-main">
    <network-error />
    <view class="first"
          :style="{height: `${firstHeight}rpx`}">
      <view class="index-header">
        <view class="index-banner"
              v-if="bannerList.length"
              v-show="!isSticky"
              :style="{
                Top: `${navHeight}rpx`
              }">
          <view class="index-logo">
            <image src="../static/common/logo_bt.png" />
          </view>
          <u-swiper mode="dot"
                    img-mode="scaleToFill"
                    :list="bannerList | bannerListFilter | imgListFilter(1)"
                    name="url"
                    height="176"
                    border-radius="20"
                    @click="bannerClick">
          </u-swiper>
        </view>
      </view>
      <view class="activity-flow"
            v-show="!isSticky"
            :style="{
              paddingTop: '20rpx'
            }">
        <activity-flow></activity-flow>
      </view>
    </view>
    <view class="index-body u-m-t-36">
      <u-sticky :enable="enable"
                offset-top="0"
                h5-nav-height="0"
                @fixed="stickyFixed"
                @unfixed="unStickyFixed">
        <!-- 只能有一个根元素 -->
        <view class="sticky">
          <view class="nav-title u-font-32 bold line-44 u-text-center"
                :style="{
              paddingTop: `${navTitleStyle.paddingTop}rpx`,
              paddingBottom: `${navTitleStyle.paddingBottom}rpx`,
              lineHeight: `${navTitleStyle.lineHeight}rpx`,
              fontSize: `${navTitleStyle.fontSize}rpx`
            }">
            首页
          </view>
          <view class="index-tabs u-flex u-col-bottom u-row-between">
            <u-tabs :is-scroll="false"
                    :list="tabList"
                    :current="currentTab"
                    height="44"
                    font-size="34"
                    active-color="#111111"
                    inactive-color="#111111"
                    :gutter="0"
                    :bar-style="{
                bottom: '-10rpx',
                marginLeft: '-34rpx',
                width: '104rpx',
                height: '10rpx',
                borderRadius: 0,
                backgroundColor: '#FD6D4E',
                boxShadow: '0px 1px 1px 0px rgba(255, 102, 50, 0.3)'
              }"
                    @change="tabsChange">
            </u-tabs>
            <view class="u-font-22 u-content-color">单平台门店每天只能报名1次</view>
          </view>
        </view>
      </u-sticky>
      <block v-if="isLocation">
        <view class="activity-list"
              :style="{paddingTop: `${activityListPT}rpx`}">
          <block v-if="activityList.length !== 0">
            <view class="activity-card u-border-bottom"
                  v-for="(item, index) in activityList"
                  :key="index">
              <activity-card :value="item"
                             @clickCard="toActivityDetail"
                             @signUp="toActivityDetail"
                             @clickYBM="toActivityDetail"
                             @clickYQG="toActivityDetail">
              </activity-card>
            </view>
            <view class="touch-bottom u-font-22 line-32 u-text-center">{{isLoadMore ? '加载中...' : '到底了～'}}</view>
          </block>
          <block v-else>
            <view class="def-content">
              <def-content type="1"></def-content>
            </view>
          </block>
        </view>
      </block>
      <block v-else>
        <view class="no-location def-content">
          <def-content type="2"></def-content>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import defContent from '@/components/defContent'
import activityFlow from '@/components/activityFlow'
import activityCard from '@/components/activityCard'
import { getActivityBannerList, getActivityList } from '@/api/activityApi'

export default {
  components: { defContent, activityFlow, activityCard },
  data () {
    return {
      isLocation: false,
      enable: true,
      isSticky: false,
      firstHeight: 568,
      navTitleStyle: {
        paddingTop: 0,
        paddingBottom: 0,
        lineHeight: 0,
        fontSize: 0
      },
      activityListPT: 0,
      bannerList: [],
      isLoadMore: false,
      tabList: [{ name: '免费吃' }, { name: '返利餐' }],
      searchForm: {
        page_no: 1,
        page_size: 10,
        activity_type: 1
      },
      total: -1,
      currentTab: 0,
      activityList: []
    }
  },
  computed: {
    navHeight () {
      return (uni.getSystemInfoSync().statusBarHeight * 2) + 16
    }
  },
  onShow () {
    this.getLocation()
    this.getBannerData()
    this.isLoadMore = false
    this.searchForm.page_no = 1
    this.total = -1
    this.activityList = []
    this.getActivityData()
    this.enable = true
  },
  onHide () {
    this.enable = true
  },
  onPullDownRefresh () {
    this.getBannerData()
    this.searchForm.page_no = 1
    this.total = -1
    this.activityList = []
    this.getActivityData()
  },
  onReachBottom () {
    if (this.isLoadMore) {
      this.searchForm.page_no += 1
      this.getActivityData()
    }
  },
  methods: {
    // 获取用户经纬度
    getLocation () {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            this.isLocation = true
            resolve(res)
          },
          fail: () => {
            this.isLocation = false
            resolve(false)
          }
        })
      })
    },
    // 获取banner列表
    async getBannerData () {
      const { code, data } = await getActivityBannerList()
      if (code === 200) {
        this.bannerList = data
      }
    },
    // 获取活动列表
    async getActivityData () {
      const location = await this.getLocation()
      if (!location) { return }
      const params = {
        lng: location.longitude,
        lat: location.latitude,
        page_no: this.searchForm.page_no,
        page_size: this.searchForm.page_size,
        activity_type: this.searchForm.activity_type
      }
      const { code, data } = await getActivityList(params)
      if (code === 200) {
        this.total = data.total_count
        this.activityList = this.activityList.concat(data.rows)
        this.isLoadMore = this.total !== this.activityList.length
      }
      uni.stopPullDownRefresh()
    },
    // 活动类型切换
    tabsChange (index) {
      this.currentTab = index
      this.searchForm.activity_type = index + 1
      this.searchForm.page_no = 1
      this.total = -1
      this.activityList = []
      this.getActivityData()
    },
    stickyFixed () {
      this.isSticky = true
      this.firstHeight = 0
      this.navTitleStyle = {
        paddingTop: this.navHeight,
        paddingBottom: 30,
        lineHeight: 44,
        fontSize: 32
      }
      this.activityListPT = this.navHeight + 82
    },
    unStickyFixed () {
      this.isSticky = false
      this.firstHeight = 568
      this.navTitleStyle = {
        paddingTop: 0,
        paddingBottom: 0,
        lineHeight: 0,
        fontSize: 0
      }
      this.activityListPT = 0
    },
    toActivityDetail (e) {
      uni.navigateTo({
        url: `../pagesSub/activity/activityDetail?id=${e.id}`
      })
    },
    // 点击banner事件
    bannerClick (index) {
      const banner = this.bannerList[index]
      console.log(banner)
      switch (banner.jump_type * 1) {
        case 1:
          uni.navigateTo({
            url: `/pagesSub/other/webView?url=${banner.jump_content}`
          })
          break
        case 2:
          this.$store.dispatch('toOtherApplte', banner.jump_content)
          break
        case 3:
          uni.navigateTo({
            url: `/pagesSub/activity/activityDetail?id=${banner.jump_content}`
          })
          break
        case 4:
          console.log('jump_content', banner.jump_content)
          this.$store.commit('changeCateId', banner.jump_content)
          uni.switchTab({
            url: '/pages/classification'
          })
          break
        case 5:
          this.$store.commit('changeCateId', banner.jump_content)
          uni.navigateTo({
            url: '/pagesSub/other/noviceStrategy'
          })
          break
        default:
      }
    }
  },
  filters: {
    bannerListFilter (e) {
      return e.map(item => {
        item.url = item.imgs
        return item
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-main {
  .first {
    height: 540px;
    opacity: 1;
    transition: all 1s;
  }
  .hidden-first {
    height: 0;
    opacity: 0;
  }
  .index-header {
    height: 314px;
    background: url('~@/static/common/bg_sy.png') no-repeat center top;
    background-size: cover;
    transition: height 2s;
    .index-banner {
      position: relative;
      margin: 0 auto;
      width: 694px;
      transition: width 2s;
      .index-logo {
        margin-bottom: 36px;
        text-align: center;
        image {
          width: 88px;
          height: 44px;
          background: url('~@/static/common/logo_bt.png') no-repeat top top;
          background-size: cover;
        }
      }
    }
  }
  .activity-flow {
    background-color: #fff;
  }
  .index-tabs {
    padding: 24px 28px 16px;
  }
  .index-body {
    background-color: #fff;
    .sticky {
      background-color: #fff;
      .nav-title {
        box-sizing: border-box;
        padding-bottom: 30px;
        transition: padding 1s;
      }
    }
    .no-location,
    .activity-list {
      padding: 0 28px;
      min-height: 100vh;
      background-color: #fff;
      .activity-card {
        padding: 32px 0;
      }
    }
    .touch-bottom {
      padding: 30px 0;
      color: #babbbc;
    }
  }
  .def-content {
    margin-top: 212px;
  }
}
</style>

<style >
.index-tabs >>> .u-tab-item {
  z-index: 10;
  font-weight: bold !important;
}
.index-tabs >>> .u-tab-item + .u-tab-item {
  margin-left: 42px;
}
</style>