zhxy-desk/pages/studentRanked/components/mark-score.vue

<template>
    <el-dialog :visible.sync="show" title="标记点评给 马东/徐策 等5人" custom-class="content"
        style="background-color: #00142f63;backdrop-filter: blur(4px);" width="600px">
        <view class="ui-flex-column">
            <!-- <view class="ui-p" style="background: #022c5a80;border-bottom: 2px solid #051d37;">
                <text class="txt-white"> </text>
            </view> -->
            <view class="ui-flex-row">
                <view class="ui-flex-1 ui-flex-align-center ui-flex-row">
                    <view class="ui-pl20">
                        <view class="ui-flex-row ui-border-radius-20" @click="showType=true"
                            style="background-color: #1C63A8;padding: 4px 8px;">
                            <text class="txt-white f26 ui-mr10">全部类型</text>
                            <u-icon color="#fff" name="list-dot"></u-icon>
                        </view>
                    </view>
                </view>
                <view style="width: 220px;" class="ui-p">
                    <u-subsection :list="['表扬', '需改进']" mode="button" bgColor="#1b63a8" inactiveColor="#aec3ee"
                        :current="curIndex" @change="curIndex=$event"></u-subsection>
                </view>
                <view class="ui-flex-1"></view>
            </view>
            <view style="background: #0000003b;">
                <u-tabs :list="list1" :scrollable="false" :activeStyle="{
                    color: '#fff',
                    fontWeight: 'bold',
                    transform: 'scale(1.2)'
                }"
                :inactiveStyle="{
                    color: '#959595',
                    transform: 'scale(1)'
                }"></u-tabs>
            </view>

            <scroll-view scroll-y style="height: 400px;" show-scrollbar>
                <u-grid :col="6" :border="false" @click="toActive">
                    <u-grid-item v-for="(item, index) in tagList" :key="index" class="ui-p"
                        :class="{'no-select' : activeId >= 0 && activeId != index}">
                        <u--image :src="'https://zhxy.obs.cn-hz1.ctyun.cn:443/static/tag_learn/' + tagIcons[index]"
                            width="46px" height="46px"></u--image>
                        <view class="ui-pt10">
                            <text class="grid-text txt-white f28">{{item}}</text>
                        </view>
                        <u-badge v-if="activeId == index" absolute :offset="[0,10]" :value="score"></u-badge>
                    </u-grid-item>
                </u-grid>
            </scroll-view>

            <view class="ui-p ui-flex" style="background-color: #1b63a870;justify-content: end;">
                <view class="ui-flex" style="width: 250px;">
                    <u-button size="small" plain :text="score ? '取消选择' : '关闭点评'" @click="cancelAct"
                        style="background-color: #0d4980;" class="ui-mr10"></u-button>
                    <u-button size="small" :disabled="!score" type="primary" @click="submit" text="提交点评"></u-button>
                </view>
            </view>
        </view>

        <el-drawer append-to-body :visible.sync="showType" direction="ltr">
            <view class="ui-p" style="width: 400px;">
                <text>这里展示学生标签记录、以及类型切换</text>
            </view>
            <u-cell-group>
                <u-cell icon="setting-fill" isLink title="个人设置"></u-cell>
                <u-cell icon="integral-fill" isLink title="会员等级" value="新版本"></u-cell>
            </u-cell-group>
        </el-drawer>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                curIndex: 0,

                score: 0, //加扣分分数
                activeId: -1, //选中项

                showType: false,

                list1: [{
                    name: '全部',
                }, {
                    name: '语文',
                }, {
                    name: '数学'
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美术'
                }, {
                    name: '体育'
                }, {
                    name: '思想'
                }, {
                    name: '劳动'
                }],

                tagList: [
                    '小测优秀',
                    '作业加分',
                    '口算优秀',
                    '班级贡献',
                    '优秀发言',
                    '阅读认真',
                    '卫生干净',
                    '值日认真',
                    '勤奋学习',
                    '课堂积极',
                    '乐于助人',
                    '团队合作',
                    '诚实守信',
                    '书写工整',
                    '数学优秀',
                    '语文优秀',
                    '英语优秀',
                    '美术优秀',
                    '音乐优秀',
                    '体育优秀',
                    '科学优秀',
                    '社会优秀',
                    '历史优秀',
                    '地理优秀',
                    '政治优秀',
                    '物理优秀',
                    '化学优秀',
                    '生物优秀',
                    '作文优秀',
                    '诗歌优秀',
                    '故事优秀',
                    '演讲优秀',
                    '表演优秀',
                    '手工优秀',
                    '实验优秀',
                    '研究优秀',
                    '科研优秀',
                    '表现优秀',
                    '表现突出',
                    '进步明显',
                    '专注听讲',
                    '课外阅读',
                    // '体育锻炼',
                    // '社会实践',
                    // '志愿服务',
                    // '爱护环境',
                    // '安全文明',
                    // '爱国爱校',
                ],
                // 老师配置标签的时候，需要选择图标
                tagIcons: [
                    'a-001-pencil.png',
                    'a-010-astronomy.png',
                    'a-017-protractor.png',
                    'a-024-schoollocker.png',
                    'a-031-mortarboard.png',
                    'a-038-schoolbag.png',
                    'a-045-liquidglue.png',
                    'a-002-alarmclock.png',
                    'a-011-maths.png',
                    'a-018-squareruler.png',
                    'a-025-idea.png',
                    'a-032-certificate.png',
                    'a-039-ask.png',
                    'a-046-school.png',
                    'a-003-book.png',
                    'a-012-eraser.png',
                    'a-019-abacus.png',
                    'a-026-chemicals.png',
                    'a-033-medal.png',
                    'a-040-compass.png',
                    'a-047-books.png',
                    'a-004-notebook.png',
                    'a-013-schoolbell.png',
                    'a-020-physics.png',
                    'a-027-maths.png',
                    'a-034-diploma.png',
                    'a-041-clipboard.png',
                    'a-048-books.png',
                    'a-007-calendar.png',
                    'a-014-calculator.png',
                    'a-021-dna.png',
                    'a-028-paintpalette.png',
                    'a-035-trophy.png',
                    'a-042-computer.png',
                    'a-049-books.png',
                    'a-008-worldgrid.png',
                    'a-015-squareruler.png',
                    'a-022-schoollocker.png',
                    'a-029-atom.png',
                    'a-036-milkcarton.png',
                    'a-043-laptop.png',
                    'a-050-coffeemug.png',
                    'a-009-molecule.png',
                    'a-016-ruler.png',
                    'a-023-sharpener.png',
                    'a-030-eyeglasses.png',
                    'a-037-pen.png',
                    'a-044-microscope.png',
                ]
            }
        },
        methods: {
            // 外部访问使用
            open(id) {
                this.show = true;
            },
            toActive(index) {
                // 是否旧的选中项
                let always = this.activeId >= 0 && this.activeId == index;
                this.activeId = index;
                if (always) {
                    this.score++;
                } else {
                    this.score = 1;
                }
            },
            cancelAct() {
                if (this.score) {
                    this.activeId = -1;
                    this.score = 0;
                } else {
                    this.show = false;
                }
            },
            submit() {
                console.log('提交')
            }
        }
    }
</script>

<style>
    /deep/ .content {
        background-image: url('https://zhxy.obs.cn-hz1.ctyun.cn:443/static/desk_bg/class_bj.jpg');
        background-size: auto;
        border: 1px solid #0d5396;
    }

    /deep/ .el-dialog__header {
        background: #022c5a80;
        border-bottom: 2px solid #051d37;
    }

    /deep/ .el-dialog__title {
        color: #fff;
    }

    /deep/ .el-dialog__body {
        padding: 0;
    }

    .no-select {
        opacity: .5;
    }
</style>