8 changed files with 521 additions and 33 deletions
@ -0,0 +1,297 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<view class="list-menu"> |
|||
<view class="list-menu-item" @click="$noMultipleClicks(signGetGold)"> |
|||
<uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="clearIcon" size="20" :color="primaryColor"></uni-icons> |
|||
<view class="text">签到</view> |
|||
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> |
|||
</view> |
|||
<view class="list-menu-item" @click="clickWatchAd"> |
|||
<uni-icons class="list-menu-icon" custom-prefix="iconfont" :type="logOutIcon" size="20" :color="primaryColor"></uni-icons> |
|||
<view class="text">观看广告</view> |
|||
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
var videoAd = null; |
|||
import { signGetGold,watchAdGetGold,checkUserCanGetGold} from "@/api/paint.js"; |
|||
import {getRestRewardNum} from "@/api/userInfo.js"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
userInfo: {}, |
|||
noClick:true, //防止重复提交 |
|||
isplayOver: false, |
|||
isWatch: false, |
|||
canWatch: false, //false为可观看 |
|||
canRewardNum: 0, |
|||
adList:['0qfnoa4053uwkefbas','2v63zq5hvfclpxmurl','d4ltbnxa23zp2hhqwe'] //激励视频广告列表 |
|||
}; |
|||
}, |
|||
onShow() { |
|||
this.userInfo = uni.getStorageSync('userInfo') |
|||
this.getRestRewardNum(); |
|||
}, |
|||
onHide() { |
|||
console.log('进入onHide') |
|||
//切出小程序时，广告状态还原 |
|||
this.isplayOver = false; |
|||
}, |
|||
onLoad() { |
|||
this.isplayOver = false; |
|||
//随机选择一个激励视频广告初始化 |
|||
let num = Math.floor(Math.random() * this.adList.length + 1)-1; |
|||
console.log('随机激励视频id为：',this.adList[num]) |
|||
this.loadAdvertise(this.adList[num]); |
|||
}, |
|||
methods: { |
|||
|
|||
//检查某平台用户当日观看广告次数是否超标 |
|||
async checkUserCanGetGold() { |
|||
const params = { |
|||
userId: this.userInfo.id, |
|||
appType: '0', |
|||
platform: '1' ,//此处1代表抖音 |
|||
} |
|||
const res = await checkUserCanGetGold(params); |
|||
if (res.data.code === 200) { |
|||
console.log("当日非会员用户是否可获取奖励结果为", res.data.data) |
|||
this.canWatch = res.data.data; |
|||
} else { |
|||
uni.showToast({ |
|||
title: '检查获取状态失败!', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
async clickWatchAd() { |
|||
//检查非会员用户是否达到可下载次数上限， 传1代表是观看广告检查 |
|||
await this.checkUserCanGetGold(); |
|||
this.watchAd(); |
|||
}, |
|||
|
|||
//点击弹窗观看广告 |
|||
watchAd() { |
|||
let that = this; |
|||
//满足可观看条件 为false |
|||
if (that.canWatch !== true) { |
|||
uni.showModal({ |
|||
title: '观看一段广告获取画意值', |
|||
content: '今日还可观看'+ that.canRewardNum + '次', |
|||
success(res) { |
|||
if (res.confirm) { |
|||
uni.showLoading({ |
|||
title: '加载中', |
|||
success() { |
|||
//修改当前观看状态 |
|||
that.isWatch = true |
|||
//console.log('res123',123) |
|||
//展示激励视频广告 |
|||
that.showAdvertise(); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} else { |
|||
uni.showModal({ |
|||
content: '今日观看任务已完成,请明日再来!', |
|||
showCancel: false |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
//加载激励视频广告 |
|||
loadAdvertise(adId){ |
|||
// 在页面中定义激励视频广告 |
|||
var that = this |
|||
// 在页面onLoad回调事件中创建激励视频广告实例 |
|||
if (tt.createRewardedVideoAd) { |
|||
videoAd = tt.createRewardedVideoAd({ |
|||
adUnitId: adId |
|||
}); |
|||
//解决重复发放奖励BUG |
|||
try{ |
|||
if (videoAd.closeHandler) { |
|||
videoAd.offClose(videoAd.closeHandler); |
|||
console.log("videoAd.offClose卸载成功"); |
|||
} |
|||
}catch(e){ |
|||
console.log("videoAd.offClose 卸载失败"); |
|||
console.error(e); |
|||
} |
|||
videoAd.onLoad(() => { |
|||
console.log('激励视频广告'+adId+'加载成功') |
|||
}) |
|||
videoAd.onError((err) => { |
|||
that.err() |
|||
}) |
|||
videoAd.closeHandler = (res) =>{ |
|||
if (res && res.isEnded || res === undefined) { |
|||
// 正常播放结束，可以下发游戏奖励 |
|||
that.isplayOver = true; |
|||
//console.log('激励视频广告观看完毕',that.isplayOver) |
|||
that.watchAdGetGold(); |
|||
}else{ |
|||
that.isplayOver = false; |
|||
uni.showToast({ |
|||
title: '您还没有看完视频，无法下载图片', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
videoAd.onClose(videoAd.closeHandler); |
|||
} |
|||
}, |
|||
|
|||
//展示激励视频广告 |
|||
showAdvertise(url){ |
|||
uni.hideLoading(); |
|||
//let videoAd = this.videoAd |
|||
this.downloadUrl = url; |
|||
//console.log('看广告时传入进来的url',url); |
|||
//console.log('this.downloadUrl看广告时',this.downloadUrl); |
|||
videoAd.show().catch(() => { |
|||
// 失败重试 |
|||
videoAd.load() |
|||
.then(() => videoAd.show()) |
|||
.catch(err => { |
|||
uni.showModal({ |
|||
title: '画意值领取失败', |
|||
content: '请稍后重试', |
|||
showCancel: false, |
|||
complete: function() { |
|||
this.isplayOver = false; |
|||
} |
|||
}) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
//签到 |
|||
async signGetGold() { |
|||
let that = this; |
|||
const data = { |
|||
userId: that.userInfo.id, |
|||
source: 1, //1代表抖音 |
|||
appType: 0 |
|||
} |
|||
const res = await signGetGold(data); |
|||
console.log('签到结果===', res); |
|||
if (res.data.code === 200) { |
|||
return uni.showToast({ |
|||
title: "签到成功！", |
|||
icon: 'none' |
|||
}); |
|||
}else { |
|||
uni.showModal({ |
|||
content: res.data.msg, |
|||
showCancel: false |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
//观看广告 |
|||
async watchAdGetGold() { |
|||
let that = this; |
|||
const data = { |
|||
userId: that.userInfo.id, |
|||
source: 1, //1代表抖音 |
|||
appType: 0 |
|||
} |
|||
const res = await watchAdGetGold(data); |
|||
console.log('观看广告结果===', res); |
|||
if (res.data.code === 200) { |
|||
return uni.showToast({ |
|||
title: "画意值领取成功！", |
|||
icon: 'none' |
|||
}); |
|||
}else { |
|||
uni.showModal({ |
|||
content: res.data.msg, |
|||
showCancel: false |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
//获取某平台用户当日绘画奖励剩余次数 |
|||
async getRestRewardNum() { |
|||
const params = { |
|||
userId: this.userInfo.id, |
|||
appType: '0', |
|||
platform: '1' ,//此处1代表抖音 |
|||
} |
|||
const res = await getRestRewardNum(params); |
|||
if (res.data.code === 200) { |
|||
console.log("当日非会员用户可获得奖励结果为", res.data.data) |
|||
//获取奖励 |
|||
this.canRewardNum = res.data.data |
|||
console.log('this.canRewardNum',this.canRewardNum) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '获取奖励剩余次数失败!', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
height: 100vh; |
|||
background-color: $uni-bg-color; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.container { |
|||
padding: 20rpx; |
|||
|
|||
.list-menu { |
|||
margin-top: 20rpx; |
|||
padding: 0 20rpx; |
|||
background-color: $uni-white; |
|||
border-radius: 10rpx; |
|||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|||
|
|||
|
|||
} |
|||
|
|||
.list-menu-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
border-bottom: 2rpx solid $uni-border-2; |
|||
|
|||
.list-menu-icon{ |
|||
color: $uni-primary; |
|||
} |
|||
|
|||
.text { |
|||
font-size: 26rpx; |
|||
line-height: 80rpx; |
|||
width: calc(100% - 100rpx); |
|||
} |
|||
|
|||
.list-menu-genduo{ |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.list-menu-item:first-child { |
|||
} |
|||
|
|||
.list-menu-item:last-child { |
|||
border-bottom: 0 !important; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,142 @@ |
|||
<template> |
|||
<view> |
|||
<view class="content"> |
|||
<view> |
|||
<uni-list border-full v-for="(item, index) in goldNumLog" :key="index"> |
|||
<uni-list-item :title="item.reason" :note="item.createTime" :rightText="item.goldNum"> |
|||
</uni-list-item> |
|||
</uni-list> |
|||
<!-- 显示加载中或者全部加载完成 --> |
|||
<view> |
|||
<uni-load-more :status="loadStatus"></uni-load-more> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { queryGoldLogPage } from "@/api/paint.js"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
goldNumLog: [], |
|||
userInfo: {}, |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
loadStatus:'noMore', //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式 |
|||
isLoadMore:false, //是否加载中 |
|||
}; |
|||
}, |
|||
created() { |
|||
if (!this.userInfo) { |
|||
uni.navigateBack() |
|||
uni.showToast({ |
|||
title: '请先登录', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
this.userInfo = uni.getStorageSync('userInfo') |
|||
this.queryGoldLogPage(); |
|||
}, |
|||
// 下拉刷新 |
|||
// onPullDownRefresh() { |
|||
// this.pageNum = 1; |
|||
// this.goldNumLog = []; |
|||
// this.queryGoldLogPage(); |
|||
// uni.stopPullDownRefresh(); |
|||
// }, |
|||
// 上划加载更多 |
|||
onReachBottom() {//上拉触底函数 |
|||
if(!this.isLoadMore) { //此处判断，上锁，防止重复请求 |
|||
this.isLoadMore=true |
|||
if (this.loadStatus === "more") { |
|||
this.pageNum += 1 //每次上拉请求新的一页 |
|||
this.queryGoldLogPage(); |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
//获取画意值记录分页 |
|||
async queryGoldLogPage() { |
|||
let that = this; |
|||
const data = { |
|||
userId: that.userInfo.id, |
|||
source: 1, //1代表抖音 |
|||
pageNum: that.pageNum, |
|||
pageSize: that.pageSize |
|||
} |
|||
const res = await queryGoldLogPage(data); |
|||
console.log('画意值记录===', res); |
|||
if (res.data.code === 200) { |
|||
that.goldNumLog.push(...res.data.rows) |
|||
if(res.data.rows.length < that.pageSize){ //判断接口返回数据量小于请求数据量，则表示此为最后一页 |
|||
that.isLoadMore = true |
|||
that.loadStatus = 'noMore' |
|||
}else{ |
|||
this.loadStatus = 'more'; |
|||
that.isLoadMore = false |
|||
} |
|||
}else { |
|||
uni.showModal({ |
|||
content: '网络错误，请稍后再试~', |
|||
showCancel: false |
|||
}); |
|||
that.isLoadMore = false |
|||
if(that.page > 1){ |
|||
that.page -= 1 |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
height: 100vh; |
|||
background-color: $uni-bg-color; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.content { |
|||
padding-top: 88rpx; |
|||
width: 670rpx; |
|||
margin: 0 auto; |
|||
|
|||
::v-deep .uni-list { |
|||
background: $uni-primary !important; |
|||
margin-bottom: 20rpx; |
|||
border-radius: 24rpx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
::v-deep .uni-list-item { |
|||
background: $uni-primary !important; |
|||
} |
|||
|
|||
::v-deep .uni-list--border-top { |
|||
display: none !important; |
|||
} |
|||
::v-deep .uni-list--border-bottom { |
|||
display: none !important; |
|||
} |
|||
|
|||
::v-deep .uni-list-item__container { |
|||
padding: 20rpx !important; |
|||
} |
|||
|
|||
::v-deep .uni-list-item__content-title { |
|||
color: $uni-white !important; |
|||
} |
|||
|
|||
::v-deep .uni-list-item__content-note { |
|||
color: $uni-white !important; |
|||
} |
|||
|
|||
::v-deep .uni-list-item__extra-text { |
|||
color: $uni-white !important; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue