jxred/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>