邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 

298 wiersze
6.3 KiB

  1. <template>
  2. <div :class="inPage ? 'page active' : 'page'">
  3. <div id="top"></div>
  4. <top />
  5. <video
  6. @play="videoPlayBtn = false"
  7. class="videoBox"
  8. id="video"
  9. v-if="loading"
  10. :src="videoUrl"
  11. ref="video"
  12. autoplay
  13. muted="muted"
  14. loop="loop"
  15. playsinline
  16. :style="'width:100%;height:' + screenHeight + 'px;'"
  17. ></video>
  18. <div class="controlBox" :style="'width:' + screenWidth + 'px;'">
  19. <div :class="isExpend ? 'chatBox' : 'chatBox expand'">
  20. <div class="item top">聊天记录</div>
  21. <div
  22. v-for="item in chatList"
  23. :class="item.type == 0 ? 'item left' : 'item right'"
  24. >
  25. {{ item.type == 0 ? `我:${item.msg}` : `${item.msg}:你` }}
  26. </div>
  27. <div v-if="chatList.length > 0" class="item center">已经到底啦</div>
  28. <div v-if="chatList.length == 0" class="item noMsg">暂无聊天记录哦</div>
  29. </div>
  30. <div class="itemBox left" @click="sendMessage">
  31. <img src="../../assets/icon/enter.png" alt="" />
  32. </div>
  33. <input
  34. v-model="inputText"
  35. class="inputInside"
  36. type="text"
  37. placeholder="输入文字聊天"
  38. />
  39. <img
  40. :class="isExpend ? 'arrow' : 'arrow active'"
  41. src="../../assets/icon/arrow-down-bold.png"
  42. @click="expendChatBox"
  43. />
  44. <div class="itemBox right" @click="setVoice">
  45. <img v-if="!isVoiceClose" src="../../assets/icon/voice.png" alt="" />
  46. <img
  47. v-if="isVoiceClose"
  48. src="../../assets/icon/voice_close.png"
  49. alt=""
  50. />
  51. </div>
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. // 组件
  57. import Vue from "vue";
  58. import { Toast } from "vant";
  59. import { mapState, mapActions } from "vuex";
  60. import top from "../../components/common/top";
  61. // 工具
  62. import { scrollToID } from "../../utils";
  63. // import io from "socket.io";
  64. Vue.use(Toast);
  65. export default {
  66. components: {
  67. top,
  68. },
  69. data() {
  70. return {
  71. inPage: false,
  72. videoUrl: "",
  73. videoPlayBtn: true,
  74. loading: false, // 加载状态
  75. isVoiceClose: false,
  76. isExpend: false, // 对话框展开状态
  77. inputText: "",
  78. screenWidth: document.documentElement.clientWidth,
  79. screenHeight: document.documentElement.clientHeight,
  80. socket: null,
  81. chatList: [
  82. {
  83. type: 0,
  84. msg: "你好!",
  85. },
  86. {
  87. type: 1,
  88. msg: "你好!",
  89. },
  90. {
  91. type: 0,
  92. msg: "你好!",
  93. },
  94. {
  95. type: 1,
  96. msg: "你好!",
  97. },
  98. ],
  99. };
  100. },
  101. computed: {
  102. ...mapState({
  103. characters: (state) => state.publicObj.characters,
  104. }),
  105. },
  106. methods: {
  107. ...mapActions(["setCharacters"]),
  108. go(url) {
  109. this.$router.push(url);
  110. },
  111. setVoice() {
  112. this.isVoiceClose = !this.isVoiceClose;
  113. Toast.success(this.isVoiceClose ? "麦克风已关闭" : "麦克风已开启");
  114. },
  115. sendMessage() {},
  116. expendChatBox() {
  117. this.isExpend = !this.isExpend;
  118. },
  119. socketOnLink() {
  120. const url = document.location.host;
  121. this.socket = new WebSocket("wss://" + url);
  122. this.socket.onopen = (success) => {
  123. console.log(success, "连接成功!");
  124. };
  125. this.socket.onclose = (evt) => {
  126. console.log(evt, "连接已断开!");
  127. };
  128. this.socket.onerror = (evt) => {
  129. console.log(evt, "连接失败");
  130. };
  131. this.socket.onmessage = (e) => {
  132. console.log(e, "e");
  133. };
  134. },
  135. socketLogin() {
  136. let req = new Object();
  137. req.cmd = "CMD_USER_LOGIN";
  138. req.username = "Passager";
  139. req.password = "123456";
  140. req.agent = "browser";
  141. let str = JSON.stringify(req);
  142. this.socket.send(str);
  143. },
  144. },
  145. created() {},
  146. mounted() {
  147. this.inPage = true;
  148. scrollToID("top");
  149. this.videoUrl =
  150. "https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4";
  151. this.loading = true;
  152. this.socketOnLink();
  153. },
  154. };
  155. </script>
  156. <style lang="scss" scoped>
  157. .page {
  158. position: relative;
  159. transform: translateX(30%);
  160. opacity: 0;
  161. transition: all 0.5s; // global-transition
  162. &.active {
  163. opacity: 1;
  164. transform: translateX(0);
  165. }
  166. .videoBox {
  167. position: absolute;
  168. top: 0;
  169. left: 0;
  170. z-index: -1;
  171. object-fit: fill;
  172. }
  173. .controlBox {
  174. position: absolute;
  175. bottom: -670px;
  176. height: 300px;
  177. .chatBox {
  178. position: relative;
  179. width: 100%;
  180. height: 160px;
  181. color: #ffffff;
  182. padding: 15px 30px 15px 30px;
  183. overflow: scroll;
  184. background-color: #00000054;
  185. opacity: 1;
  186. transition: all 0.3s;
  187. .item {
  188. margin-bottom: 8px;
  189. &.top {
  190. position: sticky;
  191. top: 0px;
  192. text-align: center;
  193. }
  194. &.left {
  195. text-align: left;
  196. }
  197. &.right {
  198. text-align: right;
  199. }
  200. &.center {
  201. text-align: center;
  202. margin-top: 40px;
  203. }
  204. &.noMsg {
  205. position: absolute;
  206. left: 50%;
  207. bottom: 0;
  208. transform: translateX(-50%);
  209. text-align: center;
  210. }
  211. }
  212. &.expand {
  213. transform: translateY(100px);
  214. opacity: 0;
  215. z-index: -1;
  216. }
  217. }
  218. .itemBox {
  219. position: absolute;
  220. bottom: 50px;
  221. width: 50px;
  222. height: 50px;
  223. border: 3.5px solid #ffffff;
  224. border-radius: 50%;
  225. text-align: center;
  226. padding: 10px;
  227. transition: all 0.3s;
  228. cursor: pointer;
  229. &.left {
  230. left: 295px;
  231. }
  232. &.right {
  233. right: 295px;
  234. }
  235. img {
  236. width: 100%;
  237. height: 100%;
  238. }
  239. &.active {
  240. opacity: 0.8;
  241. }
  242. }
  243. .arrow {
  244. position: absolute;
  245. bottom: 100px;
  246. left: 50%;
  247. transform: translateX(-50%);
  248. width: 30px;
  249. height: 30px;
  250. transition: all 0.2s;
  251. &.active {
  252. transform: translateX(-50%) rotate(180deg);
  253. }
  254. }
  255. .inputInside {
  256. position: absolute;
  257. bottom: 57px;
  258. left: 50%;
  259. transform: translateX(-50%);
  260. width: 170px;
  261. height: 35px;
  262. border: 3.5px solid #ffffff;
  263. border-radius: 7px;
  264. padding-left: 10px;
  265. color: #ffffff;
  266. caret-color: #ffffff;
  267. &::-webkit-input-placeholder {
  268. color: #ffffffbb;
  269. }
  270. }
  271. }
  272. }
  273. </style>