vuex 封装应用modules,getters

README.md

@@ -7,7 +7,7 @@ vue-resource ?
 
 通过XHR来请求mock数据,本地调试使用express路由是可以返回数据;
 
-不过考虑线上(github.io)预览也要请求到mock数据,服务端的能力就逊色点就暂未使用;
+不过考虑线上(github.io)预览也要请求到mock数据,服务端的能力逊色点就暂未使用;
 
 所以 vue-resource 的数据请求方式 在代码中以require('mock/xxx')的方式实现;
 

src/app.vue

@@ -1,7 +1,7 @@
 <template>
     <header class="app-header">
         <div class="_effect"
-            :class="animatiion_out?'_effect--50':''">
+            :class="{'_effect--50':decline}">
             <index-header></index-header>
         </div>
     </header>
@@ -11,7 +11,8 @@
     </section>
     <footer class="app-footer _line-fine">
         <div class="_effect "
-            :class="animatiion_out?'_effect--50':''">
+            :class="{'_effect--50':decline}"
+            >
             <index-nav></index-nav>
         </div>
     </footer>
@@ -34,12 +35,12 @@ export default {
     store,
     data() {
         return {
-            animatiion_out: false
+            decline: false
         }
     },
     events:{
-        'route-pipe'(_out){
-            this.animatiion_out = _out
+        'route-pipe'(_decline){
+            this.decline = _decline
         }
     },
     components: {

src/assets/css/common.scss

@@ -67,7 +67,12 @@ body,
 ._scroll {
     overflow: auto;
 }
-
+._align-left{
+    text-align: left;
+}
+._align-right{
+    text-align: right;
+}
 .margin-top-0 {
     margin-top: 0;
 }
@@ -193,8 +198,8 @@ body,
 
 ._cover-top .top-title {
     transition: .2s all ease;
-    transform: translate3d(0%, 0, 0);
-    opacity: 1; 
+    // transform: translate3d(0%, 0, 0);
+    // opacity: 1; 
 }
 
 
@@ -247,6 +252,7 @@ body,
 
 ._cover-top .top-back {
     max-width: 85px;
+    float:left;
 }
 
 ._cover-top .top-back .iconfont {}
@@ -290,6 +296,7 @@ body,
 ._cover-top .top-other {
     height: 100%;
     width:50px;
+    float:right;
 }
 
 ._cover-top .top-other .iconfont {
@@ -327,18 +334,13 @@ body,
 
 
 /* effect30 */
-
-._effect,
-._effect,
 ._effect {
     opacity: 1;
     transition: .2s all ease;
 }
-
 ._effect--30 {
     transform: translate3d(-30%, 0, 0);
 }
-
 ._effect--50 {
     opacity: 0;
     transform: translate3d(-50%, 0, 0);

src/components/top-handle.vue

@@ -2,18 +2,15 @@
 <!--
 左侧
 props
-    backPath
     backText
-
 中间
 props
     curText
     decline
 或者
 slot
-<p class="_effect"
-slot='center'
-:class="animatiion_out?'_effect--50':''">
+<p
+slot='center'>
     <span class="top-title__text _ellipsis" v-text='topModel.curText'></span>
     <span class="top-title__num" v-text="'(320)'"></span>
     <span class="iconfont icon-mute" v-show='topModel.isMute'></span>
@@ -30,30 +27,31 @@ slot
     </div>
 -->
 <div class="_cover-top">
-    <div class="top-back _left">
+    <div class="top-back">
         <div class="_ellipsis iconfont icon-return-arrow"
             v-link="backPath"
             v-text="backText"></div>
     </div>
-    <div class="top-other _right" style="">
+    <div class="top-other" >
         <slot name="right">
-            <div class="_right" v-link="nextPath">
+            <div class="_align-right" v-link="nextPath">
                 <span class="iconfont" :class="nextIcon"></span>
             </div>
         </slot>
     </div>
-    <div class="top-title">
+    <div class="top-title _effect"
+        :class="{'_effect--50':decline}">
         <slot name="center">
-            <p class="_effect" :class="decline?'_effect--50':''">
+            <p>
                 <span v-text='curText'></span>
             </p>
         </slot>
     </div>
-
 </div>
 </template>
 <script>
 
+import { backPath } from 'getters'
 export default {
     props:{
         //返回路径
@@ -84,6 +82,7 @@ export default {
     },
     vuex:{
         getters:{
+            backPath
         }
     },
     data () {

src/mock/base-group.js

@@ -0,0 +1,40 @@
+//个人,群 公众号 基本　数据模型
+/*
+  id
+  name
+  wxid
+  qq
+  email
+  type  [friends:好友/group:群/service:服务号/sub:订阅号]
+  iconSrc
+  qrCode
+  signature   //签名
+  newsUnreadCount {Number} //未读
+  endTimeStr    //最后消息
+  endChatAuth   //最后消息作者
+  endChatTxt    //最后消息内容
+  chatBackground //聊天背景
+  newsMute  {Boolean} //消息免打扰
+
+ */
+module.exports = {
+    "base": {
+        "id": 2,
+        "name": "微信群01",
+        "wxid": "wxid_group01",
+        "qq": "00002",
+        "email": null,
+        "type": "group",
+        "iconSrc": "http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n7cawhj202q02qglk.jpg",
+        "qrCode": "",
+        "signature": "个性签名",
+    },
+    "chatBaseModel": {
+        "newsUnreadCount": 1, //未读
+        "endTimeStr": 1472632586443,
+        "endChatAuth": "杨涛",
+        "endChatTxt": "晚上打球",
+        "chatBackground": null, //聊天背景
+        "newsMute": true
+    }
+}

src/mock/base-person.js

@@ -0,0 +1,41 @@
+//个人,群 公众号 基本　数据模型
+/*
+  id
+  name
+  wxid
+  qq
+  email
+  type  [friends:好友/group:群/service:服务号/sub:订阅号]
+  iconSrc
+  qrCode
+  signature   //签名
+  newsUnreadCount {Number} //未读
+  endTimeStr    //最后消息
+  endChatAuth   //最后消息作者
+  endChatTxt    //最后消息内容
+  chatBackground //聊天背景
+  newsMute  {Boolean} //消息免打扰
+
+ */
+module.exports = {
+    "base": {
+        "id": 1,
+        "name": "杨涛",
+        // "remark":"杨涛",
+        "wxid": "wxid_yangtao",
+        "qq": "00001",
+        "email": "[email protected]",
+        "type": "firends",
+        "iconSrc": "http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",
+        "qrCode": "",
+        "signature": "个性签名",
+    },
+    "chatPrevivw": {
+        "newsUnreadCount": 1, //未读
+        "endTimeStr": 1472632586443,
+        "endChatAuth": "杨涛",
+        "endChatTxt": "晚上打球",
+        "chatBackground": null, //聊天背景
+        "newsMute": false
+    }
+}

src/mock/base-service.js

@@ -0,0 +1,40 @@
+//个人,群 公众号 基本　数据模型
+/*
+  id
+  name
+  wxid
+  qq
+  email
+  type  [friends:好友/group:群/service:服务号/sub:订阅号]
+  iconSrc
+  qrCode
+  signature   //签名
+  newsUnreadCount {Number} //未读
+  endTimeStr    //最后消息
+  endChatAuth   //最后消息作者
+  endChatTxt    //最后消息内容
+  chatBackground //聊天背景
+  newsMute  {Boolean} //消息免打扰
+
+ */
+ module.exports = {
+    "base": {
+        "id": 3,
+        "name": "服务号——JD",
+        "wxid": "wx_00003",
+        "qq": "00003",
+        "email": "[email protected]",
+        "type": "service",
+        "iconSrc": "http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n80l8ij202q02qmx2.jpg",
+        "qrCode": null,
+        "signature": "我是服务号",
+    },
+    "chatPrevivw": {
+        "newsUnreadCount": 1, //未读
+        "endTimeStr": 1472632586443,
+        "endChatAuth": "杨涛",
+        "endChatTxt": "服务号消息",
+        "chatBackground": null, //聊天背景
+        "newsMute": false
+    }
+}

src/mock/base-sub.js

@@ -0,0 +1,41 @@
+//个人,群 公众号 基本　数据模型
+/*
+  id
+  name
+  wxid
+  qq
+  email
+  type  [friends:好友/group:群/service:服务号/sub:订阅号]
+  iconSrc
+  qrCode
+  signature   //签名
+
+  newsUnreadCount {Number} //未读
+  endTimeStr    //最后消息
+  endChatAuth   //最后消息作者
+  endChatTxt    //最后消息内容
+  chatBackground //聊天背景
+  newsMute  {Boolean} //消息免打扰
+
+ */
+module.exports = {
+    "base": {
+        "id": 4,
+        "name": "订阅号",
+        "wxid": "wxid_sub",
+        "qq": "00004",
+        "email": "[email protected]",
+        "type": "sub", //关系:朋友
+        "iconSrc": "http://ww4.sinaimg.cn/mw690/d0d07035jw1f7f2n8ruarj202q02qdfp.jpg",
+        "qrCode": null,
+        "signature": "订阅号签名",
+    },
+    "chatPrevivw": {
+        "newsUnreadCount": 10, //未读
+        "endTimeStr": 1472632586443,
+        "endChatAuth": "订阅号",
+        "endChatTxt": "订阅号消息",
+        "chatBackground": null, //聊天背景
+        "newsMute": false
+    }
+}

src/mock/chat-config-group.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "groupNotice":""//群公告
+    "isStick": false,//置顶
+    "newsMute":true,//消息免打扰
+    "contactsSave":false,
+    "showGroupNickname":true,//显示群聊天昵称
+}
+

src/mock/chat-config-person.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "isStick": false,//置顶
+    "newsMute":true,//消息免打扰
+    "starFriends":false,//标星
+    "lookMePhotos":true,
+    "lookHisPhotos":true,
+    "blacklist":false,//"黑名单"
+}

src/mock/chat-config-public.js

@@ -0,0 +1,4 @@
+module.exports = {
+    "isStick": false,//置顶
+    "newsMute":true,//消息免打扰
+}

src/mock/chat-dialogue-group.js

@@ -0,0 +1,2 @@
+
+module.exports = []

src/mock/chat-dialogue-person.js

@@ -0,0 +1,5 @@
+//"dialogueModel":[{}],//聊天记录
+
+module.exports = [{
+
+}]

src/mock/chat-dialogue-sub.js

@@ -0,0 +1,2 @@
+
+module.exports = []

src/mock/chat-member.js

@@ -0,0 +1,15 @@
+/*
+    "chatMember":[{
+        "id": 1,
+        "name": "杨涛",
+        // "remark":"杨涛",
+        "wxid": "wxid_yangtao",
+        "qq": "00001",
+        "email": "00001@qq.com",
+        "type": "firends",
+        "iconSrc": "http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",
+        "qrCode": "",
+        "signature": "个性签名",
+    }]
+*/
+module.exports = arr;