<!-- * @Author: your name * @Date: 2019-10-31 09:49:57 * @LastEditTime: 2019-12-05 14:53:37 * @LastEditors: Please set LastEditors * @Description: 合同查询--记录 * @FilePath: --> <template> <h-view id="contract-records" 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> <div v-if="data===null" class="null"> <div class="display"> <img src="@/assets/contractRepayment/null.png" alt=""> <p>暂时没有还款记录</p> <div @click="$routeGo()">返回</div> </div> </div> <div v-if="data!==null" class="wrap has-header"> <div class="tab"> <p><span :class="{'selected':selected === 'all'}" @click="isSelected('all')">全部</span></p> <p><span :class="{'selected':selected === 'one'}" @click="isSelected('one')">待首付</span></p> <p><span :class="{'selected':selected === 'two'}" @click="isSelected('two')">首付还款中</span></p> <p><span :class="{'selected':selected === 'three'}" @click="isSelected('three')">还款中</span></p> <p><span :class="{'selected':selected === 'four'}" @click="isSelected('four')">已结清</span></p> </div> <div class="search"> <input v-model="searchInput" type="text" placeholder="请输入合同号/承租人名称"> </div> </div> <!-- 全部合同记录 --> <scroll v-show="data!==null" ref="scroll" :updateData="[showLists]" :pullUp="true" @pullingUp="loadMore('全部',pagenum,lists)" > <div class="pay-content"> <div v-for="(item,index) in showLists" :key="index" class="contract-item"> <div class="header"> <img src="@/assets/contractRepayment/contract.png" alt=""> <h2>{{ item.project_number }}</h2> <p v-if="item.contract_status_n === '待首付'" class="green">待首付</p> <p v-if="item.contract_status_n === '首付还款中'" class="orange">首付还款中</p> <p v-if="item.contract_status_n === '还款中'" class="blue">还款中</p> <p v-if="item.contract_status_n === '已结清'" class="black">已结清</p> </div> <div class="center"> <div><span>承租人</span><p>{{ item.bp_name }}</p></div> <div><span>年利率</span><p>{{ item.int_rate_n }}</p></div> <div><span>期限</span><p>{{ item.lease_times }}期</p></div> <div><span>融资金额</span><p class="bold">{{ parseFloat(item.finance_amount).toFixed(2) | currency }}</p></div> <span v-if="item.con_overdue_status === '已逾期'" class="red">{{ item.con_overdue_status }}</span> <section @click="toRepayDetail(item.project_id)"> <img src="@/assets/contractRepayment/view.png" alt=""> <span>查看合同明细</span> </section> </div> </div> </div> </scroll> </h-view> </template> <script> export default { name: 'ContractRecords', components: { }, data () { return { // data: null, // 无记录时 data: 1, lists: [], // 全部记录 showLists: [], selected: 'all', unSignedLists: [], // 待首付 unRepayLists: [], // 首付还款中 repayingLists: [], // 还款中 repayedLists: [], // 已结清 pagenum: 1, // 全部列表页码 unSigned_pagenum: 1, // 待首付页码 unRepay_pagenum: 1, // 首付还款中页码 repaying_pagenum: 1, // 还款中页码 repayed_pagenum: 1, // 已结清页码 searchInput: '', // 搜索内容 contract_status_n: '全部', // 全部/待首付/首付还款中/还款中/已结清 unSigned_flag: false, // 控制tab切换时再次请求 unRepay_flag: false, repaying_flag: false, repayed_flag: false, } }, computed: {}, watch: { selected () { this.$refs.scroll.update(false) this.$refs.scroll.scrollToTop() if (this.selected === 'all') { this.contract_status_n = '全部' // this.pageNum = this.pagenum this.showLists = this.lists } else if (this.selected === 'one') { this.contract_status_n = '待首付' // this.pageNum = this.unSigned_pagenum this.showLists = this.unSignedLists if (!this.unSigned_flag) { this.recordQuery('待首付', this.unSignedLists) } } else if (this.selected === 'two') { this.contract_status_n = '首付还款中' // this.pageNum = this.unRepay_pagenum this.showLists = this.unRepayLists if (!this.unRepay_flag) { this.recordQuery('首付还款中', this.unRepayLists) } } else if (this.selected === 'three') { this.contract_status_n = '还款中' // this.pageNum = this.repaying_pagenum this.showLists = this.repayingLists if (!this.repaying_flag) { this.recordQuery('还款中', this.repayingLists) } } else if (this.selected === 'four') { this.contract_status_n = '已结清' // this.pageNum = this.repayed_pagenum this.showLists = this.repayedLists if (!this.repayed_flag) { this.recordQuery('已结清', this.repayedLists) } } }, searchInput () { let vm = this if (vm.timeout) { clearTimeout(vm.timeout) } vm.timeout = setTimeout(() => { vm.searchs() }, 1000) }, }, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'HomePage') { vm.selected = 'all' vm.pagenum = 1 vm.unSigned_pagenum = 1 vm.unRepay_pagenum = 1 vm.repaying_pagenum = 1 vm.repayed_pagenum = 1 vm.searchInput = '' vm.contract_status_n = '全部' vm.lists = [] vm.unSignedLists = [] vm.unRepayLists = [] vm.repayingLists = [] vm.repayedLists = [] vm.unSigned_flag = false vm.unRepay_flag = false vm.repaying_flag = false vm.repayed_flag = false vm.recordQuery('全部', vm.lists) } }) }, methods: { // 合同明细 val: project_id toRepayDetail (val) { this.$router.push({ name: 'RepayDetail', params: { project_id: val, }, }) }, // tab切换 isSelected (name) { this.selected = name }, // 合同记录 recordQuery (status, arr) { let vm = this let url = $config.basePath + 'con_contract_list' let param = { user_phone: window.localStorage.user_phone, searchInput: vm.searchInput, pagenum: 1, pagesize: 10, contract_status_n: status, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { // 判断有无数据 if (status === '全部' && res.lists.length === 0) { vm.data = null } else { vm.data = 1 } res.lists.forEach((data, index, array) => { arr.push(array[index]) }) vm.showLists = arr // 展示请求到的数据 if (res.lists.length >= 0 && res.lists.length < 10) { if (status === '全部') { vm.$refs.scroll.update(true) } else if (status === '待首付') { vm.unSigned_flag = true vm.$refs.scroll.update(true) } else if (status === '首付还款中') { vm.unRepay_flag = true vm.$refs.scroll.update(true) } else if (status === '还款中') { vm.repaying_flag = true vm.$refs.scroll.update(true) } else if (status === '已结清') { vm.repayed_flag = true vm.$refs.scroll.update(true) } } else if (res.lists.length === 10) { if (status === '全部') { vm.$refs.scroll.update(false) } else if (status === '待首付') { vm.unSigned_flag = true vm.$refs.scroll.update(false) } else if (status === '首付还款中') { vm.unRepay_flag = true vm.$refs.scroll.update(false) } else if (status === '还款中') { vm.repaying_flag = true vm.$refs.scroll.update(false) } else if (status === '已结清') { vm.repayed_flag = true vm.$refs.scroll.update(false) } } } else { hlsPopup.showLongCenter(res.message) } }) }, loadMore () { let vm = this if (vm.selected === 'all') { vm.pagenum++ vm.pageNum = vm.pagenum } else if (vm.selected === 'one') { vm.unSigned_pagenum++ vm.pageNum = vm.unSigned_pagenum } else if (vm.selected === 'two') { vm.unRepay_pagenum++ vm.pageNum = vm.unRepay_pagenum } else if (vm.selected === 'three') { vm.repaying_pagenum++ vm.pageNum = vm.repaying_pagenum } else if (vm.selected === 'four') { vm.repayed_pagenum++ vm.pageNum = vm.repayed_pagenum } let url = $config.basePath + 'con_contract_list' let param = { user_phone: window.localStorage.user_phone, searchInput: vm.searchInput, pagenum: vm.pageNum, pagesize: 10, contract_status_n: vm.contract_status_n, } vm.hlsPopup.showLoading('请稍后') vm.hlsHttp.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) => { // 加载更多时,将请求到的数据push到对应数组 if (vm.selected === 'all') { vm.lists.push(array[index]) } else if (vm.selected === 'one') { vm.unSignedLists.push(array[index]) } else if (vm.selected === 'two') { vm.unRepayLists.push(array[index]) } else if (vm.selected === 'three') { vm.repayingLists.push(array[index]) } else if (vm.selected === 'four') { vm.repayedLists.push(array[index]) } }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { returnData.forEach((data, index, array) => { if (vm.selected === 'all') { vm.lists.push(array[index]) } else if (vm.selected === 'one') { vm.unSignedLists.push(array[index]) } else if (vm.selected === 'two') { vm.unRepayLists.push(array[index]) } else if (vm.selected === 'three') { vm.repayingLists.push(array[index]) } else if (vm.selected === 'four') { vm.repayedLists.push(array[index]) } }) vm.$refs.scroll.update(true) } } else { hlsPopup.showLongCenter(res.message) } }) }, // 搜索 async searchs () { let resAll = await this.searchAll() if (resAll) { let res = await this.searchUnsign() // 待首付结果 if (res) { let resUnrepay = await this.searchUnrepay() // 首付还款中结果 if (resUnrepay) { let resRepaying = await this.searchRepaying() // 还款中结果 if (resRepaying) { this.searchRepayed() } } } } }, async searchAll () { let vm = this let url = $config.basePath + 'con_contract_list' let param = { contract_status_n: '全部', user_phone: window.localStorage.user_phone, searchInput: vm.searchInput, pagenum: 1, pagesize: 10, } vm.hlsPopup.showLoading('请稍后') let res = await vm.$post(url, param) if (res.result === 'S') { vm.hlsPopup.hideLoading() vm.lists = res.lists // 展示数据更新通过watch监听,默认展示当前页面请求到的数据 if (vm.selected === 'all') { vm.showLists = vm.lists } 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 } }, async searchUnsign () { let vm = this let url = $config.basePath + 'con_contract_list' let param = { contract_status_n: '待首付', user_phone: window.localStorage.user_phone, searchInput: vm.searchInput, pagenum: 1, pagesize: 10, } vm.hlsPopup.showLoading('请稍后') let res = await vm.$post(url, param) if (res.result === 'S') { vm.hlsPopup.hideLoading() vm.unSignedLists = res.lists if (vm.selected === 'one') { vm.showLists = vm.unSignedLists } 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 } }, async searchUnrepay () { let vm = this let url = $config.basePath + 'con_contract_list' let param = { contract_status_n: '首付还款中', user_phone: window.localStorage.user_phone, searchInput: vm.searchInput, pagenum: 1, pagesize: 10, } let res = await vm.$post(url, param) if (res.result === 'S') { vm.unRepayLists = res.lists if (vm.selected === 'two') { vm.showLists = vm.unRepayLists } 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 } }, async searchRepaying () { let vm = this let url = $config.basePath + 'con_contract_list' let param = { contract_status_n: '还款中', user_phone: window.localStorage.user_phone, searchInput: vm.searchInput, pagenum: 1, pagesize: 10, } let res = await vm.$post(url, param) if (res.result === 'S') { vm.repayingLists = res.lists if (vm.selected === 'three') { vm.showLists = vm.repayingLists } 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 } }, searchRepayed () { let vm = this let url = $config.basePath + 'con_contract_list' let param = { contract_status_n: '已结清', user_phone: window.localStorage.user_phone, searchInput: vm.searchInput, pagenum: 1, pagesize: 10, } vm.hlsHttp.post(url, param).then(function (res) { vm.repayedLists = res.lists if (vm.selected === 'four') { vm.showLists = vm.repayedLists } 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) } }) }, }, } </script> <style lang='less' > #contract-records { .tab { display: flex; background-color: #fff; padding: 6px 8px 4px 6px; p { text-align: center; flex: auto; span { display: block; padding: 6px 0; background-color: #fff; font-family: PingFangSC-Regular; font-size: 15px; color: #656464; } span.selected { background: rgba(29,63,255,.2); border-radius: 20px; color: #1D3FFF; font-family: PingFangSC-Semibold; font-weight: 700; } } } .search { background-color: #fff; padding: 8px 12px; position: relative; 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; border-radius: 4px; height: 36px; 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; } } .pay-content { padding: 8px 8px; .contract-item { height: 208px; background-color: #fff; margin-bottom: 8px; .header { position: relative; height: 44px; img { position: absolute; width: 30px; height: 30px; left: 10px; top: 8px; } h2 { position: absolute; top: 13px; left: 50px; font-family: PingFangSC-Semibold; font-size: 15px; color: #4B4A4B; letter-spacing: 0; margin: 0px; font-weight: 700; } p { position: absolute; right: 20px; top: 13px; width: 57px; height: 21px; line-height: 19px; text-align: center; border-radius: 2px; font-family: PingFangSC-Regular; font-size: 14px; } p.orange { border: 1px solid #FDB62F; color: #FDB62F; } p.blue { color: #1D3FFF; border: 1px solid #1D3FFF; } p.green { color: #1BA261; border: 1px solid #1BA261; } p.black { color: #4B4A4B; border: 1px solid #4B4A4B; } } .center { padding-left: 50px; padding-right: 24px; position: relative; div { display: flex; padding: 8px 0; span { flex:1; font-family: PingFangSC-Regular; font-size: 14px; color: #4B4A4B; } p { flex:2; text-align: right; font-family: Verdana; font-size: 14px; color: #4B4A4B; } p.bold { font-weight: 700; font-family: Verdana-Bold; } } div:first-child { border-top: 1px solid #F3F3F7; } span.red{ margin-top: 10px; position: absolute; //top: 10px; color: #F04747; font-family: PingFangSC-Regular; font-size: 14px; } span.red::before { position: absolute; bottom: -3px; content: ""; width: 100%; height: 4px; background-color: rgb(255, 169, 169); } section { position: absolute; width: 123px; height: 30px; right: 24px; //bottom: 13px; line-height: 30px; background: rgba(33, 37, 76,.1); border-radius: 4px; img { width:16px; position: absolute; top: 8px; left: 8px; } span { position: absolute; left: 32px; font-family: PingFangSC-Regular; font-size: 14px; color: #21254C; } } } } } .null { position: relative; .display { width:150px; position: absolute; left: 50%; transform: translateX(-50%); top: 100px; z-index: 999; img { width:150px; } p { text-align: center; opacity: 0.7; font-family: PingFangSC-Semibold; font-size: 17px; color: #21254C; letter-spacing: 0; font-weight: 700; margin-top: 10px; } div { width: 140px; height: 32px; background: #1D3FFF; border-radius: 4px; color: white; line-height: 32px; text-align: center; margin-left: 5px; margin-top: 20px; } } } .wrap { width: 100%; position: absolute; z-index: 100 } .content{ position: absolute; top:0; } .scrollContent{ padding-top: 2.60rem; padding-bottom: 20px; } } .platform-ios { #contract-records { .scrollContent { padding-top: 3rem; } } } // iPhoneX适配 @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #contract-records { .scrollContent { padding-top: 3.4rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #contract-records { .scrollContent { padding-top: 3.8rem; } } } } </style>