jiupeiyun_kaoshi/pages/certificateDetail/certificateDetail.vue

<template>
	<page-meta :root-font-size="fontsize+'px'" style="display: block;">
	<view  v-if="isPc">
		<Headers></Headers>
		<view class="project">
			<view style="width: 1200px;margin: auto;">证书查询系统</view>
		</view>
		
		<view class="project-content ddflex">
			<!-- 成绩区域 -->
			<view class="test-box">
				<view class="test-title">证书查询结果</view>
				<!-- 表格 -->
				<view class="ddflex border table" style="">
					<!-- 右边 -->
					<view class="fflex">
						<view class="height56 ddflex padding-left" style="color: #fff;background-color: #2e68d8;">● 基本信息</view>
						<view class="dflex" style="align-items: stretch;">
							<view>
								<view>
									<view class="ddflex">
										<view class="height56 ddflex-jc width140 bg-color border-bottom border-top-none">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</view>
										<view class="height56 ddflex padding-left width200 border border-right-none border-top-none">{{info.userName?info.userName:'*'}}</view>
										<view class="height56 ddflex-jc width140 bg-color border-bottom border-left">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</view>
										<view class="height56 ddflex padding-left width200 border border-right-none border-top-none">{{info.sex==1?'男':info.sex==2?'女':'*'}}</view>
									</view>
									<view class="ddflex">
										<view class="height56 ddflex-jc width140 bg-color">身份证号</view>
										<view class="height56 ddflex fflex padding-left border border-bottom-none border-right-none border-top-none">{{info.idNumber?info.idNumber:'*'}}</view>
									</view>
									<view class="ddflex">
										<view class="height56 ddflex-jc width140 bg-color border border-right-none border-left-none">培训时间</view>
										<view class="height56 ddflex fflex padding-left border border-right-none">{{info.trainingDate?dateYM(info.trainingDate):'*'}}</view>
									</view>
								</view>
							</view>
							<view class="border fflex ddflex border-right-none border-top-none" style="box-sizing: border-box;padding: 20px;">
								<image style="max-width: 100%;max-height: 125px;" :src="info.avatar" mode="widthFix"></image>
							</view>
						</view>
						
						<view class="height56 ddflex padding-left" style="color: #fff;background-color: #2e68d8;">● 证书信息</view>
						<view class="ddflex">
							<view class="height56 ddflex-jc width140 bg-color border-top-none">职业名称</view>
							<view class="height56 ddflex padding-left width200 border border-right-none border-top-none border-bottom-none">{{info.cateName?info.cateName:'*'}}</view>
							<view class="height56 ddflex-jc width140 bg-color border-left">培训等级</view>
							<view class="height56 ddflex padding-left width200 border border-right-none border-top-none border-bottom-none">{{info.trainingLevel?info.trainingLevel:'*'}}</view>
						</view>
						<view class="ddflex">
							<view class="height56 ddflex-jc width140 bg-color border-bottom border-top">发证单位</view>
							<view class="height56 ddflex fflex padding-left border border-right-none">湖南现代职业培训学校</view>
						</view>
						<view class="ddflex">
							<view class="height56 ddflex-jc width140 bg-color border-bottom border-top-none border-bottom-none">发证日期</view>
							<view class="height56 ddflex fflex padding-left border border-right-none border-top-none border-bottom-none">{{info.issueDate?info.issueDate:'*'}}</view>
						</view>
					</view>
				</view>
				<!-- 声明 -->
				<view style="margin-top: 34px;">
					<view style="font-size: 16px;font-weight: bold;">声明:</view>
					<view style="font-size: 14px;line-height: 30px">
						1、未经证书信息权属人同意，不得将本材料用于违背权属人意愿之用途。
					</view>
				</view>
			</view>
			<!-- 答题卡区域 -->
			<view class="test-info ddflex">
				<view class="note-title ddflex">
					<image class="note-title-icon" src="/static/images/cjwt.png"</image>
					<view>所有证书</view>
				</view>
				<view class="note-box" style="margin-top: 0;">
					<!-- <view class="note-title ddflex">
						<image class="note-title-icon" src="/static/images/cjwt.png"</image>
						<view>所有证书</view>
					</view> -->
					<view>
						<view class="note-item ddflex" v-for="item,index in infoList" :key="index" @click="changeItem(item)">
							<view :class="'note-item-content '+(item.selected?'note-item-selected':'')">{{index+1}}. {{item.cateName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<Foot></Foot>
	</view>
	
	<!-- 移动端 -->
	<view v-else style="font-size: 28rpx;background-color: #fff;">
		<view class="m-project">
			<view style="margin: auto;">证书查询系统</view>
		</view>
		
		<view class="ddflex" style="justify-content: space-between;padding: 30rpx;color: #1AA1E6;font-weight: bold;">
			<view >证书查询结果</view>
			<button  type="primary" @click="toggle('right')" style="border-radius: 10rpx;font-size: 24rpx;padding: 10rpx 30rpx">
				<text>查看全部证书</text>
			</button>
		</view>
		
		<view style="border-left: 20rpx solid #fff;border-right: 20rpx solid #fff;">
			<view class="m-height56 ddflex m-padding-left" style="color: #fff;background-color: #2e68d8;">● 基本信息</view>
			<view class="dflex" style="align-items: stretch;">
				<view>
					<view class="ddflex">
						<view class="ddflex-jc m-height56 m-width150 bg-color border border-right-none border-bottom-none">姓名</view>
						<view class="m-height56 ddflex m-width200 m-padding-left border border-right-none border-bottom-none">{{info.userName?info.userName:'*'}}</view>
					</view>
					<view class="ddflex">
						<view class="ddflex-jc m-height56 m-width150 bg-color border border-right-none border-bottom-none">性别</view>
						<view class="m-height56 ddflex m-width200 m-padding-left border border-right-none border-bottom-none">{{info.sex==1?'男':info.sex==2?'女':'*'}}</view>
					</view>
					<view class="ddflex">
						<view class="ddflex-jc m-height56 m-width150 bg-color border border-right-none border-bottom-none">培训时间</view>
						<view class="m-height56 ddflex m-width200 m-padding-left border border-right-none border-bottom-none">{{info.trainingDate?dateYM(info.trainingDate):'*'}}</view>
					</view>
				</view>
				<view class="border fflex border-bottom-none ddflex" style="box-sizing: border-box;padding: 20rpx;">
					<image style="max-width: 100%;max-height: 250rpx;" :src="info.avatar" mode="widthFix"></image>
				</view>
			</view>
			<view class="ddflex">
				<view class="ddflex-jc m-height56 m-width150 bg-color border border-right-none">身份证号</view>
				<view class="m-height56 ddflex fflex m-padding-left border">{{info.idNumber?info.idNumber:'*'}}</view>
			</view>
			
			<view class="m-height56 ddflex m-padding-left" style="color: #fff;background-color: #2e68d8;">● 证件信息</view>
			<view class="ddflex">
				<view class="ddflex-jc m-height56 m-width150 bg-color border border-right-none border-bottom-none">职业名称</view>
				<view class="m-height56 ddflex fflex m-padding-left border border-bottom-none">{{info.cateName?info.cateName:'*'}}</view>
			</view>
			<view class="ddflex">
				<view class="ddflex-jc m-height56 m-width150 bg-color border border-right-none border-bottom-none">培训等级</view>
				<view class="m-height56 ddflex fflex m-padding-left border border-bottom-none">{{info.trainingLevel?info.trainingLevel:'*'}}</view>
			</view>
			<view class="ddflex">
				<view class="ddflex-jc m-height56 m-width150 bg-color border border-right-none border-bottom-none">发证单位</view>
				<view class="m-height56 ddflex fflex m-padding-left border  border-bottom-none">湖南现代职业培训学校</view>
			</view>
			<view class="ddflex">
				<view class="ddflex-jc m-height56 m-width150 bg-color border border-right-none">发证日期</view>
				<view class="m-height56 ddflex fflex m-padding-left border">{{info.issueDate?info.issueDate:'*'}}</view>
			</view>
			
		</view>
		
		<!-- 声明 -->
		<view style="margin: 10rpx 0;padding: 20rpx;">
			<view style="font-size: 16rpx;font-weight: bold;">声明:</view>
			<view style="font-size: 14rpx;line-height: 1.5">
				1、未经证书信息权属人同意，不得将本材料用于违背权属人意愿之用途。证书信息内容标注“*”号，表示该项内容不详。证书信息如有修改,请以网站在线查询内容为准。<br>
				2、本材料是打印的证书查询结果凭证，仅供查询人使用，不具有再验证功能。
			</view>
		</view>
		
		<view>
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content popup-height">
					<view class="m-title" style="margin-bottom: 10rpx;font-size: 30rpx;font-weight: bold">所有证书</view>
					<view style="overflow-y: scroll;max-height: 85%">
						<view class="m-note-item ddflex" v-for="item,index in infoList" :key="index" @click="changeItem(item)">
							<view class="m-note-item-content" :style="item.selected?'color:#007aff':''">{{index+1}}. {{item.cateName}}</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
	</page-meta>
</template>


<script>
	const app = getApp();
	const req = require('../../utils/request.js');
	const utils = require('../../utils/util.js');
	const api = require('../../utils/api.js')
	export default {
		data() {
			return {
				options:{},
				infoList:[],
				info:{},
				isPc:true,
				
				systemInfo:{},
				fontsize:'100px'
			}
		},
		onReady() {},
		onLoad() {
			let srceenNunber = 19.2; //因设计图是1920所有把设计图分为19.2份，所以html字体大小为100px
			    let that = this;
			
			    //窗体改变大小触发事件
			    uni.onWindowResize((res) => {
			        console.log('变化后的窗口宽度=', res.size.windowWidth);
			        that.fontsize = parseFloat(res.size.windowWidth) / srceenNunber;
			    })
			
			    //打开获取屏幕大小
			    uni.getSystemInfo({
			        success(res) {
			            console.log('设备信息：', res);
			            that.fontsize = res.screenWidth / srceenNunber;
			            console.log('字体大小：', that.fontsize);
			        }
			    })
			
			this.systemInfo = uni.getSystemInfoSync()
			this.isPc = this.IsPC()
			if(!req.getStorage('options')){
				uni.reLaunch({
					url:'/pages/certificateQuery/certificateQuery'
				})
				return false
			}
			this.options = req.getStorage('options')
			this.getDetail()
		},
		onUnload() {
			req.removeStorage('options')
		},
		methods: {
			IsPC() {
			    var userAgentInfo = navigator.userAgent;
			    var Agents = ["Android", "iPhone",
			                "SymbianOS", "Windows Phone",
			                "iPad", "iPod"];
			    var flag = true;
			    for (var v = 0; v < Agents.length; v++) {
			        if (userAgentInfo.indexOf(Agents[v]) > 0) {
			            flag = false;
			            break;
			        }
			    }
			    return flag;
			},
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			getDetail(){
				req.getRequest('/api/v3/exam/user/manager/certificate',this.options,res=>{
					res.map(item=>{item.selected = false})
					this.infoList = res
					res[0].selected = true
					this.info = res[0]
				})
			},
			changeItem(item){
				uni.showLoading({
					title:'加载中...'
				})
				if(!this.isPc){
					this.$refs.popup.close()
				}
				setTimeout(()=>{
					this.infoList.map(item=>{
						item.selected = false
					})
					item.selected = true
					this.info = item
					uni.hideLoading()
				},500)
			},
			// 时间格式化
			dateYM(date){
				return req.dateFormat(date).v6
			},
			
			
			// 移动端
			toggle(type) {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
		}
	}

</script>

<style>
	@import url('./certificateDetail.css');
</style>