hn_ldlz/ldlz-H5/components/CustomNavigationBar.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>