lxp_Maxcess/pages/productionStorage/index.vue

<template>
	<view class="app status-bar-gap">
		<l-header :title="t('home.scrk')" sticky #right>
			<view  style="margin-right: 32rpx;" v-if="state.tabsIndex === '1'" @click="submit()">{{ t('verify.tj') }}</view>
		</l-header>
		<view class="page">
			<view class="input-box">
			  <up-tabs :scrollable="true" :list="state.tabsList" @click="upTabsItemFun"></up-tabs>
			</view>
			<view class="input-box">
				<view class="input-item">
					<up-input :placeholder="t('receive.djbh')" border="none" clearable inputAlign="left"
						v-model="state.queryString" @change="changeFun">
						<template #prefix>
							<up-icon name="search" color="#2979ff" size="24"></up-icon>
						</template>
					</up-input>
				</view>
			</view>
			<packing ref="packingRef" v-if="state.tabsIndex === '1'" :queryString="state.queryString" @clearOut="clearOut()"/>
			<scattered v-if="state.tabsIndex === '2'" :queryString="state.queryString" @clearOut="clearOut()"/>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, nextTick, onMounted, ref,computed } from 'vue';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
	import { useI18n } from 'vue-i18n'
	import { parseTime } from '../../utils/tools.js';
	import { PRD_MORPTList, receiveBillList } from '../../common/request/api/api';
	import packing  from './packing.vue'
	import scattered from './scattered.vue'
	const packingRef = ref()
	const getI18n = useI18n()
	const { t, locale } = getI18n
	const state = reactive({
		queryString: '',
		tabsIndex:'1',
    tabsList: [
      { name: computed(() => t('index.bz')), type: '1' },
      { name: computed(() => t('index.minbz')), type: '2' },
    ],
	})
	const changeFun = (e : any) => {
		if(e != '' ) state.queryString = e
	}
	const upTabsItemFun = (e:any) => {
		state.tabsIndex = e.type
	}
	const clearOut = () => {
		state.queryString = ''
	}
	const submit = () => {
		packingRef.value.dataPushNotification()
	}
</script>

<style lang="scss">
	.app {
		background-color: #F5F5F5;

		.page {
			padding: 18px 32rpx;
			display: flex;
			flex-direction: column;
			height: 100%;
			flex: 1;

			.input-box {
				background-color: white;
				box-sizing: border-box;
				padding: 0 16rpx;
				border-radius: 24rpx;
				margin: 0 0 32rpx 0;

				.u-textarea {
					padding: 0 !important;
					font-size: 24rpx !important;
					color: #999999 !important;
				}

				.input-item {
					box-sizing: border-box;
					padding: 16rpx 0;
					color: #222222;
					font-size: 28rpx;
					font-weight: 400;

					.item-title {
						//font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					.item-text {
						font-weight: 400;
						font-size: 27rpx;
						color: #999999;
					}
				}
			}

			.receive-listBox {
				flex: 1;

				.list-box-list{
					width: 100%;
					// margin: 20rpx auto;
					.data-item{
						border: 1px solid #efeaea;
						border-radius: 20rpx;
						box-shadow: 0rpx 15rpx 15rpx  #efeaea;
						padding: 20rpx 20rpx 0;
						margin-bottom: 20rpx;
						background-color: #ffffff;
						.tit{
							font-size: 30rpx;
							font-weight: bold;
							padding: 20rpx 0;
						}
						.line-p{
							border: 1px solid #efeaea;
						}
						.b-font{
							font-size: 25rpx;
							padding: 20rpx 0;
						}
					}
				}
			}
		}
	}
	
</style>