|
|
@@ -11,262 +11,278 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<scroll-view class="scroll-y" scroll-y>
|
|
|
- <view class="dataItemViewClass" v-for="(item,index) in quesList" :key="index">
|
|
|
+ <view class="dataItemViewClass" v-for="(item, index) in quesList" :key="index">
|
|
|
<view class="ques-title">
|
|
|
- <text>{{index + 1}}.</text>
|
|
|
+ <text>{{ index + 1 }}.</text>
|
|
|
<!-- <view class="ques-type" v-show="item.type == 1 || item.type == 2">
|
|
|
{{item.type == 1 ? '单选' : item.type == 2 ? '多选' : ''}}
|
|
|
</view> -->
|
|
|
- <text>{{item.title}}</text>
|
|
|
+ <text>{{ item.title }}</text>
|
|
|
</view>
|
|
|
- <view :class="isAnswer(item,option.name) ?'ques-option ques-option-active':'ques-option'"
|
|
|
- v-for="(option,idx) in item.questionOption" :key="idx" @tap="handleSelectAnswer(item,option)">
|
|
|
+ <view :class="isAnswer(item, option.name) ? 'ques-option ques-option-active' : 'ques-option'"
|
|
|
+ v-for="(option, idx) in item.question" :key="idx" @tap="handleSelectAnswer(item, option)">
|
|
|
<view>
|
|
|
- {{numberToLetter(idx)}}.
|
|
|
+ {{ numberToLetter(idx) }}.
|
|
|
</view>
|
|
|
- <view>{{option.name}}</view>
|
|
|
+ <view>{{ option.name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="empty" v-if="quesList.length==0">暂未设置题目~</view>
|
|
|
+ <view class="empty" v-if="quesList.length == 0">暂未设置题目~</view>
|
|
|
</scroll-view>
|
|
|
- <view class="bottomBtnViewClass">
|
|
|
- <view v-if="~~typeStatus === 1" :class="isOkAnswer ?'btnViewClass btnViewClass-active':'btnViewClass'"
|
|
|
- @tap="isOkAnswer ? confirmAnswer():null">
|
|
|
+ <view v-if="quesList.length > 0" class="bottomBtnViewClass">
|
|
|
+ <view v-if="~~remainSeconds > 0" class="btnViewClass" @tap.stop="close">再观看{{ formatTime(remainSeconds)
|
|
|
+ }}可答题</view>
|
|
|
+ <view v-else :class="isOkAnswer ? 'btnViewClass btnViewClass-active' : 'btnViewClass'"
|
|
|
+ @tap="isOkAnswer ? confirmAnswer() : null">
|
|
|
提交答案</view>
|
|
|
- <view v-if="~~typeStatus === 2" class="btnViewClass">再观看1分30秒可答题</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- isShow: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- typeStatus: {
|
|
|
- type: Number,
|
|
|
- default: 1, //提交类型:1、可以提交答案,2、需再观看视频
|
|
|
- }
|
|
|
+import {
|
|
|
+ newVideoDetailsApi
|
|
|
+} from '@/api/course'
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ isShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showPopup: false,
|
|
|
- quesList: [{
|
|
|
- type: 1,
|
|
|
- title: '《大美国医》药王级鹿茸粉单选特价供应货源还剩下不足多少盒?',
|
|
|
- answer: '',
|
|
|
- questionOption: [{
|
|
|
- name: '800 盒'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '500 盒'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '1000 盒'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '1500 盒'
|
|
|
- }
|
|
|
- ]
|
|
|
- }],
|
|
|
- }
|
|
|
+ typeStatus: {
|
|
|
+ type: Number,
|
|
|
+ default: 1, //提交类型:1、可以提交答案,2、需再观看视频
|
|
|
+ },
|
|
|
+ // 父组件传:剩余秒数
|
|
|
+ remainSeconds: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ videoId: {
|
|
|
+ type: Number,
|
|
|
+ default: ''
|
|
|
},
|
|
|
- computed: {
|
|
|
- isOkAnswer() {
|
|
|
- let newData = false
|
|
|
- newData = !(this.quesList.map(item => item.answer).some(itemOne => itemOne == null || itemOne === ''))
|
|
|
- return newData
|
|
|
- },
|
|
|
- isAnswer() {
|
|
|
- return (item, name) => {
|
|
|
- if (item.type == 1) {
|
|
|
- return item.answer == name
|
|
|
- } else if (item.type == 2) {
|
|
|
- const array = item.answer.split(',')
|
|
|
- return array.some(i => i == name)
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showPopup: false,
|
|
|
+ quesList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isOkAnswer() {
|
|
|
+ let newData = false
|
|
|
+ newData = !(this.quesList.map(item => item.answer).some(itemOne => itemOne == null || itemOne === ''))
|
|
|
+ return newData
|
|
|
+ },
|
|
|
+ isAnswer() {
|
|
|
+ return (item, name) => {
|
|
|
+ if (item.type == 1) {
|
|
|
+ return item.answer == name
|
|
|
+ } else if (item.type == 2) {
|
|
|
+ const array = item.answer.split(',')
|
|
|
+ return array.some(i => i == name)
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isShow(newVal) {
|
|
|
+ this.showPopup = newVal
|
|
|
+ if (newVal) {
|
|
|
+ this.getNewQuestionsList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 获取新视频详情
|
|
|
+ async getNewQuestionsList() {
|
|
|
+ let res = await newVideoDetailsApi({
|
|
|
+ videoId: this.videoId
|
|
|
+ })
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.quesList = res.data.questionBankList.length > 0 ? res.data.questionBankList.map(item => ({ ...item, question: JSON.parse(item.question) })) : []
|
|
|
+ }
|
|
|
},
|
|
|
- watch: {
|
|
|
- isShow(newVal) {
|
|
|
- this.showPopup = newVal
|
|
|
+ // 秒数 → 分:秒 格式
|
|
|
+ formatTime(seconds) {
|
|
|
+ if (seconds <= 0) {
|
|
|
+ return '00分00秒'
|
|
|
}
|
|
|
+ const m = Math.floor(seconds / 60)
|
|
|
+ const s = seconds % 60
|
|
|
+ return `${m.toString().padStart(2, '0')}分${s.toString().padStart(2, '0')}秒`
|
|
|
},
|
|
|
-
|
|
|
- methods: {
|
|
|
- numberToLetter(num) {
|
|
|
- // 将数字转换为字母的 ASCII 码
|
|
|
- let letterCode = num + 65;
|
|
|
- // 将 ASCII 码转换为大写字母
|
|
|
- let letter = String.fromCharCode(letterCode);
|
|
|
- return letter;
|
|
|
- },
|
|
|
- // 点击选择答案
|
|
|
- handleSelectAnswer(item, option) {
|
|
|
- if (item.type == 1) {
|
|
|
- // 单选option
|
|
|
- if (item.answer === option.name) {
|
|
|
- item.answer = ''
|
|
|
- } else {
|
|
|
- item.answer = option.name
|
|
|
- }
|
|
|
- } else if (item.type == 2) {
|
|
|
- // 多选
|
|
|
- let answer = item.answer ? item.answer.split(',') : []
|
|
|
- if (answer.indexOf(option.name) === -1) {
|
|
|
- answer.push(option.name)
|
|
|
- item.answer = answer.join(',')
|
|
|
- } else {
|
|
|
- answer.splice(answer.indexOf(option.name), 1)
|
|
|
- item.answer = answer.join(',')
|
|
|
- }
|
|
|
+ numberToLetter(num) {
|
|
|
+ // 将数字转换为字母的 ASCII 码
|
|
|
+ let letterCode = num + 65;
|
|
|
+ // 将 ASCII 码转换为大写字母
|
|
|
+ let letter = String.fromCharCode(letterCode);
|
|
|
+ return letter;
|
|
|
+ },
|
|
|
+ // 点击选择答案
|
|
|
+ handleSelectAnswer(item, option) {
|
|
|
+ if (item.type == 1) {
|
|
|
+ // 单选option
|
|
|
+ if (item.answer === option.name) {
|
|
|
+ item.answer = ''
|
|
|
+ } else {
|
|
|
+ item.answer = option.name
|
|
|
+ }
|
|
|
+ } else if (item.type == 2) {
|
|
|
+ // 多选
|
|
|
+ let answer = item.answer ? item.answer.split(',') : []
|
|
|
+ if (answer.indexOf(option.name) === -1) {
|
|
|
+ answer.push(option.name)
|
|
|
+ item.answer = answer.join(',')
|
|
|
+ } else {
|
|
|
+ answer.splice(answer.indexOf(option.name), 1)
|
|
|
+ item.answer = answer.join(',')
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- // 提交答案
|
|
|
- confirmAnswer() {
|
|
|
- this.$emit('submitAnswer', this.quesList)
|
|
|
- this.close()
|
|
|
- },
|
|
|
- // 关闭弹框
|
|
|
- close() {
|
|
|
- this.$emit('closeMethod')
|
|
|
- },
|
|
|
+ // 提交答案
|
|
|
+ confirmAnswer() {
|
|
|
+ this.$emit('submitAnswer', this.quesList)
|
|
|
},
|
|
|
- }
|
|
|
+ // 关闭弹框
|
|
|
+ close() {
|
|
|
+ this.$emit('closeMethod')
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- @mixin u-flex($flexD, $alignI, $justifyC) {
|
|
|
- display: flex;
|
|
|
- flex-direction: $flexD;
|
|
|
- align-items: $alignI;
|
|
|
- justify-content: $justifyC;
|
|
|
- }
|
|
|
+@mixin u-flex($flexD, $alignI, $justifyC) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: $flexD;
|
|
|
+ align-items: $alignI;
|
|
|
+ justify-content: $justifyC;
|
|
|
+}
|
|
|
|
|
|
- .empty {
|
|
|
- @include u-flex(row, center, center);
|
|
|
- padding: 24rpx 50rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+.empty {
|
|
|
+ @include u-flex(row, center, center);
|
|
|
+ padding: 24rpx 50rpx;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
|
|
|
- .scroll-y {
|
|
|
- width: 100%;
|
|
|
- height: calc(60vh - 300rpx)
|
|
|
- }
|
|
|
+.scroll-y {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(60vh - 300rpx)
|
|
|
+}
|
|
|
|
|
|
- .quesTitleViewClass {
|
|
|
- @include u-flex(row, center, space-between);
|
|
|
- padding-bottom: 26rpx;
|
|
|
- border-bottom: 2rpx solid #D8D8D8;
|
|
|
- margin-bottom: 24rpx;
|
|
|
+.quesTitleViewClass {
|
|
|
+ @include u-flex(row, center, space-between);
|
|
|
+ padding-bottom: 26rpx;
|
|
|
+ border-bottom: 2rpx solid #D8D8D8;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
|
- .quesTitleLeftClass {
|
|
|
- @include u-flex(row, center, center);
|
|
|
+ .quesTitleLeftClass {
|
|
|
+ @include u-flex(row, center, center);
|
|
|
|
|
|
- image {
|
|
|
- width: 28rpx;
|
|
|
- height: 28rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
+ image {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
|
|
|
- .quesTitleTextClass {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
+ .quesTitleTextClass {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #222222;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .ques-content {
|
|
|
- width: 100vw;
|
|
|
- height: 60vh;
|
|
|
- background-color: #fff;
|
|
|
- padding: 24rpx 24rpx 20rpx 32rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 30rpx 30rpx 0rpx 0rpx;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
+.ques-content {
|
|
|
+ width: 100vw;
|
|
|
+ height: 60vh;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 24rpx 24rpx 20rpx 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 30rpx 30rpx 0rpx 0rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+}
|
|
|
|
|
|
- .dataItemViewClass {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 25rpx;
|
|
|
- }
|
|
|
+.dataItemViewClass {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 25rpx;
|
|
|
+}
|
|
|
|
|
|
- .ques-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 40rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- white-space: normal;
|
|
|
- }
|
|
|
+.ques-title {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ white-space: normal;
|
|
|
+}
|
|
|
|
|
|
- .ques-type {
|
|
|
- flex-shrink: 0;
|
|
|
- min-width: 72rpx;
|
|
|
- min-height: 40rpx;
|
|
|
- padding: 0 12rpx;
|
|
|
- margin: 0 12rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #FF5C03;
|
|
|
- border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: center;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
+.ques-type {
|
|
|
+ flex-shrink: 0;
|
|
|
+ min-width: 72rpx;
|
|
|
+ min-height: 40rpx;
|
|
|
+ padding: 0 12rpx;
|
|
|
+ margin: 0 12rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FF5C03;
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
|
|
|
- .ques-option {
|
|
|
- min-height: 104rpx;
|
|
|
- padding: 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- background: #F5F7FAFF;
|
|
|
- border-radius: 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 40rpx;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
+.ques-option {
|
|
|
+ min-height: 104rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ background: #F5F7FAFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
|
|
|
- &-active {
|
|
|
- color: #FF233CFF !important;
|
|
|
- background: #FFF0F1FF !important;
|
|
|
- }
|
|
|
+ &-active {
|
|
|
+ color: #FF233CFF !important;
|
|
|
+ background: #FFF0F1FF !important;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .bottomBtnViewClass {
|
|
|
- width: 100%;
|
|
|
- height: 160rpx;
|
|
|
- @include u-flex(row, center, center);
|
|
|
+.bottomBtnViewClass {
|
|
|
+ width: 100%;
|
|
|
+ height: 160rpx;
|
|
|
+ @include u-flex(row, center, center);
|
|
|
|
|
|
- .btnViewClass {
|
|
|
- width: 630rpx;
|
|
|
- height: 96rpx;
|
|
|
- background: #00000040;
|
|
|
- border-radius: 48rpx;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 40rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 90rpx;
|
|
|
- text-align: center;
|
|
|
+ .btnViewClass {
|
|
|
+ width: 630rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ background: #00000040;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- &-active {
|
|
|
- background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
- }
|
|
|
+ &-active {
|
|
|
+ background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|