parent
07a6c4ff16
commit
106179eb6c
@ -0,0 +1,297 @@ |
||||
<template> |
||||
<view class="u-wrap"> |
||||
<view class="search-warp" v-if="showAction"> |
||||
<scroll-view scroll-y :style="{'height': scrollHeight+'px'}" class="item-container"> |
||||
<view class="thumb-box" v-for="(item, index) in searchList" :key="index" @click="selval(item)"> |
||||
<view :class="[value==item[valueName]? 'item-active' : '']"> |
||||
<text>{{item.pname}}-{{item[labelName]}}</text> |
||||
</view> |
||||
|
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
<view class="u-menu-wrap"> |
||||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"> |
||||
<view v-for="(item,index) in list" :key="index" class="u-tab-item" |
||||
:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index" |
||||
@tap.stop="swichMenu(index)"> |
||||
<text class="u-line-2">{{item[labelName]}}</text> |
||||
</view> |
||||
</scroll-view> |
||||
<block v-for="(item,index) in list" :key="index"> |
||||
<scroll-view scroll-y class="right-box" v-if="current==index"> |
||||
<view class="page-view"> |
||||
<view class="class-item"> |
||||
<view class="item-container"> |
||||
<view class="thumb-box" v-for="(item1, index1) in item.childLklMccList" :key="index1" |
||||
@click="selval(item1)"> |
||||
<view :class="[value==item1[valueName] ? 'item-active' : '']"> |
||||
<text>{{item1[labelName]}}</text> |
||||
</view> |
||||
<!-- <u-icon v-if="value==item1[valueName]" name="checkbox-mark" :color="iconColor" |
||||
size="28"> |
||||
</u-icon> --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</block> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'macclist', |
||||
props: { |
||||
//label展示字段 |
||||
labelName: { |
||||
type: String, |
||||
default: 'name' |
||||
}, |
||||
//value选中字段 |
||||
valueName: { |
||||
type: String, |
||||
default: 'id' |
||||
}, |
||||
//初始选中值 |
||||
selectValue: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
//选择数据 |
||||
listData: { |
||||
type: Array, |
||||
default: () => { |
||||
return []; |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
list: JSON.parse(JSON.stringify(this.listData)), |
||||
scrollTop: 0, //tab标题的滚动条位置 |
||||
current: 0, // 预设当前项的值 |
||||
menuHeight: 0, // 左边菜单的高度 |
||||
menuItemHeight: 0, // 左边菜单item的高度 |
||||
value: this.selectValue, |
||||
keyword: '', |
||||
iconColor: 'primary', |
||||
showAction: false, |
||||
searchList: [], |
||||
scrollHeight: 500 |
||||
} |
||||
}, |
||||
watch: { |
||||
listData: { |
||||
handler(newName, oldName) { |
||||
this.list = JSON.parse(JSON.stringify(newName)) |
||||
}, |
||||
deep: true, |
||||
} |
||||
}, |
||||
created() { |
||||
var that = this; |
||||
uni.getSystemInfo({ |
||||
success: function(res) { |
||||
let windowHeight = res.windowHeight; |
||||
let windowWidth = res.windowWidth; |
||||
//#ifdef H5 |
||||
let headHeight = 110 / 750 * windowWidth; |
||||
//#endif |
||||
//#ifndef H5 |
||||
let headHeight = 200 / 750 * windowWidth; |
||||
//#endif |
||||
let scrollHeight = (windowHeight - headHeight); |
||||
that.scrollHeight = scrollHeight; |
||||
|
||||
} |
||||
}); |
||||
}, |
||||
methods: { |
||||
selval(item) { |
||||
this.value = item[this.valueName]; |
||||
this.keyword = ''; |
||||
this.showAction = false; |
||||
this.$emit('confirem', item); |
||||
}, |
||||
// 点击左边的栏目切换 |
||||
async swichMenu(index) { |
||||
if (index == this.current) return; |
||||
this.current = index; |
||||
// 如果为0，意味着尚未初始化 |
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) { |
||||
await this.getElRect('menu-scroll-view', 'menuHeight'); |
||||
await this.getElRect('u-tab-item', 'menuItemHeight'); |
||||
} |
||||
// 将菜单菜单活动item垂直居中 |
||||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2; |
||||
}, |
||||
// 获取一个目标元素的高度 |
||||
getElRect(elClass, dataVal) { |
||||
new Promise((resolve, reject) => { |
||||
const query = uni.createSelectorQuery().in(this); |
||||
query.select('.' + elClass).fields({ |
||||
size: true |
||||
}, res => { |
||||
// 如果节点尚未生成，res值为null，循环调用执行 |
||||
if (!res) { |
||||
setTimeout(() => { |
||||
this.getElRect(elClass); |
||||
}, 10); |
||||
return; |
||||
} |
||||
this[dataVal] = res.height; |
||||
}).exec(); |
||||
}) |
||||
}, |
||||
focus() { |
||||
this.showAction = true; |
||||
}, |
||||
cancle() { |
||||
this.showAction = false; |
||||
this.keyword = ''; |
||||
}, |
||||
toSearch() { |
||||
let arr = []; |
||||
this.list.map((item, index) => { |
||||
item.children.map((it, ix) => { |
||||
if (it[this.labelName].indexOf(this.keyword) >= 0) { |
||||
it['pname'] = item[this.labelName]; |
||||
arr.push(it); |
||||
} |
||||
}) |
||||
}) |
||||
this.searchList = arr; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.u-wrap { |
||||
height: 100%; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: relative; |
||||
overflow: hidden; |
||||
.head { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
height: 100rpx; |
||||
padding: 0 20rpx; |
||||
background-color: white; |
||||
} |
||||
} |
||||
|
||||
.u-search-box { |
||||
padding: 0rpx 30rpx; |
||||
background-color: white; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
height: 100rpx; |
||||
width: 100%; |
||||
} |
||||
|
||||
.search-warp { |
||||
display: flex; |
||||
overflow: hidden; |
||||
background-color: #FFFFFF; |
||||
position: absolute; |
||||
z-index: 10; |
||||
top: 200rpx; |
||||
left: 0; |
||||
width: 100%; |
||||
} |
||||
|
||||
.u-menu-wrap { |
||||
flex: 1; |
||||
display: flex; |
||||
overflow: hidden; |
||||
background-color: #F8F8F8; |
||||
} |
||||
|
||||
.u-tab-view { |
||||
width: 300rpx; |
||||
height: 100%; |
||||
} |
||||
|
||||
.u-tab-item { |
||||
height: 100rpx; |
||||
background: #f6f6f6; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 26rpx; |
||||
padding: 0 20rpx; |
||||
color: #444; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
.u-tab-item-active { |
||||
position: relative; |
||||
color: #333333; |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
background: #fff; |
||||
} |
||||
|
||||
.u-tab-item-active::before { |
||||
content: ""; |
||||
position: absolute; |
||||
border-left: 4px solid #ed6853; |
||||
height: 32rpx; |
||||
left: 0; |
||||
top: 39rpx; |
||||
} |
||||
|
||||
.u-tab-view { |
||||
height: 100%; |
||||
} |
||||
|
||||
.right-box { |
||||
background-color: white; |
||||
} |
||||
|
||||
.page-view { |
||||
background-color: white; |
||||
} |
||||
|
||||
.class-item { |
||||
background-color: #fff; |
||||
border-radius: 8rpx; |
||||
} |
||||
|
||||
.item-menu-name { |
||||
font-weight: normal; |
||||
font-size: 24rpx; |
||||
color: #007AFF; |
||||
} |
||||
|
||||
.item-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex: 1; |
||||
} |
||||
|
||||
.item-active { |
||||
color: #ed6853; |
||||
} |
||||
|
||||
.thumb-box { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
height: 100rpx; |
||||
width: 100%; |
||||
padding: 0 20rpx; |
||||
align-items: center; |
||||
font-size: 30rpx; |
||||
color: #999999; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,89 @@ |
||||
<template> |
||||
<view> |
||||
<!-- 搜索框 --> |
||||
<unisearchbar v-model="searchValue" class="mart20" @input="getBankList" placeholder="搜索内容" radius="100"> |
||||
</unisearchbar> |
||||
<!-- 商户名字 --> |
||||
<view v-if="taryBankList == ''" class="mart60 fotct font14 fcor666"> |
||||
<image mode="widthFix" style="width: 70vw;" src="../../../static/img/noorder.png"></image> |
||||
</view> |
||||
<view class="width100"> |
||||
<view class=" mcclist font15 fcor666" v-for="(item,index) in taryBankList" :key="index" |
||||
@click="changebank(item)"> |
||||
{{item.branchBankName}} |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
getBankList |
||||
} from '../../../Utils/Api.js'; |
||||
import unisearchbar from '../../../components/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'; |
||||
let app = getApp(); |
||||
export default { |
||||
components: { |
||||
unisearchbar |
||||
}, |
||||
data() { |
||||
return { |
||||
//列表数据 |
||||
taryBankList: [], |
||||
searchValue: '' |
||||
} |
||||
}, |
||||
onLoad() { |
||||
if (app.globalData.depositaryBank) { |
||||
this.searchValue = app.globalData.depositaryBank; |
||||
} |
||||
this.getBankList(); |
||||
}, |
||||
|
||||
methods: { |
||||
//查询mcc商户 |
||||
getBankList() { |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
let datas = { |
||||
regionId: app.globalData.bankareaCode, |
||||
bankName: this.searchValue |
||||
} |
||||
getBankList(datas).then(res => { |
||||
uni.hideLoading(); |
||||
if (res.return_code == '000000' && res.return_data) { |
||||
this.taryBankList = res.return_data; |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
//选择某个mcc 并返回 |
||||
changebank(item) { |
||||
app.globalData.depositaryBank = item.branchBankName; |
||||
app.globalData.branchBankNo = item.branchBankNo; |
||||
app.globalData.clearNo = item.clearNo; |
||||
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; |
||||
} |
||||
</style> |
||||
@ -1,2 +1,2 @@ |
||||
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>惠支付</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) |
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/cweb/static/index.63b34199.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/cweb/static/js/chunk-vendors.65d11cca.js></script><script src=/cweb/static/js/index.65ccf64d.js></script></body></html> |
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/cweb/static/index.63b34199.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/cweb/static/js/chunk-vendors.65d11cca.js></script><script src=/cweb/static/js/index.a731bc12.js></script></body></html> |
||||
Loading…
Reference in new issue