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>
|