/** * @Author Sean * @Date 2019/10/22 */ <template> <h-view id="reimburseDetail" class="public-style" style="height: 100%"> <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 style="overflow:hidden"> <list-item :item-height="44"> <item> <div slot="name">交易流水号</div> <div slot="content">{{ detail.order_number }}</div> </item> <item> <div slot="name">交易时间</div> <div slot="content">{{ detail.order_date }}</div> </item> <!-- <item> <div slot="name">收款账号</div> <div slot="content">{{ detail.received_amount }}</div> </item> <item> <div slot="name">收款账户名称</div> <div slot="content">{{ detail.received_amount_name }}</div> </item> --> <item> <div slot="name">商业伙伴</div> <div slot="content">{{ detail.bp_name }}</div> </item> <item> <div slot="name">商业伙伴类型</div> <div slot="content">{{ detail.bp_type_n }}</div> </item> <item> <div slot="name">付款账号</div> <div slot="content">{{ detail.pay_amount }}</div> </item> <!-- <item> <div slot="name">付款账户名称</div> <div slot="content">{{ detail.pay_amount_name }}</div> </item> --> </list-item> <scroll ref="scroll" :updateData="[conList]" :pullUp="true" @pullingUp="getConList"> <div v-for="(list,index) in conList" :key="index" class="contract"> <div> <div class="top"> <img src="@/assets/reimburseMyself/q.png" > <span class="number">合同号</span> <span>{{ list.project_number }}</span> </div> <div class="bottom"> <list-item> <item v-for="(item,index) in list.cf_lists" :key="index"> <div slot="name">{{ item.cf_item_name }}</div> <div slot="content">{{ parseFloat(item.received_amount).toFixed(2) | currency }}</div> </item> </list-item> </div> </div> </div> </scroll></h-content> </h-view> </template> <script> export default { data () { return { pagenum: 1, detail: {}, conList: [], } }, beforeRouteEnter (to, from, next) { next(vm => { vm.pagenum = 1 vm.getDetail() vm.getConList() }) }, created: function () {}, mounted: function () {}, updated: function () {}, destroyed: function () {}, methods: { getDetail () { let vm = this let url = process.env.basePath + 'my_repayment_detial_query' let param = { order_id: vm.$route.params.order_id, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.detail = res.info } else { hlsPopup.showLongCenter(res.message) } }) }, getConList () { let vm = this let url = process.env.basePath + 'my_con_list_query' let param = { order_id: vm.$route.params.order_id, pagesize: 10, pagenum: vm.pagenum, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.prj_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.conList.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.conList.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, }, } </script> <style lang="less" rel="stylesheet"> #reimburseDetail { .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; } } .hls-item .contents .add-name .left-icon { width: 30px; } .list-wrap { margin: 10px; } .add-name { .time-font { font-family: PingFangSC-Regular; font-size: 14px; color: #656464; } } .add-content { .money-font { font-family: Verdana-Bold; font-size: 15px; color: rgba(56, 63, 69, 0.6); font-weight: 600; } .time-font { font-family: PingFangSC-Regular; font-size: 14px; color: #656464; } } .contract { width: 359px; background-color: #fff; margin: 0 auto; margin-top: 8px; .top { height: 43px; display: flex; align-items: center; display: flex; img { width: 30px; height: 30px; margin-left: 10px; } .number { margin-left: 10px; font-family: PingFangSC-Semibold; font-size: 14px; color: #4b4a4b; letter-spacing: 0; line-height: 18px; } span:last-child { margin-left: 166px; font-family: PingFangSC-Semibold; font-size: 14px; color: rgba(75, 74, 75, 0.97); letter-spacing: 0; line-height: 18px; } } .bottom { width: 300px; margin: 0 auto; display: flex; } .left { flex: 1; } .right { flex: 1; text-align: right; } } .content { position: absolute; } .scrollContent { padding-bottom: 320px; } .tab-style { width: 100%; position: absolute; } } </style>