351 lines
7.8 KiB
Vue
351 lines
7.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="mengban" @click="emit('fill')" v-if="show"> </view>
|
|
<view class="qinglingdetails" :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
|
|
<view class="tit">
|
|
<view>请领详情</view>
|
|
</view>
|
|
<view class="itemcan">
|
|
<text>请领区域:{{ uni.getStorageSync('nuName')}}</text>
|
|
<text>请领人:{{uni.getStorageSync('realname')}}</text>
|
|
<text>请领日期:{{times}}</text>
|
|
</view>
|
|
<view class="qlwl">
|
|
请领物料
|
|
</view>
|
|
<scroll-view scroll-y="true" class="wuliaolist">
|
|
<view class="list">
|
|
<view class="card" v-for="(v,i) in list" :key='i'>
|
|
<view class="speitem guodu" >
|
|
<image :src="v.materialInfo.materialImg?serverUrl+v.materialInfo.materialImg:'/static/index/procurement/k.png'"
|
|
mode="aspectFill">
|
|
</image>
|
|
<view class="cardp">
|
|
<view v-if="v.materialInfo.categoryName">{{v.materialInfo.categoryName}}</view>
|
|
<view v-if="v.materialInfo.typeName">{{v.materialInfo.typeName}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="msitem guodu" >
|
|
<view>
|
|
<view>{{v.materialInfo.materialName}}</view>
|
|
</view>
|
|
<view>
|
|
<text style="white-space: nowrap;"> 规格型号: </text>
|
|
<view>{{v.materialInfo.specificationModel}}</view>
|
|
</view>
|
|
<view>
|
|
<view>
|
|
<text>{{v.qlNum?v.qlNum:'--'}}</text>
|
|
<text>请领数量</text>
|
|
</view>
|
|
<view>
|
|
<text>{{v.materialInfo.materialUnits}}</text>
|
|
<text>请领单位</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="plsbuy-bottom">
|
|
<view class="quxiao" @click="emit('fill')">
|
|
取消
|
|
</view>
|
|
<view class="plsbuy-bottom-blue" @click="emit('config')">
|
|
提交请领单
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
show: {
|
|
type: Boolean
|
|
}
|
|
})
|
|
const times = ref('')
|
|
onMounted(()=>{
|
|
let now = new Date();
|
|
let year = now.getFullYear();
|
|
let month = (now.getMonth() + 1)<10?'0'+(now.getMonth() + 1):(now.getMonth() + 1);
|
|
let day = now.getDay()<10?'0'+now.getDay():now.getDay();
|
|
times.value = year+'.'+month+'.'+day
|
|
})
|
|
const wuobj = ref({})
|
|
const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
|
|
const emit = defineEmits([ 'fill' ,'submit','config'])
|
|
const showbox = ref(false)
|
|
watch(()=>props.show,
|
|
()=>{
|
|
console.log(props.list)
|
|
if(props.show==true){
|
|
|
|
setTimeout(()=>{
|
|
showbox.value = true
|
|
},50)
|
|
}else{
|
|
showbox.value = false;
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.qinglingdetails{
|
|
width: 60vw;
|
|
height: 49vw;
|
|
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:8vw;
|
|
left: 20vw;
|
|
z-index: 200;
|
|
padding:1vw 1.4vw;
|
|
.wuliaolist{
|
|
width: 100%;
|
|
height: 27vw;
|
|
.list{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr ;
|
|
padding-left: 0.6vw;
|
|
.card{
|
|
width: 27.5vw;
|
|
height: 13vw;
|
|
background: rgba(247, 247, 247, 0.5);
|
|
border-radius: 1.1vw;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: 1.1vw;
|
|
padding: 1vw;
|
|
.msitem {
|
|
width: 11.5vw;
|
|
height: 100%;
|
|
position: absolute;
|
|
top:0;
|
|
left: 10vw;
|
|
>view {
|
|
margin-top: 0.25vw;
|
|
|
|
&:nth-child(3) {
|
|
width: 100%;
|
|
height: 3.4vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
>view {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
margin-top:1vw;
|
|
white-space: nowrap;
|
|
&:nth-child(1){
|
|
padding-right: 1.7vw;
|
|
align-items: flex-start;
|
|
}
|
|
&:nth-child(2){
|
|
padding-left: 1.7vw;
|
|
align-items: flex-start;
|
|
}
|
|
&:nth-child(1)::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 2.2vw;
|
|
border-right: 1px solid #C9C9C9;
|
|
top: 0.6vw;
|
|
}
|
|
|
|
text {
|
|
&:nth-child(1) {
|
|
font-weight: bold;
|
|
font-size: 1.7vw;
|
|
color: #555555;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
font-weight: 400;
|
|
font-size: 1.1vw;
|
|
color: #999999;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
margin-top: 0.1vw;
|
|
view{
|
|
font-size: 1.4vw;
|
|
color: #888888;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
text {
|
|
font-weight: 400;
|
|
font-size: 1.1vw;
|
|
color: #777777;
|
|
margin-top: 0.25vw;
|
|
}
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
view{
|
|
display: inline-block;
|
|
width: 10vw;
|
|
font-weight: bold;
|
|
font-size: 1.6vw;
|
|
color: #222222;
|
|
height: 3vw;
|
|
padding-top: 1.3vw;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.speitem {
|
|
width: 10vw;
|
|
height: 100%;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top:0;
|
|
left: 0;
|
|
.cardp {
|
|
width:8vw;
|
|
height: 4vw;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
view {
|
|
min-width: 5.5vw;
|
|
height: 1.8vw;
|
|
border-radius: 0.9vw;
|
|
border: 1px solid #D2D2D2;
|
|
margin: 0.5vw 0 0 0.5vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 1vw;
|
|
color: #555555;
|
|
padding: 0 0.25vw;
|
|
}
|
|
}
|
|
|
|
>image {
|
|
width: 8.5vw;
|
|
height: 7.5vw;
|
|
margin: 0.7vw auto 0.25vw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.qlwl{
|
|
width: 100%;
|
|
height: 3vw;
|
|
font-weight: 400;
|
|
font-size: 1.4vw;
|
|
color: #555555;
|
|
}
|
|
.itemcan{
|
|
width: 100%;
|
|
height: 6.6vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text{
|
|
font-weight: 400;
|
|
font-size: 1.4vw;
|
|
color: #888888;
|
|
}
|
|
}
|
|
.tit {
|
|
width: 100%;
|
|
height: 3.5vw;
|
|
line-height: 6vw;
|
|
font-weight: 400;
|
|
font-size: 1.6vw;
|
|
color: #333333;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #E5E5E5;
|
|
}
|
|
}
|
|
.mengban{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 0;
|
|
left: 0;
|
|
background: RGBA(239, 240, 244, 0.55);
|
|
}
|
|
.hei0 {
|
|
height: 0 !important;
|
|
view{
|
|
height: 0 !important;
|
|
}
|
|
}
|
|
.unclass {
|
|
opacity: 0 !important;
|
|
}
|
|
.guodu {
|
|
transition: .4s;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.plsbuy-bottom {
|
|
width: 100%;
|
|
margin-top: 2vw;
|
|
height: 7vw;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 35rpx;
|
|
padding-right: 1vw;
|
|
view{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-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;
|
|
padding: 0 2vw;
|
|
}
|
|
.quxiao{
|
|
background: #EDEDEF;
|
|
}
|
|
.plsbuy-bottom-blue {
|
|
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
|
|
border: 1px solid rgba(3,133,250,0.34);
|
|
color: #0385FA;
|
|
}
|
|
}
|
|
</style>
|