mall_client/zyhs3_uniapp/pages/user/bankList.vue

1000 lines
19 KiB
Vue
Raw Permalink Normal View History

2026-03-13 07:50:35 +00:00
<template>
<view class="all">
<scroll-view class="scrollList" :scroll-with-animation="true" scroll-y="true" :scroll-into-view="scrollViewId">
<view class="letter">热门银行</view>
<view class="con">
<view class="list" v-for="item in bankHot" :key="item.value" @tap="selectBank(item)">
<image :src="'../../static/BankImg/'+item.value+'.jpg'" mode="aspectFill"></image>
<text>{{item.text}}</text>
</view>
</view>
<view v-for="item in BankList" :key="item.letter" :id="item.letter">
<view class="letter">{{item.letter}}</view>
<view class="con">
<view class="list" v-for="item in item.data" :key="item.value" @tap="selectBank(item)">
<image :src="'../../static/BankImg/'+item.value+'.jpg'" mode="aspectFill"></image>
<text>{{item.text}}</text>
</view>
</view>
</view>
</scroll-view>
<view class="uni-indexed-list-bar" :class="touchmove ? 'active' : ''" @tap.stop.prevent="letterSelect">
<text v-for="(list, key) in BankList" :key="key" class="uni-indexed-list-text"
:class="touchmoveIndex == key ? 'active' : ''">{{ list.letter }}</text>
</view>
<view class="uni-indexed-list-alert" v-if="touchmove">
{{ BankList[touchmoveIndex].letter }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
touchmove: false,
touchmoveIndex: -1,
itemHeight: 0,
scrollViewId: '',
bankHot: [ //热门银行
{
value: 'ICBC',
text: '中国工商银行'
},
{
value: 'CMB',
text: '招商银行'
},
{
value: 'ABC',
text: '中国农业银行'
},
{
value: 'CEB',
text: '中国光大银行'
},
{
value: 'CITIC',
text: '中信银行'
},
{
value: 'SPDB',
text: '浦发银行'
},
{
value: 'GDB',
text: '广发银行'
},
{
value: 'HXBANK',
text: '华夏银行'
},
{
value: 'CCB',
text: '中国建设银行'
},
{
value: 'COMM',
text: '交通银行'
},
{
value: 'BOC',
text: '中国银行'
},
{
value: 'CMBC',
text: '中国民生银行'
},
{
value: 'CIB',
text: '兴业银行'
},
{
value: 'SPABANK',
text: '平安银行'
},
],
BankList: [],
enterType: null
}
},
onLoad(e) {
this.enterType = e.enterType || null;
this.getBank();
},
onReady() {
uni.getSystemInfo({
success: res => {
let info = uni.createSelectorQuery().select('.uni-indexed-list-bar')
info
.boundingClientRect(data => {
let winHeight = data.height //元素在屏幕上的高度
this.itemHeight = winHeight / this.BankList.length
})
.exec()
},
})
},
methods: {
selectBank(data) {
console.log(`选择的银行:${JSON.stringify(data)}`);
if (this.enterType == 'shop') uni.setStorageSync('shopBank', data.text);
else uni.setStorageSync('chiliBank', data.text);
uni.navigateBack()
},
letterSelect(e) {
if (this.touchmove) return
this.touchmove = true
let pageY = e.target.offsetTop
let index = Math.round(pageY / this.itemHeight)
let item = this.BankList[index]
if (item) {
this.scrollViewId = item.letter
this.touchmoveIndex = index
}
console.log(this.scrollViewId)
setTimeout(() => {
this.touchmove = false
this.touchmoveIndex = -1
}, 500)
},
getBank() { //银行列表
let list = [{
letter: 'A',
data: [{
value: 'AYCB',
text: '安阳银行'
},
{
value: 'ARCU',
text: '安徽省农村信用社'
},
{
value: 'ASCB',
text: '鞍山银行'
},
],
},
{
letter: 'B',
data: [{
value: 'BSB',
text: '包商银行'
},
{
value: 'BJBANK',
text: '北京银行'
},
{
value: 'BJRCB',
text: '北京农商银行'
},
{
value: 'BOHAIB',
text: '渤海银行'
},
],
},
{
letter: 'C',
data: [{
value: 'CBBQS',
text: '城市商业银行资金清算中心'
},
{
value: 'CSCB',
text: '长沙银行'
},
{
value: 'BOCY',
text: '朝阳银行'
},
{
value: 'CDRCB',
text: '成都农商银行'
},
{
value: 'BOCD',
text: '承德银行'
},
{
value: 'CDCB',
text: '成都银行'
},
{
value: 'CZCCB',
text: '沧州银行'
},
{
value: 'CQBANK',
text: '重庆银行'
},
{
value: 'CRCBANK',
text: '重庆农村商业银行'
},
{
value: 'CCQTGB',
text: '重庆三峡银行'
},
{
value: 'CSRCB',
text: '常熟农村商业银行'
},
{
value: 'CZRCB',
text: '常州农村信用联社'
},
],
},
{
letter: 'D',
data: [{
value: 'DLB',
text: '大连银行'
},
{
value: 'DZBANK',
text: '德州银行'
},
{
value: 'DRCBCL',
text: '东莞农村商业银行'
},
{
value: 'HKBEA',
text: '东亚银行'
},
{
value: 'BOD',
text: '东莞银行'
},
{
value: 'DYCCB',
text: '东营市商业银行'
},
{
value: 'DYCB',
text: '德阳商业银行'
},
{
value: 'BODD',
text: '丹东银行'
},
]
},
{
letter: 'E',
data: [{
value: 'ORBANK',
text: '鄂尔多斯银行'
}]
},
{
letter: 'F',
data: [{
value: 'FJHXBC',
text: '福建海峡银行'
},
{
value: 'FSCB',
text: '抚顺银行'
},
{
value: 'FXCB',
text: '阜新银行'
},
{
value: 'FDB',
text: '富滇银行'
},
]
},
{
letter: 'G',
data: [{
value: 'CDB',
text: '国家开发银行'
},
{
value: 'GDB',
text: '广发银行'
},
{
value: 'GYCB',
text: '贵阳市商业银行'
},
{
value: 'GDRCC',
text: '广东省农村信用社联合社'
},
{
value: 'GCB',
text: '广州银行'
},
{
value: 'GLBANK',
text: '桂林银行'
},
{
value: 'GZRCU',
text: '贵州省农村信用社'
},
{
value: 'GZB',
text: '赣州银行'
},
{
value: 'BGB',
text: '广西北部湾银行'
},
{
value: 'GRCB',
text: '广州农商银行'
},
{
value: 'GSRCU',
text: '甘肃省农村信用'
},
{
value: 'GXRCU',
text: '广西省农村信用'
},
{
value: 'NYNB',
text: '广东南粤银行'
},
]
},
{
letter: 'H',
data: [{
value: 'HXBANK',
text: '华夏银行'
},
{
value: 'EGBANK',
text: '恒丰银行'
},
{
value: 'HSBC',
text: '汇丰银行'
},
{
value: 'HSBL',
text: '恒生银行'
},
{
value: 'HZCB',
text: '杭州银行'
},
{
value: 'HRBCB',
text: '哈尔滨银行'
},
{
value: 'CITIBANK',
text: '花旗银行'
},
{
value: 'HLDBK',
text: '葫芦岛银行'
},
{
value: 'HNRCU',
text: '河南省农村信用'
},
{
value: 'HKB',
text: '汉口银行'
},
{
value: 'HZCCB',
text: '湖州市商业银行'
},
{
value: 'BHB',
text: '河北银行'
},
{
value: 'HRXJB',
text: '华融湘江银行'
},
{
value: 'HBRCU',
text: '河北省农村信用社'
},
{
value: 'HBHSBANK',
text: '湖北银行黄石分行'
},
{
value: 'HBYCBANK',
text: '湖北银行宜昌分行'
},
{
value: 'HDBANK',
text: '邯郸银行'
},
{
value: 'HSBK',
text: '衡水银行'
},
{
value: 'HBC',
text: '湖北银行'
},
{
value: 'HURCB',
text: '湖北省农村信用社'
},
{
value: 'HNRCC',
text: '湖南省农村信用社'
},
]
},
{
letter: 'J',
data: [{
value: 'COMM',
text: '交通银行'
},
{
value: 'JSBANK',
text: '江苏银行'
},
{
value: 'JXBANK',
text: '嘉兴银行'
},
{
value: 'JINCHB',
text: '晋城银行'
},
{
value: 'JSRCU',
text: '江苏省农村信用联合社'
},
{
value: 'JZBANK',
text: '晋中市商业银行'
},
{
value: 'JLBANK',
text: '吉林银行'
},
{
value: 'JSB',
text: '晋商银行'
},
{
value: 'JLRCU',
text: '吉林农信'
},
{
value: 'TCRCB',
text: '江苏太仓农村商业银行'
},
{
value: 'JRCB',
text: '江苏江阴农村商业银行'
},
{
value: 'BOJZ',
text: '锦州银行'
},
{
value: 'JJBANK',
text: '九江银行'
},
{
value: 'JXRCU',
text: '江西省农村信用'
},
{
value: 'JNBANK',
text: '济宁银行'
},
{
value: 'JHBANK',
text: '金华银行'
},
]
},
{
letter: 'K',
data: [{
value: 'KLB',
text: '昆仑银行'
},
{
value: 'KORLABANK',
text: '库尔勒市商业银行'
},
{
value: 'KSRB',
text: '昆山农村商业银行'
},
{
value: 'CBKF',
text: '开封市商业银行'
},
]
},
{
letter: 'L',
data: [{
value: 'DAQINGB',
text: '龙江银行'
},
{
value: 'LYCB',
text: '辽阳市商业银行'
},
{
value: 'LANGFB',
text: '廊坊银行'
},
{
value: 'LSBANK',
text: '莱商银行'
},
{
value: 'LSCCB',
text: '乐山市商业银行'
},
{
value: 'LSBC',
text: '临商银行'
},
{
value: 'LZYH',
text: '兰州银行'
},
{
value: 'LYBANK',
text: '洛阳银行'
},
]
},
{
letter: 'N',
data: [{
value: 'NBBANK',
text: '宁波银行'
},
{
value: 'NJCB',
text: '南京银行'
},
{
value: 'NCB',
text: '南昌银行'
},
{
value: 'NHB',
text: '南海农村信用联社'
},
{
value: 'NXBANK',
text: '宁夏银行'
},
{
value: 'NXRCU',
text: '宁夏黄河农村商业银行'
},
{
value: 'H3CB',
text: '内蒙古银行'
},
{
value: 'CGNB',
text: '南充市商业银行'
},
{
value: 'NHQS',
text: '农信银清算中心'
},
]
},
{
letter: 'P',
data: [{
value: 'SPDB',
text: '浦发银行'
},
{
value: 'SPABANK',
text: '平安银行'
},
{
value: 'BOP',
text: '平顶山银行'
},
]
},
{
letter: 'Q',
data: [{
value: 'QDCCB',
text: '青岛银行'
},
{
value: 'ZBCB',
text: '齐商银行'
},
{
value: 'QLBANK',
text: '齐鲁银行'
},
{
value: 'BOQH',
text: '青海银行'
},
]
},
{
letter: 'S',
data: [{
value: 'SHRCB',
text: '上海农村商业银行'
},
{
value: 'SHBANK',
text: '上海银行'
},
{
value: 'SXCB',
text: '绍兴银行'
},
{
value: 'SDEB',
text: '顺德农商银行'
},
{
value: 'BOSZ',
text: '苏州银行'
},
{
value: 'SJBANK',
text: '盛京银行'
},
{
value: 'SRCB',
text: '深圳农村商业银行'
},
{
value: 'SCCB',
text: '三门峡银行'
},
{
value: 'SDRCU',
text: '山东农信'
},
{
value: 'SRBANK',
text: '上饶银行'
},
{
value: 'SCRCU',
text: '四川省农村信用'
},
{
value: 'SXRCCU',
text: '陕西信合'
},
{
value: 'SZSBK',
text: '石嘴山银行'
},
]
},
{
letter: 'T',
data: [{
value: 'TZCB',
text: '台州银行'
},
{
value: 'TCCB',
text: '天津银行'
},
{
value: 'TACCB',
text: '泰安市商业银行'
},
{
value: 'TRCB',
text: '天津农商银行'
},
]
},
{
letter: 'W',
data: [{
value: 'HSBANK',
text: '徽商银行'
},
{
value: 'WZCB',
text: '温州银行'
},
{
value: 'WJRCB',
text: '吴江农商银行'
},
{
value: 'BANKWF',
text: '潍坊银行'
},
{
value: 'URMQCCB',
text: '乌鲁木齐市商业银行'
},
{
value: 'WRCB',
text: '无锡农村商业银行'
},
{
value: 'WHRCB',
text: '武汉农村商业银行'
},
{
value: 'WHCCB',
text: '威海市商业银行'
},
]
},
{
letter: 'X',
data: [{
value: 'CIB',
text: '兴业银行'
},
{
value: 'XABANK',
text: '西安银行'
},
{
value: 'XXBANK',
text: '新乡银行'
},
{
value: 'XYBANK',
text: '信阳银行'
},
{
value: 'XCYH',
text: '许昌银行'
},
{
value: 'XTB',
text: '邢台银行'
},
]
},
{
letter: 'Y',
data: [{
value: 'YXCCB',
text: '玉溪市商业银行'
},
{
value: 'NBYZ',
text: '鄞州银行'
},
{
value: 'YNRCC',
text: '云南省农村信用社'
},
{
value: 'YQCCB',
text: '阳泉银行'
},
{
value: 'BOYK',
text: '营口银行'
},
{
value: 'YBCCB',
text: '宜宾市商业银行'
},
{
value: 'YDRCB',
text: '尧都农商行'
},
]
},
{
letter: 'Z',
data: [{
value: 'ICBC',
text: '中国工商银行'
},
{
value: 'ABC',
text: '中国农业银行'
},
{
value: 'BOC',
text: '中国银行'
},
{
value: 'CCB',
text: '中国建设银行'
},
{
value: 'PSBC',
text: '中国邮政储蓄银行'
},
{
value: 'CMB',
text: '招商银行'
},
{
value: 'CMBC',
text: '中国民生银行'
},
{
value: 'ZYCBANK',
text: '遵义市商业银行'
},
{
value: 'ZJTLCB',
text: '浙江泰隆商业银行'
},
{
value: 'SCNAMK',
text: '渣打银行'
},
{
value: 'MTBANK',
text: '浙江民泰商业银行'
},
{
value: 'CZCB',
text: '浙江稠州商业银行'
},
{
value: 'ZRCBANK',
text: '张家港农村商业银行'
},
{
value: 'ZGCCB',
text: '自贡市商业银行'
},
{
value: 'ZJNX',
text: '浙江省农村信用社联合社'
},
{
value: 'BZMD',
text: '驻马店银行'
},
{
value: 'XLBANK',
text: '中山小榄村镇银行'
},
{
value: 'ZZBANK',
text: '郑州银行'
},
{
value: 'ZYBANK',
text: '中原银行'
},
{
value: 'ZJKCCB',
text: '张家口市商业银行'
},
{
value: 'BOZK',
text: '周口银行'
},
{
value: 'CITIC',
text: '中信银行'
},
{
value: 'CEB',
text: '中国光大银行'
},
{
value: 'CZBANK',
text: '浙商银行'
},
]
},
];
this.BankList = list;
},
}
}
</script>
<style lang="scss" scoped>
.all {
height: 100%;
.scrollList {
background: #F6F9FC;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
.letter {
height: 64rpx;
display: flex;
align-items: center;
padding: 0 30rpx;
font-size: 24rpx;
color: #222222;
}
.con {
.list {
background-color: #fff;
display: flex;
align-items: center;
height: 122rpx;
padding: 0 30rpx;
border-bottom: 1px solid #F3F3F3;
image {
width: 48rpx;
height: 48rpx;
}
text {
color: #222222;
font-size: 30rpx;
margin-left: 30rpx;
}
}
}
}
.uni-indexed-list-bar {
display: flex;
flex-direction: column;
position: fixed;
width: 40rpx;
right: 14rpx;
z-index: 10;
bottom: 76rpx;
}
.uni-indexed-list-text {
color: #A3A2B1;
font-size: 22rpx;
text-align: center;
height: 36rpx;
}
.uni-indexed-list-text.active,
.uni-indexed-list-bar.active .uni-indexed-list-text.active {
color: #222222;
font-size: 26rpx;
}
.uni-indexed-list-alert {
position: absolute;
z-index: 20;
width: 160rpx;
height: 160rpx;
left: 50%;
top: 50%;
margin-left: -80rpx;
margin-top: -80rpx;
border-radius: 80rpx;
text-align: center;
line-height: 160rpx;
font-size: 70rpx;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
}
</style>