zhangsiye/mini/pages/index/index.vue

<template>
  <view class="container">
    <check-login />
    <template v-if="isLogin">
      <!--search-->
      <view class="search-box main-center cross-center">
        <u-input
          v-model="keywords"
          placeholder="请输入剧名"
          color="#fff"
          border="none"
          prefix-icon="search"
          :prefix-icon-style="{
            color: $colors.primaryColor,
            fontSize: '50rpx',
            fontWeight: 500,
            lineHeight: '50rpx'
          }"
          :custom-style="{
            backgroundColor: $colors.bgOpColor,
            padding: '14rpx 30rpx',
            width: '700rpx',
            borderRadius: '36rpx',
            color: '#fff'
          }"
          @confirm="handleSearch"
        />
      </view>
      <!--swpier-->
      <swiper-box />
      <!--栏目分类-->
      <nav-bar />
      <!--分类-->
      <episode-box
        v-for="(item,index) in homeColumn"
        :key="index"
        :title="item.name"
        :type="item.type"
      />
      <!--tab bar-->
      <tab-bar />
      <!--最近播放-->
      <recent />
    </template>
  </view>
</template>

<script>
import SwiperBox from '../../components/SwiperBox/index'
import EpisodeBox from './components/EpisodeBox'
import TabBar from '../../components/TabBar/index'
import NavBar from '../../components/NavBar/index'
import Recent from './components/Recent'
import CheckLogin from '../../components/CheckLogin/index'
import { mapState } from 'vuex'
import Cache from '../../utils/cache'
export default {
  components: { CheckLogin, Recent, NavBar, TabBar, EpisodeBox, SwiperBox },
  data() {
    return {
      keywords: '',
      homeColumnType: {
        1: 'recommend',
        2: 'todayRecommend',
        3: 'news',
        4: 'rank'
      },
      homeColumn: [],
      parent_id: 0,
      scene_code: ''
    }
  },
  computed: {
    isLogin() {
      return this.$api.user.isLogin()
    },
    ...mapState({
      userInfo: seate => seate.user.info
    })
  },
  onLoad(options) {
    // 直接传递user_id
    if (typeof options.user_id !== 'undefined' && options.user_id) {
      Cache.set('parent_id', options.user_id)
    }
    // 微信小程序 对应的二维码是 scene_code
    if (typeof options.scene !== 'undefined' && options.scene) {
      Cache.set('parent_id', options.scene)
    }
    console.log('-->index data', options)
    this.isLogin && this.getHomeColumn()
    this.isLogin && this.bindParent()
  },
  methods: {
    handleSearch() {
      if (!this.keywords) {
        this.$u.toast('请输入剧集名称')
        return
      }
      this.$u.route({
        url: '/pages/index/search',
        params: {
          keywords: this.keywords
        }
      })
    },
    getHomeColumn() {
      this.$api.setting.homeColumn().then(res => {
        this.homeColumn = res.data
        this.homeColumn.forEach(obj => {
          obj.type = this.homeColumnType[obj.type]
        })
      })
    },
    bindParent() {
      const parentId = Cache.get('parent_id')
      if (parentId && !this.userInfo.parent_id) {
        this.$api.user.bind(parentId).then(res => {
          console.log('-->bind success')
          this.$store.dispatch('user/info', res.data)
          Cache.remove('parent_id')
        })
      }
    }
  },
  onShareAppMessage() {
    return this.$util.shareMessage(this.userInfo)
  }
}
</script>

<style lang="scss" scoped>
  .container{
    padding: 30rpx 20rpx 160px;
    .search-box{
      /*margin-top: 30rpx;*/
    }
    .category-box{
      .category-item{
        flex: 1;
        font-size: 32rpx;
        .icon{
          image{
            width: 100rpx;
            height: 100rpx;
          }
        }
        text{
          color: #fff;
        }
      }
    }
  }
</style>