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>

		<scroll-view @tap="hideModal" scroll-y class="DrawerPage" :class="modalName == 'viewModal' ? 'show' : ''">
		
		<!-- 任务组件 -->
		<view class="taskcard solid">
			<view class="tasktab" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)"><view class="cu-tag" :class="'line-white'">任务一</view></view>

			<view class="taskcontent solids-bottom  flex align-center" style="color: #FFFFFF;" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)">
				<view class="flex-subs text-center"><view class="padding">用于摘要或阅读文本页面默认字号</view></view>
			</view>

			<view class="taskbutton align-center padding">
				<button class="cu-btn ">确认</button>
				<button class="cu-btn ">取消</button>
			</view>
		</view>

		<!-- 任务组件 -->
		<view class="taskcard solid">
			<view class="tasktab" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)"><view class="cu-tag" :class="'line-white'">任务二</view></view>

			<view class="taskcontent solids-bottom  flex align-center" style="color: #FFFFFF;" @tap="common.navTo('/components/task/taskCard/taskCard?taskName=' + taskName)">
				<view class="flex-subs text-center"><view class="padding">用于摘要或阅读文本页面默认字号</view></view>
			</view>

			<view class="taskbutton align-center  padding">
				<button class="cu-btn ">确认</button>
				<button class="cu-btn ">取消</button>
			</view>
		</view>
		</scroll-view>
	</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 {
			taskName: '任务',
			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: #fff;
}

@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;
}
.taskcard {
	margin-left: 10%;
	width: 80%;
	height: 200px;
	margin-top: 3%;
	 border:2px solid white;
}
.tasktab {
	height: 30px;
	width: 100%;
	margin-left: 3%;
	margin-top: 3%;
}
.taskcontent {
	height: 100px;
}
.taskbutton {
	width: 100%;
	height: 50px;
}
.cu-tag {
	float: left;
}
.solids-bottom::after {
	border-bottom: 0px solid #eee;
}
.cu-btn {
	float: right;
	margin-left: 3px;
}
.DrawerPage {
					position: fixed;
					width: 100vw;
					height: 100vh;
					left: 0vw;
					background-color: #1f1f1f;
					transition: all 0.4s;
				}
				
				.DrawerPage.show {
					transform: scale(0.9, 0.9);
					left: 85vw;
					box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
					transform-origin: 0;
				}
				.DrawerPage .cu-bar.tabbar .action button.cuIcon {
					width: 64upx;
					height: 64upx;
					line-height: 64upx;
					margin: 0;
					display: inline-block;
				}
				
				.DrawerPage .cu-bar.tabbar .action .cu-avatar {
					margin: 0;
				}
				
				.DrawerPage .nav {
					flex: 1;
				}
				
				.DrawerPage .nav .cu-item.cur {
					border-bottom: 0;
					position: relative;
				}
				
				.DrawerPage .nav .cu-item.cur::after {
					content: '';
					width: 10upx;
					height: 10upx;
					background-color: currentColor;
					position: absolute;
					bottom: 10upx;
					border-radius: 10upx;
					left: 0;
					right: 0;
					margin: auto;
				}
				
				.DrawerPage .cu-bar.tabbar .action {
					flex: initial;
				}
</style>