siyu_app/pages_watch/index/equipment/editEmergencyContact.vue

<template>
	<view class="container">
		<uni-nav-bar fixed :border="false" backgroundColor="#fff" title="创建联系人" :statusBar="true"
			left-icon="left" @clickLeft="$navBack()" @clickRight="clickRight">
			<!--  #ifndef MP-WEIXIN -->
			<template v-slot:right>
				<view>保存</view>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<view class="container-body">
			<uni-forms ref="form" err-show-type="toast" :model="formData">
				<view class="box" v-for="(item,index) in list" :key="index">
					<view class="box-title">联系人{{index+1}}</view>
					<uni-forms-item label="">
						<uni-easyinput 
							v-model="list[index].name" 
							type="text" 
							:inputBorder="false" 
							placeholder="联系人姓名"
							:primaryColor="'#c0c4cc'"
							:placeholderStyle="placeholderStyle"
							:styles="inpuStyle"
							maxlength="16"
						/>
					</uni-forms-item>
					<uni-forms-item label="">
						<uni-easyinput
							v-model="list[index].number" 
							type="number" 
							:inputBorder="false" 
							placeholder="电话号码"
							:primaryColor="'#c0c4cc'"
							:placeholderStyle="placeholderStyle"
							:styles="inpuStyle"
							maxlength="16"
						/>
					</uni-forms-item>
				</view>
			</uni-forms>
			<!-- 最多设置8个号码 -->
			<view class="tips">剩余{{num - this.list.length}}个联系人可新增</view>
		</view>
		<view class="footer-btn">
			<view class="addbtn" @click="handleAdd">新增</view>
			<!--  #ifdef MP-WEIXIN -->
			<view class="addbtn savebtn" @click="clickRight">保存</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rightText: '设置',
				// 最多设置8个号码
				num: 8,
				list: [{
					name: "",
					number: "",
					sos: false
				}],
				formData: {},
				placeholderStyle: "{font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 30rpx;color: #CCCCCC;}",
				inpuStyle: {
					fontFamily: "PingFang SC, PingFang SC",
					fontWeight: 400,
					fontSize: "30rpx",
					color: "#333",
				}
			}
		},
		onLoad(option) {
			this.num = option.count || 8
		},
		methods: {
			handleAdd() {
				if(this.list.length > this.num - 1) {
					uni.showModal({
						content: "最多可以添加8个联系人，请在“常用联系人”中，左滑删除联系人"
					})
					return
				}
				this.list.push({
					name: "",
					number: "",
					sos: false
				})
			},
			clickRight() {
				const badList = this.list.filter(item=>!item.name || !item.number)
				if(badList&&badList.length > 0) {
					const badListText = badList.map((it,index)=> '联系人' + (this.list.indexOf(it) + 1))
					uni.showModal({
						content: badListText.join(',') + "信息不完整，不完整的不会保存，是否继续?",
						success: (res)=> {
							if (res.confirm) {
								const saveList = this.list.filter(item=>item.name && item.number)
								uni.$emit("getSaveList",saveList)
								uni.navigateBack()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					const saveList = this.list.filter(item=>item.name && item.number)
					uni.$emit("getSaveList",saveList)
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.uni-forms-item {
			margin-bottom: 20rpx;
		}
		.uni-forms-item__content{
			background-color: #fff;
			border-radius: 6rpx;
			overflow: hidden;
		}
	}
	.container-body {
		padding: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		.box-title {
			margin-bottom: 24rpx;
		}
		.tips{
			font-size: 24rpx;
			color: #999;
			margin-bottom: 50rpx;
		}
	}
	.footer-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
	}
	.addbtn {
		width: 200rpx;
		height: 88rpx;
		margin-right: 50rpx;
		line-height: 88rpx;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		text-align: center;
		background-color: #fff;
		color: #FF7700;
		border: 1rpx solid #FF7700;
	}
	.savebtn {
		margin-right: 0 !important;
		background-color: #FF7700 !important;
		color: #FFFFFF !important;
	}
</style>