HolyKnightIX há 1 ano
ascendente
cometimento
ab47a556fb
11 ficheiros alterados com 375 adições e 8 eliminações
  1. +1
    -0
      package.json
  2. BIN
      src/assets/icon/arrow-down-bold.png
  3. BIN
      src/assets/icon/arrow-up-bold.png
  4. BIN
      src/assets/icon/enter.png
  5. BIN
      src/assets/icon/input.png
  6. BIN
      src/assets/icon/voice.png
  7. BIN
      src/assets/icon/voice_close.png
  8. +28
    -5
      src/components/home/home.vue
  9. +6
    -0
      src/router/index.js
  10. +243
    -0
      src/views/realTimeChat/realTimeChat.vue
  11. +97
    -3
      yarn.lock

+ 1
- 0
package.json Ver ficheiro

@@ -19,6 +19,7 @@
"mic-recorder-to-mp3": "^2.2.2",
"postcss-px2rem": "^0.3.0",
"register-service-worker": "^1.7.1",
"socket.io": "^4.7.1",
"swiper": "^4.5.1",
"vant": "^2.12.48",
"vue": "^2.6.11",


BIN
src/assets/icon/arrow-down-bold.png Ver ficheiro

Antes Depois
Largura: 400  |  Altura: 400  |  Tamanho: 7.6 KiB

BIN
src/assets/icon/arrow-up-bold.png Ver ficheiro

Antes Depois
Largura: 400  |  Altura: 400  |  Tamanho: 6.0 KiB

BIN
src/assets/icon/enter.png Ver ficheiro

Antes Depois
Largura: 400  |  Altura: 400  |  Tamanho: 8.1 KiB

BIN
src/assets/icon/input.png Ver ficheiro

Antes Depois
Largura: 600  |  Altura: 600  |  Tamanho: 12 KiB

BIN
src/assets/icon/voice.png Ver ficheiro

Antes Depois
Largura: 400  |  Altura: 400  |  Tamanho: 14 KiB

BIN
src/assets/icon/voice_close.png Ver ficheiro

Antes Depois
Largura: 400  |  Altura: 400  |  Tamanho: 14 KiB

+ 28
- 5
src/components/home/home.vue Ver ficheiro

