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">
                </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>