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.
118 lines
3.5 KiB
118 lines
3.5 KiB
<template>
|
|
<view class="u-font-14">
|
|
<view
|
|
class="flex items-center justify-center text-blue-400 rounded-full icon-column"
|
|
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>
|
|
<view class="u-progress-info">
|
|
<u-icon name="checkmark" size="30"></u-icon>
|
|
</view>
|
|
</view>
|
|
</u-circle-progress>
|
|
</view>
|
|
|
|
<view class="flex items-center justify-center text-black rounded-full icon-column" 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="flex items-center justify-center text-gray-400 rounded-full icon-column"
|
|
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>
|
|
<view class="u-progress-info">
|
|
<u-icon name="play-right-fill" size="30"></u-icon>
|
|
</view>
|
|
</view>
|
|
</u-circle-progress>
|
|
</view>
|
|
<view
|
|
class="flex items-center justify-center font-black text-red-800 rounded-full icon-column"
|
|
@tap="changeStatus($event, 3)"
|
|
v-if="status === 3"
|
|
>
|
|
<u-circle-progress :percent="80" active-color="#2979ff" bg-color="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">
|
|
<u-icon name="pause" size="30"></u-icon>
|
|
</view>
|
|
</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('task', ['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>
|
|
|
|
<style scoped lang="scss">
|
|
.icon-column {
|
|
height: 33px;
|
|
width: 33px;
|
|
}
|
|
.one {
|
|
height: 33px;
|
|
width: 33px;
|
|
}
|
|
</style>
|
|
|