280 lines
6.4 KiB
Vue
280 lines
6.4 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="top-img"><image v-if="info" :src="'https://xyb.wlkjwl.cn/'+info.image" mode="aspectFill"></image></view>
|
||
<view class="top-title">{{info.title}}</view>
|
||
<view class="top-btn">
|
||
<view @tap="goAdd">完成看视频任务</view>
|
||
</view>
|
||
<view class="top-process">
|
||
<view class="bg-blue" :style="[{ width:true?percent:''}]">{{percent}}</view>
|
||
</view>
|
||
<view class="top-go" @tap="goBack">
|
||
前往榜单，为偶像投票赢取冠军
|
||
</view>
|
||
<view class="top-guan">
|
||
<image src="../../static/guan.png" mode="aspectFit"></image>
|
||
<view>发起人：{{info.manager}}</view>
|
||
</view>
|
||
<view class="top-text">资源介绍</view>
|
||
<view class="top-content">
|
||
<view>【解锁要求】参与人数达到目标人数，并且每人一个月内至少签到{{info.targetDay}}次，即可解锁大屏资源</view>
|
||
<view>【展示时长】该资源投放时间=1天</view>
|
||
<view>【活动时间】即日起{{info.endTime}}结束</view>
|
||
<view>【参与条件】由于资源珍贵，为了长期能够供应更多更好的资源，目前很遗憾，普通用户只能参与一个资源解锁，VIP用户可以参与所有资源解锁</view>
|
||
</view>
|
||
<view class="top-text">参与成员</view>
|
||
<view class="top-list">
|
||
<view class="top-list-item" v-for="(item,index) in dataList" :key="index">
|
||
<view>{{item.rankingNum}}</view>
|
||
<image :src="item.head" mode="aspectFill"></image>
|
||
<view class="right">
|
||
<view>{{item.nick}}</view>
|
||
<view>已完成{{item.much}}次</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let rewardedVideoAd = null;
|
||
export default {
|
||
data() {
|
||
return {
|
||
percent:'0%',
|
||
id:'',
|
||
starId:'',
|
||
info:'',
|
||
dataList:""
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
console.log(option)
|
||
this.id = option.id;
|
||
this.starId = option.starId;
|
||
this.getActiveInfo(option.id,option.starId)
|
||
this.getTenLength(option.id,option.starId)
|
||
this.loadgoAdd();
|
||
// this.joinActive()
|
||
},
|
||
methods:{
|
||
getActiveInfo(id,starId){
|
||
this.request({
|
||
url:this.path+'/api/xyb/star/activeInfo',
|
||
data:{
|
||
id:id,
|
||
starId:starId
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
if(d.code == 0){
|
||
if(d.data.completeCount>d.data.targetDay-1){
|
||
this.percent = '100%'
|
||
}else{
|
||
this.percent = Math.floor(d.data.completeCount/d.data.targetDay*100)+'%';
|
||
}
|
||
this.info = d.data;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
goBack(){
|
||
uni.navigateBack();
|
||
},
|
||
getTenLength(id,starId){
|
||
this.request({
|
||
url:this.path+'api/xyb/star/activeParticipateList',
|
||
data:{
|
||
id:id,
|
||
starId:starId,
|
||
pageNum:1,
|
||
pageSize:10
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
this.dataList = d.rows;
|
||
console.log(d)
|
||
}
|
||
})
|
||
},
|
||
joinActive(){
|
||
this.request({
|
||
url:this.path+'/api/xyb/star/participateActive',
|
||
data:{
|
||
activeId:this.id,
|
||
starId:this.starId,
|
||
},
|
||
success:(res)=>{
|
||
let d = res.data;
|
||
console.log(d)
|
||
}
|
||
})
|
||
},
|
||
//展示激励视频
|
||
goAdd(){
|
||
let that = this;
|
||
rewardedVideoAd.show()
|
||
.then(() => console.log('激励视频 广告显示'))
|
||
},
|
||
loadgoAdd(){
|
||
let that = this;
|
||
if (uni.createRewardedVideoAd) {
|
||
rewardedVideoAd = uni.createRewardedVideoAd({ adUnitId: 'adunit-b391eb6b37e844fe' });
|
||
rewardedVideoAd.onLoad(() => {
|
||
console.log('激励视频 广告加载成功')
|
||
})
|
||
rewardedVideoAd.onError(err => {
|
||
console.log(err)
|
||
})
|
||
rewardedVideoAd.onClose(res => {
|
||
// 用户点击了【关闭广告】按钮
|
||
// 小于 2.1.0 的基础库版本，res 是一个 undefined
|
||
rewardedVideoAd.offClose()
|
||
console.log(res)
|
||
if (res && res.isEnded || res === undefined) {
|
||
// 正常播放结束，可以下发游戏奖励
|
||
that.joinActive();
|
||
that.getActiveInfo(that.id,that.starId)
|
||
that.getTenLength(that.id,that.starId)
|
||
}
|
||
else {
|
||
// 播放中途退出，不下发游戏奖励
|
||
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background-color: #5680E6;
|
||
// background-image: linear-gradient(#5680E6, #FEE08C);
|
||
}
|
||
.top-list{
|
||
padding: 30rpx;
|
||
.top-list-item{
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
.right{
|
||
padding-left: 20rpx;
|
||
view:nth-child(2){
|
||
font-size: 24rpx;
|
||
color: grey;
|
||
}
|
||
}
|
||
view{
|
||
margin-right: 30rpx;
|
||
}
|
||
image{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
.top-content{
|
||
line-height: 1.5;
|
||
font-size: 26rpx;
|
||
view{
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
.top-text{
|
||
color: #10AEFF;
|
||
font-size: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.bg-blue{
|
||
background-color: #10AEFF;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.content{
|
||
padding: 20rpx;
|
||
margin: 30rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #FFFFFF;
|
||
.top-guan{
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
margin: 20rpx 0;
|
||
view{
|
||
background-color: #F2F2F2;
|
||
display: flex;
|
||
justify-content: left;
|
||
align-items: center;
|
||
padding: 10rpx;
|
||
width: 300rpx;
|
||
border-radius: 30rpx;
|
||
padding-left: 10px;
|
||
font-size: 24rpx;
|
||
color: grey;
|
||
}
|
||
image{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.top-go{
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
background-color: #4A67D6;
|
||
color: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
}
|
||
.top-process{
|
||
.percent{
|
||
|
||
}
|
||
margin-bottom: 20rpx;
|
||
background-color: #F2F2F2;
|
||
color: #FFFFFF;
|
||
}
|
||
.top-title{
|
||
border-bottom: 1px solid #F2F2F2;
|
||
padding: 10rpx 0;
|
||
}
|
||
.top-img{
|
||
width: 100%;
|
||
height: 400rpx;
|
||
image{
|
||
width: 100%;
|
||
height: 400rpx;
|
||
}
|
||
}
|
||
.top-btn{
|
||
padding: 10rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 20rpx 0;
|
||
view{
|
||
background-color: #4A67D6;
|
||
width: 300rpx;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|