383 lines
11 KiB
Vue
383 lines
11 KiB
Vue
<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>
|