wxapp_shuibei/pages/users/user_asset/stock_in/stock_in.vue

<template>
	<view class="stock_conatiner">
		<view class="stock_select_container">
			<view class="stock_title">
				<text>选择材质</text>
			</view>
			<view class="stock_list">
				<view class="stock_item" :class="{active: currentStockType==1}" @click="currentStockType=1">
					<image class="stock_icon" src="/static/images/au_icon.png" mode="widthFix"></image>
					<text class="stock_name">黄金</text>
					<text class="stock_num_title">可用库存 </text>
					<text class="stock_num">{{auStock.useful}}g</text>
				</view>
				<view class="stock_item stock_middle" :class="{active: currentStockType==2}"
					@click="currentStockType=2">
					<image class="stock_icon" :src="HTTP_REQUEST_URL_IMG+'pt_icon.png'" mode="widthFix"></image>
					<text class="stock_name">铂金</text>
					<text class="stock_num_title">可用库存 </text>
					<text class="stock_num">{{ptStock.useful}}g</text>
				</view>
				<view class="stock_item" :class="{active: currentStockType==3}" @click="currentStockType=3">
					<image class="stock_icon" src="/static/images/ag_icon.png" mode="widthFix"></image>
					<text class="stock_name">白银</text>
					<text class="stock_num_title">可用库存 </text>
					<text class="stock_num">{{agStock.useful}}g</text>
				</view>
			</view>
		</view>
		<view class="stock_ipt_container">
			<view class="stock_ipt_title">
				<text>补货数量</text>
			</view>
			<input class="stock_ipt" type="digit" v-model="restockWeight" placeholder="请输入补货数量"
				@input="onInputChange" />
		</view>

		<view class="stock_img_upload">
			<view class="stock_img_title">
				<text>上传进货凭证</text>
			</view>
			<view class="upload-img">
				<view class="upload-box-contanier">
					<up-upload :fileList="imageList" uploadIcon="plus" @afterRead="afterRead" @delete="deletePic"
						name="1" multiple :maxCount="1">
						<template #trigger>
							<view class="upload-block">
								<uni-icons size="30" color="#ccc" type="plusempty"></uni-icons>
							</view>
						</template>
					</up-upload>
				</view>
			</view>
			<view class="stock_img_tips">
				<text>支持 JPG、PNG 等常用图片格式，最多可上传 1 张图片，大小不超过 10MB。</text>
			</view>
		</view>

		<view class="stock_bottom_btn">
			<view class="stock_btn" @click="submitClickHandle">确认补货</view>
			<view class="full_screen" v-if="isFullScreen">

			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";

	import {
		restockSubmitAPI,
		fetchMerchantMetalBalanceAPI
	} from '@/api/merchant';
  import { HTTP_REQUEST_URL_IMG } from "@/config/app";

	import {
		useImageUpload
	} from "@/hooks/useImageUpload";
	import {
		useToast
	} from "@/hooks/useToast";
	import {
		Debounce
	} from '@/utils/validate';



	const {
		imageList,
		afterRead,
		deletePic,
		uploadLoading
	} = useImageUpload({
		pid: 14,
		model: "recyle",
	});
	console.log(imageList.value);

	const {
		Toast
	} = useToast();

	const isFullScreen = ref()

	const currentStockType = ref(1)
	const restockWeight = ref()
	
	
	const auStock = ref({
		total: 0,
		useful: 0,
		used: 0,
	})
	const ptStock = ref({
		total: 0,
		useful: 0,
		used: 0,
	})
	const agStock = ref({
		total: 0,
		useful: 0,
		used: 0,
	})

	function onInputChange() {}

	function countDecimalPlaces(num) {
		const stringNum = String(num);
		if (stringNum.includes('.')) {
			return stringNum.split('.')[1].length;
		} else {
			return 0;
		}
	}

	// 使用同步方法获取系统信息
	let systemInfo = uni.getSystemInfoSync();
	console.log(systemInfo);

	// 检查是否为全面屏
	function isFullScreenFn(systemInfo) {
		// 通常判断全面屏可以通过比较屏幕高度和窗口高度来决定
		// 如果屏幕高度大于窗口高度，则可能是刘海屏
		console.log(systemInfo.screenHeight, systemInfo.windowHeight)
		return systemInfo.screenHeight > systemInfo.windowHeight;
	}

	onLoad((params) => {
		// isFullScreen.value = isFullScreenFn(systemInfo)
		console.log(params);
		currentStockType.value = params.type || 1
		const systemInfo = uni.getSystemInfoSync();
		try{
			console.log("Loaded", systemInfo.safeAreaInsets)
			isFullScreen.value = systemInfo.safeAreaInsets.bottom>0
		}catch(error){
			
		}
		
		fetchBalance()
		
		// console.log("Loaded", systemInfo.safeAreaInsets)

	})

	let submitting = false

	function submitClickHandle() {
		if (!restockWeight.value || restockWeight.value <= 0) {
			return Toast({
				title: "请输入补货数量"
			})
		}
		// 小数点后有几位，输入数字只支持两位小数
		const counts = countDecimalPlaces(restockWeight.value);
		if (counts > 2) {
			return Toast({
				title: "补货数量仅支持输入两位小数"
			})
		}
		if (!imageList.value || imageList.value.length == 0) {
			return Toast({
				title: "请上传进货凭证"
			})
		}
		if (submitting) return
		submitting = true;
		try {
			restockSubmitAPI({
				imageUrl: imageList.value[0]?.info?.url || "",
				metalType: currentStockType.value,
				restockWeight: restockWeight.value
			}).then(res => {
				console.log(res);
				Toast({
					title: "补货申请条件成功，正在审核中"
				})
				setTimeout(() => {
					uni.navigateBack()
					// submitting = false;
				}, 500)

			}).catch(() => {
				submitting = false;
			})
		} catch (error) {
			submitting = false;
			//TODO handle the exception
		}

	}
	
	
	/**
	 * 获取当前登录商户金属资产明细
	 */
	function fetchBalance() {
		fetchMerchantMetalBalanceAPI().then(res => {
			console.log(res)
			const {
				data,
				code
			} = res
			console.log(data, code)
			if (code === 200 && data.length > 0) {
				data.forEach(item => {
					console.log(item);
					switch (item.metalType) {
						case 1:
							auStock.value = {
								total: item.totalIncreaseWeight,
								useful: item.availableStock,
								used: item.totalDecreaseWeight
							}
							break;
						case 2:
							ptStock.value = {
								total: item.totalIncreaseWeight,
								useful: item.availableStock,
								used: item.totalDecreaseWeight
							}
							break;
						case 3:
							agStock.value = {
								total: item.totalIncreaseWeight,
								useful: item.availableStock,
								used: item.totalDecreaseWeight
							}
							break;
						default:
							break;
					}
				})
			}
		}).catch(err => {
			console.log(err);
		})
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		height: 100%;
	}

	.stock_conatiner {
		width: 100%;
		padding: 16rpx;
		background-color: #F9F7F0;
	}

	.stock_select_container {
		background-color: #fff;
		width: 100%;
		border-radius: 16rpx;

		.stock_title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 20rpx;
		}

		.stock_list {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: flex-start;
			padding: 0 20rpx 20rpx;
		}

		.stock_item {
			display: flex;
			width: 100rpx;
			flex: 1;
			background-color: #F8F7F1;
			border-radius: 16rpx;
			border: 2rpx solid transparent;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 16rpx;

			&.stock_middle {
				margin: 0 16rpx;
			}

			&.active {
				border-color: #F8C008;
				background-color: rgba(248, 192, 8, 0.10);
			}

			.stock_icon {
				width: 72rpx;
				height: 72rpx;
			}

			.stock_name {
				font-size: 28rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}

			.stock_num_title {
				font-size: 24rpx;
				padding-bottom: 0;
				color: #666;
			}

			.stock_num {
				font-size: 24rpx;
				padding-bottom: 14rpx;
				color: #666;
			}
		}
	}

	.stock_ipt_container {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		margin: 16rpx 0;

		.stock_ipt_title {
			font-size: 28rpx;
			color: #333;
			margin-right: 40rpx;
		}


		.stock_ipt {
			width: 300rpx;
			flex: 1;
			text-align: right;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}
	}

	.stock_img_upload {
		background-color: #fff;
		border-radius: 16rpx;
		width: 100%;
		padding: 20rpx;

		.stock_img_title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.stock_img_tips {
			font-size: 24rpx;
			color: #999;
			line-height: 40rpx;
			margin-top: 10rpx;
		}
	}

	.stock_bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		// min-height: 132rpx;
		padding: 22rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;

		.stock_btn {
			width: 686rpx;
			display: block;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #F8C008;
			border-radius: 16rpx;
			color: #333;
			font-size: 32rpx;
		}
	}

	.upload-box {
		width: 682rpx;
		height: auto;
		background-color: #ffffff;
		box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(0, 0, 0, 0.13);
		border-radius: 20rpx;
		box-sizing: border-box;
		margin-top: 25rpx;
		padding: 40rpx 40rpx;

		.upload-tips {
			font-size: 26rpx;
			color: #000000;
			margin: 30rpx 0;
		}

		.upload-img {
			margin: 30rpx 0;
		}

		.pz-tips {
			text-align: center;
			font-size: 24rpx;
			color: #7c7c7c;
			margin: 40rpx 0;
		}

		.pz-img {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 30rpx 0;

			image {
				width: 138rpx;
				height: 138rpx;
				background-color: #f3f3f3;
				border-radius: 10rpx;
				margin: 15rpx 0;
			}
		}
	}

	.upload-box-contanier {
		.upload-block {
			width: 160rpx;
			height: 160rpx;
			border: 1px dashed #ccc;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #ccc;
			background-color: #F9F7F0;
			font-weight: 700;
			font-size: 26rpx;
		}
	}

	.full_screen {
		width: 750rpx;
		height: 32rpx;
		background-color: #fff;
	}

	::v-deep .u-upload__wrap__preview {
		margin: 0;
	}
</style>