book-hi/pages/home/components/InputIsbn.vue

<template>
	<u-popup v-model="showPopup" @close="closePopup" @open="openPopup" mode="center" border-radius="20" width="85%">
		<view class="popup-content">
			<view class="popup-title">请输入图书ISBN编码</view>
			<view class="desc-text">请输入不含“-”符号的13位或10位ISBN编码</view>
			<image src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/barcode.png" alt="ISBN Barcode"
				style="height:200rpx;margin-bottom: 20rpx" mode="heightFix" />
			<u-input v-model="isbn" placeholder="在此输入ISBN编码" class="popup-input" input-align="center"
				:custom-style="{'border-radius': '10rpx',height:'80rpx'}" border />
			<view class="buttons">
				<button @click="cancel">取消</button>
				<button @click="submit">提交</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,
				isbn: '',
			};
		},
		methods: {
			openPopup() {
				this.isbn = '';
				this.showPopup = true;
			},
			closePopup() {
				this.showPopup = false;
			},
			cancel() {
				this.isbn = '';
				this.closePopup();
			},
			submit() {
				if (!this.isbn) {
					uni.showToast({
						title: '请输入ISBN编码',
						icon: 'none'
					});
					return;
				}
				// Handle ISBN submission
				this.$emit('submit', this.isbn)
				this.closePopup();
			},
		},
	};
</script>

<style lang="scss">
	.popup-content {
		text-align: center;
		padding: 40rpx;

		.desc-text {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			margin: 20rpx 0;
		}

		.popup-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #38C148;
		}

		.buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			gap: 30rpx;

			button {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 10rpx;
				border: none;

				&:first-child {
					background-color: #F5F5F5;
					color: #333333;
				}

				&:last-child {
					background-color: #38C148;
					color: #FFFFFF;
				}
			}
		}
	}
</style>