You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
6 months ago
|
<template>
|
||
|
|
<view class="i-clicker-page">
|
||
|
|
<ch-nav-bar title="答题器" :height="66">
|
||
|
|
<template v-slot:right>
|
||
|
|
<uni-icons class="handle-icon" type="reload" size="56" color="#fff" @tap="refresh"/>
|
||
|
|
<uni-icons class="handle-icon" type="checkmarkempty" size="56" color="#fff" @tap="submitAnswer"/>
|
||
|
|
</template>
|
||
|
|
</ch-nav-bar>
|
||
|
|
<ch-empty emptyText="暂无答题任务" v-if="!options.length"></ch-empty>
|
||
|
|
<ch-flex class="answer-options" justify="around" items="center" @tap.native="selectOpt" v-else>
|
||
|
|
<block v-for="option in options" :key="option.id">
|
||
|
|
<view class="option" :class="{ 'selected': selectOpts.includes(option.id) }" :data-opt="option">
|
||
|
|
{{ option.text }}
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
</ch-flex>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { getIClickerData, submitIClickerData } from '@/api/iClicker.js'
|
||
|
|
import { reactive, toRefs } from 'vue';
|
||
|
|
|
||
|
|
const defaultOptions = [
|
||
|
|
{
|
||
|
|
id: '001',
|
||
|
|
text: 'A'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '002',
|
||
|
|
text: 'B'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '003',
|
||
|
|
text: 'C'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '004',
|
||
|
|
text: 'D'
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
const data = reactive({
|
||
|
|
options: [...defaultOptions],
|
||
|
|
selectOpts: []
|
||
|
|
})
|
||
|
|
|
||
|
|
const { options, selectOpts } = toRefs(data);
|
||
|
|
|
||
|
|
function selectOpt (e) {
|
||
|
|
const opt = e.target.dataset.opt || null;
|
||
|
|
if (!opt) return;
|
||
|
|
const index = selectOpts.value.findIndex(id => id == opt.id)
|
||
|
|
selectOpts.value = index == -1 ? [...selectOpts.value, opt.id]
|
||
|
|
: selectOpts.value.filter(id => id !== opt.id)
|
||
|
|
}
|
||
|
|
|
||
|
|
function submitAnswer () {
|
||
|
|
uni.showModal({
|
||
|
|
content: '确定要提交答案？',
|
||
|
|
confirmText: '提交',
|
||
|
|
cancelText: '放弃',
|
||
|
|
success: () => {
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function refresh () {
|
||
|
|
selectOpts.value = [];
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './IClicker.scss'
|
||
|
|
</style>
|