<template>
|
<div class="demography">
|
<div hidden>{{goLangType}}</div>
|
<el-form class="align-center" style="padding: 3%">
|
<h1 v-bind:class="{langKaiStyle : isLangKaiStyle}">{{langWelcome}}</h1>
|
<h3 v-bind:class="{langKaiStyle : isLangKaiStyle}" style="color: #3a8ee6">{{langOption}}</h3>
|
<el-select v-model="langSelectValue" :placeholder= "$t('pleaseSelect')" style="width: 55%">
|
<el-option
|
v-for="itemIter in langTypes"
|
:key="itemIter.dictValue"
|
:label="itemIter.dictValue"
|
:value="itemIter.dictValue">
|
</el-option>
|
</el-select>
|
<el-footer class="do-align-center">
|
<el-button @click="submitLangOption" type="danger">{{submissionLang}}</el-button>
|
</el-footer>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import demographyApi from '@/api/demography'
|
import { mapMutations, mapState } from 'vuex'
|
// import examPaperApi from '@/api/examPaper'
|
// import QuestionEdit from "./childCompoment/QuestionEdit";
|
import examPaperApi from '@/api/examPaper'
|
|
export default {
|
// components: { QuestionEdit },
|
data () {
|
return {
|
langTypes: [],
|
langSelectValue: this.$route.query.langSelectValue,
|
langWelcome: this.$t('langWelcomeChinese'),
|
langOption: this.$t('langOptionChinese'),
|
timer: null,
|
submissionLang: this.$t('submission'),
|
isLangKaiStyle: false
|
}
|
},
|
created: function () {
|
let _this = this
|
window.clearInterval(this.timer)
|
_this.getLangType()
|
_this.getLangAndRportTemplateId()
|
let num = 0
|
this.timer = setInterval(function () {
|
if (num > 9) {
|
num = 0
|
}
|
if (num === 0) {
|
_this.langWelcome = _this.$t('langWelcomeChinese')
|
_this.langOption = _this.$t('langOptionChinese')
|
_this.isLangKaiStyle = true
|
}
|
|
if (num === 3) {
|
_this.langWelcome = _this.$t('langWelcomeEnglish')
|
_this.langOption = _this.$t('langOptionEnglish')
|
_this.isLangKaiStyle = false
|
}
|
|
if (num === 6) {
|
_this.langWelcome = _this.$t('langWelcomeThai')
|
_this.langOption = _this.$t('langOptionThai')
|
_this.isLangKaiStyle = false
|
}
|
num++
|
}, 1000)
|
},
|
beforeDestroy () {
|
window.clearInterval(this.timer)
|
},
|
methods: {
|
submitLangOption: function () {
|
let _this = this
|
_this.setLangType(_this.langSelectValue)
|
_this.$router.push({ path: '/demography/fill/index', query: { demographyMenber: _this.memberToken, isStart: false } })
|
window.clearInterval(this.timer)
|
},
|
getLangAndRportTemplateId () {
|
let _this = this
|
if (_this.reportTemplateId.trim() === '' || _this.reportTemplateId.trim() === null) {
|
examPaperApi.selectTokenId(_this.memberToken).then(re => {
|
if (re.response.finish === 1) {
|
_this.$router.push({ path: '/exam/finish', query: { name: '', content: _this.$t('finishMsg'), tokenId: _this.memberToken } })
|
} else {
|
_this.setReportTemplateId(re.response.reportTemplateId)
|
demographyApi.queryLangList(_this.memberToken, _this.reportTemplateId).then(function (result) {
|
if (result && result.code === 1) {
|
_this.langTypes = result.response
|
}
|
}
|
).catch(e => {
|
_this.$message.error(_this.$t('noquestionMsg'))
|
})
|
}
|
}).catch(e => {
|
})
|
} else {
|
demographyApi.queryLangList(_this.memberToken, _this.reportTemplateId).then(function (result) {
|
if (result && result.code === 1) {
|
_this.langTypes = result.response
|
}
|
}
|
).catch(e => {
|
_this.$message.error(_this.$t('noquestionMsg'))
|
})
|
}
|
},
|
...mapMutations('user', ['setMemberTocken']),
|
...mapMutations('user', ['setLangType']),
|
...mapMutations('user', ['getLangType']),
|
...mapMutations('exam', ['setReportTemplateId'])
|
},
|
computed: {
|
...mapState('user', { memberToken: state => state.memberToken }),
|
...mapState('exam', { doUrl: state => state.doUrl }),
|
...mapState('exam', { reportTemplateId: state => state.reportTemplateId }),
|
...mapState('user', { langType: state => state.langType }),
|
goLangType: function () {
|
// `this` 指向 vm 实例
|
let _this = this
|
if (_this.langSelectValue === 'Chinese') {
|
_this.$i18n.locale = 'zh'
|
_this.submissionLang = '提交'
|
} else if (_this.langSelectValue === 'Thai') {
|
_this.$i18n.locale = 'th'
|
_this.submissionLang = 'เสนอ'
|
} else {
|
_this.$i18n.locale = 'en'
|
_this.submissionLang = 'submit'
|
}
|
return _this.langType
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.demography {
|
width: 90%;
|
margin: 0 auto;
|
margin-top: 5%;
|
}
|
|
.align-center {
|
text-align: center
|
}
|
|
.langKaiStyle {
|
font-family: Kai
|
}
|
</style>
|
