zh_order_food_xcx/pages-my/rider-recruit.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box">
		<Nav title="骑手招聘" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css content-box">
			<image class="zp-bg" src="@/static/img/my/zp.png" mode=""></image>
			<view class="info-box box-border-box">
				<image class="sxnr mb-32" src="@/static/img/my/sxnr.png" mode=""></image>
				<image class="jrlc mb-48" src="@/static/img/my/jrlc.png" mode=""></image>
				<view class="title-box fs-36 fc-3 fw-b text-align-center mb-24">
					校园实习生申请表
				</view>
				<view class="bgc-f b-rad-20 card-box box-border-box p-24">
					<EnRadio label='性别' :radioData='radioData' v-model="fromData.sex"></EnRadio>
					
					<view class="box-input align-items-center box-border-box p-b-20">
						<view class="fs-32 fw-400 w158">手机号</view>
						<input v-model="fromData.phone" type="number" placeholder="请输入手机号">
						
					</view>
					<view class="box-input align-items-center box-border-box p-b-20">
						<view class="fs-32 fw-400 w158">验证码</view>
						<input v-model="fromData.code" type="number" placeholder="请输入验证码">
						<view class="fs-28 fc-41ABF5 code-box" @click="getCode()">{{codeText}}{{isCode?'s':''}}</view>
					</view>
				</view>
				
				
			</view>
		</scroll-view>
		
		<view class="bot-box bgc-f" @click="save()">
			<view class="bot-but fc-f fs-32 text-align-center b-rad-200 bgc-4FB3EF">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import EnRadio from '@/components/en-from/en-radio/en-radio.vue';
	import {getCode,setRiderApply} from '@/api/common.js';
	import tools from "@/service/tools";
	export default {
		components: {EnRadio,},
		data() {
			return {
				isCode:false,
				isAJAX:false,
				codeText:'获取验证码',
				fromData:{
					sex:'',
					phone:'',
					school_id:'',
					code:'',
				},
				radioData:[{name:"男",id:1},{name:"女",id:2},],
			};
		},
		
		methods: {
			getCode(){
				if(!this.fromData.phone){
					return tools.error('请输入手机号')
				}
				if (this.isCode) {
					return
				}
				this.isCode = true;
				getCode({phone:this.fromData.phone,send_type:'rider_apply'}).then((res)=>{
					if(res.code === 1){
						this.codeText = 60;
						let timer = setInterval(() => {
						  this.codeText -= 1;
						  if (this.codeText <= 0) {
						    clearInterval(timer);
							this.isCode = false;
							this.codeText = '获取验证码'
						  }
						}, 1000);
					}else{
						this.isCode = false;
						tools.error('获取验证码失败，请稍后重试')
					}
				})
			},
			save(){
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				
				this.fromData.school_id = uni.getStorageSync('school_id');
				setRiderApply(this.fromData).then((res)=>{
					if(res.code === 1){
						this.isAJAX = false;
						tools.success('提交成功');
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/me/index'
							})
						},1500)
						
					}else{
						this.isAJAX = false;
						tools.error(res.msg);
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.bot-box {
		width: 100%;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
	
		.bot-but {
			width: 100%;
			height: 92rpx;
			line-height: 92rpx;
		}
	}
	.card-box{
		width: 100%;
		min-height: 200rpx;
	}
	.box-input{
		padding-top: 34rpx;
		padding-bottom: 34rpx;
		border-bottom: 2rpx solid #F0F0F0;
		position: relative;
		.w158{
			width: 210rpx;
		}
		input{
			font-size: 32rpx;
		}
		.code-box{
			position: absolute;
			right: 0;
			top: 34rpx;
		}
	}
	
.content-box{
	position: relative;
}
.zp-bg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1448rpx;
	z-index: 0;
}
.info-box{
	padding: 436rpx 32rpx 0;
	position: relative;
	z-index: 1;
}
.sxnr{
	width: 448rpx;
	height: 98rpx;
}
.jrlc{
	width: 684rpx;
	height: 142rpx;
}
.title-box{
	width: 320rpx;
	height: 72rpx;
	line-height: 72rpx;
	background: linear-gradient( 90deg, #43AFF6 0%, rgba(161,255,227,0.4) 26%, #DAE6FF 100%);
	border-radius: 12rpx;
}
</style>