hldy_app_mini/pages/material/component/crkval.vue

<template>
	<view>
		<view class="crkd  guodu" :style="!show?'width: 0;right:-4vw':'width: 86.8vw'">
			<view class="topboxs">
				<view class="title">
					<view></view>
					出入库
				</view>
				<view class="sscgd">
					<input type="text" placeholder="采购单号" />
				</view>
				<view class="sscgd">
					<input type="text" placeholder="退货单号" />
				</view>
				<view class="sscgd">
					<input type="text" placeholder="物料名称" />
				</view>
				<view class="sscgd">
					<input type="text" placeholder="生产厂家" />
				</view>
				<view class="search scr guodu">
					<image src="/static/index/procurement/sh.png" mode="aspectFill" class="sh"></image>
					<image src="/static/index/procurement/shr.png" mode="aspectFill" class="shr"></image>
					检索
				</view>
			</view>
			<!-- @addcartory="" @scrolltolower="" :status="" -->
			<view class="crklist">
				<crkitem :InvoicingList="InvoicingList" lower-threshold="300" @scrolltolower="scrolltolower" @crk="crk"></crkitem>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, watch } from 'vue';
	import crkitem from './crkitem.vue'
	import { getCkWlList } from '../api/api.js'
	
	const props = defineProps({
		show: {
			type: Boolean
		},
	})
	watch(
		() => props.show,
		(newVal, oldVal) => {
			if (!oldVal && newVal) {
				getCardArray()
			}
			// console.log('show变化了:', newVal)
		}
	)
	const InvoicingList = ref([]);
	const emit = defineEmits(['crk'])
	const crk = (v, i) => {
		emit('crk', v, i)
	}
	// 入参
	const inputValue = ref({
		pageNo: 1,
		pageSize: 16,
		nuId: uni.getStorageSync('nuId'),
		wlParamInfo: ""
	})
	// 初始化卡片
	const getCardArray = () => {
		inputValue.value.pageNo = 1;
		addlock.value = false
		getCkWlList(inputValue.value).then((res : any) => {
			// console.log("看看卡片列表", res.result.records)
			InvoicingList.value = res.result.records
			if (res.result.records.length != 16) {
				addlock.value = true
			}
		})
	}
	// 添加锁，节流
	const addlock = ref(false)
	// 添加卡片
	const scrolltolower = () => {
		if (!addlock.value) {
			inputValue.value.pageNo++
			getCkWlList(inputValue).then((res : any) => {
				InvoicingList.value.push(...res.result.records)
				if (res.result.records.length != 16) {
					addlock.value = true
				}
			})
		}
	}
</script>

<style lang="less" scoped>
	.crklist {
		width: 100%;
		height: calc(100vh - 6vw);
	}

	.crkd {
		width: 86.8vw;
		height: 100vh;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 101;
		padding: 0 0 0 1vw;
		background: #FFFFFF;
		border-radius: 3vw 0 0 3vw;

		.topboxs {
			width: 100%;
			height: 5.1vw;
			display: flex;
			align-items: center;
			padding-left: 1vw;

			.scr {
				image {
					width: 1.6vw;
					height: 1.6vw;
					margin: 0 0.5vw 0 0;
				}
			}

			.shr {
				display: none;
			}

			.scr:active .sh {
				display: none;
			}

			.scr:active {
				color: #57A8FA;
				border: 1px solid #57A8FA;
			}

			.shx:active .shr {
				display: inline-block;
			}

			.shx:active .sh {
				display: none;
			}

			.scr:active .shr {
				display: inline-block;
			}

			.search {
				width: 8.5vw;
				height: 3.4vw;
				background: #FFFFFF;
				border-radius: 1.5vw;
				border: 1px solid #CECECE;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.sscgd {
				width: 13.8vw;
				height: 3.4vw;
				background: #FFFFFF;
				border-radius: 1.5vw;
				border: 1px solid #D2D2D2;
				margin-right: 1.2vw;

				input {
					width: 100%;
					height: 100%;
					padding: 0 1.2vw;
				}
			}

			.title {
				font-size: 1.7vw;
				color: #222222;
				display: flex;
				align-items: center;
				margin-right: 6.9vw;

				view {
					width: 0.5vw;
					height: 1.4vw;
					background: radial-gradient(0% 0% at 0% 0%, #006DC9 7.25%, #0385FA 100%), #F7F7F7;
					border-radius: 0.2vw;
					margin-right: 1vw;
				}
			}
		}
	}

	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>