将打折组件提取到全局
This commit is contained in:
parent
a214ab49ba
commit
469c1e29f7
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
|
||||
<template #desc>
|
||||
<view class="u-text-left u-p-30 color-666">
|
||||
<view class="u-m-t-32 u-flex ">
|
||||
<view>应付金额</view>
|
||||
<view class="u-m-l-32">
|
||||
{{form.price}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-40 u-flex ">
|
||||
<view>实收金额</view>
|
||||
<view class="u-m-l-32 border-bottom u-flex-1">
|
||||
<uni-easyinput style="digit" @input="currentPriceInput" @change="currentPriceChange" paddingNone :inputBorder="false"
|
||||
v-model="form.currentPrice"
|
||||
placeholder="输入实际金额"></uni-easyinput>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-54 u-flex ">
|
||||
<view>优惠折扣</view>
|
||||
<view class="u-m-l-32 u-flex-1 u-flex border-bottom">
|
||||
<view class="u-flex-1">
|
||||
<uni-easyinput @input="discountInput" @change="discountChange" style="digit" paddingNone :inputBorder="false"
|
||||
v-model="form.discount"
|
||||
placeholder="输入折扣"></uni-easyinput>
|
||||
</view>
|
||||
<view class="u-font-32 color-333">%</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<view class="u-p-30">
|
||||
<view class="u-m-t-10">
|
||||
<my-button @tap="confirm" shape="circle" >修改</my-button>
|
||||
<view class="">
|
||||
<my-button @tap="close" type="cancel" bgColor="#fff" >取消</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</my-model>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
nextTick,
|
||||
ref,watch
|
||||
} from 'vue';
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import myTabs from '@/components/my-components/my-tabs.vue'
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
discount:{
|
||||
type: [Number,String],
|
||||
default:100
|
||||
},
|
||||
price: {
|
||||
type: [Number,String],
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
function currentPriceInput(newval){
|
||||
form.discount=(newval*100/form.price).toFixed()
|
||||
}
|
||||
function discountInput(newval){
|
||||
form.currentPrice=(form.price*newval/100).toFixed(2)
|
||||
}
|
||||
function currentPriceChange(newval){
|
||||
if(newval<0){
|
||||
form.currentPrice=0
|
||||
form.discount=100
|
||||
return infoBox.showToast('实收金额不能小于0')
|
||||
}
|
||||
if(newval>props.price){
|
||||
form.currentPrice=props.price
|
||||
form.discount=0
|
||||
return infoBox.showToast('实收金额不能大于应付金额')
|
||||
}
|
||||
}
|
||||
function discountChange(newval){
|
||||
if(newval<0){
|
||||
form.currentPrice=props.price
|
||||
form.discount=0
|
||||
return infoBox.showToast('优惠折扣不能小于0')
|
||||
}
|
||||
if(newval>100){
|
||||
form.discount=100
|
||||
form.currentPrice=0
|
||||
return infoBox.showToast('优惠折扣不能大于100')
|
||||
}
|
||||
}
|
||||
|
||||
const $form = {
|
||||
price:props.price,
|
||||
currentPrice: props.price,
|
||||
discount: 100
|
||||
}
|
||||
const form = reactive({
|
||||
...$form
|
||||
})
|
||||
watch(()=>props.price,(newval)=>{
|
||||
console.log(newval);
|
||||
form.price=newval
|
||||
form.currentPrice=newval
|
||||
})
|
||||
function resetForm() {
|
||||
Object.assign(form, {
|
||||
...$form
|
||||
})
|
||||
}
|
||||
|
||||
const model = ref(null)
|
||||
|
||||
function open() {
|
||||
model.value.open()
|
||||
form.price=props.price
|
||||
form.currentPrice=props.price
|
||||
form.discount=props.discount
|
||||
}
|
||||
|
||||
function close() {
|
||||
model.value.close()
|
||||
}
|
||||
const emits = defineEmits(['confirm'])
|
||||
|
||||
function confirm() {
|
||||
console.log(form);
|
||||
emits('confirm',{...form,currentPrice:Number(form.currentPrice).toFixed(2)})
|
||||
close()
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.lh34 {
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: #fff;
|
||||
border: 1px solid #E5E5E5;
|
||||
line-height: inherit;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.active {
|
||||
border-color: #E6F0FF;
|
||||
color: $my-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-class {
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
|
||||
.discount {
|
||||
.u-absolute {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bg1 {
|
||||
background: #F7F7FA;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0 80rpx;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
padding: 22rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue