<div class="banklist-page">
<div v-if="noData" id="header" class="search">
<div class="title">查询“<span style="color: #FD541C">中国工商银行</span>”，输入“<span style="color: #FD541C">工商</span>”即可获得结果</div>
<input
class="input"
type="text"
v-on:input="search"
placeholder="请输入提现银行名称"
/>
<div class="info">以下银行均可支持提现</div>
</div>
<!-- 银行列表页 -->
<div v-if="isShowList" id="list">
<ul class="list_user" ref="listuser">
<li v-for="(item, index) in bankData" :key="index">
<p>{{ item.index }}</p>
<ul>
<li
v-for="(user, index) in item.itemCardList"
:key="index"
@click="selItem(user.name)"
:class="sItem == user.name ? 'selItem' : ''"
>
{{ user.name }}
</li>
</ul>
</li>
</ul>
<ul class="list_index" v-if="isShowList" ref="listIndex">
<li
@touchstart="setScroll"
v-for="(item, index) in userIndex"
:key="index"
@touchend="handleShowWord"
>
{{ item }}
</li>
</ul>
<div v-if="innerHTML" class="show_word">{{ innerHTML }}</div>
</div>
<!-- 搜索列表页 -->
<div v-if="!isShowList" id="list">
<ul class="list_user">
<ul>
<li
v-for="(item, index) in searchNameList"
:key="index"
@click="selItem(item)"
:class="sItem == item ? 'selItem' : ''"
>
{{ item }}
</li>
</ul>
</ul>
</div>
<div v-if="!noData" class="blank-page">
<div class="warp-pic">
<div class="logo"></div>
<div class="pic-info"></div>
<div class="button" @click="refresh">重试</div>
</div>
</div>
<loading v-if="isShowLoading"></loading>
</div>
</template>
<script>
import Axios from "axios";
import API from "../../api/index";
import Loading from "../../components/Loading";
import { handleSelectBank } from "../../assets/js/common";
export default {
components: {
Loading,
},
mounted() {
this.getBankList();
},
computed: {
userIndex: function () {
return this.filterIndex(this.bankData);
},
},
data() {
return {
bMove: false,
innerHTML: "",
bankData: [], //挂载数据
bankNameList: [],
isShowList: true, //true展示银行卡列表，false展示搜索结果
searchNameList: [],
sItem: "", //选中的银行
isShowLoading: true,
noData: true, // 无数据
};
},
methods: {
getBankList() {
let _this = this;
Axios({
method: "get",
url: API.bankCardLsit,
})
.then(function (res) {
console.log(res.data, _this);
let data = res.data;
_this.bankNameList = data.bankNameList;
_this.bankData = data.bankData;
_this.isShowLoading = false;
_this.setlistIndexPos();
})
.catch((err) => {
_this.isShowLoading = false;
_this.noData = false;
console.log("bankCardLsit接口请求失败：", err);
});
},
search(e) {
if (e.data) {
this.bankNameList.map((item) => {
if (item.indexOf(e.data) != -1) {
// 按照关键词搜索
this.isShowList = false;
this.searchNameList.push(item);
}
});
} else {
this.isShowList = true;
this.searchNameList = [];
}
},
filterIndex: function (data) {
var result = [];
for (var i = 0; i < data.length; i++) {
if (data[i].index) {
result.push(data[i].index);
}
}
return result;
},
setlistIndexPos: function () {
var iH = this.$refs.listIndex.offsetHeight;
this.$refs.listIndex.style.marginTop = -iH / 2 + "px";
},
setScroll: function (ev) {
var ap = this.$refs.listuser.getElementsByTagName("p");
this.innerHTML = ev.target.innerText;
for (var i = 0; i < ap.length; i++) {
if (ap[i].innerHTML == ev.target.innerText) {
document.body.scrollTop = ap[i].offsetTop;
document.documentElement.scrollTop = ap[i].offsetTop;
window.scrollTop = ap[i].offsetTop;
console.log(ap[i].offsetTop);
}
}
},
handleShowWord() {
let timer = setInterval(() => {
this.innerHTML = "";
clearInterval(timer);
}, 1500);
},
selItem(item) {
if (item) {
this.isSelSty = true;
this.sItem = item;
handleSelectBank(null, {bankName:item});
}
},
refresh() {
handleSelectBank(null, {bankName: ''});
}
},
};
</script>
<style scoped>
.button {
width: 100%;
height: 48px;
background: #F9C700;
box-shadow: 0px 5px 8px 0px rgba(255,242,176,1);
border-radius: 25px;
text-align: center;
line-height: 48px;
font-size: 18px;
color: #333;
margin-top: 99px;
}
.warp-pic {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
padding: 0 10px;
}
.warp-pic .logo {
width: 255px;
height: 261px;
background: url('https://media.songguo7.com/qiche.png') no-repeat;
background-size: contain;
}
.pic-info {
width: 134px;
height: 32px;
background: url('https://media.songguo7.com/wenan.png') no-repeat;
background-size: contain;
margin-top: -20px;
}
.banklist-page {
width: 100%;
background: #fff;
}
#header {
width: 100%;
padding: 15px 11px;
background: #fff;
z-index: 9999;
color: #fff;
font-size: 13px;
font-weight: 500;
color: #03081A;
line-height: 16px;
}
.input {
padding-left: 26px;
width: calc(100% - 22px);
height: 42px;
border: 2px solid #F9C700;
border-radius: 25px;
overflow: hidden;
margin-top: 20px;
font-size: 17px;
}
.info {
margin-top: 27px;
font-size: 19px;
font-weight: 500;
color: #03081A;
line-height: 16px;
margin-bottom: 10px;
}
.title {
color: #000;
}
.blank-page {
width: 100%;
height: 100vh;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
.search {
position: fixed;
}
.selItem {
color: #fd9b1c!important;
}
.page-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#alert {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
top: 0;
z-index: 20px;
display: none;
}
#alert .alert_content {
width: 200px;
position: relative;
height: 150px;
background: #fff;
border-radius: 10px;
margin: auto;
}
.alert_body {
height: 50px;
line-height: 50px;
text-align: center;
}
.alert_btn {
position: absolute;
right: 0;
bottom: 0;
}
.list_index {
position: fixed;
z-index: 9999;
list-style: none;
font-size: 15px;
top: 50%;
right: 10px;
transform: translateY(-46%);
color: RGB(150, 152, 383);
text-align: center;
background: #F9C700;
border-radius: 16px;
text-align: center;
padding: 5px 0;
}
.list_index li {
padding: 3px 11px;
color: #000;
}
.alert_title {
padding-top: 20px;
}
#list {
width: 100%;
}
#list .list_user {
width: 100%;
}
#list .list_user p {
margin-left: 16px;
margin-right: 16px;
font-size: 17px;
font-weight: 500;
color: #F9C700;
line-height: 24px;
padding-bottom: 10px;
border-bottom: 1px solid #F2F2F2;
}
#list .list_user ul li {
font-size: 17px;
font-weight: 400;
color: #333333;
line-height: 24px;
margin: 10px 16px;
padding-bottom: 10px;
border-bottom: 1px solid #F2F2F2;
}
#list {
text-align: left;
float: left;
position: relative;
top: 163px;
overflow: hidden;
}
#list .show_word {
position: fixed;
left: 68%;
top: 50%;
transform: translateX(-50%);
transform: translateY(-50%);
width: 50px;
line-height: 50px;
background: #000;
color: #fff;
border-radius: 8px;
text-align: center;
font-size: 25px;
font-weight: 600;
}
.aler_tbn {
padding: 5px;
margin-bottom: 5px;
border-radius: 5px;
}
button {
background: #f60;
color: #fff;
}
</style>
