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="onChangeStatus(1)">暂停</u-button>
        <u-button v-if="tip.status === 2" size="mini" @tap="onChangeStatus(2)">继续</u-button>
        <u-button v-if="tip.status === 1 || tip.status === 2" size="mini" @tap="onChangeStatus(0)">重新开始</u-button>
        <u-button v-if="tip.status === 1 || tip.status === 2" type="primary" size="mini" @tap="onChangeStatus(3)">结束</u-button>
        <u-button v-if="tip.status === 0 || tip.status === 3" type="primary" size="mini" @tap="onChangeStatus(0)">确定</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();
    },

    /**
     * 执行修改任务状态的动作
     * @param {number} type 状态码 0开始 1暂停 2继续 3完成 默认0
     */
    onChangeStatus(type) {
      const param = { id: this.tip.taskId, type };
      // TODO: 发请求
      const data = uni.$u.api.updateTaskType(param);
      console.log(data);
    },

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