310 lines
6.5 KiB
Vue
310 lines
6.5 KiB
Vue
|
<!-- 入库单 -->
|
|||
|
|
<template>
|
|||
|
|
<view class="draw-all">
|
|||
|
|
<view class="draw-contain">
|
|||
|
|
<view style="margin-left: 80rpx;">
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<!-- <view class="plsbuy-bottom">
|
|||
|
|
<view class="plsbuy-bottom-blue" @click="closeIt">
|
|||
|
|
确认
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<view class="button-card">
|
|||
|
|
<view class="swiper-button-white" @click="close()">
|
|||
|
|
关闭
|
|||
|
|
</view>
|
|||
|
|
<view class="swiper-button-blue" @click="closeIt()">
|
|||
|
|
确定
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
onMounted,
|
|||
|
|
onBeforeUnmount,
|
|||
|
|
computed,
|
|||
|
|
nextTick,
|
|||
|
|
watch
|
|||
|
|
} from 'vue';
|
|||
|
|
const emit = defineEmits(['right',"close"])
|
|||
|
|
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 close = () =>{
|
|||
|
|
emit('close')
|
|||
|
|
}
|
|||
|
|
// 这个方法是查看数字有多少位
|
|||
|
|
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>
|
|||
|
|
.draw-all {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background-color: #fff;
|
|||
|
|
// border-top-left-radius: 80rpx;
|
|||
|
|
// border-bottom-left-radius: 80rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.draw-flex {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.draw-contain {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100vh);
|
|||
|
|
background-image: url("/static/index/fanpink.png");
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-attachment: fixed;
|
|||
|
|
background-size: cover;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-card {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
.swiper-button-white {
|
|||
|
|
background: linear-gradient(to bottom, #D5E0F8, #ECF6FF);
|
|||
|
|
border: 2rpx solid #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
// margin: 0 10rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-button-blue {
|
|||
|
|
background: linear-gradient(to right bottom, #00c9ff, #0076ff);
|
|||
|
|
border: 2rpx solid #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 0 10rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
margin-right: 40rpx;
|
|||
|
|
}
|
|||
|
|
.draw-title {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-top: 30rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
.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: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|