源文件

jeepay-ui-uapp-agent/components/sftSelectBank/sftSelectBankBranch.vue

@@ -0,0 +1,83 @@
+<template>
+	<view>
+		<uni-popup ref="backPopupRef" type="bottom" >
+			<view class="bank-body">
+				
+				<scroll-view class="bank-list" scroll-y="true">
+					<view class="item" v-for="(item, index) in props.bankList" @click="selectHandle(index)">{{ item[props.field] }}</view>
+				</scroll-view>
+
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script setup> 
+import { ref, reactive, watch } from 'vue'	
+
+const props = defineProps({
+	bankList: {type: Array, default: () => []},
+	field: { type: String, default: 'bank_branch_name' }, // 默认渲染的字段
+})
+
+const backPopupRef = ref()
+
+// 开启与关闭弹窗 供父组件调用
+const open = () => backPopupRef.value.open()
+const close = () => backPopupRef.value.close()
+
+const emit = defineEmits(['bankBranchInfo'])
+
+// 向父组件传递已选信息
+const selectHandle = index => {
+	emit('bankBranckInfo', props.bankList[index])
+	close()
+}
+
+defineExpose({ open, close })
+
+</script>
+
+<style scoped lang="scss"> 
+.bank-body {
+	width: 100%;
+	height: 70vh;
+	background-color: #fff;
+	border-top-right-radius: 20rpx;
+	border-top-left-radius: 20rpx;
+	padding: 20rpx 30rpx;
+	box-sizing: border-box;
+	position: relative;
+}
+.search {
+	width: calc(100% - 80rpx);
+	position: absolute;
+	top: 20rpx;
+	left: 30rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border: 1px solid #ddd;
+	border-radius: 10rpx;
+	padding: 5rpx 10rpx;
+	input {
+		flex-grow: 1;
+		margin-right: 20rpx;
+	}
+	.btn {
+		padding: 10rpx 30rpx;
+		text-align: center;
+		color:#fff;
+		background: #0041c4;
+	}
+}
+
+.bank-list {
+	padding-top: 80rpx;
+	overflow: scroll;
+	height: 90%;
+	.item {
+		padding: 10rpx 0;
+	}
+}
+</style>