cashier-ipad/components/my-components/edit-discount.vue

<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 u-p-l-10 u-p-r-10 u-flex-1">
						<uni-easyinput type="number"  @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 u-p-l-10 u-p-r-10">
						<view class="u-flex-1">
							<uni-easyinput type="number" @input="discountInput"  @change="discountChange" 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" fontWeight="700" >修改</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" scoped>
	.border{
		border-radius: 8rpx;
		overflow: hidden;
		border-color: #999;
	}
	.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>