MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化分享朋友弹窗

Browse Source
This commit is contained in:
zyronon 2021-09-17 14:19:03 +08:00
parent cc190593c1
commit ef3d3ffe10
5 changed files with 253 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/BaseButton.vue
View File

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

2
src/components/Search.vue
View File

@ -2,7 +2,7 @@
<div class="search-ctn" :class="mode">
<div class="search">
<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">
<slot v-if="$slots.default"></slot>
<img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click.stop="clear">

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

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

7
src/pages/Test4.vue
View File

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

499
src/pages/home/components/ShareToFriend.vue
View File

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