<template>
|
<div class="controlbar-content">
|
<div class="controlbar-control">
|
<button class="controlbar-back" @click="back">上一题</button>
|
<button class="controlbar-next" @click="next">下一题</button>
|
<button class="controlbar-over" @click="over">结束答题</button>
|
</div>
|
<div class="controlbar-number">
|
<span style="margin-left: 4vw;">第{{ mobilequestion.questionIndex + 1 }}/{{mobilequestion.paper.length}}题</span>
|
<span style="color: darkgray;margin-left: 4vw;font-size: 14px;font-weight: 500;">
|
难度
|
</span>
|
<el-rate style="margin-left: 2vw;" v-model="mobilequestion.paper[mobilequestion.questionIndex].level" disabled />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as icon from '@element-plus/icons-vue'
|
import { getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs } from "vue";
|
import wx from "weixin-js-sdk";
|
import { useBasicInfoStore } from "../../../store/basicInfo"
|
import { useMobileQurstionStore } from "../../../store/mobilequestion"
|
|
export default {
|
name: "question",
|
props: {
|
refresh: {
|
type: Function,
|
required: true
|
},
|
},
|
components: {},
|
setup(props) {
|
let { proxy } = getCurrentInstance();
|
const useStore = useBasicInfoStore()
|
const mobilequestion = useMobileQurstionStore()
|
const state = reactive({
|
});
|
|
onMounted(() => {
|
Init();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
const Init = () => {
|
};
|
|
const back = () => {
|
if (mobilequestion.questionIndex > 0) {
|
mobilequestion.questionIndex = mobilequestion.questionIndex - 1
|
|
|
props.refresh()
|
|
}
|
}
|
const next = () => {
|
if (mobilequestion.questionIndex < mobilequestion.paper.length - 1) {
|
mobilequestion.questionIndex = mobilequestion.questionIndex + 1
|
// state.refresh = false;
|
// nextTick(() => {
|
// state.refresh = true;
|
// });
|
props.refresh()
|
|
}
|
}
|
|
const over = () => {
|
wx.miniProgram.navigateBack()
|
}
|
|
|
|
return {
|
...toRefs(state),
|
icon,
|
back,
|
next,
|
over,
|
props,
|
mobilequestion
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
//justify-content: center;
|
}
|
|
.controlbar-content {
|
@extend .center;
|
background-color: #f5f5f5;
|
overflow: auto;
|
width: 100%;
|
}
|
|
.controlbar-control {
|
width: 100%;
|
height: 12vw;
|
background-color: #fff;
|
|
|
.controlbar-back {
|
border-radius: 20px 0px 0px 20px;
|
width: 18vw;
|
height: 8vw;
|
float: left;
|
background-color: #11999e;
|
margin-left: 4vw;
|
margin-top: 2vw;
|
color: #fff;
|
border: 0px;
|
}
|
|
.controlbar-next {
|
border-radius: 0px 20px 20px 0px;
|
width: 18vw;
|
height: 8vw;
|
float: left;
|
background-color: #f38181;
|
margin-top: 2vw;
|
color: #fff;
|
border: 0px;
|
}
|
|
.controlbar-over {
|
border-radius: 20px;
|
width: 20vw;
|
height: 8vw;
|
float: right;
|
background-color: #f73859;
|
margin-top: 2vw;
|
margin-right: 4vw;
|
color: #fff;
|
border: 0px;
|
}
|
}
|
|
.controlbar-number {
|
width: 100vw;
|
height: 10vw;
|
background-color: #f5f5f5;
|
text-align: left;
|
font-weight: 550;
|
// line-height: 10vw;
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
