340 lines
7.9 KiB
Vue
340 lines
7.9 KiB
Vue
<template>
|
||
<view>
|
||
<view class="kcyj">
|
||
<view class="kjlt">
|
||
请领物料
|
||
<view class="mhao" v-if="Material.length>0">{{Material.length}}</view>
|
||
</view>
|
||
<scroll-view scroll-x="true" class="kcscrol guodu" @scroll="onScroll" scroll-with-animation
|
||
:scroll-left="scrollleft" :style="qb?'width:calc(100% - 21.8vw)':'width:calc(100% - 10vw)' ">
|
||
<view class="yjbox" v-for="(v,i) in Material" :key="i">
|
||
<image
|
||
:src="v.materialInfo?.materialImg?serverUrl+v.materialInfo?.materialImg:'/static/index/procurement/k.png'"
|
||
mode="aspectFill"></image>
|
||
<view>{{v.materialInfo?.materialName}}</view>
|
||
<text class="ytj" v-if="v.qlNum>=0">{{v.qlNum}}</text>
|
||
<view class="zhanwei" v-if="moredex==1" @click.stop="del(v)">
|
||
<view>-</view>
|
||
</view>
|
||
</view>
|
||
<defaultr cont="暂无数据" v-if="Material.length==0&&timeout"
|
||
style="position: absolute;width: 10vw;height: 10vw;"></defaultr>
|
||
</scroll-view>
|
||
<view class="kjlt more guodu" :style="qb?'width:15vw':'' " @touchstart="ts" @touchmove="canmove"
|
||
v-if="Material.length>0">
|
||
<view @click="zksq" class="righ0">
|
||
{{!qb?'更多':'收起'}}
|
||
<image class="guodu" :style="qb?'transform: rotate(180deg);':''"
|
||
src="/static/index/procurement/zjt.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="guodu" :class="qb?(moredex==1?'avt':''):'righ0'" @click="moredex = moredex==1?0:1; ">
|
||
批量移除
|
||
</view>
|
||
<view class="guodu" :class="qb?(moredex==2?'avt':''):'righ0'" @click="moredex=2; ">
|
||
清空列表
|
||
</view>
|
||
<view class="guodu" :class="qb?(moredex==3?'avt':''):'righ0'" @click="moredex=3;emit('submit')">
|
||
提交请领单
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<tanchuang @back="moredex = 0" :show="moredex==2" font="确定将本次请领清单中的所有物料都移除吗？" @right="delall"></tanchuang>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
||
import defaultr from './default.vue'
|
||
import tanchuang from '../common/tanchuang.vue';
|
||
const props = defineProps({
|
||
Material: {
|
||
type: Array,
|
||
required: true,
|
||
}
|
||
});
|
||
const emit = defineEmits(['delall', 'del', 'submit'])
|
||
const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
|
||
const qb = ref(false)
|
||
const moredex = ref(0)
|
||
watch(() => props.Material,
|
||
() => {
|
||
if (props.Material.length == 0) {
|
||
qb.value = false;
|
||
moredex.value = 0;
|
||
}
|
||
})
|
||
const delall = () => {
|
||
emit('delall');
|
||
setTimeout(() => {
|
||
moredex.value = 0;
|
||
qb.value = false;
|
||
}, 100)
|
||
}
|
||
const del = (v) => {
|
||
emit('del', v)
|
||
}
|
||
const zksq = () => {
|
||
if (props.Material.length == 0) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请添加请领物料！'
|
||
})
|
||
return
|
||
}
|
||
qb.value = !qb.value;
|
||
moredex.value = 0;
|
||
moveleft();
|
||
}
|
||
const startX = ref(0)
|
||
const ts = (e) => {
|
||
startX.value = e.touches[0].clientX
|
||
}
|
||
const savescrollleft = ref(0)
|
||
// 监听用户滚动
|
||
function onScroll(e : any) {
|
||
savescrollleft.value = e?.detail?.scrollLeft ?? 0
|
||
}
|
||
const scrollleft = ref(0)
|
||
const canmove = (e : any) => {
|
||
if (props.Material.length == 0) { return }
|
||
const moveX = e.touches[0].clientX
|
||
const diff = moveX - startX.value
|
||
// diff 为负值就是向左滑
|
||
if (diff < -60 && !qb.value) { // 👉 60px 阈值，随便改
|
||
qb.value = !qb.value;
|
||
moredex.value = 0;
|
||
// 这么写是解决这个组件的响应丢失的bug
|
||
scrollleft.value = savescrollleft.value + 125.99
|
||
setTimeout(() => {
|
||
scrollleft.value = savescrollleft.value + 126
|
||
}, 50)
|
||
}
|
||
if (diff > 60 && qb.value) { // 👉 60px 阈值，随便改
|
||
qb.value = !qb.value;
|
||
moredex.value = 0;
|
||
scrollleft.value = savescrollleft.value - 125.99
|
||
setTimeout(() => {
|
||
scrollleft.value = savescrollleft.value - 126
|
||
}, 50)
|
||
}
|
||
}
|
||
const moveleft = () => {
|
||
if (qb.value) {
|
||
scrollleft.value = savescrollleft.value + 125.99
|
||
setTimeout(() => {
|
||
scrollleft.value = savescrollleft.value + 126
|
||
}, 50)
|
||
} else {
|
||
scrollleft.value = savescrollleft.value - 125.99
|
||
setTimeout(() => {
|
||
scrollleft.value = savescrollleft.value - 126
|
||
}, 50)
|
||
}
|
||
}
|
||
const timeout = ref(false)
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
timeout.value = true
|
||
}, 500)
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.kcyj {
|
||
width: 100%;
|
||
height: 10vw;
|
||
display: flex;
|
||
margin-top: 1vw;
|
||
position: relative;
|
||
|
||
.kjlt {
|
||
width: 3.2vw;
|
||
height: 10vw;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border-radius: 1.1vw;
|
||
writing-mode: vertical-rl;
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
letter-spacing: 3px;
|
||
font-size: 1.4vw;
|
||
position: relative;
|
||
z-index: 10;
|
||
|
||
.mhao {
|
||
position: absolute;
|
||
top: -0.9vw;
|
||
/* 根据视觉需要微调 */
|
||
right: -0.5vw;
|
||
/* 根据视觉需要微调 */
|
||
box-sizing: border-box;
|
||
width: 1.8vw;
|
||
/* 保证两位数也能容纳（可改成 2vw 以更宽松） */
|
||
height: 1.8vw;
|
||
/* 圆高，line-height 要与它匹配 */
|
||
padding: 0 0.15vw;
|
||
/* 给两位数一点水平缓冲 */
|
||
border-radius: 50%;
|
||
border: 1px solid #FF4E4E;
|
||
color: #FF4E4E;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
writing-mode: horizontal-tb;
|
||
/* <- 关键：让内部按横排显示数字（不被父写排规则影响） */
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.more {
|
||
margin-left: 0.6vw;
|
||
position: relative;
|
||
background: RGBA(239, 240, 244, 1);
|
||
|
||
.righ0 {
|
||
right: 0 !important;
|
||
}
|
||
|
||
view {
|
||
writing-mode: vertical-rl;
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
letter-spacing: 3px;
|
||
width: 3.2vw;
|
||
height: 10vw;
|
||
position: absolute;
|
||
top: 0;
|
||
border-radius: 1.1vw;
|
||
font-size: 1.4vw;
|
||
color: #888888;
|
||
background: #fff;
|
||
|
||
&:nth-child(1) {
|
||
letter-spacing: 6px;
|
||
padding-top: 2vw;
|
||
z-index: 5;
|
||
|
||
image {
|
||
width: 1.6vw;
|
||
height: 1.6vw;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
right: 3.9vw;
|
||
z-index: 3;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
right: 7.7vw;
|
||
z-index: 2;
|
||
}
|
||
|
||
&:nth-child(4) {
|
||
right: 11.6vw;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.avt {
|
||
background: rgba(85, 166, 249, 1);
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
|
||
.kcscrol {
|
||
width: calc(100% - 10vw);
|
||
height: 10vw;
|
||
white-space: nowrap;
|
||
margin-left: 0.6vw;
|
||
position: relative;
|
||
z-index: 9;
|
||
|
||
.yjbox {
|
||
display: inline-block;
|
||
width: 12vw;
|
||
height: 10vw;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border-radius: 1.1vw;
|
||
margin-right: 0.8vw;
|
||
position: relative;
|
||
|
||
.zhanwei {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 200;
|
||
|
||
view {
|
||
position: absolute;
|
||
width: 2.2vw;
|
||
height: 2.2vw;
|
||
display: flex;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
border-radius: 50%;
|
||
border: 2px solid rgba(255, 78, 78, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 3vw;
|
||
color: rgba(255, 78, 78, 1);
|
||
}
|
||
}
|
||
|
||
.ytj {
|
||
min-width: 1.5vw;
|
||
height: 1.8vw;
|
||
background: #E3EEF7;
|
||
border-radius: 0.9vw;
|
||
border: 1px solid rgba(3, 133, 250, 0.34);
|
||
font-weight: 400;
|
||
font-size: 1.1vw;
|
||
color: #1083F8;
|
||
text-align: center;
|
||
line-height: 1.75vw;
|
||
position: absolute;
|
||
padding: 0 0.8vw;
|
||
top: 0.8vw;
|
||
right: 0.8vw;
|
||
}
|
||
|
||
image {
|
||
width: 7vw;
|
||
height: 7vw;
|
||
margin: 0.5vw auto 0.5vw;
|
||
display: block;
|
||
border-radius: 1vw;
|
||
}
|
||
|
||
>view {
|
||
width: 100%;
|
||
height: 1.4vw;
|
||
font-weight: 400;
|
||
font-size: 1.3vw;
|
||
color: #212327;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
padding: 0 1vw;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.guodu {
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
</style> |