上个小节我们已经能看到周日历界面的会议卡片了，而且按照具体日期也能查找到相对应的周日历数据。现在我们把点击会议卡片弹出会议概要详情的功能给做一下。这个功能的后端程序已经写完了，本小节需要我们写的是前端JS代码。
一、熟悉弹窗页面
线下会议详情弹窗对应的是offline_meeting-info.vue页面，我们先来看看模型层都定义了什么东西？
data: function() {
return {
visible: false,
title: null,
date: null,
place: null,
start: null,
end: null,
members: [],
present: [],
unpresent: [],
status: null
};
},
看过了模型层的定义，我们再去看视图层的标签就更容易理解了。
<el-dialog title="会议概要信息" :close-on-click-modal="false" v-model="visible" width="450px">
<div>
<div class="banner"></div>
<el-row class="info">
<el-col :span="3" class="label">主题：</el-col>
<el-col :span="21">
<span class="value">{{ title }}</span>
</el-col>
</el-row>
<el-row class="info">
<el-col :span="3" class="label">日期：</el-col>
<el-col :span="9" class="value">{{ date }}</el-col>
<el-col :span="3" class="label">地点：</el-col>
<el-col :span="9" class="value">{{ place }}</el-col>
</el-row>
<el-row class="info">
<el-col :span="3" class="label">时间：</el-col>
<el-col :span="9" class="value">{{ start }} ~ {{ end }}</el-col>
<el-col :span="3" class="label">状态：</el-col>
<el-col :span="9" class="value">{{ status }}</el-col>
</el-row>
<el-row class="info member" v-if="['待审批', '未开始'].includes(status)">
<el-col :span="3" class="label">人员：</el-col>
<el-col :span="21" class="value">
<ul class="list">
<li class="item" v-for="one in members">
<img :src="one.photo" class="photo" />
<span class="name">{{ one.name }}</span>
</li>
</ul>
</el-col>
</el-row>
<el-row class="info member" v-if="['进行中', '已结束'].includes(status)">
<el-col :span="3" class="label">参会：</el-col>
<el-col :span="21" class="value">
<ul class="list">
<li class="item" v-for="one in present">
<img :src="one.photo" class="photo" />
<span class="name">{{ one.name }}</span>
</li>
</ul>
</el-col>
</el-row>
<el-row class="info member" v-if="['进行中', '已结束'].includes(status)">
<el-col :span="3" class="label">缺席：</el-col>
<el-col :span="21" class="value">
<ul class="list">
<li class="item" v-for="one in unpresent">
<img :src="one.photo" class="photo" />
<span class="name">{{ one.name }}</span>
</li>
</ul>
</el-col>
</el-row>
</div>
<template #footer>
<span class="dialog-footer"><el-button size="medium" @click="visible = false">关闭</el-button></span>
</template>
</el-dialog>
二、加载会议概要信息
会议概要信息是弹窗页面init()函数发出Ajax请求获取的，所以我们可以动手把这个init()给实现一下。
init: function(id, status) {
let that = this;
that.visible = true;
that.$nextTick(() => {
let data = {
id: id,
status: status
};
that.$http('meeting/searchMeetingInfo', 'POST', data, true, function(resp) {
that.title = resp.title;
that.date = resp.date;
that.place = resp.place;
that.start = resp.start;
that.end = resp.end;
if (resp.status == 1) {
that.status = '待审批';
} else if (resp.status == 3) {
that.status = '未开始';
} else if (resp.status == 4) {
that.status = '进行中';
} else if (resp.status == 5) {
that.status = '已结束';
}
if (resp.hasOwnProperty('members')) {
that.members = JSON.parse(resp.members);
}
if (resp.hasOwnProperty('present')) {
that.present = JSON.parse(resp.present);
}
if (resp.hasOwnProperty('unpresent')) {
that.unpresent = JSON.parse(resp.unpresent);
}
});
});
}
三、引用弹窗页面
在offline_meeting.vue页面，引用了弹窗页面，所以我们才能调用弹窗页面。
<template>
<div>
……
<info v-if="infoVisble" ref="info"></info>
……
</div>
</template>
<script>
import Info from './offline_meeting-info.vue';
export default {
components: {
Info
},
……
}
</script>
四、显示弹窗页面
在offline_meeting.vue页面中，用户点击会议卡片就能能看到弹窗页面，所以我们要写点击事件回调函数。
<div …… @click="infoHandle(calendar.map[day.date + '#' + one].id, calendar.map[day.date + '#' + one].status)">
</div>
infoHandle: function(id, status) {
this.infoVisble = true;
this.$nextTick(() => {
this.$refs.info.init(id, status);
});
}