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

<template>
    <u-popup :show="show" @close="show = false" closeable :closeOnClickOverlay="false" mode="center" overlayStyle="background-color: #00142f63;backdrop-filter: blur(4px);">
        <view class="ui-flex-column content" style="width: 600px;">
            <view class="ui-p" style="background: #022c5a80;border-bottom: 2px solid #051d37;">
                <text class="txt-white">标记点评给 马东/徐策 等5人 </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>
            
            <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>
        
        <u-popup :show="showType" mode="left" @close="showType=false">
            <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>
        </u-popup>
    </u-popup>
</template>

<script>
    export default {
        data(){
            return {
                show : false,
                curIndex : 0,
                
                score : 0, //加扣分分数
                activeId : -1, //选中项
                
                showType : false,

                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>
    .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;
    }
    .no-select{
        opacity: .5;
    }
</style>