270 lines
6.3 KiB
Vue
270 lines
6.3 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" @click="clickaddcar(v,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>
|
|
<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">
|
|
<view @click="qb=!qb;moredex=0;moveleft()" 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=1;Invenshow=true">
|
|
批量移除
|
|
</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">
|
|
提交请领单
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
|
import defaultr from './default.vue'
|
|
const props = defineProps({
|
|
Material:{
|
|
type:Array,
|
|
required: true,
|
|
}
|
|
});
|
|
const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
|
|
const qb = ref(false)
|
|
const moredex = ref(0)
|
|
// watch(()=>props.Material,
|
|
// ()=>{
|
|
// console.log(props.Material)
|
|
// if(props.Material.length>5){
|
|
// scrollleft.value = 100*props.Material.length
|
|
// }
|
|
// })
|
|
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) => {
|
|
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{
|
|
width: 1.6vw;
|
|
min-height: 0vw;
|
|
border-radius: 0.8vw;
|
|
border: 1px solid #FF4E4E;
|
|
font-weight: 400;
|
|
font-size: 1.1vw;
|
|
color: #FF4E4E;
|
|
padding: 0.4vw 0vw;
|
|
position: absolute;
|
|
top: -0.8vw;
|
|
right: -0.4vw;
|
|
transform: rotate(-90deg);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.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> |