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="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 class="row-c p-tb30" v-if="verifyKey('name')" >
                <view class="text-color-666"><text></text>姓名：</view>
                <text>{{linkmen.name}}</text>
              </view>
              <view class="row-c" v-if="verifyKey('relation')">
                <view class="text-color-666"><text></text>关系：</view>
                <text>{{linkmen.relation}}</text>
              </view>
              <view class="row-c" v-if="verifyKey('phone')">
                <view class="text-color-666"><text></text>手机号：</view>
                <text>{{linkmen.phone}}</text>
              </view>
              <view class="row-c" v-if="verifyKey('special_plane')">
                <view class="text-color-666"><text></text>联系电话：</view>
                <text>{{linkmen.special_plane}}</text>
              </view>
            </view>
          </view>
        </view>
        <view  v-else>
          <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="text" 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": ""
      }
    }
  },
  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: {
    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)
          }
        }
      })

    },
    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>