zhxy-desk/components/connectionList.vue

<template>
	<view class="connection">
		<view class="connection-item" v-for="(item,index) in list" :key="index">
			<view class="connection-item-title">
				<view class="connection-item-title-text">
					联系人{{index + 1}}
				</view>
				<view v-if="list.length - 1 ==index" class="connection-item-title-icon">
					<view @click="decrease" class="connection-item-title-icon-decrease">
						-
					</view>
					<view @click="add" class="connection-item-title-icon-add">
						+
					</view>
				</view>
			</view>
			<view class="connection-item-content">
				<view class="connection-item-content-left">
					联系人姓名
				</view>
				<view class="connection-item-content-right">
					<uni-easyinput trim="all" v-model="item.name" placeholder="请输入内容"></uni-easyinput>
				</view>
			</view>
			<view class="connection-item-content">
				<view class="connection-item-content-left">
					联系人关系
				</view>
				<view class="connection-item-content-right">
					<uni-data-select v-model="item.relation" :localdata="range" @change="change"></uni-data-select>
				</view>
			</view>
			<view class="connection-item-content">
				<view class="connection-item-content-left">
					联系人电话
				</view>
				<view class="connection-item-content-right">
					<uni-easyinput type='number' trim="all" v-model="item.tetelephone"
						placeholder="请输入内容"></uni-easyinput>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "connectionList",
		props: {
			list: {
				default: () => [],
				type: Array
			}
		},
		data() {
			return {
				range: [{
						value: '0',
						text: "爸爸"
					},
					{
						value: '1',
						text: "妈妈"
					},
					{
						value: '2',
						text: "爷爷"
					},
				],
			};
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
			add() {
				let obj = {
					name: '',
					relation: '',
					tetelephone: ''
				}
				this.list.push(obj)
				this.$emit('update:list', this.list)
			},
			decrease() {
				this.list.splice(this.list.length-1, 1);
				this.$emit('update:list', this.list)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-easyinput__content {
		height: 64rpx;
	}

	/deep/.uni-select {
		height: 64rpx;
	}

	.connection {
		width: 100%;

		.connection-item {
			width: 100%;

			.connection-item-title {
				display: flex;
				margin-bottom: 20rpx;
			}

			.connection-item-title-icon {
				display: flex;
				align-items: center;
			}

			.connection-item-title-text {
				margin-right: 32rpx;

			}

			.connection-item-title-icon-decrease {
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 24rpx;
				border-radius: 50%;
				background-color: rgba(5, 204, 161, 0.5);
				color: #fff;
				font-size: 28rpx;
				margin-right: 20rpx;
			}

			.connection-item-title-icon-add {
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 24rpx;
				border-radius: 50%;
				background-color: rgba(5, 204, 161, 1);
				color: #fff;
				font-size: 28rpx;
			}
		}
	}

	.connection-item-content {
		width: 100%;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		.connection-item-content-left {
			width: 200rpx;
			padding-left: 20rpx;
		}

		.connection-item-content-right {
			flex: 1;
		}

	}
</style>