79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<script setup>
|
|
/**
|
|
* 优先任务 和 有效读秒
|
|
*/
|
|
import {
|
|
ref,
|
|
computed,
|
|
onMounted,
|
|
} from 'vue'
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
import {
|
|
useStore,
|
|
} from 'vuex'
|
|
//
|
|
import api from '@/api/index.js'
|
|
const store = useStore()
|
|
// 当前任务
|
|
const task = computed(() => {
|
|
return store.state.task
|
|
})
|
|
// 系统配置
|
|
const config = computed(() => {
|
|
return store.state.config
|
|
})
|
|
// 进度条
|
|
const progress = computed(() => {
|
|
let result = task.value.viewingDuration
|
|
// 选项
|
|
const option = {
|
|
// 优先任务转换
|
|
0: config.value.TASK_READING_SECOND,
|
|
// 有效读秒转换
|
|
1: config.value.EFFECTIVE_SECONDS,
|
|
}
|
|
result = (Number(result) % Number(option[task.value.taskType])) / 3
|
|
return result
|
|
})
|
|
|
|
onMounted(() => {
|
|
// 获取我的任务
|
|
util.getMyTask()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="task pr mtb30 ptb20 plr40 f28 bFFFBF3 br20">
|
|
<view class="title c333 f36" v-if="task.taskType === 0">任务读秒</view>
|
|
<view class="title c333 f36" v-else>有效读秒</view>
|
|
<!-- <view>{{task.viewingDuration}}</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="task.taskType === 0">优先</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> |