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 disabled v-model="address" v-if="type=='address'" type="text" @click="selectAddress" :border="true"
					placeholder="请选择地址"/>
				<u-input v-else 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>
		<button class="btn" :disabled="!canSave" @click="goBack">保存</button>
	</view>
</template>


<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		components: {
			navBar
		},
		data() {
			return {
				title: '面试地址',
				id: '',
				address: '',
				latitude:0,
				longitude:0,
				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.hrName
					this.floor = data.item.hrPhone
				}
				if (data.type === 'address' && data.item) {
					this.latitude = data.item.latitude
					this.longitude = data.item.longitude
					this.address = data.item.address
					this.floor = data.item.detailedAddress
				}
			})
		},
		computed: {
			canSave() {
			  const address = (this.address || '').trim()
			  const floor = (this.floor || '').trim()
			
			  if (!address) {
			    return false
			  }
			  if (!floor) {
			    return false
			  }
			  return true
			}
		},
		methods: {
			handleInput(val) {
				this.floorLength = val.length;
			},
			goBack() {
				if (this.callback) {
					if (this.type === 'address') {
						this.callback({
							address: this.address,
							floor: this.floor,
							latitude:this.latitude,
							longitude:this.longitude
						})
					} else if (this.type === 'addPerson') {

						this.$Request.postJson('/app/interviewRecord/addHrPhone', {
							hrName: this.address, //会话对象的id
							hrPhone: this.floor, //当前登录者Id

							// type:2,
						}).then(ret => {
							if (ret.code == 0) {
								this.callback({
									id: Date.now(),
									hrName: this.address,
									hrPhone: this.floor
								})
							}
						})


					} else if (this.type === 'editPerson') {
						this.$Request.postJson('/app/interviewRecord/addHrPhone', {
							hrName: this.address,
							hrPhone: this.floor,

							// type:2,
						}).then(ret => {
							if (ret.code == 0) {
								this.callback({
									id: this.id,
									name: this.address,
									phone: this.floor
								})
							}
						})

					}
				}
				uni.navigateBack();
			},
			selectAddress: function() {
				var that = this;
				var latitude;
				var longitude;
				if (this.latitude != "") {
					latitude = this.latitude;
					longitude = this.longitude;
					that.chooseLocation(latitude, longitude);
				} else {
					if(this.$queue.getData('latitude')){
						latitude = this.$queue.getData('latitude');
						longitude = this.$queue.getData('longitude');
					}
					that.chooseLocation(latitude, longitude);
				}
			},
			chooseLocation(latitude, longitude) {
				var that = this;
				if (parseInt(latitude) <= 0) {
					latitude = "";
					longitude = "";
				}
				uni.chooseLocation({
					latitude: latitude,
					longitude: longitude,
					success: function(res) {
						console.log(res);
						if (res.latitude == undefined)
							return that.$common.toast("请选择一个地址");
						that.address = res.address + res.name;
						that.latitude = res.latitude;
						that.longitude = res.longitude;
					},
					fail: function(err) {
						console.log("选择位置失败：", err);
					},
				});
			},
		}
	};
</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: 80rpx;
			letter-spacing: 0%;
			box-sizing: border-box;
			justify-content: center;

			&:active {
				background: rgba(255, 102, 0, 0.8);
			}

			::v-deep uni-button:after {
				border: none !important;
			}
		}

		uni-button[disabled] {
			background: rgba(255, 102, 0, 0.5) !important;
		}
	}
</style>