feat: 详情页跳转vr

src/pages.json

@@ -55,6 +55,12 @@
         "navigationBarTitleText": "投资舒城"
       }
     },
+    {
+      "path": "pages/webview/index",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
     {
       "path": "pages/inviteInvestment/policyDetail"
     },

src/pages/detail/components/CommonDetail.vue

 <template>
   <div v-if="detail" class="common-detail">
-    <div>
+    <div style="position: relative">
       <u-swiper
         indicator
         circular
-        :list="detail.imgUrlList"
+        :list="imageList"
         :height="420"
+        @click="handleImgClick"
+        @change="handleImgChange"
       ></u-swiper>
+      <!-- <image class="vr-static-icon" src="@/static/img/vr-icon.png"></image> -->
+      <div
+        v-if="currentIsVrImg"
+        class="vr-icon"
+        @click="handleImgClick(imgIndex)"
+      ></div>
     </div>
     <div class="common-detail__cells">
       <slot :detail="detail"></slot>
@@ -66,6 +74,7 @@ export default defineComponent({
       callTitle: "",
       phoneInfo: null,
       showCallService: false,
+      imgIndex: 0,
     };
   },
   computed: {
@@ -83,6 +92,21 @@ export default defineComponent({
       // todo 联系人电话
       return "";
     },
+    imageList() {
+      if (this.detail) {
+        const { imgUrlList = [], vrUrlList = [] } = this.detail;
+        return [...vrUrlList.map(({ vrCover }) => vrCover), ...imgUrlList];
+      } else {
+        return [];
+      }
+    },
+    currentIsVrImg() {
+      if (this.detail) {
+        return this.imgIndex < this.detail.vrUrlList.length;
+      } else {
+        return false;
+      }
+    },
   },
   mounted() {
     this.detailId = this.$root.$mp.query.id;
@@ -123,6 +147,18 @@ export default defineComponent({
       }
       this.showCallService = !this.showCallService;
     },
+    handleImgClick(index) {
+      const { vrUrlList = [] } = this.detail;
+      if (index < vrUrlList.length) {
+        const url = vrUrlList[index].vrUrl;
+        uni.navigateTo({
+          url: "/pages/webview/index?webUrl=" + url,
+        });
+      }
+    },
+    handleImgChange({ current }) {
+      this.imgIndex = current;
+    },
   },
 });
 </script>
@@ -168,5 +204,35 @@ export default defineComponent({
     width: 40rpx;
     height: 40rpx;
   }
+  .vr-icon {
+    height: 100rpx;
+    width: 100rpx;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: url("https://cfld-hw-obs-01.obs.cn-north-4.myhuaweicloud.com/lyy/img/shucheng/vr-animation.png")
+      no-repeat;
+    background-size: auto 100rpx;
+    animation: vr-ani 3.08333333s 0s steps(74) infinite normal;
+    z-index: 100;
+  }
+  @keyframes vr-ani {
+    from {
+      background-position: 0 0;
+    }
+    to {
+      background-position: 100% 0;
+    }
+  }
+  .vr-static-icon {
+    width: 100rpx;
+    height: 100rpx;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+  }
 }
 </style>

src/pages/webview/index.vue

+<template>
+  <div v-if="webUrl">
+    <web-view :src="webUrl" @error="handleError"></web-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HmsWebview",
+  data() {
+    return {
+      webUrl: "",
+    };
+  },
+  mounted() {
+    this.webUrl =  decodeURIComponent(this.$root.$mp.query.webUrl);
+    console.log(this.webUrl);
+  },
+  methods: {
+    handleError(e) {
+      console.log(e);
+    },
+  },
+};
+</script>