520 lines
12 KiB
Vue
520 lines
12 KiB
Vue
<template>
|
|
<view class="pagesContent">
|
|
<view class="titleNview-placing"></view>
|
|
<view class="homeTab">
|
|
<view class="homeTabBox">
|
|
<view class="homeTabContent">
|
|
<view :class="tabIndex === item.id ? 'homeTabItem active' : 'homeTabItem'"
|
|
v-for="(item, index) in tabData" :key="index" @click="tabIndex = item.id">{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view v-if="tabIndex==1" style="margin-top: 20rpx;">
|
|
<view class="home-header pd0_15 mt10">
|
|
<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>
|
|
</view>
|
|
<view class="">
|
|
<home-banner :banners="banners"></home-banner>
|
|
</view>
|
|
</view>
|
|
<view class="integral-mall-main plr15" style="margin-top: 30rpx;">
|
|
<view class="integal-mall-menu flex pt10 pb10">
|
|
<view v-if="config.site.shop_type == 1" class="col2 text-center" @click="linkTo"
|
|
data-link="/pagesA/integral/integralShop">
|
|
<view>
|
|
<image style="width: 72rpx; height: 72rpx;"
|
|
src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/integral.png">
|
|
</image>
|
|
</view>
|
|
<view class="ft12 ftw500">积分商城</view>
|
|
</view>
|
|
|
|
<view class="col2 text-center" @click="linkTo" data-link="/pagesA/player/ranking">
|
|
<view>
|
|
<image style="width: 72rpx; height: 72rpx;"
|
|
src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/Ranking.png">
|
|
</image>
|
|
</view>
|
|
<view class="ft12 ftw500">排行</view>
|
|
</view>
|
|
|
|
<view class="col2 text-center" @click="linkTo" data-link="/pagesA/myCenter/bingeWatch">
|
|
<view>
|
|
<image style="width: 72rpx; height: 72rpx;"
|
|
src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/chase.png"></image>
|
|
</view>
|
|
<view class="ft12 ftw500">追剧</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="col2 text-center" @click="linkTo" data-link="/pagesA/player/news">
|
|
<view>
|
|
<image style="width: 72rpx; height: 72rpx;"
|
|
src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/Latest.png"></image>
|
|
</view>
|
|
<view class="ft12 ftw500">最新</view>
|
|
</view>
|
|
<!-- /pages/client/integral/role -->
|
|
|
|
<!-- <view class="col2 text-center" @click="linkTo" data-link="/pagesA/player/free">-->
|
|
<!-- <view>-->
|
|
<!-- <image style="width: 72rpx; height: 72rpx;" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/Free.png"></image>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="ft12 ftw500">免费</view>-->
|
|
<!-- </view>-->
|
|
</view>
|
|
|
|
|
|
<view class="mt24" v-if="hotdata[1]">
|
|
<view class="flex alcenter space">
|
|
<view class="flex alcenter">
|
|
<text class="ft16 ftw600 cl-main ml15" style="margin-left: 0;margin-right: 8rpx;">热门短剧
|
|
</text>
|
|
</view>
|
|
<view @click="huanyihuan()" class="ft14 cl-notice flex alcenter">
|
|
<image style="width: 28rpx;height: 28rpx;"
|
|
src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/swapwith.png">
|
|
</image>
|
|
换一换
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mt16 flex space" style="justify-content: start;">
|
|
<block v-for="(value,key) in hotdata" :key="key" v-if="key>=hyh && key<hyh+3">
|
|
<view class=" pb10"
|
|
style="width:30%; position: relative; border-radius:20rpx;margin-right: 30rpx;"
|
|
@click="detail(value)">
|
|
<image class="integral-mall-goods" mode="scaleToFill" :src="value.img"></image>
|
|
<view class=" ft14 ftw500 text-over cl-main">{{ value.name }}</view>
|
|
<view class=" ft10 cl-999 ftw500 text-over cl-main">{{ value.text }}</view>
|
|
|
|
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mt24" v-if="givedata[3]">
|
|
<view class="flex alcenter space">
|
|
<view class="flex alcenter">
|
|
<image style="width: 28rpx;height: 28rpx;"
|
|
src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/paihang.png">
|
|
</image>
|
|
<text class="ft16 ftw600 cl-main">排行榜</text>
|
|
</view>
|
|
<view class="ft14 cl-notice">每周热剧TOP3</view>
|
|
|
|
</view>
|
|
<view class="mt16 flex space">
|
|
|
|
<block v-for="(value,key) in givedata" :key="key" v-if="key<3">
|
|
<view class="integral-mall-coupon" style="width: 30%; margin-right: 30rpx;"
|
|
@click="detail(value)">
|
|
<view class="top">
|
|
<view class="flex center">
|
|
<view class="coupon-value">
|
|
<image class="integral-tuan-l" style="height: 280upx;" mode="scaleToFill"
|
|
:src="value.img"></image>
|
|
<view class=" ft14 ftw500 text-over cl-main">{{ value.name }}</view>
|
|
<view class=" ft10 cl-999 ftw500 text-over cl-main">{{ value.text }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="mt24" v-if="freedata[1]">
|
|
<view class="flex alcenter space">
|
|
<view class="flex alcenter">
|
|
<text class="ft16 ftw600 cl-main" style="margin-left: 20rpx;margin-right: 8rpx;">最新热播</text>
|
|
</view>
|
|
<view @click="huanyihuan()" class="ft14 cl-notice">大家都在看的热播好剧</view>
|
|
</view>
|
|
|
|
<view class="mt16 scrollView">
|
|
<block v-for="(value,key) in freedata" :key="key">
|
|
<view class=" pb10"
|
|
style="width:207rpx; display: inline-block; border-radius:20rpx;margin-right: 30rpx;"
|
|
@click="detail(value)">
|
|
<image class="integral-mall-goods" mode="scaleToFill" :src="value.img"></image>
|
|
<view class=" ft14 ftw500 text-over cl-main">{{ value.name }}</view>
|
|
<view class=" ft10 ftw500 cl-999 text-over cl-main">{{ value.text }}</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<home-default :datasa="datasa"></home-default>
|
|
</view>
|
|
|
|
|
|
<view v-if="tabIndex==2">
|
|
<home-jqjs :datasa="listjq"></home-jqjs>
|
|
</view>
|
|
<view v-if="tabIndex==3" class="flex space pd10_15" style="display:flex; flex-wrap:wrap;">
|
|
<block v-for="(value,key) in listbz" :key="key">
|
|
<view style="width: 49%; margin-bottom: 20upx;">
|
|
<image style="height: 500upx; width: 100%; border-radius: 18upx;" mode="aspectFill"
|
|
:src="value.img"></image>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import login from "@/utils/login";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
config: null,
|
|
tabData: [{
|
|
name: '推荐短剧',
|
|
id: 1
|
|
},
|
|
{
|
|
name: '剧情介绍',
|
|
id: 2
|
|
},
|
|
{
|
|
name: '剧情壁纸',
|
|
id: 3
|
|
}
|
|
],
|
|
banners: [],
|
|
tabIndex: 1,
|
|
listbz: [],
|
|
listjq: [],
|
|
datasa: [],
|
|
hotdata: [],
|
|
givedata: [],
|
|
freedata: [],
|
|
hyh: 0,
|
|
pages: {
|
|
allPages: 1,
|
|
currentPage: 1,
|
|
pageSize: 15
|
|
}
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
// #ifdef MP-WEIXIN
|
|
if (!uni.getStorageSync("userinfo").token) {
|
|
login.wxLogin()
|
|
}
|
|
// #endif
|
|
},
|
|
onShow() {
|
|
this.pages.allPages = 1;
|
|
this.pages.currentPage = 1;
|
|
this.getPageData();
|
|
this.getVideoList();
|
|
},
|
|
onReachBottom() {
|
|
if (this.pages.allPages >= this.pages.currentPage) {
|
|
this.getVideoList()
|
|
}
|
|
},
|
|
methods: {
|
|
huanyihuan() {
|
|
if (this.hyh < 12) {
|
|
this.hyh = this.hyh + 3
|
|
}
|
|
if (this.hyh >= 12) {
|
|
this.hyh = 0
|
|
}
|
|
},
|
|
getPageData() {
|
|
let that = this;
|
|
that.$httpRequest({
|
|
url: '/api/video/indexdata',
|
|
method: 'GET',
|
|
data: {},
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.config.name) {
|
|
uni.setNavigationBarTitle({
|
|
title: res.config.name
|
|
});
|
|
}
|
|
uni.setStorageSync("config", res.config)
|
|
this.config = res.config;
|
|
this.banners = res.config.banner
|
|
this.listbz = res.listbz
|
|
this.listjq = res.listjq
|
|
// this.datasa = res.new
|
|
this.hotdata = res.hotdata
|
|
this.givedata = res.givedata
|
|
this.freedata = res.freedata;
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
|
|
getVideoList() {
|
|
let that = this;
|
|
that.$httpRequest({
|
|
url: '/api/video/lists',
|
|
method: 'GET',
|
|
data: {
|
|
page: that.pages.currentPage,
|
|
limit: that.pages.pageSize
|
|
},
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.rows.length > 0) {
|
|
if (that.pages.currentPage === 1) {
|
|
that.datasa = res.rows;
|
|
that.pages.allPages = Math.ceil(res.total / that.pages.pageSize)
|
|
} else {
|
|
that.datasa = that.datasa.concat(res.rows);
|
|
}
|
|
this.pages.currentPage += 1;
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
|
|
|
|
|
|
detail(item) {
|
|
console.log('go item detail')
|
|
console.log(item);
|
|
var fxpid = 1
|
|
if (uni.getStorageSync("userinfo")) {
|
|
fxpid = uni.getStorageSync("userinfo").id
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pagesA/player/detailPlayer?vid=' + item.id + '&mid=0' + '&fxpid=' + fxpid +
|
|
"&start_free=" + item.wechat_start + "&end_free=" + item.wechat_end
|
|
})
|
|
},
|
|
linkTo(e) {
|
|
let link = e.currentTarget.dataset.link;
|
|
uni.navigateTo({
|
|
url: link
|
|
})
|
|
},
|
|
|
|
def() {
|
|
let that = this;
|
|
that.$httpRequest({
|
|
url: "",
|
|
method: "GET",
|
|
data: {}
|
|
}).then(res => {
|
|
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
|
|
|
|
|
|
},
|
|
onShareAppMessage() {},
|
|
// onShareTimeline(){},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pagesContent {
|
|
// background-image: url(https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/index_bg.png);
|
|
background-image: url(https://wx.yaohe.hnjrdzkj.xyz/static/wechat/shop/wechat/static/home_bg.png);
|
|
background-size: 750rpx 642rpx;
|
|
background-repeat: no-repeat;
|
|
background-color: #F2F5F8;
|
|
min-height: 100vh;
|
|
min-width: 100vw;
|
|
}
|
|
|
|
.titleNview-placing {
|
|
height: var(--status-bar-height);
|
|
padding-top: 68rpx;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.homeTab {
|
|
height: 80rpx;
|
|
padding: 14rpx 30rpx 0rpx 32rpx;
|
|
}
|
|
|
|
.homeTabBox {
|
|
height: 60rpx;
|
|
overflow: hidden;
|
|
|
|
.homeTabContent {
|
|
height: 70rpx;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
|
|
.homeTabItem {
|
|
line-height: 60rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
margin-right: 60rpx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.active {
|
|
color: #FF6600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.home-header {
|
|
/* height: 300rpx; */
|
|
width: 100%;
|
|
// position: relative;
|
|
border-radius: 0rpx 0rpx 48rpx 48rpx;
|
|
}
|
|
|
|
.home-main {
|
|
width: 100%;
|
|
position: relative;
|
|
margin-top: -156rpx;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.home-mendian {
|
|
width: 100%;
|
|
height: 84rpx;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 42rpx;
|
|
}
|
|
|
|
.integral-mall-header {
|
|
position: relative;
|
|
height: 320rpx;
|
|
}
|
|
|
|
.integral-mall-header .bg {
|
|
width: 100%;
|
|
height: 320rpx;
|
|
}
|
|
|
|
.integral-mall-header .main {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 320rpx;
|
|
}
|
|
|
|
.swiper-integral {
|
|
height: 32rpx;
|
|
width: 100%;
|
|
}
|
|
|
|
.integral-mall-main {
|
|
position: relative;
|
|
/* margin-top: -104rpx; */
|
|
}
|
|
|
|
.integal-mall-menu {
|
|
width: 100%;
|
|
// height: 190rpx;
|
|
// background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.integral-tuan-l {
|
|
width: 100%;
|
|
height: 280rpx;
|
|
background: #f2f2f2;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
|
|
.integral-mall-coupon {
|
|
// background: #FFFFFF;
|
|
position: relative;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.integral-mall-coupon .top {
|
|
padding: 0rpx 0rpx 24rpx 0rpx;
|
|
// border-bottom: 2rpx dashed #FEC675;
|
|
}
|
|
|
|
.integral-mall-coupon .y-l,
|
|
.integral-mall-coupon .y-r {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 10rpx;
|
|
background: #F5F6FA;
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 284rpx;
|
|
}
|
|
|
|
.integral-mall-coupon .y-l {
|
|
left: -10rpx;
|
|
}
|
|
|
|
.integral-mall-coupon .y-r {
|
|
right: -10rpx;
|
|
}
|
|
|
|
.integral-mall-coupon .coupon-value {
|
|
width: 100%;
|
|
}
|
|
|
|
.integral-mall-coupon .coupon-value image {
|
|
width: 100%;
|
|
}
|
|
|
|
.integral-mall-coupon .coupon-value .num {
|
|
width: 100%;
|
|
height: 64rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.integral-mall-goods {
|
|
min-width: 206rpx;
|
|
width: 100%;
|
|
height: 280rpx;
|
|
background: #F2F2F2;
|
|
border-radius: 16upx;
|
|
}
|
|
|
|
.titleNview-placing {
|
|
height: var(--status-bar-height);
|
|
padding-top: 68rpx;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.scrollView {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
min-width: 100%;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
</style> |