225 lines
4.7 KiB
Vue
225 lines
4.7 KiB
Vue
<template>
|
||
<view class="plsbuy-contain">
|
||
<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="quxiao" @click="colse">
|
||
取消
|
||
</view>
|
||
<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)
|
||
}
|
||
const colse = ()=>{
|
||
emit('colse')
|
||
}
|
||
// 这个方法是查看数字有多少位
|
||
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: rgba(250, 251, 252, 1);
|
||
overflow: hidden;
|
||
border-radius: 2.2vw;
|
||
}
|
||
|
||
|
||
.plsbuy-bottom {
|
||
width: 90%;
|
||
margin-top: 20rpx;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
font-size: 35rpx;
|
||
margin-left: 5%;
|
||
view{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 180rpx;
|
||
height: 70rpx;
|
||
color: rgba(92, 121, 146, 1);
|
||
border-radius: 35rpx;
|
||
font-size: 30rpx;
|
||
border: 1px solid #A2B4CF;
|
||
}
|
||
.quxiao{
|
||
background: #FFFFFF;
|
||
}
|
||
.plsbuy-bottom-blue {
|
||
background: linear-gradient(-61deg, #EAF5FF, #CBE7FF);
|
||
}
|
||
}
|
||
|
||
.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: url('/static/index/warehouse/procurement/bt.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 25rpx;
|
||
font-size: 42rpx;
|
||
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: 42rpx;
|
||
font-weight: 500;
|
||
margin: 0 15rpx;
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
border: 2rpx solid rgba(203, 207, 208, 1);
|
||
}
|
||
}
|
||
|
||
.qinggou-font {
|
||
font-size: 27rpx;
|
||
font-weight: 500;
|
||
margin-top: 10rpx;
|
||
|
||
}
|
||
</style> |