<template> <h-view id="reimburse" 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> <div class="hinput"> <input v-model="keyWords" type="text" placeholder="请输入退款金额" > </div> <scroll ref="scroll" :updateData="[reimburseList]" :pullUp="true"> <section class="reimburse-wrap"> <list-item v-for="(list,index) in reimburseList" :key="index" @click.native="godetail(list.order_id)" > <item> <img slot="left-icon" src="@/assets/reimburseMyself/reimburse.png" class="left-icon" > <div slot="name">退款金额</div> <div slot="content" class="money-font">{{ list.orderamount | currency }}</div> </item> <item> <div slot="left-icon" class="left-icon" /> <div slot="name" class="time-font">还款时间</div> <div slot="content" class="time-font">{{ list.order_date }}</div> </item> </list-item> </section> </scroll> </h-view> </template> <script> export default { data () { return { reimburseList: [ { order_date: '2019/10/24', orderamount: '0', order_id: '16', }, ], keyWords: '', } }, beforeRouteEnter (to, from, next) { next(vm => { vm.getList() }) }, methods: { godetail (e) { this.$router.push({ name: 'DrawbackDetail', params: { order_id: e, }, }) }, getList () { let vm = this // let url = process.env.basePath + 'my_repayment_query' // let param = { // user_phone: window.localStorage.getItem('user_phone'), // } // vm.hlsPopup.showLoading('数据加载中,请稍后!') // vm.hlsHttp.post(url, param).then(function (res) { // vm.hlsPopup.hideLoading() // if (res.result === 'S') { // vm.reimburseList = res.lists // this.reimburseList = [ // { // order_date: '2019/10/24', // orderamount: '0', // order_id: '16', // }, // ] if (vm.reimburseList.length >= 0 && vm.reimburseList.length < 10) { vm.$refs.scroll.update(true) } // } // }) }, }, } </script> <style lang="less"> #reimburse { .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; display: flex; justify-content: center; align-items: center; margin-top: 3px; background: #fff; input { width: 351px; height: 36px; line-height: 36px; padding-left:12px; margin: 0 auto; opacity: 0.4; border: none; background: url("../../assets/drawback/uncheck.png") 310px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); } input:focus { background-color: #fff; background: url("../../assets/drawback/check.png") 310px no-repeat; background-size: 16px 16px; border: 1px solid #1d3fff; } } .content { margin-top: 10px; } .scrollContent { padding-bottom: 70px; } .reimburse-wrap { margin: 10px; } .hls-item .contents .add-name .left-icon { width: 30px; } .add-name { .time-font { font-family: PingFangSC-Regular; font-size: 14px; color: rgba(56, 63, 69, 0.6); } } .add-content { .money-font { font-family: Verdana-Bold; font-size: 15px; color: #1d3fff; } .time-font { font-family: PingFangSC-Regular; font-size: 14px; color: rgba(56, 63, 69, 0.6); } } .content { position: absolute; top: 0; } .scrollContent { padding-top: 2.05rem; padding-bottom: 20px; } .tab-style { width: 100%; position: absolute; } } .platform-ios { #reimburse { .scrollContent { padding-top: 2.45rem; } } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #reimburse { .scrollContent { padding-top: 3.05rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #reimburse { .scrollContent { padding-top: 3.05rem; } .hinput { input { width: 351px; // height: 36px; padding:8px 20px; margin: 0 auto; opacity: 0.4; border: none; background: url("../../assets/drawback/uncheck.png") 310px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); } } } } } </style>