H5-Merchant/openmerchant/shopentry/process.vue

<template>
	<view class="process">
		<view class="process-header">
			<view class="process-header-text">
				<view class="process-header-text-neishi" @click="topgi">
					<view class="process-header-text-icon">
						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png" mode="widthFix">
						</image>
					</view>
				</view>
				<view class="process-header-text-title">
					店铺入驻
				</view>
			</view>
		</view>
		<view class="process-zhuti">
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					商家类型
				</view>
				<view class="process-zhuti-yi-input">
					<view class="business-type" @click="isShowType = true">
						<view v-if="!businessData">请选择商家类型</view>
						<view v-else class="business-type-value">{{businessData.text}}</view>
					</view>
					<view class="type-mask" v-if="isShowType" @click="isShowType = false"></view>
					<view class="business-type-list" v-if="isShowType">
						<view v-for="(item,index) in businessType"
							:class="[businessData.value == item.value ? 'business-type-item-active' : '', 'business-type-item' ]"
							@click="changeType(item)">
							<image v-if="businessData.value == item.value"
								src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822161754617.png" mode=""></image>
							<image v-else src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822155008662.png"
								mode=""></image>
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					商家名称
				</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写商家名称" v-model="merchantsIn.mer_name">
				</view>
			</view>
			<view class="process-zhuti-yi" v-if="enterpriseType">
				<view class="process-zhuti-yi-text">
					营业执照
				</view>
				<view class="process-zhuti-yi-upload" @click="businessLicense">
					<image v-if="merchantsIn.business_license" :src="merchantsIn.business_license" mode=""></image>
					<image v-else src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822142852637.png" mode="">
					</image>
				</view>
			</view>
			<view class="process-zhuti-yi" v-if="enterpriseType">
				<view class="process-zhuti-yi-text">
					社会信用代码
				</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写社会信用代码" v-model="merchantsIn.credit_code">
				</view>
			</view>
			<view class="process-zhuti-yi" v-if="enterpriseType">
				<view class="process-zhuti-yi-text">
					社会信用证有效期
				</view>
				<view class="process-zhuti-yi-input"  style="display: flex;">
					<!-- <uni-datetime-picker v-model="range" type="daterange" @change="changeLog">
						<input placeholder="请填写社会信用证有效期" v-model="range" disabled>
					</uni-datetime-picker> -->
					<uni-datetime-picker type="date" :clear-icon="false" v-model="merchantsIn.merc_start_time" @maskClick="maskClick">
						<input placeholder="有效期限开始" v-model="merchantsIn.merc_start_time" disabled>
					</uni-datetime-picker>
					<view class="" style="width: 120rpx;height: 100%;background-color: rgba(31, 124, 255, 0.1); display: flex;justify-content: center;align-items: center; color: #B6B6B6;">
							——
					</view>
					<uni-datetime-picker type="date" :clear-icon="false" v-model="merchantsIn.merc_end_time" @maskClick="maskClick" end="2099-12-31">
						
						<input placeholder="有效期限结束" v-model="merchantsIn.merc_end_time" disabled>
					</uni-datetime-picker>
				</view>
			</view>
			<view class="process-zhuti-yi" v-if="enterpriseType" @click="miiim">
				<view class="process-zhuti-yi-text">
					营业执照地址
				</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写营业执照地址" v-model="merchantsIn.business_addr">
				</view>
			</view>
			<view class="process-zhuti-yi" v-if="enterpriseType">
				<view class="process-zhuti-yi-text">
					结算类型
				</view>
				<view class="process-zhuti-yi-input">
					<uni-data-checkbox v-model="merchantsIn.acc_type" :localdata="sex"></uni-data-checkbox>
				</view>
			</view>
			<view class="process-zhuti-yi" v-if="enterpriseType">
				<view class="process-zhuti-yi-text">
					开户许可证
				</view>
				<view class="process-zhuti-yi-upload" @click="accountLicense">
					<image v-if="merchantsIn.open_account" :src="merchantsIn.open_account" mode=""></image>
					<image v-else src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822142837323.png" mode="">
					</image>
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text" v-if="enterpriseType">开户账号</view>
				<view class="process-zhuti-yi-text" v-else>银行卡号</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写银行卡号" v-model="merchantsIn.bank_account">
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					所属银行
				</view>
				<view class="process-zhuti-yi-input">
					<view class="back-combox">
						<view class="back-combox__input-box">
							<input class="back-combox__input" placeholder="请选择开户行" v-model="city.bank_name"
								@input="onInput" @focus="onFocus" cursor-spacing="350" />
						</view>
						<view class="back-combox__selector" v-if="showSelector">
							<view class="activite-code-mask" @click="showSelector = false"></view>
							<view class="back-popper__arrow"></view>
							<scroll-view scroll-y="true" class="back-combox__selector-scroll">
								<view class="back-combox__selector-empty" v-if="filterCandidatesLength === 0">
									<text>无匹配内容</text>
								</view>
								<view class="back-combox__selector-item" v-for="(item,index) in filterCandidates"
									:key="index" @click="onSelectorClick(item)">
									<text>{{item.bank_name}}</text>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					开户行所在地
				</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写开户行地址" v-model="merchantsIn.bank_location">
				</view>
			</view>
		</view>
		<view :class="[btnBir ? 'btn-bir' : '', 'process-zhuti-btn' ]" @click=" btnBir ? nextStep() : '' ">
			下一步
		</view>
	</view>
