|
|
@@ -0,0 +1,273 @@
|
|
|
+<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">
|
|
|
+ </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" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ onUnmounted
|
|
|
+} from 'vue';
|
|
|
+import {
|
|
|
+ onLoad,
|
|
|
+ onShow
|
|
|
+} from '@dcloudio/uni-app'
|
|
|
+import cyUpload from '@/components/cy-upload/index.vue'
|
|
|
+
|
|
|
+const form = ref({
|
|
|
+ "isbn": "",
|
|
|
+ "imgUrl": ""
|
|
|
+});
|
|
|
+
|
|
|
+// 书籍信息
|
|
|
+const bookInfo = ref({});
|
|
|
+
|
|
|
+// 图片上传状态
|
|
|
+const isImageUploaded = ref(false);
|
|
|
+
|
|
|
+onShow(() => {
|
|
|
+ // 从本地存储获取书籍信息
|
|
|
+ const storedInfo = uni.getStorageSync('bookInfo');
|
|
|
+ bookInfo.value = storedInfo
|
|
|
+})
|
|
|
+
|
|
|
+// 图片上传成功回调
|
|
|
+function onUploadSuccess(result) {
|
|
|
+ console.log('图片上传成功:', result);
|
|
|
+ isImageUploaded.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+// 取消操作
|
|
|
+function cancelForm() {
|
|
|
+ uni.navigateBack();
|
|
|
+}
|
|
|
+
|
|
|
+function submitForm() {
|
|
|
+ if (!form.value.imgUrl || form.value.imgUrl.length === 0) {
|
|
|
+ uni.$u.toast('请先上传图片');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!isImageUploaded.value) {
|
|
|
+ uni.$u.toast('图片正在上传中,请稍候');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 这里应该调用实际的API接口
|
|
|
+ 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)
|
|
|
+ // 返回上一页
|
|
|
+ uni.navigateBack();
|
|
|
+ } else {
|
|
|
+ let text = '提交失败:' + (res.msg || '未知错误')
|
|
|
+ uni.$u.toast(text)
|
|
|
+ uni.$u.ttsModule.speak(text)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ uni.$u.ttsModule.speak('网络错误')
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// #ifdef APP-PLUS
|
|
|
+const { unregister } = uni.$u.useEventListener((e) => {
|
|
|
+ form.value.isbn = e.barcode;
|
|
|
+ queryBookInfo(e.barcode);
|
|
|
+});
|
|
|
+// #endif
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ unregister();
|
|
|
+ // #endif
|
|
|
+});
|
|
|
+</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>
|