yizhizan-h5/pages/msg/selectInterview.vue

<template>
	<view class="container">
		<nav-bar :title="title" color="#000"></nav-bar>
		<view class="content">
			<view class="cell-box">
				<view class="cell-title">{{type == 'address'?'面试地点':'姓名'}}</view>
				<u-input v-model="address" type="text" :border="true" :placeholder="type == 'address'?'请输入办公大楼名称，例：碧桂园凤凰智谷':'请输入联系人姓名'" />
			</view>

			<view class="cell-box">
				<view class="cell-title">{{type == 'address'?'楼层/单元室':'电话'}}</view>
				<div class="input-wrapper">
					<u-input v-model="floor" :type="type == 'address'?'text':'number'" :border="true" :placeholder="type == 'address'?'楼层/单元室/门牌号，例：3层302室':'请输入联系人电话'"
						@input="handleInput" :maxlength="20" />
					<view class="word-count" v-if="type == 'address'">{{ floorLength }}/20</view>
				</div>
			</view>
		</view>
		<u-button class="btn" :disabled="!canSave" @click="goBack">保存</u-button>
	</view>
</template>


<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		components: {
			navBar
		},
		data() {
			return {
				title: '面试地址',
				id:'',
				address: '',
				floor: '',
				floorLength: 0,
				callback: null,
				type: ''
			};
		},
		onLoad(options) {
			this.type = options.type
			if (this.type === 'address') {
				this.title = '面试地址'
			} else if (this.type === 'addPerson') {
				this.title = '添加联系人'
			} else if (this.type === 'editPerson') {
				this.title = '编辑联系人'
			}

			const eventChannel = this.getOpenerEventChannel();
			this.callback = null;
			eventChannel.on('sendData', (data) => {
				this.callback = data.callback;
				if (data.type === 'editPerson' && data.item) {
					this.id = data.item.id
					this.address = data.item.name
					this.floor = data.item.phone
				  }
			})
		},
		computed: {
			canSave() {
				return this.address.trim() !== '' && this.floor.trim() !== '';
			}
		},
		methods: {
			handleInput(val) {
				this.floorLength = val.length;
			},
			goBack() {
				if (this.callback) {
					if (this.type === 'address') {
						this.callback({ address: this.address, floor: this.floor })
					} else if (this.type === 'addPerson') {
						this.callback({ id: Date.now(), name: this.address, phone: this.floor })
					} else if (this.type === 'editPerson') {
						this.callback({ id: this.id, name: this.address, phone: this.floor })
					}
				}
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			z-index: 0;
			padding: 40rpx;

			.cell-box {
				margin-bottom: 32rpx;

				.cell-title {
					color: var(--Neutral/100, rgba(31, 44, 55, 1));
					font-family: DM Sans;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 44rpx;
					letter-spacing: 0.5%;
					margin-bottom: 16rpx;
				}

				.input-wrapper {
					position: relative;

					.word-count {
						position: absolute;
						top: 50%;
						right: 26rpx;
						transform: translateY(-50%);
						color: rgba(153, 153, 153, 1);
						font-family: DM Sans;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 48rpx;
						letter-spacing: 0.5%;
					}
				}

				::v-deep .uni-input-placeholder {
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 500;
					line-height: 48rpx;
					letter-spacing: 0.5%;
				}

				::v-deep .u-input {
					height: 70rpx;
					box-sizing: border-box;
					border: 1px solid rgba(227, 231, 236, 1);
					border-radius: 48rpx;
					background: rgba(255, 255, 255, 1);
					padding: 0 32rpx !important;
					box-sizing: border-box;
					text-align: left !important;
				}

				::v-deep .uni-input-input {
					font-family: DM Sans;
					font-size: 24rpx !important;
					font-weight: 500;
					line-height: 48rpx;
					letter-spacing: 0.5%;
					color: #000 !important;
				}
			}
		}

		.btn {
			display: flex;
			height: 80rpx;
			padding: 16rpx 32rpx;
			border-radius: 999px;
			background: rgba(255, 102, 0, 1);
			margin: 60rpx;
			color: rgba(255, 255, 255, 1);
			font-family: DM Sans;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 48rpx;
			letter-spacing: 0%;
			box-sizing: border-box;

			::v-deep .u-hairline-border:after {
				border: none !important;
			}
		}
	}
</style>