weapp-online/pages/sign_in/sign_in.vue

<template>
	<view>
		<view class="scan_code flexCC">
			<view class="title">扫码签到</view>
			<view class="intr">管理员用微信扫描报名凭证进行签到</view>
			<view class="btn flexC" @click="scanCode">
				<text class="iconfont iconsaoma" style="color:#fff;font-size:50rpx;margin-right:10rpx;"></text>
				<text>扫码签到</text>
			</view>
		</view>
		<view class="manual">
			<view class="title">验证码签到</view>
			<view class="intr">管理员输入报名验证码进行签到</view>
			<view class="inp flexB">
				<input type="text" placeholder="请输入报名验证码" v-model="code" />
				<view class="flexCC" @click="checkout">确认</view>
			</view>
			<view class="info" v-if="showInfo">
				<view>信息确认:</view>
				<view class="flexS">
					<text>报名人：</text>
					<view>{{ signInfo.nickname }}</view>
				</view>
				<view class="flexS">
					<text>手机号：</text>
					<view>{{ signInfo.phone }}</view>
				</view>
				<view class="flexS">
					<text>报名时间：</text>
					<view>{{ signInfo.created_at }}</view>
				</view>
			</view>
			<view class="btn flexC" @click="sureSign">
				<image src="../../static/imgs/signIn.png" mode=""></image>
				<text>确认签到</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getUser, sureSign } from '../../api/sign_in.js';
export default {
	data() {
		return {
			showInfo: false, //是否显示报名信息
			code: '', //验证码
			signInfo: '' //报名人信息
		};
	},
	methods: {
		/*扫码签到
		 * @params id 扫描小程序码截取的id
		 */
		scanCode() {
			uni.scanCode({
				success: res => {
					let str = res.path;
					let id = str.replace(/[^0-9]/gi, '');
					if (id) {
						//判断有没有签到权限
						getUser({ id }).then(res => {
							if (res.code != 200) {
								uni.showModal({
									content: res.message,
									showCancel: false
								});
								return false;
							}
							if (res.code == 200) {
								uni.navigateTo({
									url: '../sign_in_voucher/sign_in_voucher?id=' + id
								});
							}
						});
					}
				}
			});
		},
		/*获取用户信息
		 *@params code 输入的签到验证码
		 */
		checkout() {
			if (!this.code) {
				uni.showModal({
					content: '请先输入验证码',
					showCancel: false
				});
				return false;
			}
			getUser({ code: this.code }).then(res => {
				if (res.code != 200) {
					uni.showModal({
						content: res.message,
						showCancel: false
					});
					this.code = '';
					return false;
				}
				if (res.code == 200) {
					this.showInfo = true;
					this.signInfo = res.data;
				}
			});
		},
		/*确认签到
		 *@params id 输入验证码获取的id
		 */
		sureSign() {
			if (!this.code) {
				uni.showModal({
					content: '请先输入验证码',
					showCancel: false
				});
				return false;
			}
			if (!this.signInfo) {
				uni.showModal({
					content: '请先获取报名信息',
					showCancel: false
				});
				return false;
			}
			sureSign({ id: this.signInfo.id }).then(res => {
				if (res.code != 200) {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
					return false;
				}
				if (res.code == 200) {
					let { nickname, created_at, phone, season, type } = this.signInfo;
					uni.showToast({
						title: '签到成功！',
						duration: 2000,
						success: res => {
							uni.navigateTo({
								url:
									'../written_off/written_off?nickname=' +
									nickname +
									'&phone=' +
									phone +
									'&created_at=' +
									created_at +
									'&path=' +
									2 +
									'&season=' +
									season +
									'&type=' +
									type
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.manual,
.scan_code {
	.title {
		font-size: 36rpx;
		color: #333;
		padding-top: 38rpx;
	}
	.intr {
		font-size: 26rpx;
		color: #666666;
		margin: 40rpx 0 23rpx 0;
	}
	.btn {
		width: 580rpx;
		margin: 0 auto;
		background-color: #ea4a41;
		height: 90rpx;
		border-radius: 45rpx;
		color: #fff;
		font-size: 32rpx;
		image {
			height: 42rpx;
			width: 42rpx;
			margin-right: 19rpx;
		}
		text {
			letter-spacing: 5rpx;
		}
	}
}
.scan_code {
	height: 300rpx;
	width: 100%;
	background-color: #fff;
	padding-bottom: 30rpx;
}
.manual {
	margin: 40rpx auto 0;
	background-color: #fff;
	padding-bottom: 30rpx;
	.title,
	.intr {
		text-align: center;
	}
	.btn {
		margin: 30rpx auto 0;
	}
	.inp {
		width: 690rpx;
		margin: 35rpx auto;
		border-radius: 6rpx;
		background-color: #f2f4f5;
		height: 105rpx;
		box-sizing: border-box;
		view {
			width: 128rpx;
			height: 64rpx;
			background-color: #ea4a41;
			border-radius: 32rpx;
			color: #fff;
			margin-right: 23rpx;
			letter-spacing: 3rpx;
		}
		input {
			width: 75%;
			height: 93%;
			margin-left: 48rpx;
			font-size: 36rpx;
			color: #333;
		}
	}
	.info {
		margin-left: 79rpx;
		font-size: 28rpx;
		> view {
			margin-top: 34rpx;
		}
		view {
			color: #333;
		}
		text {
			color: #666666;
		}
	}
}
</style>