135 lines
2.7 KiB
Vue
135 lines
2.7 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- 上传入口 -->
|
||
<view class="upload-entrance">
|
||
<view class="entrance-title">请选择上传方式</view>
|
||
<view class="entrance-cards">
|
||
<view class="entrance-card" @click="navigateToUpload('isbn')">
|
||
<view class="card-icon isbn-icon">📚</view>
|
||
<view class="card-content">
|
||
<text class="card-title">ISBN-上传</text>
|
||
<text class="card-desc">扫描或输入ISBN快速上架</text>
|
||
</view>
|
||
<view class="card-arrow">›</view>
|
||
</view>
|
||
<view class="entrance-card" @click="navigateToUpload('photo')">
|
||
<view class="card-icon photo-icon">📷</view>
|
||
<view class="card-content">
|
||
<text class="card-title">无ISBN-上传</text>
|
||
<text class="card-desc">拍照识别书籍信息上架</text>
|
||
</view>
|
||
<view class="card-arrow">›</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
options: {
|
||
enablePullDownRefresh: false,
|
||
backgroundTextStyle: 'dark'
|
||
},
|
||
data() {
|
||
return {
|
||
selectedWarehouse: null,
|
||
}
|
||
},
|
||
onShow() {
|
||
// 每次页面显示时都重新获取仓库
|
||
this.selectedWarehouse = uni.getStorageSync("selectedWarehouse") || null;
|
||
},
|
||
methods: {
|
||
// 导航到上传页面
|
||
navigateToUpload(type) {
|
||
uni.navigateTo({
|
||
url: '/pkgUpload/upload-container/index?tab=' + type
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.page-container {
|
||
padding: 30rpx;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.upload-entrance {
|
||
padding: 40rpx 0;
|
||
}
|
||
|
||
.entrance-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.entrance-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.entrance-card {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 40rpx 30rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.entrance-card:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.card-icon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 48rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.isbn-icon {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.photo-icon {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
}
|
||
|
||
.card-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.card-arrow {
|
||
font-size: 48rpx;
|
||
color: #ccc;
|
||
font-weight: 300;
|
||
}
|
||
</style>
|