<template>
|
<view class="sideBar_task" :style="isShow?'display:block':'display:none'">
|
<view class="task_title">任务({{isFinish?'1':'0'}}/1)</view>
|
<view class="task_progress"><view class="task_progress_bar" :style="'width:'+(isFinish?'100':(totalTime?(1-duration/totalTime)*100:0))+'%'"></view></view>
|
<view class="task_status" v-if="isFinish">任务完成</view>
|
<view class="task_status" v-else>
|
<block v-if="type=='view'">{{'浏览'+totalTime+'秒'}}</block>
|
<block v-if="type=='share'">首次分享</block>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
finishTaskApi
|
} from '@/api/api.js';
|
export default {
|
name:"task",
|
data() {
|
return {
|
isFinish:false,
|
type:'view',
|
timer:null,
|
isShow:false,
|
totalTime:0,
|
duration:0,
|
taskInfo:{}
|
};
|
},
|
methods:{
|
show(taskInfo){
|
clearInterval(this.timer);
|
this.taskInfo=taskInfo;
|
this.isFinish=false;
|
this.type=taskInfo.type.toLowerCase();
|
this.isShow=true;
|
if(this.type=='view'){
|
if(taskInfo.duration){
|
this.duration=Math.ceil(taskInfo.duration);
|
this.totalTime=Math.ceil(taskInfo.duration);
|
}else{
|
this.duration=10;
|
}
|
}else{
|
this.duration=0;
|
}
|
|
if(this.type=='view'&&this.duration){
|
this.timer=setInterval(()=>{
|
this.duration-=1;
|
console.log('--------','show task',this.duration)
|
if(this.duration<=0){
|
this.finishTask();
|
}
|
},1000)
|
}
|
},
|
finishTask(){
|
clearInterval(this.timer);
|
this.isFinish=true;
|
finishTaskApi({
|
taskCode:this.taskInfo.code,
|
uid:this.taskInfo.uid
|
}).then((res)=>{
|
console.log('task callback',res)
|
}).catch((e)=>{
|
console.log('task callback',e)
|
})
|
},
|
hide(){
|
clearInterval(this.timer);
|
this.isShow=false;
|
}
|
},
|
}
|
</script>
|
|
<style>
|
.sideBar_task{
|
position: fixed;
|
right: 10rpx;
|
top: 50%;
|
width: 132rpx;
|
height: 157rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/task_sideIcon.png") center top/contain no-repeat;
|
pointer-events: none;
|
}
|
.task_title{
|
font-size: 16rpx;
|
line-height: 1.25em;
|
color: #000000;
|
font-weight: bold;
|
position: absolute;
|
left: 0;
|
width: 100%;
|
top: 72rpx;
|
text-align: center;
|
}
|
.task_progress{
|
width: 100rpx;
|
height: 14rpx;
|
border-radius: 7rpx;
|
position: absolute;
|
left: 16rpx;
|
top: 104rpx;
|
background-color: #ffffff;
|
box-shadow: 0 3rpx 0 0 #f5c702;
|
}
|
.task_progress_bar{
|
border-radius: 7rpx;
|
height: 100%;
|
background-color: #00c864;
|
overflow: hidden;
|
}
|
.task_status{
|
font-size: 16rpx;
|
line-height: 1.25em;
|
color: #000000;
|
position: absolute;
|
left: 0;
|
width: 100%;
|
top: 128rpx;
|
text-align: center;
|
font-weight: bold;
|
}
|
</style>
|
