优化分享组件
This commit is contained in:
zyronon
parent
3e1a5d8c44
commit
8721ab6533
@ -46,7 +46,8 @@ export default {
|
||||
|
||||
const routeDeep = [
|
||||
'/message', '/attention', '/home', '/me', '/publish',
|
||||
'/home/share-to-friend',
|
||||
'/message/share-to-friend',
|
||||
'/message/joined-group-chat',
|
||||
'/country-choose',
|
||||
'/edit-userinfo',
|
||||
'/edit-userinfo-item',
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 506 B |
Binary file not shown.
|
Before Width: | Height: | Size: 502 B |
Binary file not shown.
|
Before Width: | Height: | Size: 758 B |
Binary file not shown.
|
Before Width: | Height: | Size: 330 B |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 899 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
@ -11,8 +11,8 @@
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: .7rem 1rem;
|
||||
border-radius: 1px;
|
||||
padding: 1rem 1.8rem;
|
||||
border-radius: .3rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="check" @click="$emit('update:modelValue',!modelValue)">
|
||||
<div class="check" @click.stop="$emit('update:modelValue',!modelValue)">
|
||||
<img v-show="!modelValue" src="../assets/img/icon/components/check/round-gray.png" alt="">
|
||||
<img v-show="modelValue && mode === 'gray'" src="../assets/img/icon/components/check/check-gray.png" alt="">
|
||||
<img v-show="modelValue && mode === 'red'" src="../assets/img/icon/components/check/check-red.png" alt="">
|
||||
|
||||
@ -65,8 +65,8 @@
|
||||
|
||||
<div class="input-toolbar">
|
||||
<div class="call-friend">
|
||||
<div class="friend" v-for="item in friends" @click="toggleCall(item)">
|
||||
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="item.avatar" alt="">
|
||||
<div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
|
||||
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
|
||||
<span>{{ item.name }}</span>
|
||||
<img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
|
||||
</div>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
<back mode="light" img="close" direction="right" @click="closeShare"></back>
|
||||
</div>
|
||||
<div class="friends ">
|
||||
<div class="friend" v-for="item in friends" @click="toggleCall(item)">
|
||||
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="item.avatar" alt="">
|
||||
<div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
|
||||
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
|
||||
<span>{{ item.name }}</span>
|
||||
<img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
|
||||
</div>
|
||||
@ -18,11 +18,11 @@
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="shares ">
|
||||
<div class="share-to " @click="$nav('/home/share-to-friend')">
|
||||
<div class="share-to " @click="$nav('/message/share-to-friend')">
|
||||
<img src="../assets/img/icon/components/video/tofriend.webp" alt="">
|
||||
<span>私信朋友</span>
|
||||
</div>
|
||||
<div class="share-to" >
|
||||
<div class="share-to">
|
||||
<img src="../assets/img/icon/components/video/torichang.png" alt="">
|
||||
<span>分享日常</span>
|
||||
</div>
|
||||
@ -68,27 +68,28 @@
|
||||
<img src="../assets/img/icon/components/video/download.png" alt="">
|
||||
<span>保存本地</span>
|
||||
</div>
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/star.png" alt="">
|
||||
<div class="tool" @click="toggleCollect">
|
||||
<img v-if="isCollect" src="../assets/img/icon/components/video/star-full.png" alt="">
|
||||
<img v-else src="../assets/img/icon/components/video/star.png" alt="">
|
||||
<span>收藏</span>
|
||||
</div>
|
||||
<div class="tool ">
|
||||
<div class="tool">
|
||||
<img src="../assets/img/icon/components/video/comeonplay.png" alt="">
|
||||
<span>合拍</span>
|
||||
</div>
|
||||
<div class="tool ">
|
||||
<div class="tool">
|
||||
<img src="../assets/img/icon/components/video/bizhi.webp" alt="">
|
||||
<span>动态壁纸</span>
|
||||
</div>
|
||||
<div class="tool ">
|
||||
<div class="tool">
|
||||
<img src="../assets/img/icon/components/video/dislike.png" alt="">
|
||||
<span>不感兴趣</span>
|
||||
</div>
|
||||
<div class="tool ">
|
||||
<div class="tool" @click="copyLink">
|
||||
<img src="../assets/img/icon/components/video/link.png" alt="">
|
||||
<span>复制链接</span>
|
||||
</div>
|
||||
<div class="tool ">
|
||||
<div class="tool">
|
||||
<img src="../assets/img/icon/components/video/qrcode.png" alt="">
|
||||
<span>抖音码</span>
|
||||
</div>
|
||||
@ -121,7 +122,7 @@
|
||||
@cancel="cancel"
|
||||
maskMode="light"
|
||||
height="50vh"
|
||||
mode="white">
|
||||
mode="light">
|
||||
<div class="option-dialog">
|
||||
<div class="buttons">
|
||||
<b-button v-if="showProgress"
|
||||
@ -178,8 +179,8 @@
|
||||
</template>
|
||||
</div>
|
||||
<div class="dialog-friends">
|
||||
<div class="dialog-friend" v-for="item in friends">
|
||||
<img :src="item.avatar" alt="">
|
||||
<div class="dialog-friend" v-for="item in friends.all">
|
||||
<img :src="$imgPreview(item.avatar)" alt="">
|
||||
<div class="right">
|
||||
<span>{{ item.name }}</span>
|
||||
<div class="share-btn">分享</div>
|
||||
@ -199,7 +200,7 @@
|
||||
v-model="showShareDuoshan"
|
||||
@cancel="cancel"
|
||||
maskMode="light"
|
||||
mode="white">
|
||||
mode="light">
|
||||
<div class="share-to-duoshan">
|
||||
<img src="../assets/img/icon/components/video/duoshan-logo2.png" class="logo">
|
||||
<div class="wrapper">
|
||||
@ -235,7 +236,7 @@ export default {
|
||||
computed: {
|
||||
...mapState(['friends']),
|
||||
selectFriends() {
|
||||
return this.friends.filter(v => v.select)
|
||||
return this.friends.all.filter(v => v.select)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -252,9 +253,27 @@ export default {
|
||||
showShare2QQ: false,
|
||||
showShare2Webo: false,
|
||||
showShareDuoshan: false,
|
||||
isCollect: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async copyLink() {
|
||||
this.closeShare()
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
this.$hideLoading()
|
||||
this.$notice('复制成功')
|
||||
},
|
||||
toggleCollect() {
|
||||
this.closeShare()
|
||||
if (this.isCollect) {
|
||||
this.$notice('取消收藏成功')
|
||||
} else {
|
||||
this.$notice('收藏成功')
|
||||
}
|
||||
this.isCollect = !this.isCollect
|
||||
|
||||
},
|
||||
download() {
|
||||
this.showShareDialog = true
|
||||
this.showDownload = false
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
149
src/pages/message/JoinedGroupChat.vue
Normal file
149
src/pages/message/JoinedGroupChat.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="Share2Friend">
|
||||
<BaseHeader
|
||||
backMode="light"
|
||||
backImg="back" style="z-index: 7;">
|
||||
<template v-slot:center>
|
||||
<span class="f16">已加入的群聊</span>
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<div>
|
||||
<span class="f16" :class="selectFriends.length?'save-yes':'save-no'" @click="save">
|
||||
完成{{ selectFriends.length ? `(${selectFriends.length})` : '' }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<div class="list">
|
||||
<div class="local-row" v-for="item of friends.all" @click="toggleSelect(item);">
|
||||
<Check mode="red" v-model="item.select"/>
|
||||
<img :src="$imgPreview(item.avatar)" alt="">
|
||||
<div class="desc">
|
||||
<span class="name">{{ item.name.length > 20 ? item.name.substr(0, 20) + '...' : item.name }}</span>
|
||||
<span class="num">(3)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NoMore></NoMore>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Search from "../../components/Search";
|
||||
import {mapState} from "vuex";
|
||||
import axios from "axios";
|
||||
import Check from "../../components/Check";
|
||||
import {forIn} from "lodash";
|
||||
|
||||
export default {
|
||||
name: "Share2Friend",
|
||||
components: {Search, Check},
|
||||
props: {},
|
||||
computed: {
|
||||
// ...mapState(['friends']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
friends: {
|
||||
all: {},
|
||||
recent: [],
|
||||
eachOther: [],
|
||||
},
|
||||
selectFriends: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getFriends()
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
if (!this.selectFriends.length) return
|
||||
this.$back()
|
||||
},
|
||||
toggleSelect(item) {
|
||||
let resIndex = this.selectFriends.findIndex(v => v.name === item.name)
|
||||
if (resIndex !== -1) {
|
||||
item.select = false
|
||||
this.selectFriends.splice(resIndex, 1)
|
||||
} else {
|
||||
item.select = true
|
||||
this.selectFriends.push(item)
|
||||
}
|
||||
},
|
||||
async getFriends() {
|
||||
let res = await this.$api.user.friends()
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.friends = res.data
|
||||
this.friends.all = this.friends.all.sort((a, b) => {
|
||||
if (a.pinyin < b.pinyin) return -1;
|
||||
if (a.pinyin > b.pinyin) return 1;
|
||||
return 0;
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.Share2Friend {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
|
||||
.save-yes {
|
||||
color: @primary-btn-color;
|
||||
}
|
||||
|
||||
.save-no {
|
||||
color: @disable-primary-btn-color;
|
||||
}
|
||||
|
||||
.list {
|
||||
|
||||
.local-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
|
||||
&:active {
|
||||
background: rgb(35, 41, 58);
|
||||
}
|
||||
|
||||
.check {
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 4.5rem;
|
||||
width: 4.5rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
.num {
|
||||
margin-left: .5rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -92,7 +92,7 @@
|
||||
<img class="left" src="../../assets/img/icon/people-gray.png" alt="">
|
||||
<div class="right">
|
||||
<span>已加入的群聊</span>
|
||||
<back direction="right" scale="1.2"></back>
|
||||
<back direction="right" mode="light"></back>
|
||||
</div>
|
||||
</div>
|
||||
<div class="friend-list">
|
||||
@ -101,8 +101,7 @@
|
||||
<img class="left" src="../../assets/img/icon/head-image.jpeg" alt="">
|
||||
<div class="right">
|
||||
<span>{{ item.name }}</span>
|
||||
<img v-if="item.select" src="../../assets/img/icon/message/checked.png" alt="">
|
||||
<img v-if="!item.select" src="../../assets/img/icon/message/no-check2.png" alt="">
|
||||
<Check mode="red" style="height: 2rem;width: 2rem;" v-model="item.select"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -115,7 +114,7 @@
|
||||
</div>
|
||||
<div class="joined-chat-wrapper" v-show="showJoinedChat">
|
||||
<div class="nav">
|
||||
<back @click="showJoinedChat = false" mode="light" scale="1.8"></back>
|
||||
<back @click="showJoinedChat = false" mode="light" scale="1.2"></back>
|
||||
<span>已加入的群聊</span>
|
||||
<span> </span>
|
||||
</div>
|
||||
@ -128,7 +127,7 @@
|
||||
<div class="name">{{ text.length > 20 ? text.substr(0, 20) + '...' : text }}</div>
|
||||
<div class="num">(3)</div>
|
||||
</div>
|
||||
<back direction="right" scale="1.2"></back>
|
||||
<back direction="right" mode="light"></back>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,13 +141,15 @@
|
||||
import Footer from '../../components/Footer.vue'
|
||||
import Search from "../../components/Search";
|
||||
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
||||
import Check from "../../components/Check";
|
||||
|
||||
export default {
|
||||
name: "Message",
|
||||
components: {
|
||||
Footer,
|
||||
Search,
|
||||
FromBottomDialog
|
||||
FromBottomDialog,
|
||||
Check
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -232,8 +233,7 @@ export default {
|
||||
created() {
|
||||
console.log(22)
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
595
src/pages/message/Share2Friend.vue
Normal file
595
src/pages/message/Share2Friend.vue
Normal file
@ -0,0 +1,595 @@
|
||||
<template>
|
||||
<div class="Share2Friend">
|
||||
<BaseHeader backImg="close" style="z-index: 7;">
|
||||
<template v-slot:center>
|
||||
<span class="f16">私信给</span>
|
||||
</template>
|
||||
<template v-slot:bottom>
|
||||
<div class="search">
|
||||
<div class="search-select-friends" v-if="selectFriends.length">
|
||||
<div class="wrapper">
|
||||
<img :src="$imgPreview(item.avatar)" v-for="item in selectFriends" @click="toggleSelect(item)">
|
||||
</div>
|
||||
</div>
|
||||
<img v-else class="search-icon" src="../../assets/img/icon/search-gray.png" alt="">
|
||||
<input type="text" placeholder="搜索" v-model="searchKey">
|
||||
<img v-if="searchKey" @click="clear" class="clear" src="../../assets/img/icon/components/gray-close-full.png">
|
||||
</div>
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="is-search"
|
||||
:style="{ height : (selectFriends.length && searchResult.length) ? 'calc(100% - 27.2rem)' : 'calc(100% - 11.2rem)' }"
|
||||
v-show="searchKey">
|
||||
<div class="list" v-if="searchResult.length">
|
||||
<div class="local-row" v-for="item of searchResult" @click="toggleSelect(item);searchKey = '';">
|
||||
<Check mode="red" v-model="item.select"/>
|
||||
<img :src="$imgPreview(item.avatar)" alt="">
|
||||
<div class="desc">
|
||||
<span class="name">
|
||||
<span v-if="item.name.indexOf(searchKey) > -1">
|
||||
{{ item.name.substr(0, item.name.indexOf(searchKey)) }}<span style="color: #ffd800">{{
|
||||
searchKey
|
||||
}}</span>{{ item.name.substr(item.name.indexOf(searchKey) + searchKey.length) }}
|
||||
</span>
|
||||
<span v-else>{{ item.name }}</span>
|
||||
</span>
|
||||
<span class="account" v-if="item.account">
|
||||
抖音号：
|
||||
<span v-if="item.account.indexOf(searchKey) > -1">
|
||||
{{ item.account.substr(0, item.account.indexOf(searchKey)) }}<span style="color: #ffd800">{{
|
||||
searchKey
|
||||
}}</span>{{ item.account.substr(item.account.indexOf(searchKey) + searchKey.length) }}
|
||||
</span>
|
||||
<span v-else>{{ item.account }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-result" v-else>
|
||||
<img src="../../assets/img/icon/no-result.png" alt="">
|
||||
<span class="n1">搜索结果为空</span>
|
||||
<span class="n2">没有搜索到相关的联系人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="list"
|
||||
:style="{ paddingBottom : selectFriends.length ? '16rem' : 0 }"
|
||||
class="content"
|
||||
@scroll="scroll">
|
||||
<div class="list">
|
||||
<div class="row" @click="$nav('/message/joined-group-chat')">
|
||||
<span>已加入的群聊</span>
|
||||
<back :scale=".7" direction="right"></back>
|
||||
</div>
|
||||
<div class="title">最近聊天</div>
|
||||
<div class="local-row" v-for="item of friends.recent" @click="toggleSelect(item)">
|
||||
<Check mode="red" v-model="item.select"/>
|
||||
<img :src="$imgPreview(item.avatar)" alt="">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="title">互关好友</div>
|
||||
<div class="local-row" v-for="item of friends.eachOther" @click="toggleSelect(item)">
|
||||
<Check mode="red" v-model="item.select"/>
|
||||
<img :src="$imgPreview(item.avatar)" alt="">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="title">全部</div>
|
||||
<div v-for="(value, name) of friendsSort">
|
||||
<div :class="name === '#'?'top':name" class="title">
|
||||
<span>{{ name }}</span>
|
||||
</div>
|
||||
<div class="local-row" v-for="item of value" @click="toggleSelect(item)">
|
||||
<Check mode="red" v-model="item.select"/>
|
||||
<img :src="$imgPreview(item.avatar)" alt="">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="share2friend" v-if="selectFriends.length && searchResult.length">
|
||||
<div class="comment">
|
||||
<textarea placeholder="有什么想和好友说的..."></textarea>
|
||||
<img class="poster" src="../../assets/img/poster/1.jpg" alt="">
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="create-chat" v-if="selectFriends.length>1">
|
||||
<Check mode="red" v-model="isCreateChat"/>
|
||||
<span>创建群聊</span>
|
||||
</div>
|
||||
<b-button type="primary">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator-ctn">
|
||||
<div class="indicator">
|
||||
<div class="item" data-index="top">#</div>
|
||||
<div class="item">A</div>
|
||||
<div class="item">B</div>
|
||||
<div class="item">C</div>
|
||||
<div class="item">D</div>
|
||||
<div class="item">E</div>
|
||||
<div class="item">F</div>
|
||||
<div class="item">G</div>
|
||||
<div class="item">H</div>
|
||||
<div class="item">I</div>
|
||||
<div class="item">J</div>
|
||||
<div class="item">K</div>
|
||||
<div class="item">L</div>
|
||||
<div class="item">M</div>
|
||||
<div class="item">N</div>
|
||||
<div class="item">O</div>
|
||||
<div class="item">P</div>
|
||||
<div class="item">Q</div>
|
||||
<div class="item">R</div>
|
||||
<div class="item">S</div>
|
||||
<div class="item">T</div>
|
||||
<div class="item">U</div>
|
||||
<div class="item">V</div>
|
||||
<div class="item">W</div>
|
||||
<div class="item">X</div>
|
||||
<div class="item">Y</div>
|
||||
<div class="item">Z</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hover"
|
||||
:style="{ top : currentFixedIndicatorTop }"
|
||||
ref="hover"
|
||||
v-if="currentFixedIndicator">
|
||||
<img src="../../assets/img/icon/components/video/water.png" alt="">
|
||||
<span>{{ currentFixedIndicator }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Search from "../../components/Search";
|
||||
import {mapState} from "vuex";
|
||||
import axios from "axios";
|
||||
import Check from "../../components/Check";
|
||||
import {forIn} from "lodash";
|
||||
|
||||
export default {
|
||||
name: "Share2Friend",
|
||||
components: {Search, Check},
|
||||
props: {},
|
||||
computed: {
|
||||
// ...mapState(['friends']),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCreateChat: false,
|
||||
searchKey: '',
|
||||
indexOffsetTop: {},
|
||||
currentFixedIndicator: '',
|
||||
currentFixedIndicatorTop: 0,
|
||||
friends: {
|
||||
all: {},
|
||||
recent: [],
|
||||
eachOther: [],
|
||||
},
|
||||
selectFriends: [],
|
||||
friendsSort: {},
|
||||
searchResult: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searchKey(newVal) {
|
||||
let temp = this.$clone(this.friends.all)
|
||||
temp.map(v => {
|
||||
if (this.selectFriends.find(w => w.id === v.id)) v.select = true
|
||||
})
|
||||
this.searchResult = temp.filter(v => {
|
||||
return v.name.includes(newVal) || v.account.includes(newVal);
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getFriends()
|
||||
},
|
||||
mounted() {
|
||||
let indexs = document.querySelectorAll('.index')
|
||||
indexs.forEach(v => {
|
||||
this.indexOffsetTop[v.children[0].innerText] = v.offsetTop
|
||||
})
|
||||
let items = document.querySelectorAll('.item')
|
||||
let item = document.querySelector(`.item:nth-child(2)`)
|
||||
let itemHeight = item.clientHeight
|
||||
let ul = document.querySelector('.indicator')
|
||||
let ulOffsetTop = ul.offsetTop
|
||||
let resetColor = 'rgb(143, 143, 158)'
|
||||
ul.addEventListener('touchstart', e => {
|
||||
let pageY = e.touches[0].pageY - ulOffsetTop
|
||||
let currentIndex = pageY / itemHeight
|
||||
currentIndex = Math.floor(currentIndex)
|
||||
render(currentIndex)
|
||||
this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
|
||||
})
|
||||
ul.addEventListener('touchmove', e => {
|
||||
let pageY = e.touches[0].pageY - ulOffsetTop
|
||||
this.currentFixedIndicatorTop = e.touches[0].pageY - 28 + 'px'
|
||||
|
||||
let currentIndex = pageY / itemHeight
|
||||
currentIndex = Math.floor(currentIndex)
|
||||
if (currentIndex >= 0 && currentIndex < 27) {
|
||||
render(currentIndex)
|
||||
}
|
||||
})
|
||||
ul.addEventListener('touchend', e => {
|
||||
return this.currentFixedIndicator = ''
|
||||
})
|
||||
let render = (currentIndex) => {
|
||||
items.forEach((el, index) => {
|
||||
el.style.color = resetColor
|
||||
})
|
||||
items[currentIndex].style.color = '#fff'
|
||||
this.currentFixedIndicator = items[currentIndex].innerText
|
||||
this.goto(items[currentIndex])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear() {
|
||||
console.log('clear')
|
||||
this.searchKey = ''
|
||||
},
|
||||
toggleSelect(item) {
|
||||
//减少判断次数，找到了就跳出循环
|
||||
for (let i = 0; i < this.friends.recent.length; i++) {
|
||||
let v = this.friends.recent[i]
|
||||
if (v.name === item.name) {
|
||||
v.select = !v.select
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.friends.eachOther.length; i++) {
|
||||
let v = this.friends.eachOther[i]
|
||||
if (v.name === item.name) {
|
||||
v.select = !v.select
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
let find = false
|
||||
let keys = Object.keys(this.friendsSort)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
let k = keys[i]
|
||||
for (let j = 0; j < this.friendsSort[k].length; j++) {
|
||||
let value = this.friendsSort[k][j]
|
||||
if (value.name === item.name) {
|
||||
value.select = !value.select
|
||||
find = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (find) break
|
||||
}
|
||||
|
||||
let resIndex = this.selectFriends.findIndex(v => v.name === item.name)
|
||||
if (resIndex !== -1) {
|
||||
item.select = false
|
||||
this.selectFriends.splice(resIndex, 1)
|
||||
} else {
|
||||
item.select = true
|
||||
this.selectFriends.push(item)
|
||||
}
|
||||
},
|
||||
async getFriends() {
|
||||
let res = await this.$api.user.friends()
|
||||
if (res.code === this.SUCCESS) {
|
||||
this.friends = res.data
|
||||
this.friends.all = this.friends.all.sort((a, b) => {
|
||||
if (a.pinyin < b.pinyin) return -1;
|
||||
if (a.pinyin > b.pinyin) return 1;
|
||||
return 0;
|
||||
})
|
||||
this.friends.all.map(v => {
|
||||
if (this.friendsSort[v.pinyin]) {
|
||||
this.friendsSort[v.pinyin].push(v)
|
||||
} else {
|
||||
this.friendsSort[v.pinyin] = [v]
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
goto(el) {
|
||||
let list = this.$refs.list
|
||||
let py
|
||||
if (el.dataset['index']) {
|
||||
py = 'top'
|
||||
} else {
|
||||
py = el.innerText
|
||||
}
|
||||
if (document.querySelector(`.${py}`)) {
|
||||
list.scrollTop = document.querySelector(`.${py}`).offsetTop - 100
|
||||
}
|
||||
},
|
||||
scroll(e) {
|
||||
// let isFixed = document.querySelector(`.fixed`)
|
||||
// console.log(isFixed)
|
||||
// let listScrollTop = e.target.scrollTop + (isFixed ? 110 : 110)
|
||||
let listScrollTop = e.target.scrollTop + 110
|
||||
// console.log('listScrollTop', listScrollTop)
|
||||
let currentKey = null
|
||||
for (const key in this.indexOffsetTop) {
|
||||
// if (currentKey) break
|
||||
let offsetTop = this.indexOffsetTop[key]
|
||||
// console.log('offsetTop',offsetTop)
|
||||
if (offsetTop < listScrollTop) {
|
||||
currentKey = key
|
||||
}
|
||||
}
|
||||
this.currentFixedIndicator = currentKey
|
||||
// console.log('currentKey', currentKey)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
.Share2Friend {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.search {
|
||||
border-bottom: 1px solid #cccccc11;
|
||||
font-size: 1.4rem;
|
||||
padding: 0;
|
||||
height: 5rem;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-select-friends {
|
||||
.wrapper {
|
||||
display: flex;
|
||||
max-width: 70vw;
|
||||
overflow-x: auto;
|
||||
|
||||
img {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
input {
|
||||
//margin-top: .4rem;
|
||||
color: white;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.clear {
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator-ctn {
|
||||
width: 2.5rem;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
right: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.indicator {
|
||||
width: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
color: @second-text-color;
|
||||
//transition: all .3s;
|
||||
font-size: 1rem;
|
||||
padding: .1rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
padding: 0 0 .3rem 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: .5rem solid transparent;
|
||||
border-bottom: 1rem solid @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 11rem;
|
||||
left: 2rem;
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100% - 11.2rem);
|
||||
margin-top: 11.2rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
.share2friend {
|
||||
position: fixed;
|
||||
z-index: 4;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
height: 16rem;
|
||||
background: @main-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.comment {
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
textarea {
|
||||
flex: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.poster {
|
||||
margin-left: 2rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.create-chat {
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @second-text-color;
|
||||
|
||||
.check {
|
||||
margin-right: 1rem;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
//transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover {
|
||||
position: absolute;
|
||||
right: 4rem;
|
||||
top: 20rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.is-search {
|
||||
background: @main-bg;
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
left: 0;
|
||||
height: calc(100% - 11.2rem);
|
||||
top: 11.2rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
.no-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-top: 15rem;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.n1 {
|
||||
margin-top: 4rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.n2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 1.2rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
//padding-right: 2.5rem;
|
||||
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
color: @second-text-color;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
|
||||
.local-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
|
||||
&:active {
|
||||
background: rgb(35, 41, 58);
|
||||
}
|
||||
|
||||
.check {
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 4.5rem;
|
||||
width: 4.5rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
|
||||
}
|
||||
|
||||
.account {
|
||||
margin-top: .5rem;
|
||||
font-size: 1.2rem;
|
||||
color: @second-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="FindAcquaintance">
|
||||
<div class="header">
|
||||
<back scale="1.8" mode="white" @click="back"></back>
|
||||
<back scale="1.8" mode="light" @click="back"></back>
|
||||
<Indicator
|
||||
style="width: 50%;"
|
||||
tabStyleWidth="40%"
|
||||
|
||||
@ -43,7 +43,8 @@ import Help from "../pages/login/Help";
|
||||
import Test from "../pages/Test";
|
||||
import Test2 from "../pages/Test2";
|
||||
import Test3 from "../pages/Test3";
|
||||
import Share2Friend from "../pages/home/Share2Friend";
|
||||
import Share2Friend from "../pages/message/Share2Friend";
|
||||
import JoinedGroupChat from "../pages/message/JoinedGroupChat";
|
||||
|
||||
const routes = [
|
||||
// {path: '', component: Music},
|
||||
@ -53,10 +54,11 @@ const routes = [
|
||||
{path: '/test2', component: Test2},
|
||||
{path: '/test3', component: Test3},
|
||||
{path: '/home', component: Index},
|
||||
{path: '/home/share-to-friend', component: Share2Friend},
|
||||
{path: '/attention', component: Attention},
|
||||
{path: '/publish', component: Publish},
|
||||
{path: '/message', component: Message},
|
||||
{path: '/message/share-to-friend', component: Share2Friend},
|
||||
{path: '/message/joined-group-chat', component: JoinedGroupChat},
|
||||
{path: '/me', component: Me},
|
||||
{path: '/edit-userinfo', component: EditUserInfo},
|
||||
{path: '/edit-userinfo-item', component: EditUserInfoItem},
|
||||
|
||||
@ -26,7 +26,7 @@ const store = Vuex.createStore({
|
||||
displayType: enums.DISPLAY_TYPE.ALL,
|
||||
}
|
||||
},
|
||||
friends: []
|
||||
friends: {}
|
||||
},
|
||||
mutations: {
|
||||
setUserinfo(store, val) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user