newjlsred/pages/form/certificates copy.vue

<template>
	<view class="content">
		<view class="bgimg"><image src="../../static/img/graduation.png"></image></view>
		<view class="box">
			<view class="name">
				<view class="name-left"><input type="text" v-model="name" /></view>
				<view class="name-right">先生/女士</view>
			</view>
			<view class="info">您已完成神农架林区红十字会普及培训,特发此证,以资鼓励。</view>
			<view class="signName">
				<view class="signName-left">
					<view class="signName-1">签发人</view>
					<view class="signName-2">Signer</view>
				</view>
				<view class="signName-right"><input type="text" v-model="people" class="list-input" /></view>
			</view>
			<view class="signDate">
				<view class="signName-left">
					<view class="signName-1">签发日期</view>
					<view class="signName-2">Signer</view>
				</view>
				<view class="signName-right">
					<view class="signDate">{{ getRecTime(signDate, 'yyyy.MM.dd') }}</view>
					<!-- <input type="text" v-model="signDate" class="list-input"/> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
	data() {
		return {
			name: '',
			people: '神农架林区红十字会',
			signDate: ''
		};
	},
	onLoad(option) {
		console.log(234, option);
		this.name = option.name;
		this.signDate = option.signDate;
		let a = this.getRecTime(this.signDate, 'yyyy.MM.dd');
		console.log(a, '?');
		// console.log('时间转化',getRecTime(111))
	},

	methods: {
		getRecTime(timestamp, fmt) {
			let d = new Date(timestamp * 1000),
				// f = fmt || 'yyyy/MM/dd',
				f = fmt || 'yyyy.MM.dd hh:mm:ss',
				o = {
					'M+': d.getMonth() + 1, //月份
					'd+': d.getDate(), //日
					'h+': d.getHours(), //小时
					'm+': d.getMinutes(), //分
					's+': d.getSeconds(), //秒
					'q+': Math.floor((d.getMonth() + 3) / 3), //季度
					S: d.getMilliseconds() //毫秒
				};
			if (/(y+)/.test(f)) {
				f = f.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length));
			}
			for (let k in o) {
				if (new RegExp('(' + k + ')').test(f)) {
					f = f.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
				}
			}
			return f;
			console.log(f);
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.qrimg {
	position: absolute;
	left: -9999rpx;
	top: -9999rpx;
}
.content {
	width: 100%;
	height: 100%;
	position: relative;
}
.bgimg {
	width: 100%;
	height: 100%;
	image {
		width: 100%;
		height: 100%;
	}
}
.box {
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 380rpx 94rpx 200rpx 94rpx;
	color: #333;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	// align-items: center;
	.name {
		display: flex;
		font-size: 32rpx;
		.name-left {
			text-align: center;
			// padding: 0 24rpx;
			width: 150rpx;
			border-bottom: 2rpx solid #333;
		}
	}
	.info {
		margin-top: 68rpx;
		text-indent: 64rpx;
		line-height: 58rpx;
	}
	.signName {
		margin-top: 32rpx;
		display: flex;
		.signName-left {
			line-height: 34rpx;
			.signName-1 {
			}
			.signName-2 {
				font-size: 28rpx;
			}
		}
		.signName-right {
			text-align: left;
			// width: 100%;
			padding: 0 12rpx;
			margin-left: 12rpx;

			// width: 288rpx;
			border-bottom: 2rpx solid #333;
			// margin-bottom: 12rpx;
			.list-input {
				width: 100%;
				padding: 0 12rpx;
				height: 70rpx;
				font-size: 32rpx;
				text-align: left;
			}
			.signDate {
				display: flex;
				align-items: center;
			}
		}
	}
	.signDate {
		margin-top: 22rpx;
		display: flex;
		.signName-left {
			line-height: 34rpx;
			.signName-1 {
			}
			.signName-2 {
				font-size: 28rpx;
			}
		}
		.signName-right {
			text-align: left;
			padding-left: 12rpx;
			margin-left: 12rpx;
			width: 288rpx;
			border-bottom: 2rpx solid #333;
			.list-input {
				height: 70rpx;
				font-size: 32rpx;
				text-align: left;
			}
			// margin-bottom: 12rpx;
		}
	}
	// background-color: pink;
}
</style>