sisMobilePhone/pages/task/Task.vue

<template>
	<view class="content">
		<cu-custom bgColor="bg-blacks" :isBack="false">
		    <block slot="right">
				<image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image>
			</block>
			<block slot="right">	
					<view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
						<view class="cu-tag looknumber" style="margin-top: -2%;">
							<block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
						</view>
					</view>
			</block>
			<block slot="right">
					
			</block>
		    <block slot="content">{{address}}</block>
			<block slot="right">
				<view class="plus" @tap="showModal" data-target="viewModal">+</view>
			</block>
		</cu-custom>
		<!-- 抽屉组件 -->
		<div>
			<drawer ref="drawer"></drawer>
		</div>
		<div class="plusDrawer" @tap="hideModal">
			<plusDrawer ref="plusDrawer"></plusDrawer>
		</div>
	</view>
</template>

<script>
	import res from '../../common/data.json';
	import drawer from '../../components/drawer/threeLineDrawer.vue'
	import plusDrawer from '../../components/drawer/plusDrawer.vue';
	
	export default {
		components: {
			"drawer": drawer,
			plusDrawer: plusDrawer
		},
		data:function(){
			return{
				badge: 22,
				inconList:["form","favor","question","edit"],
				modalName:null,
				address: '宁夏新能源公司',
				drawerList: [{
						"name": "首页"
					},
					{
						"name": "状态监视"
					},
					{
						"name": "矩阵监视"
					},
					{
						"name": "风场监视"
					},
					{
						"name": "人员监视"
					},
				],
				plusDrawerList: [{
						name: '宁夏新能源公司',
						windPowerStationId: 'NINGXIAXINNENGYUANGONGSI'
					},
					{
						name: '牛首山风电场',
						windPowerStationId: 'NSS_FDC'
					},
					{
						name: '香山风电场',
						windPowerStationId: 'XS_FDC'
					},
					{
						name: '石板泉风电场',
						windPowerStationId: 'SBQ_FDC'
					},
					{
						name: '青山风电场',
						windPowerStationId: 'QS_FDC'
					},
					{
						name: '麻黄山风电场',
						windPowerStationId: 'MHS_FDC'
					}
				],
				
			}
		},
		onHide() {
			this.$refs.drawer.closeDrawer();
			this.hideModal();
		},
		onShow(){
			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
			this.address = this.getWindPowerStationNameToSessionStorage();
		},
		methods:{
			openDrawer:function(){
				this.$refs.drawer.openDrawer(250,this.drawerList,this.inconList);
			},
			closeDrawer:function(){
				this.drawerIsShow=false;
			},
			pushWindPowerStationNameToSessionStorage(windpowerstationName) {
				uni.setStorageSync('windpowerstationName', windpowerstationName);
				//sessionStorage.setItem('windpowerstationName', windpowerstationName);
				//alert("v"+ sessionStorage.getItem("windpowerstationName"));
				//this.common.goback('/pages/index/Index');
			},
			getWindPowerStationNameToSessionStorage() {
				uni.getStorageSync('windpowerstationName');
				return uni.getStorageSync('windpowerstationName');
			},
			openDrawer: function() {
				this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList);
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
				this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
			},
			hideModal() {
				this.modalName = null;
				this.$refs.plusDrawer.hideModal(this.modalName);
			},
		}
	};
</script>

<style>
	body {
		font-family: '方正兰亭细黑_GBK';
		font-size: 20px;
		color: silver;
		background: #000;
	}
	
	@font-face {
		font-family: '方正兰亭细黑_GBK';
		src: url(../../static/fzltxh.TTF);
	}
	
	page {
		background-color: #1f1f1f;
		font-family: '方正兰亭细黑_GBK';
		overflow-x: hidden;
	}
	
	.top {
		width: 100%;
		height: 130upx;
		padding-top: 5upx;
		background-color: #1f1f1f;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 100;
	}

	.threeLine {
		width: 50px;
		height: 45px;
		float: left;
	}

	.text {
		width: calc(100% - 100px);
		height: 45px;
		float: left;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		line-height: 45px;
		margin-top: 11px;
		font-size: 18px;
	}

	.notice {
		width: 50px;
		height: 45px;
		float: left;
	}

	.plus {
		width: 30px;
		height: 45px;
		float: right;
		color: white;
		font-size: 35px;
		line-height: 45px;
		text-align: right;
		margin-right: 2.5%;
	}
	
	.textWindpowerstation{
		width: 180px;
		height: 45px;
		float: left;
		text-align: center;
		margin-left: 18px;
	}
	
</style>