upp

web/public/program/README.txt

@@ -1,3 +1,4 @@
+主页 -> xxx.index?token=xxxxxx
 
 //js -> unity
 
@@ -5,24 +6,42 @@ unityInstance.SendMessage('Main', 'OnClickEdit', 0); //点击编辑 -刚进入
 
 unityInstance.SendMessage('Main', 'OnClickModule', 0); //单击模块按钮 0主楼 1一进院 2二进院 3后院 4左侧田地 -1整体预览
 unityInstance.SendMessage('Main', 'OnClickType', 0); //点击类型按钮 0构建 1颜色
-unityInstance.SendMessage('Main', 'OnClickItem', 0); //点击类型中的元素
+unityInstance.SendMessage('Main', 'OnClickItem', 0); //点击类型中的元素  -1：手动取消选中
 
 
 unityInstance.SendMessage('Main', 'Save', 0); //保存拼接状态	-注意：调用完此函数后，ui需要恢复成我的庭院
 unityInstance.SendMessage('Main', 'Cancel', 0); //恢复拼接状态	-注意：调用完此函数后，ui需要恢复成我的庭院
 
 
-
-
 unityInstance.SendMessage('Main', 'CallShareImage', 0); //分享
 
+unityInstance.SendMessage('Main', 'ShowUserData', 0); //（到处逛逛）展示某个玩家的模型样式，0为玩家id
+
 
 
 
 //unity -> js （此为需要定义的函数）
 
-function onShareImage(str)  //点击分享，截图成功回调。string类型参数
+function onShareImage(str)  //点击分享，截图成功回调。string类型参数，对应模型生成的图片url
 
 function enableUIInteract()  //启用ui交互 - 默认为允许交互
 function disableUIInteract()  //禁用ui交互
-function showTouchErrorTips()  //显示触摸位置错误tips
+function showTouchErrorTips()  //显示触摸位置错误tips
+function modelSuccItem()  //模型拼接成功，取消选中模型
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

web/public/program/index.html

@@ -135,6 +135,16 @@
         "*")
     }
 
+    // 拼接模型成功，接受 unity的消息 取消 模型的选中ui效果
+    window.modelSuccItem = () => {
+      window.parent.postMessage({
+          source: 'modelSuccItem',
+          data: true
+        },
+        "*")
+    }
+
+
 
     window.Internal_ShowTouchErrorTips = (data) => {
       console.log('result:', data);
@@ -170,8 +180,8 @@
 
         // 点击子项
         else if (res.data.source === "clickItemBtn") {
+          console.log('选中了子选项', data);
           unityInstance.SendMessage('Main', 'OnClickItem', data);
-          console.log('result:OnClickItem', data);
         }
 
         // 保存
@@ -190,6 +200,11 @@
           unityInstance.SendMessage('Main', 'CallShareImage');
         }
 
