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.
 
 
 
 
 

234 lines
5.9 KiB

<template>
<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="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="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="secondShow" class="second-popup" />
<!-- 新建任务弹窗 -->
<CreateTask
:startTime="startTime"
:endTime="endTime"
@showTime="showTime"
@closeMask="closeMask"
class="third-popup flex transition-transform"
v-if="createTaskShow"
/>
<u-picker title="开始时间" mode="time" v-model="showStart" :params="params" @confirm="confirmStartTime"></u-picker>
<u-picker title="结束时间" mode="time" v-model="showEnd" :params="params" @confirm="confirmEndTime"></u-picker>
</view>
</template>
<script>
import { mapGetters, mapState } from 'vuex';
import CreateTask from './components/CreateTask.vue';
import ShareProject from './components/ShareProject.vue';
export default {
name: 'ProjectTitle',
components: { CreateTask, ShareProject },
data() {
return {
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,
},
};
},
computed: {
...mapState('project', ['project']),
...mapGetters('user', ['userId']),
},
methods: {
showTime() {
this.showStart = !this.showStart;
},
// 选择开始时间
confirmStartTime(e) {
this.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
this.showEnd = true;
},
// 选择结束时间
confirmEndTime(e) {
this.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
},
// 点击返回按钮
onBack() {
// eslint-disable-next-line no-undef
const pages = getCurrentPages(); // 获取页面栈数组
console.log('历史pages: ', pages.length);
if (pages.length > 1) {
uni.webView.navigateBack();
} else {
// this.$u.route('/', { u: this.userId });
uni.webView.reLaunch({ url: `/pages/index/index?u=${this.userId}` });
}
},
// LWBS提示
lwbs() {
// this.$t.ui.showToast('LWBS');
},
//项目概览
projectOverview() {
// this.$t.ui.showToast('项目概览');
},
// 回到首页
openIndex() {
console.log(111);
uni.webView.reLaunch({ url: `/pages/index/index?u=${this.userId}` });
},
//操作
operation() {
// this.$t.ui.showToast('操作');
this.show = !this.show;
},
// 新建项目
createTask() {
// 关闭 ... 弹窗
this.show = false;
// 打开遮罩
this.maskShow = true;
// 打开新建项目弹窗
this.createTaskShow = true;
},
//分享项目
share() {
// 关闭 ... 弹窗
this.show = false;
// 打开遮罩
this.maskShow = true;
// 打开分享项目弹窗
this.secondShow = true;
},
//点击遮罩,关闭弹窗
closeMask() {
// 关闭遮罩
this.maskShow = false;
// 关闭分享项目弹窗
this.secondShow = false;
// 关闭新建项目弹窗
this.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>