uniProject/pages/admin/Hetong/components/haiziNianling2.vue

<template>
	<view v-for="(item,index) in myData.children" :key="item.timer" class="fwnr-label-input">
		<view class="fwnr-form-label"><text class="form-label-require"></text><template v-if="index == 0">孩子年龄</template></view>
		<uni-easyinput v-model="item.age" placeholder="请输入孩子年龄" @change="onChange" />
		<view @click="handleAdd" v-if="myData.children.length == 1" class="fwnr-add-btn"><icon></icon></view>
		<view @click="handleAdd" class="fwnr-add-btn"
			v-else-if="myData.children.length-1 == index && myData.children.length != 1 && myData.children.length<3">
			<icon></icon>
		</view>
		<view @click="handleDelete(item.timer)" v-else class="fwnr-del-btn"><icon></icon></view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		watch,
		watchEffect
	} from "vue"
	import {
		useHetong
	} from "../useHetong.js"
	const {
		injectHetong
	} = useHetong();

	const data = injectHetong()

	const emits = defineEmits(['change'])

	const myData = reactive({
		children: []
	})

	watchEffect(() => {
		const list = data.hetong.fzHzNianling && data.hetong.fzHzNianling.split(',').map((item,index) => ({
			age: item,
			timer: new Date().getTime()+index
		}));
		myData.children = list.length ? list : [{
			age: '',
			timer: new Date().getTime()
		}]
	})

	function onChange() {
		data.hetong.fzHzNianling = myData.children.map(item => item.age).join(',')
	}

	function handleAdd() {
		myData.children.push({
			age: '',
			timer: new Date().getTime()
		});
		data.hetong.fzHzNianling = myData.children.map(item => item.age).join(',')
		emits('change')
	}

	function handleDelete(timer) {
		console.log('timer', timer)
		myData.children = myData.children.filter(item => item.timer != timer)
		data.hetong.fzHzNianling = myData.children.map(item => item.age).join(',')
		emits('change')
	}
</script>

<style>
</style>