video_app/pages/index/index2.vue

222 lines
5.8 KiB
Vue

<template>
<view>
<view style="height: 555rpx;position: relative;">
<image src="../../static/indexbh.png" style="width: 100%;height: 555rpx;position: absolute;" mode="">
</image>
<view style="display: flex;align-items: center;justify-content: space-between; padding: 88rpx 25rpx;">
<image src="../../static/logo.png" style="width: 187rpx;height:50rpx;" mode=""></image>
<view style="z-index: 50;width: 236rpx;line-height: 43rpx;background: rgba(255,255,255,0.29);border-radius: 7rpx 7rpx 7rpx 7rpx;
font-weight: 400;font-size: 21rpx;color: rgba(255,255,255,0.85);display: flex;align-items: center;"
@tap="moreVideo">
<!-- <uni-icons type="search" size="16" style="color: rgba(255,255,255,0.85);"></uni-icons> -->
<image src="../../static/dwbimgs/sosuo.png" style="height: 34rpx;width: 34rpx;" mode=""></image>
点击搜索更多好剧
</view>
</view>
<template v-if="noticeList.length > 0 && isShowMoneyPay">
<view class="gongao">
<view class="gongaoicon">
公告
</view>
<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
class="swiperstyle">
<swiper-item @tap='goMsg(item.url)' v-for="(item, index) in noticeList" :key="index">
<view style="height: 80rpx;line-height: 80rpx;">{{ item.title }}</view>
</swiper-item>
</swiper>
</view>
</template>
</view>
<view style="display: flex;align-items: center;justify-content: space-between;padding:0 20rpx;">
<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
:style="active == 1 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('', 1)">
最新
</view>
<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
:style="active == 2 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('1', 2)">
排行
</view>
<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
:style="active == 3 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('2', 3)">
最热
</view>
<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
:style="active == 4 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('1', 4)">
剧情
</view>
<view style="background-color: #f0f0f0;margin-left:20rpx;padding:6rpx 20rpx"
:style="active == 5 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('2', 5)">
飙升
</view>
</view>
<view class="">
<contentlist :list='list'></contentlist>
</view>
<u-image v-if="isShowMoneyPay" @click="goMsg('/me/VjgyqAzklr/VjgyqAzklr')"
:src="`../../static/red-pack-new.gif`"
style="width: 200rpx;height: 200rpx;position: fixed;right: 10rpx;bottom: 180rpx;"></u-image>
<u-modal v-if="isShowMoneyPay" v-model="ruleShow" confirm-text="知道了" :title="rule_title" :title-style="{ fontWeight: '700' }"
confirm-color="rgb(255, 117, 129)">
<view class="u-p-30 u-text-left">
<scroll-view scroll-y="true" style="max-height: 50vh;">
<rich-text class="color-666" :nodes="rule_content"></rich-text>
</scroll-view>
</view>
</u-modal>
</view>
</template>
<script>
import contentlist from './components/contentlist.vue'
import httpsRequest from '@/common/httpRequest.js'
export default {
components: {
contentlist
},
data() {
return {
noticeList: [], //公告列表
list: [],
page: 1,
active: 1,
isShowMoneyPay: true,
ruleShow: false,
rule_title: '',
rule_content: '',
}
},
onShow() {
this.getMsg()
this.getrecomVideo()
httpsRequest.getT("/app/common/type/919", {}).then(res => {
if (res.code == 0) {
const sysInfo = uni.getSystemInfoSync();
let isIos = sysInfo.platform == 'ios'
this.isIosApp = isIos
this.isShowMoneyPay = !(res.data.value == '1' && isIos)
}
});
httpsRequest.getT("/app/announcement", {}).then(res => {
if (res.code == 0) {
if (res.data && res.data.state == 1) {
this.ruleShow = true
this.rule_title = res.data.title
this.rule_content = res.data.content
}
}
});
},
onReachBottom() {
++this.page
this.getrecomVideo()
},
methods: {
// 跳转公告链接
goMsg(url) {
if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
uni.navigateTo({
url
});
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
},
moreVideo() {
uni.navigateTo({
url: '/pages/index/course/courseList?title=最新热播'
})
},
// 列表
//获取推荐视频
getrecomVideo(sort, active = 1) {
this.active = active
if (sort) {
this.page = 1
}
let data = {
page: this.page,
limit: 12,
sort: sort,
classifyId: ''
}
this.$Request.getT('/app/course/selectCourse', data).then(res => {
if (res.code == 0) {
if (this.page == 1) {
this.list = res.data.list
} else {
this.list = [...this.list, ...res.data.list]
}
}
})
},
// 公告
getMsg() {
let data = {
page: 1,
limit: 5,
state: 1
}
this.$u.api.msg(data).then(res => {
if (res.code == 0) {
this.notice = res.data.list
res.data.list.forEach(res => {
this.noticeList.push(res)
})
} else {
uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
})
},
}
}
</script>
<style scoped lang="scss">
.gongao {
position: absolute;
bottom: 75rpx;
left: 70rpx;
border-radius: 21rpx 21rpx 21rpx 21rpx;
width: 611rpx;
height: 78rpx;
background-color: rgba(255, 255, 255, .65);
display: flex;
align-items: center;
padding: 12rpx;
.gongaoicon {
color: #ffffff;
width: 98rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
background-image: url('../../static/gonggaobg.png');
background-size: 98rpx 50rpx;
}
.swiperstyle {
height: 78rpx;
width: 80%;
}
}
</style>