291 lines
7.0 KiB
Vue
291 lines
7.0 KiB
Vue
<template>
|
|
<view>
|
|
<view class="jsuq guodu" v-if="show">
|
|
<view class="leftsa">
|
|
<view class="shu">数量</view>
|
|
<view class="stringShow-kuai">
|
|
<view v-for="(item,index) in stringShow" :key="index">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
<view class="jiajian">
|
|
<view class="jj" @click="jjnum(-1)" @touchstart="handleTouchStart(-1)" @touchend="handleTouchEnd">
|
|
-
|
|
</view>
|
|
<view class="jj" @click="jjnum(1)" @touchstart="handleTouchStart(1)" @touchend="handleTouchEnd">
|
|
+
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="rigsbt">
|
|
<view class="calculator-father">
|
|
<view v-for="(item,index) in calculatorArray" :key="index">
|
|
<view class="calculator-kuai" v-if="item==`AC`" @click="clickKuai(item,index)">
|
|
<image src="/static/cleanone.png" mode="aspectFill"
|
|
style="width: 50%;height: 50%;margin-left: -5rpx;"></image>
|
|
|
|
</view>
|
|
<view class="calculator-kuai" v-else-if="item==`AE`" style="font-size: 1.2vw;color: #0385FA;"
|
|
@click="clickKuai(item,index)">
|
|
同步
|
|
</view>
|
|
<view class="calculator-kuai" v-else @click="clickKuai(item,index)">
|
|
{{item}}
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
|
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
|
|
import { queryQld } from '../api/lunpan.js'
|
|
const stringShow = ref("0000");
|
|
const relNumber = ref(0);
|
|
const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "AC", "AE"];
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean
|
|
},
|
|
tb: {
|
|
type: Number
|
|
},
|
|
idex: {
|
|
type: Number
|
|
},
|
|
pdsl: {
|
|
type: Number
|
|
},
|
|
pddType: {
|
|
type: String
|
|
}
|
|
});
|
|
watch(() => props.show,
|
|
() => {
|
|
if (props.show == true) {
|
|
relNumber.value = props.pdsl ? props.pdsl : 0;
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value);
|
|
isZero.value = false
|
|
} else {
|
|
relNumber.value = 0;
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
|
}
|
|
})
|
|
const emit = defineEmits(['pddjjnum'])
|
|
const isZero = ref(false);
|
|
const clickKuai = (item : any, index : number) => {
|
|
if (props.pddType != '1') { return }
|
|
if (item == "AE") {
|
|
relNumber.value = props.tb;
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value);
|
|
emit('pddjjnum', relNumber.value, props.idex);
|
|
return
|
|
}
|
|
if (item == "AC") {
|
|
relNumber.value = Math.trunc(relNumber.value / 10)
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value);
|
|
emit('pddjjnum', relNumber.value, props.idex);
|
|
return
|
|
}
|
|
if (isZero.value == false) {
|
|
isZero.value = true;
|
|
relNumber.value = item;
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value);
|
|
emit('pddjjnum', relNumber.value, props.idex);
|
|
return
|
|
}
|
|
if (digitCountByString(relNumber.value) > 3) {
|
|
|
|
} else {
|
|
if (!relNumber.value) {
|
|
relNumber.value = item
|
|
} else {
|
|
relNumber.value = relNumber.value * 10 + item;
|
|
}
|
|
emit('pddjjnum', relNumber.value, props.idex);
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
|
}
|
|
|
|
}
|
|
const InteroutId = ref(null)
|
|
let longPressTimer = null;
|
|
let longPressed = false;
|
|
const handleTouchStart = (e : number) => {
|
|
if (props.pddType != '1') { return }
|
|
longPressed = false;
|
|
if (longPressTimer) {
|
|
clearTimeout(longPressTimer);
|
|
longPressTimer = null;
|
|
}
|
|
longPressTimer = setTimeout(() => {
|
|
longPressTimer = null;
|
|
longPressed = true;
|
|
Interval(e)
|
|
}, 800); // 1000ms = 1s
|
|
}
|
|
const handleTouchEnd = () => {
|
|
if (longPressTimer) {
|
|
clearTimeout(longPressTimer);
|
|
longPressTimer = null;
|
|
// console.log('未达到 1 秒：取消长按');
|
|
return;
|
|
}
|
|
|
|
// 如果已经触发过长按
|
|
if (longPressed) {
|
|
// console.log('长按已触发，用户放手');
|
|
clearInterval(InteroutId.value);
|
|
longPressed = false; // 重置状态（按需）
|
|
} else {
|
|
console.log('无效状态（通常不会到这）');
|
|
}
|
|
}
|
|
const Interval = (e : number) => {
|
|
InteroutId.value = setInterval(() => {
|
|
jjnum(e);
|
|
}, 120);
|
|
}
|
|
const jjnum = (e : number) => {
|
|
if (props.pddType != '1') { return }
|
|
let num = 9999;
|
|
if (num <= relNumber.value && e == 1) { relNumber.value = num; return }
|
|
if (relNumber.value <= 0 && e == -1) { relNumber.value = 0; return }
|
|
relNumber.value += e;
|
|
stringShow.value = toFixed4ByPadStart(relNumber.value)
|
|
emit('pddjjnum', relNumber.value, props.idex)
|
|
}
|
|
function digitCountByString(n) {
|
|
const s = Math.abs(n).toString();
|
|
return s.length;
|
|
}
|
|
function toFixed4ByPadStart(n) {
|
|
const intPart = Math.floor(Math.abs(n));
|
|
return String(intPart).padStart(4, '0');
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.jsuq {
|
|
width: 44.4vw;
|
|
display: flex;
|
|
height: 16vw;
|
|
justify-content: space-between;
|
|
// background-color: red;
|
|
margin-top: -2vw;
|
|
|
|
.rigsbt {
|
|
width: 19vw;
|
|
height: 100%;
|
|
margin-right: 8vw;
|
|
// background-color: blue;
|
|
|
|
.calculator-father {
|
|
width: 23vw;
|
|
height: 90%;
|
|
margin: 0 auto 0;
|
|
flex-wrap: wrap;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
|
|
|
.calculator-kuai {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url('/static/index/procurement/bt.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 1.5vw;
|
|
font-weight: 500;
|
|
width: 5vw;
|
|
height: 4vw;
|
|
}
|
|
|
|
.calculator-kuai:active {
|
|
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
|
color: #fff !important;
|
|
font-weight: 500;
|
|
border-radius: 1.5vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-size: 100% 100%;
|
|
font-size: 1.5vw;
|
|
width: 5vw;
|
|
height: 4vw;
|
|
}
|
|
}
|
|
}
|
|
|
|
.leftsa {
|
|
width: 12vw;
|
|
height: 80%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 0 1.5vw;
|
|
margin-left: 2.5vw;
|
|
|
|
.shu {
|
|
font-weight: 400;
|
|
font-size: 1.2vw;
|
|
color: #222222;
|
|
}
|
|
|
|
.stringShow-kuai {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 9vw;
|
|
height: 3.4vw;
|
|
background: #F3F5F9;
|
|
border-radius: 1vw;
|
|
border: 1px solid #CBCFD0;
|
|
justify-content: space-around;
|
|
box-shadow: 0rpx 0.1vw 0.3vw 0rpx rgba(140, 143, 153, 0.17) inset;
|
|
|
|
view {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.7vw;
|
|
font-weight: 500;
|
|
width: 2.2vw;
|
|
height: 3.4vw;
|
|
}
|
|
}
|
|
|
|
.jiajian {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.jj {
|
|
width: 4.2vw;
|
|
height: 4.2vw;
|
|
margin: 0 1vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url('/static/index/procurement/bt.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
border-radius: 25rpx;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.jj:active {
|
|
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #DCDCEE;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |