首页
上一章我们已经完成了登录功能，根据上一章的设计，登录完成之后，将进入首页，我们看一下首页的原型图：
再次强调，这个项目并不是正规的开发流程，可以说的难听些，就是想到哪做到哪，随便蔓延。
总体布局
经过原型图，我们可以分析出首页的大概结构：
- 头部是一个包含三个item的tab,用于控制内容区域显示不同的组件
- 足部是疑似导航效果的三个按钮，分别对应开启新记录，开启新的图片记录，以及当前月的记录数目。
剩下的就是内容主题部分。
暂时只考虑日记这个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- 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- 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="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{
33%;
}
.iconclass{
color: #757575;
}
然后就是这个组件的change事件，由于这个组件没有设置默认值，所以只要点击即触发change事件：
navChange:function(event){
if(event=='edit'){
//新建日记
}else if(event=='photo'){
//拍照
}
},
当前效果
经过书写后，当前的效果如下：
目前来看，基本符合电影截图中的样式，然后就是最最重要的内容页了，下一章将继续完善.
谢谢观看