tall-mui-3-project/src/components/TimeLine/component/TimeStatus.vue

<!--
 * @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>