upp

web/public/program/index.html

@@ -141,7 +141,7 @@
 
     // 新添加（以下全是）
     window.onShareImage = (img) => {
-      console.log('result:', img);
+      // console.log('result:', img);
       window.parent.postMessage({
           source: 'shareImg',
           data: img,

web/src/App.vue

@@ -61,12 +61,12 @@ root.style.setProperty(
 
 const onLoadIfr = () => {
   window.addEventListener("message", (e) => {
-    if (e.data.source === "shareImg") {
-      e.data.data &&
-        wx.miniProgram.navigateTo({
-          url: "/pages/share/index?img=" + encodeURIComponent(e.data.data),
-        });
-    }
+    // if (e.data.source === "shareImg") {
+    //   e.data.data &&
+    //     wx.miniProgram.navigateTo({
+    //       url: "/pages/share/index?img=" + encodeURIComponent(e.data.data),
+    //     });
+    // }
     if (e.data.source === "disableUIInteract") {
       window.noClickUi = true;
       const dom1 = document.querySelector(".btm-bujian");
@@ -96,6 +96,8 @@ onMounted(async () => {
   let result = (await http.get("cms/wxUser/getUserInfo")).data;
   let info = result.data;
   userInfo = info;
+  // 把用户信息存到本地
+  localStorage.setItem("HN_GAME_USER_INFO", JSON.stringify(info));
   point.value = info.point;
 });
 </script>

web/src/components/Integral-detail.vue

@@ -70,7 +70,7 @@
 //子组件接收
 const props = defineProps(["point", "userInfo"]);
 
-console.log("pppppppppp", props.point, props.userInfo);
+// console.log("pppppppppp", props.point, props.userInfo);
 
 import { ref } from "vue";
 

web/src/components/Vmenu.vue

@@ -1,51 +1,73 @@
 <template>
   <ul class="menu">
     <li @click="onClickItem(item)" v-for="item in list" :key="item.id">
-      <img :src="`${config.cdn_url}images/${routeName == item.id ? item.active : item.normal}.png`" alt="">
+      <img
+        :src="`${config.cdn_url}images/${
+          routeName == item.id ? item.active : item.normal
+        }.png`"
+        alt=""
+      />
     </li>
   </ul>
 </template>
 
 <script setup>
-import { reactive, computed } from "vue"
+import { reactive, computed } from "vue";
 
-import { useRoute, useRouter } from 'vue-router'
-const route = useRoute()
-const router = useRouter()
+import { useRoute, useRouter } from "vue-router";
+const route = useRoute();
+const router = useRouter();
 
-const emit = defineEmits(['clickIntro'])
-const routeName = computed(() => route.name)
+const emit = defineEmits(["clickIntro"]);
+const routeName = computed(() => route.name);
 const list = reactive([
   {
-    id: 'Introduce',
-    name: '文物介绍',
-    normal: 'icon_introduction_normal',
-    active: 'icon_introduction_active',
+    id: "Introduce",
+    name: "文物介绍",
+    normal: "icon_introduction_normal",
+    active: "icon_introduction_active",
   },
   {
-    id: 'Courtyard',
-    name: '我的庭院',
-    normal: 'icon_mine_normal',
-    active: 'icon_mine_active',
+    id: "Courtyard",
+    name: "我的庭院",
+    normal: "icon_mine_normal",
+    active: "icon_mine_active",
   },
   {
-    id: 'Integral',
-    name: '到处逛逛',
-    normal: 'icon_hangout_normal',
-    active: 'icon_hangout_active',
-  }
-])
+    id: "Integral",
+    name: "到处逛逛",
+    normal: "icon_hangout_normal",
+    active: "icon_hangout_active",
+  },
+]);
 
-const onClickItem = (item) => {
-  if (item.id == 'Introduce') {
-    emit('clickIntro')
-  } else {
-    router.push({ name: item.id })
-  }
+let ifrDom = document.querySelector("#ifr");
 
-}
+const postMsg = (source, data) => {
+  ifrDom.contentWindow.postMessage(
+    {
+      source,
+      data,
+    },
+    "*"
+  );
+};
 
+const onClickItem = (item) => {
+  if (item.id == "Introduce") {
+    emit("clickIntro");
+  } else {
+    // 每次点击我的庄园 拿到自己的模型数据
+    if (item.id === "Courtyard") {
+      const userInfo = JSON.parse(
+        localStorage.getItem("HN_GAME_USER_INFO") || "{}"
+      );
+      postMsg("ShowUserData", userInfo.id);
+    }
 
+    router.push({ name: item.id });
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -57,10 +79,10 @@ const onClickItem = (item) => {
   display: flex;
   flex-direction: column;
   width: 10%;
-  >li {
+  > li {
     width: 100%;
     margin: 2px 0;
-    >img {
+    > img {
       width: 100%;
     }
   }

web/src/main.js

@@ -5,6 +5,7 @@ import { setup } from '@/utils/componentHelper'
 import http from '@/api/http.js'
 import Dialog, { Toast, Alert,Loading, DialogContent } from '@/plugin/dialog/index.js'
 import '@/plugin/dialog/dialog.scss'
+import 'vant/lib/index.css';
 
 
 const components = setup(

web/src/utils/env.js

@@ -0,0 +1 @@
+export const shareBaseUrl = process.env.NODE_ENV === "development" ? "https://hnbwgwx.4dage.com" : "";

web/src/views/Courtyard.vue

@@ -10,32 +10,85 @@
     </ul>
     <!-- 点击分享出来的页面 -->
     <div class="shareBox" v-show="shareShow">
-      <!-- 关闭按钮 -->
-      <div class="shareClose" @click="shareShow=false">
-        <img :src="`${config.cdn_url}images/icon_cancel.png`" alt="" />
+      <div class="shareMain">
+        <!-- 左侧主体 -->
+        <div class="shareLImg" v-if="canvsFlag">
+          <img :src="imgUrl" alt="" />
+        </div>
+
+        <div class="shareL" v-else id="canvsBox">
+          <img :src="shareBaseUrl + imgUrl" alt="" />
+          <!-- 左侧logo -->
+          <div class="leftLogo">
+            <img src="../assets/img/shareTit.png" alt="" />
+          </div>
+          <!-- 右下角二维码 -->
+          <div class="rightCode">
+            <img src="../assets/img/shareCode.jpg" alt="" />
+          </div>
+          <!-- 输入框 -->
+          <div class="inputBox" v-if="txtOrInput">
+            <input
+              type="text"
+              :maxlength="20"
+              placeholder="请填写您的祝福语..."
+              v-model="txt"
+            />
+          </div>
+          <div class="inputBox inputBox2" v-else>
+            <div class="txt">{{ txt }}</div>
+          </div>
+        </div>
+        <!-- 右侧按钮 -->
+        <div class="shareR">
+          <img @click="toCanvsFu" v-if="!canvsFlag" src="../assets/img/shareBtn.png" alt="" />
+          <img
+            src="../assets/img/btn_cancel.png"
+            alt=""
+            @click="shareShow = false"
+          />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
+
 <script>
+import { showToast } from "vant";
+import { shareBaseUrl } from "../utils/env";
+import html2canvas from "html2canvas";
 export default {
   setup(props) {},
 
-  data () {
+  data() {
     return {
-      shareShow:false  
-    }
+      shareShow: false,
+      shareBaseUrl,
+      imgUrl: "",
+      canvsFlag: false,
+      // 文字和输入框切换
+      txtOrInput: true,
+      txt: "",
+    };
+  },
+  watch: {
+    shareShow(val) {
+      if (val) {
+        this.canvsFlag = false;
+        this.txtOrInput = true;
+        this.txt = "";
+      } else {
+        this.imgUrl = "";
+      }
+    },
   },
-
   methods: {
     // 点击编辑
     clickEdit() {
       this.$router.push({ name: "Editing" });
     },
     gotoShare() {
-      // this.shareShow=true
-      // 跳转到小程序页面实现保存
       let ifrDom = document.querySelector("#ifr");
       ifrDom.contentWindow.postMessage(
         {
@@ -43,8 +96,35 @@ export default {
         },
         "*"
       );
-      // 直接使用canvs截图
     },
+    // 点击生成明星片
+    toCanvsFu() {
+      this.txtOrInput = false;
+      window.setTimeout(() => {
+        const dom = document.querySelector("#canvsBox");
+        html2canvas(dom, {
+          // backgroundColor: "transparent",
+          allowTaint: true,
+          useCORS: true,
+        }).then((canvas) => {
+          const link = canvas.toDataURL("image/jpeg");
+          this.imgUrl = link;
+          this.canvsFlag = true;
+          showToast("生成成功，请长按图片保存");
+        });
+      }, 100);
+    },
+  },
+  mounted() {
+    window.addEventListener("message", (e) => {
+      if (e.data.source === "shareImg") {
+        if (e.data.data) {
+          this.shareShow = true;
+          this.imgUrl = e.data.data;
+          // console.log("-----------ssss", e.data.data);
+        }
+      }
+    });
   },
 };
 </script>
@@ -82,16 +162,94 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: aqua;
-  opacity: 0.5;
-  .shareClose{
+  background-image: url("../assets/img/bg.jpg");
+  background-size: 100% 100%;
+  .shareMain {
+    box-sizing: border-box;
     position: absolute;
-    top: 15px;
-    right: 15px;
-    width: 40px;
-    height: 40px;
-    &>img{
-      width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    padding: 15px 0px 10px 20px;
+    display: flex;
+    div {
+      box-sizing: border-box;
+    }
+    .shareLImg {
+      width: 80%;
+      height: 100%;
+      & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .shareL {
+      // border-radius: 20px 0 0 0;
+      width: 80%;
+      background-image: url("../assets/img/shareBac.jpg");
+      background-size: 100% 100%;
+      padding: 20px 20px 15px;
+      position: relative;
+      & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .leftLogo {
+        position: absolute;
+        top: 30px;
+        left: 10px;
+        & > img {
+          width: 100px;
+        }
+      }
+      .rightCode {
+        position: absolute;
+        bottom: 13px;
+        right: 30px;
+        & > img {
+          border-radius: 4px;
+          width: 60px;
+        }
+      }
+      .inputBox {
+        position: absolute;
+        bottom: 24px;
+        left: 30px;
+
+        input {
+          width: 150px;
+          color: #484f55;
+          font-size: 14px;
+          border: none;
+          outline: none;
+          background-color: transparent;
+          border-bottom: 1px solid #d0b598;
+        }
+      }
+      .inputBox2 {
+        bottom: 24px;
+        color: #484f55;
+        padding: 4px;
+        font-size: 14px;
+        border-bottom: 1px solid #d0b598;
+      }
+    }
+    .shareR {
+      padding: 0 15px;
+      width: 20%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      & > img {
+        width: 100%;
+        margin: 15px 0;
+      }
     }
   }
 }

web/src/views/Editing.vue

@@ -172,6 +172,12 @@ watch(currentActive, () => {
   blockTypeActive.value = "";
   postMsg("changeBlock", unref(currentActive.value.id));
   reset();
+
+  setTimeout(() => {
+    // 自动选中左下侧 模型拼接
+    blockTypeActive.value='block'
+  }, 200);
+
 });
 
 watch(blockTypeActive, () => {
@@ -272,7 +278,7 @@ const cutThreeTab = (id, num) => {
 };
 
 import { showToast } from "vant";
-import 'vant/lib/index.css';
+
 
 onMounted(() => {
   window.addEventListener("message", (e) => {
@@ -493,6 +499,7 @@ onMounted(() => {
         }
       }
       .txtTit {
+        opacity: 0;
         padding-left: 30px;
         font-size: 16px;
         color: #3d4a51;