|
|
@@ -0,0 +1,272 @@
|
|
|
+<template>
|
|
|
+ <u-popup :show="showPopup" mode="bottom" round="30" @close="close">
|
|
|
+ <view class="ques-content">
|
|
|
+ <view class="quesTitleViewClass">
|
|
|
+ <view class="quesTitleLeftClass">
|
|
|
+ <image src="/static/image/hall/ques_icon.png" mode="aspectFill"></image>
|
|
|
+ <text class="quesTitleTextClass">问答题</text>
|
|
|
+ </view>
|
|
|
+ <view @tap="close">
|
|
|
+ <u-icon name="close-circle-fill" color="#D8D8D8FF" size="32"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="scroll-y" scroll-y>
|
|
|
+ <view class="dataItemViewClass" v-for="(item,index) in quesList" :key="index">
|
|
|
+ <view class="ques-title">
|
|
|
+ <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>
|
|
|
+ </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>
|
|
|
+ {{numberToLetter(idx)}}.
|
|
|
+ </view>
|
|
|
+ <view>{{option.name}}</view>
|
|
|
+ </view>
|
|
|
+ </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>
|
|
|
+ <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、需再观看视频
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showPopup: false,
|
|
|
+ quesList: [{
|
|
|
+ type: 1,
|
|
|
+ title: '《大美国医》药王级鹿茸粉单选特价供应货源还剩下不足多少盒?',
|
|
|
+ answer: '',
|
|
|
+ questionOption: [{
|
|
|
+ name: '800 盒'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '500 盒'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '1000 盒'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '1500 盒'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ 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(',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交答案
|
|
|
+ confirmAnswer() {
|
|
|
+ this.$emit('submitAnswer', this.quesList)
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+ // 关闭弹框
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty {
|
|
|
+ @include u-flex(row, center, center);
|
|
|
+ padding: 24rpx 50rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .quesTitleLeftClass {
|
|
|
+ @include u-flex(row, center, center);
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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-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);
|
|
|
+
|
|
|
+ &-active {
|
|
|
+ color: #FF233CFF !important;
|
|
|
+ background: #FFF0F1FF !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+
|
|
|
+ &-active {
|
|
|
+ background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
wenxingxing
