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

<template>
	<my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
		<template #desc>
			<view class="u-text-left u-p-l-30 u-p-r-30 u-p-t-30 ">
				<view class="u-m-t-32 u-flex ">
					<uni-easyinput type="textarea" v-model="form.remark" placeholder="自定义内容"></uni-easyinput>
				</view>
				<view class="u-flex u-m-t-24">
					<view class="u-flex u-flex-wrap u-m-r-20 u-m-b-20 lh34" v-for="(item,index) in causes" :key="index">
						<button @tap="changeCauses(item)" class="tag ">{{item.name}}</button>
					</view>
				</view>
				

			</view>
		</template>
		<template #btn>
			<view class="u-p-l-30 u-p-r-30 u-m-t-28 u-p-b-30">
				<view class="">
					<my-button @tap="confirm" shape="circle" fontWeight="700">确认</my-button>
					<view class="u-m-t-10">
						<my-button type="cancel" bgColor="#fff" @tap="confirm">取消</my-button>
					</view>
				</view>
			</view>
		</template>
	</my-model>
</template>

<script setup>
	import {
		reactive,
		nextTick,
		ref
	} from 'vue';
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		data: {
			type: Array,
			default: []
		}
	})
	
	
	function changeCauses(item) {
		let prve=form.remark?',':''
		form.remark +=prve+item.name
		console.log(form.remark);
	}

	const causes = reactive([{
			name: '免葱',
			checked: false
		},
		{
			name: '免香菜',
			checked: false
		},
		{
			name: '不要辣',
			checked: false
		}
	])


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




	const $form = {
		remark:''
	}
	const form = reactive({
		...$form
	})

	function resetForm() {
		Object.assign(form, {
			...$form
		})
	}

	const model = ref(null)

	function open(data) {
		Object.assign(form,data)
		model.value.open()
	}

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

	function confirm() {
		const { remark } = form
		emits('confirm', {
			remark
		})
		console.log(remark);
		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>