app-station-control-frontend_v1/components/PublicDrawer/PublicDrawer.vue

<template>
	<view class="drawerBox">
		<view class="top">
			<view class="title">{{title}}</view>
			<view class="close" @click="close" v-if="flag">✕</view>
			<view class="handler" v-else>
				<view class="cancel" @click="close">取消</view>
				<view class="save" @click="SubmitPublic">保存</view>
			</view>
		</view>
		<view class="footer">
			<slot/>
		</view>
	</view>
</template>

<script>
	export default {
		name:"PublicDrawer",
		props:['flag','title'],
		data() {
			return {
				
			};
		},
		methods:{
			//修改接口公共触发函数
			SubmitPublic(){
				if(this.title=='告警处理'){
					this.$emit('alarmDispose')
				}else if(this.title=='新增车辆'){
					this.$emit('AddCarinfo')
				}else if(this.title=='编辑车辆'){
					this.$emit('EditCarInfo')
				}else if(this.title=='绑定FRID'){
					this.$emit('BindFRIDHandle')
				}
				else if(this.title == '编辑车牌'){
					//修改车牌号
					this.$emit('HandleEditPlate')
				}else if(this.title == '充电设置'){
					
				}else if(this.title=='新增仓位'){
					this.$emit('AddCanginfo')
				}else if(this.title=='编辑仓位'){
					this.$emit('EditCangInfo')
				}else if(this.title=='编辑电池'){
					this.$emit('EditBatteryInfo')
				}else if(this.title=='新增电池'){
					this.$emit('AddBatteryinfo')
				}
			},
			close(){
				this.$emit('closeDrawer')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.drawerBox{
		display: flex;
		flex-direction: column;
		height: 100%;
		.top{
			width: 100%;
			height: 74px;
			line-height: 54px;
			border-bottom: 1px solid rgba(65, 74, 99, 0.5);
			box-sizing: border-box;
			z-index: 999;
			padding: 0px 20px;
			display: flex;
			padding-top: 20px;
			background-color: #141A25;
			position:fixed;
			top: 0;
			.title{
				min-width: 74px;
				white-space: nowrap;
				font-size: 16px;
				font-weight: 500;
				color: #FFFFFF;
				position: relative;
			}
			.title::before{
				content: '';
				width: 100%;
				position: absolute;
				height: 2px;
				background: #FFFFFF;
				box-shadow: 0px 0px 6px 0px rgba(255,255,255,0.8);
				bottom: -1px;
			}
			.close{
				width: 24px;
				height: 24px;
				color: #FFFFFF;
				margin-left: auto;
				font-size: 14px;
				text-align: center;
				vertical-align:middle;
			}
			.handler{
				display: flex;
				margin-left: auto;
				height: 54px;
				align-items: center;
				.cancel{
					width: 60px;
					height: 54px;
					border-radius: 2px;
					border: 1px solid #263042;
					font-size: 14px;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 54px;
				}
				.save{
					width: 60px;
					height: 54px;
					background: #91FDB9;
					border-radius: 2px;
					text-align: center;
					line-height: 54px;
					font-size: 14px;
					font-weight: 400;
					color: black;
				}
			}
		}
		.footer{
			padding: 20px;
			width: 100%;
			box-sizing: border-box;
			margin-top: 74px;
		}
	}
</style>