wms_pda/pages/sample/main.vue

<template>
	<view>
		<view class="head">
			<view class="header-wrap">
				<view class="index-header">
					<view class="map-wrap"></view>
					<view class="input-wrap">
						<text class="iconfont">仓库管理</text>
					</view>
					<view class="map-wrap"></view>
				</view>
			</view>
			<view class="blank"></view>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="button-sp-area">
				<button type="success" @click="groupDisk()" style="
					border-radius: 50%;width: 95px;
					height: 95px;margin: auto;text-align: center;
					line-height: 95px;background-color: #4bbf73;
					color:#ffffff;margin-top:16px;font-size: 15px;" class="button">
					入库
				</button>
				<br>
					<button type="success" @click="TemplateGroup()" style="
						border-radius: 50%;width: 95px;
						height: 95px;margin: auto;text-align: center;
						line-height: 95px;background-color: #4bbf73;
						color:#ffffff;margin-top:16px;font-size: 15px;" class="button">
						铁桶入库
					</button>
				<br>
					<button type="success" @click="QuickGroup()" style="
						border-radius: 50%;width: 95px;
						height: 95px;margin: auto;text-align: center;
						line-height: 95px;background-color: #4bbf73;
						color:#ffffff;margin-top:16px;font-size: 15px;" class="button">
						木箱入库
					</button>
			
				<br>
				<!-- 
				 <br>
				 <button type="success" @click="emergencyDisk()" style="
				 	border-radius: 50%;width: 95px;
				 	height: 95px;margin: auto;text-align: center;
				 	line-height: 95px;background-color: #4bbf73;
				 	color:#ffffff;font-size: 16px;" class="button">
				 	超限整理
				 </button>
				 <br>
				 <button type="success" @click="emptyDisk()" style="
				 	border-radius: 50%;width: 95px;
				 	height: 95px;margin: auto;text-align: center;
				 	line-height: 95px;background-color: #4bbf73;
				 	color:#ffffff;font-size: 16px;" class="button">
				 	空托入库
				 </button>
				 <br>
				 <button type="success" @click="sortingDisk()" style="
				 	border-radius: 50%;width: 95px;
				 	height: 95px;margin: auto;text-align: center;
				 	line-height: 95px;background-color: #4bbf73;
				 	color:#ffffff;font-size: 16px;" class="button">
				 	分拣入库
				 </button>
				 -->
				<br>
				<button type="primary" @click="sorting_out()" style="border-radius: 50%;width: 95px;
					height: 95px;margin: auto;text-align: center;
					line-height: 95px;border-color: #0039a6;font-size: 16px;" class="button">
					出库</button>
				<br>
				<button type="primary" @click="testing_out()" style="border-radius: 50%;width: 95px;
					height: 95px;margin: auto;text-align: center;
					line-height: 95px;border-color: #0039a6;font-size: 16px;" class="button">
					质检出库</button>
				<!-- <br>
				 <button type="primary" @click="container()" style="border-radius: 50%;width: 95px;
					height: 95px;margin: auto;text-align: center;
					line-height: 95px;border-color: #0039a6;font-size: 16px;" class="button">
					容器管理</button> -->
				<br>
				<button type="primary" @click="batch()" style="border-radius: 50%;width: 95px;
					height: 95px;margin: auto;text-align: center;
					line-height: 95px;border-color: #0039a6;font-size: 16px;" class="button">
					批次管理</button>
				<br>
				<button type="primary" @click="task()" style="border-radius: 50%;width: 95px;
					height: 95px;margin: auto;text-align: center;
					line-height: 95px;border-color: #0039a6;font-size: 16px;" class="button">
					任务管理</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'button',
				loading: false
			}
		},
		onLoad() {
			this._timer = null;
		},
		onShow() {
			this.clearTimer();
			this._timer = setTimeout(() => {
				this.loading = true;
			}, 300)
		},
		onUnload() {
			this.clearTimer();
			this.loading = false;
		},
		methods: {
			openTypeError(error) {
				console.error('open-type error:', error);
			},
			clearTimer() {
				if (this._timer != null) {
					clearTimeout(this._timer);
				}
			},

			groupDisk: function() {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						url: '/pages/sample/group',
					})
				}, 500);
			},
			emergencyDisk: function() {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						url: '/pages/sample/emergency',
					})
				}, 500);
			},
			sortingDisk: function() {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						url: '/pages/sample/sorting',
					})
				}, 500);
			},
			emptyDisk: function() {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						url: '/pages/sample/empty',
					})
				}, 500);
			},
			planGroupDisk: function() {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						url: '/pages/sample/plan_group',
					})
				}, 500);
			},
			sorting_out: function(code) {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						// url: '/pages/sample/tts',
						url: '/pages/sample/sorting_out',
					})
				}, 500);
			},
			testing_out: function(code) {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						// url: '/pages/sample/tts',
						url: '/pages/sample/testing_out',
					})
				}, 500);
			},
			container: function(code) {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						// url: '/pages/sample/tts',
						url: '/pages/sample/container',
					})
				}, 500);
			},
			task: function(code) {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						// url: '/pages/sample/tts',
						url: '/pages/sample/task',
					})
				}, 500);
			},
			batch: function(code) {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						// url: '/pages/sample/tts',
						url: '/pages/sample/batch',
					})
				}, 500);
			},
			QuickGroup: function(code) {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						url: '/pages/sample/QuickGroup',
					})
				}, 500);
			},
			TemplateGroup: function(code) {
				setTimeout(() => {
					uni.vibrateShort();
					uni.navigateTo({
						url: '/pages/sample/templateGroup',
					})
				}, 500);
			},
		}
	}
</script>

<style>
	button {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.button-sp-area {
		margin: 0 auto;
		width: 60%;
	}

	.mini-btn {
		margin-right: 10rpx;
	}

	.button {
		background-color: #4CAF50;
		/* 设置背景色 */
		color: white;
		/* 设置文字颜色 */
		text-align: center;
		border-radius: 6px;
		/* 添加边角半径 */
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		/* 添加阴影效果 */
		transition: all 0.3s ease;
		/* 过渡动画时间为0.3秒 */
	}

	.button:hover {
		transform: scale(1.1);
		/* 当鼠标悬停在按钮上时放大到原始比例的1.1倍 */
	}
</style>

<style lang="scss">
	$color-base: #0039a6;
	$words-color-base: #333333;
	$words-color-light: #999999;

	.header-wrap {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;

		.index-header {
			height: 88upx;
			line-height: 88upx;
			padding: 0 30upx;
			padding-top: 40upx;
			background-color: $color-base;
			font-Size: 28upx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.fanhui {
				color: #fff !important;
				font-size: 28px;
				padding-top: 5px;
				font-weight: 700;
			}

			.lanya {
				color: #fff !important;
				font-size: 28px;
				padding-top: 5px;
			}

			.map-wrap {
				padding-top: 5px;
			}
		}
	}

	.blank {
		height: 126upx;
	}
</style>