小程序-实战篇-老师出题

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

小程序端的教师出题页面和pc类似，如下图，包含了固定的几种字段，区别就是客观题和主观题，客观题有选项，需要对选项进行增删操作。点击加号新增下一题，需要判断当前题的必填项，点击题号上的删除，删除题，题目左右滑动。 界面如图所示

所有题目： questions，currentQue 当前题，currentIndex 当前题的索引，defaultQue，默认的题

data: {
    defaultQue: {},
    questions: [], // 题目
    currentQue: {}, // 当前题
    currentIndex: 0,
    allScore: 0,
},

所有题目代码

 <view class="d-fx line">
        <view class="black-45"><text class="fs16 fw-500">出题：</text>(当前共{{questions.length}}题 {{allScore}}分)</view>
    </view>
    <view class="ques-list">
        <view class="left" wx:if="{{!isLook}}">
            <view class="icon-jia" bindtap="addQue">+</view>
        </view>
        <view class="right">
            <view wx:for="{{questions}}" wx:key="index" class="que-item">
                <view bindtap="skipQue" class="que-info {{index == currentIndex?'active':''}}" data-index="{{index}}">
                    {{index+1}}</view>
                <view wx:if="{{index == currentIndex && !isLook}}" class="icon-del" bindtap="delQue"
                    data-index="{{index}}">×</view>
            </view>
        </view>
    </view>

设置默认的题型

onLoad: function (options) {
    this.setData({
        questions: [JSON.parse(JSON.stringify(this.data.defaultQue))],
    })
}

切换题目，根据索引找到对应的题

// 切换题
skipQue(e) {
    if (!this.data.isLook && this.isSubmitBtnUse()) {
        return;
    }
    let index = e.currentTarget.dataset.index;
    this.setData({
        currentIndex: index,
        currentQue: this.data.questions[index]
    })
},

删除题目，弹框确认是否删除，试题的索引选中前一个，如果删除的是唯一的一个，再插入一个默认的题

// 删除题
delQue() {
    wx.showModal({
        title: '提示',
        content: '您确定要删除这个试题吗？',
        success: (res) => {
            if (res.confirm) {
                let delIndex = this.data.currentIndex;
                if (this.data.questions.length > 1) {
                    this.data.questions.splice(this.data.currentIndex, 1)
                } else {
                    this.data.questions.splice(this.data.currentIndex, 1, JSON.parse(JSON.stringify(this.data.defaultObj)))
                }
                let nowIndex = delIndex - 1 > 0 ? delIndex - 1 : 0;
                this.setData({
                    questions: this.data.questions,
                    currentIndex: nowIndex,
                })
                setTimeout(() => {
                    this.setData({
                        currentQue: this.data.questions[this.data.currentIndex]
                    })
                }, 10)
                wx.setStorageSync('queList', JSON.stringify(this.data.questions));
            }
        }
    })
},

计算已添加的题目的总分

// 总分计算
getAllScore() {
    let sum = 0;
    this.data.questions.forEach(item => {
        sum = sum + (Number(item.score) || 0) * 10
    })
    this.setData({
        allScore: sum / 10
    })
},

保存按钮，保存当前题，返回上个页面

// 保存题
saveQue() {
    if (this.isSubmitBtnUse()) {
        return
    }
    this.getAllScore();
    wx.setStorageSync('allScore', this.data.allScore);
    wx.setStorageSync('queList', JSON.stringify(this.data.questions));
    wx.navigateBack()
},

封装一个当前题是否必填全部填写

// 必填是否填写
isSubmitBtnUse() {
    let data = this.data.currentQue,
        flag = false,
        errorMsg = '';
    if (!data) {
        return
    }
    if (data.score == '' || data.score == null) {
        flag = true;
        errorMsg = '分值不能为空'
    }
    switch (data.type) {
        case 1:
            if (!data.context) {
                flag = true;
                errorMsg = '题干内容不能为空'
            } else if (!data.optionList || data.optionList.length <= 0) {
                flag = true;
                errorMsg = '单选题选项不能为空';
            } else if (data.optionList.length > 0) {
                data.optionList.forEach(item => {
                    if (!item.content || item.content == '') {
                        flag = true;
                        errorMsg = '单选题选项内容不能为空';
                    }
                })
            }
            if (!flag && data.answer < 0) {
                flag = true;
                errorMsg = '单选题选中项不能为空';
            }
            break;
        case 2:
            if (!data.context) {
                flag = true;
                errorMsg = '题干内容不能为空'
            } else if (!data.optionList || data.optionList.length <= 0) {
                flag = true;
                errorMsg = '多选题选项不能为空';
            } else if (data.optionList.length > 0) {
                data.optionList.forEach(item => {
                    if (!item.content || item.content == '') {
                        flag = true;
                        errorMsg = '多选题选项内容不能为空';
                    }
                })
            }
            if (!flag && data.answer && data.answer.length < 1) {
                flag = true;
                errorMsg = '多选题选中项不能少于一个';
            }
            break;
        case 3:
            if (!data.context) {
                flag = true;
                errorMsg = '题干内容不能为空'
            } else
                break;
        case 4:
        case 5:
            // 简答、案例
            if (!data.title) {
                flag = true;
                errorMsg = '标题不能为空';
            } else if (!data.context || data.context.length <= 0) {
                flag = true;
                errorMsg = '题干不能为空';
            } else if (!data.answer || data.answer.length <= 0) {
                flag = true;
                errorMsg = '答案不能为空';
            }
            break;
    }
    if (flag) {
        wx.showToast({
            title: `${errorMsg}`,
            icon: 'none'
        })
    }
    return flag;
},