jiupeiyun_kaoshi/pages/certificateDetail/certificateDetail.vue

<template>
	<view>
		<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>
						<view class="height56 ddflex-jc width140 bg-color border-bottom">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</view>
						<view class="height56 ddflex-jc width140 bg-color border-bottom">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</view>
						<view class="height56 ddflex-jc width140 bg-color border-bottom">身份证号</view>
						<view class="height56 ddflex-jc width140 bg-color border-bottom">培训工种</view>
						<view class="height56 ddflex-jc width140 bg-color border-bottom">培训学校</view>
						<view class="height56 ddflex-jc width140 bg-color border-bottom">办学编号</view>
						<view class="height56 ddflex-jc width140 bg-color border-bottom">证书编号</view>
						<view class="height56 ddflex-jc width140 bg-color border-bottom">培训结论</view>
						<view class="height56 ddflex-jc width140 bg-color">发证日期</view>
					</view> -->
					<!-- 右边 -->
					<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 border-right-none border-top-none" style="box-sizing: border-box;padding: 20px;">
								<image style="width: 100%;" :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、未经证书信息权属人同意，不得将本材料用于违背权属人意愿之用途。证书信息内容标注“*”号，表示该项内容不详。证书信息如有修改,请以网站在线查询内容为准。<br>
						2、本材料是打印的证书查询结果凭证，仅供查询人使用，不具有再验证功能。
					</view>
				</view>
			</view>
			<!-- 答题卡区域 -->
			<view class="test-info ddflex" v-if="false">
				<view class="note-box">
					<view class="note-title ddflex">
						<image class="note-title-icon" src="/static/images/wzgg.png"></image>
						<view>网站提醒</view>
					</view>
					<view>
						<view class="note-item ddflex" v-for="item,index in wztxList" :key="index" @click="jumpUrl('/pages/contentDetail/contentDetail?id='+item.id)">
							<view class="note-item-content">{{item.title}}</view>
						</view>
					</view>
				</view>
				<!-- 学习资料 -->
				<view class="note-box">
					<view class="note-title ddflex">
						<image class="note-title-icon" src="/static/images/xxzl.png"></image>
						<view>学习资料</view>
					</view>
					<view>
						<view class="note-item ddflex" v-for="item,index in xxzlList" :key="index" @click="jumpUrl('/pages/contentDetail/contentDetail?id='+item.id)">
							<view class="note-item-content">{{item.title}}</view>
						</view>
					</view>
				</view>
				<!-- 常见问题 -->
				<view class="note-box">
					<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 cjwtList" :key="index" @click="jumpUrl('/pages/contentDetail/contentDetail?id='+item.id)">
							<view class="note-item-content">{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<Foot></Foot>
	</view>
</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:{},
				info:{},
				wztxList:[],
				xxzlList:[],
				cjwtList:[],
			}
		},
		onReady() {},
		onLoad() {
			if(!req.getStorage('options')){
				uni.reLaunch({
					url:'/pages/certificateQuery/certificateQuery'
				})
				return false
			}
			this.options = req.getStorage('options')
			this.getDetail()
			
			this.getTextwztxInfo()
			this.getTextxxzlInfo()
			this.getTextcjwtInfo()
		},
		onUnload() {
			req.removeStorage('options')
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			getDetail(){
				req.getRequest('/api/v3/exam/user/manager/certificate',this.options,res=>{
					this.info = res
				})
			},
			// 网站提醒
			getTextwztxInfo(){
				let form={
					code:req.public.wztxCode,
					page:1,
					limit:5
				}
				req.getRequest('/api/content/list',form,res=>{
					this.wztxList = res
				})
			},
			// 学习资料
			getTextxxzlInfo(){
				let form={
					code:req.public.xxzlCode,
					page:1,
					limit:5
				}
				req.getRequest('/api/content/list',form,res=>{
					this.xxzlList = res
				})
			},
			// 常见问题
			getTextcjwtInfo(){
				let form={
					code:req.public.cjwtCode,
					page:1,
					limit:5
				}
				req.getRequest('/api/content/list',form,res=>{
					this.cjwtList = res
				})
			},
			
			// 时间格式化
			dateYM(date){
				return req.dateFormat(date).v6
			}
		}
	}

</script>

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