new_app/pages/index/index.vue

358 lines
8.4 KiB
Vue

<template>
<view class="indexStyle">
<image src="@/static/index/indexbh.png" mode="">
</image>
<view class="indexStyleTwo">
<image src="@/static/logo.png" mode=""></image>
<!-- <view @tap="moreVideo">
<image src="@/static/sosuo.png" style="height: 34rpx;width: 34rpx;" mode=""></image>
点击搜索更多好剧
</view> -->
</view>
<template v-if="$common.isIosExamine()">
<view class="gongao">
<view class="gongaoicon">
公告
</view>
<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
class="swiperstyle">
<swiper-item v-for="(item, index) in datas.noticeList" :key="index">
<view style="height: 80rpx;line-height: 80rpx;">{{ item.title }}</view>
</swiper-item>
</swiper>
</view>
</template>
</view>
<view class="navTop">
<view :class="datas.active == 1 ? 'navTop-active' : ''" @tap="getrecomVideo('', 1)">
最新
</view>
<view :class="datas.active == 2 ? 'navTop-active' : ''" @tap="getrecomVideo('1', 2)">
排行
</view>
<view :class="datas.active == 3 ? 'navTop-active' : ''" @tap="getrecomVideo('2', 3)">
最热
</view>
<view :class="datas.active == 4 ? 'navTop-active' : ''" @tap="getrecomVideo('1', 4)">
剧情
</view>
<view :class="datas.active == 5 ? 'navTop-active' : ''" @tap="getrecomVideo('2', 5)">
飙升
</view>
</view>
<contentlist :list='datas.list'></contentlist>
<image v-if="$common.isIosExamine()" @click="goMsg()" src="@/static/index/red-pack-new.gif"
style="width: 200rpx;height: 200rpx;position: fixed;right: 10rpx;bottom: 180rpx;" mode=""></image>
<up-modal :show="datas.version.show" :confirm-text="datas.version.confirmText"
:showCancelButton="datas.version.cancelText!=''" @confirm='confirmUpdateVersion' :title="datas.version.title"
:title-style="{ fontWeight: '700' }" confirm-color="rgb(255, 117, 129)" @cancel="datas.version.show = false">
<view class="" style="padding-top: 30rpx;text-align: left;">
<scroll-view scroll-y="true" style="max-height: 50vh;">
<rich-text style="color:#666" :nodes="datas.version.content"></rich-text>
</scroll-view>
</view>
</up-modal>
<up-modal :show="datas.ruleShow" v-if="$common.isIosExamine()&&!datas.version.show" confirm-text="知道了" title="规则说明"
:title="datas.rule_title" :title-style="{fontWeight:'700'}" @confirm="ruleConfirm"
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 style="text-align: justify;font-size: 18px;color: #666;"
:nodes="datas.rule_content"></rich-text>
</scroll-view>
</view>
</up-modal>
</template>
<script setup>
import {
reactive
} from 'vue';
import {
announcement,
messageselectMessage,
courseselectCourse
} from '@/api/index/index.js'
import {
onLoad,
onReady,
onReachBottom
} from '@dcloudio/uni-app'
import contentlist from './components/contentlist.vue'
import {
selectNewApp
} from '@/api/user/user.js';
import config from '@/commons/config.js';
import {
linkTo
} from '@/utils/app.js';
import {
useCommonStore
} from '@/store/common.js'
const $common = useCommonStore()
let datas = reactive({
noticeList: [], //公告列表
active: 1, // 最新、最热。。。切换顶部导航栏
list: [], // 底部短剧内容
page: 1, // 首页推荐分页
ruleShow: false,
rule_title: '', // 首页弹窗标题
rule_content: '', // 首页弹窗内容
ruleIndex: 0,
ruleList: [],
version: {
show: false,
title: "",
content: "",
confirmText: "",
cancelText: "",
}
})
onLoad(() => {
versionUpdate()
getMsg()
getrecomVideo()
})
onReady(() => {
announcement({
type: 0
}).then(res => {
datas.ruleList = res
ruleInit()
datas.ruleShow = true
})
})
onReachBottom(() => {
++datas.page
getrecomVideo()
})
function versionUpdate() {
//#ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary'); //竖屏正方向锁定
//获取当前系统版本信息
plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
//请求后台接口 解析数据 对比版本
selectNewApp().then(res => {
res = res[0];
let version;
if (uni.getSystemInfoSync().platform == 'android') {
version = res.version
}
if (uni.getSystemInfoSync().platform == 'ios') {
version = res.iosVersion
}
console.log(widgetInfo.version + '---' + version)
version = res.version
// && uni.getSystemInfoSync().platform == 'android'
if (widgetInfo.version < version) {
let downloadLink = '';
let androidLink = res.androidWgtUrl;
let iosLink = res.iosWgtUrl;
datas.version.show = true;
datas.version.title = "发现新版本";
datas.version.content = res.des;
if (res.method == "true") {
datas.version.confirmText = "立即更新"
} else {
datas.version.confirmText = "立即更新"
datas.version.cancelText = "下次更新"
}
}
});
});
//#endif
}
function confirmUpdateVersion() {
// plus.runtime.openURL(config.baseUrl + '/pages/login/appEq')
linkTo('/pages/login/download')
return
uni.showLoading({
title: '下载中...',
mask: true
});
if (uni.getSystemInfoSync().platform == 'android') {
uni.downloadFile({
url: androidLink,
success: downloadResult => {
console.log(downloadResult)
if (downloadResult.statusCode === 200) {
plus.runtime.install(
downloadResult.tempFilePath, {
force: false
},
d => {
console.log('install success...');
plus.runtime
.restart();
},
e => {
console.log(e)
console.error('install fail...');
}
);
}
}
});
}
if (uni.getSystemInfoSync().platform == 'ios') {
plus.runtime.openURL(iosLink, function(res) {});
}
}
function ruleInit() {
datas.rule_title = datas.ruleList[datas.ruleIndex].title
datas.rule_content = datas.ruleList[datas.ruleIndex].content
}
/**
* 规则确认
*/
function ruleConfirm() {
datas.ruleShow = false
datas.ruleIndex++
if (datas.ruleIndex >= datas.ruleList.length) {
datas.ruleIndex = 0
return
}
setTimeout(res => {
ruleInit()
datas.ruleShow = true
}, 300)
}
// 跳转公告链接
function goMsg(url) {
// uni.navigateTo({
// url: '/pages/index/prizeDraw/kevy-luckydraw'
// });
uni.navigateTo({
url: '/pages/me/prizeDraw'
});
}
// 搜索跳转
function moreVideo() {
uni.navigateTo({
url: '/pages/index/search/index'
});
}
// 公告
async function getMsg() {
let res = await messageselectMessage()
datas.noticeList = res.list
}
//获取推荐视频
async function getrecomVideo(sort, active = 1) {
datas.active = active
if (sort) {
datas.page = 1
}
let res = await courseselectCourse({
page: datas.page,
limit: 12,
sort: sort,
classifyId: ''
})
if (datas.page == 1) {
datas.list = res.list
} else {
datas.list = [...datas.list, ...res.list]
}
}
</script>
<style lang="scss" scoped>
.indexStyle {
height: 555rpx;
position: relative;
>image {
width: 100%;
height: 555rpx;
position: absolute;
}
.indexStyleTwo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 88rpx 25rpx;
>image {
width: 187rpx;
height: 50rpx;
}
>view {
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;
}
}
.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;
box-sizing: border-box;
.gongaoicon {
color: #ffffff;
width: 98rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 25rpx;
background-image: url('../../static/index/gonggaobg.png');
background-size: 98rpx 50rpx;
}
.swiperstyle {
height: 78rpx;
width: 80%;
}
}
}
.navTop-active {
color: #cb5d68;
}
.navTop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
>view {
background-color: #f0f0f0;
margin-left: 20rpx;
padding: 6rpx 20rpx
}
}
</style>