源文件
This commit is contained in:
209
jeepay-ui-uapp-agent/components/sftSelectBank/sftSelectBank.vue
Normal file
209
jeepay-ui-uapp-agent/components/sftSelectBank/sftSelectBank.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user