RedDragonfly/pages/fleeingGoods/fleeingGoods.vue

<template>
	<view class="production">
		<view class="top">
			<view class="time">
				<picker mode="date" fields="month" :value="date" @change="bindDateChange">
					<view class="uni-input">月份</view>
				</picker>
			</view>
		</view>
		<view class="nav">
			<view class="btn" :class="{activate : activate}" @click="activate = !activate">
				稽查人员上报
			</view>
			<view class="btn" :class="{activate : !activate}" @click="activate = !activate">
				跨区预警提示
			</view>
		</view>
		<view class="bom">
			<staff v-show="activate" :date="date"></staff>
			<early v-show="!activate" :date="date"></early>
		</view>
	</view>
</template>

<script>
	import staff from './staff.vue'
	import early from './early.vue'
	export default {
		data() {
			return {
				date: this.getCurrentMonth(),
				activate: true
			};
		},
		components: {
			staff,
			early
		},
		methods:{
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getData(){
				
			},
			getCurrentMonth() {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				return `${year}-${month}`
			}
		}
	}
</script>

<style lang="scss">
	.production {
		height: 100%;

		.top {
			height: 70rpx;
			line-height: 70rpx;
			background-color: #e40315;
			position: relative;

			.time {
				position: absolute;
				top: 0;
				right: 0;
				text-align: center;
				width: 100rpx;
				height: 100%;
				color: #fff;
			}
		}

		.nav {
			height: 80rpx;
			display: flex;
			background-color: #f6f6f6;
			color: #000000;

			view {
				flex: 1;
				height: 100%;
				line-height: 80rpx;
				text-align: center;

				&.activate {
					background-color: #85d691;
					color: #f6f6f6;
				}
			}
		}

		.bom {
			height: calc(100% - 160rpx);
		}
	}
</style>