</template>

<script>
	import {
		uploadPicture,
		settlementBank,
		selectMerchaSettlen,
		selectMerchant
	} from '@/commit/api.js';
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				merchantsIn: {
					type: '', // 商家类型
					mer_name: '', // 商户名称
					business_license: '', // 营业执照url
					credit_code: '', // 社会信誉代码
					merc_start_time: '', // 营业执照开始时间yyyy-MM-dd
					merc_end_time: '', // 营业执照结束时间yyyy-MM-dd
					business_addr: '', // 营业执照地址
					acc_type: '10A', // 结算类型
					open_account: '', // 开户许可证
					bank_account: '', // 开户账号
					bank_deposit: '', // 开户行
					bank_name: '', //银行编码
					bank_location: '', // 开户行所在地
				},
				value: 0,
				range: [],
				sex: [{
					text: '对公',
					value: '10A'
				}, {
					text: '对私',
					value: '10B'
				}],
				businessData: '',
				isShowType: false,
				businessType: [{
						value: 1,
						text: "企业入驻"
					},
					{
						value: 3,
						text: "个人入驻"
					}
				],
				enterpriseType: true,
				candidates: [],
				city: {},
				showSelector: false,
				fxmerchantsInData: {},
				btnBir: false,
				merchantsPass: false,
				is: ''
			}
		},
		mounted() {

		},
		onLoad(opsition) {
			this.is = opsition.is
			if (opsition.mer_id > 0) {
				console.log("-----------" + opsition.mer_id)
				this.jiance(opsition.mer_id)
				
			} else {
				// 获取本地
				const fanxian = uni.getStorageSync('merchants_in');
				if (fanxian) {
					if (fanxian.type == 1) {
						this.changeType({
							value: 1,
							text: "企业入驻"
						})
						this.merchantsIn.acc_type = '10A';
					} else {
						this.changeType({
							value: 3,
							text: "个人入驻"
						})
						this.merchantsIn.acc_type = '10B';
					}
					this.range = [fanxian.merc_start_time, fanxian.merc_end_time];
					this.city = {
						bank_name: fanxian.bank_deposit,
						code: fanxian.bank_name
					};
					this.merchantsIn = fanxian;
				}
			}
			// // 新加 8.29
			// let selectMerchantInfo = uni.getStorageSync('selectmerchant')
			// let merchantsDatas = selectMerchantInfo.merchantIntention;
			// console.log(merchantsDatas)
			// if (merchantsDatas.type == 1) {
			// 	this.changeType({
			// 		value: 1,
			// 		text: "企业入驻"
			// 	})
			// } else {
			// 	this.changeType({
			// 		value: 3,
			// 		text: "个人入驻"
			// 	})
			// }
			// this.range = [merchantsDatas.merc_start_time, merchantsDatas.merc_end_time];
			// this.city = {
			// 	bank_name: merchantsDatas.bank_deposit,
			// 	code: merchantsDatas.bank_name
			// };
			// this.merchantsIn.mer_name = merchantsDatas.mer_name; // 商户名称
			// this.merchantsIn.business_license = merchantsDatas.business_license; // 营业执照url
			// this.merchantsIn.credit_code = merchantsDatas.credit_code; // 社会信誉代码
			// this.merchantsIn.merc_start_time = merchantsDatas.merc_start_time; // 营业执照开始时间
			// this.merchantsIn.merc_end_time = merchantsDatas.merc_end_time; // 营业执照结束时间
			// this.merchantsIn.business_addr = merchantsDatas.business_addr; // 营业执照地址
			// this.merchantsIn.acc_type = merchantsDatas.acc_type; // 结算类型
			// this.merchantsIn.open_account = merchantsDatas.open_account; // 开户许可证
			// this.merchantsIn.bank_account = merchantsDatas.bank_account; // 开户账号
			// this.merchantsIn.bank_deposit = merchantsDatas.bank_deposit; // 开户行
			// this.merchantsIn.bank_name = merchantsDatas.bank_name; // 银行编码
			// this.merchantsIn.bank_location = merchantsDatas.bank_location; // 开户行所在地
			// this.merchantsIn.type = merchantsDatas.type;
		},
		computed: {
			filterCandidates() {
				let map = new Map();
				for (let item of this.candidates) {
					map.set(item.id, item);
				}
				this.candidates = [...map.values()];
				return this.candidates
			},
			filterCandidatesLength() {
				return this.filterCandidates.length
			}
		},
		watch: {
			merchantsIn: {
				handler: function(val) {
					this.isShow(val)
				},
				deep: true
			}
		},
		methods: {
			maskClick(e){
				console.log('maskClick事件:', e);
			},
			jiance(e) {
				selectMerchaSettlen({
					mer_id: e
				}).then(res => {
					if (res.data.status == 200 && res.data.data.merchantIntention != "") {
						this.$store.commit('changeMerchants', res.data.data.merchantIntention);
						
						let merchantsDatas = res.data.data.merchantIntention;
						
						if (merchantsDatas.type == 1) {
							this.changeType({
								value: 1,
								text: "企业入驻"
							})
						} else {
							this.changeType({
								value: 3,
								text: "个人入驻"
							})
						}
						this.range = [merchantsDatas.merc_start_time, merchantsDatas.merc_end_time];
						this.city = {
							bank_name: merchantsDatas.bank_deposit,
							code: merchantsDatas.bank_name
						};
						// this.merchantsIn = merchantsDatas;

						this.merchantsIn.mer_name = merchantsDatas.mer_name; // 商户名称
						this.merchantsIn.business_license = merchantsDatas.business_license; // 营业执照url
						this.merchantsIn.credit_code = merchantsDatas.credit_code; // 社会信誉代码
						this.merchantsIn.merc_start_time = merchantsDatas.merc_start_time; // 营业执照开始时间
						this.merchantsIn.merc_end_time = merchantsDatas.merc_end_time; // 营业执照结束时间
						this.merchantsIn.business_addr = merchantsDatas.business_addr; // 营业执照地址
						this.merchantsIn.acc_type = merchantsDatas.acc_type; // 结算类型
						this.merchantsIn.open_account = merchantsDatas.open_account; // 开户许可证
						this.merchantsIn.bank_account = merchantsDatas.bank_account; // 开户账号
						this.merchantsIn.bank_deposit = merchantsDatas.bank_deposit; // 开户行
						this.merchantsIn.bank_name = merchantsDatas.bank_name; // 银行编码
						this.merchantsIn.bank_location = merchantsDatas.bank_location; // 开户行所在地

						this.merchantsPass = true;
					}
				}, fail => {
					console.log(fail)
				})
			},

			topgi() {
				if (this.is) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.showToast({
						title: "已开通请完善信息...",
						icon: "none"
					});
				}

			},
			isShow(list) {
				let temp = true
				if (list && this.merchantsIn.type == 1) {
					// for (let i in list) {
					// 	console.log(list[i])
					// 	if ((i[10] == "" || i.bank_deposit == null) ||  (i.bank_name == "" || i.bank_name == null)  ) {
					// 		break
					// 	}
					// 	if (list[i] == "" || list[i] == null) {
					// 		temp = false
					// 	}
					// }
					
					if ((list.acc_type == "" || list.acc_type == null) 
							|| (list.bank_account == "" || list.bank_account == null) 
							|| (list.bank_location == "" || list.bank_location == null) 
							|| (list.business_addr == "" || list.business_addr == null) 
							|| (list.business_license == "" || list.business_license == null) 
							|| (list.credit_code == "" || list.credit_code == null) 
							|| (list.mer_name == "" || list.mer_name == null) 
							|| (list.merc_end_time == "" || list.merc_end_time == null) 
							|| (list.merc_start_time == "" || list.merc_start_time == null)
							|| (list.open_account == "" || list.open_account == null)
							|| (list.type == "" || list.type == null)) {
						temp = false
						console.log("设置了 false")
					}
					
				} else if (list && this.merchantsIn.type == 3) {
					console.log("进来了")
					// if ((list.mer_name == "" || list.mer_name == null) || (list.bank_account == "" || list.bank_account ==
					// 		null) || (list.bank_deposit == "" || list.bank_deposit == null) || (list.bank_name == "" ||
					// 		list.bank_name == null) || (list.bank_location == "" || list.bank_location == null)) {
					// 	temp = false
					// 	console.log("设置了 false")
					// }
					
					if ((list.mer_name == "" || list.mer_name == null) || (list.bank_account == "" || list.bank_account ==
							null) || (list.bank_location == "" || list.bank_location == null)) {
						temp = false
						console.log("设置了 false")
					}
					
				}
				this.btnBir = temp
			},
			onFocus() {
				this.showSelector = true
			},
			onBlur() {
				this.showSelector = false
			},
			onSelectorClick(data) {
				this.showSelector = false;
				this.city = data;
				this.merchantsIn.bank_deposit = data.bank_name;
				this.merchantsIn.bank_name = data.code;
			},
			onInput(e) {
				let name = e.detail.value
				if (name) {
					settlementBank({
						bank_name: name
					}).then(res => {
						if (res.data.status == 200) {
							this.candidates = res.data.data;
						}
					}, fail => {
						console.log(fail)
					})
				}
			},
			// 商家类型
			changeType(data) {
				if (data.value != this.merchantsIn.type) {
					this.merchantsIn = this.$options.data().merchantsIn;

					this.range = [];
					this.city = {};
				}
				this.businessData = data;
				this.merchantsIn.type = data.value;
				this.isShowType = false;
				if (data.value == 3) {
					this.enterpriseType = false;
				} else {
					this.enterpriseType = true;
				}
			},
			miiim(){
				console.log(this.merchantsIn)
			},
			// 营业执照
			businessLicense() {
				console.log('点击了upload营业执照')
				let that = this;
				that.$time.uploadPictures(res => {
					console.log(res)
					that.merchantsIn.business_license = res;
				});
			},
			// 社会信用证有效期
			changeLog(e) {
				this.merchantsIn.merc_start_time = e[0];
				this.merchantsIn.merc_end_time = e[1];
			},
			// 开户许可证
			accountLicense() {
				let that = this;
				that.$time.uploadPictures(res => {
					that.merchantsIn.open_account = res;
				});
			},
			nextStep() {
				
				if (this.merchantsIn.bank_name == "" || this.merchantsIn.bank_name == null || this.merchantsIn.bank_deposit == "" || this.merchantsIn.bank_deposit == null) return uni.showToast({
					title: "请选择所属银行",
					icon: "none"
				}); 
				
				if (this.merchantsIn.type == "") return uni.showToast({
					title: "请选择商家类型",
					icon: "none"
				});
				if (this.merchantsIn.type == 1) {
					if (this.merchantsIn.mer_name == "") return uni.showToast({
						title: "请填写商家名称",
						icon: "none"
					});
					if (this.merchantsIn.business_license == "") return uni.showToast({
						title: "请上传营业执照",
						icon: "none"
					});
					if (this.merchantsIn.credit_code == "") return uni.showToast({
						title: "请填写社会信用代码",
						icon: "none"
					});
					if (this.merchantsIn.merc_end_time == "" && this.merchantsIn.merc_start_time == "") return uni
						.showToast({
							title: "请选取社会信用证有效期",
							icon: "none"
						});
					if (this.merchantsIn.business_addr == "") return uni.showToast({
						title: "请填写营业执照地址",
						icon: "none"
					});
					if (this.merchantsIn.open_account == "") return uni.showToast({
						title: "请上传开户许可证",
						icon: "none"
					});
					if (this.merchantsIn.bank_account == "") return uni.showToast({
						title: "请填写开户账号",
						icon: "none"
					});
					if (this.merchantsIn.bank_deposit == "" && this.merchantsIn.bank_name == "") return uni.showToast({
						title: "请选择开户行",
						icon: "none"
					});
					if (this.merchantsIn.bank_location == "") return uni.showToast({
						title: "请填写开户行所在地",
						icon: "none"
					});
				} else if (this.merchantsIn.type == 3) {
					if (this.merchantsIn.mer_name == "") return uni.showToast({
						title: "请填写商家名称",
						icon: "none"
					});
					if (this.merchantsIn.bank_account == "") return uni.showToast({
						title: "请填写银行卡号",
						icon: "none"
					});
					if (this.merchantsIn.bank_deposit == "" && this.merchantsIn.bank_name == "") return uni.showToast({
						title: "请选择开户行",
						icon: "none"
					});
					if (this.merchantsIn.bank_location == "") return uni.showToast({
						title: "请填写开户行所在地",
						icon: "none"
					});
				}
				
				
				
				uni.setStorage({
					key: 'merchants_in',
					data: this.merchantsIn
				});

				// if(this.merchantsPass){
				// 	uni.navigateTo({
				// 		url: `./processstore?positionResult=${JSON.stringify(this.merchantsIn)}`
				// 	});
				// }else{
				uni.navigateTo({
					url: `./processstore`
				});
				// }

			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.process {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.process-header {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 111;
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: center;

			.process-header-text {
				width: 686rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				display: flex;
				// margin-top: 107rpx;
				align-items: center;

				.process-header-text-neishi {
					width: 45rpx;
					height: 45rpx;
					margin-right: 17rpx;

					.process-header-text-icon {
						width: 36rpx;
						height: 36rpx;
						margin-top: 2rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

			}
		}

		.process-zhuti {
			width: 100%;
			height: auto;
			margin-top: 102rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 0 40rpx;
			padding-bottom: 40rpx;
			background: #FFFFFF;

			.process-zhuti-yi {
				width: 686rpx;
				// height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				margin-top: 32rpx;

				.process-zhuti-yi-text {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 26rpx;
				}

				.process-zhuti-yi-input {
					width: 100%;
					height: 94rpx;
					// background: #1F7CFF;
					// 31 124 255 10
					border-radius: 8rpx;
					// opacity: 0.1;

					.business-type {
						height: 94rpx;
						background: rgba(31, 124, 255, 0.1);
						padding-left: 32rpx;
						color: #B6B6B6;
						border-radius: 8rpx;
						line-height: 94rpx;

						.business-type-value {
							color: #333333;
						}
					}

					.business-type-list {
						// display: none;
						background: #FFFFFF;
						position: absolute;
						z-index: 10;
						box-shadow: 0 3rpx 11rpx 0 rgba(0, 0, 0, 0.15);
						border-radius: 8px;

						.business-type-item {
							width: 686rpx;
							height: 94rpx;
							line-height: 94rpx;

							image {
								width: 28rpx;
								height: 28rpx;
								margin: 0 16rpx 0 32rpx;
								vertical-align: middle;
							}
						}

						.business-type-item-active {
							background: #1F7CFF;
						}

						.business-type-item:first-child {
							border-radius: 8rpx 8rpx 0 0;
						}

						.business-type-item:last-child {
							border-radius: 0 0 8rpx 8rpx;
						}
					}

					// /deep/.uni-select{
					// 	height: 94rpx;
					// 	background: rgba(31, 124, 255, 0.1);
					// 	border: none;
					// 	padding-left: 32rpx;
					// }
					input {
						width: 100%;
						height: 94rpx;
						background: rgba(31, 124, 255, 0.1);
						border-radius: 8rpx;
						box-sizing: border-box;
						padding-left: 32rpx;
					}

					/deep/.uni-data-checklist {
						padding-left: 32rpx;
						height: 94rpx;
						background: rgba(31, 124, 255, 0.1);
						border-radius: 8rpx;
					}

					/deep/.uni-data-checklist .checklist-group {
						height: 94rpx;
					}
				}

				.process-zhuti-yi-upload {
					width: 100%;
					height: 404rpx;
					background: rgba(31, 124, 255, 0.1);
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 500rpx;
						height: 340rpx;
					}
				}
			}
		}

		.activite-code-mask {
			width: 100%;
			height: 100%;
			background: transparent;
			position: fixed;
			top: 0;
			left: 0;
		}

		.process-zhuti-btn {
			width: 686rpx;
			height: 98rpx;
			background: rgba(31, 124, 255, 0.4);
			margin: 50rpx 0 94rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 98rpx;
			border-radius: 8rpx;
		}

		// 选择开户行
		.back-combox {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 94rpx;
			// background: rgba(31, 124, 255, 0.1);
			border-radius: 8rpx;
			box-sizing: border-box;
		}

		.back-combox__input-box {
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: row;
			align-items: center;
		}

		.back-combox__input {
			flex: 1;
			font-size: 30rpx;
			height: 94rpx;
			line-height: 94rpx;
		}

		.back-combox__selector {
			box-sizing: border-box;
			position: absolute;
			top: calc(100% + 24rpx);
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			border: 1px solid #EBEEF5;
			border-radius: 12rpx;
			box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
			z-index: 1000;
			padding: 8rpx 0;
		}

		.back-combox__selector-scroll {
			max-height: 400rpx;
			box-sizing: border-box;
		}

		.back-combox__selector-empty,
		.back-combox__selector-item {
			display: flex;
			cursor: pointer;
			line-height: 72rpx;
			font-size: 28rpx;
			text-align: center;
			padding: 0px 20rpx;
		}

		.back-combox__selector-item:hover {
			background-color: #f9f9f9;
		}

		.back-combox__selector-empty:last-child,
		.back-combox__selector-item:last-child {
			border-bottom: none;
		}

		// picker 弹出层通用的指示小三角
		.back-popper__arrow,
		.back-popper__arrow::after {
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
			border-width: 12rpx;
		}

		.back-popper__arrow {
			filter: drop-shadow(0 4rpx 24rpx rgba(0, 0, 0, 0.03));
			top: -12rpx;
			left: 10%;
			margin-right: 6rpx;
			border-top-width: 0;
			border-bottom-color: #EBEEF5;
		}

		.back-popper__arrow::after {
			content: " ";
			top: 2rpx;
			margin-left: -12rpx;
			border-top-width: 0;
			border-bottom-color: #fff;
		}

		.back-combox__no-border {
			border: none;
		}

		.type-mask {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
		}

		.btn-bir {
			background: #1F7CFF;
		}
	}
</style>