<template> <u-mask class="productModal" :show="isShow" :mask-click-able="false"> <view class="product-con"> <view class="product-main"> <view class="p-title"> <text>[{{infoData.shelfPlaceCode}}]</text> {{infoData.productCode}} </view> <view class="p-info flex align_center"> <text>产品名称</text> {{infoData.productEntity.productName}} </view> <view class="p-info flex align_center"> <text>单位</text> {{infoData.productEntity.unit}} </view> <view class="p-info flex align_center"> <text>可用库存</text> {{infoData.currQty}} </view> <view class="p-info flex align_center"> <text>冻结库存</text> <view class="flex align_center"> {{infoData.freezeQty}} <view v-if="infoData.freezeQty" @click="showDetail"> <text>冻结明细</text> <u-icon name="arrow-right"></u-icon> </view> </view> </view> <view class="p-info flex align_center"> <text>结算价格</text> <view> <text>{{infoData.cost}}元</text> </view> </view> <view class="p-info flex align_center"> <text>实际可用库存</text> <view> <view></view> <u-number-box v-model="infoData.checkQty" :index="infoData.id" :min="0" :max="999999"></u-number-box> </view> </view> </view> <view class="product-footer"> <view class="button-cancel" @click="isShow=false">取消</view> <view class="button-confirm" @click="handleConfirm">确定</view> </view> </view> <!-- 冻结明细 --> <freezeDetailModal :openModal="showModal" :infoData="infoData" @close="showModal=false"></freezeDetailModal> </u-mask> </template> <script> import freezeDetailModal from './freezeDetailModal' export default { components: { freezeDetailModal }, props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, infoData: { tyoe: Object, default: ()=>{ return null } }, }, data() { return { isShow: this.openModal, // 是否打开弹框 showModal: false, } }, methods: { showDetail(){ this.showModal = true }, // 确认 handleConfirm(){ this.$emit('addProduct',{ shelfSn: this.infoData.shelfSn, shelfPlaceSn: this.infoData.shelfPlaceSn, shelfPlaceCode: this.infoData.shelfPlaceCode, productCode: this.infoData.productCode, productSn: this.infoData.productSn, freezeQty: this.infoData.freezeQty, stockQty: this.infoData.currQty, checkQty: this.infoData.checkQty, stockCheckDetailSn: this.infoData.stockCheckDetailSn || undefined, cost: this.infoData.cost }) }, }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') } } } } </script> <style lang="scss" scoped> .productModal{ width: 100%; height: 100vh; font-size: 24upx; .text-c{ text-align: center; } .product-con{ width: 75%; margin: 25vh auto 0; background-color: #fff; border-radius: 24upx; .product-main{ padding: 30upx; max-height: 50vh; overflow: auto; .p-title{ padding: 15upx 20upx; background-color: #ededed; border-radius: 60upx; text-align: center; > text{ margin-right: 15rpx; } } .p-info{ padding: 20upx 10upx; > text{ width: 150upx; color: #666; } > view{ flex-grow:1; display: flex; justify-content: space-between; >view{ > text{ color:#55aaff; } } } border-bottom: 2rpx solid #eee; } } .product-footer{ font-size: 30upx; display: flex; justify-content: space-between; align-items: center; text-align: center; border-top: 1upx solid #E5E5E5; .button-cancel{ color: #999; border-right: 1upx solid #E5E5E5; flex-grow: 1; padding: 20upx 0; } .button-confirm{ color: #2A86F4; flex-grow: 1; padding: 20upx 0; } } } } </style>