Skip to content

Commit

Permalink
Merge pull request bailichen#2 from bailichen/master
Browse files Browse the repository at this point in the history
sdasd
  • Loading branch information
bailicangdu authored Jun 12, 2017
2 parents 6949be4 + 65b6fa6 commit ceff148
Show file tree
Hide file tree
Showing 35 changed files with 535 additions and 269 deletions.
83 changes: 53 additions & 30 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,37 @@
### 利用vue2+vuex写一个模仿微信app的单页面应用
使用SVG格式构建页面icon图


# 目标功能
- [x] 微信
- [x] 通讯录
- [x] 发现
- [x]
- [x] 设置
- [x] 新消息提醒
- [x] 勿扰模式
- [x] 聊天
- [x] widows 微信已登录
- [x] 搜索页
- [x] 对话页
- [x] 对话功能
- [x] 单人机器人智能对话页
- [x] 群聊
- [x] 朋友圈
- [x] 朋友圈点赞、评论
- [x] 个人中心
- [x] 详细资料
- [x] 更多
- [x] 个人相册
- [x] 更多
- [x] 收藏
- [x] 我的钱包
- [x] 购物
- [x] 设置
- [x] 登录



# 页面部分截图

### 底部导航
Expand All @@ -12,9 +43,14 @@

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/addressbook.jpg" width="300" height="530"/>

### 单人聊天、群聊
### 单人聊天

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/chatwo.gif" width="300" height="530" alt=""> <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/singlechat.gif" width="300" height="530" alt="">

### 群聊

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/groupchat.gif" width="300" height="530" alt="">

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/singlechat.gif" width="300" height="530" alt=""><img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/groupchat.gif" width="300" height="530" alt=""><img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/chatwo.gif" width="300" height="530" alt="">

### 发现

Expand All @@ -34,35 +70,22 @@

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/commont.gif" width="300" height="530"/>

### 个人资料
<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/infor.png" width="300" height="530"/> <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/photo.png" width="300" height="530"/>

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/collect.png" width="300" height="530"/> <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/card.png" width="300" height="530"/>

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/cardbag.png" width="300" height="530"/> <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/set.png" width="300" height="530"/>

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/newmess.png" width="300" height="530"/> <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/notrao.png" width="300" height="530"/>

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/chatset.png" width="300" height="530"/> <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/priat.png" width="300" height="530"/>

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/tongyong.png" width="300" height="530"/> <img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/aboutwx.png" width="300" height="530"/>

<img src="https://github.com/bailichen/vue-weixin/raw/master/printscreen/login.png" width="300" height="530"/>


# 目标功能
- [x] 微信
- [x] 通讯录
- [x] 发现
- [x]
- [x] 设置
- [x] 新消息提醒
- [x] 勿扰模式
- [x] 聊天
- [x] widows 微信已登录
- [x] 搜索页
- [x] 对话页
- [x] 对话功能
- [x] 单人机器人智能对话页
- [x] 群聊
- [x] 朋友圈
- [x] 朋友圈点赞、评论
- [x] 个人中心
- [x] 详细资料
- [x] 更多
- [x] 个人相册
- [x] 更多
- [x] 收藏
- [x] 我的钱包
- [x] 购物
- [x] 设置
- [x] 登录


