|
|
<template>
|
|
|
<modal-panel
|
|
|
addChildType="slot"
|
|
|
:modalTitle="title"
|
|
|
:OKButton="false"
|
|
|
:show="showPanel"
|
|
|
:mask="true"
|
|
|
modalWidth="60%"
|
|
|
modalClassName="common-info-content-style"
|
|
|
@callback="modalCallback"
|
|
|
>
|
|
|
<a-spin class="common-info-style" :spinning="spinning">
|
|
|
<div class="title-content-style">
|
|
|
<h1>{{clubName}}</h1>
|
|
|
</div>
|
|
|
<div class="content-style">
|
|
|
<vue-scroll :ops="listScroll" style="width: 100%;height:600px">
|
|
|
<div class="club-info-style">
|
|
|
<div class="title-box-style">社团信息</div>
|
|
|
<div class="info-row-style">
|
|
|
<div class="left-style">团员人数 / </div>
|
|
|
<div class="right-style">{{memberNum + '人'}}</div>
|
|
|
</div>
|
|
|
<div class="info-row-style">
|
|
|
<div class="left-style">社团简介 / </div>
|
|
|
<div class="right-style">
|
|
|
<vue-scroll :ops="listScroll" style="width: 100%;height:100px">
|
|
|
{{clubDescribe}}
|
|
|
</vue-scroll>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="img-content-style">
|
|
|
<div class="title-box-style">社团图片</div>
|
|
|
<swiper class="banner" :options="swiperOption" ref="mySwiper">
|
|
|
<swiper-slide v-for="(item, index) in imgList" :key="index"
|
|
|
class="club-box-style">
|
|
|
<img-preview :imgObj="item"/>
|
|
|
</swiper-slide>
|
|
|
<div class="swiper-pagination" slot="pagination"></div>
|
|
|
</swiper>
|
|
|
</div>
|
|
|
<div class="info-content-style">
|
|
|
<div class="title-box-style">社团活动</div>
|
|
|
<!--<a-table :columns="columns" :dataSource="dataSource"-->
|
|
|
<!--:bordered="true" :pagination="false" :scroll="{ y: 120 }"/>-->
|
|
|
<div class="table-box-style">
|
|
|
<a-row class="header-row">
|
|
|
<a-col class="header-col" :span="2">序号</a-col>
|
|
|
<a-col class="header-col" :span="4">日期</a-col>
|
|
|
<a-col class="header-col" :span="9">活动名称</a-col>
|
|
|
<a-col class="header-col" :span="9">地点</a-col>
|
|
|
</a-row>
|
|
|
<div v-if="showDataSource && dataSource.length > 0" class="activity-list-scroll-style">
|
|
|
<vue-scroll :ops="listScroll" style="width: 100%;height:165px">
|
|
|
<a-row v-for="item in dataSource" :key="'activity_'+item.index" class="body-row">
|
|
|
<a-col class="body-col" :span="2">{{item.index}}</a-col>
|
|
|
<a-col class="body-col" :span="4">{{item.activityDate}}</a-col>
|
|
|
<a-col class="body-col" :span="9">{{item.activityName}}</a-col>
|
|
|
<a-col class="body-col" :span="9">{{item.activityPlace}}</a-col>
|
|
|
</a-row>
|
|
|
</vue-scroll>
|
|
|
</div>
|
|
|
<div v-if="showDataSource && dataSource.length === 0" class="no-data-div">
|
|
|
<a-empty/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</vue-scroll>
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
<div class="logo-content-style">
|
|
|
<img src="../assets/images/modalLogo.png" alt="" class="title-logo-png">
|
|
|
</div>
|
|
|
</modal-panel>
|
|
|
</template>
|
|
|
<script>
|
|
|
/*
|
|
|
* 图文详情弹出页面
|
|
|
*
|
|
|
* infoObj:{
|
|
|
* infoTitle:"",
|
|
|
* infoArr:[{'title':'发布人','value':'费利明'},{'title':'发布时间','value':'2022-06-30 16：00'}]
|
|
|
* content:""
|
|
|
* }
|
|
|
*
|
|
|
*
|
|
|
* */
|
|
|
import {Modal, Table, Row, Col, Empty, Spin} from 'ant-design-vue';
|
|
|
import ModalPanel from "../../../components/common/modal/centerModalPanel.vue";
|
|
|
import {swiper, swiperSlide} from "vue-awesome-swiper";
|
|
|
import "swiper/dist/css/swiper.css";
|
|
|
import ImgPreview from '../common/imgPreview.vue';
|
|
|
import moment from 'moment';
|
|
|
export default{
|
|
|
props: {
|
|
|
show: {
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
modalTitle: {
|
|
|
type: String,
|
|
|
default: "查看详情",
|
|
|
},
|
|
|
commonId: {
|
|
|
type: String,
|
|
|
default: ""
|
|
|
},
|
|
|
clubObj: {
|
|
|
type: Object,
|
|
|
default: () => {
|
|
|
}
|
|
|
},
|
|
|
commonQueryId: {
|
|
|
type: String,
|
|
|
default: ""
|
|
|
},
|
|
|
},
|
|
|
data(){
|
|
|
return {
|
|
|
spinning: false,
|
|
|
infoId: this.$props.commonId,
|
|
|
title: this.modalTitle, //弹出框标题
|
|
|
showPanel: this.show, //是否显示
|
|
|
listScroll: this.StaticParams.scrollOption,
|
|
|
//业务相关属性
|
|
|
clubId: this.$props.clubObj && this.$props.clubObj.club_id ? this.$props.clubObj.club_id : "",
|
|
|
clubName: this.$props.clubObj && this.$props.clubObj.club_name ? this.$props.clubObj.club_name : "",
|
|
|
memberNum: this.$props.clubObj && this.$props.clubObj.member_number ? this.$props.clubObj.member_number : 0,
|
|
|
clubDescribe: this.$props.clubObj && this.$props.clubObj.club_describe ? this.$props.clubObj.club_describe : "",
|
|
|
optionLeft: {
|
|
|
step: 1, // 数值越大速度滚动越快
|
|
|
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
direction: 2, // 0向下 1向上 2向左 3向右
|
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
|
|
},
|
|
|
swiperOption: {
|
|
|
autoplay: true,
|
|
|
speed: 1000,
|
|
|
loop: true,
|
|
|
slidesPerView: 5,
|
|
|
spaceBetween: 10,
|
|
|
// pagination: {
|
|
|
// el: ".swiper-pagination", //分页器
|
|
|
// clickable: true,
|
|
|
// },
|
|
|
},
|
|
|
imgList: [],//社团图片数据
|
|
|
activityList: [],//社团活动数据
|
|
|
columns: [
|
|
|
{
|
|
|
title: '序号',
|
|
|
dataIndex: 'index',
|
|
|
key: 'index',
|
|
|
align: "center",
|
|
|
width: 100
|
|
|
},
|
|
|
{
|
|
|
title: '日期',
|
|
|
dataIndex: 'activityDate',
|
|
|
key: 'activityDate',
|
|
|
align: "center",
|
|
|
width: 150
|
|
|
},
|
|
|
{
|
|
|
title: '活动名称',
|
|
|
dataIndex: 'activityName',
|
|
|
key: 'activityName',
|
|
|
align: "center"
|
|
|
},
|
|
|
{
|
|
|
title: '地点',
|
|
|
dataIndex: 'activityPlace',
|
|
|
key: 'activityPlace',
|
|
|
align: "center",
|
|
|
},
|
|
|
],//表格header
|
|
|
dataSource: [],//表格数据
|
|
|
showDataSource: false,
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
commonId: function (newVal) {
|
|
|
this.infoId = newVal;
|
|
|
this.getDataInfo();
|
|
|
},
|
|
|
modalTitle: function (newData) {
|
|
|
this.title = newData;
|
|
|
},
|
|
|
show: function (newData) {
|
|
|
this.showPanel = newData;
|
|
|
},
|
|
|
clubObj: function (newData) {
|
|
|
this.clubId = newData.club_id;
|
|
|
this.clubName = newData.club_name;
|
|
|
this.memberNum = newData.member_number;
|
|
|
this.clubDescribe = newData.club_describe;
|
|
|
this.getDataexReport();
|
|
|
this.getDataexReport2();
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
// if (this.infoId && this.infoId !== "") {
|
|
|
// this.getDataInfo();
|
|
|
// }
|
|
|
//this.getDataexReport();
|
|
|
},
|
|
|
methods: {
|
|
|
//获取社团风暴图片
|
|
|
getDataexReport: function () {
|
|
|
let param = {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "query_deyu_shetuan2",
|
|
|
"query_param": [
|
|
|
this.clubId + ""
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [],
|
|
|
"query_format": "json",
|
|
|
"query_group": []
|
|
|
}
|
|
|
this.imgList = [];
|
|
|
this.DataexReportInterface.callInterface([{
|
|
|
params: param,
|
|
|
method: "post",
|
|
|
}], (result) => {
|
|
|
if (result[0].data.success) {
|
|
|
let res = result[0].data.result;
|
|
|
if (res !== "") {
|
|
|
let dataList = JSON.parse(res);
|
|
|
if (dataList && dataList.length > 0) {
|
|
|
for (let i = 0, len = dataList.length; i < len; i++) {
|
|
|
let imgJson = dataList[i].attachment_json;
|
|
|
if (imgJson !== "") {
|
|
|
let imgArr = JSON.parse(imgJson);
|
|
|
this.imgList.push(imgArr);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//获取社团风暴活动
|
|
|
getDataexReport2: function () {
|
|
|
let param = {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "query_deyu_shetuan3",
|
|
|
"query_param": [
|
|
|
this.clubId + ""
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [],
|
|
|
"query_format": "json",
|
|
|
"query_group": []
|
|
|
}
|
|
|
this.spinning = true;
|
|
|
this.showDataSource = false;
|
|
|
this.dataSource = [];
|
|
|
this.DataexReportInterface.callInterface([{
|
|
|
params: param,
|
|
|
method: "post",
|
|
|
}], (result) => {
|
|
|
this.showDataSource = true;
|
|
|
this.spinning = false;
|
|
|
if (result[0].data.success) {
|
|
|
let res = result[0].data.result;
|
|
|
if (res !== "") {
|
|
|
let dataList = JSON.parse(res);
|
|
|
if (dataList && dataList.length > 0) {
|
|
|
for (let i = 0; i < dataList.length; i++) {
|
|
|
let dataInfo = dataList[i];
|
|
|
let obj = {
|
|
|
index: i + 1,
|
|
|
activityDate: moment(dataInfo.activity_date.replace('T', ' ').replace('Z', '')).format("YYYY-MM-DD"),
|
|
|
activityName: dataInfo.activity_name,
|
|
|
activityPlace: dataInfo.activity_place,
|
|
|
}
|
|
|
this.dataSource.push(obj);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
modalCallback: function (ary) {
|
|
|
if (ary[0] === "ok") {
|
|
|
//this.$emit("selectComplete", this.selectedDept);
|
|
|
} else {
|
|
|
this.infoTitle = "";
|
|
|
this.$emit("cancel", null);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
components: {
|
|
|
AModal: Modal,
|
|
|
ModalPanel,
|
|
|
swiper,
|
|
|
swiperSlide,
|
|
|
ImgPreview,
|
|
|
ATable: Table,
|
|
|
ARow: Row,
|
|
|
ACol: Col,
|
|
|
AEmpty: Empty,
|
|
|
ASpin: Spin
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
@import "../assets/scss/style";
|
|
|
|
|
|
/deep/ .dialog-style {
|
|
|
.ant-modal-content {
|
|
|
padding-left: 100px;
|
|
|
padding-right: 10px;
|
|
|
background: #01123E;
|
|
|
.ant-modal-header {
|
|
|
height: 50px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
background: #01123E;
|
|
|
border-bottom: 1px solid #1067B0;
|
|
|
margin-left: 100px;
|
|
|
.ant-modal-title {
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
}
|
|
|
.ant-modal-body {
|
|
|
.common-info-style {
|
|
|
width: 100%;
|
|
|
height: 630px;
|
|
|
padding-right: 50px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.title-content-style {
|
|
|
width: 100%;
|
|
|
min-height: 30px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
h1 {
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
}
|
|
|
.content-style {
|
|
|
width: 100%;
|
|
|
height: 600px;
|
|
|
margin-top: 10px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
.club-info-style {
|
|
|
width: calc(100% - 40px);
|
|
|
min-height: 180px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background-color: #4d5977;
|
|
|
border-radius: 5px;
|
|
|
color: white;
|
|
|
padding: 20px 10px 20px 30px;
|
|
|
position: relative;
|
|
|
justify-content: center;
|
|
|
margin: auto;
|
|
|
.title-box-style {
|
|
|
width: 30px;
|
|
|
height: 100px;
|
|
|
padding: 6px;
|
|
|
border-radius: 15px;
|
|
|
border: 1px solid $color-default-bright;
|
|
|
position: absolute;
|
|
|
left: -20px;
|
|
|
background-color: #011343;
|
|
|
color: $color-default-bright;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.info-row-style {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
.left-style {
|
|
|
width: 100px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
.right-style {
|
|
|
width: calc(100% - 100px);
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.img-content-style {
|
|
|
width: calc(100% - 40px);
|
|
|
min-height: 130px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background-color: #4d5977;
|
|
|
border-radius: 5px;
|
|
|
color: white;
|
|
|
padding: 20px 10px 20px 30px;
|
|
|
position: relative;
|
|
|
justify-content: center;
|
|
|
margin: 10px auto;
|
|
|
.title-box-style {
|
|
|
width: 30px;
|
|
|
height: 100px;
|
|
|
padding: 6px;
|
|
|
border-radius: 15px;
|
|
|
border: 1px solid $color-default-bright;
|
|
|
position: absolute;
|
|
|
right: -15px;
|
|
|
background-color: #011343;
|
|
|
color: $color-default-bright;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.banner {
|
|
|
width: 100%;
|
|
|
height: 90px;
|
|
|
padding-right: 20px;
|
|
|
.club-box-style {
|
|
|
width: 100px !important;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
background-color: #2c4876;
|
|
|
border-radius: 5px;
|
|
|
position: relative;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.info-content-style {
|
|
|
width: calc(100% - 40px);
|
|
|
min-height: 250px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
background-color: #4d5977;
|
|
|
border-radius: 5px;
|
|
|
color: white;
|
|
|
padding: 20px 10px 20px 30px;
|
|
|
position: relative;
|
|
|
margin: auto;
|
|
|
.title-box-style {
|
|
|
width: 30px;
|
|
|
height: 100px;
|
|
|
padding: 6px;
|
|
|
border-radius: 15px;
|
|
|
border: 1px solid $color-default-bright;
|
|
|
position: absolute;
|
|
|
left: -20px;
|
|
|
background-color: #011343;
|
|
|
color: $color-default-bright;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
top: 30%;
|
|
|
}
|
|
|
.table-box-style {
|
|
|
width: 100%;
|
|
|
height: 200px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.header-row {
|
|
|
.header-col {
|
|
|
height: 35px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-color: #2b7cad;
|
|
|
color: white;
|
|
|
border: 1px solid $color-default-bright;
|
|
|
}
|
|
|
}
|
|
|
.activity-list-scroll-style {
|
|
|
width: 100%;
|
|
|
height: 165px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.body-row {
|
|
|
.body-col {
|
|
|
height: 30px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-color: #011344;
|
|
|
color: $color-default-bright;
|
|
|
border: 1px solid $color-default-bright;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.no-data-div {
|
|
|
width: 100%;
|
|
|
height: 165px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-color: #011344;
|
|
|
}
|
|
|
}
|
|
|
.ant-table-wrapper {
|
|
|
.ant-table-body {
|
|
|
table {
|
|
|
.ant-table-thead {
|
|
|
tr th {
|
|
|
background-color: #2b7cad;
|
|
|
color: white;
|
|
|
}
|
|
|
}
|
|
|
.ant-table-tbody {
|
|
|
tr td {
|
|
|
background-color: #011344;
|
|
|
color: $color-default-bright;
|
|
|
padding: 10px 16px !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.ant-table-placeholder {
|
|
|
background-color: #011344;
|
|
|
.ant-empty .ant-empty-description {
|
|
|
color: white;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.logo-content-style {
|
|
|
.title-logo-png {
|
|
|
vertical-align: middle;
|
|
|
border-style: none;
|
|
|
width: 240px;
|
|
|
height: 150px;
|
|
|
position: absolute;
|
|
|
top: -10px;
|
|
|
left: -10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
