<template>
|
<view class="page-container">
|
<!-- 头部导航 -->
|
<u-navbar
|
title="商品信息"
|
:fixed="true"
|
:placeholder="true"
|
bgColor="#ffffff"
|
titleStyle="font-weight: 600; color: #303133; font-size: 32rpx;"
|
autoBack
|
></u-navbar>
|
|
<!-- 表单区域 -->
|
<view class="panel-section">
|
<view class="panel">
|
<view class="panel-header">
|
<u-icon
|
name="grid-fill"
|
size="24"
|
color="#409eff"
|
></u-icon>
|
<text class="panel-title">物料详情</text>
|
</view>
|
|
<u--form
|
labelPosition="left"
|
labelWidth="80"
|
>
|
<u-form-item
|
label="商品编码"
|
borderBottom
|
>
|
<text class="value-text code">{{ mat.matnr }}</text>
|
</u-form-item>
|
|
<u-form-item
|
label="商品名称"
|
borderBottom
|
>
|
<text class="value-text name">{{ mat.maktx }}</text>
|
</u-form-item>
|
|
<u-form-item
|
label="规格"
|
borderBottom
|
>
|
<text class="value-text">{{ mat.specs || '-' }}</text>
|
</u-form-item>
|
|
<u-form-item
|
label="批号"
|
borderBottom
|
>
|
<u--input
|
v-model="mat.batch"
|
placeholder="请输入批号"
|
border="none"
|
clearable
|
></u--input>
|
</u-form-item>
|
|
<u-form-item label="数量">
|
<u-number-box
|
v-model="mat.anfme"
|
:max="99999999"
|
:step="1"
|
@change="changeValue"
|
></u-number-box>
|
</u-form-item>
|
</u--form>
|
</view>
|
</view>
|
|
<!-- 底部操作按钮 -->
|
<view class="bottom-bar">
|
<u-button
|
type="primary"
|
text="确认提取"
|
icon="checkbox-mark"
|
@click="back"
|
customStyle="width: 100%; border-radius: 40rpx;"
|
></u-button>
|
</view>
|
<u-toast ref="uToast"></u-toast>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
mat: {
|
matnr: null,
|
maktx: null,
|
specs: null,
|
batch: null,
|
anfme: 0
|
}
|
}
|
},
|
onLoad() {
|
let that = this
|
// #ifdef APP-NVUE
|
const eventChannel = this.$scope.eventChannel
|
// #endif
|
// #ifndef APP-NVUE
|
const eventChannel = this.getOpenerEventChannel()
|
// #endif
|
|
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
|
eventChannel.on('mat', function (data) {
|
that.mat = data.data
|
that.mat.anfme = 0
|
})
|
},
|
methods: {
|
changeValue(e) {
|
this.mat.anfme = e.value
|
},
|
back() {
|
if (this.mat.anfme === 0) {
|
this.$showToast({ type: 'error', message: '请输入数量' })
|
return
|
}
|
this.getOpenerEventChannel().emit('matList', { data: this.mat })
|
uni.navigateBack()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
page {
|
background-color: #f0f2f5;
|
}
|
|
.page-container {
|
min-height: 100vh;
|
background-color: #f0f2f5;
|
padding-bottom: 140rpx; /* 给底部悬浮按钮留出空间 */
|
}
|
|
/* 面板区域 */
|
.panel-section {
|
padding: 24rpx;
|
}
|
|
.panel {
|
background-color: #ffffff;
|
border-radius: 12rpx;
|
padding: 0 24rpx 24rpx;
|
box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.05);
|
}
|
|
.panel-header {
|
display: flex;
|
align-items: center;
|
padding: 24rpx 0;
|
border-bottom: 1px solid #ebeef5;
|
margin-bottom: 10rpx;
|
}
|
|
.panel-title {
|
font-size: 30rpx;
|
color: #303133;
|
font-weight: 600;
|
margin-left: 12rpx;
|
}
|
|
.value-text {
|
font-size: 28rpx;
|
color: #303133;
|
word-break: break-all;
|
line-height: 1.5;
|
}
|
|
.value-text.code {
|
color: #409eff;
|
font-weight: 600;
|
}
|
|
.value-text.name {
|
font-weight: 500;
|
}
|
|
/* 底部操作栏 */
|
.bottom-bar {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background-color: #fff;
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
display: flex;
|
padding: 20rpx 40rpx;
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
z-index: 99;
|
}
|
</style>
|