+        // 到处逛逛
+        else if (res.data.source === "ShowUserData") {
+          console.log('到处逛逛，用户id:', id);
+          unityInstance.SendMessage('Main', 'ShowUserData', id);
+        }
 
         // 点击编辑
         else if (res.data.source === "OnClickEdit") {

web/src/App.vue

@@ -53,7 +53,7 @@ root.style.setProperty(
 );
 
 const onLoadIfr = () => {
-  window.onmessage = (e) => {
+  window.addEventListener("message", (e) => {
     if (e.data.source === "shareImg") {
       e.data.data &&
         wx.miniProgram.navigateTo({
@@ -61,8 +61,7 @@ const onLoadIfr = () => {
         });
     }
     if (e.data.source === "disableUIInteract") {
-
-      window.noClickUi =true
+      window.noClickUi = true;
       const dom1 = document.querySelector(".btm-bujian");
       const dom2 = document.querySelector(".editing .left-area");
 
@@ -71,7 +70,7 @@ const onLoadIfr = () => {
       dom2.style.opacity = "0.4";
     }
     if (e.data.source === "enableUIInteract") {
-      window.noClickUi =false
+      window.noClickUi = false;
       const dom1 = document.querySelector(".btm-bujian");
       const dom2 = document.querySelector(".editing .left-area");
 
@@ -79,7 +78,7 @@ const onLoadIfr = () => {
       dom1.style.opacity = "1";
       dom2.style.opacity = "1";
     }
-  };
+  });
 };
 
 onMounted(async () => {

web/src/views/Editing.vue

@@ -56,7 +56,9 @@
         <ul v-if="blockTypeActive === 'block'">
           <li
             @click="cutThreeTab(item.id, 1)"
-            :class="{ active: item.id === elementActive }"
+            :class="{
+              active: item.id === elementActive,
+            }"
             v-for="item in activeBlock"
             :key="item.id"
           >
@@ -231,9 +233,40 @@ const cutTowTab = (val) => {
 const cutThreeTab = (id, num) => {
   if (window.noClickUi) return;
 
-  num === 1 ? (elementActive.value = id) : (colorActive.value = id);
+  if (num === 1) {
+    if (elementActive.value === id) {
+      elementActive.value = "";
+      // 清空选中
+      postMsg("clickItemBtn", -1);
+      return;
+    }
+    elementActive.value = id;
+  } else {
+    if (colorActive.value === id) {
+      colorActive.value = "";
+      // 清空选中
+      postMsg("clickItemBtn", -1);
+      return;
+    }
+    colorActive.value = id;
+  }
 };
-// 颜色切换
+
+// 拼接模型成功，接受 unity的消息 取消 模型的选中ui效果
+// window.onmessage=(e)=>{
+//       if (e.data.source === "disableUIInteract") {
+//         console.log('pppppppppppppp--------------');
+//     }
+// }
+
+onMounted(() => {
+  window.addEventListener("message", (e) => {
+    if (e.data.source === "modelSuccItem") {
+      // 拼接模型成功，接受 unity的消息 取消 模型的选中ui效果
+      elementActive.value = "";
+    }
+  });
+});
 </script>
 
 <style lang="scss" scoped>

web/src/views/Integral.vue

@@ -1,16 +1,26 @@
 <template>
   <div class="integral">
     <div class="left-area">
-      <img class="wuding" :src="`${config.cdn_url}images/wuding2.png`" alt="">
+      <img class="wuding" :src="`${config.cdn_url}images/wuding2.png`" alt="" />
       <ul>
-        <li @click="onClickItem(item)" :class="{ active: item.id == active.id }" v-for="item in list" :key="item.id">
+        <li
+          @click="onClickItem(item)"
+          :class="{ active: item.id == active.id }"
+          v-for="item in list"
+          :key="item.id"
+        >
           <div class="avatar">
-            <img :src="item.avatarUrl" alt="">
+            <img :src="item.avatarUrl" alt="" />
           </div>
           <span>{{ item.nickName }}</span>
 
           <div class="like">
-            <img :src="`${config.cdn_url}images/icon_like_${item.id == active.id ? 'active' : 'normal'}.png`" alt="">
+            <img
+              :src="`${config.cdn_url}images/icon_like_${
+                item.id == active.id ? 'active' : 'normal'
+              }.png`"
+              alt=""
+            />
             <span>{{ item.star }}</span>
           </div>
           <div class="b-line"></div>
@@ -18,64 +28,94 @@
       </ul>
       <div class="menu">
         <div @click="type = 'hot'">
-          <img class="hot" :src="`${config.cdn_url}images/btn_hot_${type == 'hot' ? 'active' : 'normal'}.png`" alt="">
+          <img
+            class="hot"
+            :src="`${config.cdn_url}images/btn_hot_${
+              type == 'hot' ? 'active' : 'normal'
+            }.png`"
+            alt=""
+          />
         </div>
         <div @click="type = 'plaza'">
-          <img class="plaza" :src="`${config.cdn_url}images/btn_square_${type == 'plaza' ? 'active' : 'normal'}.png`"
-            alt="">
+          <img
+            class="plaza"
+            :src="`${config.cdn_url}images/btn_square_${
+              type == 'plaza' ? 'active' : 'normal'
+            }.png`"
+            alt=""
+          />
         </div>
       </div>
     </div>
 
     <div class="center-area" @click="toggleLike">
-      <img :src="`${config.cdn_url}images/icon_like2_${current.isLike ? 'active' : 'normal'}.png`" alt="">
+      <img
+        :src="`${config.cdn_url}images/icon_like2_${
+          current.isLike ? 'active' : 'normal'
+        }.png`"
+        alt=""
+      />
       <span>{{ current.num }}</span>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, watch } from "vue"
-import http from '@/api/http.js'
+import { ref, reactive, watch, unref } from "vue";
+import http from "@/api/http.js";
 
-
-
-let list = ref([])
-const active = ref({})
-const type = ref('hot')
+let list = ref([]);
+const active = ref({});
+const type = ref("hot");
 const current = ref({
   isLike: false,
   num: 0,
-  id: null
-})
-
+  id: null,
+});
 
 const getList = async () => {
   let result = (await http.get(`cms/model/getSort/${type.value}`)).data;
-  list.value = result.data
-}
+  list.value = result.data;
+};
+
+let ifrDom = document.querySelector("#ifr");
+
+const postMsg = (source, data) => {
+  ifrDom.contentWindow.postMessage(
+    {
+      source,
+      data,
+    },
+    "*"
+  );
+};
 
 const onClickItem = (item) => {
-  active.value = item
-  getLikeStatus(item)
-}
+  active.value = item;
+  getLikeStatus(item);
+
+  // 切换模型
+  postMsg("ShowUserData", unref(item.id));
+};
 
 const getLikeStatus = async (item) => {
   let result = (await http.get(`cms/model/starCheck/${item.id}`)).data.data;
   // console.log('-----',result);
-  current.value.isLike = result
-  current.value.num = item.star
-  current.value.id = item.id
-}
+  current.value.isLike = result;
+  current.value.num = item.star;
+  current.value.id = item.id;
+};
 
 const toggleLike = async () => {
-  if (!current.value.id) return
-  let url = current.value.isLike ? `cms/model/starDel/${current.value.id}` : `cms/model/star/${current.value.id}`
-  await http.get(url)
-  current.value.isLike = !current.value.isLike
-  current.value.num = current.value.num + (current.value.isLike ? +1 : -1)
-  active.value.star = current.value.num
-}
+  if (!current.value.id) return;
+  let url = current.value.isLike
+    ? `cms/model/starDel/${current.value.id}`
+    : `cms/model/star/${current.value.id}`;
+  await http.get(url);
+  current.value.isLike = !current.value.isLike;
+  current.value.num = current.value.num + (current.value.isLike ? +1 : -1);
+  active.value.star = current.value.num;
+};
 
 // const like = async (item)=>{
 
@@ -85,15 +125,15 @@ const toggleLike = async () => {
 //   list.value = result.data
 // }
 
-
-watch(type, () => {
-  getList()
-}, {
-  immediate: true
-})
-
-
-
+watch(
+  type,
+  () => {
+    getList();
+  },
+  {
+    immediate: true,
+  }
+);
 </script>
 
 <style lang="scss" scoped>
@@ -113,12 +153,12 @@ watch(type, () => {
       width: 120%;
     }
 
-    >ul {
+    > ul {
       height: calc(100% - 8px);
       overflow-y: auto;
       overflow-x: hidden;
 
-      >li {
+      > li {
         color: #fff;
         font-size: 18px;
         font-weight: bold;
@@ -132,18 +172,18 @@ watch(type, () => {
         .avatar {
           width: 30px;
           height: 30px;
-          border: 1px solid #FFFFFF;
+          border: 1px solid #ffffff;
           border-radius: 4px;
           margin-right: 10px;
           overflow: hidden;
 
-          >img {
+          > img {
             width: 100%;
             height: 100%;
           }
         }
 
-        >span {
+        > span {
           display: inline-block;
           font-size: 14px;
           text-overflow: ellipsis;
@@ -158,19 +198,24 @@ watch(type, () => {
           display: flex;
           align-items: center;
 
-          >img {
+          > img {
             width: 100%;
             height: 100%;
           }
 
-          >span {
+          > span {
             font-size: 12px;
             font-weight: normal;
           }
         }
 
         .b-line {
-          background: linear-gradient(116deg, rgba(99, 84, 61, 0) 0%, rgba(99, 84, 61, 0.3) 50%, rgba(99, 84, 61, 0) 100%);
+          background: linear-gradient(
+            116deg,
+            rgba(99, 84, 61, 0) 0%,
+            rgba(99, 84, 61, 0.3) 50%,
+            rgba(99, 84, 61, 0) 100%
+          );
           width: 80%;
           height: 1px;
           position: absolute;
@@ -187,7 +232,11 @@ watch(type, () => {
 
         &.active {
           position: relative;
-          background: linear-gradient(90deg, #961014 0%, rgba(150, 16, 20, 0) 100%);
+          background: linear-gradient(
+            90deg,
+            #961014 0%,
+            rgba(150, 16, 20, 0) 100%
+          );
 
           .like {
             color: $font-active-color;
@@ -202,7 +251,7 @@ watch(type, () => {
       width: 18%;
       z-index: -1;
 
-      >div {
+      > div {
         width: 100%;
         margin-top: 20px;
         position: relative;
@@ -210,7 +259,7 @@ watch(type, () => {
         &::before {
           width: 1px;
           height: 24px;
-          content: '';
+          content: "";
           display: inline-block;
           position: absolute;
           left: 50%;
@@ -219,11 +268,10 @@ watch(type, () => {
           background: $font-active-color;
         }
 
-        >img {
+        > img {
           width: 100%;
         }
       }
-
     }
   }
 
@@ -234,11 +282,11 @@ watch(type, () => {
     transform: translateX(-50%);
     width: 50px;
 
-    >img {
+    > img {
       width: 100%;
     }
 
-    >span {
+    > span {
       position: absolute;
       right: 0;
       top: -2px;
@@ -250,7 +298,7 @@ watch(type, () => {
       border-radius: 50%;
       overflow: hidden;
       display: inline-block;
-      background: #C1A97A;
+      background: #c1a97a;
       color: #fff;
       box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
     }