<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"> <input placeholder="请输入进件号/承租人名称" > </div> <h-content class="my-content"> <scroll ref="scroll" :updateData="[showList]" :pullUp="true" class="scroll"> <div v-for="(item,index) in showList" :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.division_n }}</span> </li> <li> 预约面试时间 <span class="number">{{ item.total_price }}</span> </li> <li> <p v-if="item.leases_status ==='N'" class="to-unSign" @click="toSign"> <img src="@/assets/videoSign/unSign.png" > 视屏面签 </p> <p v-if="item.leases_status ==='Y'" class="to-sign" @click="toWatch"> <img src="@/assets/videoSign/sign.png" > 视屏回放 </p> </li> </ul> </div> </div> </div> </scroll> </h-content> </h-view> </template> <script> import Tab from '@/pages/videoSign/tab' export default { components: { Tab, }, data () { return { tabNum: 0, isSign: false, lists: [], showList: [], undo: [], done: [], } }, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'MyInfo') { vm.getList() } }) }, watch: { tabNum: { handler (newVal, oldVal) { if (newVal === 0) { this.showList = this.undo } else if (newVal === 1) { this.showList = this.done } }, immediate: true, }, }, 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 }, toSign () { let vm = this // hlsPopup.showLongCenter('敬请期待') var sendStr = 'xcmg' hlsPopup.showConfirm({ title: '提示', content: '模拟登录', onConfirm: (data) => { if (data) { hls.cordova.cloudroom.CloudRoomService.loginCloudRoom(sendStr, function (data) { vm.entrySign() }, function (fail) { hlsPopup.showLongCenter('登录失败') }) } else { } }, }) }, entrySign () { var sendStr = 'xcmg' hlsPopup.showConfirm({ title: '提示', content: '登录成功,进入会话', onConfirm: (data) => { if (data) { hls.cordova.cloudroom.CloudRoomService.helpYourSelf(sendStr, function (data) { }, function (fail) { hlsPopup.showLongCenter('进入会话失败') }) } else { } }, }) }, toWatch () { hlsPopup.showLongCenter('敬请期待') }, getList () { this.lists = [ { bp_name: '刘淼', total_price: '2019-01-01', project_number: 'PRJ2019174', project_id: '49737', division_n: '平地机', leases_status: 'Y', }, { bp_name: '陈泽华', total_price: '2019-01-01', project_number: 'PRJ2019168', project_id: '49680', division_n: '平地机', leases_status: 'N', }, { bp_name: '陈泽华', total_price: '2019-01-01', project_number: 'PRJ2019160', project_id: '49494', division_n: '平地机', leases_status: 'N', }, { bp_name: '郭云龙', total_price: '2019-01-01', project_number: 'PRJ2019170', project_id: '49711', division_n: '平地机', leases_status: 'N', }, ] this.selectShowList() if (this.lists.length > 0 && this.lists.length < 10) { this.$refs.scroll.update(true) } // let vm = this // let url = process.env.basePath + 'car_apply_list_query' // let param = { // user_phone: window.localStorage.getItem('user_phone'), // } // hlsPopup.showLoading('请稍候') // vm.$post(url, param).then(function (res) { // vm.hlsPopup.hideLoading() // if (res.result === 'S') { // vm.lists = res.lists // vm.selectShowList() // } else { // hlsPopup.showLongCenter(res.message) // } // }) }, }, } </script> <style lang="less" scoped> #videoList { .search { height: 52px; background-color: #fff; display: flex; align-items: center; justify-content: center; input { width: 351px; height: 36px; line-height: 36px; text-indent: 16px; font-family: PingFangSC-Regular; font-size: 14px; color: #21254c; letter-spacing: 0; border-radius: 4px; 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; } } .my-content { background-color: #efefef; .scroll { background-color: #efefef; margin-top: 10px; } .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; } } } } } } } </style>