<!-- * @Description: 修改部分样式和数据筛选 * @Author: your name * @Date: 2019-09-27 11:23:25 * @LastEditTime: 2019-10-10 10:41:10 * @LastEditors: Please set LastEditors --> <template> <h-view id="sign" class="public-style"> <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="hinput"> <div class="search-box"> <input v-model="keyWords" type="text" placeholder="请输入进件号/承租人名称"> <img src="@/assets/distributorSign/search.png" alt=""> </div> </div> <h-content v-if="tabNum === 0"> <div v-for="(item,index) in submitLists" :key="index" class="contract-list" @click="goDetails (item)"> <div class="item"> <img src="@/assets/distributorSign/icon-进件合同.png" alt=""> <p class="incoming-num">进件号</p> <p class="code">{{ item.project_number }}</p> </div> <div class="details"> <div class="option"> <p class="name">承租人</p> <p class="full-name normal">{{ item.bp_name }}</p> </div> <div class="option"> <p class="name">合同金额</p> <p class="normal money">{{ item.total_price|NumFormat }}</p> <img src="@/assets/distributorSign/goDetails.png" alt=""> </div> <div class="option"> <p class="name">申请时间</p> <p class="normal">{{ item.confirm_start_date|timeFormat }}</p> </div> </div> </div> </h-content> <h-content v-if="tabNum === 1"> <div v-for="(item,index) in approvedLists" :key="index" class="contract-list" @click="goDetails (item)"> <div class="item"> <img src="@/assets/distributorSign/icon-进件合同.png" alt=""> <p class="incoming-num">进件号</p> <p class="code">{{ item.project_number }}</p> </div> <div class="details"> <div class="option"> <p class="name">承租人</p> <p class="full-name normal">{{ item.bp_name }}</p> </div> <div class="option"> <p class="name">合同金额</p> <p class="normal money">{{ item.total_price|currency }}</p> <img src="@/assets/distributorSign/goDetails.png" alt=""> </div> <div class="option"> <p class="name">申请时间</p> <p class="normal">{{ item.confirm_start_date|timeFormat }}</p> </div> </div> </div> </h-content> </h-view> </template> <script> import Tab from '@/pages/intoApproval/intoApproval/into-tab' export default { name: 'ContractList', components: { Tab, }, filters: { 'timeFormat': function (time) { var date = new Date(time) var y = date.getFullYear() var m = date.getMonth() + 1 var d = date.getDate() if (m < 10) { m = `0${m}` } if (d < 10) { d = `0${d}` } return `${y}-${m}-${d}` }, }, data () { return { tabNum: 0, keyWords: '', contractMsg: [], showList: [], unConfirm: [], confirm: [], submitLists: [], approvedLists: [], } }, watch: { 'tabNum': function (newVal, oldVal) { if (newVal === 0) { this.showList = this.contractMsg } else if (newVal === 1) { this.showList = this.contractMsg } }, 'keyWords': function (newVal, oldVal) { let newL = [] let vm = this vm.contractMsg.forEach(item => { if (item.bp_name.indexOf(newVal) !== -1 || item.project_number.indexOf(newVal) !== -1) { newL.push(item) } }) if (newVal === '') { vm.showList = vm.contractMsg } else { vm.showList = newL } }, }, created () { this.getList() }, methods: { getList () { let vm = this let url = process.env.basePath + 'prj_confirm_list_query' let param = { user_phone: window.localStorage.user_phone, } vm.hlsPopup.showLoading('数据加载中,请稍候!') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.submitLists = res.lists.filter(item => item.confirm_status === 'SUBMIT') vm.approvedLists = res.lists.filter(item => item.confirm_status === 'APPROVED') vm.contractMsg = res.lists vm.showList = res.lists } }) }, selectUnConfirm () { let vm = this let list = vm.contractMsg.filter(item => { return item.confirm_status === 'SUBMIT' }) vm.unConfirm = list let list1 = vm.contractMsg.filter(item => { return item.confirm_status === 'APPROVED' }) vm.confirm = list1 }, getTabNum (i) { this.tabNum = i }, goDetails (item) { window.localStorage.setItem('confirm_id', item.confirm_id) window.localStorage.setItem('bp_class', item.bp_class) window.localStorage.setItem('project_id', item.project_id) this.$router.push({ name: 'Base', params: { confirm_status: item.confirm_status, hasButtom: true, }, }) }, }, } </script> <style lang="less" scoped> #sign { .bar-custom{ background-color: #00469c; } .h-header-btn { img { width: 16px; height: 16px; margin-left: 4px; } span { font-family: PingFangSC-Semibold; margin-left: 16px; font-size: 17px; letter-spacing: 0.61px; line-height: 24px; } } .hinput { position: relative; z-index: 50; width: 100%; height: 68px; border-bottom:1px solid #ccc; display: flex; justify-content: center; align-items: center; margin-top: 3px; background: #fff; .search-box { width: 93.6%; height: 36px; font-size: 14px; color: #B4B4B5; letter-spacing: 0; font-family: PingFangSC-Regular; border: 1px solid rgba(56,63,69,0.60); border-radius: 4px; display: flex; flex-direction: row; justify-content: center; align-items: center; input { width: 90%;height: 100%; opacity: 0.4; border: none; line-height: 34px; } } } .content{ padding-bottom: 14px; } .contract-list { width: 100%; height: 120px; background: #fff; .item { width: 100%; height: 34px; background: rgba(00, 70, 156, 0.1); display: flex; flex-direction: row; align-items: center; img { margin-left: 16.6px; } .incoming-num { font-family: PingFangSC-Semibold; height: 20px; font-weight: bolder; line-height: 20px; font-size: 14px; color: #00469C; letter-spacing: 0; margin-left: 8.8px; } .code { font-family: PingFangSC-Semibold; font-size: 14px; color: #00469C; margin-left: 8px; font-weight: bolder } } .details { width: 100%; height: 86px; display: flex; flex-direction: column; justify-content: space-around; padding: 6px 0; .option { width: 100%; height: 18px; display: flex; flex-direction: row; .name { font-family: PingFangSC-Regular; font-size: 13px; color: rgba(56,63,69,0.60); width: 80px; height: 18px; line-height: 18px; text-align: right } .normal { font-family: PingFangSC-Regular; font-size: 13px; color: #383F45; height: 18px; line-height: 18px; margin-left: 8px; } .money { color: #FCC800; } img { margin-left: 55% } } .option:nth-of-type(2) { position: relative; img{ position: absolute; right: 10px; } } } } } </style>