<!-- * @Author: your name * @Date: 2019-10-31 09:49:57 * @LastEditTime : 2019-12-23 14:11:26 * @LastEditors : Please set LastEditors * @Description: 合同查询--明细 * @FilePath: --> <template> <h-view id="repay-detail" 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> <h-content ref="content" class="repay-content"> <div class="header"> 合同单据 <div class="download" @click="downLoad">电子版下载 <img src="@/assets/contractInquire/download.png" alt=""></div> </div> <list-item :item-height="44" class="invoice"> <item> <div slot="name">合同号</div> <div slot="content">{{ detailInfo.project_number }}</div> </item> <item> <div slot="name">经销商</div> <div slot="content">{{ detailInfo.bp_agent_name }}</div> </item> <item> <div slot="name">承租人</div> <div slot="content">{{ detailInfo.bp_name }}</div> </item> <item> <div slot="name">产品名称</div> <div slot="content">{{ detailInfo.division_n }}</div> </item> <item> <div slot="name">设备识别号</div> <div slot="content">{{ detailInfo.product_code }}</div> </item> <item> <div slot="name">合同金额</div> <div slot="content">{{ detailInfo.total_price | currency }}</div> </item> <item> <div slot="name">商务政策</div> <div slot="content">{{ detailInfo.product_plan_id_n }}</div> </item> <item> <div slot="name">租赁物数量</div> <div slot="content">{{ detailInfo.product_num }}</div> </item> </list-item> <div class="header">设备清单</div> <scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="loadMore"> <list-item :item-height="104" class="equipment-list"> <item v-for="(item,index) in lists" :proportion="[2,1]" :key="index"> <div slot="name" class="parameters"> <div class="list"> <p>设备识别号</p> <span class="bold">{{ item.product_code }}-{{ index+1|lengthCheck }}</span> </div> <div class="list"> <p>发动机号</p> <span>{{ item.lease_item_engine_num }}</span> </div> <div class="list"> <p>车辆型号</p> <span>{{ item.vehicle_model }}</span> </div> <div class="list"> <p>合格证编号</p> <span>{{ item.certificate_number }}</span> </div> </div> <div slot="content"> <span v-if="item.overdue_times != 0" :class="['status','red']">逾期{{ item.overdue_times }}期</span> <div class="plan" @click="toRepayPlans(item.contract_id)"> <img src="@/assets/contractRepayment/plan.png" alt=""> <span>还款计划</span> </div> </div> </item> </list-item> </scroll> </h-content> <PDFDown ref="pdf"/> </h-view> </template> <script> import PDFDown from '@/components/PDFDownload' export default { name: 'RepayDetail', components: { PDFDown, }, filters: { lengthCheck: function (value) { if ((value.toString()).length === 1) { return `0${value}` } else { return value } }, }, data () { return { lists: [], pagenum: 1, hidden: false, detailInfo: {}, fileArray: [], } }, computed: { }, watch: {}, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'ContractRecords') { vm.pagenum = 1 vm.detailQuery() vm.equipQuery() } }) }, methods: { // val: contract_id toRepayPlans (val) { this.$router.push({ name: 'RepayPlans', params: { contract_id: val, lease_num: this.detailInfo.lease_num, }, }) }, downLoad () { let vm = this let url = $config.basePath + 'get_download_app' let param = { project_id: vm.$route.params.project_id, phone: window.localStorage.user_phone, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.fileArray = res.info vm.pdfDownload() } else { hlsPopup.showLongCenter(res.message) } }) }, pdfDownload () { // 下载pdf文件 let vm = this vm.fileArray.forEach(element => { if (element.fileUrl) { console.log('vm.$refs.pdf' + vm.$refs.pdf) // debugger vm.$refs.pdf.downloadPDF(element.fileUrl, element.fileName) } }) }, // 合同明细 detailQuery () { let vm = this let url = $config.basePath + 'con_contract_detial' let param = { project_id: vm.$route.params.project_id, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.detailInfo = res.info } else { hlsPopup.showLongCenter(res.message) } }) }, // 设备清单 equipQuery () { let vm = this let url = $config.basePath + 'con_equip_list' let param = { pagesize: 10, pagenum: vm.pagenum, project_id: vm.$route.params.project_id, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.lists = res.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) } } else { hlsPopup.showLongCenter(res.message) } }) }, loadMore () { let vm = this let url = $config.basePath + 'con_equip_list' vm.pagenum++ let param = { pagesize: 10, pagenum: vm.pagenum, project_id: vm.$route.params.project_id, } vm.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.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.lists.push(array[index]) }) vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, }, } </script> <style lang='less' > #repay-detail { .status{ margin-bottom:20px; display: inline-block; } .red{ color: red; border-bottom: 1px solid red; } .repay-content { overflow: hidden; .header { position: relative; height: 40px; line-height: 40px; font-size: 14px; color: #1D3FFF; text-indent: 1em; border-bottom: 1px solid #F1F0F5; .download { position: absolute; padding-left: 12px; right: 12px; top: 8px; background: #FFFFFF; border-radius: 5px; height: 24px; line-height: 24px; // width: 93px; font-family: PingFangSC-Regular; font-size: 11px; color: #1D3FFF; letter-spacing: 0.34px; img { position: absolute; height: 15px; left: 6px; top: 6px; } } &:before { content: ""; position: absolute; top: 12px; left: 0; width: 4px; height: 16px; background: #1D3FFF; } } .invoice { margin-bottom: 0px; .hls-item{ .contents{ .add-name { font-family: PingFangSC-Regular; font-size: 14px; color: #656464; } .add-content { font-family: PingFangSC-Regular; font-size: 14px; color: rgba(56,63,69,0.60); } } } } .equipment-list { border-top: none; background-color: transparent; .hls-item { border-top: 1px solid #D9DBDF; border-bottom: 1px solid #D9DBDF; background-color: #fff; margin-bottom: 10px; .contents { padding-top: 8px; .add-name{ display: flex; flex-direction: column; .parameters { width: 100%; margin-left: -40px; .list { display: flex; margin-bottom:0; p { font-family: PingFangSC-Regular; font-size: 13px; color: rgba(56,63,69,0.60); letter-spacing: 0.4px; text-align: right; flex: 1; } span { flex:1; margin-left: 15px; font-family: PingFangSC-Regular; font-size: 13px; color: #383F45; letter-spacing: 0.4px; } span.bold { font-family: PingFangSC-Semibold; font-weight: 700; } } } } .add-content { .plan { position: relative; width: 100px; height: 30px; background: rgba(29, 63, 255,.2); border-radius: 4px; img { height: 14px; position: absolute; top: 8px; left: 12px; } span { font-family: PingFangSC-Regular; font-size: 13px; color: #1D3FFF; letter-spacing: 0.4px; position: absolute; top: 5px; left: 32px; } } } } } } } .scrollContent { padding-bottom: 400px; } .tab-style { width: 100%; position: absolute; } } .platform-ios { #repay-detail { .scrollContent { // padding-top: 3.32rem; } } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #repay-detail{ .scrollContent { // padding-top: 3.72rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #repay-detail{ .scrollContent { // padding-top: 3.72rem; } } } } </style>