zhangsiye/mini/pages/index/index.vue

<template>
  <view class="container">
    <!--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: '#1B203C',
          padding: '14rpx 30rpx',
          width: '700rpx',
          borderRadius: '36rpx',
          color: '#fff'
        }"
        @confirm="handleSearch"
      />
    </view>
    <!--swpier-->
    <swiper-box />
    <!--栏目分类-->
    <nav-bar />
    <!--分类-->
    <template v-for="(item,index) in homeColumn">
      <episode-box
        v-if="item.type !== homeColumnType[2]"
        :key="index"
        :title="item.name"
        :type="item.type"
      />
    </template>
    <!--tab bar-->
    <tab-bar />
    <!--最近播放-->
    <recent />
  </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'
export default {
  components: { Recent, NavBar, TabBar, EpisodeBox, SwiperBox },
  data() {
    return {
      keywords: '',
      homeColumnType: {
        1: 'recommend',
        2: 'todayRecommend',
        3: 'news',
        4: 'rank'
      },
      homeColumn: []
    }
  },
  computed: {
  },
  onLoad(options) {
    this.getHomeColumn()
  },
  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]
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .container{
    padding: 0 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>