update

.env

@@ -1,19 +1,20 @@
-VUE_APP_REGION_URL=''
 # 场景资源地址
-VITE_APP_RESOURCE_URL=https://4dkk.4dage.com/
+VITE_APP_RESOURCE_URL=https://testeurs3.4dkankan.com/
 # 静态资源地址
 VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
-VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.2.1
+VITE_APP_SDK_DIR=https://testeurs3.4dkankan.com/v4/www/sdk
 # socket地址
 VITE_APP_SOCKET_URL=wss://ws.4dkankan.com
 # 静态资源目录
 VITE_APP_STATIC_DIR=viewer
-# 接口请求地址
-VITE_APP_APIS_URL=https://test.4dkankan.com/
 
-VITE_TAKE_LOOK_API=https://v4-test.4dkankan.com
+# 云存储环境
+VUE_APP_REGION_URL=aws
+
+# 接口请求地址
+VITE_APP_APIS_URL=https://testeur.4dkankan.com/
 # VITE_APP_APIS_URL=https://v4-uat.4dkankan.com/
+# VITE_TAKE_LOOK_API=https://testeur.4dkankan.com/
 VITE_USE_HTTPS=1
-VITE_PUBLIC_DIR='/'
-
+VITE_PUBLIC_DIR='livestream/'

.env.development

@@ -1 +1,20 @@
+VUE_APP_REGION_URL=''
+# 场景资源地址
+VITE_APP_RESOURCE_URL=https://4dkk.4dage.com/
+# 静态资源地址
+VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
+# sdk文件地址
 VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.2.1
+# socket地址
+VITE_APP_SOCKET_URL=wss://ws.4dkankan.com
+# 静态资源目录
+VITE_APP_STATIC_DIR=viewer
+# 接口请求地址
+VITE_APP_APIS_URL=https://test.4dkankan.com/
+
+# VITE_TAKE_LOOK_API=https://v4-test.4dkankan.com
+# VITE_APP_APIS_URL=https://v4-uat.4dkankan.com/
+
+VITE_USE_HTTPS=1
+VITE_PUBLIC_DIR='/'
+

.env.eur

@@ -0,0 +1,20 @@
+# 场景资源地址
+VITE_APP_RESOURCE_URL=https://testeurs3.4dkankan.com/
+# 静态资源地址
+VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
+# sdk文件地址
+VITE_APP_SDK_DIR=https://testeurs3.4dkankan.com/v4/www/sdk
+# socket地址
+VITE_APP_SOCKET_URL=wss://ws.4dkankan.com
+# 静态资源目录
+VITE_APP_STATIC_DIR=viewer
+
+# 云存储环境
+VUE_APP_REGION_URL=aws
+
+# 接口请求地址
+VITE_APP_APIS_URL=https://testeur.4dkankan.com/
+# VITE_APP_APIS_URL=https://v4-uat.4dkankan.com/
+# VITE_TAKE_LOOK_API=https://testeur.4dkankan.com/
+VITE_USE_HTTPS=1
+VITE_PUBLIC_DIR='livestream/'

.env.production

@@ -15,6 +15,6 @@ VUE_APP_REGION_URL=aws
 # 接口请求地址
 VITE_APP_APIS_URL=https://testeur.4dkankan.com/
 # VITE_APP_APIS_URL=https://v4-uat.4dkankan.com/
-VITE_TAKE_LOOK_API=https://testeur.4dkankan.com/
+# VITE_TAKE_LOOK_API=https://testeur.4dkankan.com/
 VITE_USE_HTTPS=1
-VITE_PUBLIC_DIR='/livestream'
+VITE_PUBLIC_DIR='livestream/'

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
+    "dev-eur": "vite --mode eur",
     "build": "vue-tsc  --noEmit && vite build --mode production",
     "commit": "git add . && git cz",
     "preview": "vite preview",

src/App.vue