@@ -72,6 +72,15 @@
>
{{ characters == 1 ? "开始聊天" : "Let's Talk" }}
</div>
<div class="bottom">
<div v-if="characters == 1">
Explore our website, or click above to let Metavatar show you around
</div>
<div v-if="characters != 1">
Explore our website, or click above to let Metavatar show you around
</div>
</div>
</div>
<div class="module_1">
@@ -941,10 +950,7 @@ export default {
goToChat() {
console.log("goToChat");
this.isBtnActice = false;
},
startSocket() {
const socket = new WebSocket("wss://43.143.227.135:8989/webrtc");
this.$router.push("/realTimeChat");
},
},
computed: {
@@ -979,7 +985,6 @@ export default {
},
mounted() {
this.goView("top");
this.startSocket();
this.$nextTick(() => {
this.module_6_data = oneList;
this.carouselLsit = twoList;
@@ -1267,6 +1272,24 @@ export default {
transform: translate(-50%, -50%) scale(0.9);
}
}
.bottom {
position: absolute;
color: #fff;
width: 300px;
text-align: center;
left: 50%;
bottom: 5%;
transform: translate(-50%, 0);
font-size: 20px;
font-size: 12px;
.text1 {
margin-bottom: 10px;
}
.text2 {
text-align: center;
}
}
}
.module_1 {


+ 6
- 0
src/router/index.js Ver ficheiro

@@ -121,6 +121,12 @@ const routes = [
name: 'downloadVideo',
component: () => import("../views/model/downloadVideo"),
},
// 实时对话
{
path: '/realTimeChat',
name: 'realTimeChat',
component: () => import("../views/realTimeChat/realTimeChat"),
},
]
const router = new VueRouter({


+ 243
- 0
src/views/realTimeChat/realTimeChat.vue Ver ficheiro

@@ -0,0 +1,243 @@
<template>
<div :class="inPage ? 'page active' : 'page'">
<div id="top"></div>
<top />
<video
@play="videoPlayBtn = false"
class="videoBox"
id="video"
v-if="loading"
:src="videoUrl"
ref="video"
autoplay
muted="muted"
loop="loop"
playsinline
:style="'width:100%;height:' + screenHeight + 'px;'"
></video>

<div class="controlBox" :style="'width:' + screenWidth + 'px;'">
<div :class="isExpend ? 'chatBox' : 'chatBox expand'">
<div class="item top">聊天记录</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item left">我:{{ 123456 }}</div>
<div class="item right">{{ 123456 }}:你</div>
<div class="item center">已经到底啦</div>
</div>

<div class="itemBox left" @click="sendMessage">
<img src="../../assets/icon/enter.png" alt="" />
</div>

<input
v-model="inputText"
class="inputInside"
type="text"
placeholder="输入文字聊天"
/>

<img
:class="isExpend ? 'arrow' : 'arrow active'"
src="../../assets/icon/arrow-down-bold.png"
@click="expendChatBox"
/>

<div class="itemBox right" @click="setVoice">
<img v-if="!isVoiceClose" src="../../assets/icon/voice.png" alt="" />
<img
v-if="isVoiceClose"
src="../../assets/icon/voice_close.png"
alt=""
/>
</div>
</div>
</div>
</template>

<script>
// 组件
import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import top from "../../components/common/top";
// 工具
import { scrollToID } from "../../utils";
// import io from "socket.io";

Vue.use(Toast);
export default {
components: {
top,
},
data() {
return {
inPage: false,
videoUrl: "",
videoPlayBtn: true,
loading: false, // 加载状态
isVoiceClose: false,
isExpend: true,
inputText: "",
screenWidth: document.documentElement.clientWidth,
screenHeight: document.documentElement.clientHeight,
};
},
computed: {
...mapState({
characters: (state) => state.publicObj.characters,
}),
},

methods: {
...mapActions(["setCharacters"]),

go(url) {
this.$router.push(url);
},

setVoice() {
this.isVoiceClose = !this.isVoiceClose;
Toast.success(this.isVoiceClose ? "麦克风已关闭" : "麦克风已开启");
},

sendMessage() {},

expendChatBox() {
this.isExpend = !this.isExpend;
},
},
created() {},
mounted() {
this.inPage = true;
scrollToID("top");
this.videoUrl =
"https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4";
this.loading = true;
},
};
</script>

<style lang="scss" scoped>
.page {
position: relative;
transform: translateX(30%);
opacity: 0;
transition: all 0.5s; // global-transition
&.active {
opacity: 1;
transform: translateX(0);
}
.videoBox {
position: absolute;
top: 0;
left: 0;
z-index: -1;
object-fit: fill;
}
.controlBox {
position: absolute;
bottom: -670px;
height: 300px;
.chatBox {
position: relative;
width: 100%;
height: 160px;
color: #ffffff;
padding: 15px 30px 15px 30px;
overflow: scroll;
background-color: #00000054;
opacity: 1;
transition: all 0.3s;
.item {
margin-bottom: 8px;

&.top {
position: sticky;
top: 0px;
text-align: center;
}
&.left {
text-align: left;
}
&.right {
text-align: right;
}
&.center {
text-align: center;
}
}

&.expand {
transform: translateY(100px);
opacity: 0;
z-index: -1;
}
}
.itemBox {
position: absolute;
bottom: 50px;
width: 60px;
height: 60px;
border: 3.5px solid #ffffff;
border-radius: 50%;
text-align: center;
padding: 10px;
transition: all 0.3s;
cursor: pointer;
&.left {
left: 295px;
}
&.right {
right: 295px;
}
img {
width: 100%;
height: 100%;
}
&.active {
opacity: 0.8;
}
}

.arrow {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
transition: all 0.2s;

&.active {
transform: translateX(-50%) rotate(180deg);
}
}

.inputInside {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
width: 170px;
height: 35px;
border: 3.5px solid #ffffff;
border-radius: 7px;
padding-left: 10px;
color: #ffffff;
caret-color: #ffffff;
&::-webkit-input-placeholder {
color: #ffffffbb;
}
}
}
}
</style>

+ 97
- 3
yarn.lock Ver ficheiro

@@ -152,6 +152,11 @@
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==

"@socket.io/component-emitter@~3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==

"@soda/friendly-errors-webpack-plugin@^1.7.1":
version "1.8.1"
resolved "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz"
@@ -195,6 +200,18 @@
dependencies:
"@types/node" "*"

"@types/cookie@^0.4.1":
version "0.4.1"
resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==

"@types/cors@^2.8.12":
version "2.8.13"
resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.13.tgz#b8ade22ba455a1b8cb3b5d3f35910fd204f84f94"
integrity sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==
dependencies:
"@types/node" "*"

"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.31":
version "4.17.32"
resolved "https://registry.npmmirror.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.32.tgz"
@@ -254,6 +271,11 @@
resolved "https://registry.npmmirror.com/@types/node/-/node-18.11.18.tgz"
integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==

"@types/node@>=10.0.0":
version "20.4.4"
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.4.tgz#c79c7cc22c9d0e97a7944954c9e663bcbd92b0cb"
integrity sha512-CukZhumInROvLq3+b5gLev+vgpsIqC2D0deQr/yS1WnxvmYLlJXZpaQrQiseMY+6xusl79E04UjWoqyr+t1/Ew==

"@types/normalize-package-data@^2.4.0":
version "2.4.1"
resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
@@ -1042,6 +1064,11 @@ base64-js@^1.0.2, base64-js@^1.3.1:
resolved "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz"
integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==

base64id@2.0.0, base64id@~2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/base64id/-/base64id-2.0.0.tgz#2770ac6bc47d312af97a8bf9a634342e0cd25cb6"
integrity sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==

base@^0.11.1:
version "0.11.2"
resolved "https://registry.npmmirror.com/base/-/base-0.11.2.tgz"
@@ -1996,6 +2023,11 @@ cookie@0.5.0:
resolved "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz"
integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==

cookie@~0.4.1:
version "0.4.2"
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==

copy-concurrently@^1.0.0:
version "1.0.5"
resolved "https://registry.npmmirror.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz"
@@ -2046,6 +2078,14 @@ core-util-is@~1.0.0:
resolved "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz"
integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==

cors@~2.8.5:
version "2.8.5"
resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
dependencies:
object-assign "^4"
vary "^1"

cosmiconfig@^5.0.0:
version "5.2.1"
resolved "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz"
@@ -2358,7 +2398,7 @@ debug@^3.2.7:
dependencies:
ms "^2.1.1"

debug@^4.1.0, debug@^4.1.1:
debug@^4.1.0, debug@^4.1.1, debug@~4.3.1, debug@~4.3.2:
version "4.3.4"
resolved "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz"
integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -2833,6 +2873,27 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
dependencies:
once "^1.4.0"

engine.io-parser@~5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.1.0.tgz#d593d6372d7f79212df48f807b8cace1ea1cb1b8"
integrity sha512-enySgNiK5tyZFynt3z7iqBR+Bto9EVVVvDFuTT0ioHCGbzirZVGDGiQjZzEp8hWl6hd5FSVytJGuScX1C1C35w==

engine.io@~6.5.0:
version "6.5.1"
resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.5.1.tgz#59725f8593ccc891abb47f1efcdc52a089525a56"
integrity sha512-mGqhI+D7YxS9KJMppR6Iuo37Ed3abhU8NdfgSvJSDUafQutrN+sPTncJYTyM9+tkhSmWodKtVYGPPHyXJEwEQA==
dependencies:
"@types/cookie" "^0.4.1"
"@types/cors" "^2.8.12"
"@types/node" ">=10.0.0"
accepts "~1.3.4"
base64id "2.0.0"
cookie "~0.4.1"
cors "~2.8.5"
debug "~4.3.1"
engine.io-parser "~5.1.0"
ws "~8.11.0"

enhanced-resolve@^4.5.0:
version "4.5.0"
resolved "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz"
@@ -5972,7 +6033,7 @@ oauth-sign@~0.9.0:
resolved "https://registry.npmmirror.com/oauth-sign/-/oauth-sign-0.9.0.tgz"
integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==

object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz"
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -7728,6 +7789,34 @@ snapdragon@^0.8.1:
source-map-resolve "^0.5.0"
use "^3.1.0"

socket.io-adapter@~2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz#5de9477c9182fdc171cd8c8364b9a8894ec75d12"
integrity sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA==
dependencies:
ws "~8.11.0"

socket.io-parser@~4.2.4:
version "4.2.4"
resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
dependencies:
"@socket.io/component-emitter" "~3.1.0"
debug "~4.3.1"

socket.io@^4.7.1:
version "4.7.1"
resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.7.1.tgz#9009f31bf7be25478895145e92fbc972ad1db900"
integrity sha512-W+utHys2w//dhFjy7iQQu9sGd3eokCjGbl2r59tyLqNiJJBdIebn3GAKEXBr3osqHTObJi2die/25bCx2zsaaw==
dependencies:
accepts "~1.3.4"
base64id "~2.0.0"
cors "~2.8.5"
debug "~4.3.2"
engine.io "~6.5.0"
socket.io-adapter "~2.5.2"
socket.io-parser "~4.2.4"

sockjs-client@^1.5.0:
version "1.6.1"
resolved "https://registry.npmmirror.com/sockjs-client/-/sockjs-client-1.6.1.tgz"
@@ -8778,7 +8867,7 @@ vant@^2.12.48:
"@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
vue-lazyload "1.2.3"

vary@~1.1.2:
vary@^1, vary@~1.1.2:
version "1.1.2"
resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz"
integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
@@ -9289,6 +9378,11 @@ ws@^6.0.0, ws@^6.2.1:
dependencies:
async-limiter "~1.0.0"

ws@~8.11.0:
version "8.11.0"
resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==

xtend@^4.0.0, xtend@~4.0.1:
version "4.0.2"
resolved "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz"


Carregando…
Cancelar
Guardar