logpm/pagesTask/pages/dynamicCheckDetails/dynamicCheckDetails.vue

<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar :title="title" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff'
			titleStyle='color:#ffffff'></u-navbar>
	</view>
	<view class="12312">
		2313213123213
	</view>
	<!-- 主体内容 -->
	<view class="main">
		<!-- 顶部 -->
		<view class="main_top">
			<input type="text" placeholder="请输入包条码" class="main_top_search" />
			<view class="button">搜索</view>
		</view>

		<!-- tabBar选项卡 -->
		<view class="tabBar">
			<view :class="{'tabBar-item': true, 'active': tabBarCode === 1}" @click="handleTabBarCode(1)">
				定制品
			</view>
			<view :class="{'tabBar-item': true, 'active': tabBarCode === 2}" @click="handleTabBarCode(2)">
				库存品
			</view>
			<view :class="{'tabBar-item': true, 'active': tabBarCode === 3}" @click="handleTabBarCode(3)">
				零担
			</view>
		</view>

		<!-- 控件 -->
		<view class="control" v-if="pageType === 1 || pageType === 2">
			<view class="button" @click="showControl = true" v-show="!showControl">批量操作</view>
			<template v-if="showControl">
				<view class="button">反选</view>

				<view class="controlList">
					<view class="button">
						批量删除
					</view>
					<view class="button">
						批量删除
					</view>
					<view class="button">
						状态修改
					</view>
				</view>
			</template>
		</view>

		<!-- 随机盘点 -->
		<template v-if="pageType === 1">
			<!-- 表格 -->
			<view class="table">
				<!-- 表格头部 -->
				<view class="thead">

				</view>

				<!-- 表格主体 -->
				<view class="tbody">

				</view>
			</view>
		</template>

		<!-- 按库位盘点 -->
		<template v-if="pageType === 2">
			<!-- 表格 -->
			<view class="table">
				<!-- 表格头部 -->
				<view class="thead">

				</view>

				<!-- 表格主体 -->
				<view class="tbody">

				</view>
			</view>
		</template>

		<!-- 按合同号盘点 -->
		<template v-if="pageType === 3">
			<!-- 表格 -->
			<view class="table">
				<!-- 表格头部 -->
				<view class="thead">

				</view>

				<!-- 表格主体 -->
				<view class="tbody">

				</view>
			</view>
		</template>

		<!-- 按托盘盘点 -->
		<template v-if="pageType === 4">
			<!-- 表格 -->
			<view class="table">
				<!-- 表格头部 -->
				<view class="thead">

				</view>

				<!-- 表格主体 -->
				<view class="tbody">

				</view>
			</view>
		</template>

		<!-- 提交 -->
		<button @click="submitCheck" class="submitButton" type="primary">提交盘点</button>
	</view>
	<saomiao2></saomiao2>
</template>

<script setup lang="ts">
	import {
		onShow,
		onLoad,
		onHide
	} from '@dcloudio/uni-app'
	import { reactive, toRefs } from "vue";

	const details = reactive({
		// 页面标题
		title: '',
		// 页面类型 1: 随机盘点; 2: 按库位盘点; 3: 按合同号盘点; 4: 按托盘盘点;
		pageType: 1,
		// 选项卡页码
		tabBarCode: 1,
		// 是否显示控件
		showControl: false,
		// 扫描后的值
		scancode: ''
	})

	// 页面初始化执行回调
	onLoad((info) => {
		const { pageType, data } = JSON.parse(info.data)
		details.title = data.title
		details.pageType = pageType


	})

	// 开启监听扫描
	onShow(() => {
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
		// 初始化请求页面数据
		initPage()
	})

	// 关闭扫描监听
	onHide(() => {
		uni.$off('scancodedate')
	})

	// 请求页面数据
	function initPage() { }

	// 扫描后执行的回调
	function scandata() { }

	// 改变选项卡激活状态
	function handleTabBarCode(code : number) {
		details.tabBarCode = code
	}

	/**
	 * 提交盘点
	 */
	function submitCheck() { }

	// 随机盘点
	function randomCheck() { }

	const { title,
		pageType,
		showControl,
		tabBarCode
	} = toRefs(details)
</script>

<style lang="scss" scoped>
	$buttonColor: #d3832a;

	// 本页按钮样式
	.button {
		font-size: 28upx;
		padding: 10upx 20upx;
		border: 1upx solid $buttonColor;
		background-color: #fff;
		color: #d3832a;
		border-radius: 5upx;
	}

	.main {
		padding: 10upx;
		font-size: 28upx; // 本页字体大小
	}

	.main_top {
		display: flex;
		// align-items: center;
		justify-content: space-between;
		margin-bottom: 10upx;

		// 顶部搜索框
		&_search {
			flex: 1;
			padding-left: 20upx;
			margin-right: 20upx;
			box-sizing: border-box;
			height: 28upx * 2;
			border-radius: 28upx;
			border: 1upx solid #000;
		}

		.button {
			background-color: $buttonColor;
			color: #fff;
			padding: 0 60upx;
			display: inline-flex;
			align-items: center;
		}
	}

	// tabBar选项卡
	.tabBar {
		display: flex;
		justify-content: space-evenly;
		margin-bottom: 10upx;

		&-item {
			position: relative;
			flex: 1;
			flex-basis: 0;
			padding: 20upx 0;
			text-align: center;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				display: block;
				width: 0;
				box-sizing: border-box;
				border: 1upx solid #d3832a;
				transition: all 0.5s;
			}

			&.active::after {
				left: 0;
				width: 100%;
			}
		}
	}

	// 控件区
	.control {
		display: flex;
		justify-content: space-between;

		.controlList {
			display: flex;

			.button {
				margin: 0 5upx;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	// 提交按钮
	.submitButton {
		position: fixed;
		color: #fff;
		background-color: $buttonColor;
		width: 50%;
		bottom: 30upx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>