上个小节我们已经能看到周日历界面的会议卡片了，而且按照具体日期也能查找到相对应的周日历数据。现在我们把点击会议卡片弹出会议概要详情的功能给做一下。这个功能的后端程序已经写完了，本小节需要我们写的是前端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);
    });
}