assess-app/page_task/linkman/linkman.vue

<template>
	<view class="total-page page-env-160 page-box task-bg">
		<Nav :title="title" is_fixed :genre="4" :opacity="scrollTop"></Nav>
		<view id="apply-info" class="m-t20 m-lr30 text-color-12">
			<view class="sys-background-fff r-20 p-20 m-b20" v-for="(linkmen,index) in linkmenList" :key="index">
				<!-- 个人担保start -->
				<view class="" v-if="editIndex!==index">
					<!-- 个人担保信息start -->
					<view class="sys-from-background-color p-20 r-20 size-26">
						<view class="">
							<view class="row-justify-sb center">
								<text class="size-28 sys-weight-600">联系人信息({{index+1}})</text>
								<view class="row-c sys-background-fff r-100 p-lr30 p-tb10">
									<image class="wh-30"
										src="/page_task/static/img/information/edit.png"
										mode="aspectFill" @click="onEditInfo(index)"></image>
									<view class="title-line m-lr20"></view>
									<image class="wh-30"
										src="/page_task/static/img/information/delete.png"
										mode="aspectFill" @click="delTripartite(index)">
									</image>
								</view>
							</view>
							<view class="row-c p-t30" v-if="verifyKey('name')">
								<view class="text-color-666"><text></text>姓名：</view>
								<text>{{linkmen.name}}</text>
							</view>
							<view class="row-c p-t30" v-if="verifyKey('relation')">
								<view class="text-color-666"><text></text>关系：</view>
								<text>{{getRelationText(linkmen.relation)}}</text>
							</view>
							<view class="row-c p-t30" v-if="verifyKey('phone')">
								<view class="text-color-666"><text></text>手机号：</view>
								<text>{{linkmen.phone}}</text>
							</view>
							<view class="row-c p-t30" v-if="verifyKey('special_plane')">
								<view class="text-color-666"><text></text>联系电话：</view>
								<text>{{linkmen.special_plane?linkmen.special_plane:''}}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
          <view class="row-justify-sb center p-b10">
            <text class="size-28 sys-weight-600">联系人信息({{index+1}})</text>
            <view class="row-c sys-background-fff r-100">
              <image class="wh-30"
                     src="/page_task/static/img/information/delete.png"
                     mode="aspectFill" @click="delTripartite(index)">
              </image>
            </view>
          </view>
					<en-input label="姓名" v-if="verifyKey('name')" v-model="linkmen.name" type="text"
						placeholder="输入联系人姓名"></en-input>
					<en-select label="关系" v-if="verifyKey('relation')" v-model="linkmen.relation"
						placeholder="请选择与贷款人的关系" :local-data="relationList"></en-select>
					<en-input label="手机号" v-if="verifyKey('phone')" v-model="linkmen.phone" type="number"
						placeholder="请输入联系人的手机号"></en-input>
					<en-input label="联系电话" v-if="verifyKey('special_plane')" v-model="linkmen.special_plane" type="number"
						placeholder="请输入联系人电话"></en-input>
				</view>
			</view>
			<en-blank message="暂无联系人信息~~" v-if="linkmenList.length<=0"></en-blank>

			<button class="size-26 r-10 button-color apply-button m-t30" hover-class="is-hover"
				@click="addItem">+添加联系方式信息</button>
		</view>
		<EnButton leftText="保存" @onSubmit="onSubmit">
		</EnButton>
	</view>
</template>

<script>
	import WhInput from "@/components/en-from/en-input/en-input.vue"
	import EnUpload from "@/components/en-from/en-upload/en-upload.vue"
	import EnImage from "@/components/en-utils/en-image/en-image.vue"
	import AddIdentity from "@/page_task/identity_upload/add-identity.vue";
	import EnInput from "@/components/en-from/en-input/en-input.vue";
	import AddLicense from "@/page_task/apply/components/add-license.vue";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";
	import AddBank from "@/page_task/apply/components/add-bank.vue";
	import tools from "@/service/tools";
	import EnSelect from "@/components/en-from/en-select/en-select.vue";
	import {
		getTaskRelations
	} from "@/api/task";

	export default {
		components: {
			EnSelect,
			AddBank,
			EnBlank,
			AddLicense,
			EnInput,
			AddIdentity,
			WhInput,
			EnUpload,
			EnImage
		},
		data() {
			return {
				title: '',
				scrollTop: 0,
				editIndex: 0,
				showKeys: [],
				relationList: [],
				linkmenList: [],
				linkmenItem: {
					"name": "",
					"relation": "",
					"phone": "",
					"special_plane": ""
				}
			}
		},
    watch:{
      'editIndex':function () {
        if(this.editIndex<0){
          this.editIndex=0
        }
      }
    },
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad(options) {
			this.title = options.title
			let linkmenList = uni.getStorageSync('linkmanData')
			let linkmanKey = uni.getStorageSync('linkmanKey')
			this.linkmenList = linkmenList
			this.showKeys = linkmanKey
			if (this.linkmenList.length <= 0) {
				this.addItem()
			}
			this.getTaskRelations()
		},
		methods: {
			getRelationText(type) {
				let item = this.relationList.filter(val => val.value === type * 1)
				if (item.length > 0) {
					return item[0].text
				} else {
					return '';
				}
			},
			async getTaskRelations() {
				const res = await getTaskRelations()
				if (res.code === 1) {
					this.relationList = res.data
					this.relationList.map((val) => {
						val.text = val.name;
					});
				}
			},
			addItem() {
				console.log(this.linkmenList)
				this.linkmenList.push(JSON.parse(JSON.stringify(this.linkmenItem)))
				this.editIndex = this.linkmenList.length - 1
			},
			verifyKey(field) {
				return this.showKeys.indexOf(field) >= 0
			},
			delTripartite(itemKey) {
				uni.showModal({
					title: '是否删除当前还款信息',
					content: '确定删除?',
					success: (res) => {
						if (res.confirm) {
							this.linkmenList.splice(itemKey, 1)
              this.editIndex = itemKey - 1
						}
					}
				})

			},
			setValue() {
				console.log(this.value)
				if (this.value) {
					this.linkmenList = this.value
				}
				if (this.linkmenList.length <= 0) {
					this.addItem()
				}
			},
			// 提交
			onSubmit() {
				uni.$emit('putLinkmenInfo', this.linkmenList)
				setTimeout(() => {
					tools.leftClick()
				}, 50)
			},
			// 编辑单个信息
			onEditInfo(index) {
				this.editIndex = index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.attestation-button {
		width: 156rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #FFFFFF;
		border: 1rpx solid #0FB160;
	}

	.still-button {
		width: 260rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx solid #0FB160;
	}

	.apply-button {
		height: 80rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #0FB160;
		margin-bottom: 100rpx;
	}

	.apply-button-save {
		width: 140rpx;
		background: #FFFFFF;
		border: 2rpx solid #0FB160;
	}

	.apply-button-delete {
		color: #E83F37;
		width: 140rpx;
		background: #FFFFFF;
		border: 2rpx solid #E83F37;
	}
</style>