544 lines
13 KiB
Vue
544 lines
13 KiB
Vue
<template>
|
|
<div class="FindAcquaintance" id="FindAcquaintance">
|
|
<div class="header">
|
|
<dy-back mode="light" @click="back"></dy-back>
|
|
<Indicator
|
|
style="width: 50%"
|
|
tabStyleWidth="40%"
|
|
:tabTexts="['发现朋友', '熟人列表']"
|
|
v-model:active-index="currentSlideItemIndex"
|
|
>
|
|
</Indicator>
|
|
<img
|
|
src="../../assets/img/icon/menu-gray.png"
|
|
alt=""
|
|
class="option"
|
|
@click="moreOptionDialog = true"
|
|
/>
|
|
</div>
|
|
<SlideHorizontal v-model:index="currentSlideItemIndex">
|
|
<SlideItem class="tab1" style="overflow: auto">
|
|
<div class="mr2r ml2r mt1r">
|
|
<Search
|
|
v-if="!isShowRightText"
|
|
placeholder="搜索用户名字/抖音号"
|
|
:is-show-right-text="false"
|
|
@click="isShowRightText = true"
|
|
>
|
|
<img
|
|
src="../../assets/img/icon/scan-gray.png"
|
|
style="width: 10rem; transform: scale(1.5)"
|
|
@click.stop="$nav('/scan')"
|
|
/>
|
|
</Search>
|
|
<Search
|
|
v-else
|
|
v-model="searchKey"
|
|
:is-show-right-text="true"
|
|
@notice="search"
|
|
@clear="isSearch = false"
|
|
></Search>
|
|
</div>
|
|
<div class="no-search" v-if="!isShowRightText">
|
|
<div class="look-address-list" @click="findAddressListDialog = true">
|
|
<img class="left" src="../../assets/img/icon/people/address-book.png" alt="" />
|
|
<div class="right">
|
|
<div class="notice">
|
|
<div class="text1">查看通讯录朋友</div>
|
|
<div class="text2">看看有谁在抖音</div>
|
|
</div>
|
|
<dy-back direction="right"></dy-back>
|
|
</div>
|
|
</div>
|
|
<div class="line"></div>
|
|
<div class="title">
|
|
朋友推荐
|
|
<img
|
|
src="../../assets/img/icon/about-gray.png"
|
|
style="width: 10rem; margin-left: 2rem"
|
|
/>
|
|
</div>
|
|
<People
|
|
:key="i"
|
|
v-for="(item, i) in friends.all"
|
|
:people="item"
|
|
mode="recommend"
|
|
></People>
|
|
</div>
|
|
<div class="is-search" v-else>
|
|
<div class="tooltip" v-if="searchKey && !isSearch">
|
|
<img src="../../assets/img/icon/close.svg" style="width: 10rem" />
|
|
搜索用户名字/抖音号：<span class="searchKey">{{ searchKey }}</span>
|
|
</div>
|
|
<!-- TODO -->
|
|
<template v-if="isSearch">
|
|
<People
|
|
:key="i"
|
|
v-for="(item, i) in friends.all"
|
|
:people="item"
|
|
mode="recommend"
|
|
></People>
|
|
</template>
|
|
</div>
|
|
</SlideItem>
|
|
<SlideItem class="tab2" style="overflow: auto">
|
|
<Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
|
|
<div class="title">{{ friends.all.length }} 位朋友</div>
|
|
<People :key="i" v-for="(item, i) in friends.all" :people="item" mode="friend"></People>
|
|
<NoMore class="mb5r" />
|
|
</SlideItem>
|
|
</SlideHorizontal>
|
|
|
|
<transition name="fade">
|
|
<BaseMask v-if="maskDialog" @click="maskDialog = false"/>
|
|
</transition>
|
|
|
|
<transition name="fade">
|
|
<div
|
|
v-if="findAddressListDialog"
|
|
class="find-address-list-dialog"
|
|
@click="findAddressListDialog = false"
|
|
>
|
|
<div class="body">
|
|
<div>
|
|
<img src="../../assets/img/icon/head-image.jpeg" alt="" />
|
|
</div>
|
|
<span class="title">发现通讯录好友</span>
|
|
<span class="desc">
|
|
<span>授权通讯录，看看哪些好友在使用抖音。具体使用场景及撤回授权方式详见</span>
|
|
<span class="link" @click="$nav('/service-protocol', { type: '“抖音”用户服务协议' })"
|
|
>《隐私政策》</span
|
|
>
|
|
</span>
|
|
</div>
|
|
<div class="footer">
|
|
<div @click="findAddressListDialog = false">暂时不要</div>
|
|
<div @click="$nav('/address-list')">发现好友</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
|
|
<from-bottom-dialog
|
|
page-id="FindAcquaintance"
|
|
v-model="moreOptionDialog"
|
|
:show-heng-gang="false"
|
|
height="210rem"
|
|
mode="white"
|
|
>
|
|
<div class="more-option-dialog">
|
|
<div class="row" @click="handleClick">
|
|
<span>站外好友口令</span>
|
|
</div>
|
|
<div class="row" @click="$nav('/scan')">
|
|
<span>扫一扫加好友</span>
|
|
</div>
|
|
<div class="row" style="border-bottom: none" @click="$nav('/face-to-face')">
|
|
<span>面对面加好友</span>
|
|
</div>
|
|
<div class="space"></div>
|
|
<div class="row" @click="moreOptionDialog = false">取消</div>
|
|
</div>
|
|
</from-bottom-dialog>
|
|
|
|
<transition name="fade">
|
|
<div class="out-web-img-account-dialog" v-if="outWebImgAccountDialog">
|
|
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="img-account" />
|
|
<img
|
|
src="../../assets/img/icon/close-white.png"
|
|
alt=""
|
|
class="close"
|
|
@click="outWebImgAccountDialog = false"
|
|
/>
|
|
<div class="desc">
|
|
<div>这是你的图片口令</div>
|
|
<div>你可以通过此口令添加站外好友</div>
|
|
</div>
|
|
<div class="notice">
|
|
<img src="../../assets/img/icon/close.svg" alt="" />
|
|
<span>图片口令已保存到相册</span>
|
|
</div>
|
|
<div class="btn wechat" @click="outWebImgAccountDialog = false">
|
|
<img src="../../assets/img/icon/close.svg" alt="" />
|
|
<span>发给微信好友</span>
|
|
</div>
|
|
<div class="btn qq" @click="outWebImgAccountDialog = false">
|
|
<img src="../../assets/img/icon/close.svg" alt="" />
|
|
<span>发给QQ好友</span>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import People from './components/People'
|
|
import Search from '../../components/Search'
|
|
import Indicator from '../../components/slide/Indicator'
|
|
import FromBottomDialog from '../../components/dialog/FromBottomDialog'
|
|
import { mapState } from 'pinia'
|
|
import { useBaseStore } from '@/store/pinia'
|
|
|
|
export default {
|
|
name: 'FindAcquaintance',
|
|
components: {
|
|
People,
|
|
Search,
|
|
Indicator,
|
|
FromBottomDialog
|
|
},
|
|
data() {
|
|
return {
|
|
findAddressListDialog: false,
|
|
moreOptionDialog: false,
|
|
outWebImgAccountDialog: false,
|
|
indicatorFixed: false,
|
|
isShowRightText: false,
|
|
isSearch: false,
|
|
searchKey: '',
|
|
|
|
currentSlideItemIndex: 0,
|
|
list: [
|
|
{
|
|
type: 1
|
|
},
|
|
{
|
|
type: 2
|
|
},
|
|
{
|
|
type: 3
|
|
},
|
|
{
|
|
type: 4
|
|
},
|
|
{
|
|
type: 5
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
maskDialog: {
|
|
get() {
|
|
return this.findAddressListDialog || this.outWebImgAccountDialog
|
|
},
|
|
set() {
|
|
this.findAddressListDialog = this.outWebImgAccountDialog = false
|
|
}
|
|
},
|
|
...mapState(useBaseStore, ['friends'])
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
async search() {
|
|
this.$showLoading()
|
|
await this.$sleep(500)
|
|
this.$hideLoading()
|
|
this.isSearch = true
|
|
},
|
|
back() {
|
|
if (this.isShowRightText) {
|
|
this.isShowRightText = false
|
|
} else {
|
|
this.$back()
|
|
}
|
|
},
|
|
handleClick() {
|
|
this.outWebImgAccountDialog = true
|
|
this.moreOptionDialog = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '../../assets/less/index';
|
|
|
|
.from-bottom-enter-active,
|
|
.from-bottom-leave-active {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.from-bottom-enter-from,
|
|
.from-bottom-leave-to {
|
|
transform: translate3d(0, 50vh, 0);
|
|
}
|
|
|
|
.FindAcquaintance {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
color: white;
|
|
font-size: 14rem;
|
|
|
|
.header {
|
|
height: 60rem;
|
|
font-size: 14rem;
|
|
padding: 0 20rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--line-color);
|
|
|
|
img {
|
|
height: 20rem;
|
|
}
|
|
}
|
|
|
|
.tab2 {
|
|
box-sizing: border-box;
|
|
padding: 20rem;
|
|
|
|
.title {
|
|
margin-top: var(--page-padding);
|
|
margin-bottom: 10rem;
|
|
color: var(--second-text-color);
|
|
font-size: 12rem;
|
|
}
|
|
}
|
|
|
|
.tab1 {
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rem;
|
|
margin-bottom: 10rem;
|
|
color: var(--second-text-color);
|
|
font-size: 12rem;
|
|
|
|
img {
|
|
width: 10rem;
|
|
}
|
|
}
|
|
|
|
.no-search {
|
|
padding: 20rem;
|
|
|
|
.look-address-list {
|
|
margin: 0 0 20rem 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.left {
|
|
background: var(--second-btn-color-tran);
|
|
border-radius: 50%;
|
|
padding: 12rem;
|
|
width: 22rem;
|
|
margin-right: 15rem;
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 14rem;
|
|
}
|
|
|
|
.notice {
|
|
.text1 {
|
|
font-size: 14rem;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.text2 {
|
|
font-size: 12rem;
|
|
color: var(--second-text-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.is-search {
|
|
padding: 0 20rem 20rem 20rem;
|
|
|
|
.tooltip {
|
|
font-size: 12rem;
|
|
margin-top: 20rem;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--second-text-color);
|
|
|
|
img {
|
|
margin-right: 10rem;
|
|
width: 15rem;
|
|
}
|
|
|
|
.searchKey {
|
|
color: yellow;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.find-address-list-dialog {
|
|
z-index: 4;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate3d(-50%, -50%, 0);
|
|
width: 70vw;
|
|
color: black;
|
|
background: white;
|
|
box-sizing: border-box;
|
|
border-radius: 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.body {
|
|
padding: 20rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
img {
|
|
height: 60rem;
|
|
margin-bottom: 20rem;
|
|
}
|
|
|
|
.title {
|
|
font-size: 16rem;
|
|
font-weight: bold;
|
|
margin-bottom: 10rem;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 10rem;
|
|
color: gray;
|
|
}
|
|
|
|
.link {
|
|
color: rgb(18, 100, 149);
|
|
}
|
|
}
|
|
|
|
@footer-border-color: #eaeaf1;
|
|
|
|
.footer {
|
|
width: 100%;
|
|
display: flex;
|
|
height: 40rem;
|
|
border-top: 1px solid @footer-border-color;
|
|
font-size: 14rem;
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 49%;
|
|
text-align: center;
|
|
border-right: 1px solid @footer-border-color;
|
|
opacity: 0.5;
|
|
|
|
&:nth-last-child(1) {
|
|
border-right: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.more-option-dialog {
|
|
font-size: 14rem;
|
|
|
|
.space {
|
|
height: 10rem;
|
|
background: whitesmoke;
|
|
}
|
|
|
|
.row {
|
|
height: 50rem;
|
|
color: black;
|
|
background: white;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
//border-bottom: 1px solid ghostwhite;
|
|
border-bottom: 1px solid gainsboro;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.out-web-img-account-dialog {
|
|
z-index: 4;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate3d(-50%, -50%, 0);
|
|
width: 80vw;
|
|
color: black;
|
|
background: white;
|
|
box-sizing: border-box;
|
|
border-radius: 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20rem;
|
|
|
|
.img-account {
|
|
}
|
|
|
|
.close {
|
|
top: 10rem;
|
|
right: 10rem;
|
|
position: absolute;
|
|
background: var(--second-btn-color-tran);
|
|
padding: 4rem;
|
|
width: 10rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 20rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.notice {
|
|
margin-top: 20rem;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--second-text-color);
|
|
|
|
img {
|
|
margin-right: 10rem;
|
|
width: 10rem;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
height: 40rem;
|
|
border-radius: 3rem;
|
|
margin-top: 20rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
|
|
&:nth-last-child(1) {
|
|
margin-top: 10rem;
|
|
}
|
|
|
|
&.wechat {
|
|
background: rgb(62, 174, 56);
|
|
}
|
|
|
|
&.qq {
|
|
background: rgb(24, 183, 238);
|
|
}
|
|
|
|
img {
|
|
margin-right: 10rem;
|
|
width: 10rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|