odd_job_applet/pages/index/home.vue

<template>
	<view class="page">
		<image class="bg-img" :src="$getImageUrl('static/images/applet/other/identityBg.png')" mode="widthFix"></image>
		
		<image class="idTitle" :src="$getImageUrl('static/images/applet/other/idTitle.png')"></image>
		
		<image class="loginBg" :src="$getImageUrl('static/images/applet/other/loginBg.png')"></image>
		
		<view class="cardList">
			<view class="card cardBg-bule" @tap="checkWorker">
				<image class="card-avatar" :src="$getImageUrl('static/images/applet/other/employer.png')"></image>
				<view class="card-content">
					<view class="content-title">我是雇主（企业雇主、个人雇主）</view>
					<view class="content-explain">找员工、找服务</view>
					<view class="content-explain">找兼职、找外包</view>
				</view>
			</view>
			<!-- <view class="card cardBg-green">
				<image class="card-avatar" src="../../static/images/index/recruiter.png"></image>
				<view class="card-content">
					<view class="content-title">我是经纪人</view>
					<view class="content-explain">推荐人才入职领赏金</view>
				</view>
			</view> -->
			<view class="card cardBg-red" @tap="goUser">
				<image class="card-avatar" :src="$getImageUrl('static/images/applet/other/jobhunter.png')"></image>
				<view class="card-content">
					<view class="content-title">我是零工</view>
					<view class="content-explain">找工作、接任务</view>
					<view class="content-explain">接兼职、接外包</view>
				</view>
			</view>
		</view>

		<!-- <view class="bg-white homepage">
			<view>
				<view class="" @tap="checkWorker">
					<view class="padding"></view>
					<image mode="widthFix" style="width: 100%;" :src="zqtop"></image>
					<view class="padding text-center text-blue">我要招聘</view>
				</view>
				<view class="" @tap="goUser">
					<image mode="widthFix" style="width: 100%; position: fixed; left: 0; bottom: 160rpx;"
						:src="zqbottom"></image>
					<view class="padding text-center text-blue"
						style="width: 100%; position: fixed; left: 0; bottom: 40rpx;">我要求职</view>
				</view>
			</view>
		</view> -->

		<view class="cu-modal" :class="modalName=='workerModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">身份切换</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-tb-sm">

					<view class="cu-list menu">
						<block v-if="workerall!=null">
							<view class="cu-item arrow" v-for="(item,index) in workerall" :key="index" @tap="goWorker"
								:data-index="index">
								<view class="content text-left">
									<text class="cuIcon-settings text-grey"></text>
									<text>{{item.title}}</text>
								</view>
								<view class="action">
									<text class="text-grey">
										<text class="margin-left text-red" v-if="item.status==1">待审核</text>
										<text class="margin-left text-red" v-if="item.status==4">升级审核</text>
									</text>
								</view>
							</view>
						</block>
						<view class="cu-item arrow" @click="goLogin(1)">
							<view class="content text-left">
								<text class="cuIcon-settings text-grey"></text>
								<text>个人雇主注册</text>
							</view>
						</view>
						<view class="cu-item arrow" @click="goLogin(2)">
							<view class="content text-left">
								<text class="cuIcon-settings text-grey"></text>
								<text>企业雇主注册</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='apptreatyModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">服务协议和隐私政策</view>
				</view>
				<view class="padding-tb-sm">
					<scroll-view class="xy-content text-left" scroll-y>
						<text>请你务必审慎阅读、充分理解“用户服务协议”和“隐私政策”各条款，包括但不限于：为了向你提供即时招聘讯息、内容分享等服务，我们需要收集你的设备信息、操作日志等个人信息。</text>
						<br />
						<view>你可阅读
							<text class="text-blue" @tap="goPage('/pages/tool/sinpage?field=service')">《用户服务协议》</text>
							和<text class="text-blue" @tap="goPage('/pages/tool/sinpage?field=privacy')">《隐私政策》</text>
							了解详细信息，如你同意，请点击“我同意”开始接受我们等服务。
						</view>
					</scroll-view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="outApptreaty">不同意</button>
						<button class="cu-btn bg-blue margin-left" @tap="setApptreaty">我同意</button>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				identityinfo: false,
				userinfo: false,
				workerinfo: null,
				workerall: null,

				modalName: null,
				apptreaty: "",

				zqtop: '',
				zqbottom: ''
			}
		},
		onLoad: function(option) {
			_this = this;
			_this.getImage();
			_this.identityinfo = uni.getStorageSync('identityinfo') || false;
			_this.userinfo = uni.getStorageSync('userinfo') || false;
			_this.workerinfo = uni.getStorageSync('workerinfo') || null;
			if (_this.identityinfo == true && _this.workerinfo != null) {
				uni.reLaunch({
					url: "/pages/worker/worker"
				});
				return;
			}
			if (_this.identityinfo == true) {
				uni.reLaunch({
					url: "/pages/index/index"
				});
				return;
			}
			_this.$req.ajax({
				path: "index/gethomedata",
				data: {
					userid: _this.userinfo == false ? 0 : _this.userinfo.id
				}
			}).then((data) => {
				_this.apptreaty = data.apptreaty;
				_this.workerall = data.workerall;

				// #ifdef APP-PLUS
				_this.modalName = uni.getStorageSync('apptreatyModal') || "apptreatyModal";
				// #endif  
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});

		},
		onShareAppMessage: function(res) {
			return {
				title: "晋江人力",
				path: "/pages/index/home"
			}
		},
		methods: {
			// 获取图片
			getImage: function() {
				_this.$req.ajax({
					path: "my/getauthimg",
					data: {}
				}).then((data) => {
					_this.zqtop = data.head1;
					_this.zqbottom = data.head2;
				}).catch((err) => {});
			},
			setApptreaty: function() {
				uni.setStorageSync('apptreatyModal', "hideapptreatyModal");
				_this.modalName = null;
			},
			outApptreaty: function() {
				plus.runtime.quit();
			},
			goPage: function(pageurl) {
				uni.navigateTo({
					url: pageurl,
					fail: function() {
						uni.switchTab({
							url: pageurl
						});
					}
				});
			},


			checkWorker: function() {
				if (_this.workerall == 'null') {
					uni.navigateTo({
						url: "/pages/login/worker"
					});
					return false;
				}
				_this.modalName = "workerModal";
			},
			hideModal: function(e) {
				_this.modalName = null;
			},
			goWorker: function(e) {
				var index = e.currentTarget.dataset.index;
				if (_this.workerall[index].status == 1) {
					// uni.showModal({
					// 	title: '信息提示',
					// 	content: "信息审核中，请耐心等待。",
					// 	showCancel: false
					// });
					// return;
				}
				uni.setStorageSync('identityinfo', true);
				uni.setStorageSync('workerinfo', _this.workerall[index]);
				uni.reLaunch({
					url: "/pages/worker/worker"
				});
			},


			goLogin: function(wtype) {
				uni.setStorageSync('identityinfo', true);
				uni.navigateTo({
					url: "/pages/login/worker?wtype=" + wtype
				});
			},

			goUser: function() {
				_this.userinfo = _this.checkLogin("/pages/index/index");
				uni.setStorageSync('identityinfo', true);
				uni.setStorageSync('workerinfo', null);
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fffff6;
		text-align: center;
	}

	bg-color {
		background-color: #fffff6;
	}

	.homepage {
		height: calc(100vh);
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: bottom center;
	}

	.homepage image {
		width: 100%;
	}

	.homepage image.homebg {
		width: 750rpx;
		position: fixed;
		bottom: 0rpx;
	}

	.homebox {}

	.homebox image {
		width: 280rpx;
	}

	.xy-content {
		padding: 10rpx 30rpx;
		background: #F6F6F6;
		line-height: 50rpx;
		font-size: 28rpx;
		text-align: justify;
		box-sizing: border-box;
	}

	.padding {
		padding: 40rpx;
	}

	.padding15 {
		padding: 15rpx;
	}

	.padding10 {
		padding: 10rpx;
	}

	.bg-img {
		position: fixed;
		width: 100%;
		// height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
	
	.idTitle {
		margin: 48rpx 0 40rpx;
		width: 552rpx;
		height: 110rpx;
	}
	
	.loginBg {
		margin: 0 0 46rpx;
		width: 277rpx;
		height: 205rpx;
	}

	.cardList {
		padding: 0 18rpx;

		.cardBg-bule {
			background: linear-gradient(229deg, #7cb8fb 0%, #3492fa 100%);
			box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(73, 128, 209, 0.3);
		}

		.cardBg-green {
			box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(19, 192, 180, 0.3);
		}

		.cardBg-red {
			background: linear-gradient(229deg, #EB7600 0%, #F74C00 100%);
			box-shadow: 0rpx 8rpx 40rpx 2rpx rgba(255,76,10,0.3);
		}

		.card {
			margin-bottom: 70rpx;
			padding-left: 46rpx;
			width: 100%;
			height: 224rpx;
			border-radius: 14rpx;
			display: flex;
			align-items: center;

			.card-avatar {
				width: 172rpx;
				height: 172rpx;
			}

			.card-content {
				margin-left: 40rpx;
				text-align: left;

				.content-title {
					margin-bottom: 20rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #FFFFFF;
				}

				.content-explain {
					margin-bottom: 10rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>