From 730ec16c7a80179f5a44c00fd3bbfe32c6c95e18 Mon Sep 17 00:00:00 2001
From: mac <1556608@qq.com>
Date: Sun, 28 Jan 2024 13:36:23 +0800
Subject: [PATCH] 1111

---
 common/request.api.js                |   4 +-
 components/zqs-select/right_icon.png | Bin 0 -> 673 bytes
 components/zqs-select/zqs-select.vue | 495 +++++++++++++++++++++++++++
 pages/me/base_info.vue               |  10 +-
 4 files changed, 506 insertions(+), 3 deletions(-)
 create mode 100644 components/zqs-select/right_icon.png
 create mode 100644 components/zqs-select/zqs-select.vue

diff --git a/common/request.api.js b/common/request.api.js
index 32d2ec5..f96568a 100644
--- a/common/request.api.js
+++ b/common/request.api.js
@@ -96,8 +96,10 @@ export default {
 	getRealInfo: (params = {}) => request.get("/lpkcustomer/getRealInfo/" + params, params, {}, {}, true),
 	// 保存实名
 	saveRealInfo: (params = {}) => request.post("/lpkcustomer/saveRealInfo", params),
+	// 查询推荐支行
+	searchTuiJianZhiHang: (params = {}) => request.get("/LpkCustomerBank/getBankList", params),
 	// 保存支行
-	saveTuiJianZhiHang: (params = {}) => request.post("/lpkcustomer/updateCustomerBank", params),
+	saveTuiJianZhiHang: (params = {}) => request.formpost("/lpkcustomer/updateCustomerBank", params),
 	// 我的 预约记录
 	myOrderListByUserSid: (params = {}) => request.post("/lpksreservoorders/orderListByUserSid", params, {}, {}),
 	// 我的 订单列表
diff --git a/components/zqs-select/right_icon.png b/components/zqs-select/right_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a5f4eb6c17f2dd6281615a492109f7e12da99dd
GIT binary patch
literal 673
zcmV;S0$%-zP)<h;3K|Lk000e1NJLTq001BW001Ni1^@s6=<7J*00001b5ch_0Itp)
z=>Px%TS-JgR9Hvt*RiY9KpY3~@1<!Sw2L~bgM)~ZLq(~L$>kNg=-~2DdH;Z@le#{m
zt8P#6FHpf%mqMFM46h&-aT0WJ5Jz<>4%Re3Ik`xOr@18ee2ZC1A>sSsce&s1!mz^^
z+u?j@0g@y+ETN9$d@v0z1dPYyu4P$~47Mz5&2`<UCJ}`IA;fh6_f+V2+qTa-jx#ca
zC<MfDd@#$h*8uj*P{!B{z>4R2uS_5c0Wu_tq7y_E0@$NMKR27rUa!}CR~MlLkReHu
z^wTtb4q%u3PedOXW2ZUipXwmA0Wu_x<JBz79s_8o<#?N>>6w1N|D`IT6hJM<WdIL|
zD1Y|ld_G?p3<lq-AW8!iVx5R?F9i<U?e@7&r}LvMq7pzY$3~WASMxx|*pn!V)`B3&
z${;EOf*`P5*L?)w!cyRU&iS=}0+1oo>9jeU&7J`m<e@}#%lG{|x`@gZ$ODGM;qF$e
zH3o1}?F<5N#q+#}I*8f;88RA;_Sv@mf{2c(&;=1)@_oN>ZWsZ`P$9$t#@Hqi9m?kh
zfK#0FH-D>yF@V~h7l}wVs{FdiInM{#mJVY8A;eMHv6qKdqtWO%j`M!oD<I2HM4ODU
z-{sdG+qElD=LP(=Yjn2CpYEx<1#1CJG@;4>Q*F31KnSq`p!OiD1PH@$oiS!)6qg1>
zQDpQmQVI};;VNUy=y6ONuw4gIEkKeaM;434l!)4@9~e85YXO81HvrsKv)<@Oi7w!{
z8Zz?!^PF>IpJiGAdDCPv*(-m$-R{>qt$V9yYs~@^nE!yEnS=>6VNr|w00000NkvXX
Hu0mjf&xJ9F

literal 0
HcmV?d00001

diff --git a/components/zqs-select/zqs-select.vue b/components/zqs-select/zqs-select.vue
new file mode 100644
index 0000000..35b31b3
--- /dev/null
+++ b/components/zqs-select/zqs-select.vue
@@ -0,0 +1,495 @@
+<template>
+	<view class="main">
+		<view class="input" @click="showModal">
+			<input v-model="_value" :style="disabled ? 'color:#c0c4cc' : ''" :placeholder="placeholder"
+				placeholder-style="color: #828282;" placeholder-class="zqs-select-placeholder-class" disabled />
+			<!--      <image
+        v-if="showArrow && !_value"
+        src="../../static/more.png"
+        class="selector-icon"
+      ></image> -->
+			<image src="../../static/more.png" class="selector-icon"></image>
+		</view>
+		<view class="select-modal" :class="isShowModal ? 'show' : ''" @tap="hideModal">
+			<view class="select-dialog" @tap.stop="" :style="{ backgroundColor: bgColor }">
+				<view class="title-main">
+					<text class="title-detail">{{ title }}</text>
+				</view>
+
+				<view v-if="showSearch" class="search-box">
+					<input class="search-input" confirm-type="search" v-model="searchInput" placeholder="输入内容进行模糊查询"
+						placeholder-style="color:rgba(102, 102, 102, 0.25);" />
+					<text v-if="showSearchBtn" class="search-text" @click="handleSearch">
+						搜索
+					</text>
+				</view>
+				<view class="select-content">
+					<view class="select-item" v-for="(item, index) in list" :key="index" :style="
+              valueIndexOf(item)
+                ? 'color:' +
+                  selectColor +
+                  ';background-color:' +
+                  selectBgColor +
+                  ';'
+                : 'color:' + color + ';'
+            " @click="select(item)">
+						<view class="title">{{ getLabelKeyValue(item) }}</view>
+						<text class="selectIcon icongou" v-if="valueIndexOf(item)"></text>
+					</view>
+				</view>
+				<view class="select-bar bg-white" v-if="multiple">
+					<button plain="true" class="mini-btn action" type="default" size="default" @tap="empty">
+						{{ emptyText }}
+					</button>
+					<button class="mini-btn action" type="primary" size="default" @tap="confirmClick">
+						{{ confirmText }}
+					</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'zqsSelect',
+		data() {
+			return {
+				isShowModal: false,
+				searchInput: '',
+				options: [],
+			}
+		},
+		props: {
+			showSearch: {
+				// 是否显示搜索框
+				type: Boolean,
+				default: true,
+			},
+			value: {
+				type: [Number, String, Array, Object],
+				default: null,
+			},
+			placeholder: {
+				// 占位符
+				default: '',
+				type: String,
+			},
+			multiple: {
+				// 是否多选
+				default: false,
+				type: Boolean,
+			},
+			list: {
+				default: () => [],
+				type: Array,
+			},
+			valueKey: {
+				// 指定list中valueKey的值作为下拉框绑定内容
+				default: 'value',
+				type: String,
+			},
+			labelKey: {
+				// 指定list中labelKey的值作为下拉框显示内容
+				default: 'label',
+				type: String,
+			},
+			disabled: {
+				default: false,
+				type: Boolean,
+			},
+			clearable: {
+				default: false,
+				type: Boolean,
+			},
+			emptyText: {
+				default: '重置',
+				type: String,
+			},
+			title: {
+				default: '选择内容',
+				type: String,
+			},
+			confirmText: {
+				default: '确定',
+				type: String,
+			},
+			color: {
+				default: '#000000',
+				type: String,
+			},
+			selectColor: {
+				default: '#0081ff',
+				type: String,
+			},
+			bgColor: {
+				default: '#ffffff',
+				type: String,
+			},
+			selectBgColor: {
+				default: '#FFFFFF',
+				type: String,
+			},
+			valueType: {
+				default: 'single',
+				type: String, // single || all
+			},
+			showSearchBtn: {
+				default: true,
+				type: Boolean, // single || all
+			},
+			showArrow: {
+				type: Boolean,
+				default: true,
+			},
+		},
+		emits: ['openDeepScroll', 'closeDeepScroll'],
+		computed: {
+			_value: {
+				get() {
+					return this.get_value(this.value)
+				},
+				set(val) {
+					this.$emit('input', val)
+				},
+			},
+		},
+		created() {},
+		methods: {
+			handleSearch() {
+				this.$emit('search', this.searchInput)
+			},
+			get_value(val) {
+				// 将数组值转换为以,隔开的字符串
+				if (val || val === 0) {
+					if (Array.isArray(val)) {
+						let chooseAttr = []
+						val.forEach((item) => {
+							let choose = this.list.find((temp) => {
+								let val_val = this.getValueKeyValue(temp)
+								return item === val_val
+							})
+							// 判断是否存在
+							if (choose) {
+								chooseAttr.push(choose)
+							}
+						})
+						let values = ''
+						if (chooseAttr.length > 0) {
+							values = chooseAttr
+								.map((temp) => this.getLabelKeyValue(temp))
+								.join(',')
+						}
+
+						return values
+					} else {
+						let choose = this.list.find((temp) => {
+							let val_val = this.getValueKeyValue(temp)
+							return val === val_val
+						})
+						if (choose) {
+							return this.getLabelKeyValue(choose)
+						} else {
+							return val
+						}
+					}
+				} else {
+					return ''
+				}
+			},
+			select(item) {
+				// 点击选项
+				let val = this.getValueKeyValue(item)
+				if (this.multiple) {
+					let _value = this.value
+					let index = _value ? _value.indexOf(val) : -1
+					if (index != -1) {
+						_value.splice(index, 1)
+						this.options.splice(index, 1)
+						this.$emit('input', _value)
+					} else {
+						_value.push(val)
+						this.options.push(item)
+						this.$emit('input', _value)
+					}
+					this.$emit('change', item)
+				} else {
+					let label = this.getLabelKeyValue(item)
+					if (this._value) {
+						if (label.indexOf(this._value) !== -1) {
+							this.$emit('input', '')
+						} else {
+							this.$emit('input', val)
+						}
+					} else {
+						this.$emit('input', val)
+					}
+
+					// 单选选中的当前项所有
+					this.$emit('change', item)
+					this.hideModal()
+				}
+			},
+			valueIndexOf(item) {
+				let val = this.getValueKeyValue(item)
+				if (Array.isArray(this.value)) {
+					return this.value.indexOf(val) != -1
+				} else {
+					return this.value === val
+				}
+			},
+			getLabelKeyValue(item) {
+				// 获取label
+				return item[this.labelKey]
+			},
+			getValueKeyValue(item) {
+				// 获取value
+				return item[this.valueKey]
+			},
+			empty() {
+				// 清空
+				if (this.multiple) {
+					this.$emit('change', [])
+					this.$emit('input', [])
+				} else {
+					this.$emit('change', '')
+					this.$emit('input', '')
+				}
+			},
+			// cancelClick() {
+			//   // 点击取消
+			//   this.$emit('cancel', this._value)
+			//   this.hideModal()
+			// },
+			confirmClick() {
+				// 点击确定
+				if (this.valueType === 'all') {
+					this.$emit('confirm', this.options)
+				} else {
+					this.$emit('confirm', this._value)
+				}
+				this.hideModal()
+			},
+			showModal() {
+				// 显示model
+				if (!this.disabled) {
+					this.isShowModal = true
+					// 打开禁止穿透滚动
+					this.$emit('openDeepScroll')
+				}
+			},
+			hideModal() {
+				// 隐藏model
+				this.isShowModal = false
+				// 关闭禁止穿透滚动
+				this.$emit('closeDeepScroll')
+			},
+		},
+		watch: {
+			searchInput(val) {
+				if (!this.$props.showSearchBtn) this.$emit('search', val)
+			},
+		},
+	}
+</script>
+<style>
+	@font-face {
+		font-family: 'selectIcon';
+		src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208');
+		/* IE9 */
+		src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208#iefix') format('embedded-opentype'),
+			/* IE6-IE8 */
+			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMEAAsAAAAABvQAAAK4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBRIFCATYCJAMMCwgABCAFhQUHNRsfBsg+QCa3uoO0oAJTMwhxVu965keqWBy1hkbwtfzWb2Z279/shRhJisKF6FApKLI7oyBbpAaHo3w24k+ca9EUJbDmjaeznUdZ/FOUlkWdJ33rizZY/Pw6J5Xw0qKYxHTMesePHVT6EFpaC4zV70sKi2bYgNPc1w0WHnDVC/e/UnNTgyP+4Jq6BBpIHoisgypLaIAFEtU0wgeaIG8Yu4nAIZwnUK1QgFfOT6nUUoBpgXjj2lqplTMpiuXtCW3N2iK+aPTS2/Qdnzny8d+5IEiaDMy99exklra//FrKnX48pChmgrq5QcYRQCEe17ruqgqLAKv8WntwqwhpLms/nB5yW/iHRxJEC0QOgT3NnfgF01NBKvOuIzNoZdh5gJuAeGrsozE8vOJ7u5D832oz55039W5G+S52K0H+zNf1TJz07k26kqoQybRfwVFV4rjDS/K8EXUyuF1cXnT3weKS9Rvdm/xe7h8oA1hLwOR18R+Y4n4zwpr4z5SU089Vc+cpfWL+mn5APmT3Z39jeOs/GbWjK+DnmsuL/u6ehMX4j4yedSVkAUUuPh3TY022MtKZUEOtPqCb8Bkvnr5XT6imU0gGrEJW7aAL/gw0OhegVV2F6pC7uTOppirKIA4MFQhTrpCM+AbZlDu64L/QmAkQWlMhQXU75D07O9Gtl0PUYjTBLyAzOLNQYtypIEEjvsXtBLQTooV2nrQrGEau2gKmZlR4L8gwnGtBJbUn1diCOOQUnEkTkRAOeci9KHOQxvFro+tx3ZcGAaeljstCSBNDJuArgIyBYyy6OdZxAhHIELu1IC9AtgShCVtLltEKrSff1XoHJo3RC33hM63o3j6pSNkmqmIWEAtxFHB2OwoRBAfyeqE3r2ogHeF42dBhs7gvf7CukH5MmlUGOCpHihxFfs6TehDyKCqVAA==') format('woff2'),
+			url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.woff?t=1590375117208') format('woff'),
+			url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.ttf?t=1590375117208') format('truetype'),
+			/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+			url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.svg?t=1590375117208#selectIcon') format('svg');
+		/* iOS 4.1- */
+	}
+
+	.title-main {
+		display: flex;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.title-detail {
+		display: flex;
+		width: 88%;
+		justify-content: center;
+		padding: 30rpx 0;
+		/*  border-bottom: 1rpx solid #e6e1e1; */
+	}
+
+	.selectIcon {
+		font-family: 'selectIcon' !important;
+		font-size: 16px;
+		font-style: normal;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	.icongou:before {
+		content: '\e61c';
+	}
+
+	.iconcross:before {
+		content: '\e61a';
+	}
+</style>
+<style lang="scss" scoped>
+	.main {
+		font-size: 28rpx;
+	}
+
+	.bg-white {
+		background-color: #ffffff;
+	}
+
+	.input {
+		display: flex;
+		align-items: center;
+		// font-size: 28rpx;
+		// height: 60rpx;
+		// padding: 10rpx 20rpx;
+		// border-radius: 10rpx;
+		// border-style: solid;
+		// border-width: 1rpx;
+		// border-color: rgba(0, 0, 0, 0.1);
+
+		input {
+			flex: 1;
+			text-align: right;
+			color: #828282;
+		}
+
+		.selector-icon {
+			width: 35rpx;
+			height: 35rpx;
+			vertical-align: middle;
+			margin-left: 10rpx;
+		}
+	}
+
+	.select-modal {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 9999;
+		opacity: 0;
+		outline: 0;
+		text-align: center;
+		-ms-transform: scale(1.185);
+		transform: scale(1.185);
+		backface-visibility: hidden;
+		perspective: 2000rpx;
+		background: rgba(0, 0, 0, 0.6);
+		transition: all 0.3s ease-in-out 0s;
+		pointer-events: none;
+		margin-bottom: -1000rpx;
+
+
+		&::before {
+			content: '\200B';
+			display: inline-block;
+			height: 100%;
+			vertical-align: bottom;
+		}
+
+		.select-dialog {
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			display: inline-block;
+			margin-left: auto;
+			margin-right: auto;
+			background-color: #f8f8f8;
+			overflow: hidden;
+			width: 100%;
+			border-radius: 0;
+			border-top-left-radius: 20rpx;
+			border-top-right-radius: 20rpx;
+
+			.select-content {
+				// background-color: #F1F1F1;
+				height: 60vh;
+				overflow: auto;
+
+				.select-item {
+					text-align: left;
+					padding: 20rpx 80rpx;
+					display: flex;
+
+					::after {
+						content: '';
+						width: 100%;
+						height: 1px;
+						display: block;
+						margin: 0 auto;
+						border-bottom: 2px solid #f5f2f2;
+						padding: 1px;
+					}
+
+					.title {
+						flex: 1;
+					}
+				}
+			}
+		}
+	}
+
+	.select-modal.show {
+		opacity: 1;
+		transition-duration: 0.3s;
+		-ms-transform: scale(1);
+		transform: scale(1);
+		overflow-x: hidden;
+		overflow-y: auto;
+		pointer-events: auto;
+		margin-bottom: 0;
+	}
+
+	.select-bar {
+		padding: 0 80rpx;
+		display: flex;
+		position: relative;
+		align-items: center;
+		min-height: 80rpx;
+		justify-content: space-between;
+		margin-bottom: 50rpx;
+
+		.action {
+			display: flex;
+			align-items: center;
+			height: 78rpx;
+			justify-content: center;
+			max-width: 100%;
+			padding: 0 100rpx;
+		}
+	}
+
+	.search-box {
+		display: flex;
+		margin: 10rpx 0;
+		align-items: center;
+		padding: 10rpx 40rpx;
+	}
+
+	.search-input {
+		flex: 1;
+		text-align: start;
+		padding-left: 20px;
+		// width: 560rpx;
+		height: 67rpx;
+		line-height: 67rpx;
+		border-radius: 40rpx;
+		background: #f5f2f2;
+
+	}
+
+	.search-text {
+		padding-left: 30rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/me/base_info.vue b/pages/me/base_info.vue
index a9ec8b7..2451fb0 100644
--- a/pages/me/base_info.vue
+++ b/pages/me/base_info.vue
@@ -184,8 +184,14 @@
 				})
 			},
 			searchEvent(val) {
-				console.log('查询事件参数', val)
-				// 此处把新的请求值 赋值给options
+				let _this = this
+				_this.$api.searchTuiJianZhiHang({
+					name: val
+				}).then((resp) => {
+					_this.options = resp
+				}).catch(e => {
+					console.log("===", e);
+				})
 			},
 		}
 	}