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.
117 lines
3.7 KiB
117 lines
3.7 KiB
<template>
|
|
<view>
|
|
<view @tap="changeStatus($event, 0)" class="flex items-center justify-center text-blue-400 rounded-full h-7 w-7" v-if="status === 0">
|
|
<view class="circular text-center">
|
|
<u-icon color="#2979ff" name="checkmark" size="30"></u-icon>
|
|
</view>
|
|
<!-- <u-circle-progress
|
|
:percent="100"
|
|
active-color="#2979ff"
|
|
bg-color="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 @tap="changeStatus($event, 1)" class="flex items-center justify-center text-black rounded-full h-7 w-7" v-if="status === 1">
|
|
<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">{{ time }}</view>
|
|
</view>
|
|
</u-circle-progress>
|
|
</view>
|
|
<view @tap="changeStatus($event, 2)" class="flex items-center justify-center text-gray-400 rounded-full h-7 w-7" v-if="status === 2">
|
|
<u-circle-progress :percent="40" 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="play-right-fill" size="30"></u-icon>
|
|
</view>
|
|
</view>
|
|
</u-circle-progress>
|
|
</view>
|
|
<view
|
|
@tap="changeStatus($event, 3)"
|
|
class="flex items-center justify-center font-black text-red-800 rounded-full h-7 w-7"
|
|
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('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>
|
|
|
|
<style lang="scss" scoped>
|
|
.circular {
|
|
width: 62rpx;
|
|
height: 62rpx;
|
|
border-radius: 50%;
|
|
border: 6rpx solid #2979ff;
|
|
line-height: 56rpx;
|
|
}
|
|
</style>
|
|
|