|
|
@@ -0,0 +1,357 @@
|
|
|
+<template>
|
|
|
+ <div id="createdRoom" @click.stop>
|
|
|
+ <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 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 class="user_name">
|
|
|
+ <input class="input_name" maxlength="20" v-model.trim="userName" type="text" :placeholder="role == 'leader' ? ' 请输入发起人昵称' : '请输入您的昵称'" />
|
|
|
+ <span class="limitNum">{{ userName.length }}/20</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-if="role!='customer'" class="mode_btn">
|
|
|
+ <div @click="chooseMode(i.mode)" v-for="i,index in modeList" :key="index" :class="{ active: mode==i.mode }" class="mode">{{i.title}}</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="created_btn">
|
|
|
+ <div class="created_cancel" @click="closeCreated">取消</div>
|
|
|
+ <div class="created_confirm" @click="createdConfirm">确认</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <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 { useStore } from 'vuex';
|
|
|
+import Cropper from '@/components/cropper/cropper.vue';
|
|
|
+export default {
|
|
|
+ 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: '',
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ avatar: function () {
|
|
|
+ return this.$store.getters['rtc/avatar']
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: { Cropper },
|
|
|
+ // 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;
|
|
|
+ },
|
|
|
+
|
|
|
+ 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);
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$emit('createdConfirm');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+#createdRoom {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100%;
|
|
|
+ // background: rgba(0, 0, 0, 0.5);
|
|
|
+ background: transparent;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1000000;
|
|
|
+ // pointer-events: none;
|
|
|
+ .created_dialog {
|
|
|
+ width: 8.64rem;
|
|
|
+ min-height: 5rem;
|
|
|
+ // background: #ffffff;
|
|
|
+ pointer-events: auto;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ // overflow: hidden;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .blurBox {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ filter: blur(1px);
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .avatar-box {
|
|
|
+ width: 1.7067rem;
|
|
|
+ height: 1.7067rem;
|
|
|
+ margin: 0.56rem auto 0;
|
|
|
+ border: 1px #fff solid;
|
|
|
+ border-radius: 50%;
|
|
|
+ // background-image: url('@/assets/images/avatar_default.jpg');
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ border: 1px #ed5d18 solid;
|
|
|
+ .tips {
|
|
|
+ color: #ed5d18;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ width: 100%;
|
|
|
+ height: 0.5rem;
|
|
|
+ position: absolute;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 0.5rem;
|
|
|
+ font-size: 0.22rem;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dialog_title {
|
|
|
+ font-size: 0.39rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 1.39rem;
|
|
|
+ padding: 0 0.56rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1.39rem;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ border-bottom-style: solid;
|
|
|
+ border-bottom-width: 1px;
|
|
|
+ border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+ .user_name {
|
|
|
+ width: 100%;
|
|
|
+ height: 1.11rem;
|
|
|
+ padding: 0 0.56rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ line-height: 1.11rem;
|
|
|
+ margin: 0.56rem 0;
|
|
|
+ position: relative;
|
|
|
+ .limitNum {
|
|
|
+ position: absolute;
|
|
|
+ right: 0.64rem;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ font-size: 0.33rem;
|
|
|
+ color: #b9bdbc;
|
|
|
+ }
|
|
|
+ .input_name {
|
|
|
+ font-size: 0.39rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 1.11rem;
|
|
|
+ padding: 0 1.066667rem 0 0.28rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ &::placeholder {
|
|
|
+ color: rgba(255, 255, 255, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mode_btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 1.11rem;
|
|
|
+ padding: 0 0.56rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 0.56rem;
|
|
|
+ > div.mode {
|
|
|
+ width: 3.61rem;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 0.65rem;
|
|
|
+ border: 0.03rem solid #fff;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ line-height: 1.11rem;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.active {
|
|
|
+ color: #ed5d18;
|
|
|
+ border: 0.03rem solid #ed5d18;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .created_btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 1.36rem;
|
|
|
+ border-top-style: solid;
|
|
|
+ border-top-width: 1px;
|
|
|
+ border-top-color: rgba(255, 255, 255, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ > div {
|
|
|
+ width: 50%;
|
|
|
+ height: 1.36rem;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.36rem;
|
|
|
+ font-size: 0.39rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.created_cancel {
|
|
|
+ color: #fff;
|
|
|
+ border-right-style: solid;
|
|
|
+ border-right-width: 1px;
|
|
|
+ border-right-color: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+ &.created_confirm {
|
|
|
+ color: #ed5d18;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
gemercheung