TALL-MUI-4/components/Title/Title.vue

<template>
<theme>
  <view>
    <!-- :is-back="false" -->
    <u-navbar :custom-back="onBack" class="overflow-hidden">
      <view class="flex justify-start flex-1 px-3 font-bold min-0">
        <view class="truncate">{{ project.name }}</view>
      </view>
      <view class="mr-2" slot="right">
        <u-icon class="m-1" name="xuanzhong2" custom-prefix="custom-icon" size="20px" @click="lwbs"></u-icon>
        <u-icon class="m-1" name="shuaxin1" custom-prefix="custom-icon" size="20px" @click="projectOverview"></u-icon>
        <u-icon class="m-1" name="home" custom-prefix="custom-icon" size="20px" @click="openIndex"></u-icon>
        <u-icon class="m-1" name="xuanxiang" custom-prefix="custom-icon" size="20px" @click="operation"></u-icon>
      </view>
    </u-navbar>
    <view
      class="mask"
      v-if="data.maskShow"
      @click="closeMask"
      style="width: 100%; height: 100vh; z-index: 21; position: fixed; background: rgba(0, 0, 0, 0.3)"
    ></view>
    <!-- 右上角 ... 弹窗 -->
    <view class="popup border shadow-md" v-if="data.show">
      <view class="flex pb-3 border-b-1">
        <u-icon name="plus-circle" size="36" style="margin: 0 15px 3px 0"></u-icon>
        <view @click="createTask">新建任务</view>
        <!-- <view>新建任务</view> -->
      </view>
      <view class="flex pt-3">
        <u-icon name="share" size="32" style="margin: 0 15px 3px 0"></u-icon>
        <view @click="share">分享项目</view>
      </view>
    </view>
    <!-- 分享项目弹窗 -->
    <ShareProject v-if="data.secondShow" class="second-popup" />
    <!-- 新建任务弹窗 -->
    <CreateTask
      :startTime="data.startTime"
      :endTime="data.endTime"
      @showTime="showTime"
      @closeMask="closeMask"
      class="third-popup flex transition-transform"
      v-if="data.createTaskShow"
    />

    <u-picker title="开始时间" mode="time" v-model="data.showStart" :params="data.params" @confirm="confirmStartTime"></u-picker>
    <u-picker title="结束时间" mode="time" v-model="data.showEnd" :params="data.params" @confirm="confirmEndTime"></u-picker>
  </view>
  </theme>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { useStore } from 'vuex';
import CreateTask from './components/CreateTask.vue';
import ShareProject from './components/ShareProject.vue';

const data = reactive({
  show: false, // 右上角 ... 显示
  createTaskShow: false, // 新建项目显示
  secondShow: false, // 分享项目显示
  maskShow: false, // 遮罩显示
  showStart: false,
  showEnd: false,
  startTime: '', // 新建任务的开始时间
  endTime: '', // 新建任务的截止时间
  params: {
    year: true,
    month: true,
    day: true,
    hour: true,
    minute: true,
    second: true,
  },
});

const store = useStore();
const project = computed(() => store.state.project.project);
const userId = computed(() => store.getters['user/userId']);

function showTime() {
  data.showStart = !data.showStart;
}

// 选择开始时间
function confirmStartTime(e) {
  data.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
  data.showEnd = true;
}

// 选择结束时间
function confirmEndTime(e) {
  data.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
}

// 点击返回按钮
function onBack() {
  // eslint-disable-next-line no-undef
  const pages = getCurrentPages(); // 获取页面栈数组
  console.log('历史pages: ', pages.length);
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    // this.$u.route('/', { u: this.userId });
    uni.reLaunch({ url: `/pages/index/index?u=${userId.value}` });
  }
}

// LWBS提示
function lwbs() {
  // uni.$ui.showToast('LWBS');
}
// 项目概览
function projectOverview() {
  // uni.$ui.showToast('项目概览');
}
// 回到首页
function openIndex() {
  uni.webView.reLaunch({ url: `/pages/index/index?u=${this.userId}` });
}

// 操作
function operation() {
  // uni.$ui.showToast('操作');
  data.show = !data.show;
}

// 新建项目
function createTask() {
  // 关闭 ... 弹窗
  data.show = false;
  // 打开遮罩
  data.maskShow = true;
  // 打开新建项目弹窗
  data.createTaskShow = true;
}

// 分享项目
function share() {
  // 关闭 ... 弹窗
  data.show = false;
  // 打开遮罩
  data.maskShow = true;
  // 打开分享项目弹窗
  data.secondShow = true;
}

// 点击遮罩，关闭弹窗
function closeMask() {
  // 关闭遮罩
  data.maskShow = false;
  // 关闭分享项目弹窗
  data.secondShow = false;
  // 关闭新建项目弹窗
  data.createTaskShow = false;
}
</script>

<style lang="scss" scoped>
.second-popup {
  background: #ffffff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 33;
  border-radius: 5px;
  width: 90%;
}

.third-popup {
  background: #ffffff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 33;
  border-radius: 5px;
  width: 90%;
}

.popup {
  width: 40%;
  background: #fff;
  position: absolute;
  right: 0;
  z-index: 99;
  padding: 15px;
  color: black;
  animation: opacity 0.5s ease-in;
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

::v-deep .u-slot-content {
  min-width: 0;
}
::v-deep .u-dropdown__content {
  min-height: 120px !important;
  height: auto !important;
  overflow-y: auto;
  background: #fff !important;
  transition: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
::v-deep .u-dropdown__menu__item .u-flex {
  justify-content: space-between;
  width: 100%;
  height: 100%;
  flex-wrap: nowrap;
  border: 1px solid #afbed1;
  padding: 0 8px;
}
::v-deep .u-dropdown__content__mask {
  display: none;
}
</style>