cashier_app/pagesCreateOrder/confirm-order/components/discount.vue

<template>
	<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
		<template #desc>
			<!-- 	<view class="u-m-t-48 tab">
				<my-tabs :list="tabs" @change="tabsChange"></my-tabs>
			</view> -->
			<view class="u-text-left u-p-30 ">
				<template v-if="!current">
					<view>
						<view class="u-m-t-24 border discount u-relative u-flex input-box">
							<view class="u-flex-1">
								<input @input="discountInput" v-model="form.discount" type="digit"
									placeholder-class="placeholder-class" placeholder="打八折请输入80" />

							</view>
							<view class="color-999 u-p-l-48 u-p-r-48   u-flex u-row-center u-col-center">
								<view>%</view>
							</view>
							<view class="color-999 u-p-l-48 u-p-r-48 bg1 u-absolute u-flex u-row-center u-col-center">
								<view>%</view>
							</view>
						</view>
						<view class="u-flex u-m-t-24">
							<view class="u-flex" v-for="(item,index) in discounts" :key="index">
								<button @tap="setForm('discount',item)" class="tag u-m-r-20"
									hover-class="hover-class">{{item}}%</button>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view>
						<view class="u-m-t-24 border discount u-relative u-flex input-box">
							<view class="u-flex-1">
								<input @input="discountMoneyInput" v-model="form.discountMoney" type="digit"
									placeholder-class="placeholder-class" placeholder="减8.55元请输入8.55" />
							</view>
							<view class="color-999 u-p-l-48 u-p-r-48   u-flex u-row-center u-col-center">
								<view>元</view>
							</view>
							<view class="color-999 u-p-l-48 u-p-r-48 bg1 u-absolute u-flex u-row-center u-col-center">
								<view>元</view>
							</view>
						</view>
					</view>
				</template>
				<view class="u-m-t-48">
				<view class="u-font-24">
					<text class="color-999">当前单品价格：{{price}}</text>
				</view>
				<view class="u-font-24">
					<text class="color-999">打折原因</text>
					<text class="color-red">*</text>
				</view>
					<view class="u-flex u-m-t-24">
						<view class="u-flex" v-for="(item,index) in causes" :key="index">
							<button @tap="changeCauses(item,index)" class="tag u-m-r-20"
								:class="{active:item.checked}">{{item.name}}</button>
						</view>
					</view>
				</view>
				<view class="u-m-t-32 u-flex ">
					<uni-easyinput type="textarea" v-model="form.note" placeholder="自定义内容"></uni-easyinput>
				</view>

			</view>
		</template>
		<template #btn>
			<view class="u-p-30">
				<view class="u-m-t-10">
					<my-button @tap="confirm" shape="circle" showShadow>确认</my-button>
					<view style="height: 20rpx;">
						
					</view>
					<!-- <my-button type="cancel" bgColor="#fff" @tap="confirm">取消</my-button> -->
				</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'
	const props = defineProps({
		price: {
			type: [Number, String],
			default: 0
		},
		title: {
			type: String,
			default: ''
		},
		data: {
			type: Array,
			default: []
		}
	})
	
	const discounts = [95, 90, 85, 80]
	const causes = reactive([{
			name: '顾客投诉质量问题',
			checked: false
		},
		{
			name: '友情打折',
			checked: false
		},
		{
			name: '临时活动',
			checked: false
		}
	])

	function changeCauses(item, index) {
		item.checked = !item.checked
		form.notes = causes
	}

	function discountInput(e) {
		if (e.detail.value >= 100) {
			nextTick(() => {
				form.discount = 100
			})
		}
	}

	function discountMoneyInput(e) {
		const max = 100
		if (e.detail.value >= max) {
			nextTick(() => {
				form.discountMoney = 100
			})
		}
	}

	function setForm(key, val) {
		form[key] = val
	}


	const tabs = ['打折', '减免']
	let current = ref(1)

	function tabsChange(i) {
		console.log(i);
		current.value = i
	}

	const $form = {
		discountMoney: '',
		discount: '',
		name: '',
		price: ''
	}
	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()
	}

	function close() {
		model.value.close()
	}
	const emits = defineEmits(['confirm'])

	function confirm() {
		const {
			discount,
			discountMoney
		} = form
		if (current.value === 0 && discount === '') {
			return uni.showToast({
				icon: 'none',
				title: '请输入有效折扣！'
			})
		}
		if (current.value === 1 && discountMoney === '') {
			return uni.showToast({
				icon: 'none',
				title: '请输入有效减免价格！'
			})
		}
		emits('confirm', form)
		close()
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss">
	.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>