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-10-10 01:47:37 +08:00
parent cb70c5e0bb
commit 4a31283ada
10 changed files with 371 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -54,6 +54,8 @@ export default {
'/message/share-to-friend',
'/message/joined-group-chat',
'/message/fans',
'/country-choose',
'/edit-userinfo',
'/edit-userinfo-item',

1
src/assets/less/color.less
View File

@ -4,6 +4,7 @@
@second-btn-color: rgb(58, 58, 70);
@second-btn-color-tran: rgba(58, 58, 70, .4);
@line-color: rgb(37, 45, 66);
@line-color2: rgb(56,54,67);
@primary-btn-color: rgb(252, 47, 86);
@disable-primary-btn-color: rgba(252, 47, 86, .5);

2
src/assets/less/custom.less
View File

@ -150,7 +150,7 @@ p {
.line {
height: 1px;
background: @line-color;
background: @line-color2;
width: 100%;
}

1
src/pages/home/SearchPage.vue
View File

@ -5,6 +5,7 @@
<BSearch placeholder="搜索用户名字/抖音号"
:isShowText="true"
notice="white"
@notice="$no"
>
<img class="scan" src="../../assets/img/icon/scan-gray.png" @click.stop="$nav('/scan')">
</BSearch>

1
src/pages/home/components/Duoshan.vue
View File

@ -1,5 +1,6 @@
<template>
<from-bottom-dialog
page-id="home-index"
v-model="modelValue"
@cancel="cancel"
maskMode="light"

55
src/pages/message/Fans.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div class="Fans">
<BaseHeader>
<template v-slot:center>
<span class="f16">粉丝</span>
</template>
</BaseHeader>
<div class="content">
<People v-for="item in friends.all" :people="item"></People>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
import People from "../people/components/People";
export default {
name: "Fans",
components: {
People
},
props: {
modelValue: false
},
data() {
return {}
},
computed: {
...mapState(['userinfo', 'friends'])
},
created() {
},
methods: {}
}
</script>
<style scoped lang="less">
@import "@/assets/less/index";
.Fans {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {
padding: @padding-page;
padding-top: 6rem;
}
}
</style>

338
src/pages/message/Message.vue
View File

@ -7,43 +7,164 @@
</div>
</div>
<Search class="m2r"></Search>
<div class="line mb2r"></div>
<div class="friends pl1r ">
<div class="friend pr1r pl1r"
@click="$nav('/message/chat')"
v-for="item in friends.all">
<div class="avatar on-line">
v-for="(item,index) in friends.all">
<div class="avatar" :class="index%2===0?'on-line':''">
<img :src="$imgPreview(item.avatar)" alt="">
</div>
<span>{{ item.name }}</span>
</div>
<div class="friend pr10p">
<img src="../../assets/img/icon/next.svg" alt="">
<span>状态设置</span>
<img src="../../assets/img/icon/message/setting.png" alt="">
<span class="ml1r">状态设置</span>
</div>
</div>
<div class="line mt2r"></div>
<div class="requests">
<div class="span">关注请求（1）</div>
<div class="right">
<div class="not-read"></div>
<img class="arrow" src="../../assets/img/icon/close-white.png" alt="">
</div>
</div>
<div class="messages ">
<div class="message" v-for="i in 5">
<div class="avatar on-line">
<!-- 粉丝-->
<div class="message" @click="$nav('/message/fans')">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon1.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>粉丝</span>
</div>
<div class="detail">
xxx 关注了你
</div>
</div>
<div class="right">
<back class="arrow" mode="gray" img="back" direction="right"/>
</div>
</div>
</div>
<!-- 互动消息-->
<div class="message">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon2.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>互动消息</span>
</div>
<div class="detail">
xxx 赞了你的评论
</div>
</div>
<div class="right">
<back class="arrow" mode="gray" img="back" direction="right"/>
</div>
</div>
</div>
<!-- 抖音小助手-->
<div class="message">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon5.webp" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>抖音小助手</span>
<span class="tag">官方</span>
</div>
<div class="detail">
<img class="sent" src="../../assets/img/icon/close-white.png" alt="">
已送达 ，sb，凌晨 01:15
#今天谁请客呢
<div class="point"></div>
星期四
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
</div>
</div>
<!-- 系统通知-->
<div class="message">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon4.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>系统通知</span>
<span class="tag">官方</span>
</div>
<div class="detail">
协议修订通知
<div class="point"></div>
08-31
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
</div>
</div>
<!-- 求更新-->
<div class="message">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon7.webp" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>求更新</span>
<span class="tag">官方</span>
</div>
<div class="detail">
你收到过1次求更新
<div class="point"></div>
10-09
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
</div>
</div>
<!-- 任务通知-->
<div class="message">
<div class="avatar">
<img src="../../assets/img/icon/msg-icon6.webp" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>任务通知</span>
<span class="tag">官方</span>
</div>
<div class="detail">
发作品得流量
<div class="point"></div>
05-26
</div>
</div>
<div class="right">
<div class="not-read"></div>
</div>
</div>
</div>
<!-- 消息-->
<div class="message">
<div class="avatar on-line">
<img src="../../assets/img/icon/avatar/2.png" alt="" class="head-image">
</div>
<div class="content">
<div class="left">
<div class="name">
<span>{{ userinfo.nickname }}</span>
</div>
<div class="detail">
哈哈哈哈哈哈
<div class="point"></div>
10-10
</div>
</div>
<div class="right">
@ -54,6 +175,31 @@
</div>
</div>
</div>
<!-- 模板-->
<!-- <div class="message">-->
<!-- <div class="avatar on-line">-->
<!-- <img src="../../assets/img/icon/avatar/2.png" alt="" class="head-image">-->
<!-- </div>-->
<!-- <div class="content">-->
<!-- <div class="left">-->
<!-- <div class="name">-->
<!-- <span>粉丝</span>-->
<!-- <span class="tag">官方</span>-->
<!-- </div>-->
<!-- <div class="detail">-->
<!-- <img class="sent" src="../../assets/img/icon/close-white.png" alt="">-->
<!-- 已送达 ，sb，凌晨 01:15-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="right">-->
<!-- &lt;!&ndash; <div class="not-read"></div>&ndash;&gt;-->
<!-- &lt;!&ndash; <img class="camera" src="../../assets/img/icon/close-white.png" alt="">&ndash;&gt;-->
<!-- &lt;!&ndash; <img class="arrow" src="../../assets/img/icon/close-white.png" alt="">&ndash;&gt;-->
<!-- <div class="badge">12</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<Footer v-bind:init-tab="4"/>
@ -213,7 +359,7 @@ export default {
}
},
computed: {
...mapState(['friends']),
...mapState(['friends', 'userinfo']),
selectFriends() {
return this.friends.all.filter(v => v.select).length
}
@ -516,30 +662,33 @@ export default {
.friend {
&:nth-last-child(1) {
img {
margin: 0 10px;
padding: 17px;
background: darkgray;
width: 30px;
height: 30px;
margin: 0 1rem;
padding: 1.7rem;
background: @second-btn-color-tran;
width: 3rem;
height: 3rem;
border-radius: 50%;
margin-bottom: .6rem;
}
}
.avatar {
position: relative;
margin-bottom: 6px;
margin-bottom: .6rem;
img {
width: 64px;
height: 64px;
@width: 6.4rem;
width: @width;
height: @width;
border-radius: 50%;
}
&.on-line::before {
content: ' ';
border: 4px solid black;
width: 18px;
height: 18px;
border: .4rem solid black;
width: 1.8rem;
height: 1.8rem;
background: rgb(115, 254, 73);
border-radius: 50%;
position: absolute;
@ -551,39 +700,19 @@ export default {
span {
color: @second-text-color;
width: 6.4rem;
font-size: 1.2rem;
color: lightgray;
display: block;
text-align: center;
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
.line {
border-top: 1px solid @line-color;
}
.requests {
font-size: 1.4rem;
box-sizing: border-box;
margin: 0 20px;
padding: 20px 0;
display: flex;
justify-content: space-between;
border-bottom: 1px solid @line-color;
.right {
display: flex;
align-items: center;
.arrow {
width: 15px;
height: 15px;
}
}
}
.messages {
margin-top: 5px;
@ -603,23 +732,24 @@ export default {
position: relative;
.head-image {
margin-left: 20px;
margin-right: 15px;
width: 48px;
height: 48px;
margin-left: 2rem;
margin-right: 1.5rem;
@width: 4.5rem;
width: @width;
height: @width;
border-radius: 50%;
}
&.on-line::before {
content: ' ';
border: 3px solid black;
width: 12px;
height: 12px;
border: .3rem solid black;
width: 1.2rem;
height: 1.2rem;
background: rgb(115, 254, 73);
border-radius: 50%;
position: absolute;
bottom: 0;
right: 15px;
right: 1.5rem;
}
}
@ -628,55 +758,69 @@ export default {
flex: 1;
display: flex;
justify-content: space-between;
padding: 15px 0 15px 0;
border-bottom: 1px solid @line-color;
@padding: 1.4rem;
padding: @padding 0 @padding 0;
border-bottom: 1px solid @line-color2;
.left {
.name {
font-size: 1.8rem;
font-size: 1.4rem;
color: white;
display: flex;
align-items: flex-start;
.tag {
margin-left: 5px;
margin-left: .5rem;
font-size: 1rem;
background: @line-color;
padding: 2px 5px;
border-radius: 2px;
background: @second-btn-color-tran;
color: @second-text-color;
padding: .2rem .5rem;
border-radius: .2rem;
}
}
.detail {
color: @second-text-color;
font-size: 1.2rem;
margin-top: 4px;
margin-top: .4rem;
display: flex;
align-items: center;
.point {
display: inline-block;
margin-left: .8rem;
margin-right: .8rem;
border-radius: 50%;
width: 1.5px;
height: 1.5px;
background: @second-text-color;
}
.sent {
width: 10px;
height: 10px;
width: 1rem;
height: 1rem;
}
}
}
.right {
margin-right: 30px;
margin-right: 3rem;
display: flex;
align-items: center;
.arrow {
width: 15px;
height: 15px;
width: 1.5rem;
height: 1.5rem;
}
.camera {
width: 20px;
height: 20px;
width: 2rem;
height: 2rem;
}
.not-read {
width: 10px;
height: 10px;
width: .7rem;
height: .7rem;
border-radius: 50%;
background: yellow;
}
@ -685,8 +829,8 @@ export default {
font-size: 1.2rem;
display: block;
color: black;
padding: 1px 6px;
border-radius: 10px;
padding: 1px .6rem;
border-radius: 1rem;
background: yellow;
}
}
@ -697,13 +841,13 @@ export default {
.not-more {
color: @second-text-color;
text-align: center;
padding: 20px;
padding: 2rem;
}
}
.recommend {
.title {
padding: 20px 20px 10px 20px;
padding: 2rem 2rem 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
@ -712,17 +856,17 @@ export default {
color: @second-text-color;
img {
width: 10px;
height: 10px;
width: 1rem;
height: 1rem;
}
}
.right {
border-radius: 50%;
background: @second-text-color;
padding: 5px;
width: 10px;
height: 10px;
padding: .5rem;
width: 1rem;
height: 1rem;
}
}
@ -739,10 +883,10 @@ export default {
}
.head-image {
margin-left: 20px;
margin-right: 15px;
width: 48px;
height: 48px;
margin-left: 2rem;
margin-right: 1.5rem;
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
}
@ -750,7 +894,7 @@ export default {
flex: 1;
display: flex;
justify-content: space-between;
padding: 15px 0;
padding: 1.5rem 0;
.left {
.name {
@ -766,15 +910,15 @@ export default {
}
.right {
margin-right: 20px;
margin-right: 2rem;
display: flex;
align-items: center;
.button {
background: @primary-btn-color;
margin-left: 8px;
padding: 8px 20px;
border-radius: 3px;
margin-left: .8rem;
padding: .8rem 2rem;
border-radius: .3rem;
&:nth-last-child(1) {
background: rgb(58, 58, 67);

67
src/pages/people/components/People.vue
View File

@ -3,36 +3,41 @@
<img v-if="people.type === 6" src="../../../assets/img/icon/add-light.png" alt="" class="add">
<img v-else :src="$imgPreview(people.avatar)" alt="" class="head-image pull-left">
<div class="content">
<template v-if="mode === 'fans'">
<div class="left">
<div class="name">{{ people.name }}</div>
<div class="detail" v-if="people.type !== 6">
<div class="detail">
<template v-if="people.type === RELATE_ENUM.REQUEST_FOLLOW">
发来一个关注请求
</template>
<template v-else>
该用户关注了你
</template>
</div>
</div>
<!-- 已关注 -->
<div class="right" v-if="people.type === 1">
<div class="right">
<!-- 他关注我 -->
<template v-if="people.type === RELATE_ENUM.FOLLOW_ME">
<div class="l-button red">回关</div>
</template>
<!-- 我关注他 -->
<template v-if="people.type === RELATE_ENUM.FOLLOW_HE">
<div class="l-button">已关注</div>
</template>
<!-- 相互关注-->
<template v-if="people.type === RELATE_ENUM.FOLLOW_EACH_OTHER">
<div class="l-button">相互关注</div>
</template>
<!-- 关注请求-->
<template v-if="people.type === RELATE_ENUM.REQUEST_FOLLOW">
<div class="l-button ">忽略</div>
<div class="l-button red">通过</div>
</template>
</div>
<!-- 粉丝 -->
<div class="right" v-if="people.type === 2">
<div class="l-button red">回关</div>
<img src="../../../assets/img/icon/menu-white.png" alt="">
</div>
<!-- 朋友推荐 -->
<div class="right" v-if="people.type === 3">
<div class="l-button red">回关</div>
<div class="l-button ">移除</div>
</div>
<!-- 互相关注 -->
<div class="right" v-if="people.type === 4">
<div class="l-button">发私信</div>
<img src="../../../assets/img/icon/menu-white.png" alt="" @click="showPopover = !showPopover">
</div>
<!-- 通讯录 -->
<div class="right" v-if="people.type === 5">
<div class="l-button red address-list">回关</div>
</div>
</template>
</div>
<transition name="scale">
<div class="popover" v-if="people.type === 4 && showPopover">
@ -56,11 +61,21 @@ export default {
people: {
type: Object,
default: {}
},
mode: {
type: String,
default: 'fans'
}
},
data() {
return {
showPopover: false
showPopover: false,
RELATE_ENUM: {
FOLLOW_ME: 1,//只关注我
FOLLOW_EACH_OTHER: 2,//互相关注
FOLLOW_HE: 3,//我关注他
REQUEST_FOLLOW: 4//关注请求
}
}
},
computed: {},
@ -140,6 +155,10 @@ export default {
border-radius: .2rem;
background: rgb(58, 58, 67);
&:only-child {
background: yellow;
}
&.address-list {
padding: .7rem 3rem;
}

6
src/router/index.js
View File

@ -58,6 +58,7 @@ import VideoCollect from "../pages/me/collect/VideoCollect";
import MyMusic from "../pages/me/MyMusic";
import FollowAndFans from "../pages/people/FollowAndFans";
import MyRequestUpdate from "../pages/me/MyRequestUpdate";
import Fans from "../pages/message/Fans";
const routes = [
// {path: '', component: Music},
@ -79,11 +80,16 @@ const routes = [
{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: '/message/chat', component: Chat},
{path: '/message/chat-detail', component: ChatDetail},
{path: '/message/fans', component: Fans},
{path: '/edit-userinfo', component: EditUserInfo},
{path: '/edit-userinfo-item', component: EditUserInfoItem},
{path: '/country-choose', component: countryChoose},

18
src/store/index.js
View File

@ -3,6 +3,12 @@ import enums from '../utils/enums'
import api from '../api/index'
import CONST_VAR from "../utils/const_var";
let RELATE_ENUM = {
FOLLOW_ME: 1,//只关注我
FOLLOW_EACH_OTHER: 2,//互相关注
FOLLOW_HE: 3,//我关注他
REQUEST_FOLLOW: 4//关注请求
}
const store = Vuex.createStore({
state: {
bodyHeight: document.body.clientHeight,
@ -58,7 +64,8 @@ const store = Vuex.createStore({
"isDelete": 0,
"account": "234",
"pinyin": "M",
"select": false
"select": false,
type: RELATE_ENUM.REQUEST_FOLLOW
},
{
"id": "2b446aa8-5d31-429a-8e39-d4705eb4e900",
@ -76,7 +83,8 @@ const store = Vuex.createStore({
"isDelete": 0,
"account": "33453",
"pinyin": "Q",
"select": false
"select": false,
type: RELATE_ENUM.FOLLOW_ME
},
{
"id": "2d8622b4-7112-4bc7-a0cf-00a268a85504",
@ -94,7 +102,8 @@ const store = Vuex.createStore({
"isDelete": 0,
"account": "234234",
"pinyin": "#",
"select": false
"select": false,
type: RELATE_ENUM.FOLLOW_HE
},
{
"id": "2e38900b-65f7-426a-8e8b-edb403df35fb",
@ -112,7 +121,8 @@ const store = Vuex.createStore({
"isDelete": 0,
"account": "1111",
"pinyin": "#",
"select": false
"select": false,
type: RELATE_ENUM.FOLLOW_EACH_OTHER
},
{
"id": "3cd53cb5-04f8-4439-ad2b-e57b3f9b8c73",