yizhizan-h5/pages/msg/interviewInvitation.vue

<template>
	<view class="container">
		<view class="detail-bg"></view>
		<nav-bar title="面试邀约"></nav-bar>
		<view class="content">
			<view class="detail-title">邀请面试</view>
			<view class="card-box">
				<view class="cell">
					<view class="cell-label">面试类型</view>
					<u-radio-group v-model="radioValue">
						<u-radio name="0">线下面试</u-radio>
						<u-radio name="1">线上面试</u-radio>
					</u-radio-group>

				</view>
				<view class="cell">
					<view class="cell-label">面试职位</view>
					<view class="cell-input" hover-class="cell-hover" @click="position = true">
						<view class="m-ellipsis">
							{{ selectedJob ? selectedJob.title + ' · ' + selectedJob.salary : '请选择职位' }}</view>
						<image class="cell-icon" src="/static/images/msg/down_arrow.svg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="cell" v-if="radioValue == 0">
					<view class="cell-label">面试地址</view>
					<view class="cell-input" hover-class="cell-hover" @click="goPage('address')">
						<view class="m-ellipsis">{{selectedAddress || '请选择地址'}}</view>
						<image class="cell-icon" src="/static/images/msg/down_arrow.svg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="cell" v-if="radioValue == 1">
					<view class="cell-label">面试方式</view>
					<view class="cell-input" hover-class="cell-hover" @click="method = true">
						<view class="m-ellipsis">请选择面试方式</view>
						<image class="cell-icon" src="/static/images/msg/down_arrow.svg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="cell">
					<view class="cell-label">联系人</view>
					<view class="cell-input" hover-class="cell-hover" @click="person = true">
						<view class="m-ellipsis">{{personText || '请选择联系人'}}</view>
						<image class="cell-icon" src="/static/images/msg/down_arrow.svg" mode="aspectFit"></image>
					</view>
				</view>
				<view class="explanation">为保证求职者联系到面试企业，求职者接受面试后，可查看职位发布人＆联系人的电话</view>
			</view>
			<view class="card-box" style="padding: 0;">
				<view class="note">
					<view class="note-label note-time">面试日期</view>
					<uni-calendar class="uni-calendar--hook" :showMonth="false" @change="change"
						@monthSwitch="monthSwitch" />
				</view>
			</view>
			<!-- 选择时间 -->
			<view class="card-box">
				<view class="cell" style="margin-bottom: 0;">
					<view class="cell-label">开始时间</view>
					<view class="cell-input flex-end" hover-class="cell-hover" @click="isShowTime = true">
						<view class="m-ellipsis">{{selectedTime || '请选择时间' }}</view>
						<image class="cell-icon" src="/static/images/msg/down_arrow.svg" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="card-box">
				<view class="note">
					<view class="note-label">备注事项</view>
					<view class="textarea-wrapper">
						<textarea v-model="textareaValue" placeholder-class="placeholder-text"
							placeholder="请输入告知求职者的其他内容，例如具体路线，所需材料等。" @input="updateLength" :maxlength="140">
						</textarea>
						<view class="word-count"><text style="color: #016BF6;">{{ textareaLength }}</text>/140</view>
					</view>
				</view>
			</view>
		</view>
		<u-button class="btn">发送面试邀请</u-button>
		<!-- 面试职位 -->
		<u-popup v-model="position" mode="bottom" border-radius="20">
			<view class="pop-content">
				<view class="pop-title">选择面试职位</view>
				<view class="pop-card">
					<view class="pop-card-item" v-for="(item, index) in jobList" :key="index" @click="chooseJob(item)">
						<u-radio-group v-model="popRadioValue">
							<u-radio :name="item.id"></u-radio>
						</u-radio-group>
						<view>{{ item.title }}</view>
						<view class="pop-tag">
							{{ item.city }}
							<u-line color="#999999" direction="col" length="20rpx" margin="10rpx"></u-line>
							{{ item.edu }}
							<u-line color="#999999" direction="col" length="20rpx" margin="10rpx"></u-line>
							{{ item.salary }}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 选择联系人 -->
		<u-popup v-model="person" mode="bottom" border-radius="20">
			<view class="pop-content">
				<view class="pop-title">
					<view>选择联系人</view>
					<view class="note">您可填写其他面试联系人电话，请保证已获得其授权同意，求职者接受面试后可以查看该号码</view>
				</view>
				<view class="pop-card">
					<view class="person-item" v-for="(item,index) in personList" :key="item.id"
						@click="selectPerson(item)">
						<view>{{item.name}}</view>
						<view class="pop-phone">{{item.phone}}</view>
						<image class="pop-icon" src="/static/images/msg/edit.svg" mode="aspectFit"
							@click="goPage('editPerson',item)"></image>
					</view>
				</view>
				<u-button class="pop-btn" @click="goPage('addPerson')">新增联系人</u-button>
			</view>
		</u-popup>
		<!-- 选择面试方式 -->
		<u-popup v-model="method" mode="bottom" border-radius="20">
			<view class="pop-content">
				<view class="pop-title">选择面试方式</view>
				<!-- <view class="pop-card">
					<view class="person-item" v-for="(item,index) in personList" :key="item.id" @click="selectPerson(item)">
						<view>{{item.name}}</view>
						<view class="pop-phone">{{item.phone}}</view>
						<image class="pop-icon" src="/static/images/msg/edit.svg" mode="aspectFit" @click="goPage('editPerson',item)"></image>
					</view>
				</view> -->
				<u-button class="pop-btn">确定</u-button>
			</view>
		</u-popup>
		<!-- 选择时间 -->
		<u-popup v-model="isShowTime" mode="bottom" border-radius="20">
			<view class="pop-content">
				<view class="pop-title">请选择面试开始时间</view>
				<picker-view :value="timeValue" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in hours" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in minutes" :key="index">{{ item }}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in meridiem" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
				<u-button class="pop-time-btn" @click="changeBtn">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navBar from "@/components/nav-bar/index.vue";
	export default {
		data() {
			return {
				radioValue: 0, //类型
				position: false,
				textareaValue: '',
				textareaLength: 0,
				popRadioValue: '',
				jobList: [{
						id: 1,
						title: '亚马逊运营',
						city: '深圳',
						edu: '本科',
						salary: '24-36k·16薪'
					},
					{
						id: 2,
						title: '跨境电商专员',
						city: '广州',
						edu: '大专',
						salary: '15-25k·14薪'
					},
					{
						id: 3,
						title: '亚马逊运营',
						city: '深圳',
						edu: '本科',
						salary: '24-36k·16薪'
					},
					{
						id: 4,
						title: '跨境电商专员',
						city: '广州',
						edu: '大专',
						salary: '15-25k·14薪'
					},
					{
						id: 5,
						title: '亚马逊运营',
						city: '深圳',
						edu: '本科',
						salary: '24-36k·16薪'
					},
					{
						id: 6,
						title: '跨境电商专员',
						city: '广州',
						edu: '大专',
						salary: '15-25k·14薪'
					}
				],
				selectedJob: '',
				selectedAddress: '',
				person: false,
				personList: [{
					id: 0,
					name: '宋先生',
					phone: '18888888888'
				}],
				personText: '',
				method: false,
				selected: [],
				// 选择时间
				isShowTime: false,
				selectedTime:'',
				timeValue: [0, 0, 0],
				hours: Array.from({length: 12}, (_, i) => i + 1),
				minutes: Array.from({length: 60}, (_, i) => i),
				meridiem: ['AM', 'PM']
			};
		},
		components: {
			navBar
		},
		methods: {
			change(e) {
				console.log('change 返回:', e)
			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
			},
			updateLength(e) {
				this.textareaLength = e.target.value.length
			},
			chooseJob(item) {
				this.selectedJob = item;
				this.popRadioValue = item.id;
				this.position = false;
			},
			// 选择地址  联系人  以及编辑联系人
			goPage(type, item) {
				uni.navigateTo({
					url: `/pages/msg/selectInterview?type=${type}`,
					success: (res) => {
						res.eventChannel.emit('sendData', {
							type,
							item,
							callback: (data) => {
								console.log(data)
								if (type === 'address') {
									this.selectedAddress = data.address + data.floor
								} else if (type === 'addPerson') {
									this.personList.push(data)
								} else if (type === 'editPerson') {
									const index = this.personList.findIndex(p => p.id === data.id)
									if (index !== -1) this.personList.splice(index, 1, data);
									this.personText = data.name;
								}
							}
						})
					}
				})
			},
			selectPerson(item) {
				this.personText = item.name;
				this.person = false;
			},
			bindChange(e) {
				this.timeValue = e.detail.value
			},
			changeBtn(){
				const val = this.timeValue
				const hour = this.hours[val[0]]
				const minute = this.minutes[val[1]]
				const ampm = this.meridiem[val[2]]
				this.selectedTime = `${hour}:${minute < 10 ? '0' + minute : minute} ${ampm}`
				this.isShowTime = false;
			}
		}
	};
