forked from ccsens_fe/tall-mui-3
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.2 KiB
111 lines
3.2 KiB
<!--
|
|
* @Author: aBin
|
|
* @email: binbin0314@126.com
|
|
* @Date: 2021-07-19 15:47:38
|
|
* @LastEditors: aBin
|
|
* @LastEditTime: 2021-07-19 19:39:36
|
|
-->
|
|
<template>
|
|
<view>
|
|
<view class="rounded-full h-7 w-7 flex items-center justify-center text-blue-400" v-if="status === 0">
|
|
<u-circle-progress :percent="100" active-color="#2979ff" borderWidth="4" class="u-progress-bg" width="66">
|
|
<view @tap="changeStatus(0)" class="u-progress-content">
|
|
<view class="u-progress-dot"></view>
|
|
<text class="u-progress-info">
|
|
<u-icon name="checkmark" size="30"></u-icon>
|
|
</text>
|
|
</view>
|
|
</u-circle-progress>
|
|
</view>
|
|
<view class="rounded-full h-7 w-7 flex items-center justify-center text-black" v-if="status === 1">
|
|
<u-circle-progress :percent="80" active-color="#2979ff" borderWidth="6" class="u-progress-bg" width="66">
|
|
<view @tap="changeStatus(1)" class="u-progress-content">
|
|
<view class="u-progress-dot"></view>
|
|
<view class="u-progress-info">{{ time }}</view>
|
|
</view>
|
|
</u-circle-progress>
|
|
</view>
|
|
<view class="rounded-full h-7 w-7 flex items-center justify-center text-gray-400" v-if="status === 2">
|
|
<u-circle-progress :percent="40" active-color="#2979ff" borderWidth="6" class="u-progress-bg" width="66">
|
|
<view @tap="changeStatus(2)" class="u-progress-content">
|
|
<view class="u-progress-dot"></view>
|
|
<text class="u-progress-info">
|
|
<u-icon name="play-right-fill" size="30"></u-icon>
|
|
</text>
|
|
</view>
|
|
</u-circle-progress>
|
|
</view>
|
|
<view class="rounded-full h-7 w-7 flex items-center justify-center text-red-800 font-black" v-if="status === 3">
|
|
<u-circle-progress :percent="80" active-color="#2979ff" borderWidth="6" class="u-progress-bg" width="66">
|
|
<view @tap="changeStatus(3)" class="u-progress-content">
|
|
<view class="u-progress-dot"></view>
|
|
<text class="u-progress-info">
|
|
<u-icon name="pause" size="30"></u-icon>
|
|
</text>
|
|
</view>
|
|
</u-circle-progress>
|
|
</view>
|
|
<u-action-sheet :list="chooseList()" v-model="show"></u-action-sheet>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'TimeStatus',
|
|
props: {
|
|
status: {
|
|
default: 0,
|
|
type: Number,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
time: 20,
|
|
start: [
|
|
{
|
|
text: '确认开始任务',
|
|
color: 'blue',
|
|
},
|
|
],
|
|
pause: [
|
|
{ text: '继续' },
|
|
{
|
|
text: '重新开始任务',
|
|
color: 'blue',
|
|
},
|
|
{ text: '结束' },
|
|
],
|
|
proceed: [
|
|
{ text: '暂停' },
|
|
{
|
|
text: '重新开始任务',
|
|
color: 'blue',
|
|
},
|
|
{ text: '结束' },
|
|
],
|
|
again: [
|
|
{
|
|
text: '重新开始任务',
|
|
color: 'blue',
|
|
},
|
|
],
|
|
change: 0,
|
|
show: false,
|
|
};
|
|
},
|
|
methods: {
|
|
chooseList() {
|
|
return this.start;
|
|
},
|
|
changeStatus(num) {
|
|
this.change === num;
|
|
this.show = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.u-progress-bg {
|
|
background: $uni-bg-color-transparent !important;
|
|
}
|
|
</style>
|
|
|