证书查询移动端

pages/certificateDetail/certificateDetail.css

@@ -188,3 +188,90 @@
 .note-item-date {
 	color: #999999;
 }
+
+
+/* 移动端 */
+.m-project {
+	height: 80rpx;
+	line-height: 80rpx;
+	background: #1AA1E6;
+	font-size: 36rpx;
+	text-align: center;
+	color: #FFFFFF;
+	font-weight: bold;
+}
+
+.m-padding-left{
+	padding-left: 30rpx;
+}
+.m-height56{
+	height: 100rpx;
+}
+.m-text-center{
+	text-align: center;
+}
+.m-width150{
+	width: 150rpx;
+}
+.m-width200{
+	width: 300rpx;
+}
+.m-note-item {
+	justify-content: space-between;
+	font-size: 28rpx;
+	font-weight: 400;
+	line-height:2;
+	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+	cursor: pointer;
+}
+
+.m-note-item-content {
+	color: #666666;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin-right: 10rpx;
+}
+
+.m-note-item-content:hover {
+	/* text-decoration: underline #666666; */
+}
+
+.m-note-item-date {
+	color: #999999;
+}
+.m-title{
+	position: relative;
+	z-index: 1;
+	margin-left: 12rpx;
+}
+.m-title::after{
+	content: '';
+	background-color: #007aff;
+	width: 6rpx;
+	height: 60%;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: -12rpx;
+	z-index: 0;
+}
+
+.popup-content {
+  /* display: flex; */
+  /* flex-direction: row; */
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx;
+  height: 100rpx;
+  background-color: #fff;
+}
+/deep/.right{
+	width: unset; 
+}
+.popup-height {
+  height: 100%;
+  flex: 1;
+  width:400rpx
+}

pages/certificateDetail/certificateDetail.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view  v-if="systemInfo.platform.indexOf('windows')!=-1">
 		<Headers></Headers>
 		<view class="project">
 			<view style="width: 1200px;margin: auto;">证书查询系统</view>
@@ -11,18 +11,6 @@
 				<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>
@@ -94,6 +82,88 @@
 		
 		<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>
+			<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 border-left-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 border-left-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 border-left-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" style="box-sizing: border-box;padding: 20px;">
+					<image style="width: 100%;" :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 border-left-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 border-left-none">职业名称</view>
+				<view class="m-height56 ddflex fflex m-padding-left border border-right-none 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 border-left-none">培训等级</view>
+				<view class="m-height56 ddflex fflex m-padding-left border border-right-none 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 border-left-none">发证单位</view>
+				<view class="m-height56 ddflex fflex m-padding-left border border-right-none border-bottom-none">湖南现代职业培训学校</view>
+			</view>
+			<view class="ddflex">
+				<view class="ddflex-jc m-height56 m-width150 bg-color border border-right-none border-left-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>
+						<view class="m-note-item ddflex" v-for="item,index in infoList" :key="index" @click="changeItem(item)">
+							<view class="m-note-item-content">{{index+1}}. {{item.cateName}}</view>
+						</view>
+					</view>
+				</view>
+			</uni-popup>
+		</view>
+	</view>
 </template>
 
 
@@ -108,10 +178,13 @@
 				options:{},
 				infoList:[],
 				info:{},
+				
+				systemInfo:{}
 			}
 		},
 		onReady() {},
 		onLoad() {
+			this.systemInfo = uni.getSystemInfoSync()
 			if(!req.getStorage('options')){
 				uni.reLaunch({
 					url:'/pages/certificateQuery/certificateQuery'
@@ -138,11 +211,19 @@
 			},
 			changeItem(item){
 				this.info = item
+				this.$refs.popup.close()
 			},
 			// 时间格式化
 			dateYM(date){
 				return req.dateFormat(date).v6
-			}
+			},
+			
+			
+			// 移动端
+			toggle(type) {
+				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
+				this.$refs.popup.open(type)
+			},
 		}
 	}
 

pages/certificateQuery/certificateQuery.css

@@ -73,3 +73,59 @@
 .link-btn:last-child{
 	margin-right: 0px;
 }
+
+
+/* 移动端 */
+.m-content-box {
+	z-index: 1;
+	justify-content: center;
+	margin-top: 120rpx;
+	position: relative;
+	margin-bottom: 30rpx;
+}
+
+.m-re-item {
+	margin-bottom: 40rpx;
+}
+
+.m-re-label {
+	font-size: 32rpx;
+	margin-right: 28rpx;
+	margin-left: 40rpx;
+}
+
+.m-re-li {
+	width: 460rpx;
+	height: 84rpx;
+	border: 1px solid #D8DCE6;
+	border-radius: 8rpx;
+	padding: 0 34rpx;
+	box-sizing: border-box;
+}
+
+.m-note {
+	justify-content: center;
+}
+
+.m-note image {
+	width: 32rpx;
+	height: 32rpx;
+	margin-right: 16rpx;
+}
+.m-note text {
+	font-size: 28rpx;
+}
+
+.m-query-btn{
+	width: 600rpx;
+	height: 84rpx;
+	line-height: 84rpx;
+	background: #1AA1E6;
+	border-radius: 10rpx;
+	opacity: 1;
+	color: #fff;
+	text-align: center;
+	font-size: 32rpx;
+	margin: 54rpx auto;
+	cursor: pointer;
+}

pages/certificateQuery/certificateQuery.vue

