tall-mui-3-project/src/components/Tips/Tips.vue

<template>
  <view
    class="fixed shadow-2xl"
    style="z-index: 1000"
    :style="{
      left: tip.left + 'px',
      top: height - tip.top > 110 ? tip.top + 'px' : '',
      bottom: height - tip.top > 110 ? '' : '10px',
    }"
    id="u-icard"
  >
    <u-card
      :title="title"
      style="width: 500rpx; margin: 0 !important"
      v-if="tip.show"
      titleSize="28"
      :headStyle="headStyle"
      :footStyle="footStyle"
    >
      <view class="" slot="body"> {{ tip.text }} </view>
      <view class="flex justify-end" slot="foot">
        <u-button size="mini" @tap="onCancel">取消</u-button>
        <u-button v-if="tip.status === 1" size="mini" @tap="onPause">暂停</u-button>
        <u-button v-if="tip.status === 2" size="mini" @tap="onContinu">继续</u-button>
        <u-button v-if="tip.status === 1 || tip.status === 2" size="mini" @tap="onRestart">重新开始</u-button>
        <u-button v-if="tip.status === 1 || tip.status === 2" type="primary" size="mini" @tap="onComplete">结束</u-button>
        <u-button v-if="tip.status === 0 || tip.status === 3" type="primary" size="mini" @tap="onConfirm">确定</u-button>
      </view>
    </u-card>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'Tips',
  props: { title: { default: '提示', type: String } },

  computed: mapState('task', ['tip']),

  data() {
    return {
      footStyle: { padding: '4px 15px' },
      headStyle: { paddingTop: '8px', paddingBottom: '8px' },
      height: 0,
    };
  },

  mounted() {
    this.height = window.screen.height;
  },

  methods: {
    ...mapMutations('task', ['setTipShow']),
    // 点击了确认
    onConfirm() {
      this.onCancel();
    },

    // TODO: 暂停
    onPause() {},

    // 重新开始
    onRestart() {},

    // 结束完成
    onComplete() {},

    // 继续
    onContinu() {},

    // 点击了取消
    onCancel() {
      this.setTipShow(false);
    },
  },
};
</script>