|
|
@@ -0,0 +1,344 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="bg">
|
|
|
+ <image src="/static/icon/ad/bg.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="contents">
|
|
|
+ <image class="contents-text" src="/static/icon/ad/wcrw.png" mode="widthFix"></image>
|
|
|
+ <view class="daynum">
|
|
|
+ <image class="contents-bg" src="/static/icon/ad/cjcs.png" mode="widthFix"></image>
|
|
|
+ <view style="flex: 1;"></view>
|
|
|
+ <text class="daynumtitle">今日奖励</text>
|
|
|
+ <text class="daydraw">抽奖次数1次</text>
|
|
|
+ <text class="todraw todraw1" v-if="taskStatus" @click="toChoujiang">去抽奖</text>
|
|
|
+ <text class="todraw" v-else>去抽奖</text>
|
|
|
+ </view>
|
|
|
+ <view class="daytask">
|
|
|
+ <view class="daytask-title">今日任务</view>
|
|
|
+ <view class="daytask-line">
|
|
|
+ <image src="/static/icon/ad/ad-video.png" mode="widthFix"></image>
|
|
|
+ <view class="line-title">
|
|
|
+ <view class="title1">观看视屏任务</view>
|
|
|
+ <view class="title2">已观看{{ taskObj.watchCount }}/{{ taskObj.total }}</view>
|
|
|
+ </view>
|
|
|
+ <view style="flex: 1;"></view>
|
|
|
+ <ad-rewarded-video v-if="taskStatus == false" :adpid="adpid" :loadnext="true"
|
|
|
+ v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror"
|
|
|
+ :url-callback="callbackData">
|
|
|
+ <!-- <view v-if="error">{{error}}</view> -->
|
|
|
+ <!-- <u-button type="primary" style="width:100px;" size="mini" :disabled="loading" :loading="loading">去完成</u-button> -->
|
|
|
+ <button :disabled="loading" :loading="loading" class="video-button">去完成</button>
|
|
|
+ </ad-rewarded-video>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view
|
|
|
+ style="height:200px;background: #14a1ff;padding:10px;border-radius: 5px;display: flex; flex-direction: column;box-shadow: rgb(204, 204, 204) 0 0 7px 5px;">
|
|
|
+ <view style="color:#fff;font-size:14px;flex:2;">今日奖励</view>
|
|
|
+ <view style="color:#fff;flex:2;text-align: center;font-size: 20px;">抽奖次数1次</view>
|
|
|
+ <view style="flex:1;">
|
|
|
+ <view style="display: flex;justify-content: normal; justify-content: space-around;color:#fff;">
|
|
|
+ <block v-if="taskStatus == false">
|
|
|
+ <view>今日任务次数:{{taskObj.total}}</view>
|
|
|
+ <view>当前已完成任务次数:{{taskObj.watchCount}}</view>
|
|
|
+ </block>
|
|
|
+ <block v-if="taskStatus">
|
|
|
+ <u-button style="width:200px;" @click="toChoujiang">跳转抽奖</u-button>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ <u-line-progress active-color="#2979ff" :percent="progress"></u-line-progress>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view style="font-size:20px;padding-top:20px;">
|
|
|
+ <view style="display: flex;justify-content: space-between;align-items: center;">
|
|
|
+ <view style="display: flex; align-items: center;">
|
|
|
+ <u-image style="width:25px;" src="@/static/icon/ad.png" mode="widthFix"></u-image>
|
|
|
+ <view style="margin-left:5px;">视频广告</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="taskStatus">
|
|
|
+ <u-button type="default">已完成</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from "vuex"
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ adpid: '1372912966',
|
|
|
+ appid: '',
|
|
|
+ activityId: '1824703218157920256',
|
|
|
+ taskObj: {},
|
|
|
+ progress: 0,
|
|
|
+ callbackData: {
|
|
|
+ userId: "",
|
|
|
+ extra: {}
|
|
|
+ },
|
|
|
+ error: "",
|
|
|
+ taskStatus: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo', 'userCheckInfo']),
|
|
|
+ },
|
|
|
+ async onLoad() {
|
|
|
+ this.refreshData();
|
|
|
+ this.callbackData.userId = this.userInfo.sysUser.id
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onadload(e) {},
|
|
|
+ onCreateAd() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onadclose(e) {
|
|
|
+ const detail = e.detail
|
|
|
+ // 用户点击了【关闭广告】按钮
|
|
|
+ if (detail && detail.isEnded) {
|
|
|
+ //重新拉取数据
|
|
|
+ setTimeout(this.refreshData(), 3000);
|
|
|
+ } else {
|
|
|
+ // 播放中途退出
|
|
|
+ console.log("onadclose " + detail.isEnded);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onaderror(e) {
|
|
|
+
|
|
|
+ // 广告加载失败
|
|
|
+ // this.$refs.uToast.show({
|
|
|
+ // title: '广告加载失败',
|
|
|
+ // type: 'default',
|
|
|
+ // })
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: e.detail.errMsg
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log("onaderror: ", e.detail);
|
|
|
+ },
|
|
|
+ refreshData() {
|
|
|
+ console.log(this.userInfo)
|
|
|
+ this.$http.post('https://marketing.baoxianzhanggui.com/api/advertising/getUserWatchCount', {
|
|
|
+ userId: this.userInfo.sysUser.id
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.taskObj = res.data;
|
|
|
+ this.progress = this.taskObj.watchCount / this.taskObj.total * 100
|
|
|
+ this.taskStatus = res.data.total <= res.data.watchCount
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getErrorInfo() {
|
|
|
+ console.log(this.error)
|
|
|
+ },
|
|
|
+ toChoujiang() {
|
|
|
+ console.log('抽奖')
|
|
|
+
|
|
|
+ plus.share.getServices(res => {
|
|
|
+
|
|
|
+ let sweixin = null;
|
|
|
+
|
|
|
+ sweixin = res.find(i => i.id === 'weixin')
|
|
|
+
|
|
|
+ if (sweixin) {
|
|
|
+
|
|
|
+ // 分享跳转到微信小程序
|
|
|
+
|
|
|
+ sweixin.launchMiniProgram({
|
|
|
+
|
|
|
+ id: "gh_71ff3b2409d8", //微信小程序原生id
|
|
|
+
|
|
|
+ path: "pages/index/bigWheel/bigWheel?userId=" + this.userInfo.sysUser.id +
|
|
|
+ "&activityId=" + this.activityId, // 打开小程序的页面路径,不传默认跳转首页
|
|
|
+
|
|
|
+ type: 2 // 微信小程序版本类型,可取值: 0-正式版; 1-测试版; 2-体验版。 默认值为0。
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请安装微信',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }, err => {
|
|
|
+ console.log("分享失败"); // 获取分享服务列表失败
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ uni.navigateToMiniProgram({
|
|
|
+ appId: 'wx4014825e79c10552',
|
|
|
+ path: 'pages/index/index?userId=' + this.userInfo.sysUser.id,
|
|
|
+ extraData: {
|
|
|
+
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ // 打开成功
|
|
|
+ console.log(res)
|
|
|
+ },
|
|
|
+ error(error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ background: #ffe9c6;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .page {
|
|
|
+ // background-color: #fff;
|
|
|
+ margin: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .video-button {
|
|
|
+ // border: 1rpx solid var(--primary);
|
|
|
+ // font-size: 30rpx;
|
|
|
+ // line-height: 40rpx;
|
|
|
+ // padding: 10rpx 14rpx;
|
|
|
+ // color: var(--primary)
|
|
|
+ // }
|
|
|
+
|
|
|
+ .bg {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contents {
|
|
|
+ position: relative;
|
|
|
+ padding: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .contents-text {
|
|
|
+ width: 394rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 60rpx;
|
|
|
+ left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daynum {
|
|
|
+ position: relative;
|
|
|
+ height: 808rpx;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: end;
|
|
|
+
|
|
|
+ text {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contents-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daynumtitle {
|
|
|
+ margin-bottom: 28rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daydraw {
|
|
|
+ width: 398rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: linear-gradient(266deg, rgba(255, 255, 255, 0) 0%, rgba(255, 94, 39, 0.1) 100%);
|
|
|
+ border-radius: 38rpx;
|
|
|
+ border: 1rpx solid #FFC5B0;
|
|
|
+ margin-bottom: 150rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ color: #8F3A21;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+
|
|
|
+ .todraw {
|
|
|
+ width: 334rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ background: #CCCCCC;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ border: 5rpx solid #EFEFEF;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-bottom: 54rpx;
|
|
|
+ }
|
|
|
+ .todraw1 {
|
|
|
+ background: linear-gradient(180deg, #fffbf4 0%, #ffe1a1 100%);
|
|
|
+ color: #8F3A21;
|
|
|
+ border: 5rpx solid #ffe8ad;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .daytask {
|
|
|
+ padding: 30rpx;
|
|
|
+ background: #FFF;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ border-radius: 22rpx;
|
|
|
+
|
|
|
+ .daytask-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: 333;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daytask-line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .line-title {
|
|
|
+ margin-left: 30rpx;
|
|
|
+
|
|
|
+ .title1 {
|
|
|
+ color: #333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title2 {
|
|
|
+ color: #969696;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-button {
|
|
|
+ background: linear-gradient(359deg, #FF4A13 0%, #FF8851 100%), #D8D8D8;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|