@@ -1,5 +1,5 @@
 <template>
-	<view style="position: relative;">
+	<view style="position: relative;" v-if="systemInfo.platform.indexOf('windows')!=-1">
 		<Headers></Headers>
 		
 		<image class="top-bg" src="/static/images/certificate_top_bg.png" mode="widthFix"></image>
@@ -13,15 +13,15 @@
 					</view>
 				</view>
 				<view class="ddflex re-item">
-					<view class="re-label">证书编号</view>
+					<view class="re-label">身份证号</view>
 					<view class="re-li dflex">
-						<input v-model="certificateNo" placeholder="证书编号" maxlength="-1" placeholder-class="placeholder" class="re-ipt flex" />
+						<input v-model="idNumber" placeholder="身份证号" maxlength="-1" placeholder-class="placeholder" class="re-ipt flex" />
 					</view>
 				</view>
 				<view class="ddflex re-item">
-					<view class="re-label">身份证号</view>
+					<view class="re-label">证书编号</view>
 					<view class="re-li dflex">
-						<input v-model="idNumber" placeholder="身份证号" maxlength="-1" placeholder-class="placeholder" class="re-ipt flex" />
+						<input v-model="certificateNo" placeholder="证书编号" maxlength="-1" placeholder-class="placeholder" class="re-ipt flex" />
 					</view>
 				</view>
 				<view class="note ddflex">
@@ -40,13 +40,56 @@
 					第三方证书查询平台
 				</view>
 				<view class="ddflex" style="justify-content: center;margin-top: 18px">
-					<view class="link-btn" v-for="item in 6">国家职业资格证书查询</view>
+					<view class="link-btn" v-for="item in otherLink" @click="jumpLink(item.link)">{{item.title}}</view>
 				</view>
 			</view>
 		</view>
 		<image class="bottom_bg" src="/static/images/certificate_bottom_bg.png" mode="widthFix"></image>
 		<Foot></Foot>
 	</view>
+	
+	<!-- 移动端 -->
+	<view v-else style="font-size: 28rpx;">
+		<image class="top-bg" src="/static/images/certificate_top_bg.png" mode="widthFix"></image>
+		<view class="m-content-box ddflex">
+			<view>
+				<view class="ddflex m-re-item">
+					<view class="m-re-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</view>
+					<view class="m-re-li dflex">
+						<input v-model="name" placeholder="姓名" maxlength="-1" placeholder-class="m-placeholder" class="m-re-ipt flex" />
+					</view>
+				</view>
+				<view class="ddflex m-re-item">
+					<view class="m-re-label">身份证号</view>
+					<view class="m-re-li dflex">
+						<input v-model="idNumber" placeholder="身份证号" maxlength="-1" placeholder-class="m-placeholder" class="m-re-ipt flex" />
+					</view>
+				</view>
+				<view class="ddflex m-re-item">
+					<view class="m-re-label">证书编号</view>
+					<view class="m-re-li dflex">
+						<input v-model="certificateNo" placeholder="证书编号" maxlength="-1" placeholder-class="m-placeholder" class="m-re-ipt flex" />
+					</view>
+				</view>
+				<view class="m-note ddflex">
+					<image src="/static/images/note.png"></image>
+					<text>任意输入以上两项内容即可查询</text>
+				</view>
+				<view class="m-query-btn" @click="query">
+					立即查询
+				</view>
+			</view>
+		</view>
+		
+		<view style="padding: 30rpx;border-top: 1px solid #1AA1E6;">
+			<view style="text-align: center;">
+				第三方证书查询平台
+			</view>
+			<view class="ddflex" style="justify-content: center;margin-top: 18rpx;flex-wrap: wrap;">
+				<view style="line-height: 2;width: calc(50% - 40rpx);background-color: #fff;padding: 10rpx;box-sizing: border-box;margin: 20rpx"  v-for="item in otherLink" @click="jumpLink(item.link)">{{item.title}}</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
@@ -59,9 +102,34 @@
 			return {
 				name:'',
 				idNumber:'',
-				certificateNo:''
+				certificateNo:'',
+				
+				otherLink:[{
+					title:'国家职业资格证书查询',
+					link:'http://zscx.osta.org.cn/'
+				},{
+					title:'职业技能等级证书查询',
+					link:'http://zscx.osta.org.cn/'
+				},{
+					title:'全联汽车商会证书查询',
+					link:'http://www.cadcc.com.cn/certificate_query.html'
+				},{
+					title:'供销专业技术证书查询',
+					link:'http://www.china-gxjd.org.cn/web/certificate.html'
+				},{
+					title:'工信专项技术证书查询',
+					link:'https://www.miiteec.org.cn/plus/list.php?tid=247'
+				},{
+					title:'专业技术资格证书查询',
+					link:'https://jdcjcwx.jtzyzg.org.cn/JDCJCWX/LEAP/jdcjcwx/html/publicQuery.html#cer'
+				}],
+				
+				systemInfo:{}
 			}
 		},
+		onLoad() {
+			this.systemInfo = uni.getSystemInfoSync()
+		},
 		methods: {
 			query(){
 				let ql = [this.name,this.idNumber,this.certificateNo]
@@ -73,6 +141,9 @@
 						url:'/pages/certificateDetail/certificateDetail'
 					})
 				})
+			},
+			jumpLink(link){
+				window.open(link)
 			}
 		}
 	}