更换正式环境,测试修改
This commit is contained in:
97
components/JPasswordInput/JPasswordInput.vue
Normal file
97
components/JPasswordInput/JPasswordInput.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view class="p-wrapper">
|
||||
<input class="p-input" type="number" v-model="info" :focus="vdata.isFoucs" :maxlength="num" @input="inputChange" />
|
||||
<view class="p-main" :style="{ margin: margin }">
|
||||
<div class="p-number flex-center" v-for="v in num" :key="v" :class="{ 'p-active': v <= info.length }"></div>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
const emits = defineEmits(['inputChange'])
|
||||
const props = defineProps({
|
||||
focus: { type: Boolean, default: false }, //是否自动获取焦点 默认false
|
||||
num: { type: Number, default: 6 }, //密码框数量
|
||||
margin: { type: String }, //边距
|
||||
})
|
||||
const info = ref('')
|
||||
|
||||
const vdata = reactive({
|
||||
isFoucs: false
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 解决无法聚焦的问题, 怀疑页面没有渲染好导致。 nextTick也不好使。
|
||||
// 偶尔出现: 1. 键盘不弹出, 2.键盘弹出, 输入无法聚焦的input.
|
||||
if(props.focus){
|
||||
setTimeout(() => {vdata.isFoucs = true}, 500)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const clearInput = () => (info.value = '')
|
||||
const inputChange = () => {
|
||||
emits('inputChange', info.value)
|
||||
}
|
||||
|
||||
|
||||
defineExpose({ clearInput })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.p-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 95rpx;
|
||||
height: 100%;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
width: 95rpx;
|
||||
height: 100%;
|
||||
}
|
||||
.p-input {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: -100vw;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
color: transparent;
|
||||
caret-color: transparent;
|
||||
}
|
||||
.p-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 95rpx;
|
||||
.p-number {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.p-active::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -67,16 +67,18 @@
|
||||
form.discount = (newval*100/form.price).toFixed(2)
|
||||
}
|
||||
function discountInput(newval){
|
||||
form.currentPrice=(form.price*newval/100).toFixed(2)
|
||||
form.currentPrice= uni.$utils.isMoney(form.price*newval/100).toFixed(2)
|
||||
}
|
||||
function currentPriceChange(newval){
|
||||
if(newval<0){
|
||||
form.currentPrice=0
|
||||
form.currentPrice = '0.00'
|
||||
form.discount=100
|
||||
return infoBox.showToast('实收金额不能小于0')
|
||||
}
|
||||
if(newval>props.price){
|
||||
form.currentPrice=props.price
|
||||
console.log(props.price)
|
||||
console.log(newval)
|
||||
if(newval > props.price){
|
||||
form.currentPrice = (uni.$utils.isMoney(props.price)*1).toFixed(2)
|
||||
form.discount=0
|
||||
return infoBox.showToast('实收金额不能大于应付金额')
|
||||
}
|
||||
@@ -95,7 +97,7 @@
|
||||
}
|
||||
|
||||
const $form = {
|
||||
price:props.price,
|
||||
price: props.price,
|
||||
currentPrice: props.price,
|
||||
discount: 100
|
||||
}
|
||||
@@ -103,7 +105,7 @@
|
||||
...$form
|
||||
})
|
||||
watch(()=>props.price,(newval)=>{
|
||||
form.price=newval
|
||||
form.price = (newval*1).toFixed(2)
|
||||
form.currentPrice=newval
|
||||
})
|
||||
function resetForm() {
|
||||
@@ -116,9 +118,10 @@
|
||||
|
||||
function open() {
|
||||
model.value.open()
|
||||
form.price=props.price
|
||||
form.price= (props.price*1).toFixed(2)
|
||||
form.discount=props.discount
|
||||
form.currentPrice=(props.discount*props.price/100).toFixed(2)
|
||||
console.log(form)
|
||||
}
|
||||
|
||||
function close() {
|
||||
|
||||
@@ -63,9 +63,7 @@
|
||||
function FileUploadselect(e) {
|
||||
for (let i in e.tempFiles) {
|
||||
const file = e.tempFiles[i]
|
||||
console.log(e)
|
||||
uploadFile(file).then(res => {
|
||||
console.log(res);
|
||||
imgList.value.push({
|
||||
url: res,
|
||||
path: file.path
|
||||
@@ -104,7 +102,6 @@
|
||||
}
|
||||
|
||||
function change() {
|
||||
console.log(getFileList());
|
||||
emits('change', getFileList())
|
||||
}
|
||||
defineExpose({
|
||||
|
||||
Reference in New Issue
Block a user