383 lines
11 KiB
Vue
Raw Permalink Normal View History

2025-07-19 19:41:27 +08:00
<template>
<view class="page content">
<!-- #ifdef APP-PLUS -->
<unitv-page id="indexPage" :show="true" ref="unitvPage" @back="pageBack">
<unitv-zone id="zone1" class="zone1" :autoFous="true" down="zone3" :item="0" :values="item1" :column="item1.length">
<unitv-item v-for="(a,index) in item1" :item="index" :key="index" class="item" @hover="hoverItem('zone1', index)" @click="clickItem('zone1', a)">
<view v-if="index == 0" class="item-top-one">首页</view>
<view v-else-if="index == 1" class="item-top-two">
搜索
</view>
<view v-else class="item-top-three">
APP更新
</view>
</unitv-item>
</unitv-zone>
<unitv-zone id="zone3" class="zone3" up="zone1" :values="item3" :column="item3Length">
<unitv-item v-for="(a,index) in item3" :item="index" :key="index" class="item" @hover="hoverItem('zone3', index)"
@click="clickItem('zone3', a)" style="background-color: #ffffff;">
<image :src="a.cover" :lazy-load="true" mode="scaleToFill" @error="imageError"></image>
<!-- <image :src="a.cover" :lazy-load="true" mode="scaleToFill"></image> -->
<view class="film-info">
<view class="film-movieFlag" style="background-color: green;" v-if="a.movieFlag == '1'"></view>
<view class="film-movieFlag" style="background-color: red;" v-else-if="a.movieFlag == '0'"></view>
<!-- <view class="film-title">{{a.title}}</view> -->
</view>
</unitv-item>
</unitv-zone>
</unitv-page>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<view style="height: 800px;line-height: 800px;text-align: center;font-size: 100px;color: brown;">不支持的平台</view>
<!-- #endif -->
</view>
</template>
<script>
import silenceUpdate from '@/uni_modules/rt-uni-update/js_sdk/silence-update.js' //引入静默更新
import {
mapMutations,
mapState
} from 'vuex';
export default {
data() {
return {
item1: [1, 2, 3],
item2: [],
item3: [],
item3Length: 0,
item4: [],
item5: [],
curIndex:7,
curSwiper:0,
nextZone:'szone_1',
searchFlag: false,
inputDisabled: true
}
},
onBackPress(options) {
this.$refs.unitvPage.evtBack();
return true;
},
computed: {
},
onShow() {
// if(this.$refs.unitvPage){
// this.$refs.unitvPage.showPage()
// }
},
onLoad() {
},
onReady() {
},
methods: {
...mapMutations(['showPage']),
pageBack(e){
console.log("按了返回");
uni.showModal({
title: '提示',
content: '是否退出',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
plus.runtime.quit();
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
return false;
},
hoverItem(zoneSource, index){
//console.log({"zoneSource":zoneSource, "index":index})
if(zoneSource == 'zone1' && index == 1){
this.inputDisabled = false;
} else {
this.inputDisabled = true;
}
if(zoneSource == 'zone1'){
if(index == 0){
//重新查询主页数据
this.queryAllMovieList()
this.searchFlag = false
}
}
},
imageError: function(e) {
console.error('image发生error事件携带值为' + e.detail.errMsg)
},
queryAllMovieList(){
this.$api.get('/platCupfox/list', null).then(res => {
this.item3Length = res.length > 6 ? 6 : res.length;
this.item3=res;
})
},
switchSwiper(e){
this.curSwiper=e;
this.nextZone='szone_'+(e+1);
},
clickItem(zoneSource, data){
console.log({"zoneSource":zoneSource, "data":data})
if(zoneSource == 'zone3'){
if(data.movieFlag == '1'){
uni.navigateTo({
url:"../player/player?id=" + data.id
})
} else {
uni.showToast({
title: '当前影视未解析到视频资源,无法播放',
icon:'none',
duration: 2000
});
}
} else if(zoneSource == 'zone1'){
if(data == 2){
uni.navigateTo({
url:"../search/search"
})
}else if(data == 3){
//TODO 版本升级
this.updateAppVersion()
}
} else {
uni.showToast({
title: '成功点击了',
icon:'none',
duration: 2000
});
}
// uni.navigateTo({
// url:"../player/player"
// })
//this.showPage('swiperPage')
},
loadMore(){
/* var arr=[];
for (var i=0;i<66;i++){
arr.push("more_"+i);
}
this.item5=this.item5.concat(arr);
uni.showToast({
title: '成功加载更多',
icon:'none',
duration: 2000
}); */
},
updateAppVersion(){
//#ifdef APP-PLUS
// 获取本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid, (inf) => {
//获取服务器的版本号
let paramData = {
application: 'filmTV',
appType: uni.getSystemInfoSync().platform
};
this.$api.post('/appUpgrade/new/version', paramData).then(data => {
//res.data.xxx根据后台返回的数据决定我这里后端返回的是data所以是res.data.data
//判断后台返回版本号是否大于当前应用版本号 && 是否发行 (上架应用市场时一定不能弹出更新提示)
let res = {
// 版本更新内容 支持<br>自动换行
describe: data.note,
edition_url: data.downloadUrl, //apk、wgt包下载地址或者应用市场地址 安卓应用市场 market://details?id=xxxx 苹果store itms-apps://itunes.apple.com/cn/app/xxxxxx
edition_force: 1, //是否强制更新 0代表否 1代表是
package_type: 0, //0是整包升级apk或者appstore或者安卓应用市场 1是wgt升级
edition_issue:1, //是否发行 0否 1是 为了控制上架应用市场审核时不能弹出热更新框
edition_number:data.version.replace(".","").replace(".",""), //版本号 最重要的manifest里的版本号 检查更新主要以服务器返回的edition_number版本号是否大于当前app的版本号来实现是否更新
edition_name:data.version,// 版本名称 manifest里的版本名称
edition_silence:0, // 是否静默更新 0代表否 1代表是
}
if (Number(res.edition_number) > Number(inf.versionCode) && res.edition_issue == 1) {
//如果是wgt升级并且是静默更新 (注意!!! 如果是手动检查新版本,就不用判断静默更新,请直接跳转更新页,不然点击检查新版本后会没反应)
if (res.package_type == 1 && res.edition_silence == 1) {
//调用静默更新方法 传入下载地址
silenceUpdate(res.edition_url)
} else {
//跳转更新页面 注意如果pages.json第一页的代码里有一打开就跳转其他页面的操作下面这行代码最好写在setTimeout里面设置延时3到5秒再执行
uni.navigateTo({
url: '/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=' +
JSON.stringify(res)
});
}
} else {
// 如果是手动检查新版本 需开启以下注释
uni.showToast({
title: '已经是最新版本,无需更新',
icon:'seccess',
duration: 2000
});
}
})
});
//#endif
}
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
//background-color: rgb(135,206,250);
background-image: linear-gradient(to bottom, #2E3092, #797979);
}
.zone3 {
height: 165rpx;
line-height: 165rpx;
width: 100%;
display: flex;
white-space: nowrap;
flex-wrap:wrap;
margin-top: 10rpx;
margin-left: 3rpx;
align-items: center;
/* border: 1px solid red; */
.item {
width: 15%;
/* border: 1px solid red; */
padding: 0px 0rpx;
margin: 5rpx 6rpx;
text-align: center;
display: inline-block;
height: 165rpx;
line-height: 165rpx;
border-radius: 5rpx;
background-color: #555555;
image{
position:relative;
z-index: 8000;
/* border: 1px solid green; */
width: 100%;
height: 100%;
border-radius: 5rpx;
}
}
.item-hover{
transform: scale(1.04);
box-shadow: 2px 4px 6px #555555;
animation: glow 1500ms ease-out infinite alternate;
-webkit-transform: scale(1.04);
-webkit-box-shadow: 2px 4px 6px #555555;
-webkit-animation: glow 1500ms ease-out infinite alternate;
zoom: 1.01;
border: 2px solid;
border-color: #FFA500;
}
.item-active{
zoom:0;
}
.film-info{
position:relative;
z-index: 9000;
text-align: center;
//border: 1px solid gold;
height: 165rpx;
border-radius: 5rpx;
line-height: 165rpx;
width: 100%;
left: 0px;
top: -245rpx;
.film-title{
position: absolute;
width: 100%;
transform: translate(0%, 385%); // 横轴-50%,竖轴-50%
background:#000;
height: 35rpx;
line-height: 35rpx;
border-bottom-right-radius: 5rpx;
border-bottom-left-radius: 5rpx;
z-index: 9999;
opacity:0.8;
}
.film-movieFlag{
margin-top: 5rpx;
margin-left: 5rpx;
border-radius: 50%;
width: 20rpx;
height: 20rpx;
z-index: 9999;
opacity:0.8;
background-color: #000000;
}
}
}
.zone1 {
height: 30rpx;
line-height: 30rpx;
width: 98%;
display: flex;
white-space: nowrap;
margin-top: 40rpx;
align-items: center;
.item {
margin: -20rpx 10rpx;
text-align: center;
display: inline-block;
height: 22rpx;
line-height: 22rpx;
border-radius: 5rpx;
}
.item-hover{
transform: scale(1.04);
box-shadow: 2px 4px 6px #555555;
animation: glow 1500ms ease-out infinite alternate;
-webkit-transform: scale(1.04);
-webkit-box-shadow: 2px 4px 6px #555555;
-webkit-animation: glow 1500ms ease-out infinite alternate;
zoom: 1.05;
background: #FFFFFF;
color: #000000;
}
.item-active{
transform: scale(1.04);
box-shadow: 2px 4px 6px #555555;
animation: glow 1500ms ease-out infinite alternate;
-webkit-transform: scale(1.04);
-webkit-box-shadow: 2px 4px 6px #555555;
-webkit-animation: glow 1500ms ease-out infinite alternate;
background: #FFFFFF;
zoom: 1;
color: #000000;
}
.item-top-one{
padding: 0px 5rpx;
border:1px solid #FFFFFF;
border-radius: 5rpx;
height: 20rpx;
line-height: 20rpx;
}
.item-top-two{
width: 300rpx;
height: 20rpx;
line-height: 20rpx;
border:1px solid #FFFFFF;
border-radius: 5rpx;
input {
width: 300rpx;
height: 20rpx;
line-height: 20rpx;
}
}
.item-top-three{
height: 20rpx;
padding: 0px 5rpx;
line-height: 20rpx;
border:1px solid #FFFFFF;
border-radius: 5rpx;
}
}
</style>