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-07-23 14:08:44 +08:00
parent 8c64230367
commit c81f15f4c9
7 changed files with 333 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -58,6 +58,7 @@ export default {
'/video-detail',
'/scan',
'/face-to-face',
'/chat',
'',
];
const toDepth = routeDeep.indexOf(to.path)

3
src/assets/scss/variables.scss
View File

@ -1 +1,2 @@
$footer-height: 60px;
$footer-height: 6rem;
$header-height: 6rem;

6
src/components/FromBottomDialog.vue
View File

@ -98,6 +98,8 @@ export default {
done()
}, 200)
},
afterEnter() {
},
beforeLeave(el) {
this.$setCss(el, 'transition-duration', `200ms`)
this.$setCss(el, 'transform', `translate3d(0,0,0)`)
@ -106,6 +108,10 @@ export default {
this.$setCss(el, 'transform', `translate3d(0,${this.height},0)`)
setTimeout(done, 200)
},
afterLeave() {
},
hide(val = false) {
this.$emit('update:modelValue', val)
},

317
src/pages/message/Chat.vue Normal file
View File

@ -0,0 +1,317 @@
<template>
<div class="Chat">
<div class="header">
<div class="left">
<img src="../../assets/img/icon/back.png" alt="" @click="$back">
<div class="badge">12</div>
<span>zzzz</span>
</div>
<div class="right">
<img src="../../assets/img/icon/back.png" alt="">
<img src="../../assets/img/icon/back.png" alt="">
<img src="../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="message-wrapper">
<div class="message" v-for="item in messages">
<div class="time"
v-if="item.type === MESSAGE_TYPE.TIME">
{{ item.time }}
</div>
<div class="chat-text"
:class="item.createBy !== myId ? 'left' : 'right'"
v-if="item.type === MESSAGE_TYPE.TEXT">
<img v-if="item.createBy !== myId" src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
<div class="content">{{ item.data }}</div>
<img v-if="item.createBy === myId" src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
</div>
<div class="douyin_video"
:class="item.createBy !== myId ? 'left' : 'right'"
v-if="item.type === MESSAGE_TYPE.DOUYIN_VIDEO">
<img v-if="item.createBy !== myId" src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
<div class="content">{{ item.data }}</div>
<img v-if="item.createBy === myId" src="../../assets/img/icon/head-image.jpeg" alt="" class="avatar">
</div>
</div>
</div>
</div>
</template>
<script>
let CALL_STATE = {
REJECT: 0,
RESOLVE: 1,
NONE: 2,
}
let VIDEO_STATE = {
VALID: 0,
INVALID: 1,
}
let AUDIO_STATE = {
NORMAL: 0,
SENDING: 1,
}
let READ_STATE = {
SENDING: 0,
ARRIVED: 1,
READ: 1,
}
let MESSAGE_TYPE = {
TEXT: 0,
TIME: 1,
VIDEO: 2,
DOUYIN_VIDEO: 2,
AUDIO: 3,
IMAGE: 6,
VIDEO_CALL: 4,
AUDIO_CALL: 5,
MEME: 7,//表情包
RED_PACKET: 8,//红包
}
export default {
name: "Chat",
data() {
return {
videoCall: [],
MESSAGE_TYPE,
myId: 1,
messages: [
{
type: MESSAGE_TYPE.TIME,
data: '',
time: '2021-01-02 21:21'
},
{
type: MESSAGE_TYPE.TEXT,
data: '又在刷抖音',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.TEXT,
data: '我昨天@你那个视频发给我下',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.TEXT,
data: '我找不到了',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.TEXT,
data: '我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了我也找不到了',
time: '2021-01-02 21:21',
createBy: 2
},
{
type: MESSAGE_TYPE.DOUYIN_VIDEO,
state: VIDEO_STATE.VALID,
data: {
src: '../../assets/video/1.mp4',
author: {
name: 'safasdfas',
avatar: '../../assets/img/icon/head-image.jpg'
},
title: 'asdfasdfasdfasdf'
},
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.DOUYIN_VIDEO,
state: VIDEO_STATE.INVALID,
data: {
src: '../../assets/video/1.mp4',
author: {
name: 'safasdfas',
avatar: '../../assets/img/icon/head-image.jpg'
},
title: 'asdfasdfasdfasdf'
},
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.VIDEO,
state: VIDEO_STATE.VALID,
data: '../../assets/video/1.mp4',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.AUDIO,
state: AUDIO_STATE.NORMAL,
data: '../../assets/video/1.mp4',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.AUDIO,
state: AUDIO_STATE.SENDING,
data: '../../assets/video/1.mp4',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.VIDEO_CALL,
state: CALL_STATE.REJECT,
data: '2021-01-02 21:44',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.VIDEO_CALL,
state: CALL_STATE.RESOLVE,
data: '2021-01-02 21:44',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.VIDEO_CALL,
state: CALL_STATE.NONE,
data: '2021-01-02 21:44',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.AUDIO_CALL,
state: CALL_STATE.REJECT,
data: '2021-01-02 21:44',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.AUDIO_CALL,
state: CALL_STATE.RESOLVE,
data: '2021-01-02 21:44',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.AUDIO_CALL,
state: CALL_STATE.NONE,
data: '2021-01-02 21:44',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.IMAGE,
state: AUDIO_STATE.NORMAL,
data: '../../assets/video/1.mp4',
time: '2021-01-02 21:21',
createBy: 1
},
{
type: MESSAGE_TYPE.IMAGE,
state: AUDIO_STATE.NORMAL,
data: '../../assets/video/1.mp4',
time: '2021-01-02 21:21',
createBy: 1,
readState: READ_STATE.ARRIVED
},
]
}
},
computed: {},
created() {
},
methods: {}
}
</script>
<style scoped lang="scss">
@import "../../assets/scss/index";
.Chat {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
.header {
position: fixed;
width: 100%;
box-sizing: border-box;
height: $header-height;
padding: 0 1rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid $line-color;
img {
height: 2rem;
margin: 0 1rem;
}
.left {
max-width: 60%;
overflow: hidden;
display: flex;
align-items: center;
.badge {
margin-right: 1rem;
font-size: 1.2rem;
display: block;
padding: 1px 6px;
border-radius: 10px;
color: white;
background: $second-btn-color;
}
}
}
.message-wrapper {
padding-top: 6rem;
.message {
padding: 0 1rem;
margin-bottom: 2rem;
.time {
color: $second-text-color;
text-align: center;
height: 4rem;
line-height: 6rem;
}
.right {
justify-content: flex-end;
}
.left {
justify-content: flex-start;
}
.chat-text {
display: flex;
margin: 1rem 0;
.content {
max-width: 60vw;
padding: 1rem;
border-radius: .3rem;
margin: 0 1rem;
display: flex;
align-items: center;
font-size: 1.4rem;
background: dodgerblue;
}
.avatar {
height: 3.6rem;
border-radius: 50%;
}
}
}
}
}
</style>

4
src/pages/home/Message.vue → src/pages/message/Message.vue
View File

@ -10,7 +10,7 @@
<div class="line mb2r"></div>
<div class="friends pl1r ">
<div class="friend pr1r pl1r"
@click="$nav('/edit-userinfo')"
@click="$nav('/chat')"
v-for="item in 10">
<div class="avatar on-line">
<img src="../../assets/img/icon/head-image.jpeg" alt="">
@ -719,7 +719,7 @@ export default {
}
.badge {
font-size: 1rem;
font-size: 1.2rem;
display: block;
color: black;
padding: 1px 6px;

4
src/router/index.js
View File

@ -2,7 +2,7 @@ import * as VueRouter from "vue-router";
import Index from "../pages/home/Index";
import Attention from "../pages/home/Attention";
import Message from "../pages/home/Message";
import Message from "../pages/message/Message";
import Me from "../pages/me/Me";
import Music from "../components/common/Music";
import countryChoose from "../pages/login/countryChoose";
@ -27,6 +27,7 @@ import ServiceProtocol from "../pages/other/ServiceProtocol";
import AddressList from "../pages/people/AddressList";
import Scan from "../pages/people/Scan";
import FaceToFace from "../pages/people/FaceToFace";
import Chat from "../pages/message/Chat";
const routes = [
// {path: '', component: Music},
@ -58,6 +59,7 @@ const routes = [
{path: '/address-list', component: AddressList},
{path: '/scan', component: Scan},
{path: '/face-to-face', component: FaceToFace},
{path: '/chat', component: Chat},
]
export default VueRouter.createRouter({

1
src/utils/enums.js
View File

@ -5,3 +5,4 @@ export default {
ME: 2,
}
}