244 lines
4.8 KiB
Vue
244 lines
4.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="mengban" @click="emit('fill')" v-if="show"> </view>
|
|
<view class="card" :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
|
|
<view class="tit">物料详情</view>
|
|
<view class="cont">
|
|
<view class="leftbox">
|
|
<image :src="objtake.materialImg?serverUrl+objtake.materialImg:'/static/index/procurement/k.png'" mode="aspectFill"/>
|
|
<view>
|
|
<text>耗材用品</text>
|
|
<text>复健用品</text>
|
|
</view>
|
|
</view>
|
|
<view class="youcont">
|
|
<view>{{objtake.materialName}}</view>
|
|
<view>
|
|
<view>
|
|
物料编码
|
|
<text>{{objtake.materialNo}}</text>
|
|
</view>
|
|
<view>
|
|
规格型号
|
|
<text style="white-space: nowrap;">{{objtake.specificationModel}}</text>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view>
|
|
请领数量
|
|
<text>{{objtake.qlNum?objtake.qlNum:'--'}}</text>
|
|
</view>
|
|
<view>
|
|
请领单位
|
|
<text>{{objtake.materialUnits}}</text>
|
|
</view>
|
|
<view>
|
|
累计请领
|
|
<text>{{objtake.materialNo}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="plsbuy-bottom">
|
|
<view class="quxiao" @click="emit('fill')">
|
|
关闭
|
|
</view>
|
|
<!-- <view class="plsbuy-bottom-blue" @click="closeIt">
|
|
确定
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
|
const props = defineProps({
|
|
objtake: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
show: {
|
|
type: Boolean
|
|
}
|
|
})
|
|
const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
|
|
const emit = defineEmits([ 'fill' ,'qingling'])
|
|
const showbox = ref(false)
|
|
watch(()=>props.show,
|
|
()=>{
|
|
console.log(props.objtake)
|
|
if(props.show==true){
|
|
setTimeout(()=>{
|
|
showbox.value = true
|
|
},50)
|
|
}else{
|
|
showbox.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.plsbuy-bottom {
|
|
width: 100%;
|
|
margin-top: 3vw;
|
|
height: 7vw;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 35rpx;
|
|
padding-right: 3vw;
|
|
view{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 9.1vw;
|
|
height: 3.8vw;
|
|
color: rgba(92, 121, 146, 1);
|
|
border-radius:1.9vw;
|
|
font-size: 1.8vw;
|
|
border: 1px solid #EDEDEF;
|
|
margin-left: 1vw;
|
|
}
|
|
.quxiao{
|
|
background: #EDEDEF;
|
|
}
|
|
.plsbuy-bottom-blue {
|
|
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
|
|
border: 1px solid rgba(3,133,250,0.34);
|
|
color: #0385FA;
|
|
}
|
|
}
|
|
.card {
|
|
width: 53vw;
|
|
height: 29vw;
|
|
background: rgba(255, 255, 255, 0.98);
|
|
box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
|
|
border-radius: 1.6vw;
|
|
position: fixed;
|
|
top: 16vw;
|
|
left: 23vw;
|
|
z-index: 200;
|
|
|
|
.cont {
|
|
width: 100%;
|
|
height: 14vw;
|
|
padding: 0 3vw;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
.leftbox {
|
|
width: 14.2vw;
|
|
height: 100%;
|
|
border-right: 2px solid #E5E5E5;
|
|
|
|
view {
|
|
width: 100%;
|
|
margin-top: 0.6vw;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
text {
|
|
width: 6vw;
|
|
height: 2vw;
|
|
border-radius: 1vw;
|
|
border: 1px solid #D2D2D2;
|
|
font-weight: 400;
|
|
font-size: 1.1vw;
|
|
color: #555555;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
>image {
|
|
width: 10.2vw;
|
|
height: 10.2vw;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.youcont {
|
|
width: 32vw;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
>view {
|
|
padding: 0 1.8vw;
|
|
&:nth-child(2),
|
|
&:nth-child(3) {
|
|
width: 100%;
|
|
height: 3.6vw;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: 1.8vw;
|
|
|
|
>view {
|
|
width: 33.3%;
|
|
font-weight: 400;
|
|
font-size: 1.1vw;
|
|
color: #888888;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
text {
|
|
font-weight: 400;
|
|
font-size: 1.4vw;
|
|
color: #222222;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
width: 100%;
|
|
height: 1.8vw;
|
|
font-weight: bold;
|
|
font-size: 1.6vw;
|
|
color: #222222;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
line-height: 1.8vw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tit {
|
|
width: 100%;
|
|
height: 6vw;
|
|
line-height: 6vw;
|
|
padding-left: 2.2vw;
|
|
font-weight: 400;
|
|
font-size: 1.6vw;
|
|
color: #333333;
|
|
}
|
|
}
|
|
.hei0 {
|
|
height: 0 !important;
|
|
view{
|
|
height: 0 !important;
|
|
}
|
|
}
|
|
.unclass {
|
|
opacity: 0 !important;
|
|
}
|
|
.guodu {
|
|
transition: .4s;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.mengban{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 0;
|
|
left: 0;
|
|
background: RGBA(239, 240, 244, 0.55);
|
|
}
|
|
</style> |