pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化分享朋友弹窗

pull/19/head
zyronon 4 years ago
parent
cc190593c1
commit
ef3d3ffe10
5 changed files with 224 additions and 240 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/components/BaseButton.vue
  2. 2
      src/components/Search.vue
  3. 13
      src/components/dialog/FromBottomDialog.vue
  4. 7
      src/pages/Test4.vue
  5. 441
      src/pages/home/components/ShareToFriend.vue

1
src/components/BaseButton.vue
Unescape View File

@ -117,6 +117,7 @@ export default {
&.dark { &.dark {
background: @second-btn-color; background: @second-btn-color;
color: @second-text-color;
} }
&.dark2 { &.dark2 {

2
src/components/Search.vue
Unescape View File

@ -2,7 +2,7 @@
<div class="search-ctn" :class="mode"> <div class="search-ctn" :class="mode">
<div class="search"> <div class="search">
<img v-if="isShowSearchIcon" class="search-icon" src="../assets/img/icon/search-gray.png" alt=""> <img v-if="isShowSearchIcon" class="search-icon" src="../assets/img/icon/search-gray.png" alt="">
<input type="text" :placeholder="placeholder" v-model="value"> <input type="text" :placeholder="placeholder" v-model="value" >
<div class="suffix"> <div class="suffix">
<slot v-if="$slots.default"></slot> <slot v-if="$slots.default"></slot>
<img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click.stop="clear"> <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click.stop="clear">

13
src/components/dialog/FromBottomDialog.vue
Unescape View File

@ -28,6 +28,8 @@
</template> </template>
<script> <script>
import Dom from "../../utils/dom";
export default { export default {
name: "FromBottomDialog", name: "FromBottomDialog",
props: { props: {
@ -122,7 +124,7 @@ export default {
this.$setCss(el, 'transform', `translate3d(0,0,0)`) this.$setCss(el, 'transform', `translate3d(0,0,0)`)
}, 0) }, 0)
setTimeout(() => { setTimeout(() => {
this.$setCss(el, 'transition-duration', `0ms`) // this.$setCss(el, 'transition-duration', `0ms`)
this.$setCss(el, 'transform', `none`) this.$setCss(el, 'transform', `none`)
done() done()
}, 200) }, 200)
@ -134,7 +136,9 @@ export default {
this.$setCss(el, 'transform', `translate3d(0,0,0)`) this.$setCss(el, 'transform', `translate3d(0,0,0)`)
}, },
leave(el, done) { leave(el, done) {
this.$setCss(el, 'transform', `translate3d(0,${this.height},0)`) //ref获取不到
let maxHeight = new Dom('.FromBottomDialog').css('max-height')
this.$setCss(el, 'transform', `translate3d(0,${maxHeight},0)`)
setTimeout(done, 200) setTimeout(done, 200)
}, },
afterLeave() { afterLeave() {
@ -156,12 +160,14 @@ export default {
if (this.$refs.dialog.scrollTop !== 0) return if (this.$refs.dialog.scrollTop !== 0) return
this.moveYDistance = e.touches[0].pageY - this.startLocationY this.moveYDistance = e.touches[0].pageY - this.startLocationY
if (this.moveYDistance > 0) { if (this.moveYDistance > 0) {
this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${this.moveYDistance}px,0)`) this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${this.moveYDistance}px,0)`)
} }
}, },
end(e) { end(e) {
if (!this.touchMoved) return; if (!this.touchMoved) return;
//点击 //点击
if (Date.now() - this.startTime < 150) return if (Date.now() - this.startTime < 150) return
//滑动 //滑动
@ -175,7 +181,7 @@ export default {
this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,0,0)`) this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,0,0)`)
setTimeout(() => { setTimeout(() => {
this.$setCss(this.$refs.dialog, 'transform', 'none') this.$setCss(this.$refs.dialog, 'transform', 'none')
this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`) // this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
}, 300) }, 300)
} }
} }
@ -196,6 +202,7 @@ export default {
left: 0; left: 0;
box-sizing: border-box; box-sizing: border-box;
border-radius: .5rem .5rem 0 0; border-radius: .5rem .5rem 0 0;
transition: all .3s;
&.dark { &.dark {
background: @main-bg; background: @main-bg;

7
src/pages/Test4.vue
Unescape View File

@ -1,13 +1,7 @@
<template> <template>
<div class="Test"> <div class="Test">
<base-button type="primary" @click="t = true">test</base-button> <base-button type="primary" @click="t = true">test</base-button>
<Search
class="ml2r mr2r"
placeholder="搜索"
v-model="createChatSearchKey"/>
<ShareToFriend v-model="t"/> <ShareToFriend v-model="t"/>
{{createChatSearchKey}}
</div> </div>
</template> </template>
<script> <script>
@ -31,7 +25,6 @@ export default {
data() { data() {
return { return {
t: false, t: false,
createChatSearchKey: ''
} }
}, },
methods: {}, methods: {},

441
src/pages/home/components/ShareToFriend.vue
Unescape View File

@ -2,75 +2,90 @@
<from-bottom-dialog <from-bottom-dialog
v-model="modelValue" v-model="modelValue"
@cancel="cancel" @cancel="cancel"
height="70vh"> :height="height">
<div class="create-chat-wrapper" v-show="!showJoinedChat"> <div class="content" :style="{minHeight:height}">
<Search <div class="create-chat-wrapper" v-show="!showJoinedChat">
:isShowText="isShowText" <Search
@click="isShowText = true" :isShowText="isShowText"
@notice="isShowText = false;" @click="isShowText = true;height = '100vh';"
@clear="isShowText = false" @notice="isShowText = false;height = '70vh';"
class="ml2r mr2r" showText="取消"
placeholder="搜索" notice="gray"
v-model="createChatSearchKey"/> class="ml2r mr2r"
<template v-if="createChatSearchKey"> placeholder="搜索"
<div class="search-result" v-if="searchFriends.length"> v-model="searchKey"/>
<div class="search-result-item" v-for="item in searchFriends" <template v-if="searchKey">
@click="item.select = !item.select;createChatSearchKey = ''"> <div class="friend-list" v-if="searchResult.length">
<img class="left" src="../../../assets/img/icon/head-image.jpeg" alt=""> <div class="friend-item" v-for="item in searchResult"
<div class="right"> @click="item.select = !item.select;searchKey = ''">
<div class="info"> <img class="left" :src="$imgPreview(item.avatar)" alt="">
<span class="name">{{ item.name }}</span> <div class="right">
<span class="account">{{ item.account ? '抖音号:' + item.account : '' }}</span> <div class="info">
<span class="name">
<span v-if="item.name.indexOf(searchKey) > -1">
{{ item.name.substr(0, item.name.indexOf(searchKey)) }}<span style="color: #fc2f56">{{
searchKey
}}</span>{{ item.name.substr(item.name.indexOf(searchKey) + searchKey.length) }}
</span>
<span v-else>{{ item.name }}</span>
</span>
</div>
<b-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
{{ item.shared ? '已' : '' }}分享
</b-button>
</div> </div>
<b-button type="primary">分享</b-button>
</div> </div>
</div> </div>
</div> <div class="no-result" v-else>
<div class="no-result" v-else> <div class="notice-h1">
<div class="notice-h1"> 搜索结果为空
搜索结果为空 </div>
</div> <div class="notice-h2">
<div class="notice-h2"> 没有搜索到相关的联系人
没有搜索到相关的联系人 </div>
</div>
</div>
</template>
<template v-else>
<div class="joined-chat" @click="showJoinedChat = true">
<img class="left" src="../../../assets/img/icon/people-gray.png" alt="">
<div class="right">
<span>已加入的群聊</span>
<back direction="right" mode="gray" scale=".7"/>
</div> </div>
</div> </template>
<div class="friend-list"> <template v-else>
<div class="index">所有朋友</div> <div class="joined-chat" @click="showJoinedChat = true">
<div class="friend-item" v-for="item in friends.all" @click="item.select = !item.select"> <img class="left" src="../../../assets/img/icon/people-gray.png" alt="">
<img class="left" :src="$imgPreview(item.avatar)" alt="">
<div class="right"> <div class="right">
<span>{{ item.name }}</span> <span>已加入的群聊</span>
<b-button type="primary">分享</b-button> <back direction="right" mode="gray" scale=".7"/>
</div> </div>
</div> </div>
</div> <div class="friend-list">
</template> <div class="index">所有朋友</div>
</div> <div class="friend-item" v-for="item in localFriends">
<div class="joined-chat-wrapper" v-show="showJoinedChat"> <img class="left" :src="$imgPreview(item.avatar)" alt="">
<div class="nav"> <div class="right">
<back @click="showJoinedChat = false" mode="light" scale="1"></back> <span>{{ item.name }}</span>
<span>已加入的群聊</span> <b-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
<span>&nbsp;</span> {{ item.shared ? '已' : '' }}分享
</b-button>
</div>
</div>
</div>
</template>
</div> </div>
<div class="joined-chat-wrapper" v-show="showJoinedChat">
<div class="nav">
<back @click="showJoinedChat = false" mode="light" scale="1"></back>
<span>已加入的群聊</span>
<span>&nbsp;</span>
</div>
<div class="chat-list"> <div class="chat-list">
<div class="chat-item" v-for="item in 15"> <div class="chat-item" v-for="item in localFriends">
<img class="left" src="../../../assets/img/icon/head-image.jpeg" alt=""> <img class="left" :src="$imgPreview(item.avatar)" alt="">
<div class="right"> <div class="right">
<div class="title"> <div class="title">
<div class="name">{{ text }}</div> <div class="name">{{ text }}</div>
<div class="num">(3)</div> <div class="num">(3)</div>
</div>
<b-button :type="item.shared?'dark':'primary'" @click="item.shared = true">
{{ item.shared ? '已' : '' }}分享
</b-button>
</div> </div>
<b-button type="primary">分享</b-button>
</div> </div>
</div> </div>
</div> </div>
@ -97,38 +112,49 @@ export default {
}, },
data() { data() {
return { return {
showDialog: false, height: '70vh',
showJoinedChat: false, showJoinedChat: false,
isShowText: false, isShowText: false,
createChatSearchKey: '', text:'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
localFriends: [], localFriends: [],
searchFriends: [] searchResult: [],
searchKey: '',
} }
}, },
watch: { watch: {
createChatSearchKey(newVal) { searchKey(newVal) {
if (newVal) { if (newVal) {
//TODO　搜索时仅仅判断是否包含了对应字符串，抖音做了拼音判断的 let temp = this.$clone(this.localFriends)
this.searchFriends = this.friends.all.filter(v => { this.searchResult = temp.filter(v => {
if (v.name.includes(newVal)) return true return v.name.includes(newVal) || v.account.includes(newVal);
return v.account.includes(newVal);
}) })
} else { } else {
this.searchFriends = [] this.searchResult = []
}
},
modelValue(newVal) {
if (newVal) {
this.localFriends = this.$clone(this.friends.all)
this.localFriends.map(v => v.shared = false)
} else {
this.searchKey = ''
this.height = '70vh'
this.isShowText = false
this.showJoinedChat = false
} }
} }
}, },
computed: { computed: {
...mapState(['friends']), ...mapState(['friends']),
selectFriends() { selectFriends() {
return this.friends.all.filter(v => v.select).length return this.localFriends.filter(v => v.shared)
} }
}, },
created() { created() {
}, },
methods: { methods: {
cancel() { cancel() {
this.height = '70vh'
this.$emit('update:modelValue', false) this.$emit('update:modelValue', false)
}, },
} }
@ -143,22 +169,31 @@ export default {
height: 2.6rem; height: 2.6rem;
} }
.create-chat-wrapper { .friend-list {
padding-bottom: 4rem; padding: 0 2rem;
background: @main-bg;
.index {
color: @second-text-color;
height: 6rem;
line-height: 6rem;
font-size: 1.3rem;
}
.joined-chat { .friend-item {
border-bottom: 1px solid @line-color; margin-bottom: 2rem;
height: 5rem;
padding: 0 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
//background: #fff;
&:nth-child(1) {
margin-top: 1rem;
}
.left { .left {
width: 2.2rem; width: 3.8rem;
height: 2.2rem; height: 3.8rem;
margin-left: 1rem; border-radius: 50%;
margin-right: 2rem; margin-right: 1rem;
} }
.right { .right {
@ -167,34 +202,32 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
img {
height: 2rem;
}
} }
} }
}
.friend-list { .content {
padding: 0 2rem;
.index { .create-chat-wrapper {
color: @second-text-color; padding-bottom: 4rem;
height: 6rem; background: @main-bg;
line-height: 6rem;
font-size: 1.3rem;
}
.friend-item { .joined-chat {
margin-bottom: 2rem; border-bottom: 1px solid @line-color;
height: 5rem;
padding: 0 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
//background: #fff;
&:nth-child(1) {
margin-top: 1rem;
}
.left { .left {
width: 3.8rem; width: 2.2rem;
height: 3.8rem; height: 2.2rem;
border-radius: 50%; margin-left: 1rem;
margin-right: 1rem; margin-right: 2rem;
} }
.right { .right {
@ -203,173 +236,123 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
img {
height: 2rem;
}
} }
} }
}
.btn-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: @main-bg;
//background: red;
display: flex;
align-items: center;
justify-content: center;
.btn { .btn-wrapper {
margin-bottom: 2rem; position: fixed;
width: calc(100% - 4rem); bottom: 0;
height: 4rem; left: 0;
right: 0;
background: @main-bg;
//background: red;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.4rem;
justify-content: center; justify-content: center;
background: #3f445c;
border-radius: .2rem;
&.primary { .btn {
background: @primary-btn-color; margin-bottom: 2rem;
width: calc(100% - 4rem);
height: 4rem;
display: flex;
align-items: center;
font-size: 1.4rem;
justify-content: center;
background: #3f445c;
border-radius: .2rem;
&.primary {
background: @primary-btn-color;
}
} }
} }
}
.search-result { .no-result {
padding: 0 2rem; height: 50vh;
.search-result-item {
margin-bottom: 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
flex-direction: column;
&:nth-child(1) { .notice-h1 {
margin-top: 1rem; font-size: 1.6rem;
}
.left {
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
margin-right: 1rem;
} }
.right { .notice-h2 {
margin-top: 1rem;
font-size: 1.4rem; font-size: 1.4rem;
flex: 1; color: @second-text-color;
display: flex;
align-items: center;
justify-content: space-between;
.info {
display: flex;
flex-direction: column;
.name {
font-size: 1.4rem;
}
.account {
font-size: 1.3rem;
color: @second-text-color;
}
}
img {
height: 2rem;
}
} }
} }
} }
.no-result { .joined-chat-wrapper {
height: 50vh; background: @main-bg;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.notice-h1 { .nav {
font-size: 1.6rem; font-size: 1.6rem;
padding: 2rem;
display: flex;
justify-content: space-between;
} }
.notice-h2 { .chat-list {
margin-top: 1rem; padding: 0 2rem;
font-size: 1.4rem;
color: @second-text-color;
}
}
}
.joined-chat-wrapper { .chat-item {
background: @main-bg; margin-bottom: 2rem;
display: flex;
.nav { align-items: center;
font-size: 1.6rem; position: relative;
padding: 2rem; overflow: hidden;
display: flex;
justify-content: space-between;
}
.chat-list {
padding: 0 2rem;
.chat-item {
margin-bottom: 2rem;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
&:nth-last-child(1) {
margin-bottom: 0;
}
&:nth-child(1) { &:nth-last-child(1) {
margin-top: 1rem; margin-bottom: 0;
} }
.left { &:nth-child(1) {
width: 3.8rem; margin-top: 1rem;
height: 3.8rem; }
border-radius: 50%;
margin-right: 1rem;
}
.right { .left {
font-size: 1.4rem; width: 3.8rem;
flex: 1; height: 3.8rem;
display: flex; border-radius: 50%;
align-items: center; margin-right: 1rem;
justify-content: space-between; }
.title { .right {
width: 55vw; font-size: 1.4rem;
overflow: hidden; flex: 1;
box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
.name { .title {
white-space: nowrap; width: 55vw;
text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
box-sizing: border-box;
display: flex;
align-items: center;
.name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.num {
margin-left: .5rem;
color: @second-text-color;
}
} }
.num { img {
margin-left: .5rem; height: 1.5rem;
color: @second-text-color;
} }
} }
img {
height: 1.5rem;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save