261 lines
5.9 KiB
Vue
261 lines
5.9 KiB
Vue
|
<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="(char, idx) in stringShowChars" :key="idx">
|
|||
|
<view class="stringShow-kuai">{{ char }}</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
<view class="plsbuy-bottom">
|
|||
|
<view class="plsbuy-bottom-blue" @click="closeIt">确认</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script setup lang="ts">
|
|||
|
import { ref, watch } from 'vue'
|
|||
|
const emit = defineEmits(['right'])
|
|||
|
const props = defineProps({ doOnce: { type: Number, required: true }, translateNumber: { type: [Number, String], required: true } })
|
|||
|
|
|||
|
// 输入字符串
|
|||
|
const inputString = ref('')
|
|||
|
const stringShowChars = ref<string[]>([])
|
|||
|
const blueNumber = ref(-1)
|
|||
|
const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.', 'CE', 'AC']
|
|||
|
|
|||
|
// 当 props.doOnce 或 props.translateNumber 变化时初始化显示
|
|||
|
watch(
|
|||
|
() => props.doOnce,
|
|||
|
() => {
|
|||
|
// 直接将传入值转为字符串
|
|||
|
inputString.value = String(props.translateNumber)
|
|||
|
updateDisplay()
|
|||
|
},
|
|||
|
{ immediate: true }
|
|||
|
)
|
|||
|
|
|||
|
function clickKuai(item : any, index : number) {
|
|||
|
blueNumber.value = index
|
|||
|
setTimeout(() => { blueNumber.value = -1 }, 300)
|
|||
|
|
|||
|
if (item === 'AC') {
|
|||
|
inputString.value = ''
|
|||
|
} else if (item === 'CE') {
|
|||
|
inputString.value = inputString.value.slice(0, -1)
|
|||
|
} else if (item === '.') {
|
|||
|
if (!inputString.value.includes('.') && inputString.value.length < 7) {
|
|||
|
inputString.value = inputString.value || '0'
|
|||
|
inputString.value += '.'
|
|||
|
}
|
|||
|
} else {
|
|||
|
const char = item.toString()
|
|||
|
if (canAppend(char)) {
|
|||
|
inputString.value += char
|
|||
|
}
|
|||
|
}
|
|||
|
updateDisplay()
|
|||
|
}
|
|||
|
|
|||
|
function closeIt() {
|
|||
|
const val = parseFloat(inputString.value) || 0
|
|||
|
emit('right', val)
|
|||
|
}
|
|||
|
|
|||
|
function updateDisplay() {
|
|||
|
// 如果传入值正好为 "0",显示全空白
|
|||
|
if (inputString.value === '0') {
|
|||
|
stringShowChars.value = Array(7).fill(' ')
|
|||
|
return
|
|||
|
}
|
|||
|
// 空时显示空白
|
|||
|
if (!inputString.value) {
|
|||
|
stringShowChars.value = Array(7).fill(' ')
|
|||
|
return
|
|||
|
}
|
|||
|
// 截取或补全至七位
|
|||
|
const padded = padToSeven(inputString.value)
|
|||
|
stringShowChars.value = padded.split('')
|
|||
|
}
|
|||
|
|
|||
|
// 限制输入是否可追加
|
|||
|
function canAppend(char : string) {
|
|||
|
const newStr = inputString.value + char
|
|||
|
const parts = newStr.split('.')
|
|||
|
if (parts[1] && parts[1].length > 2) return false
|
|||
|
return newStr.length <= 7
|
|||
|
}
|
|||
|
|
|||
|
function padToSeven(str : string) {
|
|||
|
// 1. 分离整数和小数部分
|
|||
|
let [intPart, decPart] = str.split('.');
|
|||
|
|
|||
|
// 2. 限制小数最多两位
|
|||
|
if (decPart !== undefined) {
|
|||
|
decPart = decPart.slice(0, 2);
|
|||
|
}
|
|||
|
|
|||
|
// 3. 去掉整数部分的前导零,但保留 "0"(防止把 "0.56" 变成 ".56")
|
|||
|
// 如果去掉后变成空串,就手动置为 "0"
|
|||
|
intPart = intPart.replace(/^0+/, '');
|
|||
|
if (intPart === '') {
|
|||
|
intPart = '0';
|
|||
|
}
|
|||
|
|
|||
|
// 4. 重组字符串
|
|||
|
let newStr = decPart !== undefined ? `${intPart}.${decPart}` : intPart;
|
|||
|
|
|||
|
// 5. 如果总长度超过 7,截断左侧多余字符
|
|||
|
if (newStr.length > 7) {
|
|||
|
newStr = newStr.slice(0, 7);
|
|||
|
}
|
|||
|
|
|||
|
// 6. 最后补齐到 7 位(左侧补空格)
|
|||
|
return newStr.padStart(7, ' ');
|
|||
|
}
|
|||
|
</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;
|
|||
|
overflow: hidden;
|
|||
|
}
|
|||
|
|
|||
|
.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: 600rpx;
|
|||
|
height: 500rpx;
|
|||
|
margin-top: 20rpx;
|
|||
|
flex-wrap: wrap;
|
|||
|
display: flex;
|
|||
|
margin-left: 45rpx;
|
|||
|
|
|||
|
.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: 25rpx;
|
|||
|
// flex-wrap: wrap;
|
|||
|
display: flex;
|
|||
|
|
|||
|
.stringShow-kuai {
|
|||
|
display: flex;
|
|||
|
justify-content: center;
|
|||
|
align-items: center;
|
|||
|
// background-color: #DCDCEE;
|
|||
|
border-radius: 20rpx;
|
|||
|
// border-radius: 15rpx;
|
|||
|
font-size: 45rpx;
|
|||
|
font-weight: 500;
|
|||
|
margin: 0 15rpx;
|
|||
|
width: 55rpx;
|
|||
|
height: 55rpx;
|
|||
|
border: 3rpx solid #303C57;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.qinggou-font {
|
|||
|
font-size: 35rpx;
|
|||
|
font-weight: 500;
|
|||
|
margin-top: 10rpx;
|
|||
|
display: flex;
|
|||
|
justify-content: center;
|
|||
|
}
|
|||
|
</style>
|