Skip to content

S
self-support
Commit 26039978 authored by Facius's avatar Facius
Browse files
Options

入驻考试页面高保真

parent 0fb0c16a
Show whitespace changes
Inline Side-by-side
Showing with 864 additions and 792 deletions
src/pages.json
View file @ 26039978
...@@ -145,7 +145,9 @@ ...@@ -145,7 +145,9 @@
{ {
"path": "pages/exam/index", "path": "pages/exam/index",
"style": { "style": {
"navigationBarTitleText": "入驻考试" "navigationBarTitleText": "入驻考试",
"navigationStyle": "custom",
"disableScroll": true
} }
}, },
{ {
...@@ -227,8 +229,8 @@ ...@@ -227,8 +229,8 @@
"query": "" //启动参数，在页面的onLoad函数里面得到 "query": "" //启动参数，在页面的onLoad函数里面得到
}, },
{ {
"name": "在线考试-old", //模式名称 "name": "入驻考试", //模式名称
"path": "pages/exam/start", //启动页面，必选 "path": "pages/exam/index", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到 "query": "" //启动参数，在页面的onLoad函数里面得到
}, },
{ {
......
src/pages/exam/index.vue
View file @ 26039978
<template> <template>
<view class="backView"> <view class="backView">
<template v-if="isStart==false"> <Settle :index="2">
<!-- <template v-if="isStart==false">
<view class="noticeView"> <view class="noticeView">
<text class="noticeText">规则：系统随机出现20道考试题目，每道题5分，每题答题时间100秒，在规定时间内答对题目的记分。 <text class="noticeText">规则：系统随机出现20道考试题目，每道题5分，每题答题时间100秒，在规定时间内答对题目的记分。
</text> </text>
...@@ -10,37 +11,45 @@ ...@@ -10,37 +11,45 @@
<text class="bottomTitle">开始考试答题</text> <text class="bottomTitle">开始考试答题</text>
</view> </view>
</view> </view>
</template> </template> -->
<template v-if="isStart==true && currentItem"> <!-- <template v-if="isStart==true && currentItem"> -->
<view class="bottom-padding"> <view class="bottom-padding" v-if="currentItem">
<view class="numberView"> <view class="title-view">
<text class="numberText">{{progress}}</text> <view class="title-text">
<text>{{ titleText[Math.max(0, currentItem.question.answerType - 1)] }}</text>
</view>
<view class="title-right-view">
<image class="timeIcon" src="/static/settle/time1@3x.png" mode=""></image>
<text class="timeText">倒计时：</text><text class="time-count-down">{{currentTime}}</text>
</view>
</view> </view>
<view class="topicView"> <view class="topicView">
<text class="topicText">{{currentItem.question.content}}</text> <text class="topicText">{{currentItem.question.content}}</text>
</view> </view>
<view class="itemBackView" v-for="(item,ikey) in currentItem.answerList" :key="ikey"> <view :class="['itemView',item.isSelect ? 'active':'']" v-for="(item,ikey) in currentItem.answerList" :key="ikey" @click="itemClick(item,ikey)">
<view :class="['itemView',item.isSelect ? 'active':'']" @click="itemClick(item,ikey)">
<view :class="item.isSelect ? 'itemIndexView' : 'itemIndexView grayBorder' "> <view :class="item.isSelect ? 'itemIndexView' : 'itemIndexView grayBorder' ">
<text :class="item.isSelect ? 'itemIndexText whiteColor selectBackColor' : 'itemIndexText defaultColor' "> <text
:class="item.isSelect ? 'itemIndexText whiteColor selectBackColor' : 'itemIndexText gray-color' ">
{{alphaArr[ikey]}} {{alphaArr[ikey]}}
</text> </text>
</view> </view>
<text :class="item.isSelect ? 'itemText selectedColor' : 'itemText defaultColor' ">{{contentFilter(item.content)}}</text> <view
<!--view></view--> :class="item.isSelect ? 'itemText selectedColor' : 'itemText defaultColor' ">{{contentFilter(item.content)}}</view>
</view>
</view> </view>
<!--view class="itemView" v-for="(item,ikey) in currentItem.answerList":key="ikey"> <!--view class="itemView" v-for="(item,ikey) in currentItem.answerList":key="ikey">
<text :class="item.isSelect ? 'itemText selectedColor' : 'itemText defaultColor' " <text :class="item.isSelect ? 'itemText selectedColor' : 'itemText defaultColor' "
@click="itemClick(item,ikey)">{{item.content}}</text> @click="itemClick(item,ikey)">{{item.content}}</text>
</view--> </view-->
</view>
<!-- </template> -->
<template v-slot:bottom>
<view class="answerBottomView"> <view class="answerBottomView">
<view class="bottomLeftView"> <view class="bottom-left-view">
<image class="timeIcon" :src="clock_url" mode=""></image> <image class="bottom-icon" src="/static/settle/timu@3x.png" mode=""></image>
<text class="timeText">倒计时：{{currentTime}}</text> <text class="numberText">{{progress}}</text>
</view> </view>
<view class="bottomRightView"> <view class="bottomRightView">
<view :class="isSelect ? 'nextBtn selectBackColor' : 'nextBtn defaultBackColor' " <view :class="isSelect ? 'nextBtn selectBackColor' : 'nextBtn defaultBackColor' "
...@@ -50,12 +59,11 @@ ...@@ -50,12 +59,11 @@
</view> </view>
</view> </view>
</view>
</template> </template>
</Settle>
<view class="mask" v-show="isComplete"> <view class="mask" v-show="isComplete">
<view class="box"> <view class="box">
<image class="icon" src="@/static/settle/icon-success.png"></image> <image class="icon" src="../../static/settle/chenggong@3x.png"></image>
<view class="txt">您已成功完成考试</view> <view class="txt">您已成功完成考试</view>
<button class="btn" @click="$u.debounce(goSignContract, 500)"> <button class="btn" @click="$u.debounce(goSignContract, 500)">
去提交 去提交
...@@ -66,10 +74,14 @@ ...@@ -66,10 +74,14 @@
</template> </template>
<script> <script>
import Settle from '@/components/settle/index.vue'
const globalUrl = process.uniEnv || {} const globalUrl = process.uniEnv || {}
const systemApiUrl = globalUrl.systemUrl.apiUrl const systemApiUrl = globalUrl.systemUrl.apiUrl
const ucenterApiUrl = globalUrl.ucenterUrl.apiUrl const ucenterApiUrl = globalUrl.ucenterUrl.apiUrl
export default { export default {
components: {
Settle
},
data() { data() {
return { return {
examId: 2, examId: 2,
...@@ -83,11 +95,16 @@ ...@@ -83,11 +95,16 @@
progress: '', progress: '',
bottomTitle: '下一题', bottomTitle: '下一题',
isStop: false, isStop: false,
clock_url:'https://qn-static.banshouhui.com/clock_exam.png', clock_url: 'https://qn-static.banshouhui.com/clock_exam.png',
examScore:0, examScore: 0,
alphaArr:['A','B','C','D','E'], alphaArr: ['A', 'B', 'C', 'D', 'E'],
timer:null, timer: null,
isComplete:false, // 是否已经考试完成判定 isComplete: false, // 是否已经考试完成判定
}
},
computed: {
titleText() {
return ['单选', '多选', '问答']
} }
}, },
onLoad(e) { onLoad(e) {
...@@ -98,18 +115,18 @@ ...@@ -98,18 +115,18 @@
}, },
methods: { methods: {
goSignContract(){ goSignContract() {
const url = '/pages/settle/prompt' const url = '/pages/settle/prompt'
uni.navigateTo({ uni.navigateTo({
url url: url + '?pageIndex=' + '3'
}) })
}, },
contentFilter(txt){ contentFilter(txt) {
if(!txt){ if (!txt) {
return txt return txt
} }
let reg = /\w+\.?/; let reg = /\w+\.?/;
const result = txt.replace(reg,'') const result = txt.replace(reg, '')
return result return result
}, },
//开始考试 点击 //开始考试 点击
...@@ -160,14 +177,14 @@ ...@@ -160,14 +177,14 @@
that.applyExam() that.applyExam()
return return
} }
if(res.data.data.examStatus == 1){ if (res.data.data.examStatus == 1) {
console.log('111111111111111111111111111') console.log('111111111111111111111111111')
that.isComplete = true that.isComplete = true
that.examScore = res.data.data.examScore that.examScore = res.data.data.examScore
that.postResult() that.postResult()
return return
} }
if (res.data.data.examStatus == 0 ) { if (res.data.data.examStatus == 0) {
that.userExamId = res.data.data.id that.userExamId = res.data.data.id
that.getNext() that.getNext()
} }
...@@ -301,6 +318,8 @@ ...@@ -301,6 +318,8 @@
that.handleData() that.handleData()
that.currentTime = 100 that.currentTime = 100
that.currentTime = 10000
that.isSelect = false that.isSelect = false
clearTimeout(this.timer) clearTimeout(this.timer)
that.startCounting() that.startCounting()
...@@ -338,9 +357,9 @@ ...@@ -338,9 +357,9 @@
handleData: function() { handleData: function() {
this.currentItem.answerList.forEach((item,index) => { this.currentItem.answerList.forEach((item, index) => {
item.isSelect = false item.isSelect = false
this.$set(this.currentItem.answerList,index,item) this.$set(this.currentItem.answerList, index, item)
}) })
}, },
...@@ -395,7 +414,7 @@ ...@@ -395,7 +414,7 @@
} }
} }
this.$set(this.currentItem.answerList[i],isSelect,item.isSelect) this.$set(this.currentItem.answerList[i], isSelect, item.isSelect)
} }
...@@ -420,7 +439,7 @@ ...@@ -420,7 +439,7 @@
nextClick: function() { nextClick: function() {
//判断有没有选 //判断有没有选
if (!this.isSelect){ if (!this.isSelect) {
return return
} }
...@@ -433,18 +452,18 @@ ...@@ -433,18 +452,18 @@
}, },
//上传考试结果 //上传考试结果
postResult: function () { postResult: function() {
uni.showLoading({ uni.showLoading({
title: '请稍候' title: '请稍候'
}) })
let that = this let that = this
uni.request({ uni.request({
url: ucenterApiUrl+'/v1/settled/update-settled-exam-score' url: ucenterApiUrl + '/v1/settled/update-settled-exam-score' +
+'?access-token='+getApp().globalData.token, '?access-token=' + getApp().globalData.token,
method: 'POST', method: 'POST',
data: { data: {
score:this.examScore || 0, score: this.examScore || 0,
}, },
success: (res) => { success: (res) => {
uni.hideLoading() uni.hideLoading()
...@@ -509,7 +528,7 @@ ...@@ -509,7 +528,7 @@
//this.userAnswerIds = item.id + ',' + this.userAnswerIds //this.userAnswerIds = item.id + ',' + this.userAnswerIds
//answerType 题目类型，1单选，2多选，3简答， //answerType 题目类型，1单选，2多选，3简答，
if (this.currentItem.question.answerType== 2){//多选 if (this.currentItem.question.answerType == 2) { //多选
///* ///*
...@@ -521,7 +540,7 @@ ...@@ -521,7 +540,7 @@
//*/ //*/
}else{//单选 } else { //单选
this.userAnswerIds = item.id this.userAnswerIds = item.id
} }
...@@ -548,11 +567,12 @@ ...@@ -548,11 +567,12 @@
<style lang="scss"> <style lang="scss">
.backView { .backView {
background-color: #F3F3F3; background-color: #F4F5F7;
// position: absolute; position: absolute;
// top: 0; top: 0;
// left: 0; left: 0;
// width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
...@@ -585,45 +605,45 @@ ...@@ -585,45 +605,45 @@
} }
.topicView { .topicView {
margin-top: 60rpx; margin-top: 40rpx;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 40rpx;
} }
.topicText { .topicText {
color: #333333; color: #333333;
font-size: 36rpx; font-size: 32rpx;
padding-left: 28rpx;
padding-right: 36rpx;
padding-bottom: 20rpx;
line-height: 48rpx; line-height: 48rpx;
font-weight: bold; font-weight: bold;
} }
.itemBackView { // .itemBackView {
margin-top: 40rpx; // margin-top: 30rpx;
width: 100%; // width: 100%;
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
} // }
.itemView { .itemView {
background-color: #FFFFFF; margin-top: 30rpx;
width: 690rpx; background-color: #F4F5F7;
width: 100%;
padding: 40rpx 30rpx;
display: flex; display: flex;
flex-direction: row; align-items: flex-start;
align-items: center;
border-radius: 12rpx; border-radius: 12rpx;
border:2rpx solid transparent; border: 2rpx solid transparent;
&.active{ font-size: 28rpx;
border:2rpx solid #2272FF; &.active {
background-color: #FFFFFF;
border: 2rpx solid #2272FF;
} }
} }
.itemIndexView { .itemIndexView {
margin-left: 30rpx;
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
border-radius: 8rpx; border-radius: 8rpx;
...@@ -631,12 +651,17 @@ ...@@ -631,12 +651,17 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink:0
} }
.grayBorder{ .grayBorder {
border: 2rpx solid #999999; border: 2rpx solid #999999;
} }
.gray-color {
color: #999999;
}
.itemIndexText { .itemIndexText {
border-radius: 8rpx; border-radius: 8rpx;
width: 36rpx; width: 36rpx;
...@@ -650,9 +675,6 @@ ...@@ -650,9 +675,6 @@
.itemText { .itemText {
margin-left: 20rpx; margin-left: 20rpx;
font-size: 28rpx; font-size: 28rpx;
padding-top: 40rpx;
padding-bottom: 40rpx;
padding-right: 40rpx;
} }
.bottomView { .bottomView {
...@@ -681,69 +703,87 @@ ...@@ -681,69 +703,87 @@
color: #FFFFFF; color: #FFFFFF;
} }
.answerBottomView { // .answerBottomView {
background-color: #FFFFFF; // background-color: #FFFFFF;
width: 100%; // width: 100%;
height: 200rpx; // height: 200rpx;
// display: flex;
// flex-direction: row;
// align-items: center;
// justify-content: space-between;
// position: fixed;
// bottom: 0;
// }
.title-view {
display: flex; display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
position: fixed; align-items: center;
bottom: 0;
}
.bottomLeftView{ .title-text {
height: 160rpx; border-radius: 8rpx;
background-color: #FF930D;
font-size: 20rpx;
color: #FFFFFF;
width: 72rpx;
height: 40rpx;
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
justify-content: center;
} }
.bottomRightView{ .title-right-view {
height: 160rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
}
.timeIcon { .timeIcon {
margin-left: 30rpx; margin-right: 12rpx;
width: 48rpx; width: 32rpx;
height: 48rpx; height: 32rpx;
} }
.timeText { .timeText {
margin-left: 10rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333333; color: #333333;
} }
.time-count-down {
width: 80rpx;
text-align: right;
}
}
}
.bottomRightView {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 30rpx;
}
.nextBtn { .nextBtn {
width: 400rpx; width: 300rpx;
height: 104rpx; height: 104rpx;
border-radius: 52rpx; border-radius: 52rpx;
margin-right: 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.defaultColor { .defaultColor {
background-color: #FFFFFF; color: #333333;
color: #999999;
} }
.defaultBackColor { .defaultBackColor {
background-color: #999999; background-color: #D1D4D4;
} }
.selectedColor { .selectedColor {
color: #2272FF; color: #2272FF;
} }
.whiteColor{ .whiteColor {
color: #FFFFFF; color: #FFFFFF;
} }
...@@ -752,9 +792,35 @@ ...@@ -752,9 +792,35 @@
} }
.bottom-padding { .bottom-padding {
padding-bottom: 180rpx; margin-bottom: 188rpx;
background-color: #FFFFFF;
border-radius: 12rpx;
padding: 40rpx 30rpx 46rpx 30rpx;
}
.answerBottomView {
display: flex;
align-items: center;
justify-content: space-between;
.bottom-left-view {
display: flex;
align-items: center;
margin-left: 30rpx;
.bottom-icon {
width: 44rpx;
height: 44rpx;
}
.numberText {
color: #666666;
font-size: 32rpx;
margin-left: 30rpx;
}
}
} }
.mask{
.mask {
position: fixed; position: fixed;
left: 0; left: 0;
width: 100%; width: 100%;
...@@ -763,30 +829,34 @@ ...@@ -763,30 +829,34 @@
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
} }
.box{
.box {
width: 660rpx; width: 660rpx;
height:696rpx; height: 696rpx;
padding:0 70rpx; padding: 0 70rpx;
border-radius: 12rpx; border-radius: 12rpx;
background-color: #fff; background-color: #fff;
.icon{
margin:80rpx auto 0 ; .icon {
margin: 80rpx auto 0;
display: block; display: block;
width:192rpx; width: 224rpx;
height:192rpx; height: 224rpx;
} }
.txt{
margin-top:78rpx; .txt {
margin-bottom:98rpx; margin-top: 20rpx;
margin-bottom: 98rpx;
font-weight: bold; font-weight: bold;
font-size: 48rpx; font-size: 40rpx;
line-height:66rpx ; line-height: 66rpx;
color: #666; color: #2272FF;
text-align: center; text-align: center;
} }
.btn{
.btn {
line-height: 104rpx; line-height: 104rpx;
border-radius: 52rpx; border-radius: 52rpx;
background: #2272ff; background: #2272ff;
......
src/pages/settle/pay-ensure.vue
View file @ 26039978
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
methods: { methods: {
successCallback() { successCallback() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/settle/prompt' url: '/pages/settle/prompt' + '?pageIndex=' + '4'
}) })
}, },
async getBaseInfo() { async getBaseInfo() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment