yizhizan-h5/my/jilu/jilu.vue

<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<view class="sticky-tabs">
			<me-tabs v-model="tabIndex" nameKey='name' :tabs="tabs" @change="tabChange"></me-tabs>
		</view>

		<view>
			<view class="box" v-for="(item,index) in goods" :key="index">
				<view class="flex align-center justify-between padding-lr padding-tb-sm">
					<view style="color: #00B88F;font-size: 28rpx;font-weight: bold;">{{item.statusName}}</view>
					<view class="text-sm" style="color: #999999;">{{item.createTime}}</view>
				</view>
				<view style="width: 100%;height: 1rpx;background: #EEEEEE;"></view>
				<view class="padding-lr padding-tb-sm">
					<view class="flex align-center justify-between">
						<view class="text-bold" style="color: #1F1F1F;font-size: 38upx;">
							{{item.postPush?item.postPush.stationName:''}}
						</view>
						<view class="" style="color: #00B88F;font-size: 38upx;"><text
								class="text-lg text-bold">{{item.postPush?item.postPush.salaryRange:''}}</text></view>
					</view>
					<view class="flex" style="margin-top: 20rpx;">
						<view class="" style="width: 25%;">
							面试人：
						</view>
						<view class="" style="width: 75%;">
							{{item.userEntity?item.userEntity.userName:''}}
						</view>
					</view>
					<view class="flex" style="margin-top: 10rpx;">
						<view class="" style="width: 25%;">
							面试时间：
						</view>
						<view class="" style="width: 75%;">
							{{item.interviewDateTime}}
						</view>
					</view>
					<view class="flex" style="margin-top: 10rpx;">
						<view class="" style="width: 25%;">
							面试地点：
						</view>
						<view class="" style="width: 75%;">
							{{item.detailedAddress}}
						</view>
					</view>
					<view class="flex" style="margin-top: 10rpx;">
						<view class="" style="width: 25%;">
							面试备注：
						</view>
						<view class="" style="width: 75%;">
							{{item.remarks}}
						</view>
					</view>

				</view>
				<view style="width: 100%;height: 1rpx;background: #EEEEEE;">
				</view>
				<view class="flex align-center padding-tb justify-end padding-lr">
					<view class="flex align-center">
						<view class="btn" @click.stop="goInfo(item.userEntity)">
							简历详情</view>
					</view>
					<view class="flex align-center">
						<view class="btn" v-if="item.status == 1 || item.status==2" @click.stop="updataServeType(item)">
							修改内容</view>
					</view>

				</view>
			</view>
		</view>
		<empty v-if="goods.length==0" />


		<u-popup v-model="mianshiShow" mode="bottom" z-index="998" :mask-close-able="false" border-radius="14"
			@close="cleanMs" :closeable="true">
			<view class="mianshiTitle">面试邀请</view>
			<view class="mianshiTime flex justify-center">
				<view class="mianshiTime-box flex justify-between align-center">
					<view class="">
						面试时间
					</view>
					<view class="flex align-center mianshiTime-box-ti">
						<u-input disabled v-model="miamshi.interviewDateTime" @click="msTime=true" type="text"
							placeholder="请选择面试时间" />
						<u-icon name="arrow-right" style="margin-left: 10rpx;" color="#00B88F" size="28"
							@click="msTime=true"></u-icon>
					</view>
				</view>
			</view>
			<view class="mianshiTime flex justify-center">
				<view class="mianshiTime-box flex justify-between align-center">
					<view class="">
						面试地址
					</view>
					<view class="flex align-center mianshiTime-box-ti">
						<u-input disabled @click="goMap()" v-model="miamshi.detailedAddress" type="text"
							placeholder="请选择面试地址" />
						<u-icon name="arrow-right" style="margin-left: 10rpx;" @click="goMap()" color="#00B88F"
							size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="mianshiTime flex justify-center">
				<view class="mianshiTime-box" style="border: none;">
					<view class="">
						备注
					</view>
					<view class="flex align-center mianshiTime-box-ti">
						<u-input v-model="miamshi.remarks" type="textarea" input-align="left"
							style="padding: 10rpx;background-color: #F2F2F7;height: 200rpx;overflow: hidden;border-radius: 14rpx;width: 100%;"
							:auto-height="false" />
					</view>
				</view>
			</view>
			<view class="btnm flex justify-center">
				<view class="btn-box flex justify-around align-center">
					<view class="btn-close btnItem" @click="mianshiShow = false">
						取消
					</view>
					<view class="btn-sub btnItem" @click="submitMs()">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<u-picker v-model="msTime" mode="time" :params="params" @confirm="mianshiConfirm" confirm-color="#00B88F">
		</u-picker>
	</view>
</template>

<script>
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '@/components/empty.vue'

	export default {
		components: {
			meTabs,
			empty
		},
		data() {
			return {
				mianshiShow: false, //约面试弹窗
				msshow: false,
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				msTime: false,
				miamshi: {
					interviewDateTime: '', //面试时间
					companyId: '', //公司id
					remarks: '', //面试备注
					userId: '', //面试者id
					postPushId: '', //岗位id
					province: '', //省
					city: '', //市
					county: '', //区
					lng: '', //经度
					lat: '', //纬度
					detailedAddress: '', //详细地址
					recordId: '', //id
				},
				count: 0,
				goods: [], // 数据列表
				tabs: [{
					name: '全部',
					status: 0
				}, {
					name: '待接受',
					status: 1
				}, {
					name: '已接受',
					status: 2
				}, {
					name: '已拒绝',
					status: 3
				}, {
					name: '已过期',
					status: 4
				}],
				tabIndex: 0, // tab下标
				page: 1,
				limit: 10,
			}
		},
		onLoad(option) {
			this.$queue.showLoading("加载中...");
		},
		onShow() {
			this.getlist()
		},
		methods: {
			goInfo(item) {
				console.log(item, '1111111111111')
				if (item && item.resumesId) {
					uni.navigateTo({
						url: '/pages/index/game/orderDet?resumesId=' + item.resumesId
					})
				} else {
					uni.showToast({
						title: '用户不存在',
						icon: 'none'
					})
				}
			},
			updataServeType(item) {
				this.miamshi = {
					interviewDateTime: item.interviewDateTime, //面试时间
					companyId: item.companyId, //公司id
					remarks: item.remarks, //面试备注
					userId: item.userId, //面试者id
					postPushId: item.postPushId, //岗位id
					province: item.province, //省
					city: item.city, //市
					county: item.county, //区
					lng: item.lng, //经度
					lat: item.lat, //纬度
					detailedAddress: item.detailedAddress, //详细地址
					recordId: item.recordId, //id
				}
				this.mianshiShow = true
			},
			submitMs() {
				if (!this.miamshi.interviewDateTime) {
					this.$refs.uToast.show({
						title: '请选择面试时间',
						type: 'default',
						position: 'bottom'
					})
					return
				}
				if (!this.miamshi.detailedAddress) {
					this.$refs.uToast.show({
						title: '请选择面试地点',
						type: 'default',
						position: 'bottom'
					})
					return
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定修改面试邀请吗？',
					confirmColor: '#00B88F',
					complete(ret) {
						if (ret.confirm) {
							that.$Request.postJson("/app/interviewRecord/saveInterview", that.miamshi).then(
								res => {
									if (res.code == 0) {
										uni.showToast({
											title: '面试邀请已修改'
										})
										that.mianshiShow = false
										that.page = 1
										that.getlist()
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									}
								})
						}
					}
				})
			},
			// 点击调起地图选择位置
			goMap() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						let arrress = res.address
						let reg = /.+?(省|市|自治区|自治州|县|区)/g;
						let adds = arrress.match(reg)
						console.log(adds)
						that.miamshi.province = adds[0]
						that.miamshi.city = adds[1]
						that.miamshi.county = adds[2]
						that.miamshi.detailedAddress = res.address + '' + res.name
						that.miamshi.lat = res.latitude
						that.miamshi.lng = res.longitude
					}
				});
			},
			//选择面试时间
			mianshiConfirm(e) {
				//获取当前时间的年份
				let date = new Date()
				let year = date.getFullYear()
				this.miamshi.interviewDateTime = year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':00'
			},
			//关闭弹窗的时候清空表单的值
			cleanMs() {
				this.miamshi = {
					interviewDateTime: '', //面试时间
					companyId: '', //公司id
					remarks: '', //面试备注
					userId: '', //面试者id
					postPushId: '', //岗位id
					province: '', //省
					city: '', //市
					county: '', //区
					lng: '', //经度
					lat: '', //纬度
					detailedAddress: '', //详细地址
				}
			},
			getlist() {
				let data = {
					status: this.tabIndex == 0 ? '' : this.tabIndex,
					page: this.page,
					limit: this.limit,
					companyId: uni.getStorageSync('companyId')
				}
				this.$Request.getT('/app/interviewRecord/interviewList', data).then(res => {
					if (res.code == 0) {
						if (this.page == 1) this.goods = []; //如果是第一页需手动制空列表
						res.data.records.forEach(ret => {
							if (ret.status == 1) {
								ret.statusName = '待接受'
							} else if (ret.status == 2) {
								ret.statusName = '已接受'
							} else if (ret.status == 3) {
								ret.statusName = '已拒绝'
							} else if (ret.status == 4) {
								ret.statusName = '已过期'
							}
							this.goods.push(ret)
						})
						this.count = res.data.total
					}
					uni.hideLoading()
				})

			},
			// 切换菜单
			tabChange(e) {
				console.log(e)
				this.tabIndex = e
				this.goods = []; // 置空列表,显示加载进度条
				this.getlist()
			},
			goNav(url) {
				uni.navigateTo({
					url
				})
			}
		},
		onReachBottom: function() {
			if (this.goods.length == this.count) {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			} else {
				this.page = this.page + 1;
				this.getlist()
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist()
		}
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	.avatorm {
		width: 100%;
		// height: 100rpx;
		margin-top: 20rpx;
		color: #000;

		.avatorm-box {
			width: 90%;
			height: 100%;

			.avatorm-box-item {
				margin-bottom: 10rpx;

				.avatorm-box-item-t {
					width: 30%;
				}

				.avatorm-box-item-r {
					width: 70%;
				}
			}
		}
	}

	.mssTitle {
		width: 100%;
		margin-top: 30rpx;
		text-align: center;
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
	}

	.btnm {
		width: 100%;
		margin-top: 20rpx;
		height: 80rpx;
		margin-bottom: 100rpx;

		.btn-box {
			width: 686rpx;
			height: 100%;

			.btnItem {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				height: 100%;
				border-radius: 14rpx;
			}

			.btn-close {
				color: #00B88F;
				border: 1rpx solid #00B88F;
			}

			.btn-sub {
				color: #FFFFFF;
				background-color: #00B88F;
			}
		}
	}

	.mianshiTime {
		width: 100%;
		margin-top: 20rpx;

		.mianshiTime-box {
			padding-bottom: 20rpx;
			width: 686rpx;
			height: 100%;
			color: #000000;
			border-bottom: 1rpx solid #F2F2F7;

			.mianshiTime-box-ti {
				height: 100%;
				margin-top: 20rpx;
			}
		}
	}

	.mianshiTitle {
		width: 100%;
		margin-top: 30rpx;
		font-size: 30rpx;
		text-align: center;
		font-weight: bold;
		color: #000000;
	}

	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.box {
		background: #FFFFFF;
		border-radius: 24upx;
		margin: 30upx;
	}

	.argrtn {
		background: #F6F6F6;
		color: #666666;
		font-size: 24upx;
		border-radius: 8upx;
		padding: 5upx 20upx;
		margin-right: 20upx;
		margin-bottom: 20upx;
	}

	.btn {
		border: 1px solid #00B88F;
		border-radius: 30px;
		color: #00B88F;
		padding: 14upx 35upx;
		margin-left: 20upx;
	}
</style>