<template> <h-view v-if="showFlag" id="add-person"> <h-header :proportion="[1,4,1]" class="bar-custom"> <span slot="center" style="color:#fff">添加担保人</span> <span slot="right" style="color:#fff" @click="showFlag=false">取消</span> </h-header> <div class="search has-header"> <input v-model="keyWord" placeholder="请输入担保人名称/证件号码" > </div> <scroll ref="scroll" :updateData="[undertakeList]" :pullUp="true" @pullingUp="loadMore"> <list-item :item-height="68" class="item"> <item v-for="(item,index) in undertakeList" :key="index" @click.native="addUndertake(item)"> <img slot="left-icon" src="@/assets/contractCreate/name.png" class="left-icon" > <div slot="name"> 担保人名称 <br >证件号 </div> <div slot="content"> <input v-model="item.bp_guta_name" placeholder="暂无信息" readonly > <input v-model="item.id_card_no" placeholder="暂无信息" readonly > </div> </item> </list-item> </scroll> </h-view> </template> <script> export default { props: { bp_agent_id: { type: String, default: '', }, }, data () { return { undertakeList: [], // 担保人列表 selectUdertake: {}, pagenum: 1, keyWord: '', showFlag: false, } }, watch: { }, methods: { show () { this.showFlag = true }, init () { this.undertakeList = [] this.selectUdertake = [] this.pagenum = 1 this.keyWord = '' }, unshow () { this.showFlag = false }, loadMore () { if (this.keyWord) { this.searchUndertake() } else { this.getUndertake() } }, searchUndertake () { let vm = this let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prj_bp_guta_query' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, pagesize: 10, pagenum: vm.pageNumSearch, searchInput: vm.keyWord, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.undertakeList = returnData vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vum.forEach(returnData, function (data, index, array) { vm.undertakeList = returnData }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.undertakeList.push(array[index]) }) vm.pageNumSearch++ vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, addUndertake (e) { this.selectUdertake = e this.$emit('addUnder', this.selectUdertake) setTimeout(() => { this.showFlag = false }, 100) }, getUndertake () { // 担保人查询 let vm = this let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prj_bp_guta_query' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, pagesize: 10, pagenum: vm.pageNum, searchInput: vm.keyWord, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vum.forEach(returnData, function (data, index, array) { vm.undertakeList.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.undertakeList.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, }, } </script> <style lang="less"> #add-person { position: absolute; top:0; z-index:999; .item { width: 359px; margin: 0 auto; } .search { background-color: #fff; padding: 8px 12px; width: 100%; height: 1.02rem; z-index: 100; input { background: url("../../assets/contractStart/search1.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); padding-left: 12px; height: 36px; line-height: 36px; border-radius: 4px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; } input::placeholder { font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; letter-spacing: 0; } input:focus { background: url("../../assets/contractStart/search2.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); border: 2px solid #bcc6ff; } } .content { position: absolute; top: 0; } .scrollContent { padding-top: 1rem; padding-bottom: 120px; } .tab-style { width: 100%; position: absolute; } } .platform-ios { #confirmList { .scrollContent { padding-top: 1.4rem; } } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #person { .scrollContent { padding-top: 1.8rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #person { .scrollContent { padding-top: 1.8rem; } .search { input { background: url("../../assets/contractStart/search1.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); padding: 8px 12px; border-radius: 4px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; } } } } } </style>