470 lines
10 KiB
Vue
470 lines
10 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 采购 -->
|
|
<view class="box">
|
|
<view class="lefts">
|
|
<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scrolltop" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
|
|
<view class="boxitem" v-for="(v,i) in 66" :key='i' :class="{'yujing':i==1,'active':i==0}">
|
|
<view>纸尿裤-拉拉裤纸尿裤-拉拉裤</view>
|
|
<view>规格型号: 800mm*680mm</view>
|
|
<view>采购单位： 片</view>
|
|
<view>
|
|
<view class="carditem" :class="{'hl':i==0,'yl':i==1,'bj':i>=2}">
|
|
<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill" v-if="i==0"></image>
|
|
<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill" v-if="i==1"></image>
|
|
<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill" v-if="i>=2"></image>
|
|
保洁
|
|
</view>
|
|
<view class="znk">
|
|
<image src="/static/index/warehouse/procurement/znk.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="num">
|
|
<view>500</view>
|
|
<view>库存数量</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 23vw;"></view>
|
|
</scroll-view>
|
|
<view class="mblbg"> </view>
|
|
<view class="fxj">
|
|
<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" rightbuttonname="扫描"/>
|
|
</view>
|
|
</view>
|
|
<view class="rights">
|
|
<view class="shitem">
|
|
<view class="shypk">
|
|
<view>生活用品库</view>
|
|
<view>
|
|
|
|
<view class="swsh guodu" :class="shyp?'act':''" @click="switchshyp">
|
|
<view class="guodu"></view>
|
|
</view>
|
|
<text>
|
|
{{shyp?'启用':'停用'}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="jqry">
|
|
<view class="left tp">
|
|
<image src="/static/index/warehouse/procurement/jqr.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="rigname">
|
|
<view>李树奎</view>
|
|
<view>
|
|
<text>男</text>
|
|
<text>50岁</text>
|
|
<text>13358863266</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="typeitem">
|
|
<view class="toptype">
|
|
<view v-for="v in ['三','二','一']">{{v+'级分类'}}</view>
|
|
</view>
|
|
<view class="scroltype">
|
|
<scroll-view scroll-y="true" scroll-with-animation
|
|
:scroll-top="scroll.scrolltop3" class="scroll-Y" >
|
|
<view :class="scroll.act3==i?'act':''" v-for="(v,i) in ['活血化瘀止痛类','通络止痛类']" @click="typescroll(3,i)">
|
|
{{v}}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<scroll-view scroll-y="true" scroll-with-animation
|
|
:scroll-top="scroll.scrolltop2" class="scroll-Y" >
|
|
<view :class="scroll.act2==i?'act':''" v-for="(v,i) in ['液体制剂','中药制剂','中医辩证']" @click="typescroll(2,i)">
|
|
{{v}}
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<scroll-view scroll-y="true" scroll-with-animation
|
|
:scroll-top="scroll.scrolltop1" class="scroll-Y">
|
|
<view :class="scroll.act1==i?'act':''"
|
|
v-for="(v,i) in
|
|
['中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品',
|
|
'中医中药','生活用品','医疗用品','医疗器械','耗材用品','食材用品','生活用品']"
|
|
@click="typescroll(1,i)">
|
|
{{v}}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, reactive,onBeforeUnmount, computed, nextTick,defineProps } from 'vue';
|
|
const navurl = ref('');
|
|
const scrolltop = ref(0)
|
|
const getblue = ref(false);
|
|
const shyp = ref(false);
|
|
const scroll = reactive({scrolltop1:0,scrolltop2:0,scrolltop3:0,act1:0,act2:0,act3:0});
|
|
|
|
const switchshyp = ( )=>{
|
|
shyp.value = shyp.value?false:true;
|
|
}
|
|
const typescroll = (e: number,i: number)=>{
|
|
scroll['act'+e] = i;
|
|
scroll['scrolltop'+e] = (i -2) * 50;
|
|
|
|
console.log(scroll['scrolltop'+e]);
|
|
console.log(scroll['act'+e])
|
|
}
|
|
const movecard = (type : number) => {
|
|
console.log(type)
|
|
switch (type){
|
|
case 0:
|
|
// 上
|
|
break;
|
|
case 1:
|
|
// →
|
|
break;
|
|
case 2:
|
|
// 下
|
|
break;
|
|
case 3:
|
|
// ←
|
|
break;
|
|
case 4:
|
|
// 扫描
|
|
|
|
break;
|
|
case 5:
|
|
// 返回
|
|
uni.navigateBack()
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.tp{
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.box{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 0vw 2vw 0;
|
|
.rights{
|
|
width: 25vw;
|
|
height:calc(100% - 4vw);
|
|
margin-top: 4vw;
|
|
.typeitem{
|
|
width: 100%;
|
|
height: 54vh;
|
|
.scroltype{
|
|
width: 100%;
|
|
height:calc(54vh - 2vw);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.scroll-Y{
|
|
width: 7vw;
|
|
height:calc(54vh - 2vw);
|
|
view{
|
|
width: 7vw;
|
|
height: 3.8vw;
|
|
background: rgba(255,255,255,.5);
|
|
border-radius: 1.9vw;
|
|
font-weight: 400;
|
|
font-size: .9vw;
|
|
color: #212327;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 1.4vw;
|
|
margin-bottom: .8vw;
|
|
text-align: center;
|
|
}
|
|
.act{
|
|
background: rgba(255,255,255,1) !important;
|
|
color: #0385FA !important;
|
|
}
|
|
}
|
|
}
|
|
.toptype{
|
|
width: 100%;
|
|
height: 2vw;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin: .4vw 0 .4vw 0;
|
|
>view{
|
|
width: 7vw;
|
|
height: 1.9vw;
|
|
background: rgba(255,255,255,.5);
|
|
border-radius: .9vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: .9vw;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
.shitem{
|
|
width: 24.0vw;
|
|
height: 10.3vw;
|
|
background: #E8E9ED;
|
|
border-radius: 1.6vw;
|
|
padding: 1.8vw;
|
|
.jqry{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.left{
|
|
width: 5vw;
|
|
height: 5vw;
|
|
}
|
|
.rigname{
|
|
height: 3vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
&:nth-child(1){
|
|
font-weight: bold;
|
|
font-size: 1.4vw;
|
|
color: #212327;
|
|
}
|
|
&:nth-child(2){
|
|
width: 11vw;
|
|
font-weight: 400;
|
|
font-size: 1vw;
|
|
color: #212327;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
}
|
|
.shypk{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
view{
|
|
&:nth-child(1){
|
|
font-weight: bold;
|
|
font-size: 1.0vw;
|
|
color: #333333;
|
|
}
|
|
&:nth-child(2){
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text{
|
|
font-weight: 400;
|
|
font-size: .8vw;
|
|
color: #666666;
|
|
}
|
|
.guodu{
|
|
transition: .4s;
|
|
-webkit-transform-style: preserve-3d;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.swsh{
|
|
width: 2.7vw;
|
|
height: 1.5vw;
|
|
background: #D6D8DC;
|
|
border-radius: .75vw;
|
|
border: 1px solid #D6D8DC;
|
|
padding: 0.2vw;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
>view{
|
|
width: 1.1vw;
|
|
height: 1.1vw;
|
|
background: #FCFCFD;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.act{
|
|
background: linear-gradient(-69deg, #E1EFFC, #CAE0F9, #D2E9FF) !important;
|
|
border: 1px solid rgba(0, 130, 251, 0.34) !important;
|
|
padding-left: 1.3vw;
|
|
|
|
view{
|
|
background: #0385FA;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.lefts{
|
|
width: 70vw;
|
|
margin-left: 1vw;
|
|
height:calc(100%);
|
|
position: relative;
|
|
.fxj{
|
|
width: 23vw;
|
|
height: 22vw;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 2vw;
|
|
z-index: 11;
|
|
border-radius: 1.6vw;
|
|
}
|
|
.mblbg{
|
|
width: 23vw;
|
|
height: 21vw;
|
|
position: absolute;
|
|
left: -0.2vw;
|
|
bottom: 0.5vw;
|
|
border-radius: 1.6vw;
|
|
filter: blur(15rpx);
|
|
background: RGBA(239, 240, 244, 1);
|
|
z-index: 10;
|
|
}
|
|
.scroll-Y{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.boxitem{
|
|
&:nth-child(1),&:nth-child(2),&:nth-child(3){
|
|
margin-top: 4vw;
|
|
}
|
|
}
|
|
}
|
|
.boxitem{
|
|
width: 22vw;
|
|
height: 19.3vw;
|
|
background: rgba(255,255,255,.7);
|
|
border-radius: 1.6vw;
|
|
margin: 0 1.3vw 1.2vw 0;
|
|
border: 2px dashed #fff;
|
|
display: inline-block;
|
|
padding: 2.3vw;
|
|
position: relative;
|
|
>view{
|
|
.hl{
|
|
color: #0385FA;
|
|
background: #E7F0FB;
|
|
}
|
|
.yl{
|
|
background:#DCF6F3;
|
|
color: #00C6A9;
|
|
}
|
|
.bj{
|
|
background: #E9EBFC;
|
|
color: #727BFF;
|
|
}
|
|
|
|
|
|
>&:nth-child(1){
|
|
font-weight: bold;
|
|
font-size: 1.3vw;
|
|
color: #212327;
|
|
}
|
|
>&:nth-child(2){
|
|
font-weight: 400;
|
|
font-size: 10rpx;
|
|
color: #555555;
|
|
margin-top: .9vw;
|
|
}
|
|
>&:nth-child(3){
|
|
font-weight: 400;
|
|
font-size: 10rpx;
|
|
color: #666666;
|
|
margin-top: .6vw;
|
|
}
|
|
>&:nth-child(4){
|
|
width: 100%;
|
|
height: 10vw;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
}
|
|
.num{
|
|
position: absolute;
|
|
bottom: 2vw;
|
|
left: 2.5vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
view{
|
|
&:nth-child(1){
|
|
font-weight: bold;
|
|
font-size: 2.2vw;
|
|
color: #333333;
|
|
margin-bottom: .6vw;
|
|
}
|
|
&:nth-child(2){
|
|
font-weight: 400;
|
|
font-size: .9vw;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
}
|
|
.znk{
|
|
width: 12vw;
|
|
height: 11.5vw;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.carditem{
|
|
width: 5.8vw;
|
|
height: 2.1vw;
|
|
border-radius: 1.0vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: .9vw;
|
|
margin-top: .8vw;
|
|
image{
|
|
width: 1.4vw;
|
|
height: 1.4vw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.yujing{
|
|
background:rgba(255, 87, 87, 0.095);
|
|
border: 2px solid rgba(255, 102, 107, 0.51) !important;
|
|
box-shadow: 0 0 8px rgba(255, 102, 107, 0.51);
|
|
view{
|
|
.num{
|
|
view{
|
|
&:nth-child(1){
|
|
color: #FF5757 !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.active{
|
|
border: 2px dashed #017DE9 !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
<style>
|
|
page{
|
|
background: RGBA(239, 240, 244, 1);
|
|
}
|
|
</style> |