<template> <h-view id="videoList"> <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> <Tab :fatherTabNum="tabNum" @getTabNum="getTabNum" /> <div class="search has-header"> <input v-model="searchInput" placeholder="请输入进件号/承租人名称" > </div> <scroll ref="scroll" :updateData="[showLists]" :pullUp="true" class="scroll" @pullingUp="loadMore"> <div v-for="(item,index) in showLists" :key="index" class="item"> <div class="left"> <span> <img src="@/assets/contractStart/icon.png" > </span> </div> <div class="right"> <div class="right-top"> <span>合同号</span> <span>{{ item.project_number }}</span> </div> <div class="right-bottom"> <ul> <li> 承租人 <span>{{ item.bp_name }}</span> </li> <li> 已还金额 <span>{{ item.total_price | currency }}</span> </li> <li> 预约面签时间 <span class="number">{{ item.apply_date }}</span> </li> <li> <p v-if="item.interview_status ==='APPROVING'" class="to-unSign" @click="toSign"> <img src="@/assets/videoSign/unSign.png" > 视频面签 </p> </li> </ul> </div> </div> </div> </scroll> </h-view> </template> <script> import Tab from '@/pages/videoSign/tab' export default { components: { Tab, }, data () { return { tabNum: 0, isSign: false, lists: [], showLists: [], undo: [], done: [], searchInput: '', pagenum: 1, submitPagenum: 1, approvedPagenum: 1, approvedFlag: false, } }, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'MyInfo') { vm.searchInput = '' vm.pagenum = 1 vm.tabNum = 0 vm.submitPagenum = 1 vm.approvedPagenum = 1 vm.approvedFlag = false vm.undo = [] vm.done = [] vm.getList() } }) }, watch: { tabNum: { handler (newVal, oldVal) { if (newVal === 0) { this.showLists = this.undo } else if (newVal === 1) { if (!this.approvedFlag) { this.getList() } this.showLists = this.done } }, immediate: true, }, searchInput () { let vm = this if (vm.timeout) { clearTimeout(vm.timeout) } vm.timeout = setTimeout(() => { vm.search() }, 1000) }, }, created () {}, methods: { // selectShowList () { // let vm = this // vm.undo = [] // vm.done = [] // vm.tabNum = 0 // vm.undo = vm.lists.filter(i => { // return i.leases_status === 'N' // }) // vm.done = vm.lists.filter(i => { // return i.leases_status === 'Y' // }) // this.showList = this.undo // }, getTabNum (i) { this.tabNum = i this.$refs.scroll.update(false) this.$refs.scroll.scrollToTop() }, toSign () { let vm = this hlsPopup.showConfirm({ title: '提示', content: '模拟登录', onConfirm: (res) => { var sendStr = 'xcmg' if (res) { hls.cordova.cloudroom.CloudRoomService.loginCloudRoom(sendStr, function (data) { vm.entrySign() }, function (fail) { hlsPopup.showLongCenter('登录失败') }) } else { } }, }) }, /* toSign2 () { let vm = this var sendStr = 'xcmg' hls.cordova.cloudroom.CloudRoomService.loginCloudRoom(sendStr, function (data) { vm.entrySign2() }, function (fail) { hlsPopup.showLongCenter('登录失败') }) }, */ entrySign () { var sendStr = 'xcmg' hlsPopup.showConfirm({ title: '提示', content: '登录成功,进入会话', onConfirm: (res) => { if (res) { hls.cordova.cloudroom.CloudRoomService.helpYourSelf(sendStr, function (data) { }, function (fail) { hlsPopup.showLongCenter('进入会话失败') }) } else { } }, }) }, /* entrySign2 () { var sendStr = 'xcmg' hls.cordova.cloudroom.CloudRoomService.helpYourSelf(sendStr, function (data) { }, function (fail) { hlsPopup.showLongCenter('进入会话失败') }) }, */ toWatch () { hlsPopup.showLongCenter('敬请期待') }, getList () { let vm = this let url = process.env.basePath + 'interview_list_query' if (vm.tabNum === 0) { let param = { pagesize: 10, searchInput: vm.searchInput, pagenum: vm.submitPagenum, interview_status: 'APPROVING', user_phone: window.localStorage.getItem('user_phone'), } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.undo = res.lists vm.showLists = vm.undo if (res.lists.length > 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } else if (res.lists.length === 10) { vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) } else if (vm.tabNum === 1) { let param = { pagesize: 10, searchInput: vm.searchInput, pagenum: vm.approvedPagenum, interview_status: 'RESERVED', user_phone: window.localStorage.getItem('user_phone'), } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.done = res.lists vm.approvedFlag = true vm.showLists = vm.done if (res.lists.length > 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } else if (res.lists.length === 10) { vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) } }, loadMore () { let vm = this let url = process.env.basePath + 'interview_list_query' if (vm.tabNum === 0) { vm.submitPagenum++ let param = { pagesize: 10, searchInput: vm.searchInput, pagenum: vm.submitPagenum, interview_status: 'APPROVING', user_phone: window.localStorage.getItem('user_phone'), } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() let returnData = [] if (res.result === 'S') { returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { returnData.forEach((data, index, array) => { vm.undo.push(array[index]) }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { returnData.forEach((data, index, array) => { vm.undo.push(array[index]) }) vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) } else if (vm.tabNum === 1) { vm.approvedPagenum++ let param = { pagesize: 10, searchInput: vm.searchInput, pagenum: vm.approvedPagenum, interview_status: 'RESERVED', user_phone: window.localStorage.getItem('user_phone'), } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() let returnData = [] if (res.result === 'S') { returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { returnData.forEach((data, index, array) => { vm.done.push(array[index]) }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { returnData.forEach((data, index, array) => { vm.done.push(array[index]) }) vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) } }, async search () { let res = await this.submitSearch() if (res) { this.approvedearch() } }, async submitSearch () { let vm = this vm.submitPagenum = 1 let url = $config.basePath + 'interview_list_query' let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.submitPagenum, interview_status: 'APPROVING', searchInput: vm.searchInput, } vm.hlsPopup.showLoading('请稍后') let res = await vm.$post(url, param) if (res.result === 'S') { vm.hlsPopup.hideLoading() vm.submitLists = res.lists if (vm.tabNum === 0) { vm.showLists = vm.submitLists } if (res.lists.length >= 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } else if (res.lists.length === 10) { vm.$refs.scroll.update(false) } return true } else { hlsPopup.showLongCenter(res.message) return false } }, approvedearch () { let vm = this let url = $config.basePath + 'interview_list_query' vm.approvedPagenum = 1 let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.approvedPagenum, interview_status: 'RESERVED', // confirm_status: 'APPROVED', searchInput: vm.searchInput, } vm.hlsHttp.post(url, param).then(function (res) { vm.approvedLists = res.lists if (vm.tabNum === 1) { vm.showLists = vm.approvedLists } if (res.lists.length >= 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } else if (res.lists.length === 10) { vm.$refs.scroll.update(false) } }) }, dateConverse (date) { return date.replace(/\//g, '-') }, }, } </script> <style lang="less"> #videoList { .search { background-color: #fff; padding: 8px 12px; position: absolute; width: 100%; height: 1.02rem; z-index: 100; margin-top: 52px; 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; } } .scroll { background-color: #efefef; margin-top: 20px; } .item { width: 359px; height: 189px; background-color: #fff; border-radius: 2px; margin: 0 auto; margin-top: 9px; .left { width: 15%; height: 100%; float: left; span { display: block; width: 30px; height: 30px; background-color: #e8e9ed; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-left: 10px; margin-top: 8px; img { width: 11px; height: 14px; } } } .right { height: 100%; width: 85%; float: right; .right-top { width: 285px; height: 45px; font-family: PingFangSC-Semibold; font-size: 15px; color: #4b4a4b; letter-spacing: 0; line-height: 45px; border-bottom: 1px solid #f3f3f7; span:last-child { float: right; } } .right-bottom { width: 285px; margin-top: 10px; .to-unSign { float: right; width: 96px; height: 30px; background: rgba(29, 63, 255, 0.1); border-radius: 4px; font-family: PingFangSC-Regular; font-size: 14px; color: #1d3fff; letter-spacing: 0; display: flex; justify-content: center; align-items: center; img { width: 17.6px; } } .to-sign { float: right; width: 96px; height: 30px; background: rgba(33, 37, 76, 0.1); border-radius: 4px; font-family: PingFangSC-Regular; font-size: 14px; color: #21254c; letter-spacing: 0; display: flex; justify-content: center; align-items: center; img { width: 17.6px; } } .number { font-family: Verdana-Bold; font-size: 14px; color: #4b4a4b; letter-spacing: 0; font-weight: bold; } li { font-family: PingFangSC-Regular; font-size: 14px; color: #4b4a4b; letter-spacing: 0; height: 30px; width: 100%; span { float: right; } } } } } .content { position: absolute; top: 0; } .scrollContent { padding-top: 2.52rem; padding-bottom: 20px; } .tab-style { width: 100%; position: absolute; } } .platform-ios { #videoList { .scrollContent { padding-top: 2.92rem; } } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #videoList { .scrollContent { padding-top: 3.52rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #videoList { .scrollContent { padding-top: 3.52rem; } .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>