|
|
@@ -1,25 +1,27 @@
|
|
|
<template>
|
|
|
- <div id="createdRoom" @click.stop>
|
|
|
+ <div id="createdRoom" @click.stop v-if="ifShow">
|
|
|
<div class="created_dialog">
|
|
|
<div class="blurBox"></div>
|
|
|
+
|
|
|
<div class="content">
|
|
|
- <div class="dialog_title" v-if="role == 'leader'">创建一起逛</div>
|
|
|
- <div class="dialog_title" v-else>进入一起逛</div>
|
|
|
- <div
|
|
|
+ <div class="dialog_title">加入带看房间</div>
|
|
|
+ <!-- <div class="dialog_title" v-if="role == 'leader'">创建一起逛</div>
|
|
|
+ <div class="dialog_title" v-else>进入一起逛</div> -->
|
|
|
+ <!-- <div
|
|
|
class="avatar-box"
|
|
|
v-if="role == 'leader'"
|
|
|
:style="`background-image:url(${avatar || defaultAvatar});`"
|
|
|
>
|
|
|
<input type="file" @change="changeFile($event)" accept=".jpg,.png" />
|
|
|
<div class="tips">更换</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="user_name">
|
|
|
<input
|
|
|
class="input_name"
|
|
|
maxlength="20"
|
|
|
v-model.trim="userName"
|
|
|
type="text"
|
|
|
- :placeholder="role == 'leader' ? ' 请输入发起人昵称' : '请输入您的昵称'"
|
|
|
+ placeholder="请输入您的昵称"
|
|
|
/>
|
|
|
<span class="limitNum">{{ userName.length }}/20</span>
|
|
|
</div>
|
|
|
@@ -32,146 +34,51 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Cropper v-bind="option" v-if="showCrop" @close="closeCrop" @ok="confirmCrop" />
|
|
|
+ <!-- <Cropper v-bind="option" v-if="showCrop" @close="closeCrop" @ok="confirmCrop" /> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts">
|
|
|
- import Dialog from '/@/components/basic/dialog';
|
|
|
- import browser from '/@/utils/browser';
|
|
|
- import Cropper from '@/components/cropper/cropper.vue';
|
|
|
- export default {
|
|
|
- components: { Cropper },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- role: browser.getURLParam('role') || 'leader',
|
|
|
- mode: browser.getURLParam('mode') || 2,
|
|
|
- modeList: [
|
|
|
- {
|
|
|
- mode: 1,
|
|
|
- title: '1V1',
|
|
|
- },
|
|
|
- {
|
|
|
- mode: 2,
|
|
|
- title: '多人模式',
|
|
|
- },
|
|
|
- ],
|
|
|
- store: useStore(),
|
|
|
- userName: '',
|
|
|
- roomId: browser.getURLParam('roomId'),
|
|
|
- showCrop: false,
|
|
|
- // base64: null,
|
|
|
- defaultAvatar: require('@/assets/images/avatar_default.png'),
|
|
|
- // avatar: null,
|
|
|
- option: {
|
|
|
- // img: 'https://4dkk.4dage.com/scene_edit_data/KK-t-SfG2Xcb8QX/user/thumb-1k.jpg?_=1661768330305',
|
|
|
- img: '',
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- avatar: function () {
|
|
|
- return this.$store.getters['rtc/avatar'];
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {},
|
|
|
- // created: {},
|
|
|
- // mounted:{},
|
|
|
- methods: {
|
|
|
- changeFile(e) {
|
|
|
- let file = e.target.files[0];
|
|
|
-
|
|
|
- let blob = window.URL.createObjectURL(file);
|
|
|
- console.log(blob);
|
|
|
- this.option.img = blob;
|
|
|
- this.openCrop();
|
|
|
- e.target.value = '';
|
|
|
- },
|
|
|
- confirmCrop(base64) {
|
|
|
- this.$store.commit('rtc/setAvatar', base64);
|
|
|
- },
|
|
|
- openCrop() {
|
|
|
- this.showCrop = true;
|
|
|
- },
|
|
|
- closeCrop() {
|
|
|
- this.showCrop = false;
|
|
|
- },
|
|
|
- getUrl(href, queryArr) {
|
|
|
- queryArr.forEach((item) => {
|
|
|
- if (!browser.hasURLParam(item.key)) {
|
|
|
- let ttt = href.split('index.html?');
|
|
|
- href = `${ttt[0]}index.html?${item.key}=${item.val}&${ttt[1]}`;
|
|
|
- } else {
|
|
|
- href = browser.replaceQueryString(href, item.key, item.val);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- return href;
|
|
|
- },
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { ref, unref, watchEffect } from 'vue';
|
|
|
|
|
|
- chooseMode(mode) {
|
|
|
- this.mode = mode;
|
|
|
- },
|
|
|
- closeCreated() {
|
|
|
- this.$emit('closeCreated');
|
|
|
- },
|
|
|
- createdConfirm() {
|
|
|
- if (this.userName == '') {
|
|
|
- Dialog.toast({ content: '请输入入您的昵称', type: 'error' });
|
|
|
- return;
|
|
|
- }
|
|
|
- let name = encodeURIComponent(this.userName);
|
|
|
- let hh = window.location.href;
|
|
|
-
|
|
|
- if (this.role == 'customer') {
|
|
|
- let tempUrl = this.getUrl(hh, [
|
|
|
- {
|
|
|
- key: 'mode',
|
|
|
- val: this.mode,
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'name',
|
|
|
- val: name,
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'role',
|
|
|
- val: 'customer',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'roomId',
|
|
|
- val: this.roomId,
|
|
|
- },
|
|
|
- ]);
|
|
|
- // history.replaceState(null, null, hh + "&mode=" + this.mode + "&name=" + name + "&role=customer&roomId=" + this.roomId);
|
|
|
- history.replaceState(null, null, tempUrl);
|
|
|
- } else {
|
|
|
- let tempUrl = this.getUrl(hh, [
|
|
|
- {
|
|
|
- key: 'mode',
|
|
|
- val: this.mode,
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'name',
|
|
|
- val: name,
|
|
|
- },
|
|
|
- {
|
|
|
- key: 'role',
|
|
|
- val: 'leader',
|
|
|
- },
|
|
|
- ]);
|
|
|
-
|
|
|
- // history.replaceState(null, null,hh + "&mode=" + this.mode + "&name=" + name + "&role=leader");
|
|
|
- history.replaceState(null, null, tempUrl);
|
|
|
- console.log(tempUrl);
|
|
|
- }
|
|
|
- this.store.commit('rtc/setRole', this.role);
|
|
|
+ import Dialog from '/@/components/basic/dialog';
|
|
|
+ import { useRtcStore } from '/@/store/modules/rtc';
|
|
|
+ // import browser from '/@/utils/browser';
|
|
|
+ // import Cropper from '@/components/cropper/cropper.vue';
|
|
|
+ // Cropper
|
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$emit('createdConfirm');
|
|
|
- });
|
|
|
- },
|
|
|
+ const userName = ref('');
|
|
|
+ const rtcStore = useRtcStore();
|
|
|
+ const ifShow = ref(false);
|
|
|
+ const props = defineProps({
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
},
|
|
|
+ });
|
|
|
+ watchEffect(() => {
|
|
|
+ if (props.show) {
|
|
|
+ ifShow.value = props.show;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const closeCreated = () => {
|
|
|
+ ifShow.value = false
|
|
|
+ };
|
|
|
+ const createdConfirm = () => {
|
|
|
+ if (unref(userName).length === 0) {
|
|
|
+ Dialog.toast({ content: '请输入入您的昵称', type: 'error' });
|
|
|
+ } else {
|
|
|
+ console.log('userName', unref(userName));
|
|
|
+ rtcStore.setNickName(unref(userName));
|
|
|
+ const search = new URLSearchParams(location.search);
|
|
|
+ search.set('name', decodeURIComponent(unref(userName)));
|
|
|
+ const replaceUrl = location.origin + location.pathname + search.toString();
|
|
|
+ console.log('replaceUrl', replaceUrl);
|
|
|
+ history.replaceState(null, '', replaceUrl);
|
|
|
+ Dialog.toast({ content: '保存成功！', type: 'success' });
|
|
|
+ ifShow.value = false
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
gemercheung