@@ -48,7 +48,12 @@
   watchEffect(() => {
     console.warn('mode', mode);
   });
-
+  // 强制开https
+  console.log('当前protocol', location.protocol);
+  if (location.protocol !== 'https:') {
+    location.protocol = 'https:';
+    console.log('强制开https');
+  }
   onMounted(async () => {
     const app = await createApp({
       dom: scene$.value as HTMLElement,

src/components/chatRoom/dialog/createdRoom.vue.back

@@ -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>
 

src/components/chatRoom/index.vue

@@ -107,6 +107,7 @@
     @close-dialog="showCloseDialog = false"
     @confirm-dialog="handleCloseRoom"
   />
+  <CreatedName :show="showCreateNameDialog" />
 </template>
 
 <script lang="ts" setup>
@@ -139,6 +140,7 @@
   import CloseDialog from './dialog/close.vue';
   // import { storeToRefs } from 'pinia';
   import ShareContainer from './share.vue';
+  import CreatedName from './dialog/createdName.vue';
   // hook
   const { isDrawing, setDraw, setCloseDraw } = useDraw();
   const { initialRoom } = useRoom();
@@ -168,7 +170,7 @@
 
   const shareLink = ref<string>('');
   const showCloseDialog = ref(false);
-
+  const showCreateNameDialog = ref(false);
   // watchEffect(() => {
 
   // });
@@ -195,6 +197,7 @@
   });
   if (initParams.nickname === '') {
     initParams.nickname = initParams.userId;
+    showCreateNameDialog.value = true;
   }
   rtcStore.setSocketParams(initParams);
 

src/hooks/useRoom.ts

@@ -85,7 +85,7 @@ export const changeScene = (scene: SceneItemType) => {
 };
 
 const shopAxios = axios.create({
-  baseURL: !import.meta.env.DEV ? 'https://v4-test.4dkankan.com' : '',
+  baseURL: !import.meta.env.DEV ? import.meta.env.VITE_APP_APIS_URL : '',
 });
 
 export const initialRoom = async () => {

src/hooks/useTRTC.ts

@@ -348,19 +348,20 @@ async function handleStreamSubscribed(event) {
         tag: 'rtc:audio',
       });
     } catch (error) {
-      Dialog.confirm({
-        showCloseIcon: false,
-        okText: '确定',
-        content:
-          "<span style='font-size: 16px; line-height: 1.5;'>在用户与网页产生交互（例如点击、触摸页面等）之前，网页将被禁止播放带有声音的媒体。点击恢复播放<span/>",
-        title: '隐私条款：',
-        single: true,
-        func: (state) => {
-          if (state == 'ok') {
-            remoteStream.resume();
-          }
-        },
-      });
+      remoteStream.resume();
+      // Dialog.confirm({
+      //   showCloseIcon: false,
+      //   okText: '确定',
+      //   content:
+      //     "<span style='font-size: 16px; line-height: 1.5;'>继续访问该页面需要获取您摄像头及麦克风的权限。<span/>",
+      //   title: '温馨提示：',
+      //   single: true,
+      //   func: (state) => {
+      //     if (state == 'ok') {
+      //       remoteStream.resume();
+      //     }
+      //   },
+      // });
     }
   }, 200);
   // console.info(

src/store/modules/rtc.ts

@@ -148,6 +148,10 @@ export const useRtcStore = defineStore({
         this.role = 'customer';
       }
     },
+    setNickName(nickname: string) {
+      this.nickname = nickname;
+    },
+
     setAvatar(payload: string) {
       this.avatar = payload;
       localStorage.setItem('leaderAvatar', payload || '');

vite.config.ts

@@ -62,7 +62,7 @@ export default ({ mode }) =>
           changeOrigin: true,
         },
         '/takelook': {
-          target: 'https://v4-test.4dkankan.com',
+          target: loadEnv(mode, process.cwd()).VITE_APP_APIS_URL,
           changeOrigin: true,
         },
       },