hz-zhhq-app/pages/exam/examDetail.vue

803 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="container">
<!--
<view class="banner-box">
<image v-if="currentTabIndex == 0" src="/static/imgs/visitor.png" mode=""></image>
<image v-if="currentTabIndex == 3" src="/static/imgs/visitor.png" mode=""></image>
</view> -->
<view class="main">
<!-- <view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">考试列表</view>
<view class="tab-item" :class="currentTabIndex == 3 ? 'active' : ''" @click="currentTabIndex = 3">考试记录</view>
</view> -->
<!-- 访客预约表单 -->
<view v-if="currentTabIndex == 0">
<view style="margin-bottom:2upx; padding-bottom: 10upx;" class="list-item form-box" v-for="(item,index) in examlist" :key="index">
<radio-group @change="radioChange" :data-id="item.projectId" v-if="item.type == 0">
<view style="padding: 10upx 0upx 10upx 0upx;font-size: 26upx;"> {{index+1}}{{item.subject}}
</view>
<label v-if="item.optionA != null" class="uni-list-cell uni-list-cell-pd breakLine" >
<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
<radio style="transform:scale(0.8)" value="A"/>
</view>
<view class="fs30" style="display: inline-block;font-size: 22upx;">A {{item.optionA}}</view>
</label>
<label v-if="item.optionB != null" class="uni-list-cell uni-list-cell-pd breakLine" >
<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
<radio style="transform:scale(0.8)" value="B"/>
</view>
<view class="fs30" style="display: inline-block;font-size: 22upx;">B {{item.optionB}}</view>
</label>
<label v-if="item.optionC != null" class="uni-list-cell uni-list-cell-pd breakLine" >
<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
<radio style="transform:scale(0.8)" value="C"/>
</view>
<view class="fs30" style="display: inline-block;font-size: 22upx;">C {{item.optionC}}</view>
</label>
<label v-if="item.optionD != null" class="uni-list-cell uni-list-cell-pd breakLine" >
<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
<radio style="transform:scale(0.8)" value="D"/>
</view>
<view class="fs30" style="display: inline-block;font-size: 22upx;">D {{item.optionD}}</view>
</label>
<label v-if="item.optionE != null && item.optionE != ''" class="uni-list-cell uni-list-cell-pd breakLine" >
<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
<radio style="transform:scale(0.8)" value="E"/>
</view>
<view class="fs30" style="display: inline-block;font-size: 22upx;">E {{item.optionE}}</view>
</label>
<!-- <view class="xx" v-if="item.optionA != null"><radio value="A" /> A{{item.optionA}}
</view>
<view class="xx" v-if="item.optionB != null"> <radio value="B" />B{{item.optionB}}
</view>
<view class="xx" v-if="item.optionC != null"> <radio value="C" />C{{item.optionC}}
</view>
<view class="xx" v-if="item.optionD != null"><radio value="D" />D{{item.optionD}}
</view>
<view class="xx" v-if="item.optionE != null && item.optionE != ''"> <radio :value="E" />E {{item.optionE}}
</view> -->
</radio-group>
<checkbox-group @change="checkboxChange" :data-id="item.projectId" v-else-if="item.type == 1">
<!-- <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<view>
<checkbox :value="item.value" :checked="item.checked" />
</view>
<view>{{item.name}}</view>
</label> -->
<view style="padding: 10upx 0upx 10upx 0upx;font-size: 26upx;"> {{index+1}}{{item.subject}}</view>
<view class="xx" v-if="item.optionA != null"><checkbox value="A" /> A{{item.optionA}}
</view>
<view class="xx" v-if="item.optionB != null"> <checkbox value="B" />B{{item.optionB}}
</view>
<view class="xx" v-if="item.optionC != null"> <checkbox value="C" />C{{item.optionC}}
</view>
<view class="xx" v-if="item.optionD != null"><checkbox value="D" />D{{item.optionD}}
</view>
<view class="xx" v-if="item.optionE != null && item.optionE != ''"> <checkbox :value="E" />E {{item.optionE}}
</view>
</checkbox-group>
</view>
<view v-if="currentTabIndex == 0 && examlist.length>0">
<view class="occupied"></view>
<view class="footer-btn"><view class="btn" @click="submit">提交</view></view>
</view>
</view>
<!-- 预约记录列表 -->
<view class="list-box" v-if="currentTabIndex == 3">
<view class="list-item" v-for="(item,index) in list" :key="index" >
<view class="form-item" style="width: 100%;margin: 10upx 0upx 10upx 0upx;padding: 14upx 0upx;">
<view class="visitcon w35">名称</view>
<view class="visitcon w35">时间</view>
<view class="visitcon w30">分数</view>
</view>
<view>
<view class="visitcon w35" >{{ item.examName }}</view>
<view class="visitcon w35" >{{ item.examTime }}</view>
<view class="visitcon w30">{{ item.fraction }}</view>
</view>
</view>
</view>
<!-- 预约记录列表 -->
<view class="list-box" v-if="currentTabIndex == 4">
<view class="list-item" v-for="(item,index) in list" :key="index"
@click='toDetail("/pages/visitorInvited/visitorInvited?id="+item.detail_id+"&userId="+userId)'>
<view class="title">
<text class="line"></text>
<text class="text">被邀记录</text>
<text class="status2" v-if="item.current_status.charAt(item.current_status.length-1)==0">待审核</text>
<text class="status" v-if="item.current_status==1">已同意</text>
<text class="status1" v-if="item.current_status==2">已拒绝</text>
<text class="status1" v-if="item.current_status==3">待本人确认</text>
<text class="status1" v-if="item.current_status==4">已取消</text>
</view>
<view class="content">
<view class="info-item">
<view class="fl-text">被访人:</view>
<view class="fr-text">{{item.visited_person_name}}</view>
</view>
<view class="info-item">
<view class="fl-text">被访时间:</view>
<view class="fr-text">{{item.visit_start_time}}</view>
</view>
<view class="info-item">
<view class="fl-text">主访人:</view>
<view class="fr-text">{{item.visitor_name}}</view>
</view>
<view class="info-item">
<view class="fl-text">申请时间:</view>
<view class="fr-text">{{item.apply_time}}</view>
</view>
<!-- <view class="comment-btn" @click.stop="del(item.detail_id,4,index)">删除</view> -->
</view>
</view>
</view>
<content-none v-if="currentTabIndex != 0 && list.length == 0" :padTop="20"></content-none>
</view>
<uni-calendar
ref="calendar"
:insert="false"
@confirm="confirm"
>
</uni-calendar>
<uni-calendar
ref="calendar2"
:insert="false"
@confirm="confirm2"
>
</uni-calendar>
<load-more v-show="currentTabIndex == 3 || currentTabIndex == 4"
:loadingType="loadingType" :contentText="contentText"></load-more>
</view>
</template>
<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import {getExamList,getExamDetail,saveExam,getMyExamAnswerList,greenVisitorInfo,getOrargs,getAllDept} from '@/common/api.js';
import {callbackRequest,convertImgToBase64,alertTip,getStorage,formatDate,setStorage} from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import datetimePicker from '@/components/dateTime.vue';
import xflSelect from '@/components/xfl-select/xfl-select.vue'
//import test from '@/js_sdk/leiqch-exif/exif/exif.js'
let currentTime = new Date().getTime();
let millisecond = 24 * 7 * 60 * 60 * 1000; // 七天
let tenMin = 10 * 60 * 1000; // 十分钟
let twoHtenMin = 2*60 * 60 * 1000 +tenMin; // 两小时十分钟
export default {
data() {
return {
userId:getStorage('userInfo').userId,//登录用户id
examlist:[],
examId :'1',
myexam:{},
selectedTime:"",
currentTabIndex:0,
page:1,
page3:1,
page4:1,
pageSize:5,
deptList: ['科技楼', '物业楼'],
departmentIndex: 0, //选择的地点下标
deptmentList: [{name:"请选择..."}], //部门列表
deptmentListIndex:0,
num:[{}],
number:0,
button_text:"提交预约",
role:1,
list:[],
list2:[],
orgName:'',
visitPlace:"0",
visitedPersonName:"",
visitedPersonTel:"",
visitStartTime:"",
visitEndTime:"",
visitReason:"",
zhu_visitorName:getStorage('userInfo').username,
zhu_visitorTel:getStorage('userInfo').telnumber,
zhu_idcard:getStorage('userInfo').idnumber,
zhu_orgName:getStorage('userInfo').orgName,
imgs:[],//用户上传的图片
identityAuth:getStorage('userInfo').identityAuth,
idCard_imgs:[],
loadingType:0,//0-loading前1-loading中2-没有更多了
loadingType2:0,//0-loading前1-loading中2-没有更多了
contentText: {
contentdown: "上拉加载更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
},
defaultMinDate: currentTime,// 最小时间
minTime: '00:00',
defaultMaxDate: new Date(currentTime+millisecond).getTime(),// 最大时间
maxTime: '24:00',
defaultBeginTime: formatDate(currentTime+tenMin,'mTime'), // 默认来访时间
defaultEndTime: formatDate(currentTime+twoHtenMin,'mTime'), // 默认结束时间
list_dep:[],
finalList:[],
showList:false,
submitFlag:true,
items: [{
value: '0',
name: '普通访客',
checked: 'true'
},
{
value: '1',
name: '参会人员',
},
],
appointmentType:0,
isCar:0,
licensePlate:'',
}
},
components: {
uniCalendar,
loadMore,
datetimePicker,
contentNone,
xflSelect
},
created() {
var param = getStorage('userInfo').face_Pic1;
this.getExamList()
this.myexam = new Map();
if(param!=""){
this.imgs.push(param);
// var p1 = param.split(":80")[1];
// p1="http://zhhq.cdzywpt.cn:80"+p1;
// //param.replace("http://47.99.190.179:80/","http://zhhq.cdzywpt.cn/");
// convertImgToBase64(p1, function(base64) {
// console.log(base64);
// this.imgs.push(base64)
// });
}
},
onLoad(option) {
this.examId =option.examId;
this.getDepartment();
},
watch:{
currentTabIndex:function(newVal,oldVal){
}
},
methods: {
radioChange: function(e) {
this.myexam.set(e.currentTarget.dataset.id, e.target.value);
// this.myexam[e.currentTarget.dataset.id] = e.target.value; // 新增键值对
},
getExamList(){
var data = {userId:this.userId,uuid:this.examId};
let params = {
"method": getExamDetail,
"data": data
};
self = this;
console.log(" === ", data.userId);
callbackRequest(params)
.then(res =>{
if(res.data.returnCode == 1){
let result = res.data.returnData.list;
console.log(' -result- ',result);
self.examlist = result;
}else {
alertTip(res.data.returnMsg);
}
})
},
checkboxChange: function (e) {
this.myexam.set(e.currentTarget.dataset.id, e.detail.value.toString());
},
toDetail(url){
uni.navigateTo({
url
})
},
confirm(e) {
this.selectedTime = e.fulldate;
},
open(type){
if(type == 1){
this.$refs.calendar.open();
}else{
this.$refs.calendar2.open();
}
},
addBtn(){
// var o = {flag:1}
// this.num.push(o);
// this.number++;
var o = {
zvisitorName:"",
visitorTel:"",
idcard:"",
flag:1
}
this.num.push(o);
this.number++;
},
jianBtn(index){
this.num[index].flag = 0;
this.number--;
},
getDepartment() {
let data = {
method: getAllDept,
data: {}
};
callbackRequest(data).then(res => {
if (res.data.returnCode == 1) {
// console.log("---",res.data.returnData);
this.deptmentList = this.deptmentList.concat(res.data.returnData);
}
});
},
submit(){
var data1 = this.myexam;
var inde = data1.size;
if(inde != this.examlist.length){
alertTip("请做完所有题目后再提交。");
}else{
self = this;
var answer = "";
for( var key in this.myexam){
var dvalue = this.myexam[key]
var dataa = Array.from(dvalue);
for(var i= 0; i<dataa.length ;i++){
var dvalue2 = dataa[i]
// console.log("---",dvalue2[0]+"----->"+dvalue2[1]);
if(i == dataa.length-1){
answer += dvalue2[1];
}else{
answer += dvalue2[1] +"&";
}
}
}
let params = {
"method": saveExam,
"data": {answer:answer,userId:this.userId,examId:this.examId}
};
uni.showModal({
title: '提示',
content: "确定要提交么",
success: function(res){
if (res.confirm) {
// var data = {userId:this.userId,uuid:this.examId};
// console.log(" === ", data.userId);
callbackRequest(params)
.then(res =>{
if(res.data.returnCode == 1){
// let result = res.data.returnData.list;
// console.log(' -result- ',result);
// self.examlist = result;
alertTip('提交成功');
setTimeout(function() {
uni.navigateTo({
url: '/pages/exam/exam'
});
}, 1500);
}else {
alertTip(res.data.returnMsg);
}
})
}
}
})
}
},
//主访客上传图片
chooseImg(){
let _this = this;
uni.chooseImage({
count:2,
success:res => {
let param = "";
let imgArr = res.tempFilePaths
for (var i = 0; i < imgArr.length; i++) {
param = imgArr[i];
//convertImgToBase64(param, function(base64) {
var EXIF=require('@/js_sdk/leiqch-exif/exif/exif.js');
var image = new Image();
image.onload = function() {
EXIF.getData(image, function() {
_this.resetOrientation(param,EXIF.getTag(this, 'Orientation'),function(base64Correct){
_this.imgs.push(base64Correct)
});
});
};
image.src = param;
//})
}
}
})
},
idCard_chooseImg(){
let _this = this;
uni.chooseImage({
count:2,
success:res => {
let param = "";
let imgArr = res.tempFilePaths
for (var i = 0; i < imgArr.length; i++) {
param = imgArr[i];
convertImgToBase64(param, function(base64) {
_this.idCard_imgs.push(base64)
})
}
}
})
},
//删除图片
removeImg(index){
this.imgs.splice(index,1);
},
removeIdCardImg(index){
this.idCard_imgs.splice(index,1);
},
del(id,val,index){
// console.log(id,val);
let params = {
"method": greenVisitorInfo,// 申请的删除
"data": {userId:this.userId,applyId:id,applyType:"3"}//分三种情况
};
callbackRequest(params)
.then(res =>{
// console.log(res);
//刷新页面
if(res.data.returnMsg == "删除成功"){
if(val == 3){
this.list.splice(index,1);
}else{
this.list2.splice(index,1);
}
alertTip(res.data.returnMsg);
}else{
alertTip(res.data.returnMsg);
}
})
}
},
onReachBottom() {
if (this.loadingType !== 0 || this.currentTabIndex == 0) {
return;
}
this.loadingType = 1;
this.page = this.page + 1;
this.getMyList();
},
}
</script>
<style lang="scss">
@import '@/static/css/common.scss';
page{
// background: #f8f8f8;
}
.breakLine{
display: block;
}
.xx{
padding: 10upx 0upx 10upx 0upx;font-size: 26upx;transform:scale(0.8)
}
.w30 {
width: 30%;
}
.w35 {
width: 35%;
}
.w15 {
width: 15%;
}
.w33 {
width: 33.3%;
}
.w45 {
width: 45%;
}
.visitcon {
display: inline-block;
text-align: center;
font-size: 14px;
}
.visitconContent {
text-decoration: underline;
display: inline-block;
text-align: center;
font-size: 14px;
}
.container{
position:relative;
overflow:hidden;
background: #f8f8f8;
min-height:100vh;
.banner-box{
width:100%;
height:240upx;
position:absolute;
top:0;
left:0;
image{
width:100%;
height:100%;
}
}
.main{
margin:20upx 40upx 0;
position:relative;
z-index:10;
.tab-box{
overflow:hidden;
border-radius:10upx 10upx 0 0;
background: rgba(132,149,167,0.8);
height:70upx;
.tab-item{
float:left;
height:70upx;
width:50%;
font-size:30upx;
color:#e5f6ff;
text-align:center;
line-height:70upx;
}
.active{
background: #fff;
color:#333;
border-radius:10upx 10upx 0 0;
font-weight:bold;
}
}
.form-box{
padding:20upx 30upx 0upx;
margin-bottom: 20upx;
background: #fff;
.form-item{
overflow:hidden;
border-bottom:1px solid #eee;
padding:30upx 0;
.label{
float:left;
width:150upx;
font-size:28upx;
color:#333;
font-weight:bold;
line-height:50upx;
}
.ipt-box{
margin-left:160upx;
input{
width:100%;
height:50upx;
line-height:50upx;
font-size:26upx;
color:#666;
}
.pic{
width:60upx;
height:60upx;
line-height: 80upx;
}
}
.select{
.arrow{
float:right;
width:16upx;
height:29upx;
margin-top:10upx;
}
input{
width:70%;
}
}
.jian{
width: 50upx;
height:50upx;
margin-left: 280upx;
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
}
.upload-box{
.label{
float:none;
}
.img-box{
overflow:hidden;
padding-top:25upx;
.img-item{
float:left;
width:210upx;
height:210upx;
border:1px solid #ddd;
margin:0 20upx 20upx 0upx;
position:relative;
.img{
display:block;
width:100%;
height:100%;
}
.remove-btn{
position:absolute;
top:-18upx;
right:-18upx;
width:44upx;
height:44upx;
z-index:2;
}
}
.upload-btn{
.img{
width:60upx;
height:60upx;
margin:75upx auto 0;
}
}
}
}
.sure-btn{
width:100%;
height:80upx;
font-size:28upx;
color:#fff;
text-align:center;
line-height:80upx;
border-radius:8upx;
background: #0066CC;
background:linear-gradient(to right, #ffc200,#ff9000);/*设置按钮为渐变颜色*/
margin-top:50upx;
}
}
.form-box .form-item:last-child{
border-bottom:0px;
}
.list-box{
.list-item{
background: #fff;
margin-bottom:10upx;
.title{
border-bottom:1px solid #eee;
padding:20upx 10upx;
overflow:hidden;
line-height:40upx;
.line{
display:inline-block;
width:10upx;
height:32upx;
background: $assistColor;
margin-top:4upx;
}
.text{
display:inline-block;
font-size:28upx;
color:#444;
font-weight:bold;
margin-left:10upx;
vertical-align:top;
}
.status{
font-size:26upx;
color:$assistColor;
float:right;
}
.status1{
font-size:26upx;
color:#5063c3;
float:right;
}
.status2{
font-size:26upx;
color:red;
float:right;
}
}
.content{
padding:10upx 20upx;
// padding:10upx 10upx 60upx 10upx;
.info-item{
overflow: hidden;
padding-bottom:10upx;
.fl-text{
float:left;
font-size:26upx;
color:#444;
font-weight:bold;
line-height:40upx;
}
.fr-text{
float:right;
font-size:26upx;
color:#666;
line-height:40upx;
}
}
}
.comment-btn {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
line-height: 50upx;
text-align: center;
min-width: 140upx;
background-color: #00c277;
}
}
}
}
}
#addbtn{
height: 100upx;
background-color: #FFFFFF;
border-radius: 20upx;
color: #333333;
position: relative;
margin-top: 20upx;
line-height:100upx;
text-align:center;
text{
font-size: 38upx;
color: #00c277;
}
}
.addbtn view text:nth-child(1){
font-size: 38upx;
color: #00c277;
}
.addbtn view text:nth-child(2){
font-size: 32upx;
color: #00c277;
}
.tips{
font-size: 22upx;
// margin-left: 80upx;
margin-top: 20upx;
}
</style>