489 lines
10 KiB
Vue
489 lines
10 KiB
Vue
<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} */
|
||
}
|
||
</style> |