Skip to content

Commit

Permalink
vuex调试
Browse files Browse the repository at this point in the history
  • Loading branch information
@useryangtao
useryangtao committed Sep 12, 2016
1 parent 879a7b6 commit 98c18dd
Show file tree
Hide file tree
Showing 10 changed files with 185 additions and 169 deletions.
3 changes: 2 additions & 1 deletion build/webpack.base.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ module.exports = {
'topHandle':path.resolve(__dirname,'../src/components/top-handle.vue'),
'store':path.resolve(__dirname,'../src/vuex/store'),
'getters':path.resolve(__dirname,'../src/vuex/getters'),
'actions':path.resolve(__dirname,'../src/vuex/actions')
'actions':path.resolve(__dirname,'../src/vuex/actions'),
'mock':path.resolve(__dirname,'../src/mock'),
}
},
resolveLoader: {
Expand Down
47 changes: 43 additions & 4 deletions src/mock/chat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,35 @@ var list = [{
"qrCode": "",
"signature": "个性签名"
},
//对话列表基本项
"chatBaseModel": {
"newsUnreadCount": 1,
"endTimeStr": 1472632586443,
"endChatAuth": "杨涛",
"endChatTxt": "晚上打球",
},
//对话框底部菜单
"chatDialogueBarModel":{
menu:[{
title:'',
link:'',
subMenu:[{
title:'',
link:''
},{
title:'',
link:''
}]
}]
},
"chatDialogueModel": [],
"chatMemberModel": [{},{},{},{}],
"chatConfigGroupModel": {
"chatMemberModel": [
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"},
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"},
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"},
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"},
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"}],
"chatConfigModel": {
"chatBackground": null, //背景
"groupNotice": "", //群公告
"isStick": false, //置顶
Expand All @@ -44,9 +64,28 @@ var list = [{
"endChatAuth": "杨涛",
"endChatTxt": "晚上打球",
},
//对话框底部菜单
"chatDialogueBarModel":{
menu:[{
title:'',
link:'',
subMenu:[{
title:'',
link:''
},{
title:'',
link:''
}]
}]
},
"chatDialogueModel": [],
"chatMemberModel": [{},{},{},{}],
"chatConfigPersonModel": {
"chatMemberModel": [
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"},
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"},
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"},
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"},
{"id": 1,iconSrc:"http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg",name:"yangtao01"}],
"chatConfigModel": {
"isStick": false,//置顶
"newsMute":true,//消息免打扰
"starFriends":false,//标星
Expand Down
12 changes: 6 additions & 6 deletions src/route-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,12 @@ export default function(router) {
'dialogue': dialogue
}
},
'*':{
name:'404',
component:resolve=>{
require(['./views/404.vue'],resolve)
}
},
// '*':{
// name:'404',
// component:resolve=>{
// require(['./views/404.vue'],resolve)
// }
// },
'/contact': {
component: resolve => {
require(['./views/contact.vue'], resolve)
Expand Down
126 changes: 44 additions & 82 deletions src/views/chat.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
<template>
<div class="_full_inner _scroll _effect component-chat"
:class="{'_effect--30':decline}">
<search-bar :search-id='"abc"'></search-bar>
<search-bar></search-bar>
<ul class="wechat-list">
<li class="item _line-fine" v-for="item in wechat_list">
<li class="item _line-fine" v-for="item in menu_list">
<div class="info"
:class="{
'current':currentIndex==$index,
'active':activeIndex==$index
}"
v-touch:swipeleft="item_eLeft($event,$index)"
@touchstart="info_touchstart($index)"
data-touchend="info_touchend"
v-touch:tap="info_tap($index)"
v-touch:swipeleft="info_swipeleft($index)"
v-touch-options:swipe="{ direction: 'horizontal' }">

<div class="ico-box">
Expand Down Expand Up @@ -49,12 +52,7 @@ import { wechat_list } from 'getters'
import {
get_menu_wechat_list,
set_menu_active,
set_dialogue_id,
set_dialogue_type,
set_dialogue_bar,
set_dialogue,
set_chat_member,
set_chat_config
set_chat,
} from '../vuex/actions'
import searchBar from 'components/search-bar.vue'
Expand All @@ -67,28 +65,29 @@ export default {
actions:{
get_menu_wechat_list,
set_menu_active,
set_dialogue_id,
set_dialogue_type,
set_dialogue_bar,
set_dialogue,
set_chat_member,
set_chat_config
set_chat
}
},
mixins:[utils],
route:{
activate({from,to,next}) {
var menuArr = this.wechat_list;
if(menuArr[0].base !=='undefined'){
menuArr = require('mock/chat')
}
this.menu_list = menuArr;
this.set_menu_active(0);
this.get_menu_wechat_list()
next()
}
},
data() {
return {
menu_list:[],
decline: false,
currentIndex:-1,//列表item处在左划状态
activeIndex:-1,//列表item处在点击状态
touchSwipe:false,//验证是否处于左划状态
isTouchSwipe:false,//验证是否处于左划状态
touchInvalid:false//为true的时候touch无效,(touchmove,touchcancel的时候为true)
}
},
Expand All @@ -99,19 +98,43 @@ export default {
}
},
methods: {
item_eLeft: function(e,_index) {
$(".item .info").removeClass('active')
info_touchstart(_index){
this.currentIndex = -1
this.touchInvalid = false
if(!this.isTouchSwipe){
this.activeIndex = _index;
}
},
info_tap(){
console.log("tap")
var index = this.activeIndex;
if(index>=0){
this.activeIndex = -1;
this.set_chat(this.wechat_list[index])
this.$router.go({path:"/chat/dialogue"})
}
this.isTouchSwipe = false;
},
info_touchend(){
this.activeIndex = -1;
console.log("touchend")
},
info_swipeleft: function(_index) {
console.log('swipeleft')
this.activeIndex = -1;
event.stopPropagation()
if(!this.touchSwipe){
this.touchSwipe = true
if(!this.isTouchSwipe){
this.isTouchSwipe = true
this.currentIndex = _index
}else{
this.touchSwipe = false
this.isTouchSwipe = false
}
}
},
filters:{
f_news:function(obj,attr){
var obj = obj || {};
let newsClass = obj.newsMute?'_news-dot':'_news-count'
let newsText = !obj.newsMute?obj.newsUnreadCount:''
let newsShow = (obj.newsUnreadCount>0)
Expand All @@ -127,68 +150,7 @@ export default {
searchBar
},
ready(){
console.log(this.wechat_list);
let self = this
/*
手势:touchend 之前没有 touchmove,touchmove 的时候 router.go
手势:swipeLeft .current
状态:已左划 的时候载 执行左划或者touch(start,end)事件都不生效只会恢复默认
状态:touchstart,但touchend不在当前元素会不进行跳转
缺点:不好的交互,多手指touchstart会造成不好的交互
*/
$(".wechat-list").on("touchstart",".item .info",function(){
var index = $(this).index();
self.currentIndex = -1
self.touchInvalid = false
if($(".tips-menu").hasClass('tips-open')){
self.touchSwipe = true
$(".tips-menu").removeClass('tips-open')
}
if(!self.touchSwipe){
self.activeIndex = index;
// $(this).addClass('active')
}
})
$(".wechat-list").on("touchmove",".item .info",function(){
self.touchInvalid = true
})
$(".wechat-list").on("touchcancel",".item .info",function(){
// $(this).removeClass('active')
self.activeIndex = -1;
self.touchInvalid = true
})
$(".wechat-list").on("touchend",".item .info",function(){
// $(this).removeClass('active')
self.activeIndex = -1;
if(!!self.touchSwipe){
self.touchSwipe = false
}else{
if(!self.touchInvalid){
this.touchSwipe = true;
var index = $(this).index();
var obj = self.wechat_list[index];
var id = self.wechat_list[index].base.id;
self.set_dialogue_id(id)
// self.set_dialogue_bar('dialogueBar')
self.set_dialogue_bar('dialogueBarPerson')
self.set_dialogue_type(obj.base.type)
self.set_dialogue(obj.chatDialogueModel)
console.log(obj.chatMemberModel)
self.set_chat_member(obj.chatMemberModel)
if(obj.base.type==='friends'){
self.set_chat_config(obj.chatConfigPersonModel)
}else if(obj.base.type==='group'){
self.set_chat_config(obj.chatConfigGroupModel)
}
self.$router.go({path:"/chat/dialogue"})
}
}
})
}
}
Expand Down
22 changes: 14 additions & 8 deletions src/views/chat/chat-info.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,19 @@
<div slot="center">
<p>
<span v-text="topModel.curText"></span>
<span class="personNum">420</span>
<span class="personNum" v-text="chat_member.length"></span>
</p>
</div>
</top-handle>
<div class="_cover-content _effect"
:class="{'_effect--30':decline}">
<div class="chat-detail-content">
<ul class="chat-detail-entry-collect">
<li v-for="i in 8">
<div class="pic" style="background-image:url(http://ww1.sinaimg.cn/mw690/d0d07035jw1f7f2n6w1j1j20e60e6wg4.jpg)">
<li v-for="item in chat_member"
v-touch:tap="go_Info(item.id)">
<div class="pic" :style="{backgroundImage:'url('+item.iconSrc+')'}">
</div>
<p class="username _ellipsis">杨涛yangtao</p>
<p class="username _ellipsis" v-text="item.name">杨涛yangtao</p>
</li>
<li>
<div class="pic">
Expand Down Expand Up @@ -50,7 +51,7 @@
</template>
<script>
import utils from 'utils'
// import { } from 'getters'
import { chat_member } from 'getters'
// import { } from 'actions'
import topHandle from 'topHandle'
Expand All @@ -59,7 +60,7 @@ export default {
mixins:[utils],
vuex:{
getters:{
chat_member
},
actions:{}
},
Expand All @@ -78,8 +79,8 @@ export default {
decline:false,
topModel:{
backText:'',
curText:'',
nextPath:{poth:''},
curText:'聊天信息',
nextPath:{path:''},
nextIcon:''
}
}
Expand All @@ -91,6 +92,11 @@ export default {
this.decline = _decline
}
},
methods:{
go_Info(){
this.$router.go({path:'person-info',append:true})
}
},
components:{
topHandle
}
Expand Down
Loading

0 comments on commit 98c18dd

Please sign in to comment.