shuhi-app/pages/index/wms/code-storage-add.vue

<template>
	<view class="container">
		<!-- 书籍信息展示区域 -->
		<view class="book-info-section" v-if="bookInfo.bookName">
			<view class="book-cover">
				<image :src="bookInfo.cover || '/static/img/default-book.png'" class="cover-image" mode="aspectFit" />
			</view>
			<view class="book-details">
				<text class="book-title">{{ bookInfo.bookName }}</text>
				<text class="book-isbn">{{ bookInfo.isbn }}</text>
				<text class="book-publisher">{{ bookInfo.publish }}</text>
				<text class="book-author">{{ bookInfo.author }}</text>
				<text class="book-date">{{ bookInfo.pubDate }}</text>
			</view>
		</view>

		<!-- 上传图片区域 -->
		<view class="upload-section">
			<view class="upload-label">上传图片</view>
			<view class="upload-content">
				<cy-upload :filename="form.imgUrl" @update:filename="form.imgUrl = $event" @success="onUploadSuccess"
					name="imgUrl" :maxCount="1" :max-size="1024 * 1024" url="/activation/bookActivationInfo/uploadImg">
				</cy-upload>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="fixed-bottom">
			<u-button size="large" type="warning" @click="cancelForm" text="取消" class="cancel-button" />
			<u-button size="large" type="success" @click="submitForm" text="提交" class="submit-button" :loading="isSubmitting" :disabled="isSubmitting" />
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app'
	import cyUpload from '@/components/cy-upload/index.vue'

	const form = ref({
		"isbn": "",
		"imgUrl": ""
	});

	// 书籍信息
	const bookInfo = ref({});

	// 图片上传状态
	const isImageUploaded = ref(false);
	const isSubmitting = ref(false);

	const resetForm = () => {
		form.value = {
			isbn: '',
			imgUrl: ''
		};
		isImageUploaded.value = false;
	};

	onLoad(() => {
		resetForm();
		const storedInfo = uni.getStorageSync('bookInfo');
		bookInfo.value = storedInfo || {};
	});

	onShow(() => {
		const storedInfo = uni.getStorageSync('bookInfo');
		if (storedInfo) {
			bookInfo.value = storedInfo;
		}
	});

	onUnload(() => {
		uni.removeStorageSync('bookInfo');
	});

	// 图片上传成功回调
	function onUploadSuccess(result) {
		console.log('图片上传成功:', result);
		isImageUploaded.value = true;
	}

	// 取消操作
	function cancelForm() {
		uni.navigateBack();
	}

	function submitForm() {
		if (isSubmitting.value) return;

		if (!bookInfo.value?.isbn) {
			uni.$u.toast('书籍信息缺失，请重新扫码');
			return;
		}

		if (!form.value.imgUrl || form.value.imgUrl.length === 0) {
			uni.$u.toast('请先上传图片');
			return;
		}

		if (!isImageUploaded.value) {
			uni.$u.toast('图片正在上传中，请稍候');
			return;
		}

		isSubmitting.value = true;
		uni.$u.http.post('/activation/bookActivationInfo/activationAdd', {
			isbn: bookInfo.value.isbn,
			img: form.value.imgUrl[0]
		}).then(res => {
			if (res.code == 200) {
				uni.$u.toast('提交成功')
				let text = '提交成功，请销毁激活码'
				uni.$u.ttsModule.speak(text)
				resetForm();
				uni.navigateBack();
			} else {
				let text = '提交失败：' + (res.msg || '未知错误')
				uni.$u.toast(text)
				uni.$u.ttsModule.speak(text)
			}
		}).catch(() => {
			uni.$u.ttsModule.speak('网络错误')
		}).finally(() => {
			isSubmitting.value = false;
		})
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20px;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 书籍信息展示区域 */
	.book-info-section {
		display: flex;
		background-color: white;
		border-radius: 6px;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}

	.book-cover {
		width: 150rpx;
		/* height: 160rpx; */
		margin-right: 30rpx;
		flex-shrink: 0;
	}

	.cover-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.book-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.book-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.book-isbn {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 6rpx;
	}

	.book-publisher {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 6rpx;
	}

	.book-author {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 6rpx;
	}

	.book-date {
		font-size: 24rpx;
		color: #999;
	}

	/* 上传图片区域 */
	.upload-section {
		background-color: white;
		border-radius: 12px;
		padding: 30rpx;
		margin-bottom: 120rpx;
	}

	.upload-label {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.upload-content {
		display: flex;
		gap: 30rpx;
		align-items: flex-start;
	}

	/* 提示框样式 */
	.tip-box {
		display: flex;
		background-color: #fff3cd;
		border: 1px solid #ffeaa7;
		border-radius: 8px;
		padding: 20rpx;
		flex: 1;
		align-items: flex-start;
	}

	.tip-number {
		background-color: #f39c12;
		color: white;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.tip-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.tip-text {
		font-size: 24rpx;
		color: #856404;
		line-height: 1.4;
		margin-bottom: 8rpx;
	}

	.tip-success {
		font-size: 24rpx;
		color: #155724;
		line-height: 1.4;
		margin-bottom: 8rpx;
	}

	.tip-limit {
		font-size: 24rpx;
		color: #856404;
		line-height: 1.4;
		margin-bottom: 15rpx;
	}

	.tip-author {
		font-size: 20rpx;
		color: #6c757d;
	}
</style>