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">{{selecteMethodText || '请选择面试方式'}}</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" @click="rules = true">发送面试邀请</u-button>

		<!-- 面试职位 -->
		<u-popup v-model="position" mode="bottom" border-radius="40">
			<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="40">
			<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="40">
			<view class="pop-content">
				<view class="pop-title">选择面试方式</view>
				<view class="pop-method">
					<view 
						v-for="(item,i) in methodList" 
						:key="i" 
						class="method-item" 
						:class="methodActiveIndex == i?'active-item':''" @click="changeMethod(i,item)">{{ item }}
					</view>
					<view class="method-text">
						<textarea placeholder-class="pop-placeholder-text" placeholder="粘贴会议邀请信息">
						</textarea>
					</view>
				</view>
				<u-button class="btn btn-m" @click="method = false">确定</u-button>
			</view>
		</u-popup>
		<!-- 选择时间 -->
		<u-popup v-model="isShowTime" mode="bottom" border-radius="40">
			<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>
		<!-- 原则 -->
		<u-popup v-model="rules" mode="center" border-radius="40">
			<view class="pop-rules">
				<view class="pop-text">
					<view class="pop-rules-title">约面试诚信原则</view>
					<view v-if="isCancel">1.面试前3小时，双方可以申请取消<br />
						2.如不取消，请按时出席，不要爽约<br />
						3.对方爽约，可在平台内投诉<br />
						4.为了方便联系，约面试后上双方自动交换手机联系方式
					</view>
					<view v-else>请及时关注面试时间，以免忘记面试</view>
				</view>
				<view class="rules-btn" v-if="isCancel">
					<u-button class="cancel" @click="rules = false">思考片刻再决定</u-button>
					<u-button class="guarantee" @click="isCancel = false">保证不爽约</u-button>
				</view>
				<view v-else>
					<u-button class="confirm" @click="confirmRules">确认</u-button>
				</view>
			</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'],
				methodList:['腾讯会议','钉钉','微信视频','电话面试'],
				methodActiveIndex:0,
				selecteMethodText:'',
				rules:false,
				isCancel:true
			};
		},
		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;
			},
			changeMethod(i,val){
				this.methodActiveIndex = i
				this.selecteMethodText = val
			},
			confirmRules(){
				this.rules = false;
				setTimeout(() => {
					this.isCancel = true;
				}, 200);
			},
		}
	};
</script>

<style scoped lang="scss">
	@import "./css/interviewInvitation.scss";
</style>