增加热区功能

pages/tabbar/home/template/tpl.js

@@ -1,8 +1,9 @@
 /** 配置楼层模块的跳转 */
 export function modelNavigateTo(item) {
-  let val = item.url;
+  let val = item.url || item;
-
+  console.log(item);
-  switch (val.___type) {
+  // return;
+  switch (val.___type || item.type) {
     case "goods":
       uni.navigateTo({
         url: "/pages/product/goods?id=" + val.id + "&goodsId=" + val.goodsId,
@@ -36,7 +37,7 @@ export function modelNavigateTo(item) {
       });
       break;
     case "other":
-      switch (val.title) {
+      switch (val.title || item.title) {
         case "首页":
           uni.switchTab({
             url: `/pages/tabbar/home/index`,
@@ -102,12 +103,12 @@ export function modelNavigateTo(item) {
             url: `/pages/product/shopList`,
           });
           break;
-        case "外部链接":
+        default:
           // #ifdef H5
-          window.location.href = val.url;
+          window.location.href = val.url || item.link;
           // #endif
           // #ifdef APP-PLUS
-          plus.runtime.openURL(val.url) //不需要拼接\
+          plus.runtime.openURL(val.url || item.link) //不需要拼接\
           // #endif
           break;
       }

pages/tabbar/home/template/tpl_flex_one.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="layout">
-    <div class="flex-one" @click="modelNavigateTo(res.list[0])">
+    <div class="flex-one">
-      <u-image width="100%" mode="aspectFit" height="280rpx" :src="res.list[0].img" alt=""></u-image>
+      <!-- <u-image width="100%" mode="aspectFit" height="280rpx" :src="res.list[0].img" alt=""></u-image> -->
+      <hotzone :res="res"></hotzone>
     </div>
   </div>
 </template>
 <script>
 import { modelNavigateTo } from "./tpl";
+import hotzone from "@/pages/tabbar/home/template/tpl_hot_zone.vue";
 
 export default {
   title: "单行图片模块",
+  components: {
+    hotzone,
+  },
   data() {
     return {
       modelNavigateTo,

pages/tabbar/home/template/tpl_hot_zone.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="layout">
+    <div class="flex-one hot-image">
+      <image mode="widthFix" :src="res.list[0].img" alt=""></image>
+
+      <image
+        v-for="(area, index) in res.list[0].zoneInfo"
+				:key="index"
+        @click="modelNavigateTo(area)"
+        mode="widthFix"
+        class="hot-area"
+        :style="{
+          left: area.leftPer * 100 + '%',
+          top: area.topPer * 100 + '%',
+          width: area.widthPer * 100 + '%',
+          height: area.heightPer * 100 + '%',
+        }"
+        :src="area.img"
+        alt=""
+      ></image>
+    </div>
+  </div>
+</template>
+<script>
+import { modelNavigateTo } from "./tpl";
+
+export default {
+  title: "热区模块",
+  data() {
+    return {
+      modelNavigateTo,
+    };
+  },
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.hot-image {
+  position: relative;
+}
+.hot-area {
+  position: absolute;
+  z-index: 99;
+}
+.flex-one {
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  image {
+    width: 100%;
+   
+    min-height: 200rpx;
+    // height: 100%;
+  }
+}
+</style>

pages/tabbar/home/views.vue

@@ -50,7 +50,7 @@
       <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
       <!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
     </div>
-    <u-no-network @retry='init' @isConnected='isConnected'></u-no-network>
+    <u-no-network @retry="init" @isConnected="isConnected"></u-no-network>
   </div>
 </template>
 
@@ -125,12 +125,13 @@ export default {
       getFloorData().then((res) => {
         if (res.data.success) {
           this.pageData = JSON.parse(res.data.result.pageData);
+          console.log(this.pageData);
         }
       });
     },
     // 是否有网络链接
-		isConnected(val){
+    isConnected(val) {
-			val ? this.init() : ''
+      val ? this.init() : "";
     },
 
     /**