源文件

jeepay-ui-uapp-agent/pageApply/components/SelectBank.vue

@@ -0,0 +1,81 @@
+<template>
+  <uni-popup ref="popup" type="bottom">
+    <view class="list-wrapper">
+      <view class="search-input">
+        <input
+          focus
+          v-model="searchText"
+          placeholder="请输入银行名称"
+          @input="filerBank"
+        />
+      </view>
+      <view class="list-mian">
+        <view
+          class="list-item"
+          v-for="v in filerBank()"
+          :key="v[key]"
+          @tap="choice(v)"
+        >
+          {{ v[value] }}
+        </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  key: {
+    type: String,
+  },
+  value: {
+    type: String,
+  },
+  list: {
+    type: Array,
+  },
+});
+const emits = defineEmits(["choiceValue"]);
+const popup = ref();
+const open = () => {
+  popup.value.open();
+};
+const searchText = ref("");
+const filerBank = () => {
+  return props.list.filter((v) => v[props.value].includes(searchText.value));
+};
+const choice = (val) => {
+  emits("choiceValue", val);
+  popup.value.close();
+};
+defineExpose({ open });
+</script>
+
+<style lang="scss" scoped>
+.list-wrapper {
+  display: flex;
+  flex-direction: column;
+  border-radius: 16rpx 16rpx 0 0;
+  background-color: #fff;
+  max-height: 1000rpx;
+  padding: 30rpx;
+  .search-input {
+    input {
+      border-bottom: 1px solid #ccc;
+      text-indent: 1rem;
+      padding: 10rpx 0;
+    }
+  }
+  .list-mian {
+    flex: 1;
+    overflow-y: scroll;
+    margin-top: 20rpx;
+    .list-item {
+      margin: 10rpx 0;
+      padding: 10rpx;
+      font-size: 28rpx;
+    }
+  }
+}
+</style>