89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
<script setup>
|
|
/**
|
|
* 优先任务 和 有效读秒
|
|
*/
|
|
import {
|
|
ref,
|
|
computed,
|
|
onMounted,
|
|
} from 'vue'
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
import {
|
|
useStore,
|
|
} from 'vuex'
|
|
import intergralApi from '@/api/intergral.js';
|
|
// vuex
|
|
const store = useStore()
|
|
//读秒记录
|
|
const viewData = ref({
|
|
// 有效读秒任务
|
|
seconds: 0,
|
|
// 卷轴任务
|
|
scrollFlag: false,
|
|
// 榴莲果树任务
|
|
treeFlag: false,
|
|
})
|
|
// 类型
|
|
const type = computed(() => {
|
|
let result = viewData.value.scrollFlag || viewData.value.treeFlag
|
|
if (result && Number(viewData.value.seconds) > 300) result = false
|
|
return result
|
|
})
|
|
// 进度条
|
|
const progress = computed(() => {
|
|
let result = viewData.value.seconds
|
|
result = (Number(result) % 300) / 300 * 100
|
|
return result
|
|
})
|
|
|
|
onMounted(() => {
|
|
util.isLogin(() => {
|
|
getTasks()
|
|
})
|
|
})
|
|
|
|
// 今日任务读秒记录
|
|
function getTasks() {
|
|
intergralApi.viewingTasks({}).then(rs => {
|
|
if (rs.code == 200 && rs.data) {
|
|
viewData.value = rs.data
|
|
return
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="task pr mtb30 ptb20 plr40 f28 bFFFBF3 br20">
|
|
<view class="title c333 f36" v-if="type">任务读秒</view>
|
|
<view class="title c333 f36" v-else>有效读秒</view>
|
|
|
|
<view class="progressBox oh bar mt60">
|
|
<view class="progress bar" :style="{width: progress + '%'}"></view>
|
|
</view>
|
|
|
|
<view class="label pa t0 r0 ptb5 plr20 cfff" v-if="type">优先</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 任务读秒
|
|
.task {
|
|
.label {
|
|
background-image: linear-gradient(116deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
|
|
border-radius: 0 24rpx 0 24rpx;
|
|
}
|
|
|
|
// 进度条
|
|
.progressBox {
|
|
// background-color: #D6D6D6;
|
|
background-image: linear-gradient(97deg, #27EFE244 0%, #A45EFF44 43%, #FF004F44 100%);
|
|
|
|
.progress {
|
|
height: 30rpx;
|
|
background-image: linear-gradient(97deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
|
|
}
|
|
}
|
|
}
|
|
</style> |