客户页面

pages/admin/Hetong/components/haiziNianling2.vue

@@ -0,0 +1,69 @@
+<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>