洋浦学校八大中心 德育管理前端

init
gongdi 3 years ago
parent 9ff377bc05
commit e949dd3496

@ -35,7 +35,7 @@
} }
}, },
mounted(){ mounted(){
this.changeType(); // this.changeType();
}, },
methods: { methods: {
changeType:function () { changeType:function () {

@ -1,23 +1,37 @@
<template> <template>
<div class="student-style-info-style"> <div class="student-style-info-style">
<div class="student-img-style"><img :src="studentInfo.imgSrc"/></div> <div class="student-img-style">
<img-preview :imgObj="imgJson"/>
</div>
<div class="student-info-style"> <div class="student-info-style">
<div class="student-info-text-style">{{studentInfo.name}}</div> <div class="student-info-text-style">{{studentInfo.honor_person_name}}</div>
<div class="student-info-text-style light-text-style">{{studentInfo.gradeName}}</div> <div class="student-info-text-style light-text-style">{{studentInfo.stage_name}}</div>
<div class="student-info-text-style light-text-style">{{studentInfo.className}}</div> <div class="student-info-text-style light-text-style">{{studentInfo.class_name}}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ImgPreview from '../../../../common/imgPreview.vue';
export default{ export default{
data(){
return {}
},
props:{ props:{
studentInfo:{ studentInfo:{
type:Object, type:Object,
default:{} default:{}
} }
},
data(){
return {
imgJson:{}
}
},
mounted(){
let attachmentJson = this.$props.studentInfo.attachment_json;
if(attachmentJson && attachmentJson.length > 0){
this.imgJson = JSON.parse(attachmentJson)[0];
}
},
components:{
ImgPreview
} }
} }
</script> </script>

@ -1,50 +1,49 @@
<template> <template>
<div class="school-style-student-style"> <div class="school-style-student-style">
<div class="list-row-style"> <vue-scroll :ops="listScroll" style="height:520px"
<div class="top-line-style" style="float: right"> class="list-data-content-row-style">
<div v-for="item,index in dataList" :key="'category_'+item.category_id" class="list-row-style">
<div :class="(index % 2 === 0?'top-line-style':'line-left-style')"
:style="(index % 2 === 0?'float: right':'')">
<div class="shine shine2"></div> <div class="shine shine2"></div>
<div class="star-style"> <div class="star-style">
<img src="../../../../assets/images/star.png" style="width: 100%;height: 100%"/> <img src="../../../../assets/images/star.png" style="width: 100%;height: 100%"/>
</div> </div>
</div> </div>
<div class="list-content-style"> <div class="list-content-style">
<template v-if="index % 2 === 0">
<div class="list-medal-style"> <div class="list-medal-style">
<img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/> <img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/>
<div class="medal-text-style">学雷锋<br/>标兵</div> <div class="medal-text-style">{{item.category_name}}</div>
</div> </div>
<StudentInfo v-for="item in studentList1" :key="item.id" :studentInfo="item"/> <div class="swiper-content-style">
<swiper id="mySwiper" :options="swiperOption" ref="mySwiper">
<swiper-slide class="swiper-item divcard swiper-slide"
v-for='(student,index) in item.list' :key='item.category_id + "_" + index'>
<!--<StudentInfo v-for="student in item.list" :key="item.id" :studentInfo="student"/>-->
<StudentInfo :studentInfo="student"/>
</swiper-slide>
</swiper>
</div> </div>
</template>
<template v-else>
<div class="swiper-content-style">
<swiper id="myOtherSwiper" :options="swiperOption" ref="mySwiper">
<swiper-slide class="swiper-item divcard swiper-slide"
v-for='(student,index) in item.list' :key='item.category_id + "_" + index'>
<!--<StudentInfo v-for="student in item.list" :key="item.id" :studentInfo="student"/>-->
<StudentInfo :studentInfo="student"/>
</swiper-slide>
</swiper>
</div> </div>
<div class="list-row-style">
<div class="line-left-style">
<div class="shine shine2"></div>
<div class="star-style">
<img src="../../../../assets/images/star.png" style="width: 100%;height: 100%"/>
</div>
</div>
<div class="list-content-style">
<StudentInfo v-for="item in studentList2" :key="item.id" :studentInfo="item"/>
<div class="list-medal-style"> <div class="list-medal-style">
<img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/> <img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/>
<div class="medal-text-style">优秀<br/>少先队</div> <div class="medal-text-style">{{item.category_name}}</div>
</div>
</div> </div>
</div> </template>
<div class="list-row-style">
<div class="top-line-style" style="float: right">
<div class="shine shine2"></div>
<div class="star-style">
<img src="../../../../assets/images/star.png" style="width: 100%;height: 100%"/>
</div>
</div>
<div class="list-content-style">
<div class="list-medal-style">
<img src="../../../../assets/images/medal.png" style="width: 100%;height: 100%"/>
<div class="medal-text-style">三好<br/>学生</div>
</div>
<StudentInfo v-for="item in studentList3" :key="item.id" :studentInfo="item"/>
</div> </div>
</div> </div>
</vue-scroll>
</div> </div>
</template> </template>
<script> <script>
@ -53,31 +52,88 @@
* */ * */
import {Icon} from 'ant-design-vue'; import {Icon} from 'ant-design-vue';
import StudentInfo from './studentInfo.vue'; import StudentInfo from './studentInfo.vue';
import InterConfig from '../../../adminCenter/servicePlatform/interConfig';
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default{ export default{
data(){ data(){
return { return {
studentList1:[ dataList: [],
{id:1,name:"姜子谦",gradeName:"小学一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student01.svg')}, listScroll: this.StaticParams.scrollOption,
{id:1,name:"赵雪娇",gradeName:"小学三年级",className:"01班",imgSrc:require('../../../../assets/images/student/student02.svg')}, swiperOption: {
{id:3,name:"孙泽熙",gradeName:"小学三年级",className:"03班",imgSrc:require('../../../../assets/images/student/student03.svg')}, initialSlide: 0,//
{id:4,name:"谢子欣",gradeName:"初中一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student04.svg')}, loop: true, //
], autoplay: true, //3
studentList2:[ speed: 800,//
{id:1,name:"蒋一鸣",gradeName:"小学一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student05.svg')}, slidesPerView: 4,
{id:1,name:"王子墨",gradeName:"小学一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student06.svg')}, observer:true,
{id:3,name:"冉冉",gradeName:"小学三年级",className:"01班",imgSrc:require('../../../../assets/images/student/student07.svg')}, observeParents:false,
{id:4,name:"贺飞",gradeName:"小学一年级",className:"06班",imgSrc:require('../../../../assets/images/student/student08.svg')}, },
], }
studentList3:[ },
{id:1,name:"徐子乔",gradeName:"小学一年级",className:"05班",imgSrc:require('../../../../assets/images/student/student09.svg')}, mounted(){
{id:1,name:"范然",gradeName:"小学三年级",className:"01班",imgSrc:require('../../../../assets/images/student/student10.svg')}, this.getStudentHonorList();
{id:3,name:"张雪飞",gradeName:"小学四年级",className:"01班",imgSrc:require('../../../../assets/images/student/student11.svg')}, },
{id:4,name:"刘西蒙",gradeName:"小学二年级",className:"01班",imgSrc:require('../../../../assets/images/student/student12.svg')}, methods: {
] //
getStudentHonorList: function () {
this.dataList = [];
let param = {
bureau_id: this.BaseConfig.person_info_my.bureau_id,
category_type: 6,
category_id: "",
page_number: 1,
page_size: 999999
}
this.InterfaceConfig.callInterface([{
url: InterConfig.getHonorList.url,
params: param,
method: InterConfig.getHonorList.method,
isTestLogin: InterConfig.getHonorList.isTestLogin,
}], (result) => {
let resData = result[0].data;
if (resData.code === 2000) {
let dataList = resData.data.list;
for (let i = 0, len = dataList.length; i < len; i++) {
let category_id = dataList[i].category_id;
let category_name = dataList[i].category_name;
let index = -1;
for (let j = 0, len = this.dataList.length; j < len; j++) {
let categoryId = this.dataList[j]["category_id"];
if (parseInt(categoryId) === parseInt(category_id)) {
index = j;
break;
}
}
let categoryObj = {};
console.log("index:", index)
if (index > -1) {
//
this.dataList[index]["list"].push(dataList[i]);
} else {
//
categoryObj["category_id"] = category_id;
categoryObj["category_name"] = category_name;
categoryObj["list"] = [dataList[i]];
this.dataList.push(categoryObj);
}
}
//
for(let i = 0,len = this.dataList.length;i < len;i ++){
let list = this.dataList[i].list;
if(list.length > 4 && list.length < 10){
this.dataList[i].list.push(...this.dataList[i].list);
}
}
console.log("this.dataList", this.dataList);
}
})
} }
}, },
components: { components: {
StudentInfo StudentInfo,
swiper,
swiperSlide,
} }
} }
</script> </script>
@ -87,6 +143,13 @@
height: 520px; height: 520px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.list-data-content-row-style{
width: 100%;
/deep/.__panel{
width: 100% !important;
overflow: hidden !important;
.__view{
width: 100% !important;
.list-row-style { .list-row-style {
width: 100%; width: 100%;
.top-line-style { .top-line-style {
@ -242,7 +305,7 @@
} }
} }
} }
.line-left-style{ .line-left-style {
margin-top: 10px; margin-top: 10px;
width: 80%; width: 80%;
border-bottom: 1px solid white; border-bottom: 1px solid white;
@ -395,22 +458,32 @@
} }
} }
} }
.list-content-style{ .list-content-style {
width: 100%; width: 100%;
display: flex; display: flex;
padding: 10px; padding: 10px;
align-items: center; align-items: center;
.list-medal-style{ .list-medal-style {
width: 100px; width: 100px;
height: 100px; height: 100px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.medal-text-style{ .medal-text-style {
color: white; color: white;
position: absolute; position: absolute;
text-align: center; text-align: center;
width: 50px;
height: 40px;
}
}
.swiper-content-style {
width: calc(100% - 100px);
height: 100%;
display: flex;
}
}
} }
} }
} }

Loading…
Cancel
Save