hldy_app/component/storeroom/components/plsbuy.vue

488 lines
10 KiB
Vue
Raw Normal View History

2025-05-08 17:34:54 +08:00
<template>
<view class="plsbuy-contain">
<view class="plsbuy-title">
<image class="plsbuy-title-img" :src="`/static/index/project3.png`" />
<view class="plsbuy-title-font">
<view class="plsbuy-title-weight">纸尿裤-拉拉裤</view>
<view class="plsbuy-title-flex">
<view class="popup-right-font-contain" style="width: 75%;">
<view class="popup-font-left">
规格型号
</view>
<view class="popup-font-right">
800mm*690mm
</view>
</view>
<view class="popup-right-font-contain">
<view class="popup-font-left">
采购单位
</view>
<view class="popup-font-right">
</view>
</view>
</view>
<view class="plsbuy-title-flex">
<view class="popup-right-font-contain" style="width: 75%;">
<view class="popup-font-left">
库存上限
</view>
<view class="popup-font-right">
1000
</view>
</view>
<view class="popup-right-font-contain">
<view class="popup-font-left">
库存下限
</view>
<view class="popup-font-right">
10
</view>
</view>
</view>
<view class="plsbuy-title-flex">
<view class="popup-right-font-contain">
<view class="popup-font-left">
库存数量
</view>
<view class="popup-font-right">
50
</view>
</view>
</view>
</view>
</view>
<view class="plsbuy-card">
<scroll-view scroll-y :scroll-top="moveTop" style="height: 100%;width: 1150rpx;" :show-scrollbar="true">
<view v-for="(item, index) in shopArray" :key="index" class="plsbuy-card-heng"
:class="{ 'slide-out': item.sliding }">
<view class="card-flex">
<image class="plsbuy-card-img" src="/static/index/subtract.png" @click="startRemove(index)" />
<view class="plsbuy-weight">供应商</view>
<view class="plsbuy-font-right">{{ item.name }}</view>
</view>
<view class="card-flex">
<view class="plsbuy-right-weight">采购数量</view>
<view :class="item.change===1?`plsbuy-jian-target`:`plsbuy-jian`" @click="subtractNumber(item)">
-</view>
<view :class="saveIndex==index ? `plsbuy-number-target` :`plsbuy-number`" @click="openRightCal(item.many,index)">{{ item.many }}</view>
<view :class="item.change===2?`plsbuy-jia-target`:`plsbuy-jia`" @click="addNumber(item)">+
</view>
</view>
</view>
</scroll-view>
</view>
<view class="plsbuy-amount">
<view class="plsbuy-amount-font">
合计
</view>
<view class="plsbuy-amount-red">
100
</view>
</view>
<view class="plsbuy-bottom">
<view class="plsbuy-bottom-blue" @click="addNewShop">
新增供应商
</view>
<view class="plsbuy-bottom-blue" @click="closeIt">
确认
</view>
<view class="plsbuy-bottom-white" @click="closeIt">
取消
</view>
</view>
</view>
</template>
<script setup lang="ts">
import {
ref,
onMounted,
onBeforeUnmount,
computed,
nextTick,
defineProps,
watch
} from 'vue';
const emit = defineEmits(['closeIt', 'openRight', 'closeRight'])
const props = defineProps({
saveIndex: {
type: Number,
required: true,
},
changeNumber: {
type: Number,
required: true,
},
});
watch(
() => props.changeNumber,
() => {
shopArray.value[props.saveIndex].many = props.changeNumber;
}
)
const calNumber = ref(50);
const moveTop = ref(0);
const shopName = ref({
name: "长春市永佳利商贸有限公司",
many: 0,
change: 0
})
const shopArray = ref([{
name: "长春市永佳利商贸有限公司",
many: 9999,
change: 0
},
{
name: "长春市永佳利商贸有限公司",
many: 0,
change: 0
},
{
name: "长春市永佳利商贸有限公司",
many: 0,
change: 0
},
]);
const subtractNumber = (item) => {
closeRight()
item.many && item.many--
item.change = 1
setTimeout(() => {
item.change = 0
}, 300)
}
const addNumber = (item) => {
closeRight()
item.many < 9999 && item.many++
item.change = 2
setTimeout(() => {
item.change = 0
}, 300)
}
const addNewShop = () => {
closeRight()
if (canDo.value) {
shopArray.value.push(JSON.parse(JSON.stringify(shopName.value)))
//他的破组件是监听实现的,所以不这样写,他第二次不刷新
moveTop.value = 998;
nextTick(() => {
moveTop.value = 999;
})
}
}
const closeIt = () => {
closeRight()
emit('closeIt')
};
const closeRight = () => {
emit('closeRight')
}
const openRightCal = (num : number, index : number) => {
emit('openRight', num, index)
}
const canDo = ref(true);
/** 点击「删除」按钮,只把 sliding 设为 true触发动画 */
function startRemove(idx) {
closeRight()
if (canDo.value) {
canDo.value = false;
shopArray.value[idx].sliding = true; // 数据驱动触发动画 :contentReference[oaicite:0]{index=0}
setTimeout(() => {
shopArray.value.splice(idx, 1);
canDo.value = true;
}, 400)
}
}
</script>
<style lang="less" scoped>
::v-deep ::-webkit-scrollbar {
/* 滚动条整体样式 */
display: block !important;
width: 7rpx;
}
::v-deep ::-webkit-scrollbar-thumb {
/* 滚动条里面小方块 */
border-radius: 5rpx !important;
box-shadow: inset 0 0 1rpx rgba(0, 0, 0, 0.2) !important;
background-color: #CCCCCC !important;
}
.plsbuy-contain {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
background: url("/static/index/newpink.png") center/cover;
.plsbuy-title {
background: url("/static/index/blueMountain.png") center/cover, rgba(255, 255, 255, 0.8);
background-blend-mode: screen;
isolation: isolate;
width: 1120rpx;
height: 250rpx;
margin-top: 50rpx;
border-radius: 30rpx;
box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
display: flex;
.plsbuy-title-img {
height: 220rpx;
width: 220rpx;
margin-top: 10rpx;
margin-left: 20rpx;
margin-right: 80rpx;
}
}
.plsbuy-card {
margin-top: 20rpx;
margin-right: 35rpx;
width: calc(100% - 70rpx);
border-radius: 30rpx;
position: relative;
height: 300rpx;
/* 虚化覆盖层 */
.blur-overlay {
position: absolute;
bottom: 0rpx;
left: 0;
width: 100%;
height: 40rpx;
/* 背景模糊效果 */
backdrop-filter: blur(3rpx);
-webkit-backdrop-filter: blur(3rpx);
z-index: 2;
pointer-events: none;
}
.plsbuy-card-heng {
display: flex;
align-items: center;
justify-content: space-between;
height: 100rpx;
.plsbuy-card-img {
width: 40rpx;
height: 40rpx;
margin: 0 20rpx;
}
}
}
}
.plsbuy-title-font {
height: 100%;
width: 820rpx;
.plsbuy-title-weight {
font-size: 35rpx;
font-weight: 700;
width: 100%;
margin: 20rpx 0;
}
.popup-right-font-contain {
display: flex;
width: 50%;
align-items: center;
}
.popup-font-left {
font-size: 30rpx;
line-height: 30rpx;
color: #646464;
}
.popup-font-right {
font-size: 30rpx;
line-height: 30rpx;
}
}
.plsbuy-title-flex {
display: flex;
// justify-content: space-around;
width: 100%;
margin-bottom: 20rpx;
}
.plsbuy-weight {
font-weight: 700;
font-size: 35rpx;
// margin-left: 50rpx;
}
.plsbuy-right-weight {
font-weight: 700;
font-size: 35rpx;
// margin-left: 140rpx;
}
.plsbuy-font-right {
font-size: 30rpx;
line-height: 30rpx;
}
.plsbuy-jian {
background-color: #D3E7FF;
width: 70rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10rpx;
margin-left: 30rpx;
border: 1rpx solid #313A4E;
font-size: 35rpx;
}
.plsbuy-jian-target {
background: linear-gradient(to bottom, #00C9FF, #0076FF);
color: #fff;
width: 70rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10rpx;
margin-left: 30rpx;
border: 1rpx solid #fff;
font-size: 35rpx;
}
.plsbuy-number {
border: 1rpx solid #313A4E;
// padding: 10rpx 20rpx;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
margin: 0 10rpx;
// margin: 0 20rpx;
width: 90rpx;
height: 70rpx;
}
.plsbuy-number-target {
color:#0076FF;
border: 1rpx solid #0076FF;
// padding: 10rpx 20rpx;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
margin: 0 10rpx;
// margin: 0 20rpx;
width: 90rpx;
height: 70rpx;
}
.plsbuy-jia {
background-color: #D3E7FF;
width: 70rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10rpx;
border: 1rpx solid #313A4E;
font-size: 35rpx;
margin-right: 5rpx;
}
.plsbuy-jia-target {
background: linear-gradient(to bottom, #00C9FF, #0076FF);
color: #fff;
width: 70rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10rpx;
border: 1rpx solid #fff;
font-size: 35rpx;
margin-right: 5rpx;
}
.plsbuy-amount {
width: 100%;
justify-content: end;
display: flex;
font-size: 35rpx;
margin-top: 20rpx;
.plsbuy-amount-font {
font-weight: 700;
}
.plsbuy-amount-red {
font-weight: 700;
color: red;
margin-right: 60rpx;
}
}
.plsbuy-bottom {
width: 100%;
margin-top: 30rpx;
height: 70rpx;
// background-color: #fff;
display: flex;
justify-content: center;
font-size: 35rpx;
.plsbuy-bottom-blue {
display: flex;
justify-content: center;
align-items: center;
width: 230rpx;
height: 80rpx;
border-radius: 20rpx;
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
color: #fff;
border: 1rpx #fff solid;
margin-right: 20rpx;
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
}
.plsbuy-bottom-white {
display: flex;
justify-content: center;
align-items: center;
width: 230rpx;
height: 80rpx;
border-radius: 20rpx;
background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
// color: #fff;
border: 1rpx #fff solid;
margin-right: 20rpx;
box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
}
}
.card-flex {
display: flex;
align-items: center;
}
@keyframes slide-out {
to {
transform: translateX(100%);
opacity: 0;
}
}
/* 给添加了 .slide-out 的卡片触发动画 */
.plsbuy-card-heng.slide-out {
animation: slide-out 0.3s forwards;
/* 0.3s 动画,结束后保持最终状态 :contentReference[oaicite:3]{index=3} */
}
2025-04-11 17:23:45 +08:00
</style>