增加w3w页面

src/views/mobile/Sinup.vue

@@ -3,15 +3,11 @@
     <div class="content">
       <div class="title">INFORMATION REQUIRED FOR PARTICIPATION</div>
       
-      <div class="connect-btn">connect</div>
-      <div class="connect-btn">connect</div>
-      
-      <div class="address">Your contact email address</div>
-      <div class="invitation-code">
-        Email:<el-input class="input-code" type="text" placeholder="" />
-      </div>
-
-      <div class="submit-btn"><el-button @click="navigator"  class="btn">Submit</el-button></div>
+      <iframe
+        id="iframe"
+        src="https://nft-mpc-test.lifo.ai/public/campaign-challenge/358"
+        frameborder="0"
+      ></iframe>
     </div>
   </div>
 </template>
@@ -21,11 +17,31 @@ export default {
   data() {
     return {
       value: "",
+      iframe: document.querySelector("#iframe")
     };
   },
+  mounted() {
+    window.addEventListener("message", (e) => {
+     if (e.data?.type === "w3wCampaignJoinSuccess") {
+          console.log('on get iframe message: ')
+          console.log(e.data);
+     }
+    });
+  },
   methods:{
     navigator(){
       this.$router.push('recommend')
+    },
+    sendAddressToIframe(address) {
+      this.iframe.contentWindow.postMessage(
+        {
+            type: "w3wWalletAddressUpdate",
+            data: {
+                walletAddress: address,
+            },
+         },
+         "*"
+     );
     }
   }
 };
@@ -111,4 +127,8 @@ export default {
   background: linear-gradient(165deg, #775437, #f2c082);
   border-radius: 40px;
 }
+#iframe {
+  width: 100vw;
+  height: 80vh;
+}
 </style>