purchase-let/pagesOrder/deliveryOrder/index.vue

<template>
	<view style="background-color: #ffffff;">
		<up-sticky offset-top="0" style="background-color: #ffffff;">
			<view class="navbar">
				<view style="width:55%;">
					<up-search placeholder="请输入商品" @search="searchKeyword" @clear="searchKeyword" v-model="keyword"
						:showAction="false"></up-search>
				</view>
				<view style="width:45%;padding-left: 10rpx;">
					<uni-datetime-picker v-model="range" type="date" @change="calendarConfirm" />
				</view>
			</view>
		</up-sticky>

		<view class="content">
			<up-transition :show="true" mode="slide-left">
				<up-list @scrolltolower="scrolltolower" v-if="goodsList1.length>0">
					<up-list-item class="card" v-for="(item,index) in goodsList1" :key='index'>

						<view class="card-content">
							<view class="card-content-l" style="width: 152rpx;height: 152rpx;">
								<image style="width: 152rpx;height: 152rpx;" :src="item.image" mode=""></image>
							</view>
							<view class="card-content-r">
								<view class="title ellipsis">
									{{item.store_name}}
								</view>
								<view>
									单位:{{item.unit_name}}
								</view>
								<view>
									规格:{{item.store_info}}
								</view>
								<view style="color: red;">
									数量： {{item.nums}}
								</view>
								<view style="color: red;" v-if="item.staff_id>0">
									确认人： {{item.nums}}
								</view>
							</view>

						</view>

						<view class="card-footer">
							<up-button size="small" type="primary" shape="circle" @click="cancleOrder(item)"
								v-if="item.status==0">确认已入库</up-button>
						</view>
						<up-line style="margin-top: 30rpx;" color="#F3F3F3"></up-line>
					</up-list-item>
				</up-list>
				<up-empty  v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</up-empty>
			</up-transition>
			<up-modal :show="show" title="入库确认" content="是否确认该商品入库" showCancelButton @cancel="show=false" @confirm="offerUpdate()">

			</up-modal>

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


<script setup>
	import {
		timeFrom
	} from '@/uni_modules/uview-plus';

	import {
		ref,
		reactive,
	} from "vue"
	import {
		SystemStoreStorageLists,
		SystemStoreStorageWarehousingAdd
	} from "@/api/system_store_storage.js"

	const show = ref(false)
	const dates=ref(timeFrom(new Date()))
	const where = ref({
		store_name: '',
		page_no: 1,
		start_time: dates.value,
		end_time: dates.value
	})
	const calendarShow = ref(false)
	const formData = ref({
		"id": '',
		'product_id': '',
	})
	const calendarConfirm = (e) => {
		where.value.start_time = e;
		where.value.end_time = e;
		where.value.page_no = 1;
		goodsList1.value = []
		getGoodsList()
		calendarShow.value = false
	}

	// 列表
	const showGoods1 = ref(false)
	const goodsList1 = ref([])

	const getGoodsList = async () => {
		let res = await SystemStoreStorageLists(where.value)
		goodsList1.value.push(...res.data.lists)
	}
	const cancleOrder = (item) => {
		show.value = true
		formData.value.id = item['id']
		formData.value.product_id = item['product_id']
	}
	const offerUpdate = () => {
		SystemStoreStorageWarehousingAdd(formData.value).then(res => {
			uni.$u.toast(res.msg);
			show.value = false
			goodsList1.value = []
			getGoodsList()
		})
	}

	const keyword = ref('');

	const searchKeyword = () => {
		where.value.store_name = keyword.value;
		goodsList1.value = []
		getGoodsList();
	}
	const scrolltolower = () => {
		where.value.page_no += 1
		getGoodsList()
	}
	getGoodsList()
</script>

<style lang="scss">
	.navbar {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
		color: #777;

		.nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			image {
				height: 40rpx;
				width: 40rpx;
			}

			.badge {
				position: absolute;
				top: -10rpx;
				right: 10rpx;
				background-color: #FF0000;
				color: #FFFFFF;
				text-align: center;
				width: 30rpx;
				height: 30rpx;
				border-radius: 30rpx;
				font-size: 18rpx;
			}

		}
	}
	.content {
		padding: 20rpx;
		padding-bottom: 150rpx;

		.card {
			width: 710rpx;
			margin: 0 auto;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: white;



			.card-content {
				display: flex;
				position: relative;

				.card-content-l {
					margin-right: 20rpx;
					position: relative;

					.status {
						width: 152rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, .3);
						text-align: center;
						color: white;
						font-size: 24rpx;
						line-height: 40rpx;
						position: absolute;
						bottom: 0;
					}
				}

				.card-content-r {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						width: 500rpx;
					}

					.need {
						color: #777777;
						font-size: 24rpx;
					}

					.ipt {
						display: flex;
						height: 56rpx;

					}
				}

			}

			.card-footer {
				margin-top: 30rpx;
				text-align: right;
				font-size: 28rpx;
				color: #060606;
			}
		}
	}
	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>