wanjiashangchao-shop/pages/dl/auth/indexmcc.vue

<template>
	<view class="remark bg-white">
		<!-- 自定义头部 start -->
		<view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar fixed"
				:style="{height: CustomBar + 'px', paddingTop: StatusBar + 'px', overflow: 'hidden', }">
				<view class="action position-relative" :style="{ zIndex: 1, marginLeft: '30rpx' }" @tap="back()"><text
						class="cuIcon-back"></text></view>
				<view class="content font-00"
					:style="[{ top: StatusBar + 'px', fontSize: '36rpx', fontWeight: 500 }, ]">
					选择银行
				</view>
				<view class="action position-relative" :style="{ zIndex: 1, marginLeft: '30rpx' }" >

				</view>
			</view>
		</view>

		<view class="newadress flex align-center">
			<view style="margin: 0 30upx 0 30upx !important" class="search-form radius-34 flex justify-between">
				<view class="flex align-center" style="padding: 0 24rpx;">
					<!-- <image class="" style="width: 28upx;height: 28upx;margin-left: 24upx;margin-right: 16upx;"
						src="/static/image/search.png" mode=""></image> -->
					<input type="search" confirm-type="search" v-model="keyword" @input="inputTap" value="" @confirm="handleSearch"
						placeholder="搜索银行名称" style="font-size: 28rpx;" />
				</view>
			</view>
		</view>


		<view class="">
			<view class="adresslist" v-for="(item1, index1) in keylist" :key="index1"
				@click="checksearch(item1)">
				<view class="name">
					{{item1.name}}
				</view>
			</view>

			<fu-empty-ui v-if="keylist.length==0"></fu-empty-ui>

		</view>
		<view class="hp">

		</view>


	</view>
</template>
<script>
	// 高德地图sdk

	export default {
		data() {
			return {
				keyword: '',
				keylist: [],
				settleCityCode:""
			};
		},
		onLoad(option) {
			console.log(option)
			this.settleCityCode = option.settleCityCode
			this.post667a7503c9762()
		},
		onUnload() {

		},
		methods: {
			post667a7503c9762(){
				this.$api.post(global.apiUrls.post671358ea7dda0, {
					name: this.keyword
				}).then(res => {
					this.keylist = res.data.data
				})
			},
			checksearch(item) {
				uni.$emit('MCCNAME', {
					code: item.code,
					name:item.name
				});
				uni.navigateBack({
					delta: 1
				})
			},
			inputTap(e){
				console.log(this.keyword)
				this.post667a7503c9762()
			},
			handleSearch() {
				console.log(this.keyword)
				this.post667a7503c9762()
			},

			back(delta) {
				uni.navigateBack({
					delta: delta || 1,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.adddizhi {
		width: 686upx;
		position: fixed;
		bottom: 32upx;
		left: 32upx;
		line-height: 88upx;
		font-size: 24upx;
		z-index: 999;
		text-align: center;
		color: #FFFFFF;
		border-radius: 32upx;
		background-color: $theme;
	}

	.hp {
		width: 750upx;
		height: 130upx;

	}

	.all {
		width: 750upx;
		padding: 0 32upx;
		position: relative;
		line-height: 100upx;

		&:after {
			@include bottom-line(#eee)
		}
	}

	.search-form {
		width: 686upx;
		border-radius: 32upx;
		background-color: #F6F7F9;
		line-height: 64rpx;
		height: 64rpx;
	}

	.newadress {
		margin-top: 32upx;
		width: 750upx;
		padding: 0 32upx;

		.name {
			width: 120upx;
		}

		image {
			width: 38upx;
			height: 38upx;

		}
	}

	.remark {
		min-height: 100vh;
		width: 100vw;
		overflow: hidden;

		.cu-custom {
			.cu-bar{
				background: #fff;
			}
			.content {
				font-weight: 500;
			}
			.save {
				font-size: 28rpx;
				font-weight: 500;
				z-index: 1;
			}
		}

		.adresslist {
			padding: 24rpx 32upx;
			width: 100%;
			// display: flex;
			align-items: center;
			line-height: 45upx;

			.xian {
				margin-right: 20upx;
				width: 6upx;
				height: 32upx;
				background: #3994D8;
				opacity: 1;
			}

			.title {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-left: 16upx;
			}
		}

		.aditem {
			margin: 0 32upx;
			margin-top: 32upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 45upx;
			color: #333333;
		}

		.bottom-status {
			height: 156rpx;
			height: calc(156rpx + constant(safe-area-inset-bottom));
			height: calc(156rpx + env(safe-area-inset-bottom));
		}

		.bottom-action {
			position: fixed;
			right: 32rpx;
			left: 32rpx;
			bottom: 56rpx;
			bottom: calc(56rpx + constant(safe-area-inset-bottom));
			bottom: calc(56rpx + env(safe-area-inset-bottom));
			display: flex;

			view {
				height: 88rpx;
				flex: 1;
				line-height: 88rpx;
				text-align: center;
				border-radius: 88rpx;
				color: #ffffff;
			}

			.btn1 {
				margin-right: 32rpx;
				background: linear-gradient(126deg, #39b54a 0%, #8dc63f 100%);
			}

			.btn2 {
				background: #3994D8;
				font-size: 32rpx;
				color: #fff;
			}
		}

		.active {
			color: #3994D8;
		}

		.bg-orange2 {
			background: #ff9d00;
			color: #fff;
			margin-right: 14rpx;
		}

		.address-icon {
			width: 30rpx;
			height: 30rpx;
		}



	}

	.margin-bottom-20 {
		border-bottom: 1px solid #EEEEEE;
		margin-bottom: 20rpx;
	}
</style>