吆喝
This commit is contained in:
蔡同学
@@ -0,0 +1,520 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user