<!-- * @Author: your name * @Date: 2019-12-18 20:15:42 * @LastEditTime: 2019-12-19 15:54:45 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \hls-xcmg-vue-app\src\pages\contractCreate\pick-lessee.vue --> <template> <h-view id="picker"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <span>选择承租人</span> </div> </h-header> <!-- 搜索 --> <div class="search"> <input type="text" placeholder="请输入承租人名称/证件号码"> </div> <scroll ref="scroll" > <div class="wrap"> <div v-for="(item,index) in showLists" :key="index" class="contract-lists" > <!-- <div class="pro-code" @click="goDetails(item)"> <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon"> <p> <span>合同号</span> <span>{{ item.project_number }}</span> </p> </div> --> <div class="box"> <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon"> <div><p>承租人名称</p><p>{{ '张三' }}</p></div> <div><p>证件号</p><p>{{ '152104199108211334' }}</p></div> </div> </div> </div> </scroll> <bottom-tab> <tab-button class="footer"> 确认创建 </tab-button> </bottom-tab> </h-view> </template> <script> export default { name: '', data () { return { showLists: [ { project_number: '201903022001', bp_name: 'zhangsan', total_price: '1000000', confirm_start_date: '2019-12-18' }, { project_number: '201903022001', bp_name: 'zhangsan', total_price: '1000000', confirm_start_date: '2019-12-18' }, { project_number: '201903022001', bp_name: 'zhangsan', total_price: '1000000', confirm_start_date: '2019-12-18' }, ], } }, computed: {}, watch: {}, beforeRouteEnter (to, from, next) { next(vm => { vm.lesseeQuery() }) }, methods: { // 承租人查询 lesseeQuery () { let vm = this let url = process.env.basePath + 'prj_bp_master_query' let param = { } vm.hlsPopup.showLoading('请稍候') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() console.log('承租人', res) if (res.result === 'S') { // vm.certification_status = res.info.certification_status } }) }, }, } </script> <style lang='less'> #picker { .search { background-color: #fff; padding: 8px 12px; position: absolute; width: 100%; z-index: 100; margin-bottom: 8px; input { padding-left: 12px; border-radius: 4px; height: 36px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888C8F; line-height: 36px; background: url("../../assets/contractStart/search1.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); } 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; } } .wrap { width: 100%; padding: 8px; .contract-lists { width: 100%; background: #fff; margin-bottom: 8px; border-radius: 2px; position: relative; .box { height: 68px; margin-left: 50px; margin-right: 19px; .file-icon { width: 30px; height: 30px; position: absolute; left: 10px; top: 8px; } div { width: 100%; height: 32px; position: relative; p { height: 32px; line-height: 32px; position: absolute; font-family: PingFangSC-Regular; font-size: 14px; letter-spacing: 0; } p:nth-of-type(1){ left: 0; color: rgba(75,74,75,0.60); } p:nth-of-type(2){ right: 0; color: #4B4A4B; } } } } } .bottom-tab-button{ background: @headerColor; border-radius: 4px; color:white; height: 40px; margin: 4px 2% 0 2%; } .content{ position: absolute; top:0; } .scrollContent{ padding-top: 1.92rem; padding-bottom: 20px; } } .platform-ios { #picker { .scrollContent { padding-top: 2.32rem; } } } // iPhoneX适配 @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #picker { .scrollContent { padding-top: 2.72rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #picker { .scrollContent { padding-top: 2.72rem; } .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>