首页

上一章我们已经完成了登录功能，根据上一章的设计，登录完成之后，将进入首页，我们看一下首页的原型图：

再次强调，这个项目并不是正规的开发流程，可以说的难听些，就是想到哪做到哪，随便蔓延。

总体布局

经过原型图，我们可以分析出首页的大概结构：

1. 头部是一个包含三个item的tab,用于控制内容区域显示不同的组件
2. 足部是疑似导航效果的三个按钮，分别对应开启新记录，开启新的图片记录，以及当前月的记录数目。

剩下的就是内容主题部分。

暂时只考虑日记这个tab节点的内容部分。它是一个月份列表内嵌套了一个本月的日记的列表，所以需要一个月份字段，并且由于日记是分组的，当前显示的组也需要记录，同时，还要知道页面内正在显示的月是哪一个月，也就是，在页面右下角记录条目要知道根据那个月份和组来进行计算。

然后看记录的框框内都有什么内容：

首先，是记录时间，包括星期，日期，时间，但这些可以用一个date对象代表，然后日记的标题，日记内容，发送日记时候的心情，天气，以及是否打了标记，这些为了前后端方便，均用int型来表示。

所以最终经过分析最终的数据模型设计如下：

indexTodos:[
    {
        month:0,              //月份
        default:1,            //正在显示的月份
        todos:[{
            createTime:new Date(),   //记录时间
            item:'',                 //标题
            content:'',                 //内容
            weather:0,                 //天气
            mood:0,                     //心情
            bookmark:0,                 //标记
            groupid:0,                 //所属组
        }]
    }
]

接下来我们完成首页，首先在Views文件夹内创建Index.vue文件，然后安装登录页一样，完成一个基本的Vue文件的结构：

Index.vue:

<style scoped>
</style>
<template>
    <div id="main">
        <!--白云背景图-->
        <img src="../assets/bg.png" class="background">
    </div>
</template>
<script>
    export default {
    }
</script>

接下来按照刚刚的分析，将其分为头–内容–足三层结构：

<div id="main">
    <img src="../assets/bg.png" class="background">
    <div class="head">
    </div>
    <div id="contentPanel">
    </div>
    <div class="foot">
    </div>
</div>

接下来，由于内容部分需要动态切换，所以我们先给他加上动画效果，在考虑其他：

<div id="main">
    <img src="../assets/bg.png" class="background">
    <div class="head">
    </div>
    <div id="contentPanel">
        <transition   name="custom-classes-transition"
        enter-active-class="animated bounceInLeft"
        leave-active-class="animated fadeOut"
        :duration="{ enter: 700, leave: 200 }">
        </transition>
    </div>
    <div class="foot">
    </div>
</div>

头部

接下来头部比较简单，直接先duang的一些放入MuseUI的控件：

<div class="head">
    <mu-tabs class="tabtitle" :value="indexTab" lineClass="lineClass"  v-on:change="tabChange">
        <mu-tab value="tab1" :class="tab1Class" class="left-tab" title="日记" />
        <mu-tab value="tab2" :class="tab2Class" title="日历" />
        <mu-tab value="tab3" :class="tab3Class" class="right-tab" title="记录" />
    </mu-tabs>
</div>

你可能已经注意到了，这里面多了好多class，还有一个change的事件，其中class是因为他的默认样式与我们需要的不符，所以需要对组件进行一些修改，再次对不懂less感到忏悔，这是class的代码：

.tabtitle{
    background: #fff;
    padding-right: 30px;
    padding-left: 30px;
}
.tabtitle .tab{
    color: #5e35b1;
    border: 2px solid #5e35b1;
    border-width: 2px 0px;
    padding: 2px;
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 30px;
    font-weight: bold;
}
.tabtitle .tab-active{
    color: #fff;
    background: #5e35b1;
    border: 2px solid #5e35b1;
    border-width: 2px 0px;
    padding: 2px;
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 30px;
    font-weight: bold;
}
.tabtitle .left-tab{
    border-radius: 10px 0px 0px 10px;
    border: 2px solid #5e35b1;
    margin:0px;
    margin-left: 5px;
}
.tabtitle .right-tab{
    border-radius: 0px 10px 10px 0px;
    border: 2px solid #5e35b1;
    margin-right: 5px;
}
.lineClass{
    display: none;
}

注意tab项的左右样式不一致。

然后是change事件，根据文档可知，change的事件会带一个参数，参数值为tab项的值：

methods: {
    tabChange:function(event){
        //模拟hover伪类
        this.indexTab = event
        for (var i = 1;i<=3;i++){
            this['tab' + i + 'Class'] = 'tab'
        }
        this[event + 'Class'] = 'tab-active'
        switch (event) {
            case 'tab1':
            //记录操作
            break
            case 'tab2':
            //日历操作
            break
            case 'tab3':
            //我的操作
            break
        }
    }
}

同样在节点内有多个值都是绑定的，比如class的类名，以及tabitem默认值的指向等，绑定的值同样定义在script内，具体绑定值如下：

data () {
    return {
        indexTab:"tab1",
           tab1Class:"tab-active",
           tab2Class:"tab",
           tab3Class:"tab",
    }
},

足部

完成头部之后，接下来就开始弄足部，足部也很简单，同样使用MuseUIDD组件，这次我们使用Bottom Navigation,当然同样需要修改css和添加不同的事件，足部暂时的代码如下：

<div class="foot">
    <mu-bottom-nav class="bottom-nav"  shift v-on:change="navChange">
        <mu-bottom-nav-item value="edit" title="" class="navItemClass" iconClass="iconclass" activeClass="iconclass" icon="edit"/>
        <mu-bottom-nav-item value="photo" title=""  class="navItemClass" style="width:34%" iconClass="iconclass" activeClass="iconclass" icon="local_see"/>
        <div class="navItemClass"  >{{ itemnumber }}篇日记</div>
    </mu-bottom-nav>
</div>

首先看到的应该就是第三个item，并没有使用mu-bottom-nav-item而是使用了一个普通的div，并绑定了一个itemnumber，将itemnumber添加到data内后的代码：

data () {
    return {
        itemnumber:1,
        indexTab:"tab1",
           tab1Class:"tab-active",
           tab2Class:"tab",
           tab3Class:"tab",
    }
},

然后，是对mu-bottom-nav样式的修改，这个因为都是静态的，比起头部来说就简单多了：

.bottomNav{
    position: absolute;
    bottom: 0px;
    background: #fff;
    color: #757575;
}
.navItemClass{
    width:33%;
}
.iconclass{
    color: #757575;
}

然后就是这个组件的change事件，由于这个组件没有设置默认值，所以只要点击即触发change事件：

navChange:function(event){
    if(event=='edit'){
        //新建日记
    }else if(event=='photo'){
        //拍照
    }
},

当前效果

经过书写后，当前的效果如下：

目前来看，基本符合电影截图中的样式，然后就是最最重要的内容页了，下一章将继续完善.

谢谢观看