# 项目布局
Expand Down Expand Up @@ -90,6 +113,7 @@
| |-- search // 搜索页面
| |-- dialogue // 微信首页(对话列表页)
| |--conversation // 对话详情页
|     |--chatmessage           //聊天信息
|     |--singlechat         //单人对话
|     |--groupchat         //群聊
|       |-- addressbook             // 通讯录
Expand Down Expand Up @@ -134,7 +158,6 @@
| |-- vuex // vuex的状态管理
| |-- modules // 加载各种store模块
| |-- action.js // 配置根actions
| |-- getters.js // 配置根getters
| |-- index.js // 引用vuex,创建store
| |-- mutation-types.js // 定义常量muations名
| |-- mutations.js // 配置根mutations
Expand Down
4 changes: 4 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
<defs>
<symbol viewBox="0 0 1024 1024" id="doubleperson">
<path d="M896.631124 705.610556l-162.718989-63.414285c0 0-31.03176-12.046361-43.087331-23.895223-7.749498-7.616468-7.188726-25.583678-0.331551-48.535413 6.856152-22.951735 90.273003-116.226095 90.273003-200.955848 0-130.854257-86.027305-236.94962-192.138018-236.94962-27.54638 0-53.725622 7.179516-77.410044 20.058848 2.912329 0.522909 5.805216 1.12359 8.674567 1.804089 88.643899 21.041222 155.617244 117.202329 155.617244 232.655827 0 84.729753-83.416851 178.004113-90.273003 200.955848-6.857175 22.951735-7.417947 40.918945 0.331551 48.535413 12.05557 11.848862 43.087331 23.895223 43.087331 23.895223l162.718989 63.414285c34.276664 12.30628 61.129242 45.61592 61.129242 82.089623l0 17.296945c0 19.655665-7.893784 35.534308-20.660552 46.581921l53.861722 0c39.73191 0 72.055083-24.352641 72.055083-64.151066l0-17.296945C957.760366 751.226476 930.908812 717.916836 896.631124 705.610556z" fill="#ffffff" p-id="1855"></path>
<path d="M738.037083 725.154681l-162.718989-63.414285c0 0-31.03176-12.046361-43.087331-23.895223-7.749498-7.616468-7.188726-25.583678-0.331551-48.535413 6.856152-22.951735 90.273003-116.226095 90.273003-200.955848 0-115.452475-66.973344-211.614605-155.617244-232.655827-2.869351-0.680499-5.761214-1.281179-8.674567-1.804089-9.092076-1.633197-18.386766-2.489704-27.846208-2.489704-106.10355 0-192.121646 106.096387-192.121646 236.956783 0 81.153298 74.332962 177.899736 83.504856 195.48423 9.18008 17.584494 6.945179 44.384883-0.301875 52.502771-10.881838 12.19474-50.64547 24.419156-50.64547 24.419156l-146.68992 65.375963c-34.269501 12.311397-61.121056 44.63457-61.121056 81.101109l0 17.296945c0 39.798425 32.32215 64.151066 72.04792 64.151066l246.033509 0 84.331687 0 262.039042 0c20.10899 0 38.311561-6.247284 51.394531-17.569144 12.766768-11.047614 20.660552-26.927279 20.660552-46.581921l0-17.296945C799.166325 770.770602 772.313747 737.460961 738.037083 725.154681z" fill="#ffffff" p-id="1856"></path>
</symbol>
<symbol viewBox="0 0 1024 1024" id="loading">
<path d="M586.24 868.11648c-16.00512-15.99488-35.328-23.93088-57.97888-23.93088-22.66112 0-41.984 8.05888-57.98912 23.93088-16.00512 16.00512-24.064 35.328-24.064 57.856 0 22.65088 7.936 41.85088 24.064 57.84576 16.00512 15.99488 35.328 23.93088 57.97888 23.93088 22.66112 0 41.86112-7.936 57.98912-23.93088 16.00512-15.99488 23.93088-35.328 24.064-57.856 0-22.39488-8.06912-41.71776-24.064-57.84576m-272.76288-120.4224c-17.54112-17.67424-38.78912-26.37824-63.744-26.37824s-46.08 8.83712-63.744 26.368c-17.54112 17.53088-26.368 38.77888-26.368 63.73376 0 24.832 8.82688 46.08 26.368 63.61088 17.664 17.664 38.912 26.368 63.744 26.368s46.08-8.83712 63.744-26.368c17.664-17.53088 26.49088-38.77888 26.49088-63.61088 0-24.82176-8.83712-46.08-26.50112-63.73376m-247.808-284.25216a97.62816 97.62816 0 0 0-21.11488 31.232 95.5392 95.5392 0 0 0-7.68 38.26688c0 13.312 2.56 26.112 7.68 38.26688a97.62816 97.62816 0 0 0 21.11488 31.232 97.28 97.28 0 0 0 31.232 20.992c12.16512 5.12 24.96512 7.80288 38.27712 7.80288s26.112-2.56 38.26688-7.81312a97.28 97.28 0 0 0 31.232-20.992 97.62816 97.62816 0 0 0 21.12512-31.232c5.12-12.15488 7.68-24.94464 7.68-38.25664 0-13.312-2.56-26.112-7.68-38.26688a97.62816 97.62816 0 0 0-21.12512-31.232 95.25248 95.25248 0 0 0-31.232-20.992c-12.15488-5.12-24.95488-7.68-38.26688-7.68s-26.112 2.56-38.26688 7.68a95.25248 95.25248 0 0 0-31.232 20.992M249.856 147.94752c-14.46912 0-28.29312 2.816-41.472 8.32512a104.2944 104.2944 0 0 0-33.792 22.77376c-9.86112 9.86112-17.408 21.12512-22.784 33.792a104.46848 104.46848 0 0 0-8.448 41.472c0 14.45888 2.816 28.28288 8.448 41.46176a105.66656 105.66656 0 0 0 22.784 33.792 105.6768 105.6768 0 0 0 33.792 22.77376c13.17888 5.632 27.00288 8.32512 41.472 8.32512a105.6768 105.6768 0 0 0 75.264-31.09888c9.86112-9.86112 17.408-21.12512 22.784-33.792 5.632-13.17888 8.32512-27.00288 8.32512-41.472s-2.816-28.28288-8.32512-41.46176a105.66656 105.66656 0 0 0-22.784-33.792 105.6768 105.6768 0 0 0-75.264-31.09888m384.256 36.47488c6.02112-14.20288 8.96-29.05088 8.96-44.544 0-15.60576-2.93888-30.45376-8.96-44.65664-5.76512-13.69088-13.95712-25.856-24.576-36.47488S586.752 39.936 572.928 34.048a113.22368 113.22368 0 0 0-44.66688-8.96c-15.616 0-30.464 2.93888-44.67712 8.96a111.33952 111.33952 0 0 0-36.352 24.576 113.21344 113.21344 0 0 0-24.576 36.46464 113.18272 113.18272 0 0 0-8.96 44.66688c0 15.49312 3.072 30.34112 8.96 44.544a111.31904 111.31904 0 0 0 24.576 36.352 112.6912 112.6912 0 0 0 36.352 24.576c14.21312 6.01088 29.06112 9.08288 44.67712 9.08288 15.48288 0 30.464-3.072 44.66688-9.09312a113.23392 113.23392 0 0 0 36.48512-24.576 111.79008 111.79008 0 0 0 24.69888-36.21888M859.136 863.50848c14.336-14.336 21.504-31.744 21.504-52.09088 0-20.34688-7.168-37.75488-21.504-52.08064-14.46912-14.336-31.86688-21.504-52.224-21.504-20.34688 0-37.75488 7.168-52.224 21.504-14.336 14.336-21.62688 31.744-21.62688 52.08064 0 20.35712 7.168 37.75488 21.62688 52.09088 14.336 14.336 31.744 21.504 52.224 21.504 20.34688 0.13312 37.76512-7.03488 52.224-21.504M921.6 467.39456c-18.04288 0-33.536 6.4-46.336 19.2-12.8 12.8-19.2 28.28288-19.2 46.336 0 18.04288 6.4 33.52576 19.2 46.20288 12.8 12.8 28.29312 19.18976 46.336 19.18976s33.536-6.4 46.336-19.18976c12.8-12.8 19.2-28.16 19.2-46.20288 0-18.05312-6.4-33.536-19.2-46.336-12.8-12.8-28.29312-19.2-46.336-19.2m-57.344-212.96128c0-15.73888-5.632-29.30688-16.896-40.448-11.13088-11.264-24.70912-16.76288-40.448-16.76288-15.872 0-29.30688 5.632-40.57088 16.77312-11.264 11.13088-16.896 24.69888-16.896 40.43776 0 15.872 5.632 29.30688 16.896 40.57088 11.264 11.13088 24.69888 16.76288 40.57088 16.76288 15.872 0 29.30688-5.632 40.448-16.76288 11.264-11.264 16.896-24.69888 16.896-40.57088z" fill="#46C01B" p-id="10802"></path>
</symbol>
Expand Down
Binary file added printscreen/aboutwx.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/card.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/cardbag.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/chatset.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/collect.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified printscreen/commont.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/computer.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified printscreen/find.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified printscreen/groupchat.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/infor.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified printscreen/like.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/login.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/newmess.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/notrao.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/photo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/priat.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/set.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified printscreen/shangchuan.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added printscreen/tongyong.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/header/head.vue
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@
header{
@include widthHeight(100%,2.06933rem);
background:$black;
z-index:10;
z-index:200;
color:#fff;
position: fixed;
.logoPart{
Expand Down
165 changes: 165 additions & 0 deletions src/frames/conversation/chatmessage/chatmessage.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<template>
<section class="child_page">
<head-top crossover="聊天信息"></head-top>
<section class="groupchat">
<ul class="groupchat_ul clear">
<li>
<img src="../../../images/a.jpg" alt="">
<span class="ellipsis">百里辰</span>
</li>
</ul>
</section>
<section class="chat">
<ul>
<li>
<div>使用听筒播放语音</div>
<div class="push-button">
<input class='tgl tgl-light' id='new' type='checkbox'>
<label class='tgl-btn' for='new'></label>
</div>
</li>
<li>
<div>回车键发送信息</div>
<div class="push-button">
<input class='tgl tgl-light' id='video' type='checkbox' checked="checked">
<label class='tgl-btn' for='video'></label>
</div>
</li>
<li>
<div>聊天背景</div>
</li>
<li>
<div>表情管理</div>
</li>
</ul>
<h1 class="chatrecord">聊天记录</h1>
<ul>
<li>
<div>聊天记录迁移</div>
</li>
<li>
<div>清空聊天记录</div>
</li>
</ul>
</section>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>

<script>
import headTop from 'src/components/header/head'
export default{
data(){
return{
}
},
created(){
},
mounted(){
},
components:{
headTop,
},
computed:{
},
methods:{
}
}
</script>
<style lang="scss" scoped>
@import "src/style/public";
.router-show-enter-active,.router-show-leave-active{
transition: all .4s;
}
.router-show-enter,.router-show-leave{
transform:translateX(100%)
}
.child_page{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 203;
background-color: #ebebeb;
}
.groupchat{
padding-top: 2.9rem;
background:#fff;
padding:2.9rem 0.8533333333rem 0;
ul{
box-sizing:border-box;
li{
float:left;
margin-right:0.8533333333rem;
margin-bottom:0.4266666667rem;
width:2.048rem;
img{
display:block;
width:2.048rem;
width:2.048rem;
}
span{
display:block;
width:2.048rem;
font-size:0.5333333333rem;
color:#666;
text-align:center;
margin-top:10px;
}
}
li:nth-of-type(5n+5){
margin-right:0;
}
}
}
.chat{
margin-top:0.8533333333rem;
.chatrecord{
padding-left:0.64rem;
padding-bottom:0.2133333333rem;
@include sizeColor(0.6rem,#888);
}
ul{
background:#fff;
padding:0 0.64rem;
margin-bottom:1rem;
li{
border-bottom:1px solid #f1f1f1;
padding:0.4266666667rem 0;
@include sizeColor(0.64rem,#333);
@include justify;
align-items:center;
.push-button{
}
.voice-music{
@include sizeColor(0.512rem,#9c9c9c);
}
}
li:last-child{
border:0;
}
}
.newshow{
li{
display: inherit;
.newshow_choose{
@include justify;
align-items:center;
}
.newshow_text{
@include sizeColor(0.5546666667rem,#909090);
margin-top:0.2133333333rem;
}
}
}
}
</style>
Loading

0 comments on commit ceff148

Please sign in to comment.