first

pagesCreateOrder/index/components/surcharge.vue

@@ -0,0 +1,109 @@
+<template>
+	<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
+		<template #desc>
+			<view class="u-text-left u-p-30 ">
+				<view>
+					<view>名称</view>
+					<view class="u-m-t-24 border u-flex input-box">
+						<input v-model="form.name" type="text" placeholder-class="placeholder-class"
+							placeholder="请输入名称" />
+					</view>
+				</view>
+				<view class="u-m-t-32">
+					<view>价格</view>
+					<view class="u-m-t-24 border u-flex input-box">
+						<input v-model="form.price" type="digit" placeholder-class="placeholder-class"
+							placeholder="请输入价格" />
+					</view>
+				</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>
+					<my-button type="cancel" bgColor="#fff" @tap="confirm">取消</my-button>
+				</view>
+			</view>
+		</template>
+	</my-model>
+</template>
+
+<script setup>
+	import {
+		reactive,
+		ref
+	} from 'vue';
+	import myModel from '@/components/my-components/my-model.vue'
+	import myButton from '@/components/my-components/my-button.vue'
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		data: {
+			type: Array,
+			default: []
+		}
+	})
+
+	const $form = {
+		name: '',
+		price: ''
+	}
+	const form = reactive({...$form})
+
+	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 {
+			name,
+			price
+		} = form
+		if (!name) {
+			return uni.showToast({
+				icon: 'none',
+				title: '请输入附加费名称'
+			})
+		}
+		close()
+		emits('confirm',{
+			name,
+			price
+		})
+	}
+	defineExpose({
+		open,
+		close
+	})
+</script>
+
+<style lang="scss">
+	.border {
+		border: 1px solid #E5E5E5;
+		border-radius: 4rpx;
+	}
+
+	.input-box {
+		padding: 22rpx 32rpx;
+		font-size: 28rpx;
+		color: #666;
+	}
+
+	.placeholder-class {
+		font-size: 28rpx;
+	}
+</style>