716 lines
15 KiB
Vue
716 lines
15 KiB
Vue
<!-- 出入库 -->
|
||
<template>
|
||
<view class="draw-all">
|
||
<view class="draw-title">
|
||
<view class="draw-flex">
|
||
<view class="draw-title-gun"></view>
|
||
<view class="draw-title-font">出入库</view>
|
||
</view>
|
||
</view>
|
||
<view class="draw-contain">
|
||
<view class="swiper-card">
|
||
<view class="swiper-card-top">
|
||
<image class="swiper-card-top-img" :src="`/static/index/project3.png`" />
|
||
<view class="swiper-card-top-card">
|
||
<view class="swiper-card-top-card-weight">
|
||
<view class="weight-left">
|
||
纸尿裤-拉拉裤
|
||
</view>
|
||
<view class="weight-right" style="margin-right: 30rpx;">
|
||
当前库存：96
|
||
</view>
|
||
</view>
|
||
<view class="swiper-card-top-card-noral" style="margin-top: 20rpx;">
|
||
<view class="swiper-all-flex">
|
||
<view class="swiper-gray">
|
||
物料编码：
|
||
</view>
|
||
<view class="swiper-black">
|
||
ZHYP044
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="swiper-card-top-card-noral" style="margin-top: 20rpx;">
|
||
<view class="swiper-all-flex">
|
||
<view class="swiper-gray">
|
||
规格型号：
|
||
</view>
|
||
<view class="swiper-black">
|
||
800mm*690mm
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="select-width">
|
||
<view class="select-blue" @click="blueshow = !blueshow">
|
||
<image class="select-blue-img" src="/static/index/warehouseCard/selectblue.png" />
|
||
<view class="select-blue-font">
|
||
{{blueValue}}
|
||
</view>
|
||
<div class="triangle-down"></div>
|
||
<!-- 下拉列表：用 open/close 类触发动画 -->
|
||
<view class="dropdown-list" v-show="blueshow" :class="blueshow ? 'open' : 'close'" @click.stop>
|
||
<view v-for="(item, i) in bluelist" :key="i" class="dropdown-item"
|
||
:class="item.label == blueValue ? 'active' : ''"
|
||
@click="blueValue = item.label;blueshow=false">
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="select-white" @click="whiteshow = !whiteshow">
|
||
<image class="select-blue-img" src="/static/index/warehouseCard/selectwhite.png" />
|
||
<view class="select-blue-font">
|
||
{{whiteValue}}
|
||
</view>
|
||
<div class="triangle-down"></div>
|
||
<view class="dropdown-list" v-show="whiteshow" :class="whiteshow ? 'open' : 'close'" @click.stop>
|
||
<view v-for="(item, i) in whitelist" :key="i" class="dropdown-item"
|
||
:class="item.label == whiteValue ? 'active' : ''"
|
||
@click="whiteValue = item.label;whiteshow=false">
|
||
{{ item.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="scroll-view">
|
||
<view class="scroll-view-title">
|
||
<view class="amount">
|
||
总计:100笔
|
||
</view>
|
||
<view class="outhouse">
|
||
<image class="outhouse-img" src="/static/index/warehouseCard/orangeicon.png" />
|
||
<view class="outhouse-left">
|
||
出库:
|
||
</view>
|
||
<view class="outhouse-right">
|
||
50笔
|
||
</view>
|
||
</view>
|
||
<view class="inhouse">
|
||
<image class="inhouse-img" src="/static/index/warehouseCard/blueicon.png" />
|
||
<view class="inhouse-left">
|
||
出库:
|
||
</view>
|
||
<view class="inhouse-right">
|
||
50笔
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y :scroll-top="topNumber" @scroll="movedown" style="height: 770rpx;margin-top: 2%;"
|
||
:show-scrollbar="false">
|
||
<view class="swiper-flex">
|
||
<view v-for="(item,index) in manyCard" :key="index">
|
||
<view class="swiper-card-spec">
|
||
<view class="swiper-card-top">
|
||
<view class="swiper-card-top-card">
|
||
<view class="swiper-card-top-card-weight">
|
||
<view class="weight-left">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="weight-right" style="color: #59657A ;font-weight: 400;">
|
||
摘要:服务指令
|
||
</view>
|
||
</view>
|
||
<view class="swiper-card-top-card-noral">
|
||
<view class="swiper-all-flex">
|
||
<view class="swiper-gray">
|
||
服务指令:生活用品请领
|
||
</view>
|
||
|
||
</view>
|
||
<view class="swiper-all-flex">
|
||
<view class="swiper-gray" :style="item.add<0?{color:`#FF6600`}:{color:`#008AFF`}"
|
||
style="font-weight: 700;font-size: 35rpx;">
|
||
{{item.add >0 ? "+" + item.add : item.add }}
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="swiper-card-top-card-noral">
|
||
<view class="swiper-all-flex">
|
||
<!-- <view class="swiper-gray">
|
||
采购单位：
|
||
</view> -->
|
||
<view class="swiper-black">
|
||
2025-02-13 17:29:18
|
||
</view>
|
||
</view>
|
||
<view class="swiper-all-flex">
|
||
<view class="swiper-black">
|
||
库存：
|
||
</view>
|
||
<view class="swiper-black">
|
||
96
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="swiper-card-down">
|
||
<view class="down-left">
|
||
<view class="down-left-weight">
|
||
供应商：
|
||
</view>
|
||
<view class="down-left-font">
|
||
长春市永佳利商贸有限公司1
|
||
</view>
|
||
</view>
|
||
<image class="delete-img" :src="`/static/index/deleteIt.png`" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- <view class="down-contain">
|
||
<image class="down-contain-img" src="/static/index/warehouseCard/arrow.png" @click="movedownone" />
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <u-select v-model="blueshow" :list="bluelist" @confirm="blueconfirm"></u-select>
|
||
<u-select v-model="whiteshow" :list="whitelist" @confirm="whiteconfirm"></u-select> -->
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, defineEmits, watch } from 'vue';
|
||
const note = ref("");
|
||
const topNumber = ref(0);
|
||
const topNumberSave = ref(0);
|
||
const blueshow = ref(false);
|
||
const whiteshow = ref(false);
|
||
const blueValue = ref("全部");
|
||
const whiteValue = ref("日期从近到远");
|
||
const bluelist = ref([{
|
||
value: 0,
|
||
label: '全部'
|
||
},
|
||
{
|
||
value: 1,
|
||
label: '出库'
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '入库'
|
||
},
|
||
])
|
||
const whitelist = ref([{
|
||
value: 0,
|
||
label: '日期从近到远'
|
||
},
|
||
{
|
||
value: 1,
|
||
label: '日期从远到近'
|
||
},
|
||
])
|
||
const manyCard = ref([
|
||
{
|
||
name:'生活用品请领',
|
||
add:-20
|
||
},
|
||
{
|
||
name:'采购入库',
|
||
add:10
|
||
},
|
||
{
|
||
name:'生活用品请领',
|
||
add:-20
|
||
},
|
||
{
|
||
name:'生活用品请领',
|
||
add:20
|
||
},
|
||
{
|
||
name:'生活用品请领',
|
||
add:-20
|
||
},
|
||
{
|
||
name:'生活用品请领',
|
||
add:100
|
||
},
|
||
{
|
||
name:'生活用品请领',
|
||
add:9999
|
||
},
|
||
])
|
||
const blueconfirm = (res) => {
|
||
// console.log("????",res)
|
||
blueValue.value = res[0].label
|
||
}
|
||
const whiteconfirm = (res) => {
|
||
// console.log("????",res)
|
||
whiteValue.value = res[0].label
|
||
}
|
||
const movedown = (res) => {
|
||
topNumberSave.value = res.detail.scrollTop.toFixed(2)
|
||
}
|
||
|
||
const movedownone = () => {
|
||
topNumberSave.value = Number(topNumberSave.value) + 115;
|
||
topNumber.value = topNumberSave.value
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
// 抽屉的css
|
||
.draw-all {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: url("/static/index/pink.png") center/cover, rgba(255, 255, 255, 0.2);
|
||
background-blend-mode: screen;
|
||
isolation: isolate;
|
||
/* 白色背景透明度为 10% */
|
||
// background-image: url('/static/index/mountain.png');
|
||
// background-blend-mode: screen;
|
||
// background-position: 30% 50%;
|
||
border-top-left-radius: 80rpx;
|
||
border-bottom-left-radius: 80rpx;
|
||
overflow: hidden;
|
||
|
||
.draw-flex {
|
||
display: flex;
|
||
}
|
||
|
||
// position: relative;
|
||
.draw-title {
|
||
width: 100%;
|
||
height: 140rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 68rpx;
|
||
|
||
.draw-title-gun {
|
||
margin-left: 60rpx;
|
||
margin-right: 20rpx;
|
||
width: 13rpx;
|
||
height: 50rpx;
|
||
background: linear-gradient(to bottom, #04BCED, #0160CE);
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.draw-title-font {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.draw-contain {
|
||
width: 100%;
|
||
height: calc(100vh - 140rpx);
|
||
}
|
||
}
|
||
|
||
/* 弹窗遮罩层 */
|
||
.modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
/* 半透明背景 */
|
||
display: flex;
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
justify-content: center;
|
||
/* 水平居中 */
|
||
}
|
||
|
||
/* 弹窗内容，宽高占屏幕70% */
|
||
.modal-content {
|
||
width: 80vw;
|
||
height: 80vh;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.draw-blue {
|
||
color: #0090FF;
|
||
font-size: 30rpx;
|
||
margin-right: 45rpx;
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
.swiper-card {
|
||
margin: 0 0 30rpx 30rpx;
|
||
margin-left: 40rpx;
|
||
width: 960rpx;
|
||
height: 250rpx;
|
||
border: 2rpx solid #fff;
|
||
border-radius: 30rpx;
|
||
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
||
background-blend-mode: screen;
|
||
isolation: isolate;
|
||
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
|
||
overflow: hidden;
|
||
|
||
.swiper-card-top {
|
||
width: 100%;
|
||
height: 270rpx;
|
||
display: flex;
|
||
|
||
.swiper-card-top-img {
|
||
width: 250rpx;
|
||
height: 200rpx;
|
||
margin-top: 30rpx;
|
||
margin-left: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.swiper-card-top-card {
|
||
// background-color: #fff;
|
||
margin-left: 40rpx;
|
||
width: calc(100% - 40rpx);
|
||
height: 100%;
|
||
|
||
.swiper-card-top-card-weight {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 35rpx;
|
||
|
||
.weight-left {
|
||
font-weight: 700;
|
||
font-size: 35rpx;
|
||
}
|
||
|
||
.weight-right {
|
||
color: #008AFF;
|
||
font-weight: 700;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.swiper-card-top-card-noral {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.swiper-card-spec {
|
||
margin: 0 0 30rpx 30rpx;
|
||
margin-left: 40rpx;
|
||
width: 890rpx;
|
||
height: 200rpx;
|
||
border: 2rpx solid #fff;
|
||
border-radius: 30rpx;
|
||
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.7);
|
||
background-blend-mode: screen;
|
||
isolation: isolate;
|
||
box-shadow: 5rpx 5rpx 10rpx 0rpx #839fcc;
|
||
overflow: hidden;
|
||
|
||
.swiper-card-top {
|
||
width: 100%;
|
||
height: 270rpx;
|
||
display: flex;
|
||
|
||
.swiper-card-top-img {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-top: 30rpx;
|
||
margin-left: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.swiper-card-top-card {
|
||
// background-color: #fff;
|
||
// margin-left: 40rpx;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiper-card-top-card-weight {
|
||
width: 100%;
|
||
display: flex;
|
||
padding: 0 40rpx;
|
||
// justify-content: space-between;
|
||
justify-content: space-between;
|
||
margin-top: 15rpx;
|
||
|
||
// background-color: #fff;
|
||
.weight-left {
|
||
font-weight: 700;
|
||
font-size: 35rpx;
|
||
}
|
||
|
||
.weight-right {
|
||
color: #008AFF;
|
||
font-weight: 700;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.swiper-card-top-card-noral {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: 0 40rpx;
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.swiper-flex {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-left: 0rpx;
|
||
|
||
|
||
}
|
||
|
||
.swiper-all-flex {
|
||
display: flex;
|
||
}
|
||
|
||
.swiper-gray {
|
||
color: #596278;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.swiper-black {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.delete-img {
|
||
width: 40rpx;
|
||
height: 45rpx;
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
|
||
.scroll-view {
|
||
height: 930rpx;
|
||
width: calc(100% - 80rpx);
|
||
margin-left: 40rpx;
|
||
border-radius: 40rpx;
|
||
border: 2rpx solid #fff;
|
||
box-shadow: 4rpx 8rpx 16rpx 4rpx #839fcc;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scroll-view-title {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background: linear-gradient(to right, #E3EAFF, #F4ECFF, #DCE4FF);
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
|
||
.amount {
|
||
// font-weight: 500;
|
||
}
|
||
|
||
.outhouse {
|
||
display: flex;
|
||
|
||
.outhouse-img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 8rpx;
|
||
margin-top: -6rpx;
|
||
}
|
||
|
||
.outhouse-left {
|
||
color: #FF6600;
|
||
}
|
||
|
||
.outhouse-right {
|
||
margin-left: 7rpx;
|
||
|
||
}
|
||
}
|
||
|
||
.inhouse {
|
||
display: flex;
|
||
|
||
.inhouse-img {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 8rpx;
|
||
margin-top: -2rpx;
|
||
}
|
||
|
||
.inhouse-left {
|
||
color: #008FFF;
|
||
}
|
||
|
||
.inhouse-right {
|
||
margin-left: 7rpx;
|
||
// font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.select-width {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.select-blue {
|
||
border: 1rpx solid #fff;
|
||
width: 180rpx;
|
||
height: 70rpx;
|
||
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
||
border-radius: 15rpx;
|
||
margin-right: 20rpx;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.select-blue-img {
|
||
width: 27rpx;
|
||
height: 27rpx;
|
||
}
|
||
|
||
.select-blue-font {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 定义一个向下的小三角 */
|
||
.triangle-down {
|
||
width: 0;
|
||
/* 元素本身无宽高 */
|
||
height: 0;
|
||
/* 元素本身无宽高 */
|
||
|
||
/* 左右边框透明，形成斜边 */
|
||
border-left: 8rpx solid transparent;
|
||
border-right: 8rpx solid transparent;
|
||
|
||
/* 顶部边框着色，形成底边，三角指向下 */
|
||
border-top: 8rpx solid #fff;
|
||
/* 这里的 #000 可替换成任何颜色 */
|
||
}
|
||
}
|
||
|
||
.select-white {
|
||
border: 1rpx solid #fff;
|
||
width: 280rpx;
|
||
height: 70rpx;
|
||
background: linear-gradient(to bottom, #EEF5FF, #D4DEFC);
|
||
border-radius: 15rpx;
|
||
margin-right: 40rpx;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.select-blue-img {
|
||
width: 27rpx;
|
||
height: 27rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.select-blue-font {
|
||
color: #19233B;
|
||
}
|
||
|
||
/* 定义一个向下的小三角 */
|
||
.triangle-down {
|
||
width: 0;
|
||
/* 元素本身无宽高 */
|
||
height: 0;
|
||
/* 元素本身无宽高 */
|
||
|
||
/* 左右边框透明，形成斜边 */
|
||
border-left: 8rpx solid transparent;
|
||
border-right: 8rpx solid transparent;
|
||
|
||
/* 顶部边框着色，形成底边，三角指向下 */
|
||
border-top: 8rpx solid #19233B;
|
||
/* 这里的 #000 可替换成任何颜色 */
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.down-contain {
|
||
width: 100%;
|
||
height: 75rpx;
|
||
// background-color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.down-contain-img {
|
||
height: 30rpx;
|
||
width: 30rpx;
|
||
}
|
||
}
|
||
|
||
/* 列表定位和初始样式 */
|
||
.dropdown-list {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
border: 2rpx solid #ccc;
|
||
box-sizing: border-box;
|
||
max-height: 0;
|
||
z-index: 999;
|
||
border-radius: 15rpx;
|
||
/* 初始收起 */
|
||
}
|
||
|
||
/* 列表项默认与选中样式 */
|
||
.dropdown-item {
|
||
padding: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
color: #000;
|
||
}
|
||
|
||
.dropdown-item.active {
|
||
color: #016AD1;
|
||
background-color: #c9e8ff;
|
||
}
|
||
|
||
/* 定义下拉动画：从 max-height:0 到 300px */
|
||
@keyframes slideDown {
|
||
from {
|
||
max-height: 0;
|
||
}
|
||
|
||
to {
|
||
max-height: 600rpx;
|
||
}
|
||
}
|
||
|
||
/* 定义收起动画：与 slideDown 相反 */
|
||
@keyframes slideUp {
|
||
from {
|
||
max-height: 600rpx;
|
||
}
|
||
|
||
to {
|
||
max-height: 0;
|
||
}
|
||
}
|
||
|
||
/* 根据 show 状态触发动画 */
|
||
.open {
|
||
animation: slideDown 0.3s ease forwards;
|
||
}
|
||
|
||
.close {
|
||
animation: slideUp 0.3s ease forwards;
|
||
}
|
||
</style> |