merchant-app/pages/baoming.vue

<template>
	<view>
		<view class="task-name">
			{{param.taskName}}
		</view>
		<view class="bm-info">
			<view class="line">
				<view class="label">
<!--					<i><i><p>姓  名:<i></i></p></i></i>-->
					姓名<i></i>
				</view>
				:<input type="input" v-model="param.employeeName" placeholder="请输入姓名"/>
			</view>
			<view class="line">
				<view class="label">
					手机号<i></i>
				</view>
				:<input type="input" class="phone-input" v-model="param.phone" placeholder="请输入手机号" disabled/>
			</view>
			<view class="line">
				<view class="label">
					身份证号<i></i>
				</view>
				:<input type="input" v-model="param.idCard" placeholder="请输入身份证号"/>
			</view>
		</view>

		<view class="bm-bottom">
			<view class="bm-btn" @click="baoming">报名</view>
		</view>
	</view>


</template>

<script>
	import { baoming,getTask } from "@/api/employee/task";
	import { verifyToken } from '@/api/employee/login'
  export default {
	data() {
		return {
			param: {
				taskName: "",
				taskId: null,
				employeeName: null,
				phone: null,
				idCard: null
			},
			q: null,
		};
	},
    onLoad: function(query) {
		var noLogin = false;
		var that = this;
		verifyToken().then(response => {
			if (response.code == 401){
				noLogin = true;
			}

			this.param.employeeName = this.$store.state.user.nickName == '微信用户' ? null : this.$store.state.user.nickName
			this.param.idCard = this.$store.state.user.idCard
			this.param.phone = this.$store.state.user.phone

			const qrUrl = decodeURIComponent(query.q) // 获取到二维码原始链接内容
			// const scancode_time = parseInt(query.scancode_time) // 获取用户扫码时间 UNIX 时间戳

			let jsonUrl = this.getWxUrlParam(qrUrl);
			var taskId = jsonUrl.id // 获取用户扫码时间 UNIX 时间戳
			this.param.taskId = taskId;

			if(this.param.taskId != null){
				if (noLogin || this.$store.state.user.roleType == 0){
					uni.navigateTo({
						url: "/pages/wxlogin?baoming=" + this.param.taskId
					})
				}
				this.getTask();
			}else{
				this.param.taskName = query.taskName;
				this.param.taskId = query.taskId;
				this.getTask();
			}
		})


    },
	 methods:{
		 getTask(){
			 getTask(this.param).then(response => {
				 this.param.taskName = response.data.taskName

			 })
		 },
		 baoming(){
		 	console.log(this.param.employeeName)
			 var that = this;
			 if (this.param.employeeName == null || this.param.employeeName == ''){
				 wx.showToast({
					 title: '请填写姓名',
					 icon: 'none',
					 duration: 2000,
				 })
				 return
			 }
			 if (this.param.idCard == null || this.param.idCard.length != 18){
				 wx.showToast({
					 title: '请填写正确的身份证号',
					 icon: 'none',
					 duration: 2000,
				 })
				 return
			 }
			 baoming(this.param).then(response => {
				 // 设置用户信息
				 this.$store.dispatch('GetInfo').then(res => {
					 uni.navigateTo({
						 url: "baomingSuccess"
					 })
				 })
			 })
		 },
		 getWxUrlParam(url) {
			 let theRequest = {};
			 if (url.indexOf('#') != -1) {
				 const str = url.split('#')[1];
				 const strs = str.split('&');
				 for (let i = 0; i < strs.length; i++) {
					 theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				 }
			 } else if (url.indexOf('?') != -1) {
				 const str = url.split('?')[1];
				 const strs = str.split('&');
				 for (let i = 0; i < strs.length; i++) {
					 theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				 }
			 }
			 return theRequest;
		 },
	 }
  }
</script>

<style lang='scss'>
	.task-name{
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}
	.bm-info{
		background-color: #ffffff;
		padding: 10rpx 30rpx 10rpx 30rpx;
		.line{
			border-bottom: 1rpx solid #dbdbdb;
			height: 80rpx;
			display: flex;
			align-items: center;
			.label{
				width: 18%;
				height: 40rpx;
				text-align: justify;

				i{
					display: inline-block;
					width: 100%;
					height: 0;
				}
			}

			input{
				/*width: 80%;*/
				margin-left: 40rpx;
				height: 50rpx;
			}
			.phone-input{
				color: #979595;
			}

		}
		.line:last-child {
			border-bottom: none;
		}
	}
	.bm-bottom{
		position: absolute;
		bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		width: 100%;
		padding: 0 30rpx;
		.bm-btn{
			left: 0;
			display: grid;
			width: 100%;
			background-color: #107ff6;
			color: #ffffff;
			font-weight: 650;
			font-size: 30rpx;
			border-radius: 7rpx;
			height: 80rpx;
			text-align: center;
			place-items: center;
		}
	}


</style>