204 lines
4.1 KiB
Vue
204 lines
4.1 KiB
Vue
<template>
|
||
<view class="custom-navigation-bar">
|
||
<view class="left" @click="navigateBack">
|
||
<uni-icons type="left" size="25"></uni-icons>
|
||
<!-- <image class="back-icon" src="/static/back.png"></image> -->
|
||
</view>
|
||
<view class="title-name-box">
|
||
<view class="title">{{ title }}</view>
|
||
<view class="name">（{{ name }}）</view>
|
||
</view>
|
||
<view class="right">
|
||
<!-- 右侧按钮或其他内容 -->
|
||
<!-- <view class="qj-box" @click="qj(0)">请假</view> -->
|
||
<!-- <view class="tc-box" @click="handleLogout">退出</view> -->
|
||
</view>
|
||
<view>
|
||
<!-- Normal popup -->
|
||
<u-popup ref="popup" :show="show" :round="10" mode="right" @close="close" @open="open"
|
||
:customStyle="popupStyle" bgColor="transparent">
|
||
<view style="margin-top: 60rpx;">
|
||
<view class="black-triangle"></view>
|
||
<view class="popup-content">
|
||
<view class="popup-font" @click="qj(0)">请假填写</view>
|
||
<!-- <view class="popup-font" @click="js">请假结束</view> -->
|
||
<view class="popup-font" @click="qj(1)">请假记录</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-modal :content="content" title="结束请假" :show="show3" showCancelButton closeOnClickOverlay @confirm="confirm"
|
||
@cancel="cancel" @close="close2"></u-modal>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { login } from '../api/login'
|
||
import {endLeaveInfo,endLeave} from '@/api/leave.js'
|
||
export default {
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
name: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
show: false,
|
||
popupStyle: {
|
||
height: '100rpx'
|
||
},
|
||
content: '',
|
||
show3:false,
|
||
}
|
||
},
|
||
methods: {
|
||
handleLogout() {
|
||
this.$modal.confirm('确定退出系统吗？').then(() => {
|
||
this.$store.dispatch('LogOut').then(() => {
|
||
this.$tab.reLaunch('/pages/login')
|
||
})
|
||
})
|
||
},
|
||
js(){
|
||
endLeaveInfo().then(res=>{
|
||
this.content=res.msg
|
||
this.show3 = true
|
||
})
|
||
},
|
||
confirm() {
|
||
this.show3 = false
|
||
endLeave().then(res=>{
|
||
console.log(res)
|
||
})
|
||
},
|
||
cancel() {
|
||
this.show3 = false
|
||
console.log('cancel');
|
||
},
|
||
close2() {
|
||
this.show3 = false
|
||
console.log('close');
|
||
},
|
||
navigateBack() {
|
||
uni.navigateBack()
|
||
},
|
||
open() {
|
||
this.show = true
|
||
},
|
||
close() {
|
||
this.show = false
|
||
},
|
||
qj(index) {
|
||
uni.navigateTo({
|
||
url: '/pages/qj/index?current=' + index
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/deep/.u-slide-right-enter-active {
|
||
height: 302rpx;
|
||
}
|
||
|
||
.black-triangle {
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 25rpx solid transparent;
|
||
border-right: 25rpx solid transparent;
|
||
border-bottom: 25rpx solid black;
|
||
position: relative;
|
||
left: 70rpx;
|
||
}
|
||
|
||
.popup-content {
|
||
width: 188rpx;
|
||
height: 150rpx;
|
||
background-color: black;
|
||
color: white;
|
||
border-radius: 10rpx;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.popup-font {
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
font-size: 22rpx;
|
||
letter-spacing: 6rpx;
|
||
}
|
||
|
||
.custom-navigation-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 44px;
|
||
background-color: #ededed;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
margin-left:13rpx;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.title-name-box {
|
||
width:400rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
margin-left:100rpx;
|
||
}
|
||
|
||
.title-name-box .title {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.title-name-box .name {
|
||
font-size: 10px;
|
||
color: #19BE6B;
|
||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.right .qj-box {
|
||
font-family: '微软雅黑', sans-serif;
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
.right .tc-box {
|
||
font-family: '微软雅黑', sans-serif;
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
color: #ff0000;
|
||
}
|
||
|
||
|
||
</style> |