<template> <view> <view class="input-box"> <view class="icon search"></view> <input placeholder="输入商户名称" v-model="merName" placeholder-style="color:#c0c0c0;" @input="toSearch()" /> </view> <view v-if="receiverList == ''" class="mart60 fotct font14 fcor666"> <image mode="widthFix" style="width: 70vw;" src="../../../static/img/noorder.png"></image> </view> <view class="width100 mart5"> <view class=" mcclist font15 fcor666" v-for="(item,index) in receiverList" :key="index" @click="changebank(item)"> {{item.merName}} </view> </view> </view> </template> <script> import { getLedgerReceiverList } from '../../../Utils/Api.js'; let app = getApp(); export default { data() { return { receiverList: [], //商户列表 pageNum: 1, pagesize: 15, isLoadMore: false, //是否加载中 merName: '' //商户名称 } }, onLoad(options) { this.getLedgerReceiverList(); }, onReachBottom() { //上拉触底函数 if (!this.isLoadMore) { //此处判断,上锁,防止重复请求 this.isLoadMore = true this.pageNum += 1 this.getLedgerReceiverList(); } }, methods: { toSearch() { console.log('====='+this.merName); this.pageNum = 1; this.pageSize = 10; this.isLoadMore = false; this.receiverList = []; this.getLedgerReceiverList(); }, //查询所有商户列表 getLedgerReceiverList() { uni.showLoading({ title: '加载中...' }) let datas = { platformType: 1, pageNum: this.pageNum, merNme: this.merName, pageSize: this.pagesize } getLedgerReceiverList(datas).then(res => { uni.hideLoading(); if (res.return_code == '000000' && res.return_data.list) { this.receiverList = this.receiverList.concat(res.return_data.list); if (res.return_data.pages == this.pageNum) { this.isLoadMore = true; } else { this.isLoadMore = false } } else { this.receiverList = []; this.isLoadMore = true } }) }, // 选择商户 changebank(item) { app.globalData.receiverNo = item.receiverNo; app.globalData.receiverName = item.merName; uni.navigateBack(); } } } </script> <style lang="scss"> .mcclist { width: calc(100% - 50upx); height: 100upx; display: flex; align-items: center; background-color: rgba($color: #ffffff, $alpha: 0.1); border-bottom: 1px solid #f6f6f6; padding: 12upx 25upx; } .input-box { width: 90%; margin-left: 5%; margin-top: 15px; height: 70rpx; background-color: #f5f5f5; border-radius: 10rpx; position: relative; display: flex; align-items: center; .icon { display: flex; align-items: center; position: absolute; top: 2px; left: 5px; width: 60upx; height: 60upx; font-size: 34upx; color: #c0c0c0; } input { padding-left: 50upx; height: 28upx; font-size: 28upx; width: 100%; } } </style>