assess-app/page_task/tripartite_info/tripartite_info.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="(tripartite,index) in  tripartiteList" :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">担保{{tripartite.type*1===1?'人':'企业'}}信息({{index+1}})</text>
								<view class="row-c sys-background-fff r-100 p-lr30 p-tb10">
									<image class="wh-30" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/information/edit.png" mode="aspectFill"
										@click="onEditInfo(index)"></image>
									<view class="title-line m-lr20"></view>
									<image class="wh-30" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/information/delete.png" mode="aspectFill"
										@click="delTripartite(index)">
									</image>
								</view>
							</view>
              <view v-if="tripartite.type*1===1">
                <view class="row-c p-tb30">
                  <view class="text-color-666"><text></text>担保类型：</view>
                  <text>个人</text>
                </view>
                <view class="row-c">
                  <view class="text-color-666"><text></text>担保人姓名：</view>
                  <text>{{tripartite.name}}</text>
                </view>
                <view class="row-c">
                  <view class="text-color-666"><text></text>身份证号码：</view>
                  <text>{{tripartite.id_number}}</text>
                </view>
                <view class="p-t30">
                  <view class="wh-text size-28 text-color-666 m-b20">证件照片</view>
                  <EnImage :img="[tripartite.identity_one,tripartite.identity_two]"></EnImage>
                </view>
              </view>
              <view v-else>
                <view class="row-c p-tb30">
                  <view class="text-color-666"><text></text>担保类型：</view>
                  <text>企业</text>
                </view>
                <view class="row-c">
                  <view class="text-color-666"><text></text>企业名称：</view>
                  <text>{{tripartite.name}}</text>
                </view>
                <view class="row-c">
                  <view class="text-color-666"><text></text>营业执照编号：</view>
                  <text>{{tripartite.id_number}}</text>
                </view>
                <view class="p-t30">
                  <view class="wh-text size-28 text-color-666 m-b20">证件照片</view>
                  <EnImage :img="[tripartite.identity_one]"></EnImage>
                </view>
              </view>

							</view>
						</view>
						<view class="m-t30" v-for="(bankItem,bIndex) in tripartite.bank_data" :key="bIndex">
							<text class="size-28 sys-weight-600">银行信息({{key+1}})</text>
							<view class="row-c p-tb30">
								<view class="text-color-666"><text></text>账户姓名：</view>
								<text>{{bankItem.name}}</text>
							</view>
							<view class="row-c">
								<view class="text-color-666"><text></text>所属银行：</view>
								<text>{{bankItem.bank_name}}</text>
							</view>
							<view class="row-c p-t30">
								<view class="text-color-666"><text></text>银行卡号：</view>
								<text>{{bankItem.bank_num}}</text>
							</view>
						</view>
					</view>
					<view  v-else>

            <en-radio label="担保类型" v-model="tripartite.type" @updateData="farming(index)" :list="appliesData"></en-radio>
            <view v-if="tripartite.type*1===1">
              <add-identity  v-if="verifyKey('id_number')"  :user-name.sync="tripartite.name" :id-number.sync="tripartite.id_number" :identity-one.sync="tripartite.identity_one" :identity-two.sync="tripartite.identity_two"></add-identity>
              <en-input label="姓名"  v-if="verifyKey('name')"  v-model="tripartite.name" type="text" placeholder="等待自动录入"></en-input>
              <en-input label="身份证号" v-if="verifyKey('id_number')"  v-model="tripartite.id_number" type="idcard" placeholder="等待自动录入"></en-input>
            </view>
            <view v-else>
              <en-input label="企业名称" v-if="verifyKey('name')"  v-model="tripartite.name" type="text" placeholder="请输入企业名称"></en-input>
              <en-input label="营业执照编号" v-if="verifyKey('id_number')"  v-model="tripartite.id_number" type="text" placeholder="请输入营业执照编号"></en-input>
              <add-license  v-if="verifyKey('identity_one')"  v-model="tripartite.identity_one" :user-name.sync="tripartite.name" :id-number.sync="tripartite.id_number"></add-license>
            </view>
						<view class="m-t30" v-for="(bankItem,bIndex) in tripartite.bank_data">
							<view class="row-justify-sb center">
								<text class="size-30 sys-weight-600'">银行卡信息({{bIndex+1}})</text>
								<image class="wh-30" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/information/delete.png" mode="aspectFill"
                       @click="delBank(index,bIndex)">
								</image>
							</view>
              <en-input label="账户姓名" v-model="bankItem.name" type="text" placeholder="请输开户人姓名" ></en-input>
              <add-bank :bank-name.sync="bankItem.bank_name" :bank-num.sync="bankItem.bank_num"></add-bank>
						</view>
						<view class="row-justify-sb">
							<button class="size-26 r-10 button-color still-button m-t30" hover-class="is-hover"
                      @click="addBank(index)">+ 添加还款信息</button>
							<view class="flex"></view>
						</view>

					</view>


			</view>
      <en-blank message="暂无第三方信息~~" v-if="tripartiteList.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";

	export default {
		components: {
      AddBank,
      EnBlank,
      AddLicense,
      EnInput,
      AddIdentity,
			WhInput,
			EnUpload,
			EnImage
		},
		data() {
			return {
				title: '',
				scrollTop: 0,
        editIndex:0,
        appliesData:[{'value':1,'text':'个人'},{'value':2,'text':'企业'}],
        tripartiteList:[],
        tripartiteItem:{
          "type": "1",
          "name": "",
          "id_number": "",
          "identity_one": "",
          "identity_two": "",
          "bank_data": [],
        }
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad(options) {
			this.title = options.title
      let tripartiteList = uni.getStorageSync('tripartiteData')
      let tripartiteKey = uni.getStorageSync('tripartiteKey')
      this.tripartiteList=tripartiteList
      this.showKeys=tripartiteKey
		},
		methods: {
      addItem(){
        this.tripartiteList.push(this.tripartiteItem)
      },
      delTripartite(itemKey){
        uni.showModal({
          title: '是否删除当前第三方信息',
          content: '确定删除?',
          success: (res) => {
            if (res.confirm) {
              this.tripartiteList.splice(itemKey,1)
            }
          }
        })

      },
      farming(key) {
        if(this.tripartiteList[key].type*1===1){
          this.tripartiteList[key].q_identity_one=this.tripartiteList[key].identity_one
          this.tripartiteList[key].q_name=this.tripartiteList[key].name
          this.tripartiteList[key].q_id_number=this.tripartiteList[key].id_number
          this.tripartiteList[key].name=''
          this.tripartiteList[key].identity_one=''
          this.tripartiteList[key].id_number=''
          if( this.tripartiteList[key].u_identity_one){
            this.tripartiteList[key].identity_one=this.tripartiteList[key].u_identity_one
          }
          if( this.tripartiteList[key].u_name){
            this.tripartiteList[key].name=this.tripartiteList[key].u_name
          }
          if( this.tripartiteList[key].u_id_number){
            this.tripartiteList[key].id_number=this.tripartiteList[key].u_id_number
          }
        }else {
          this.tripartiteList[key].u_identity_one=this.tripartiteList[key].identity_one
          this.tripartiteList[key].u_name=this.tripartiteList[key].name
          this.tripartiteList[key].u_id_number=this.tripartiteList[key].id_number
          this.tripartiteList[key].name=''
          this.tripartiteList[key].identity_one=''
          this.tripartiteList[key].id_number=''
          if( this.tripartiteList[key].q_identity_one){
            this.tripartiteList[key].identity_one=this.tripartiteList[key].q_identity_one
          }
          if( this.tripartiteList[key].q_name){
            this.tripartiteList[key].name=this.tripartiteList[key].q_name
          }
          if( this.tripartiteList[key].q_id_number){
            this.tripartiteList[key].id_number=this.tripartiteList[key].q_id_number
          }
        }
      },
      delBank(applyKey,itemKey){

        uni.showModal({
          title: '是否删除当前还款信息',
          content: '确定删除?',
          success: (res) => {
            if (res.confirm) {
              this.tripartiteList[applyKey].bank_data.splice(itemKey,1)
            }
          }
        })
      },
      addBank(applyKey){
        if(!this.tripartiteList[applyKey].bank_data){
          this.tripartiteList[applyKey].bank_data=[];
        }
        this.tripartiteList[applyKey].bank_data.push({'name':'','bank_name':'','bank_num':''})
      },
      verifyKey(field) {
        return this.showKeys.indexOf(field) >= 0
      },

			// 保存
			onLeftSubmit() {
				this.tripartiteList.map(item => {
					item.is_edit = true
				})
			},
			// 提交
			onSubmit() {
          uni.$emit('putTripartiteInfo',this.tripartiteList)
        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>