210 lines
4.5 KiB
Vue
210 lines
4.5 KiB
Vue
<template>
|
||
<view>
|
||
<uni-popup ref="publicPopup" @maskClick="closeEd()">
|
||
<view class="store-body">
|
||
<view >
|
||
<view style="height: 20rpx"></view>
|
||
<view class="search">
|
||
<input type="text" v-model="params.bankName" placeholder="请搜索银行名称" />
|
||
<view @click.stop="searchHandle()">搜索</view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view style="height: 800rpx;" scroll-y="true" @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower">
|
||
<view class="jee-list hide-border">
|
||
<view class="jee-list-item " v-for="(item, index) in data.dataList" @click.stop="onClick(item, index)" :key="index">
|
||
<view class="jee-list-left">{{ item.bank_alias }}</view>
|
||
<view class="jee-list-right">
|
||
<image v-if="index == data.index" src="@/static/img/select-radio.svg" mode=""></image>
|
||
<image v-else src="@/static/img/un-raido.svg" />
|
||
</view>
|
||
</view>
|
||
<jeepayListNull :list="data.dataList"></jeepayListNull>
|
||
</view>
|
||
<view class="tip-text" v-if="data.dataList.length >0">{{ data.tipText }}</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import jeepayListNull from '@/components/jeepayListNull/jeepayListNull.vue'
|
||
import { onLoad, onShow, onBackPress } from '@dcloudio/uni-app';
|
||
import { ref, reactive } from 'vue';
|
||
import useBackPress from '@/hooks/useBackPress.js'
|
||
import { $bankCode } from '@/http/apiManager.js'
|
||
|
||
const emit = defineEmits(['bankInfo'])
|
||
|
||
const props = defineProps({
|
||
ifCode: ''
|
||
})
|
||
|
||
const data = reactive({
|
||
dataList: [],
|
||
index: -1,
|
||
tipText: '上拉加载更多',
|
||
isLoad: false // 是否为上拉加载
|
||
})
|
||
|
||
const publicPopup = ref(null);
|
||
|
||
// 请求参数
|
||
let params = {
|
||
settAccountType: '',
|
||
bankName: '',
|
||
pageSize: 50,
|
||
pageNumber: 1,
|
||
}
|
||
|
||
const closeEd = () => {
|
||
publicPopup.value.close()
|
||
// #ifdef H5 || APP-PLUS
|
||
inactive()
|
||
// #endif
|
||
}
|
||
|
||
// #ifdef H5 || APP-PLUS
|
||
const { active, inactive } = useBackPress(closeEd) // onBackPress 阻断返回
|
||
// #endif
|
||
|
||
const openHandle = type => {
|
||
// #ifdef H5 || APP-PLUS
|
||
active()
|
||
// #endif
|
||
params.settAccountType = type
|
||
publicPopup.value.open('bottom')
|
||
// 每次一打开，请求参数重置params
|
||
params.pageNumber = 1
|
||
getList() // 请求列表数据
|
||
}
|
||
|
||
defineExpose({ openHandle })
|
||
|
||
const getList = () => {
|
||
data.tipText = '加载中';
|
||
|
||
$bankCode(props.ifCode ,params).then(({ bizData }) => {
|
||
|
||
data.titlePage = Math.ceil(bizData.total / params.pageSize); // 总页数
|
||
|
||
data.titlePage == params.pageNumber && data.titlePage != 1 ? (data.tipText = '暂无更多') : false;
|
||
|
||
if (bizData.records) data.tipText = '暂无更多';
|
||
|
||
if (data.isLoad) {
|
||
data.dataList.push(...bizData.records);
|
||
} else {
|
||
data.dataList = bizData.records;
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
// 搜索按钮
|
||
const searchHandle = () => {
|
||
params.pageNumber = 1
|
||
data.isLoad = false
|
||
getList()
|
||
}
|
||
|
||
// 滚动到顶部 下拉刷新
|
||
const scrolltoupper = () => {
|
||
data.isLoad = false
|
||
params.pageNumber = 1
|
||
getList()
|
||
}
|
||
|
||
// 滚动到底部 上拉加载
|
||
const scrolltolower = () => {
|
||
params.pageNumber++;
|
||
if (params.pageNumber > data.titlePage) {
|
||
params.pageNumber = params.pageNumber;
|
||
return data.isLoad = false
|
||
}
|
||
data.isLoad = true;
|
||
getList()
|
||
}
|
||
|
||
// 选择完毕后，将所有的信息抛出 由父组件接收
|
||
const onClick = (info, index) => {
|
||
data.index = index
|
||
emit('bankInfo', info)
|
||
closeEd()
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.store-body {
|
||
background-color: #fff;
|
||
height: 900rpx;
|
||
border-top-left-radius: 20rpx;
|
||
border-top-right-radius: 20rpx;
|
||
}
|
||
.active {
|
||
background-color: #5476f1;
|
||
}
|
||
.search {
|
||
height: 80rpx;
|
||
background: #f5f6f7;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
border-radius: $uni-border-radius-base;
|
||
margin: 0 20rpx;
|
||
padding: 0 20rpx;
|
||
input {
|
||
width: 80%;
|
||
}
|
||
view {
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
border-radius: 5rpx;
|
||
color: #175be6;
|
||
background: #fff;
|
||
}
|
||
}
|
||
.jee-list {
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
.jee-list-item {
|
||
&::after {
|
||
width: calc(100% - 70rpx);
|
||
}
|
||
}
|
||
}
|
||
.tip-text {
|
||
margin: 31rpx 54rpx;
|
||
color: #ccc;
|
||
text-align: center;
|
||
}
|
||
.btns {
|
||
padding: 0 30rpx 120rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: row;
|
||
& > view {
|
||
padding: 24rpx 0;
|
||
text-align: center;
|
||
border-radius: $uni-border-radius-base;
|
||
font-size: 30rpx;
|
||
}
|
||
.cancel {
|
||
width: 270rpx;
|
||
color: #808080;
|
||
margin-right: 30rpx;
|
||
box-shadow: #c5c7cc 0px 0px 1px;
|
||
}
|
||
.confirm {
|
||
flex-grow: 1;
|
||
background: #3981FF;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style>
|