164 lines
3.4 KiB
Vue
164 lines
3.4 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<view class="menu-section">
|
|
<view class="menu-card" @click="scanInventory">
|
|
<view class="card-left">
|
|
<view class="card-icon green">
|
|
<uni-icons type="scan" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="card-info">
|
|
<text class="card-title">扫码盘点</text>
|
|
<text class="card-desc">扫描托盘码进行库存盘点</text>
|
|
</view>
|
|
</view>
|
|
<uni-icons type="right" size="18" color="#ccc"></uni-icons>
|
|
</view>
|
|
|
|
<view class="menu-card reserve-card" @click="showReservedTip">
|
|
<view class="card-left">
|
|
<view class="card-icon gray">
|
|
<uni-icons type="compose" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="card-info">
|
|
<text class="card-title">预留界面</text>
|
|
<text class="card-desc">后续盘点流程启用时接入</text>
|
|
</view>
|
|
</view>
|
|
<uni-icons type="right" size="18" color="#ddd"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="scanCode" class="result-card">
|
|
<view class="result-header">
|
|
<text class="result-title">最近扫描</text>
|
|
<text class="result-code">{{ scanCode }}</text>
|
|
</view>
|
|
<text class="result-desc">扫码盘点明细待业务流程确认后接入。</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
scanCode: ''
|
|
}
|
|
},
|
|
methods: {
|
|
scanInventory() {
|
|
uni.scanCode({
|
|
success: res => {
|
|
this.scanCode = res.result || ''
|
|
this.$modal.showToast('扫码成功')
|
|
}
|
|
})
|
|
},
|
|
showReservedTip() {
|
|
this.$modal.showToast('功能预留')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #f5f7fa;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.page-container {
|
|
padding: 24rpx;
|
|
}
|
|
|
|
.menu-section {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.menu-card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx 28rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.reserve-card {
|
|
opacity: 0.88;
|
|
}
|
|
|
|
.card-left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.card-icon.green {
|
|
background: linear-gradient(135deg, #52c41a, #73d13d);
|
|
}
|
|
|
|
.card-icon.gray {
|
|
background: linear-gradient(135deg, #8c8c8c, #bfbfbf);
|
|
}
|
|
|
|
.card-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.card-desc {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.result-card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 28rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.result-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.result-code {
|
|
font-size: 26rpx;
|
|
color: #52c41a;
|
|
}
|
|
|
|
.result-desc {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
</style>
|