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.
130 lines
3.7 KiB
130 lines
3.7 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" @tap="changeStatus($event, 0)">
|
|
<u-circle-progress :percent="100" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="4" width="66">
|
|
<view 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" @tap="changeStatus($event, 1)">
|
|
<u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
|
|
<view 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" @tap="changeStatus($event, 2)">
|
|
<u-circle-progress :percent="40" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
|
|
<view 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"
|
|
@tap="changeStatus($event, 3)"
|
|
>
|
|
<u-circle-progress :percent="80" active-color="#2979ff" bgColor="rgba(255,255,255,0)" borderWidth="6" width="66">
|
|
<view 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>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { mapMutations } from 'vuex';
|
|
export default {
|
|
name: 'TimeStatus',
|
|
props: {
|
|
status: {
|
|
default: 0,
|
|
type: Number,
|
|
},
|
|
content: {
|
|
default: '',
|
|
type: String,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
time: 20,
|
|
start: [
|
|
{
|
|
text: '确认开始任务',
|
|
color: 'blue',
|
|
},
|
|
],
|
|
pause: [
|
|
{ text: '继续' },
|
|
{
|
|
text: '重新开始任务',
|
|
color: 'blue',
|
|
},
|
|
{ text: '结束' },
|
|
],
|
|
proceed: [
|
|
{ text: '暂停' },
|
|
{
|
|
text: '重新开始任务',
|
|
color: 'blue',
|
|
},
|
|
{ text: '结束' },
|
|
],
|
|
again: [
|
|
{
|
|
text: '重新开始任务',
|
|
color: 'blue',
|
|
},
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
...mapMutations('home', ['setClient', 'setTips', 'setStatus', 'setTipsContent']),
|
|
chooseList() {
|
|
return this.start;
|
|
},
|
|
changeStatus(e, num) {
|
|
this.setStatus(num);
|
|
this.setTipsContent(this.chooseTips(num, this.content));
|
|
const client = {
|
|
left: e.target.x,
|
|
top: e.target.y,
|
|
};
|
|
this.setClient(client);
|
|
this.setTips(true);
|
|
},
|
|
chooseTips(num, content) {
|
|
switch (num) {
|
|
case 0:
|
|
return `确认开始任务${content}吗？`;
|
|
case 1:
|
|
return `请选择要执行的操作`;
|
|
case 2:
|
|
return `请选择要执行的操作`;
|
|
case 3:
|
|
return `是否要重新开始此任务`;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|