<template> <h-view id="confirmList"> <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 @getTabNum="getTabNum" /> <div class="search has-header"> <input v-model="keyWord" placeholder="请输入合同号/产品线/承租人名称" > </div> <scroll ref="scroll" :updateData="[showList]" :pullUp="true" @pullingUp="getList"> <div v-for="(item,index) in showList" :key="index" class="item" @click="changePage(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|currency }}</span> </li> </ul> </div> </div> </div> </scroll> </h-view> </template> <script> import Tab from '@/pages/carConfirm/tab' export default { components: { Tab, }, data () { return { tabNum: 0, keyWord: '', status: '', pagenumNew: 1, pagenumApproved: 1, lists: [], showList: [], undo: [], done: [], } }, watch: { tabNum: { handler (newVal, oldVal) { if (newVal === 0) { this.status = 'SUBMIT' this.showList = this.undo } else if (newVal === 1) { this.status = 'APPROVED' this.showList = this.done } this.getList() }, immediate: true, }, keyWord (newVal, oldVal) { this.search() }, }, created () {}, beforeRouteEnter (to, from, next) { next(vm => { vm.pagenumNew = 1 vm.pagenumApproved = 1 vm.lists = [] }) }, methods: { search () { let vm = this let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'car_confirm_list_query' + '&index' + `'${randomString}'` let param = { user_phone: window.localStorage.getItem('user_phone'), confirm_status: vm.status, searchInput: vm.keyWord, } vm.$post(url, param).then(function (res) { if (res.result === 'S') { vm.lists = res.lists vm.selectShowList() } else { hlsPopup.showLongCenter(res.message) } }) }, selectShowList () { let vm = this vm.undo = [] vm.done = [] this.lists.forEach(item => { if (item.confirm_status === 'SUBMIT') { vm.undo.push(item) } else if (item.confirm_status === 'APPROVED') { vm.done.push(item) } }) if (vm.tabNum === 0) { this.showList = this.undo } else { this.showList = this.done } }, getTabNum (i) { this.tabNum = i this.$refs.scroll.update(false) this.$refs.scroll.scrollToTop() }, changePage (e) { this.$router.push({ name: 'ConfirmDetail', params: { project_id: e.project_id, confirm_status: e.confirm_status, }, }) }, getList () { let vm = this let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'car_confirm_list_query' + '&index' + `'${randomString}'` let param = { user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.status === 'APPROVED' ? vm.pagenumApproved : vm.pagenumNew, confirm_status: vm.status, 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.lists.push(array[index]) }) vm.status === 'APPROVED' ? vm.pagenumApproved++ : vm.pagenumNew++ vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.lists.push(array[index]) }) vm.status === 'APPROVED' ? vm.pagenumApproved++ : vm.pagenumNew++ vm.$refs.scroll.update(false) } vm.selectShowList() } else { hlsPopup.showLongCenter(res.message) } }) }, }, } </script> <style lang="less"> #confirmList { .search { background-color: #fff; padding: 8px 12px; position: absolute; width: 100%; height:1.02rem; z-index: 100; margin-top: 52px; margin-bottom: 8px; 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; } 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; } } .item { width: 359px; height: 148px; 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; .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.92rem; padding-bottom: 20px; } .tab-style { width: 100%; position: absolute; } } .platform-ios { #confirmList { .scrollContent { padding-top: 3.32rem; } } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #confirmList { .scrollContent { padding-top: 3.72rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #confirmList { .scrollContent { padding-top: 3.72rem; } } } } </style>