</script>

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

		.detail-bg {
			height: 327px;
			width: 100%;
			background: linear-gradient(180deg, rgba(255, 102, 0, 1), rgba(255, 102, 0, 0) 100%);
			position: absolute;
		}

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

			.detail-title {
				color: #fff;
				font-size: 50rpx;
				font-weight: 500;
				font-family: DM Sans;
			}

			.card-box {
				margin: 20rpx 0;
				padding: 36rpx;
				box-sizing: border-box;
				border: 1rpx solid rgba(227, 231, 236, 1);
				border-radius: 12rpx;
				background: rgba(253, 253, 253, 1);

				.cell {
					height: 56rpx;
					margin-bottom: 12rpx;
					display: flex;
					align-items: center;

					.cell-label {
						width: 120rpx;
						margin-right: 24rpx;
						color: rgba(153, 153, 153, 1);
						font-family: DM Sans;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 32rpx;
						letter-spacing: 0%;
					}

					::v-deep .u-radio__icon-wrap {
						width: 32rpx !important;
						height: 32rpx !important;
					}

					::v-deep .u-radio__label {
						color: rgba(23, 23, 37, 1);
						font-family: DM Sans;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 48rpx;
						letter-spacing: 0.5%;
						margin-left: 8rpx !important;
						margin-right: 74rpx !important;
					}

					.cell-input {
						overflow: hidden;
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex: 1;
						height: 56rpx;
						line-height: 56rpx;
						box-sizing: border-box;
						border: 1px solid rgba(0, 0, 0, 0.05);
						border-radius: 12rpx;
						padding: 0 20rpx;
						color: rgba(51, 51, 51, 1);
						font-family: DM Sans;
						font-size: 20rpx;
						font-weight: 400;
						letter-spacing: 0px;

						.cell-icon {
							width: 20rpx;
							height: 14rpx;
							flex-shrink: 0;
							margin-left: 10rpx;
						}
					}

					.flex-end {
						justify-content: flex-end;
					}

					.cell-hover {
						background-color: rgba(0, 0, 0, 0.02);
						transition: background-color 0.1s ease;
					}
				}

				.explanation {
					color: rgba(158, 158, 158, 1);
					font-family: DM Sans;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 26rpx;
					letter-spacing: 0%;
				}

				.note {
					.note-label {
						color: rgba(29, 33, 41, 1);
						font-family: DM Sans;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 32rpx;
						letter-spacing: 0%;
						margin-bottom: 22rpx;
					}

					.note-time {
						padding: 36rpx 36rpx 0;
						margin-bottom: 0;
					}

					.uni-calendar--hook {
						width: 100%;

						::v-deep .uni-calendar__content {
							background-color: initial;
						}

						::v-deep .uni-calendar-item__weeks-box-item {
							width: initial !important;
						}
					}

					.textarea-wrapper {
						position: relative;

						.word-count {
							position: absolute;
							bottom: 20rpx;
							right: 20rpx;
							font-family: DM Sans;
							font-size: 22rpx;
							font-weight: 400;
							line-height: 26rpx;
							letter-spacing: 0.5%;
						}
					}

					::v-deep uni-textarea {
						width: 100% !important;
						height: 170rpx;
						padding: 28rpx;
						background: rgba(240, 240, 240, 1);
						border-radius: 12rpx;
						box-sizing: border-box;
						color: #000;
						font-family: DM Sans;
						font-size: 22rpx;
						font-weight: 400;
						line-height: 30rpx;
					}

					.placeholder-text {
						color: rgba(153, 153, 153, 1);
						font-family: DM Sans;
						font-size: 20rpx;
						font-weight: 400;
					}
				}
			}
		}

		.btn {
			height: 58rpx;
			padding: 16rpx 32rpx;
			border-radius: 999px;
			background: rgba(1, 107, 246, 1);
			color: rgba(255, 255, 255, 1);
			font-family: DM Sans;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 48rpx;
			letter-spacing: 0%;
			text-align: center;
			margin: 28rpx 40rpx;
		}

		// 弹框
		.pop-content {
			height: 333px;
			padding: 24rpx 34rpx 0;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background: rgba(253, 253, 253, 1);

			.pop-title {
				padding: 16rpx 0;
				border-bottom: 1px solid rgba(153, 153, 153, 0.25);
				color: rgba(34, 37, 42, 1);
				font-family: DM Sans;
				font-size: 36rpx;
				font-weight: 500;
				letter-spacing: 0px;
				text-align: center;

				.note {
					margin: 16rpx 30rpx 0;
					color: rgba(34, 37, 42, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 32rpx;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.picker-view {
				flex: 1;
				::v-deep uni-picker-view-column {
					text-align: center;
				}
			}

			.pop-card {
				flex: 1;
				overflow: auto;

				.pop-card-item {
					margin: 33rpx 0;
					box-sizing: border-box;
					height: 96rpx;
					padding: 24rpx 32rpx;
					box-sizing: border-box;
					border: 1px solid rgba(227, 231, 236, 1);
					border-radius: 48rpx;
					background: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					color: rgba(23, 23, 37, 1);
					font-family: DM Sans;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0.5%;

					.pop-tag {
						margin-left: 32rpx;
						display: flex;
						align-items: center;
						color: rgba(153, 153, 153, 1);
						font-family: DM Sans;
						font-size: 20rpx;
						font-weight: 400;
						letter-spacing: 0.5%;
					}
				}

				.person-item {
					box-sizing: border-box;
					border: 1px solid rgba(227, 231, 236, 1);
					border-radius: 48rpx;
					background: rgba(255, 255, 255, 1);
					height: 96rpx;
					padding: 24rpx 32rpx;
					margin: 24rpx 0;
					display: flex;
					align-items: center;
					color: rgba(1, 107, 246, 1);
					font-family: DM Sans;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 48rpx;
					letter-spacing: 0.5%;

					.pop-phone {
						margin: 0 32rpx;
						flex: 1;
						font-size: 20rpx;
					}

					.pop-icon {
						width: 24.57px;
						height: 24px;
					}
				}
			}

			.pop-btn {
				width: 100%;
				height: 80rpx;
				padding: 16rpx 32rpx;
				box-sizing: border-box;
				border: 1px solid rgba(255, 102, 0, 1);
				border-radius: 999px;
				background: rgba(255, 255, 255, 1);
				margin-bottom: 60rpx;
				color: rgba(1, 107, 246, 1);
				font-family: DM Sans;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 48rpx;
				letter-spacing: 0%;
			}
			.pop-time-btn{
				margin-bottom: 22rpx;
				width: 100%;
				height: 100rpx;
				border-radius: 16rpx;
				background: rgba(1, 107, 246, 1);
				color: rgba(255, 255, 255, 1);
				font-family: DM Sans;
				font-size: 34rpx;
				font-weight: 400;
				line-height: 44rpx;
				letter-spacing: -0.41px;
			}
		}
	}

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