Skip to content

Commit

Permalink
1.微信,通讯录模块全部完成 2.添加朋友圈和小程序
Browse files Browse the repository at this point in the history
  • Loading branch information
@CoderTonyChan
CoderTonyChan committed Jan 11, 2018
1 parent 8d9a3cb commit 789c046
Show file tree
Hide file tree
Showing 8 changed files with 1,484 additions and 4 deletions.
427 changes: 427 additions & 0 deletions src/components/Setting.vue
View file

Large diffs are not rendered by default.

106 changes: 106 additions & 0 deletions src/components/search.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<template>
<section>
<head-top crossover="true" search="true">
<section slot="searchpart">
<section class="searchpart" >
<div class="searchpart_svg">
<svg fill="#fff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#search"></use>
</svg>
</div>
<div class="searchpart_input">
<input type="text" :placeholder="reminder"/>
</div>
</section>
</section>
</head-top>
<section class="search">
<h1>搜索指定内容</h1>
<ul class="clear">
<li v-for="item in searchlist" @click="changeValue(item.title)">{{item.title}}</li>
</ul>
</section>
</section>
</template>

<script>
import headTop from './Nav'
import { searchList } from '../service/getData.js'
export default {
data () {
return {
reminder: '搜索', //
searchlist: [] // 搜索字段数据
}
},
created () {
},
mounted () {
searchList().then(res => {
this.searchlist = res
})
},
components: {
headTop
},
computed: {
},
methods: {
changeValue (title) {
this.reminder = '搜索' + title
}
}
}
</script>
<style lang="scss" scoped>
@import "../style/public";
.searchpart {
@include widthHeight(12rem,1.2rem);
border-bottom: 1px solid #45c01a;
@include justify(flex-start);
align-items: center;
.searchpart_svg {
@include widthHeight(0.8rem,0.8rem);
margin-right: 0.4693333333rem;
svg {
@include widthHeight(100%,100%);
}
}
.searchpart_input {
input {
display: block;
width: 10rem;
line-height: 1rem;
background: none;
@include sizeColor(0.615rem,#fff);
}
}
}
.search {
padding-top: 4.5rem;
h1 {
width: 100%;
text-align: center;
@include sizeColor(0.6rem,#b1b1b1);
padding-bottom: 2.1333333333rem;
}
ul {
width: 12.8rem;
margin: 0 auto;
box-sizing: border-box;
li {
float: left;
width: 33.33%;
border-right: 1px solid #dadada;
text-align: center;
@include sizeColor(0.6rem,#45c01a);
margin-bottom: 2.24rem;
}
li:nth-of-type(3n + 3) {
border-right: 0;
}
}
}
</style>
227 changes: 227 additions & 0 deletions src/frames/dialogue/push/computer.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
<template>
<section>
<h1 class="goback">
<span @click="$router.go(-1)">关闭</span>
</h1>
<section class="computer">
<section class="computer_svg">
<div class="svgone">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#computer"></use>
</svg>
</div>
<div class="svgtwo" v-show="mute">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#phonemute"></use>
</svg>
</div>
</section>
<p class="computer_text">Windows 微信已登录</p>
<p class="computer_text">如果不是本人操作，可以立即退出</p>
<section class="soundoff">
<div class="silence">
<svg @click="ifMute">
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="mute ? '#lightmute' : '#mute'"></use>
</svg>
</div>
<div class="silence">
<router-link to="/transfer">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#file"></use>
</svg>
</router-link>
</div>
</section>
<section class="exitw">
<div @click="exitWindows">退出 Windows 微信</div>
</section>
</section>
<section class="warn" v-show="coverShow">
<div class="warn_bg"></div>
<div class="warn_text">
<h1>
提示
</h1>
<p>是否退出 Windows 微信 ？</p>
<div class="warn_obt">
<span @click="cancel">取消</span>
<span @click="ensure">确定</span>
</div>
</div>
</section>
</section>
</template>

<script>
import headTop from '@/components/Nav'
import footGuide from '@/components/TarBar'
import { mapState, mapMutations } from 'vuex'
export default {
data () {
return {
coverShow: false // 弹出层
}
},
created () {
},
mounted () {
},
components: {
headTop,
footGuide
},
computed: {
...mapState([
'mute'
])
},
methods: {
...mapMutations([
'RECORD_MUTE',
'COMPUTER_SHOW'
]),
ifMute () {
// 记录是否静音
if (!this.mute) {
this.RECORD_MUTE(true)
} else {
this.RECORD_MUTE(false)
}
},
exitWindows () {
this.coverShow = true
},
cancel () {
this.coverShow = false
},
ensure () {
this.COMPUTER_SHOW(false)
this.coverShow = false
this.$router.push('/dialogue') // 跳转页面
}
}
}
</script>
<style lang="scss" scoped>
@import "../../../style/public";
.goback {
width: 100%;
padding-top: 1.28rem;
span {
display: block;
@include sizeColor(0.9386666667rem,#1aad19);
margin-left: 1.0666666667rem;
}
}
.computer {
padding-top: 3rem;
.computer_svg {
width: 7.9786666667rem;
margin: 0 auto;
position: relative;
.svgone {
@include widthHeight(7.9786666667rem,6.144rem);
svg {
@include widthHeight(100%, 100%);
}
}
.svgtwo {
position: absolute;
@include widthHeight(1.8rem,2.8rem);
background: #efeef2;
top: 2.8266666667rem;
right: -0.6rem;
svg {
@include widthHeight(100%, 100%);
}
}
}
.computer_text {
width: 100%;
text-align: center;
@include sizeColor(0.7386666667rem,#353535);
margin-top: 1rem;
}
.computer_text:nth-of-type(2) {
margin-top: 0.5rem;
@include sizeColor(0.6533333333rem,#999999);
}
.soundoff {
width: 10.752rem;
margin: 0 auto;
@include justify;
padding-top: 2.1333333333rem;
.silence {
@include widthHeight(3.4133333333rem,3.4133333333rem);
background: #fff;
border-radius: 50%;
position: relative;
svg {
@include widthHeight(1.3226666667rem,1.28rem);
@include center;
}
}
}
.exitw {
width: 9.304rem;
margin: 0 auto;
padding-top: 2.1333333333rem;
padding-bottom: 1.0666666667rem;
div {
@include widthHeight(9.304rem, 1.52rem);
line-height: 1.52rem;
border: 3px solid #28b126;
@include sizeColor(0.732rem,#28b126);
border-radius:5px;
text-align: center;
}
}
}
.warn {
position: absolute;
@include widthHeight(100%, 100%);
top: 0;
left: 0;
.warn_bg {
position: fixed;
@include widthHeight(100%, 100%);
background: #000;
opacity: 0.3;
top: 0;
left: 0;
}
.warn_text {
@include widthHeight(12.0466666667rem,6.6426666667rem);
padding: 0.9386666667rem 1.152rem 0.7893333333rem 0.78933rem;
border-radius: 5px;
position: fixed;
background: #fff;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
h1 {
@include sizeColor(0.9rem,#202020);
padding-bottom: 0.4533333333rem;
}
p {
@include sizeColor(0.7rem,#202020);
padding-bottom: 1rem;
}
.warn_obt {
@include justify(flex-end);
span {
display: block;
@include sizeColor(0.7rem,#808080);
}
span:nth-of-type(2) {
@include sizeColor(0.7rem,#1aad19);
margin-left: 1.0666666667rem;
}
}
}
}
</style>
25 changes: 25 additions & 0 deletions src/frames/dialogue/push/transfer.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<template>
<section>
<!-- 头部 -->
<Nav logo-part="true" search-part="true" add="true"></Nav>
<h1>通讯录</h1>
<h2>传送文件</h2>
<!-- 底部导航 -->
<TarBar></TarBar>
</section>
</template>

<script>
import Nav from '@/components/Nav'
import TarBar from '@/components/TarBar'
export default {
components: {
Nav,
TarBar
}
}
</script>

<style lang="scss">
</style>
15 changes: 13 additions & 2 deletions src/frames/find/find.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,30 @@
<section>
<!-- 头部 -->
<Nav logo-part="true" search-part="true" add="true"></Nav>
<h1>通讯录</h1>
<h2>发现</h2>
<!-- <h1>通讯录</h1>
<h2>发现</h2> -->
<find-me></find-me>
<!-- 底部导航 -->
<TarBar></TarBar>
<transition name="router-show">
<router-view></router-view>
</transition>
</section>
</template>

<script>
import Nav from '../../components/Nav'
import findMe from '../../components/Setting'
import TarBar from '../../components/TarBar'
export default {
data () {
return {
newtext: true
}
},
components: {
Nav,
findMe,
TarBar
}
}
Expand Down
Loading

0 comments on commit 789c046

Please sign in to comment.