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'
        }"
      />
    </view>
    <!--swpier-->
    <swiper-box />
    <!--栏目分类-->
    <view class="category-box main-center cross-center">
      <view
        v-for="(item,index) in category"
        :key="index"
        class="category-item dir-top-wrap cross-center"
        @click="handleRedirect(item)"
      >
        <view class="icon">
          <image :src="item.icon" />
        </view>
        <text>{{ item.name }}</text>
      </view>
    </view>
    <!--分类-->
    <episode-box title="短剧推荐" />
    <episode-box title="最新热剧" />
    <episode-box title="排行榜" />
    <!--充值-->
    <recharge :show.sync="recharge.show" />
  </view>
</template>

<script>
import SwiperBox from '../../components/SwiperBox/index'
import EpisodeBox from './components/EpisodeBox'
import Recharge from '../../components/Recharge/index'
export default {
  components: { Recharge, EpisodeBox, SwiperBox },
  data() {
    return {
      keywords: '',
      category: [
        { icon: '', name: '排行榜', href: '/pages/' },
        { icon: '', name: '最新', href: '/pages/' },
        { icon: '', name: '会员', href: '/pages/member/index' },
        { icon: '', name: '签到', href: '/pages/sign/index' },
        { icon: '', name: '充值', type: 'recharge' }
      ],
      recharge: { show: false }
    }
  },
  computed: {
  },
  onLoad(options) {
  },
  methods: {
    handleRedirect(item) {
      if (item.type === 'recharge') {
        this.recharge.show = true
      } else if (item.href) {
        this.$u.route(item.href)
      }
    }
  }
}
</script>

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