/** * @Author Sean * @Date 2019/10/22 */ <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="search has-header"> <input v-model="keyWords" type="text" placeholder="请输入还款金额" > </div> <scroll ref="scroll" :updateData="[showList]" :pullUp="true" @pullingUp="loadMore"> <section class="reimburse-wrap"> <list-item v-for="(list,index) in showList" :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.order_amount|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> <div v-if="showList.length === 0"> <div class="display"> <img src="@/assets/messageCenter/noMsg.png" alt=""> </div> </div> </h-view> </template> <script> export default { data () { return { reimburseList: [], searchList: [], showList: [], keyWords: '', pagenum: 1, searchPagenum: 1, } }, beforeRouteEnter (to, from, next) { next(vm => { // if (from.name === 'MyInfo') { vm.pagenum = 1 vm.searchPagenum = 1 vm.getList() // } }) }, watch: { keyWords (newVal, oldVal) { this.search() }, }, methods: { godetail (e) { this.$router.push({ name: 'ReimburseDetail', params: { order_id: e, }, }) }, loadMore () { if (this.keyWords) { this.searchMore() } else { this.getList() } }, searchMore () { let vm = this let url = process.env.basePath + 'my_repayment_query' let param = { user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.searchPagenum, searchInput: vm.keyWords, } vm.hlsPopup.showLoading('数据加载中,请稍后!') vm.hlsHttp.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.searchList.push(array[index]) }) vm.searchPagenum++ vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.searchList.push(array[index]) }) vm.searchPagenum++ vm.$refs.scroll.update(false) } vm.showList = vm.searchList } }) }, search () { let vm = this vm.searchPagenum = 2 vm.$refs.scroll.scrollToTop() let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'my_repayment_query' + '&index' + `'${randomString}'` let param = { user_phone: window.localStorage.getItem('user_phone'), searchInput: vm.keyWords, pagesize: 10, pagenum: 1, } vm.hlsPopup.showLoading('数据加载中,请稍后!') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.searchList = res.lists vm.showList = res.lists vm.$refs.scroll.update(false) } }) }, getList () { let vm = this let url = process.env.basePath + 'my_repayment_query' let param = { user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.pagenum, } vm.hlsPopup.showLoading('数据加载中,请稍后!') vm.hlsHttp.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.reimburseList.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.reimburseList.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(false) } vm.showList = vm.reimburseList } }) }, }, } </script> <style lang="less" rel="stylesheet"> #reimburse { .display { position: fixed; // top: 0; img { width: 100%; height: 100%; // margin-top: -70px; } } .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; } } .search { background-color: #fff; padding: 8px 12px; position: absolute; width: 100%; height: 1.02rem; z-index: 100; // margin-top: 52px; margin-bottom: 8px; 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; line-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; } } // .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: 1.92rem; padding-bottom: 20px; } .tab-style { width: 100%; position: absolute; } } .platform-ios { #reimburse { .scrollContent { padding-top: 2.2rem; } } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #reimburse { .scrollContent { padding-top: 2.62rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #reimburse { .scrollContent { padding-top: 2.62rem; } .search{ input { background: url("../../assets/contractStart/search1.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); padding: 8px 12px; border-radius: 4px; // height: 36px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; } } } } } </style>