zhiyu_uni_duanju/pages/index/index.vue

<template>
  <view>
    <!-- 标题栏和状态栏占位符 -->
    <!-- <view class="titleNview-placing"> </view> -->
    <sub-tabvs class="" :tabs="typetab" @change="changeIndex" :selectIndex="selecttype"
      :scrollTop="scrollTop"></sub-tabvs>
    <view class="home-header pd0_15 mt10" :style="'background: ' + mbgColor + ';'">
      <view class="home-mendian flex alcenter space plr15 cl-w9" style="display: none;">
        <navigator style="width: calc(100% - 80rpx);" url="/pages/client/tuan/ss">
          <view class="flex alcenter" style="width: calc(100% - 80rpx);">
            <text class="iconfont  iconsousuo ft14 mr10"></text>
            <text class="text-over ft14" style="width: calc(100% - 60rpx);">请输入搜索内容</text>
          </view>
        </navigator>
        <text @click="saoma()" class="iconfont iconicon_saoma ft24"></text>
      </view>

      <view class="">
        <home-banner :banners="banners"></home-banner>
      </view>
    </view>
    <view class="integral-mall-main plr15" style="margin-top: 30upx;">
      <view class="integal-mall-menu flex pt10 pb10">
        <view class="col2 text-center" @click="linkTo" data-link="/pages/zhuiju/index" data-type='tabbar'>
          <view>
            <!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[0]"></image> -->
            <image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/zuiju.png"></image>
          </view>
          <view class="ft14 ftw600">追剧</view>
        </view>
        <view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/index/billboard/index">
          <view>
            <!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[2]"></image> -->
            <image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/phb.png"></image>
          </view>
          <view class="ft14 ftw600">排行</view>
        </view>
        <view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/index/new/index">
          <view>
            <!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[6]"></image> -->
            <image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/new.png"></image>
          </view>
          <view class="ft14 ftw600">最新</view>
        </view>
      </view>
      <view class="mt24">
        <view class="flex alcenter start">
          <view class="flex alcenter">
            <image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
            <text class="ft16 ftw600 cl-main ml15">{{ hotdata.subject_name }}</text>
          </view>
          <!-- <navigator url="/pages/client/tuan/ss?selectIndex=1"> -->
          <!-- <view @click="huanyihuan()" class="ft14 cl-notice">换一换</view> -->
          <!-- </navigator> -->
        </view>

        <view class="mt16 card-wrapper" style="min-height: 100px;">
          <block v-for="(value, key) in hotdata.data" :key="key">
            <view class="box card" style="width:31%; position: relative; border-radius:20rpx;" @click="detail(value)">
              <!-- <view class="btn-mini" style="position: absolute; top: 20upx; right: 20upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view> -->
              <image class="integral-mall-goods" mode="aspectFill" :src="value.cover_image"></image>
              <view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
            </view>
          </block>
        </view>
      </view>
      <view class="mt24">
        <view class="flex alcenter start">
          <view class="flex alcenter">
            <image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
            <text class="ft16 ftw600 cl-main ml15">{{ givedata.subject_name }}</text>
          </view>
          <!-- <navigator url="/pages/client/tuan/ss?selectIndex=1"> -->
          <!-- <view @click="huanyihuan()" class="ft14 cl-notice">换一换</view> -->
          <!-- </navigator> -->
        </view>
        <view class="mt16 card-wrapper" style="min-height: 100px;">
          <block v-for="(value, key) in givedata.data" :key="key">
            <view class="box card" style="width:31%; position: relative; border-radius:20rpx;" @click="detail(value)">
              <image class="integral-mall-goods" mode="aspectFill" :src="value.cover_image"></image>
              <view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
  <!-- <home-default :datasa="datasa"></home-default> -->
</view></view></template>
<script>
import {
  getMiniprogramHall
} from '@/common/apis/index.js'
import { getConfigInfo } from "@/common/apis/common.js";
import cellGroup from '../../uni_modules/uview-ui/libs/config/props/cellGroup';
export default {
  data() {
    return {
      navLock: false,
      banners: [],
      hotdata: [],
      givedata: [],
      typetab: [{
        name: '推荐短剧',
        id: 1
      },],
      selecttype: 0,
      scrollTop: 0,
      type: 1,
      mbgColor: this.$mbgColor,
    }
  },
  computed: {

  },
  onPageScroll(e) {
    if (e.scrollTop > 44) {
      if (this.navLock == false) {
        this.navLock = true;
        uni.setNavigationBarColor({
          frontColor: "#000000",
          backgroundColor: "#FFFFFF",
          complete: () => {
            this.navLock = false;
          }
        });
      }
    } else {
      if (this.navLock == false) {
        this.navLock = true;
        let this_ = this
        uni.setNavigationBarColor({
          frontColor: "#000000",
          backgroundColor: this_.mbgColor,
          complete: () => {
            this.navLock = false;
          }
        });
      }
    }
  },
  onLoad(e) {
    this.settitle();

  },
  onShow() {
    this.getList();
  },
  methods: {
    async settitle() {
      let res = await getConfigInfo();
      let config = res.data;
      uni.setNavigationBarTitle({
        title: config.play_name
      });
    },
    changeIndex(index) {
      if (this.typetab[index].id) {
        this.type = this.typetab[index].id
        //this.getList(0)
      }
      console.log(this.type)
      this.selecttype = index;
    },
    huanyihuan() {

    },
    getList() {
      getMiniprogramHall().then(res => {
        console.log(res, 'getMiniprogramHallgetMiniprogramHall')
        this.banners = res.data.banner
        this.hotdata = res.data.recommend[0]
        this.givedata = res.data.recommend[1]
      })
    },
    saoma() {
      //#ifdef APP-PLUS  
      uni.scanCode({
        success: function (res) {
          if (res.result.indexOf("uid") != -1) {
            var obj = JSON.parse(res.result);
            if (obj.uid) {
              uni.navigateTo({
                url: '/pages/login/reg?uid=' + obj.uid
              })
            }
          } else {
            uni.showToast({
              title: res.result,
              icon: "none"
            });
          }
        }
      });
      //#endif

    },
    detail(value) {
      uni.navigateTo({
        url: '/pages/video/index?video_id=' + value.video_id
      })
    },
    linkTo(e) {
      console.log(e, 'linkTolinkTolinkTo')
      let link = e.currentTarget.dataset.link;
      let type = e.currentTarget.dataset.type;
      if (type == 'tabbar') {
        uni.switchTab({
          url: link
        })
      } else {
        uni.navigateTo({
          url: link
        })
      }

    },
  },
}
</script>

<style lang="scss" scoped>
.card-wrapper {
  display: flex;
  justify-content: start;

  .card {
    margin: 6px;
  }
}

.home-header {
  /* height: 300rpx; */
  width: 100%;
  position: relative;
  border-radius: 0rpx 0rpx 48rpx 48rpx;
}

.home-mendian {
  width: 100%;
  height: 84rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 42rpx;
}

.integral-mall-main {
  position: relative;
  /* margin-top: -104rpx; */
}

.integal-mall-menu {
  width: 100%;
  height: 190rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
}

.integral-mall-goods {
  width: 100%;
  height: 280rpx;
  background: #F2F2F2;
  border-radius: 16upx;
}

.titleNview-placing {
  height: var(--status-bar-height);
  padding-top: 44px;
  box-sizing: content-box;
}
</style>