372 lines
8.8 KiB
Vue
372 lines
8.8 KiB
Vue
<template>
|
|
<from-bottom-dialog
|
|
:page-id="pageId"
|
|
v-model="modelValue"
|
|
@cancel="cancel"
|
|
maskMode="light"
|
|
:height="height">
|
|
<div class="content" :style="{minHeight:height}">
|
|
<div class="create-chat" v-show="!showJoinedChat">
|
|
<Search
|
|
:isShowRightText="isShowRightText"
|
|
@click="isShowRightText = true;height = '100vh';"
|
|
@notice="isShowRightText = false;searchKey = '';height = '70vh';"
|
|
rightText="取消"
|
|
rightTextColor="gray"
|
|
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" v-lazy="$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>
|
|
</div>
|
|
</div>
|
|
<div class="no-result" v-else>
|
|
<div class="notice-h1">
|
|
搜索结果为空
|
|
</div>
|
|
<div class="notice-h2">
|
|
没有搜索到相关的联系人
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="joined-chat-group-nav" @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 class="friend-list">
|
|
<div class="index">所有朋友</div>
|
|
<div class="friend-item" v-for="item in localFriends">
|
|
<img class="left" v-lazy="$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-group" v-show="showJoinedChat">
|
|
<div class="nav">
|
|
<back @click="showJoinedChat = false" mode="light" scale="1"></back>
|
|
<span>已加入的群聊</span>
|
|
<span> </span>
|
|
</div>
|
|
|
|
<div class="chat-list">
|
|
<div class="chat-item" v-for="item in localFriends">
|
|
<img class="left" v-lazy="$imgPreview(item.avatar)" alt="">
|
|
<div class="right">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</from-bottom-dialog>
|
|
</template>
|
|
<script>
|
|
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
|
|
import {mapState} from "vuex";
|
|
import Search from "../../../components/Search";
|
|
import Check from "../../../components/Check";
|
|
/*
|
|
分享给朋友
|
|
* */
|
|
export default {
|
|
name: "ShareTo",
|
|
components: {
|
|
FromBottomDialog,
|
|
Search,
|
|
Check
|
|
},
|
|
props: {
|
|
modelValue: false,
|
|
pageId: {
|
|
type: String,
|
|
default: 'home-index'
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
height: '70vh',
|
|
showJoinedChat: false,
|
|
isShowRightText: false,
|
|
text: 'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
|
|
localFriends: [],
|
|
searchResult: [],
|
|
searchKey: '',
|
|
}
|
|
},
|
|
watch: {
|
|
searchKey(newVal) {
|
|
if (newVal) {
|
|
let temp = this.$clone(this.localFriends)
|
|
this.searchResult = temp.filter(v => {
|
|
// return v.name.includes(newVal) || v.account.includes(newVal);
|
|
return v.name.includes(newVal);
|
|
})
|
|
} else {
|
|
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.isShowRightText = false
|
|
this.showJoinedChat = false
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['friends']),
|
|
selectFriends() {
|
|
return this.localFriends.filter(v => v.shared)
|
|
}
|
|
},
|
|
created() {
|
|
},
|
|
methods: {
|
|
cancel() {
|
|
this.height = '70vh'
|
|
this.$emit('update:modelValue', false)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import "../../../assets/less/index";
|
|
|
|
.button {
|
|
width: 6.4rem;
|
|
height: 2.6rem !important;
|
|
}
|
|
|
|
@avatar-width: 3.8rem;
|
|
|
|
.friend-list {
|
|
padding: 0 1.5rem;
|
|
|
|
.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: @avatar-width;
|
|
height: @avatar-width;
|
|
border-radius: 50%;
|
|
margin-right: 1.5rem;
|
|
}
|
|
|
|
.right {
|
|
font-size: 1.4rem;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
img {
|
|
height: 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
color: white;
|
|
|
|
.create-chat {
|
|
padding-bottom: 4rem;
|
|
background: @main-bg;
|
|
|
|
.search-ctn {
|
|
padding: 0 1.5rem;
|
|
}
|
|
|
|
.joined-chat-group-nav {
|
|
border-bottom: 1px solid @line-color;
|
|
height: 5rem;
|
|
padding: 0 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.right {
|
|
font-size: 1.4rem;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-group {
|
|
background: @main-bg;
|
|
|
|
.nav {
|
|
font-size: 1.6rem;
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.chat-list {
|
|
padding: 0 1.5rem;
|
|
|
|
.chat-item {
|
|
margin-bottom: 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: @avatar-width;
|
|
height: @avatar-width;
|
|
border-radius: 50%;
|
|
margin-right: 1.5rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|