合并代码
This commit is contained in:
parent
2462b1b124
commit
f91d925d91
|
|
@ -10,9 +10,8 @@
|
||||||
v-show="!isemity" enable-back-to-top>
|
v-show="!isemity" enable-back-to-top>
|
||||||
<view class="box">
|
<view class="box">
|
||||||
<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
|
<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
|
||||||
<scroll-view class="carditem guodu" @touchend="handleTouchEnd($event,v,index)"
|
<view class="fler-view" @touchstart="ts($event)" @touchmove="canmove($event,index)">
|
||||||
@touchstart="touchstart($event,v,index)" scroll-with-animation scroll-x="true"
|
<view class="carditem guodu" :style="openwhitchindex === index? { transform: 'translateX(-14vw)' }: { transform: 'translateX(0)' }">
|
||||||
:scroll-left="v.scrollleft" @scroll="scroll">
|
|
||||||
<view class="zding" v-if="v.zhiDingId">
|
<view class="zding" v-if="v.zhiDingId">
|
||||||
<image src="/static/index/procurement/zd.png" mode="aspectFill"></image>
|
<image src="/static/index/procurement/zd.png" mode="aspectFill"></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -87,7 +86,7 @@
|
||||||
<image v-if="v.isAdd!=1" :src="'/static/index/procurement/+.png'" mode="aspectFill"></image>
|
<image v-if="v.isAdd!=1" :src="'/static/index/procurement/+.png'" mode="aspectFill"></image>
|
||||||
<image v-if="v.isAdd==1" :src="'/static/index/procurement/-.png'" mode="aspectFill"></image>
|
<image v-if="v.isAdd==1" :src="'/static/index/procurement/-.png'" mode="aspectFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="zkadd guodu" :class="v.isAdd==1?'zkf':''">
|
<view class="zkadd guodu">
|
||||||
<view @click.stop="comfig(v,index,1)" @touchend.stop>
|
<view @click.stop="comfig(v,index,1)" @touchend.stop>
|
||||||
请领记录
|
请领记录
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -98,7 +97,8 @@
|
||||||
{{v.zhiDingId?'取消置顶':'置 顶'}}
|
{{v.zhiDingId?'取消置顶':'置 顶'}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -197,6 +197,22 @@
|
||||||
scrollLeft.value = e.detail.scrollLeft
|
scrollLeft.value = e.detail.scrollLeft
|
||||||
// console.log(e.detail.scrollLeft)
|
// console.log(e.detail.scrollLeft)
|
||||||
}
|
}
|
||||||
|
const startX = ref(0)
|
||||||
|
const openwhitchindex = ref(-1)
|
||||||
|
const ts = (e) => {
|
||||||
|
startX.value = e.touches[0].clientX;
|
||||||
|
}
|
||||||
|
const canmove = (e : any, index : number) => {
|
||||||
|
const moveX = e.touches[0].clientX
|
||||||
|
const diff = moveX - startX.value
|
||||||
|
// diff 为负值就是向左滑
|
||||||
|
if (diff < -40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = index
|
||||||
|
}
|
||||||
|
if (diff > 40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = -1
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
|
@ -205,9 +221,14 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
position: absolute;
|
// background-color: red;
|
||||||
top: 0;
|
// position: absolute;
|
||||||
right: -12vw;
|
// top: 0;
|
||||||
|
// right: -12vw;
|
||||||
|
// width: 14vw;
|
||||||
|
// height: 100%;
|
||||||
|
// display: inline-flex;
|
||||||
|
// justify-content: flex-end;
|
||||||
|
|
||||||
view:active {
|
view:active {
|
||||||
background: rgba(85, 166, 249, 1) !important;
|
background: rgba(85, 166, 249, 1) !important;
|
||||||
|
|
@ -283,9 +304,10 @@
|
||||||
.msitem {
|
.msitem {
|
||||||
width: 24vw;
|
width: 24vw;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
margin-right: 7vw;
|
||||||
top: 0;
|
// position: absolute;
|
||||||
left: 15vw;
|
// top: 0;
|
||||||
|
// left: 15vw;
|
||||||
// background-color: blue;
|
// background-color: blue;
|
||||||
|
|
||||||
.msitem-item {
|
.msitem-item {
|
||||||
|
|
@ -351,9 +373,9 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 0;
|
// top: 0;
|
||||||
left: 0;
|
// left: 0;
|
||||||
|
|
||||||
.cardp {
|
.cardp {
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
|
|
@ -425,6 +447,19 @@
|
||||||
.fler {
|
.fler {
|
||||||
width: 44vw;
|
width: 44vw;
|
||||||
height: 20.5vw;
|
height: 20.5vw;
|
||||||
|
position: relative;
|
||||||
|
// background-color: red;
|
||||||
|
|
||||||
|
.fler-view {
|
||||||
|
width: 44vw;
|
||||||
|
height: 19.5vw;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 1.6vw;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1.1vw;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
// margin-bottom: 0.9vw;
|
// margin-bottom: 0.9vw;
|
||||||
.carditem {
|
.carditem {
|
||||||
|
|
@ -435,9 +470,11 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 1.1vw;
|
margin-bottom: 1.1vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
|
||||||
|
will-change: transform;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- <div class="page">
|
<div class="page">
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<button class="btn" @click="generate(2000)">生成 2000 项</button>
|
<button class="btn" @click="generate(2000)">生成 2000 项</button>
|
||||||
|
|
@ -23,103 +23,103 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</div> -->
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// export default {
|
export default {
|
||||||
// data() {
|
data() {
|
||||||
// return {
|
return {
|
||||||
// items: [],
|
items: [],
|
||||||
// // FPS 测量
|
// FPS 测量
|
||||||
// measuring: false,
|
measuring: false,
|
||||||
// fpsDisplay: 0,
|
fpsDisplay: 0,
|
||||||
// avgFrameMsDisplay: 0,
|
avgFrameMsDisplay: 0,
|
||||||
|
|
||||||
// // 内部用
|
// 内部用
|
||||||
// _frames: [],
|
_frames: [],
|
||||||
// _rafId: null,
|
_rafId: null,
|
||||||
// _idleTO: null
|
_idleTO: null
|
||||||
// }
|
}
|
||||||
// },
|
},
|
||||||
// methods: {
|
methods: {
|
||||||
// generate(n) {
|
generate(n) {
|
||||||
// // 生成带颜色的占位项（避免网络请求）
|
// 生成带颜色的占位项（避免网络请求）
|
||||||
// const list = []
|
const list = []
|
||||||
// for (let i = 0; i < n; i++) {
|
for (let i = 0; i < n; i++) {
|
||||||
// list.push({
|
list.push({
|
||||||
// id: i + 1,
|
id: i + 1,
|
||||||
// color: this._randColor()
|
color: this._randColor()
|
||||||
// })
|
})
|
||||||
// }
|
}
|
||||||
// this.items = list
|
this.items = list
|
||||||
// // 清除测量结果
|
// 清除测量结果
|
||||||
// this.fpsDisplay = 0
|
this.fpsDisplay = 0
|
||||||
// this.avgFrameMsDisplay = 0
|
this.avgFrameMsDisplay = 0
|
||||||
// },
|
},
|
||||||
// clearList() {
|
clearList() {
|
||||||
// this.items = []
|
this.items = []
|
||||||
// this.fpsDisplay = 0
|
this.fpsDisplay = 0
|
||||||
// this.avgFrameMsDisplay = 0
|
this.avgFrameMsDisplay = 0
|
||||||
// },
|
},
|
||||||
// _randColor() {
|
_randColor() {
|
||||||
// const h = Math.floor(Math.random() * 360)
|
const h = Math.floor(Math.random() * 360)
|
||||||
// const s = 60 + Math.floor(Math.random() * 20)
|
const s = 60 + Math.floor(Math.random() * 20)
|
||||||
// const l = 55 + Math.floor(Math.random() * 10)
|
const l = 55 + Math.floor(Math.random() * 10)
|
||||||
// return `hsl(${h} ${s}% ${l}%)`
|
return `hsl(${h} ${s}% ${l}%)`
|
||||||
// },
|
},
|
||||||
|
|
||||||
// // 滚动回调（来自原生 nvue scroll-view）
|
// 滚动回调（来自原生 nvue scroll-view）
|
||||||
// onScroll(e) {
|
onScroll(e) {
|
||||||
// // 每次 scroll 事件触发时重置空闲计时器
|
// 每次 scroll 事件触发时重置空闲计时器
|
||||||
// // 开始/继续测量 FPS
|
// 开始/继续测量 FPS
|
||||||
// if (!this.measuring) this._startMeasure()
|
if (!this.measuring) this._startMeasure()
|
||||||
// clearTimeout(this._idleTO)
|
clearTimeout(this._idleTO)
|
||||||
// this._idleTO = setTimeout(() => {
|
this._idleTO = setTimeout(() => {
|
||||||
// this._stopMeasure()
|
this._stopMeasure()
|
||||||
// }, 300)
|
}, 300)
|
||||||
// },
|
},
|
||||||
|
|
||||||
// _startMeasure() {
|
_startMeasure() {
|
||||||
// this.measuring = true
|
this.measuring = true
|
||||||
// this._frames = []
|
this._frames = []
|
||||||
// const pushFrame = (t) => {
|
const pushFrame = (t) => {
|
||||||
// this._frames.push(t)
|
this._frames.push(t)
|
||||||
// // 保持最近 120 帧
|
// 保持最近 120 帧
|
||||||
// if (this._frames.length > 120) this._frames.shift()
|
if (this._frames.length > 120) this._frames.shift()
|
||||||
// this._rafId = requestAnimationFrame(pushFrame)
|
// this._rafId = requestAnimationFrame(pushFrame)
|
||||||
// }
|
}
|
||||||
// this._rafId = requestAnimationFrame(pushFrame)
|
// this._rafId = requestAnimationFrame(pushFrame)0
|
||||||
// },
|
},
|
||||||
|
|
||||||
// _stopMeasure() {
|
_stopMeasure() {
|
||||||
// this.measuring = false
|
this.measuring = false
|
||||||
// if (this._rafId) {
|
if (this._rafId) {
|
||||||
// cancelAnimationFrame(this._rafId)
|
cancelAnimationFrame(this._rafId)
|
||||||
// this._rafId = null
|
this._rafId = null
|
||||||
// }
|
}
|
||||||
// // 计算 FPS 与平均帧时长
|
// 计算 FPS 与平均帧时长
|
||||||
// if (this._frames.length < 2) {
|
if (this._frames.length < 2) {
|
||||||
// this.fpsDisplay = 0
|
this.fpsDisplay = 0
|
||||||
// this.avgFrameMsDisplay = 0
|
this.avgFrameMsDisplay = 0
|
||||||
// return
|
return
|
||||||
// }
|
}
|
||||||
// const intervals = []
|
const intervals = []
|
||||||
// for (let i = 1; i < this._frames.length; i++) {
|
for (let i = 1; i < this._frames.length; i++) {
|
||||||
// intervals.push(this._frames[i] - this._frames[i - 1])
|
intervals.push(this._frames[i] - this._frames[i - 1])
|
||||||
// }
|
}
|
||||||
// const sum = intervals.reduce((a, b) => a + b, 0)
|
const sum = intervals.reduce((a, b) => a + b, 0)
|
||||||
// const avg = sum / intervals.length
|
const avg = sum / intervals.length
|
||||||
// const fps = 1000 / avg
|
const fps = 1000 / avg
|
||||||
// this.avgFrameMsDisplay = avg.toFixed(2)
|
this.avgFrameMsDisplay = avg.toFixed(2)
|
||||||
// this.fpsDisplay = Math.round(fps)
|
this.fpsDisplay = Math.round(fps)
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* .page {
|
.page {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background-color: #f5f6fa;
|
background-color: #f5f6fa;
|
||||||
}
|
}
|
||||||
|
|
@ -189,9 +189,10 @@
|
||||||
color: #666;
|
color: #666;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
page,
|
page,
|
||||||
body,
|
body,
|
||||||
.page {
|
.page {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
} */
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -158,7 +158,7 @@
|
||||||
onShow(() => {
|
onShow(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
playall.value = true;
|
playall.value = true;
|
||||||
}, 300)
|
}, 500)
|
||||||
|
|
||||||
zyupgrade.value?.check_update();
|
zyupgrade.value?.check_update();
|
||||||
queryPadPageList().then((res => {
|
queryPadPageList().then((res => {
|
||||||
|
|
@ -371,9 +371,9 @@
|
||||||
|
|
||||||
const ceshijump = () => {
|
const ceshijump = () => {
|
||||||
// ceshiopen.value = true
|
// ceshiopen.value = true
|
||||||
// uni.navigateTo({
|
uni.navigateTo({
|
||||||
// url:"/pages/login/ceshi"
|
url:"/pages/login/ceshi"
|
||||||
// })
|
})
|
||||||
// console.log("wtf")
|
// console.log("wtf")
|
||||||
// try {
|
// try {
|
||||||
// const Intent = plus.android.importClass('android.content.Intent')
|
// const Intent = plus.android.importClass('android.content.Intent')
|
||||||
|
|
|
||||||
|
|
@ -4,12 +4,16 @@
|
||||||
<view class="titletop">全部库存预警</view>
|
<view class="titletop">全部库存预警</view>
|
||||||
<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower">
|
<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower">
|
||||||
<view class="fler">
|
<view class="fler">
|
||||||
<scroll-view class="carditem guodu" v-for="(v,index) in InvoicingList" :key="index"
|
<!-- <view class="fler-view"> -->
|
||||||
@touchend="handleTouchEnd($event,v,index)" @touchstart="touchstart($event,v,index)"
|
|
||||||
scroll-with-animation scroll-x="true" :scroll-left="v.scrollleft" @scroll="scroll($event,v)">
|
<view class="carditem guodu" v-for="(v,index) in InvoicingList" :key="index"
|
||||||
|
@touchstart="ts($event)" @touchmove="canmove($event,index)">
|
||||||
|
<view class="guodu"
|
||||||
|
:style="openwhitchindex === index? { transform: 'translateX(-14vw)' }: { transform: 'translateX(0)' }">
|
||||||
<view class="speitem guodu" :class="v.zk?'spleft':''">
|
<view class="speitem guodu" :class="v.zk?'spleft':''">
|
||||||
<view class="imghs">
|
<view class="imghs">
|
||||||
<image :src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
|
<image
|
||||||
|
:src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
|
||||||
mode="aspectFill">
|
mode="aspectFill">
|
||||||
</image>
|
</image>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -24,10 +28,11 @@
|
||||||
<view>{{v.materialName}}</view><text>{{v.materialNo}}</text>
|
<view>{{v.materialName}}</view><text>{{v.materialNo}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view style="white-space: nowrap;display: block;">
|
<view style="white-space: nowrap;display: block;">
|
||||||
<text style="white-space: nowrap;display: block;"> 规格型号: {{v.specificationModel}}</text>
|
<text style="white-space: nowrap;display: block;"> 规格型号:
|
||||||
|
{{v.specificationModel}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<text v-if="v.multiUnitType=='1'">采购单价:111111111111111
|
<text v-if="v.multiUnitType=='1'">采购单价:
|
||||||
￥{{v.oneUnitPrice?Number(v.oneUnitPrice).toFixed(2):""}} </text>
|
￥{{v.oneUnitPrice?Number(v.oneUnitPrice).toFixed(2):""}} </text>
|
||||||
<text v-if="v.multiUnitType=='1'">采购单位: {{ v.oneUnit}}</text>
|
<text v-if="v.multiUnitType=='1'">采购单位: {{ v.oneUnit}}</text>
|
||||||
<text v-if="v.multiUnitType=='2'">采购单价:
|
<text v-if="v.multiUnitType=='2'">采购单价:
|
||||||
|
|
@ -54,10 +59,10 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="add" @click.stop="clkzk(v,index)">
|
<view class="add" @click.stop="clkzk(v,index)">
|
||||||
<view v-if="v.isAdd==1">已添加</view>
|
<view v-if="v.isAdd==1">已添加</view>
|
||||||
<image class="guodu" :style="v.zk?'transform: rotate(180deg);':''"
|
<image class="guodu" :style="openwhitchindex === index?'transform: rotate(180deg);':''"
|
||||||
:src="'/static/index/procurement/l.png'" mode="aspectFill"></image>
|
:src="'/static/index/procurement/l.png'" mode="aspectFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="zkadd guodu" :class="v.isAdd==1?'zkf':''">
|
<view class="zkadd guodu" >
|
||||||
<view @click.stop="crk(v,index)" @touchend.stop>出入库</view>
|
<view @click.stop="crk(v,index)" @touchend.stop>出入库</view>
|
||||||
<view @click.stop="addcar(v)" v-if="v.isAdd!=1" @touchend.stop>
|
<view @click.stop="addcar(v)" v-if="v.isAdd!=1" @touchend.stop>
|
||||||
<view>
|
<view>
|
||||||
|
|
@ -65,7 +70,11 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<!-- </view> -->
|
||||||
</view>
|
</view>
|
||||||
<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;">
|
<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;">
|
||||||
<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="InvoicingList.length>6" />
|
<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="InvoicingList.length>6" />
|
||||||
|
|
@ -76,7 +85,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
|
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent,watch } from 'vue';
|
||||||
import { queryInvoicingList, queryWlInfoByWlId, addShoppingCartList, queryShoppingCartList } from '../api/lunpan.js'
|
import { queryInvoicingList, queryWlInfoByWlId, addShoppingCartList, queryShoppingCartList } from '../api/lunpan.js'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
InvoicingList: {
|
InvoicingList: {
|
||||||
|
|
@ -92,6 +101,13 @@
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
watch(
|
||||||
|
() => props.show,
|
||||||
|
() => {
|
||||||
|
if (props.show == false) {
|
||||||
|
openwhitchindex.value = -1
|
||||||
|
}
|
||||||
|
})
|
||||||
const emit = defineEmits(['addcartory', 'tolower', 'solleft', 'crk'])
|
const emit = defineEmits(['addcartory', 'tolower', 'solleft', 'crk'])
|
||||||
const serverUrl = ref('')
|
const serverUrl = ref('')
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
@ -103,18 +119,19 @@
|
||||||
}
|
}
|
||||||
const caigouobj = ref({})
|
const caigouobj = ref({})
|
||||||
const clkzk = (v : any, i : number) => {
|
const clkzk = (v : any, i : number) => {
|
||||||
caigouobj.value = v;
|
openwhitchindex.value = openwhitchindex.value === i ? -1 : i;
|
||||||
caigouobj.value.Limitnum = Number(caigouobj.value?.upperLimit) - Number(caigouobj.value.kcsl);
|
// caigouobj.value = v;
|
||||||
caigouobj.value.index = i;
|
// caigouobj.value.Limitnum = Number(caigouobj.value?.upperLimit) - Number(caigouobj.value.kcsl);
|
||||||
caigouobj.value.yj = true;
|
// caigouobj.value.index = i;
|
||||||
if (v.zk == true) {
|
// caigouobj.value.yj = true;
|
||||||
v.zk = false;
|
// if (v.zk == true) {
|
||||||
v.scrollleft = 0
|
// v.zk = false;
|
||||||
} else {
|
// v.scrollleft = 0
|
||||||
v.zk = true;
|
// } else {
|
||||||
v.scrollleft = 170;
|
// v.zk = true;
|
||||||
}
|
// v.scrollleft = 170;
|
||||||
solleft(v, i)
|
// }
|
||||||
|
// solleft(v, i)
|
||||||
}
|
}
|
||||||
const addcar = (v : any) => {
|
const addcar = (v : any) => {
|
||||||
emit('addcartory', caigouobj.value)
|
emit('addcartory', caigouobj.value)
|
||||||
|
|
@ -170,6 +187,29 @@
|
||||||
const crk = (v, i) => {
|
const crk = (v, i) => {
|
||||||
emit('crk', v, i)
|
emit('crk', v, i)
|
||||||
}
|
}
|
||||||
|
const startX = ref(0)
|
||||||
|
const openwhitchindex = ref(-1)
|
||||||
|
const ts = (e) => {
|
||||||
|
startX.value = e.touches[0].clientX;
|
||||||
|
}
|
||||||
|
const canmove = (e : any, index : number) => {
|
||||||
|
const moveX = e.touches[0].clientX
|
||||||
|
const diff = moveX - startX.value
|
||||||
|
// diff 为负值就是向左滑
|
||||||
|
if (diff < -40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = index
|
||||||
|
}
|
||||||
|
if (diff > 40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = -1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const openmore = (index:number) => {
|
||||||
|
if(openwhitchindex.value==-1){
|
||||||
|
openwhitchindex.value = index
|
||||||
|
}else{
|
||||||
|
openwhitchindex.value = -1
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
|
@ -177,23 +217,27 @@
|
||||||
width: 46.9vw;
|
width: 46.9vw;
|
||||||
height: 14.5vw;
|
height: 14.5vw;
|
||||||
background: rgba(255, 255, 255, 1);
|
background: rgba(255, 255, 255, 1);
|
||||||
border: 1rpx solid #D2D2D2;
|
border: 1px solid #D9DADC;
|
||||||
border-radius: 1.6vw;
|
border-radius: 1.6vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 1.1vw;
|
margin-bottom: 0.8vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
.zkadd {
|
.zkadd {
|
||||||
width: 14vw;
|
min-width: 14vw;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
// background-color: red;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: -14vw;
|
right: -14vw;
|
||||||
|
// position: absolute;
|
||||||
|
// top: 0;
|
||||||
|
// right: -14vw;
|
||||||
|
|
||||||
>view {
|
>view {
|
||||||
width: 7vw;
|
width: 7vw;
|
||||||
|
|
@ -225,6 +269,7 @@
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
background: #e3e5e7;
|
background: #e3e5e7;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -242,6 +287,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2vw;
|
top: -2vw;
|
||||||
|
margin-right: 1vw;
|
||||||
|
|
||||||
>view {
|
>view {
|
||||||
width: 4.5vw;
|
width: 4.5vw;
|
||||||
|
|
@ -347,7 +393,7 @@
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
|
|
||||||
text{
|
text {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -424,6 +470,7 @@
|
||||||
line-height: 1.8vw;
|
line-height: 1.8vw;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
max-width: 11.5vw;
|
max-width: 11.5vw;
|
||||||
padding: 0 0.8vw;
|
padding: 0 0.8vw;
|
||||||
|
|
@ -461,6 +508,21 @@
|
||||||
.fler {
|
.fler {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
// .fler-view {
|
||||||
|
// width: 100%;
|
||||||
|
// height: 100%;
|
||||||
|
// border-radius: 1.6vw;
|
||||||
|
// position: relative;
|
||||||
|
// margin-bottom: 1.1vw;
|
||||||
|
// // overflow: hidden;
|
||||||
|
// white-space: nowrap;
|
||||||
|
// // background: #fff;
|
||||||
|
// // border: 1px solid #D9DADC;
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -493,4 +555,5 @@
|
||||||
-webkit-transform-style: preserve-3d;
|
-webkit-transform-style: preserve-3d;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -154,7 +154,7 @@
|
||||||
watch(
|
watch(
|
||||||
() => props.show,
|
() => props.show,
|
||||||
() => {
|
() => {
|
||||||
console.log(props.caigouobj)
|
// console.log(props.caigouobj)
|
||||||
if (props.show) {
|
if (props.show) {
|
||||||
let a = [
|
let a = [
|
||||||
{
|
{
|
||||||
|
|
@ -197,7 +197,7 @@
|
||||||
let n = [];
|
let n = [];
|
||||||
let id = [];
|
let id = [];
|
||||||
gysarr.value = [];
|
gysarr.value = [];
|
||||||
console.log("为啥报错", props.caigouobj)
|
// console.log("为啥报错", props.caigouobj)
|
||||||
n = props.caigouobj.suppliers_dictText?.split(/[, ]+/);
|
n = props.caigouobj.suppliers_dictText?.split(/[, ]+/);
|
||||||
id = props.caigouobj.suppliers?.split(/[, ]+/);
|
id = props.caigouobj.suppliers?.split(/[, ]+/);
|
||||||
n.forEach((item, i) => {
|
n.forEach((item, i) => {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,527 @@
|
||||||
<template>
|
<template>
|
||||||
|
<view>
|
||||||
|
<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower()"
|
||||||
|
enable-back-to-top>
|
||||||
|
<view class="box">
|
||||||
|
<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
|
||||||
|
<view class="fler-view" @touchstart="ts($event)" @touchmove="canmove($event,index)">
|
||||||
|
<!-- @touchend="handleTouchEnd($event,v,index)"
|
||||||
|
@touchstart="touchstart($event,v,index)" scroll-with-animation scroll-x="true"
|
||||||
|
:scroll-left="v.scrollleft" @scroll="scroll" -->
|
||||||
|
<view class="carditem guodu"
|
||||||
|
:style="openwhitchindex === index? { transform: 'translateX(-14vw)' }: { transform: 'translateX(0)' }">
|
||||||
|
<view class="speitem guodu">
|
||||||
|
<view class="imghs">
|
||||||
|
<image style="border-radius: 1vw;"
|
||||||
|
:src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
|
||||||
|
mode="aspectFill">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="cardp">
|
||||||
|
<view v-if="v.categoryId_dictText">{{v.categoryId_dictText}}</view>
|
||||||
|
<view v-if="v.typeId_dictText">{{v.typeId_dictText}}</view>
|
||||||
|
<view v-if="v.medicationId_dictText">{{v.medicationId_dictText}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="msitem guodu">
|
||||||
|
<view>
|
||||||
|
<view>{{v.materialName}}</view>
|
||||||
|
</view>
|
||||||
|
<view style="margin-top: 1vw;">
|
||||||
|
<text style="white-space: nowrap;"> 物料编码: {{v.materialNo}}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text style="white-space: nowrap;"> 规格型号: {{v.specificationModel}}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text v-if="v.multiUnitType=='1'">采购单价: ￥{{Number(v.oneUnitPrice).toFixed(2) }}
|
||||||
|
</text>
|
||||||
|
<text v-if="v.multiUnitType=='2'">采购单价: ￥{{Number(v.twoUnitPrice).toFixed(2) }}
|
||||||
|
</text>
|
||||||
|
<text v-if="v.multiUnitType=='3'">采购单价:
|
||||||
|
￥{{ Number(v.referenceUnitPrice).toFixed(2)}}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text v-if="v.multiUnitType=='1'">采购单位: {{ v.oneUnit}}</text>
|
||||||
|
<text v-if="v.multiUnitType=='2'">采购单位: {{ v.twoUnit}}</text>
|
||||||
|
<text v-if="v.multiUnitType=='3'">采购单位: {{ v.materialUnits}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="wlsy">
|
||||||
|
<view>
|
||||||
|
<text>{{v.kcsl}}</text>
|
||||||
|
<text>库存数量</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text>{{v.upperLimit}}</text>
|
||||||
|
<text>物料上限 ↑</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text>{{v.lowerLimit}}</text>
|
||||||
|
<text>↓ 物料下限</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="add" @click.stop="addcar(v,index)">
|
||||||
|
<view v-if="v.isAdd==1">已添加</view>
|
||||||
|
<image :src="'/static/index/procurement/+.png'" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="zkadd guodu" :class="v.isAdd==1?'':''">
|
||||||
|
<view v-if="v.isAdd==1">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="zkadd-white" @click.stop="crk(v,index)" @touchend.stop>出入库</view>
|
||||||
|
<view class="zkadd-blue" @click.stop="addcar(v,index)" v-if="v.isAdd!=1" @touchend.stop>
|
||||||
|
<view>
|
||||||
|
加购物车
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;">
|
||||||
|
<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="InvoicingList.length>6" />
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
InvoicingList: {
|
||||||
|
type: Array
|
||||||
|
},
|
||||||
|
status: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['addcartory', 'scrolltolower', 'addcar', 'crk'])
|
||||||
|
const serverUrl = ref('')
|
||||||
|
onMounted(() => {
|
||||||
|
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// console.log(serverUrl.value+props.InvoicingList[0].materialImg)
|
||||||
|
// },3000)
|
||||||
|
})
|
||||||
|
const caigouobj = ref({})
|
||||||
|
const addcar = (v : any, i : number) => {
|
||||||
|
// console.log("为啥点击不上啊",i)
|
||||||
|
if (Number(v.kcsl) >= Number(v.upperLimit)) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '库存数量已满，不可添加购物车！',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
caigouobj.value = v;
|
||||||
|
caigouobj.value.index = i;
|
||||||
|
caigouobj.value.yj = false;
|
||||||
|
emit('addcartory', caigouobj.value)
|
||||||
|
}
|
||||||
|
// const pageX = ref(0);
|
||||||
|
// const pageY = ref(0);
|
||||||
|
// const touchstart = (event : any, v : any, i : number) => {
|
||||||
|
// pageX.value = event.changedTouches[0].pageX;
|
||||||
|
// pageY.value = event.changedTouches[0].pageY;
|
||||||
|
// solleft(v, i)
|
||||||
|
// }
|
||||||
|
// const handleTouchEnd = (event : any, v : any, i : number) => {
|
||||||
|
// let y = event.changedTouches[0].pageY;
|
||||||
|
// let x = event.changedTouches[0].pageX;
|
||||||
|
// let absx = Math.abs(x - pageX.value)
|
||||||
|
// let absy = Math.abs(y - pageY.value)
|
||||||
|
// if (absy > 30 && absx + 10 < absy) {
|
||||||
|
// v.scrollleft = 1
|
||||||
|
// setTimeout(() => {
|
||||||
|
// v.scrollleft = 0
|
||||||
|
// }, 20)
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
// if (absx < 10 && absy < 10) {
|
||||||
|
// if (v.zk == false) {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// v.scrollleft = 0
|
||||||
|
// }, 20)
|
||||||
|
// }
|
||||||
|
// console.log("2")
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
// caigouobj.value = v;
|
||||||
|
// caigouobj.value.Limitnum = Number(caigouobj.value?.upperLimit) - Number(caigouobj.value.kcsl);
|
||||||
|
// caigouobj.value.index = i;
|
||||||
|
// caigouobj.value.yj = false;
|
||||||
|
// v.zk = x > pageX.value ? false : true;
|
||||||
|
// v.scrollleft = v.zk ? 150 : 0;
|
||||||
|
|
||||||
|
// }
|
||||||
|
// const solleft = (v : any, i : number) => {
|
||||||
|
// props.InvoicingList.forEach((item, k) => {
|
||||||
|
// if (k != i && item.zk == true) {
|
||||||
|
// item.zk = false;
|
||||||
|
// item.scrollleft = 0;
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
const scrolltolower = () => {
|
||||||
|
emit('scrolltolower')
|
||||||
|
}
|
||||||
|
// const scrollLeft = ref(0)
|
||||||
|
// const scroll = (e) => {
|
||||||
|
// // scrollLeft.value = e.detail.scrollLeft
|
||||||
|
// // console.log(e.detail.scrollLeft)
|
||||||
|
// }
|
||||||
|
const crk = (v, i) => {
|
||||||
|
emit('crk', v, i)
|
||||||
|
}
|
||||||
|
const startX = ref(0)
|
||||||
|
const openwhitchindex = ref(-1)
|
||||||
|
const ts = (e) => {
|
||||||
|
startX.value = e.touches[0].clientX;
|
||||||
|
}
|
||||||
|
const canmove = (e : any, index : number) => {
|
||||||
|
const moveX = e.touches[0].clientX
|
||||||
|
const diff = moveX - startX.value
|
||||||
|
// diff 为负值就是向左滑
|
||||||
|
if (diff < -40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = index
|
||||||
|
}
|
||||||
|
if (diff > 40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = -1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.crdcroll {
|
||||||
|
width: 90vw;
|
||||||
|
height: 64.5vh;
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: 90vw;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fler {
|
||||||
|
width: 44vw;
|
||||||
|
height: 20.5vw;
|
||||||
|
position: relative;
|
||||||
|
// background-color: red;
|
||||||
|
|
||||||
|
.fler-view {
|
||||||
|
width: 44vw;
|
||||||
|
height: 19.5vw;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 1.6vw;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1.1vw;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carditem {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
|
||||||
|
will-change: transform;
|
||||||
|
|
||||||
|
.zkadd {
|
||||||
|
width: 14vw;
|
||||||
|
height: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
// background-color: blue;
|
||||||
|
// position: absolute;
|
||||||
|
// top: 0;
|
||||||
|
// right: -14vw;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
width: 5.7vw;
|
||||||
|
height: 100%;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
text-orientation: upright;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.zkadd-blue {
|
||||||
|
background: #1083F8;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
view {
|
||||||
|
width: 3.8vw;
|
||||||
|
height: 3.8vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: -0.7vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zkadd-white {
|
||||||
|
background: #e3e5e7;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zkf {
|
||||||
|
width: 7vw;
|
||||||
|
right: -7vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add {
|
||||||
|
width: 4.5vw;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
// top: 0.8vw;
|
||||||
|
right: 16vw;
|
||||||
|
// background-color: red;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
width: 5.5vw;
|
||||||
|
height: 2.2vw;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0.9vw;
|
||||||
|
border: 1px solid #1083F8;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.4vw;
|
||||||
|
color: #1083F8;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.3vw;
|
||||||
|
right: 0.8vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 2.5vw;
|
||||||
|
height: 2.5vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.msitem {
|
||||||
|
min-width: 25vw;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1vw;
|
||||||
|
// background-color: red;
|
||||||
|
margin-right: 4.2vw;
|
||||||
|
// position: absolute;
|
||||||
|
// left: 15vw;
|
||||||
|
// top: 0;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
|
||||||
|
&:nth-child(2),
|
||||||
|
&:nth-child(3),
|
||||||
|
&:nth-child(4),
|
||||||
|
&:nth-child(5) {
|
||||||
|
margin-top: 0.25vw;
|
||||||
|
max-width: 25vw;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.3vw;
|
||||||
|
color: #777777;
|
||||||
|
margin-top: 0.25vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 2vw;
|
||||||
|
margin-top: 1vw;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
width: 19vw;
|
||||||
|
height: 2vw;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.8vw;
|
||||||
|
color: #222222;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
width: 6vw;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.4vw;
|
||||||
|
color: #222222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
>.wlsy {
|
||||||
|
width: 100%;
|
||||||
|
height: 3.4vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 0vw;
|
||||||
|
|
||||||
|
>view {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 1vw;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
width: 30%;
|
||||||
|
align-items: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
width: 40%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
width: 30%;
|
||||||
|
text-align: right;
|
||||||
|
align-items: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2)::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2.2vw;
|
||||||
|
border-left: 1px solid #C9C9C9;
|
||||||
|
border-right: 1px solid #C9C9C9;
|
||||||
|
top: 0.6vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
&:nth-child(1) {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.8vw;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.2vw;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .spleft{
|
||||||
|
// margin-left: -15vw !important;
|
||||||
|
// }
|
||||||
|
.speitem {
|
||||||
|
min-width: 14.8vw;
|
||||||
|
height: 100%;
|
||||||
|
// position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// top: 0;
|
||||||
|
// left: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.cardp {
|
||||||
|
width: 12.5vw;
|
||||||
|
height: 4vw;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0 auto;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: -1vw;
|
||||||
|
|
||||||
|
view {
|
||||||
|
min-width: 5.5vw;
|
||||||
|
height: 1.8vw;
|
||||||
|
border-radius: 0.9vw;
|
||||||
|
border: 1px solid #D2D2D2;
|
||||||
|
margin: 0.5vw 0 0 0.5vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1vw;
|
||||||
|
color: #555555;
|
||||||
|
padding: 0 0.25vw;
|
||||||
|
|
||||||
|
&:nth-child(1),
|
||||||
|
&:nth-child(2) {
|
||||||
|
max-width: 6vw;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
line-height: 1.8vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
max-width: 11.5vw;
|
||||||
|
padding: 0 0.8vw;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
line-height: 1.8vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imghs {
|
||||||
|
width: 12vw;
|
||||||
|
height: 12vw;
|
||||||
|
margin: 0vw auto 0.25vw;
|
||||||
|
padding: 0.2vw;
|
||||||
|
padding-top: 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 1.1vw;
|
||||||
|
|
||||||
|
>image {
|
||||||
|
margin-top: -0.6vw;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 1.1vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!-- <template>
|
||||||
<view>
|
<view>
|
||||||
<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower()"
|
<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower()"
|
||||||
enable-back-to-top>
|
enable-back-to-top>
|
||||||
|
|
@ -483,4 +1006,4 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style> -->
|
||||||
|
|
@ -5,14 +5,18 @@
|
||||||
enable-back-to-top>
|
enable-back-to-top>
|
||||||
<view class="box">
|
<view class="box">
|
||||||
<view class="fler" v-for="(v,index) in InvoicingList" :key="index" @click="v.flag=!v.flag">
|
<view class="fler" v-for="(v,index) in InvoicingList" :key="index" @click="v.flag=!v.flag">
|
||||||
|
<view class="fler-view" @touchstart="ts($event)" @touchmove="canmove($event,index)" :class="v.flag?'actve':''">
|
||||||
<view class="jiao guodu">
|
<view class="jiao guodu">
|
||||||
<image :src="v.flag?'/static/index/procurement/lxz.png':'/static/index/procurement/jxz.png'"
|
<image :src="v.flag?'/static/index/procurement/lxz.png':'/static/index/procurement/jxz.png'"
|
||||||
mode="aspectFill" class="jao guodu"></image>
|
mode="aspectFill" class="jao guodu"></image>
|
||||||
<image src="/static/index/procurement/dh.png" mode="aspectFill" class="dui"></image>
|
<image src="/static/index/procurement/dh.png" mode="aspectFill" class="dui"></image>
|
||||||
</view>
|
</view>
|
||||||
<scroll-view class="carditem guodu " @touchend="handleTouchEnd($event,v,index)"
|
<view class="carditem guodu "
|
||||||
|
:style="openwhitchindex === index? { transform: 'translateX(-16vw)' }: { transform: 'translateX(0)' }"
|
||||||
|
>
|
||||||
|
<!-- @touchend="handleTouchEnd($event,v,index)"
|
||||||
@touchstart="touchstart($event,v,index)" scroll-with-animation scroll-x="true"
|
@touchstart="touchstart($event,v,index)" scroll-with-animation scroll-x="true"
|
||||||
:scroll-left="v.scrollleft" @scroll="scroll" :class="v.flag?'actve':''">
|
:scroll-left="v.scrollleft" @scroll="scroll" -->
|
||||||
<view class="speitem guodu">
|
<view class="speitem guodu">
|
||||||
<view class="imghs">
|
<view class="imghs">
|
||||||
<image style="border-radius: 1vw;"
|
<image style="border-radius: 1vw;"
|
||||||
|
|
@ -41,8 +45,10 @@
|
||||||
<view>
|
<view>
|
||||||
<text v-if="v.wlUnits == v.materialUnits">采购单价:
|
<text v-if="v.wlUnits == v.materialUnits">采购单价:
|
||||||
￥{{Number(v.unitPrice).toFixed(2) }}</text>
|
￥{{Number(v.unitPrice).toFixed(2) }}</text>
|
||||||
<text v-if="v.wlUnits == v.twoUnit">采购单价: ￥{{Number(v.twoUnitPrice).toFixed(2) }}</text>
|
<text v-if="v.wlUnits == v.twoUnit">采购单价:
|
||||||
<text v-if="v.wlUnits == v.oneUnit">采购单价: ￥{{Number(v.oneUnitPrice).toFixed(2) }}</text>
|
￥{{Number(v.twoUnitPrice).toFixed(2) }}</text>
|
||||||
|
<text v-if="v.wlUnits == v.oneUnit">采购单价:
|
||||||
|
￥{{Number(v.oneUnitPrice).toFixed(2) }}</text>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
|
|
@ -78,7 +84,7 @@
|
||||||
<!-- 供应商: {{v.suppliersName}} -->
|
<!-- 供应商: {{v.suppliersName}} -->
|
||||||
</view>
|
</view>
|
||||||
<view class="add" @click.stop="clkzk(v,index)">
|
<view class="add" @click.stop="clkzk(v,index)">
|
||||||
<image class="guodu" :style="v.zk?'transform: rotate(180deg);':''"
|
<image class="guodu" :style="openwhitchindex === index?'transform: rotate(180deg);':''"
|
||||||
:src="'/static/index/procurement/l.png'" mode="aspectFill"></image>
|
:src="'/static/index/procurement/l.png'" mode="aspectFill"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="right-top">
|
<view class="right-top">
|
||||||
|
|
@ -89,7 +95,7 @@
|
||||||
采购数量
|
采购数量
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="zkadd guodu" :class="v.isAdd==1?'zkf':''">
|
<view class="zkadd guodu" >
|
||||||
<view @click.stop="addcar(v,index)" @touchend.stop>编辑</view>
|
<view @click.stop="addcar(v,index)" @touchend.stop>编辑</view>
|
||||||
<view @click.stop="del(v,index)" v-if="v.isAdd!=1" @touchend.stop>
|
<view @click.stop="del(v,index)" v-if="v.isAdd!=1" @touchend.stop>
|
||||||
<view>
|
<view>
|
||||||
|
|
@ -97,7 +103,8 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;"
|
<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;"
|
||||||
|
|
@ -140,14 +147,18 @@
|
||||||
const caigouobj = ref({})
|
const caigouobj = ref({})
|
||||||
const clkzk = (v : any, i : number) => {
|
const clkzk = (v : any, i : number) => {
|
||||||
|
|
||||||
if (v.zk == true) {
|
openwhitchindex.value = openwhitchindex.value === i ? -1 : i;
|
||||||
v.zk = false;
|
|
||||||
v.scrollleft = 0
|
|
||||||
} else {
|
|
||||||
v.zk = true;
|
// if (v.zk == true) {
|
||||||
v.scrollleft = 150;
|
// v.zk = false;
|
||||||
}
|
// v.scrollleft = 0
|
||||||
solleft(v, i)
|
// } else {
|
||||||
|
// v.zk = true;
|
||||||
|
// v.scrollleft = 150;
|
||||||
|
// }
|
||||||
|
// solleft(v, i)
|
||||||
|
|
||||||
}
|
}
|
||||||
const pageX = ref(0);
|
const pageX = ref(0);
|
||||||
|
|
@ -202,6 +213,22 @@
|
||||||
// scrollLeft.value = e.detail.scrollLeft
|
// scrollLeft.value = e.detail.scrollLeft
|
||||||
// console.log(e.detail.scrollLeft)
|
// console.log(e.detail.scrollLeft)
|
||||||
}
|
}
|
||||||
|
const startX = ref(0)
|
||||||
|
const openwhitchindex = ref(-1)
|
||||||
|
const ts = (e) => {
|
||||||
|
startX.value = e.touches[0].clientX;
|
||||||
|
}
|
||||||
|
const canmove = (e : any, index : number) => {
|
||||||
|
const moveX = e.touches[0].clientX
|
||||||
|
const diff = moveX - startX.value
|
||||||
|
// diff 为负值就是向左滑
|
||||||
|
if (diff < -40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = index
|
||||||
|
}
|
||||||
|
if (diff > 40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = -1
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
|
@ -226,8 +253,21 @@
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
margin-right: 0.7vw;
|
margin-right: 0.7vw;
|
||||||
|
|
||||||
border: 2px solid rgba(245, 246, 248, 1);
|
// border: 2px solid rgba(245, 246, 248, 1);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
// background-color: red;
|
||||||
|
|
||||||
|
.fler-view {
|
||||||
|
width: 44.3vw;
|
||||||
|
height: 27.3vw;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 1.6vw;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1.1vw;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 1px solid rgba(245, 246, 248, 1);
|
||||||
|
}
|
||||||
|
|
||||||
.jiao {
|
.jiao {
|
||||||
width: 3.4vw;
|
width: 3.4vw;
|
||||||
|
|
@ -259,7 +299,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.actve {
|
.actve {
|
||||||
border: 2rpx solid #3BA1FF !important;
|
border: 1px solid #3BA1FF !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carditem {
|
.carditem {
|
||||||
|
|
@ -268,20 +308,21 @@
|
||||||
background: #fff;
|
background: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
border-radius: 1.6vw;
|
border-radius: 1.6vw;
|
||||||
border: 2px solid rgba(245, 246, 248, 1);
|
// border: 2px solid rgba(245, 246, 248, 1);
|
||||||
|
|
||||||
|
|
||||||
.zkadd {
|
.zkadd {
|
||||||
width: 10vw;
|
width: 10vw;
|
||||||
height: 100%;
|
height: 103%;
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: -14vw;
|
right: -16.6vw;
|
||||||
|
// background-color: red;
|
||||||
|
|
||||||
>view {
|
>view {
|
||||||
width: 7vw;
|
width: 7vw;
|
||||||
|
|
@ -487,9 +528,12 @@
|
||||||
|
|
||||||
.gongyingshang {
|
.gongyingshang {
|
||||||
margin-top: -10rpx;
|
margin-top: -10rpx;
|
||||||
width: 500rpx; /* 你原来的宽度 */
|
width: 500rpx;
|
||||||
font-size: 1.4vw; /* 建议不要用 vw 混用 */
|
/* 你原来的宽度 */
|
||||||
line-height: 1.2; /* 行高（数字形式也可以），用于计算 */
|
font-size: 1.4vw;
|
||||||
|
/* 建议不要用 vw 混用 */
|
||||||
|
line-height: 1.2;
|
||||||
|
/* 行高（数字形式也可以），用于计算 */
|
||||||
color: #a9a9a9;
|
color: #a9a9a9;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
|
|
@ -498,13 +542,17 @@
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis; /* 单行兼容项 */
|
text-overflow: ellipsis;
|
||||||
|
/* 单行兼容项 */
|
||||||
|
|
||||||
/* 兼容与保底 */
|
/* 兼容与保底 */
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
white-space: normal; /* 确保允许换行 */
|
white-space: normal;
|
||||||
min-width: 0; /* 如果父容器是 flex 必需 */
|
/* 确保允许换行 */
|
||||||
max-height: calc(1.4 * 2 * 1em); /* 额外保底（可选） */
|
min-width: 0;
|
||||||
|
/* 如果父容器是 flex 必需 */
|
||||||
|
max-height: calc(1.4 * 2 * 1em);
|
||||||
|
/* 额外保底（可选） */
|
||||||
}
|
}
|
||||||
|
|
||||||
.speitem {
|
.speitem {
|
||||||
|
|
@ -514,7 +562,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// justify-content: center;
|
// justify-content: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -8.2vw;
|
top: 2.5vw;
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
|
|
||||||
.cardp {
|
.cardp {
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,10 @@
|
||||||
<view class="titletop">详情</view>
|
<view class="titletop">详情</view>
|
||||||
<view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower">
|
<view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower">
|
||||||
<view class="fler">
|
<view class="fler">
|
||||||
<scroll-view class="carditem guodu" v-for="(v,index) in InvoicingList" :key="index"
|
<view class="fler-view" @touchstart="ts($event)" @touchmove="canmove($event,0)">
|
||||||
@touchend="handleTouchEnd($event,v,index)" @touchstart="touchstart($event,v,index)"
|
<view class="carditem guodu"
|
||||||
scroll-with-animation scroll-x="true" :scroll-left="v.scrollleft">
|
:style="openwhitchindex === index? { transform: 'translateX(-14vw)' }: { transform: 'translateX(0)' }"
|
||||||
|
v-for="(v,index) in InvoicingList" :key="index">
|
||||||
<view class="speitem guodu" :class="v.zk?'spleft':''">
|
<view class="speitem guodu" :class="v.zk?'spleft':''">
|
||||||
<image :src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
|
<image :src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
|
||||||
mode="aspectFill"></image>
|
mode="aspectFill"></image>
|
||||||
|
|
@ -25,9 +26,11 @@
|
||||||
{{v.specificationModel}}</text>
|
{{v.specificationModel}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
<text v-if="v.multiUnitType=='1'">采购单价: ￥{{Number(v.oneUnitPrice).toFixed(2)}} </text>
|
<text v-if="v.multiUnitType=='1'">采购单价: ￥{{Number(v.oneUnitPrice).toFixed(2)}}
|
||||||
|
</text>
|
||||||
<text v-if="v.multiUnitType=='1'">采购单位: {{ v.oneUnit}}</text>
|
<text v-if="v.multiUnitType=='1'">采购单位: {{ v.oneUnit}}</text>
|
||||||
<text v-if="v.multiUnitType=='2'">采购单价: ￥{{Number(v.twoUnitPrice).toFixed(2)}} </text>
|
<text v-if="v.multiUnitType=='2'">采购单价: ￥{{Number(v.twoUnitPrice).toFixed(2)}}
|
||||||
|
</text>
|
||||||
<text v-if="v.multiUnitType=='2'">采购单位: {{ v.twoUnit}}</text>
|
<text v-if="v.multiUnitType=='2'">采购单位: {{ v.twoUnit}}</text>
|
||||||
<text v-if="v.multiUnitType=='3'">采购单价: ￥{{Number(v.referenceUnitPrice).toFixed(2)}}
|
<text v-if="v.multiUnitType=='3'">采购单价: ￥{{Number(v.referenceUnitPrice).toFixed(2)}}
|
||||||
</text>
|
</text>
|
||||||
|
|
@ -50,18 +53,19 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="add" @click.stop="clkzk(v,index)">
|
<view class="add" @click.stop="clkzk(v,index)">
|
||||||
<view v-if="v.isAdd==1">已添加</view>
|
<view v-if="v.isAdd==1">已添加</view>
|
||||||
<image class="guodu" :style="v.zk?'transform: rotate(180deg);':''"
|
<image class="guodu" :style="openwhitchindex === index?'transform: rotate(180deg);':''"
|
||||||
:src="'/static/index/procurement/l.png'" mode="aspectFill"></image>
|
:src="'/static/index/procurement/l.png'" mode="aspectFill" @click="openmore(index)"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="zkadd guodu" :class="v.isAdd==1?'zkf':''">
|
<view class="zkadd guodu">
|
||||||
<view @click.stop="crk(v,index)" @touchend.stop>出入库</view>
|
<view :style="v.isAdd==1?{marginLeft:`7vw`}:{}" @click.stop="crk(v,index)" @touchend.stop>出入库</view>
|
||||||
<view @click.stop="addcar(v)" v-if="v.isAdd!=1" @touchend.stop>
|
<view @click.stop="addcar(v)" v-if="v.isAdd!=1" @touchend.stop>
|
||||||
<view>
|
<view>
|
||||||
加购物车
|
加购物车
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -90,6 +94,7 @@
|
||||||
() => {
|
() => {
|
||||||
if (props.show == false) {
|
if (props.show == false) {
|
||||||
props.InvoicingList[0].scrollleft = 0;
|
props.InvoicingList[0].scrollleft = 0;
|
||||||
|
openwhitchindex.value = -1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['addcartory', 'tolower', 'solleft', 'crk'])
|
const emit = defineEmits(['addcartory', 'tolower', 'solleft', 'crk'])
|
||||||
|
|
@ -165,34 +170,52 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// const scrollLeft = ref(0)
|
const startX = ref(0)
|
||||||
// const scroll = (e)=>{
|
const openwhitchindex = ref(-1)
|
||||||
// scrollLeft.value = e.detail.scrollLeft
|
const ts = (e) => {
|
||||||
// // console.log(e.detail.scrollLeft)
|
startX.value = e.touches[0].clientX;
|
||||||
// }
|
}
|
||||||
|
const canmove = (e : any, index : number) => {
|
||||||
|
const moveX = e.touches[0].clientX
|
||||||
|
const diff = moveX - startX.value
|
||||||
|
// diff 为负值就是向左滑
|
||||||
|
if (diff < -40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = index
|
||||||
|
}
|
||||||
|
if (diff > 40) { // 👉 60px 阈值，随便改
|
||||||
|
openwhitchindex.value = -1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const openmore = (index:number) => {
|
||||||
|
if(openwhitchindex.value==-1){
|
||||||
|
openwhitchindex.value = index
|
||||||
|
}else{
|
||||||
|
openwhitchindex.value = -1
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.carditem {
|
.carditem {
|
||||||
width: 44.8vw;
|
width: 44.8vw;
|
||||||
height: 14.5vw;
|
height: 14.5vw;
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #D9DADC;
|
|
||||||
border-radius: 1.6vw;
|
border-radius: 1.6vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 1.1vw;
|
margin-bottom: 1.1vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
.zkadd {
|
.zkadd {
|
||||||
width: 14vw;
|
min-width: 14vw;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
// background-color: red;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
right: -14vw;
|
right: -14vw;
|
||||||
|
|
||||||
>view {
|
>view {
|
||||||
|
|
@ -241,8 +264,10 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2vw;
|
top: 0;
|
||||||
margin-left: -1vw;
|
// margin-left: -1vw;
|
||||||
|
// background-color: red;
|
||||||
|
margin-right: 1.7vw;
|
||||||
|
|
||||||
>view {
|
>view {
|
||||||
width: 4.5vw;
|
width: 4.5vw;
|
||||||
|
|
@ -257,8 +282,8 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.8vw;
|
top: 0.6vw;
|
||||||
right: 0.8vw;
|
right: -1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
image {
|
image {
|
||||||
|
|
@ -268,10 +293,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.msitem {
|
.msitem {
|
||||||
width: 25vw;
|
min-width: 25vw;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 1vw;
|
padding: 1vw;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
// margin-right: 2.7vw;
|
||||||
|
|
||||||
>view {
|
>view {
|
||||||
margin-top: 0.5vw;
|
margin-top: 0.5vw;
|
||||||
|
|
@ -389,12 +415,12 @@
|
||||||
// margin-left: -15vw !important;
|
// margin-left: -15vw !important;
|
||||||
// }
|
// }
|
||||||
.speitem {
|
.speitem {
|
||||||
width: 15vw;
|
min-width: 15vw;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2vw;
|
// top: -2vw;
|
||||||
|
|
||||||
.cardp {
|
.cardp {
|
||||||
width: 12.5vw;
|
width: 12.5vw;
|
||||||
|
|
@ -445,6 +471,18 @@
|
||||||
.fler {
|
.fler {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
position: relative;
|
||||||
|
.fler-view {
|
||||||
|
width: 44.8vw;
|
||||||
|
height: 14.5vw;
|
||||||
|
border-radius: 1.6vw;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 1.1vw;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #D9DADC;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -382,6 +382,7 @@
|
||||||
const qk = () => {
|
const qk = () => {
|
||||||
ification.value = false;
|
ification.value = false;
|
||||||
addflag.value = false;
|
addflag.value = false;
|
||||||
|
// console.log("啥啊")
|
||||||
}
|
}
|
||||||
const confirm = (e : any) => {
|
const confirm = (e : any) => {
|
||||||
form.categoryId = e.categoryId;
|
form.categoryId = e.categoryId;
|
||||||
|
|
@ -415,7 +416,7 @@
|
||||||
const addcartory = (e : any) => {
|
const addcartory = (e : any) => {
|
||||||
// e把index覆盖了导致index永远是0
|
// e把index覆盖了导致index永远是0
|
||||||
// console.log("我要测试",e)
|
// console.log("我要测试",e)
|
||||||
console.log("啥啊", e)
|
// console.log("啥啊", e)
|
||||||
if (!e.suppliers_dictText || !e.suppliers) {
|
if (!e.suppliers_dictText || !e.suppliers) {
|
||||||
openerror.value = true;
|
openerror.value = true;
|
||||||
errmsg.value = `此物料暂无供应商，请联系管理员`
|
errmsg.value = `此物料暂无供应商，请联系管理员`
|
||||||
|
|
|
||||||
|
|
@ -125,7 +125,6 @@
|
||||||
|
|
||||||
const addcartory = (e : any) => {
|
const addcartory = (e : any) => {
|
||||||
caigouobj.value = e;
|
caigouobj.value = e;
|
||||||
|
|
||||||
addflag.value = true;
|
addflag.value = true;
|
||||||
}
|
}
|
||||||
const confirm = (e : any) => {
|
const confirm = (e : any) => {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,82 @@
|
||||||
import { openBlock, createElementBlock, createCommentVNode } from "vue";
|
import { resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, Fragment, renderList, normalizeStyle } from "vue";
|
||||||
import { _ as _export_sfc } from "../../_plugin-vue_export-helper.js";
|
import { _ as _export_sfc } from "../../_plugin-vue_export-helper.js";
|
||||||
const _style_0 = {};
|
const _style_0 = { "page": { "": { "flex": 1, "backgroundColor": "#f5f6fa", "height": 100 } }, "controls": { "": { "paddingTop": 20, "paddingRight": 20, "paddingBottom": 20, "paddingLeft": 20, "backgroundColor": "#ffffff" } }, "row": { "": { "flexDirection": "row", "alignItems": "center", "marginBottom": 10 } }, "btn": { "": { "paddingTop": 10, "paddingRight": 14, "paddingBottom": 10, "paddingLeft": 14, "borderRadius": 6, "backgroundColor": "#2d8cf0", "color": "#ffffff", "marginRight": 10 } }, "stat": { "": { "marginRight": 14, "fontSize": 28 } }, "hint": { "": { "color": "#888888", "fontSize": 24, "marginTop": 6 } }, "list": { "": { "flex": 1 } }, "item": { "": { "height": 160, "paddingTop": 12, "paddingRight": 12, "paddingBottom": 12, "paddingLeft": 12, "flexDirection": "row", "alignItems": "center", "borderBottomWidth": 1, "borderBottomStyle": "solid", "borderBottomColor": "rgba(0,0,0,0.06)", "backgroundColor": "#ffffff" } }, "thumb": { "": { "width": 120, "height": 120, "borderRadius": 8, "marginRight": 12 } }, "meta": { "": { "flex": 1 } }, "title": { "": { "fontSize": 30, "fontWeight": "bold", "marginBottom": 8 } }, "desc": { "": { "fontSize": 24, "color": "#666666", "lineHeight": 32 } } };
|
||||||
const _sfc_main = {};
|
const _sfc_main = {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
// FPS 测量
|
||||||
|
measuring: false,
|
||||||
|
fpsDisplay: 0,
|
||||||
|
avgFrameMsDisplay: 0,
|
||||||
|
// 内部用
|
||||||
|
_frames: [],
|
||||||
|
_rafId: null,
|
||||||
|
_idleTO: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
generate(n) {
|
||||||
|
const list = [];
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
list.push({
|
||||||
|
id: i + 1,
|
||||||
|
color: this._randColor()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.items = list;
|
||||||
|
this.fpsDisplay = 0;
|
||||||
|
this.avgFrameMsDisplay = 0;
|
||||||
|
},
|
||||||
|
clearList() {
|
||||||
|
this.items = [];
|
||||||
|
this.fpsDisplay = 0;
|
||||||
|
this.avgFrameMsDisplay = 0;
|
||||||
|
},
|
||||||
|
_randColor() {
|
||||||
|
const h = Math.floor(Math.random() * 360);
|
||||||
|
const s = 60 + Math.floor(Math.random() * 20);
|
||||||
|
const l = 55 + Math.floor(Math.random() * 10);
|
||||||
|
return `hsl(${h} ${s}% ${l}%)`;
|
||||||
|
},
|
||||||
|
// 滚动回调（来自原生 nvue scroll-view）
|
||||||
|
onScroll(e) {
|
||||||
|
if (!this.measuring)
|
||||||
|
this._startMeasure();
|
||||||
|
clearTimeout(this._idleTO);
|
||||||
|
this._idleTO = setTimeout(() => {
|
||||||
|
this._stopMeasure();
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
_startMeasure() {
|
||||||
|
this.measuring = true;
|
||||||
|
this._frames = [];
|
||||||
|
},
|
||||||
|
_stopMeasure() {
|
||||||
|
this.measuring = false;
|
||||||
|
if (this._rafId) {
|
||||||
|
cancelAnimationFrame(this._rafId);
|
||||||
|
this._rafId = null;
|
||||||
|
}
|
||||||
|
if (this._frames.length < 2) {
|
||||||
|
this.fpsDisplay = 0;
|
||||||
|
this.avgFrameMsDisplay = 0;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const intervals = [];
|
||||||
|
for (let i = 1; i < this._frames.length; i++) {
|
||||||
|
intervals.push(this._frames[i] - this._frames[i - 1]);
|
||||||
|
}
|
||||||
|
const sum = intervals.reduce((a, b) => a + b, 0);
|
||||||
|
const avg = sum / intervals.length;
|
||||||
|
const fps = 1e3 / avg;
|
||||||
|
this.avgFrameMsDisplay = avg.toFixed(2);
|
||||||
|
this.fpsDisplay = Math.round(fps);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
|
const _component_button = resolveComponent("button");
|
||||||
return openBlock(), createElementBlock("scroll-view", {
|
return openBlock(), createElementBlock("scroll-view", {
|
||||||
scrollY: true,
|
scrollY: true,
|
||||||
showScrollbar: true,
|
showScrollbar: true,
|
||||||
|
|
@ -10,7 +84,120 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||||
bubble: "true",
|
bubble: "true",
|
||||||
style: { flexDirection: "column" }
|
style: { flexDirection: "column" }
|
||||||
}, [
|
}, [
|
||||||
createCommentVNode(' <div class="page">\r\n <div class="controls">\r\n <div class="row">\r\n <button class="btn" @click="generate(2000)">生成 2000 项</button>\r\n <button class="btn" @click="generate(5000)">生成 5000 项</button>\r\n <button class="btn" @click="clearList">清空</button>\r\n </div>\r\n <div class="row">\r\n <text class="stat">FPS: {{fpsDisplay}}</text>\r\n <text class="stat">平均帧(ms): {{avgFrameMsDisplay}}</text>\r\n <text class="stat">items: {{items.length}}</text>\r\n </div>\r\n <div class="hint">说明：向下快速滚动列表以测试渲染/滚动性能；nvue 将使用原生渲染。</div>\r\n </div>\r\n\r\n <scroll-view class="list" :scroll-y="true" show-scrollbar="true" @scroll="onScroll">\r\n <div class="item" v-for="item in items" :key="item.id">\r\n <div class="thumb" :style="{backgroundColor: item.color}"></div>\r\n <div class="meta">\r\n <text class="title">Item #{{item.id}}</text>\r\n <text class="desc">这是第 {{item.id}} 个条目，用于增加每个 DOM 的复杂度以测试渲染成本。多行文本强制布局多次换行，模拟真实列表。</text>\r\n </div>\r\n </div>\r\n </scroll-view>\r\n </div> ')
|
createElementVNode("div", { class: "page" }, [
|
||||||
|
createElementVNode("div", { class: "controls" }, [
|
||||||
|
createElementVNode("div", { class: "row" }, [
|
||||||
|
createVNode(_component_button, {
|
||||||
|
class: "btn",
|
||||||
|
onClick: _cache[0] || (_cache[0] = ($event) => $options.generate(2e3))
|
||||||
|
}, {
|
||||||
|
default: withCtx(() => [
|
||||||
|
createTextVNode("生成 2000 项")
|
||||||
|
]),
|
||||||
|
_: 1
|
||||||
|
/* STABLE */
|
||||||
|
}),
|
||||||
|
createVNode(_component_button, {
|
||||||
|
class: "btn",
|
||||||
|
onClick: _cache[1] || (_cache[1] = ($event) => $options.generate(5e3))
|
||||||
|
}, {
|
||||||
|
default: withCtx(() => [
|
||||||
|
createTextVNode("生成 5000 项")
|
||||||
|
]),
|
||||||
|
_: 1
|
||||||
|
/* STABLE */
|
||||||
|
}),
|
||||||
|
createVNode(_component_button, {
|
||||||
|
class: "btn",
|
||||||
|
onClick: $options.clearList
|
||||||
|
}, {
|
||||||
|
default: withCtx(() => [
|
||||||
|
createTextVNode("清空")
|
||||||
|
]),
|
||||||
|
_: 1
|
||||||
|
/* STABLE */
|
||||||
|
}, 8, ["onClick"])
|
||||||
|
]),
|
||||||
|
createElementVNode("div", { class: "row" }, [
|
||||||
|
createElementVNode(
|
||||||
|
"u-text",
|
||||||
|
{ class: "stat" },
|
||||||
|
"FPS: " + toDisplayString($data.fpsDisplay),
|
||||||
|
1
|
||||||
|
/* TEXT */
|
||||||
|
),
|
||||||
|
createElementVNode(
|
||||||
|
"u-text",
|
||||||
|
{ class: "stat" },
|
||||||
|
"平均帧(ms): " + toDisplayString($data.avgFrameMsDisplay),
|
||||||
|
1
|
||||||
|
/* TEXT */
|
||||||
|
),
|
||||||
|
createElementVNode(
|
||||||
|
"u-text",
|
||||||
|
{ class: "stat" },
|
||||||
|
"items: " + toDisplayString($data.items.length),
|
||||||
|
1
|
||||||
|
/* TEXT */
|
||||||
|
)
|
||||||
|
]),
|
||||||
|
createElementVNode("div", { class: "hint" }, [
|
||||||
|
createElementVNode("u-text", null, "说明：向下快速滚动列表以测试渲染/滚动性能；nvue 将使用原生渲染。")
|
||||||
|
])
|
||||||
|
]),
|
||||||
|
createElementVNode(
|
||||||
|
"scroll-view",
|
||||||
|
{
|
||||||
|
class: "list",
|
||||||
|
scrollY: true,
|
||||||
|
showScrollbar: "true",
|
||||||
|
onScroll: _cache[2] || (_cache[2] = (...args) => $options.onScroll && $options.onScroll(...args))
|
||||||
|
},
|
||||||
|
[
|
||||||
|
(openBlock(true), createElementBlock(
|
||||||
|
Fragment,
|
||||||
|
null,
|
||||||
|
renderList($data.items, (item) => {
|
||||||
|
return openBlock(), createElementBlock("div", {
|
||||||
|
class: "item",
|
||||||
|
key: item.id
|
||||||
|
}, [
|
||||||
|
createElementVNode(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
class: "thumb",
|
||||||
|
style: normalizeStyle({ backgroundColor: item.color })
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
4
|
||||||
|
/* STYLE */
|
||||||
|
),
|
||||||
|
createElementVNode("div", { class: "meta" }, [
|
||||||
|
createElementVNode(
|
||||||
|
"u-text",
|
||||||
|
{ class: "title" },
|
||||||
|
"Item #" + toDisplayString(item.id),
|
||||||
|
1
|
||||||
|
/* TEXT */
|
||||||
|
),
|
||||||
|
createElementVNode(
|
||||||
|
"u-text",
|
||||||
|
{ class: "desc" },
|
||||||
|
"这是第 " + toDisplayString(item.id) + " 个条目，用于增加每个 DOM 的复杂度以测试渲染成本。多行文本强制布局多次换行，模拟真实列表。",
|
||||||
|
1
|
||||||
|
/* TEXT */
|
||||||
|
)
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
}),
|
||||||
|
128
|
||||||
|
/* KEYED_FRAGMENT */
|
||||||
|
))
|
||||||
|
],
|
||||||
|
32
|
||||||
|
/* NEED_HYDRATION */
|
||||||
|
)
|
||||||
|
])
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
const ceshi = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["styles", [_style_0]], ["__file", "D:/hldy_app_mini/pages/login/ceshi.nvue"]]);
|
const ceshi = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["styles", [_style_0]], ["__file", "D:/hldy_app_mini/pages/login/ceshi.nvue"]]);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue