odd_job_applet/pages/outactivity/resumelist.vue

<template>
	<view>
		<view class="tips-title bg-gradual-orange text-center">{{time}}秒后可获得奖励</view>
		<view class="tips-box"></view>
		<view class="recruit-list">
			<view class="recruit-item" v-for="(item,index) in plist" @click="toDetail(item.id)" :key="index">
				<view class="title">
					<view class="title-name">{{item.title}}</view>
					<view class="salary">
						<image
							style="width:20px;height:20px;"
							:src="$getImageUrl('static/mobile/images/icon_salary.png')"
						></image>
						<text>{{item.salary}}</text>
					</view>
				</view>
				<view class="content">
					<view class="content-item">
						<image
							style="width:15px;height:15px;"
							:src="$getImageUrl('static/mobile/images/icon_age.png')"
						></image>
						<text>{{item.agegroup}}</text>
					</view>
					<view class="content-item">
						<image
							style="width:15px;height:15px;"
							:src="$getImageUrl('static/mobile/images/icon_num.png')"
						></image>
						<text>{{item.num}}</text>
					</view>
				</view>
				<view class="tags">
					<view class='cu-tag text-blue' v-for="(tag,tag_index) in item.tags" :key="tag_index">{{tag}}</view>
				</view>
				<view class="bottom">
					<view class="company-name">
						{{item.company_name}}
					</view>
					<view class="volume">
						<image
							style="width:15px;height:15px;"
							:src="$getImageUrl('static/mobile/images/icon_volume.png')"
						></image>
						<text>{{item.volume}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="pstatus"></uni-load-more>
		
		<view class="cu-modal bottom-modal" :class="modalName=='detail'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
				  <view class="action text-blue" @click="hideModal">关闭</view>
				  <view class="action text-green" @click="apply">报名</view>
				</view>
				<view>
					<view class="base-content">
						<view class="header">
							<view class="left">
								<view class="salary-box">
									<image
										style="width:15px;height:15px;"
										:src="$getImageUrl('static/mobile/images/icon_salary_white.png')"
									></image>
									<text class="text">工资：</text>
									<text class="salary">{{info.salary}}</text>
								</view>
								<view class="company-name">{{info.company_name}}</view>
							</view>
						</view>
						<view class="title">{{info.title}}</view>
						<view class="tags" v-if="info.tags.length > 0">
							<view class='cu-tag text-blue' v-for="(tag,tag_index) in info.tags" :key="tag_index">{{tag}}</view>
						</view>
						<view class="introduce">
							<view class="introduce-item">
								<image
									style="width:15px;height:15px;"
									:src="$getImageUrl('static/mobile/images/icon_num.png')"
								></image>
								<text>招聘人数:{{info.num}}</text>
								<text class="split">|</text>
								<van-image
										width="15px"
										src="__MIMAGES__/icon_age.png"
								></van-image>
								<text>年龄:{{info.agegroup}}</text>
							</view>
							<view class="introduce-item">
								<image
									style="width:15px;height:15px;"
									:src="$getImageUrl('static/mobile/images/icon_address.png')"
								></image>
								<text>{{info.province}}{{info.city}}{{info.district}}{{info.address}}</text>
							</view>
						</view>
					</view>
					
					<view class="describe" v-if="info.requirement">
						<view class="header">
							岗位要求
						</view>
						<view class="content">
							<pre>{{info.requirement}}</pre>
						</view>
					</view>
					
					<view class="describe" v-if="info.comdetails">
						<view class="header">
							企业简介
						</view>
						<view class="content">
							<pre>{{info.comdetails}}</pre>
						</view>
					</view>
					
					<view class="describe" v-if="info.remark">
						<view class="header">
							补充说明
						</view>
						<view class="content">
							<pre>{{info.remark}}</pre>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal bottom-modal" :class="modalName=='apply'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green" @tap="hideModal">关闭</view>
				</view>
				<view class="padding-lr bg-white">
					<form style="text-align: left;">
						<view class="cu-form-group">
							<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 姓名</view>
							<input type="text" placeholder="请输入" data-field="realname" name="realname" :value="form.realname" @input="setInput"></input>
						</view>
						<view class="cu-form-group">
							<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 手机号</view>
							<input type="text" placeholder="请输入" data-field="mobile" name="mobile" :value="form.mobile" @input="setInput"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">身份证号</view>
							<input type="text" placeholder="请输入" data-field="idcard" name="idcard" :value="form.idcard" @input="setInput"></input>
						</view>
						<view class="cu-form-group align-start">
							<view class="title">备注</view>
							<view class="textareabox">
								<textarea maxlength="-1" placeholder="请输入..." data-field="remark" name="remark" :value="form.remark" @input="setInput"></textarea>
							</view>
						</view>
						<view class="padding flex flex-direction bg-white">
							<button class="cu-btn bg-themeBtn margin-tb-sm lg" @tap="editForm">立即提交</button>
							<view class="padding"></view>
						</view>
					</form>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				code: '',
				userinfo: '',
				time: 30,
				
				plist: [],
				pstatus: false,
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				
				modalName: '',
				id: 0,
				info: {},
				
				isRotate: false,
				form: {
					realname: '',
					mobile: '',
					idcard: '',
					remark: '',
				},
			}
		},
		onLoad: function(option) {
			_this = this;
			let code = uni.getStorageSync('out_code');
			_this.code = code;
			if (!_this.code) {
				uni.showModal({
					title: '信息提示',
					content: '该活动已过期',
					showCancel: false,
					success: function() {
						uni.removeStorageSync('out_code');
						uni.redirectTo({
							url: '/pages/index/index'
						});
					}
				});
			}
			
			_this.userinfo = uni.getStorageSync('userinfo') || false;
			if (_this.userinfo == false) {
				uni.redirectTo({
					url: '/pages/login/login?backpage=/pages/outactivity/resumelist',
				});
			} else {
				//二维码校验
				_this.$req.ajax({
					path: "Outactivity/checkCode",
					data: {
						code: _this.code
					}
				}).then((data) => {
					_this.getMore();
					_this.dealTime();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false,
						success: function() {
							uni.removeStorageSync('out_code');
							uni.redirectTo({
								url: '/pages/index/index'
							});
						}
					});
				});
				
			}
		},
		onPullDownRefresh: function() {
			_this.pageRefresh();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		onShareAppMessage: function(res) {
			return {
				title: "晋江人力",
				path: "/pages/index/index"
			}
		},
		methods: {
			dealTime: function() {
				const set = setInterval(function(){
					if (_this.time > 0) {
						_this.time--;
					} else {
						clearInterval(set);
						_this.getMoney();
					}
				},1000);
			},
			getMore: function() {
				_this.$req.ajax({
					path: "outactivity/listrecruit",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			toDetail: function(id) {
				_this.id = id;
				_this.$req.ajax({
					path: "outactivity/detailrecruit",
					data: {
						id:id
					}
				}).then((data) => {
					_this.info = data;
					_this.modalName = 'detail';
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			hideModal: function() {
				_this.modalName = '';
			},
			apply: function() {
				_this.modalName = 'apply';
			},
			setInput: function(e) {
				var field = e.currentTarget.dataset.field;
				_this.form[field] = e.detail.value;
			},
			editForm: function() {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				let form = _this.form;
				form.recruit_id = _this.id;
				_this.$req.ajax({
					path: "outactivity/apply",
					title: "正在提交信息",
					data: _this.form
				}).then((data) => {
					_this.hideModal();
					_this.isRotate = false;
					uni.showModal({
						title: '信息提示',
						content: '提交成功，等待对方联系',
						showCancel: false
					});
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			getMoney: function() {
				uni.showModal({
					title: '信息提示',
					content: '是否获取奖励',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							_this.$req.ajax({
								path: "outactivity/getmoney",
								title: "正在提交信息",
								data: {
									code: _this.code,
									userid: _this.userinfo.id,
								},
							}).then((data) => {
								uni.showModal({
									title: '信息提示',
									content: `恭喜您，获得现金奖励${data.money}元。已直接发放至微信零钱，请注意查收！`,
									showCancel: false,
									success: function() {
										uni.removeStorageSync('out_code');
									}
								});
							}).catch((err) => {
								uni.showModal({
									title: '信息提示',
									content: err,
									showCancel: false,
									success: function() {
										uni.removeStorageSync('out_code');
									}
								});
							});
						}
					},
				});
			},
		},
	}
</script>

<style>
	.tips-title {height:40rpx;line-height:40rpx;position:fixed;top:0;left:0;width: 100%;}
	.tips-box {width: 100%;height:40rpx;}
	.recruit-list {background-color: #f0f0f0;}
	.recruit-list .recruit-item {background:white;margin-top:10px;padding:10px 20px;}
	.recruit-list .recruit-item .title{display:flex;padding-bottom:10px;border-bottom:1px solid #eee;}
	.recruit-list .recruit-item .title .title-name {width:calc(100% - 110px);}
	.recruit-list .recruit-item .title .salary {width:110px;text-align:center;color:var(--red);display: flex;align-items: center;justify-content: flex-end;}
	.recruit-list .recruit-item .title .salary span {margin-left:5px;}
	.recruit-list .recruit-item .content {display:flex;align-items:center;justify-content:center;padding-top:10px;}
	.recruit-list .recruit-item .content .content-item {text-align:left;flex:1;display:flex;align-items:center;justify-content:flex-start;height:30px;}
	.recruit-list .recruit-item .tags {padding:5px 0;}
	.recruit-list .recruit-item .tags .cu-tag{margin-right:5px;}
	.recruit-list .recruit-item .bottom {border-top:1px solid #eee;margin-top:10px;display:flex;padding-top:10px;font-size:14px;color:#666;}
	.recruit-list .recruit-item .bottom .company-name{width:calc(100% - 80px);}
	.recruit-list .recruit-item .bottom .volume{width:80px;display:flex;align-items:center;justify-content:flex-end;}
	
	.base-content {text-align: left;}
	.base-content .header {background-image:url("https://linggong.jinjianghc.com/static/mobile/images/detail_header.jpg");background-repeat:no-repeat;background-size:100% 70px;width:100%;height:70px;display:flex;align-items:center;justify-content:center;padding:0 20px;}
	.base-content .header .left {flex:1;display:flex;flex-direction:column;}
	.base-content .header .salary-box {line-height:24px;height:24px;flex:1;}
	.base-content .header .salary-box .salary {color:white;font-size:24px;font-weight:bold;}
	.base-content .header .salary-box .text {color:white;font-size:14px;margin-left:5px;}
	.base-content .header .company-name {color:white;font-size:14px;}
	.base-content .header .phone-box {display:flex;flex-direction:column;}
	.base-content .header .phone-box .text{color:white;}
	.base-content .title {background:white;padding:10px 20px;color:#000;font-size:18px;}
	.base-content .tags {background:white;padding:0 20px 10px 20px;}
	.base-content .tags .van-tag {margin-right:5px;}
	.base-content .introduce {background:white;}
	.base-content .introduce .introduce-item {border-top:1px solid #f0f0f0;padding:5px 20px;display:flex;align-items:center;}
	.base-content .introduce .introduce-item .van-image{margin-right:5px;}
	.base-content .introduce .introduce-item .split{margin:0 15px;}
	.describe {margin-top:10px;background:white;text-align: left;}
	.describe .header {padding:10px 20px;font-size:16px;border-bottom:1px solid #f0f0f0;}
	.describe .content {padding:10px 20px;}
	.describe .content view {font-size: 14px;line-height: 20px;padding: 0;margin: 0;font-family: "Microsoft Yahei",arial,"Hiragino Sans GB","Hiragino Sans GB W3",宋体,simsun;}
	.footer .van-button {width:50%;border-radius:0;}
	
	.cu-form-group{ display: flex; flex-wrap: wrap; padding: 40rpx 10rpx 0rpx 10rpx; }
	.cu-form-group .title{ width: 100%; }
	.cu-form-group>input{ display: block; width: 670rpx; height: 100rpx; color: #AAAAAA; }
	
	.cu-form-group>radio-group{ width: 670rpx; height: 100rpx; line-height: 100rpx; color: #AAAAAA; text-align: left; }
	
	.cu-form-group .textareabox{ width: 670rpx; }
	.cu-form-group .textareabox textarea{ width: 670rpx; margin-top: 20rpx !important; margin-bottom: 0rpx; }
	
	.cu-form-group .placeholder{ color: #AAAAAA; }
	
	.cu-form-group picker .picker{ text-align: left; color: #AAAAAA; }
</style>