hldy_app/component/storeroom/components/calculator.vue

243 lines
5.0 KiB
Vue
Raw Permalink Normal View History

2025-05-08 17:34:54 +08:00
<template>
<view class="plsbuy-contain">
<view class="draw-title">
<view class="draw-flex">
<view class="draw-title-gun"></view>
<view class="draw-title-font">请购数量</view>
</view>
</view>
<view class="calculator-father">
<view v-for="(item,index) in calculatorArray" :key="index">
<view :class="blueNumber == index ? `calculator-kuai-target` : `calculator-kuai`"
@click="clickKuai(item,index)">
{{item}}
</view>
</view>
</view>
<view class="qinggou-font">
请购数量
</view>
<view class="stringShow-father">
<view v-for="(item,index) in stringShow" :key="index">
<view class="stringShow-kuai">
{{item}}
</view>
</view>
</view>
<view class="plsbuy-bottom">
<view class="plsbuy-bottom-blue" @click="closeIt">
确认
</view>
</view>
</view>
</template>
<script setup lang="ts">
import {
ref,
onMounted,
onBeforeUnmount,
computed,
nextTick,
watch
} from 'vue';
const emit = defineEmits(['right'])
const blueNumber = ref(-1);
const props = defineProps({
doOnce: {
type: Number,
required: true,
},
translateNumber: {
type: Number,
required: true,
},
});
watch(
() => props.doOnce,
() => {
relNumber.value = props.translateNumber
stringShow.value = toFixed4ByPadStart(relNumber.value)
}
)
const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, "AC", 0, "CE"];
const stringShow = ref("0000");
const relNumber = ref(0);
// const isZero = ref(false);
const clickKuai = (item : any, index : number) => {
blueNumber.value = index;
setTimeout(() => {
blueNumber.value = -1
}, 300)
if (item == "AC") {
relNumber.value = 0;
stringShow.value = "0000"
return
}
if (item == "CE") {
relNumber.value = Math.trunc(relNumber.value / 10)
stringShow.value = toFixed4ByPadStart(relNumber.value)
return
}
if (digitCountByString(relNumber.value) > 3) {
} else {
if (!relNumber.value) {
relNumber.value = item
} else {
relNumber.value = relNumber.value * 10 + item;
}
stringShow.value = toFixed4ByPadStart(relNumber.value)
}
}
const closeIt = () => {
emit('right', relNumber.value)
}
// 这个方法是查看数字有多少位
function digitCountByString(n) {
// 先处理负数
const s = Math.abs(n).toString();
// 若不想统计小数点,可去掉小数点后再取长度:
// return s.replace('.', '').length;
return s.length;
}
// 这个方法是将Number转为String
function toFixed4ByPadStart(n) {
// 1. 取绝对值并向下取整,防止小数和负号影响
const intPart = Math.floor(Math.abs(n));
// 2. 转字符串并 padStart 到长度 4不足时前面补 '0'
return String(intPart).padStart(4, '0');
}
</script>
<style lang="less" scoped>
.plsbuy-contain {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
background: url("/static/index/pink.png") center/cover;
2025-05-13 17:18:07 +08:00
overflow: hidden;
2025-05-08 17:34:54 +08:00
}
.draw-title {
width: 100%;
height: 60rpx;
display: flex;
justify-content: space-between;
padding-top: 30rpx;
.draw-flex {
display: flex;
}
.draw-title-gun {
margin-left: 20rpx;
margin-right: 20rpx;
width: 13rpx;
height: 40rpx;
background: linear-gradient(to bottom, #04BCED, #0160CE);
border-radius: 10rpx;
}
.draw-title-font {
font-size: 35rpx;
font-weight: 700;
}
}
.plsbuy-bottom {
width: 100%;
margin-top: 20rpx;
height: 70rpx;
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);
}
}
.calculator-father {
width: 420rpx;
height: 500rpx;
margin-top: 20rpx;
flex-wrap: wrap;
display: flex;
.calculator-kuai {
display: flex;
justify-content: center;
align-items: center;
background-color: #DCDCEE;
border-radius: 25rpx;
font-size: 45rpx;
font-weight: 500;
margin: 15rpx 20rpx 0 20rpx;
width: 100rpx;
height: 100rpx;
}
.calculator-kuai-target {
background: linear-gradient(to bottom, #00C9FF, #0076FF);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
background-color: #DCDCEE;
border-radius: 25rpx;
font-size: 45rpx;
font-weight: 500;
margin: 15rpx 20rpx 0 20rpx;
width: 100rpx;
height: 100rpx;
}
}
.stringShow-father {
width: 420rpx;
height: 70rpx;
margin-top: 20rpx;
margin-left: 23rpx;
// flex-wrap: wrap;
display: flex;
.stringShow-kuai {
display: flex;
justify-content: center;
align-items: center;
// background-color: #DCDCEE;
border-radius: 25rpx;
// border-radius: 15rpx;
font-size: 45rpx;
font-weight: 500;
margin: 0 15rpx;
width: 70rpx;
height: 70rpx;
border: 3rpx solid #303C57;
}
}
.qinggou-font {
font-size: 35rpx;
font-weight: 500;
margin-top: 10rpx;
}
</style>