jiuyiUniapp/jiuyi2/components/index/task.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>