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

<template>
	<el-dialog :visible.sync="show" :title="`标记点评给 ${title}`" 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="change"></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">
					<u-grid-item @click="toActive(index,item)" v-for="(item, index) in list" :key="index" class="ui-p"
						:class="{'no-select' : activeId >= 0 && activeId != index}">
						<u--image :src="item.img" width="46px" height="46px"></u--image>
						<view class="ui-pt10">
							<text class="grid-text txt-white f28">{{item.tab_name}}</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>
    // 标签缓存
    let tabList = {};
    
	import {
		getStudentTabs
	} from "@/common/api/studentTab.js"
	export default {
		props: {
			stuList: {
				type: Array,
				default: () => []
			},
		},

		data() {
			return {
                title : '',
				show: false,
                list : [],
				curIndex: 0,
				type: 0,
				score: 0, //加扣分分数
				activeId: -1, //选中项
				itemTab: '',
				showType: false,
				list1: [{
					name: '全部',
				}, {
					name: '语文',
				}, {
					name: '数学'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美术'
				}, {
					name: '体育'
				}, {
					name: '思想'
				}, {
					name: '劳动'
				}],
			}
		},
		watch: {
			show() {
				if (!this.show) {
					this.activeId = -1;
					this.score = 0;
					this.$emit('close')
				}
			}
		},
		methods: {
			change(e){
				this.curIndex = e
                this.getTipList();
			},
            getTipList() {
                if(tabList[this.curIndex]){
                    this.list = tabList[this.curIndex];
                    return;
                }
                this.$api.sendRequest({
                    url: `/mobile/studentTab/getStudentTabs`,
                    method: "post",
                    data: {
                        teacher_id: this.$store.state.teacher_id,
                        type: this.curIndex
                    },
                    success: res => {
                        tabList[this.curIndex] = res.data;
                        this.list = res.data
                    }
                })
            },
			getStudentTabs() {
				this.$api.sendRequest({
					url: getStudentTabs,
					method: "post",
					data: {
						type: this.type
					},
					success: res => {
						console.log(res, "res");
					}
				})
			},
			// 外部访问使用
			open(title) {
                this.title = title;
				this.show = true;
                this.getTipList();
			},
			toActive(index, item) {
				// 是否旧的选中项
				let always = this.activeId >= 0 && this.activeId == index;
				this.activeId = index;
				if (always) {
					this.score++;
				} else {
					this.score = 1;
				}
				this.itemTab = item
			},
			cancelAct() {
				if (this.score) {
					this.activeId = -1;
					this.score = 0;
				} else {
					this.show = false;
					this.$emit('close', false)
				}
			},
			submit() {
				let obj = {
					teacher_id: this.$store.state.teacher_id,
					stu_school_ids: this.stuList,
					tab_id: this.itemTab.tab_id,
					score: this.score
				}
				this.$api.sendRequest({
					url: '/mobile/studentTab/geiXueshengTianjiaBiaoqian',
					method: "post",
					data: obj,
					success: res => {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								'icon': 'none',
							});
							this.show = false;
							this.activeId = -1;
							this.score = 0;
							this.$emit('close', res.data.batch_id)
						}
					}
				})
			},

		}
	}
</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>