hldy_app/component/storeroom/drawer/gobackhouse/index.vue

716 lines
15 KiB
Vue
Raw Normal View History

2025-05-08 17:34:54 +08:00
<!-- 出入库 -->
<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: 730rpx;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>