170 lines
3.3 KiB
Vue
170 lines
3.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 顶部Tab切换 -->
|
|
<view class="tab-header">
|
|
<view
|
|
class="tab-item"
|
|
:class="{ 'active': currentTab === 'isbn' }"
|
|
@click="switchTab('isbn')">
|
|
<text>ISBN上传</text>
|
|
</view>
|
|
<view
|
|
class="tab-item"
|
|
:class="{ 'active': currentTab === 'photo' }"
|
|
@click="switchTab('photo')">
|
|
<text>无ISBN上传</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Tab内容区域 -->
|
|
<view class="tab-content">
|
|
<!-- ISBN上传组件 -->
|
|
<isbn-upload
|
|
v-show="currentTab === 'isbn'"
|
|
ref="isbnUpload"
|
|
:selectedWarehouse="selectedWarehouse"
|
|
@camera-status-change="handleCameraStatusChange">
|
|
</isbn-upload>
|
|
|
|
<!-- 无ISBN上传组件 -->
|
|
<photo-upload
|
|
v-show="currentTab === 'photo'"
|
|
ref="photoUpload"
|
|
:selectedWarehouse="selectedWarehouse"
|
|
@camera-status-change="handleCameraStatusChange">
|
|
</photo-upload>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import IsbnUpload from '@/pkgUpload/isbn-upload/index.vue';
|
|
import PhotoUpload from '@/pkgUpload/photo-upload/index.vue';
|
|
|
|
export default {
|
|
name: 'UploadContainer',
|
|
components: {
|
|
'isbn-upload': IsbnUpload,
|
|
'photo-upload': PhotoUpload
|
|
},
|
|
data() {
|
|
return {
|
|
currentTab: 'isbn', // 默认显示ISBN上传
|
|
selectedWarehouse: null,
|
|
isCameraOpen: false
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 获取传递的仓库信息
|
|
if (options.warehouse) {
|
|
try {
|
|
this.selectedWarehouse = JSON.parse(decodeURIComponent(options.warehouse));
|
|
} catch (e) {
|
|
console.error('解析仓库信息失败:', e);
|
|
}
|
|
}
|
|
|
|
// 从本地存储获取仓库信息
|
|
if (!this.selectedWarehouse) {
|
|
this.selectedWarehouse = uni.getStorageSync('selectedWarehouse');
|
|
}
|
|
|
|
// 获取Tab参数
|
|
if (options.tab) {
|
|
this.currentTab = options.tab;
|
|
}
|
|
},
|
|
onShow() {
|
|
// 页面显示时，刷新仓库信息
|
|
const warehouse = uni.getStorageSync('selectedWarehouse');
|
|
if (warehouse) {
|
|
this.selectedWarehouse = warehouse;
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换Tab
|
|
switchTab(tab) {
|
|
// 如果相机正在使用，提示用户
|
|
if (this.isCameraOpen) {
|
|
uni.showToast({
|
|
title: '请先关闭相机',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.currentTab = tab;
|
|
|
|
// 切换时的初始化处理
|
|
this.$nextTick(() => {
|
|
if (tab === 'isbn' && this.$refs.isbnUpload) {
|
|
// 可以在这里调用子组件的方法
|
|
} else if (tab === 'photo' && this.$refs.photoUpload) {
|
|
// 可以在这里调用子组件的方法
|
|
}
|
|
});
|
|
},
|
|
|
|
// 处理相机状态变化
|
|
handleCameraStatusChange(isOpen) {
|
|
this.isCameraOpen = isOpen;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* Tab头部样式 */
|
|
.tab-header {
|
|
display: flex;
|
|
background-color: #ffffff;
|
|
border-bottom: 1rpx solid #e5e5e5;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
padding: 24rpx 0;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-item text {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.tab-item.active text {
|
|
color: #007AFF;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tab-item.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60rpx;
|
|
height: 4rpx;
|
|
background-color: #007AFF;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
/* Tab内容区域 */
|
|
.tab-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|