Feat: 地标好物（页面&接口）

pages/home/landMark.vue

@@ -1,87 +1,76 @@
 <template>
   <view class="pkg-product-land-mark">
     <view v-if="isLoad">
-      <view class="top-box">
-        <view class="nav flex">
-          <view
-            v-for="(item,index) in navList"
-            :key="index"
-            :class="{
-              'active': navIndex === index
-            }"
-            class="flex flex-0 ai-center nav-item"
-            @click="changeNav(index)"
-          >
-            <image
-              :src="webUrl + '/home/landmark-icon.png'"
-              class="bg"
-            />
-            {{ item.provinceName }}
+      <view class="top-wrap">
+        <view class="top-box">
+          <view class="nav flex">
+            <view
+              v-for="(item,index) in navList"
+              :key="index"
+              :class="{
+                'active': navIndex === index
+              }"
+              class="flex flex-0 ai-center nav-item"
+              @click="changeNav(index)"
+            >
+              <image
+                :src="webUrl + '/home/landmark-icon.png'"
+                class="bg"
+              />
+              {{ item.provinceName }}
+            </view>
           </view>
-        </view>
-        <view class="view-box">
-          <view class="map-box">
-            <image
-              :src="mapData.mapImage"
-              mode="widthFix"
-              class="img-map"
-            />
+          <view class="view-box">
+            <view class="map-box">
+              <image
+                :src="mapData.mapImage"
+                mode="widthFix"
+                class="img-map"
+              />
+            </view>
           </view>
         </view>
       </view>
       <view
-        v-if="mapData.middleImage"
         class="middle-img-wrap"
       >
         <image
+          v-if="mapData.middleImage"
           :src="mapData.middleImage"
           mode="widthFix"
           class="img"
         />
-      </view>
-      <view v-if="goods.length > 0" class="list-wrap">
-        <view class="list-box flex flex-wrap">
-          <view
-            v-for="item in goods"
-            :key="item.id"
-            class="item"
-            @click="goGoods(item.productId)"
-          >
-            <image
-              :src="webUrl + '/home/mark-land.png'"
-              class="mark-img"
-            />
-            <image
-              :src="item.storeImage"
-              mode="scaleToFill"
-              class="good-img"
-            />
-            <view class="content flex flex-col jc-between">
-              <view class="more-t bold">{{ item.title }}</view>
-              <view class="one-t desc">{{ item.description }}</view>
-              <view class="flex jc-between ai-center">
-                <text class="price">￥{{ item.price }}</text>
-                <image
-                  :src="webUrl + '/home/icon-cart.png'"
-                  class="btn"
-                />
-              </view>
-            </view>
-          </view>
+        <view class="tabs-wrap">
+          <view @click="handleTab(item.value)" :class="{ 'tab-actived' : item.value === actived }" class="tab-item"  v-for="(item, index) in tabs" :key="index">{{ item.name }}</view>
         </view>
-        <image
-          v-if="isCompleteLoadGood"
-          :src="webUrl + '/home/no-data-bg.png'"
-          mode="widthFix"
-          class="loadend"
-        />
       </view>
-      <image
-        v-if="goods.length === 0"
-        :src="webUrl + '/20231023131208675588.png'"
-        class="img-nodata"
-        mode="scaleToFill"
-      />
+      <view  class="list-wrap">
+        <view v-if="actived === 1">
+          <projects :landmarkDataId="landmarkDataId"></projects>
+        </view>
+        <view v-if="actived === 2">
+          <culture :landmarkDataId="landmarkDataId"></culture>
+        </view>
+        <view v-if="actived === 3">
+          <information :landmarkDataId="landmarkDataId"></information>
+        </view>
+        <view v-if="actived === 4">
+          <goods :goods="goods" v-if="goods.length > 0"></goods>
+          <image
+            v-if="isCompleteLoadGood"
+            :src="webUrl + '/home/no-data-bg.png'"
+            mode="widthFix"
+            class="loadend"
+          />
+          </view>
+          <image
+            v-if="goods.length === 0"
+            :src="webUrl + '/20231023131208675588.png'"
+            class="img-nodata"
+            mode="scaleToFill"
+          />
+        </view>
+
     </view>
     <goo-skeleton
       v-else
@@ -96,12 +85,29 @@ import {
   getProvinceGoods,
   getProvinceList
 } from "@/api/product"
+import goods from "./components/goods.vue"
 import { pageListenMixins } from '@/mixins/pageListenMixins'
+import projects from './components/projects.vue'
+import culture from "./components/culture.vue"
+import information from "./components/information.vue"
 export default {
   name: 'LandMarkPage',
+  components: {
+    goods,
+    projects,
+    culture,
+    information
+  },
   mixins: [pageListenMixins],
   data() {
     return {
+      actived: 1,
+      tabs: [
+        {name: '项目', value: 1},
+        {name: '文化', value: 2},
+        {name: '资讯', value: 3},
+        {name: '产品', value: 4},
+      ],
       webUrl: this.$VUE_APP_RESOURCES_URL,
       keyword: '',
       isLoad: false,
@@ -114,6 +120,11 @@ export default {
       pageKeyId: Object.freeze('landmarkGoodsIndex')
     }
   },
+  computed: {
+    landmarkDataId() {
+      return this.navList[this.navIndex] ? this.navList[this.navIndex]['id'] : null
+    }
+  },
   onLoad() {
     this.getNavList()
   },
@@ -128,6 +139,9 @@ export default {
     this.fetchGoods()
   },
   methods: {
+    handleTab(value) {
+      this.actived = value
+    },
     getNavList() {
       getProvinceList().then(({data}) => {
         this.navList = data
@@ -171,8 +185,28 @@ export default {
 </script>
 
 <style scoped lang="less">
+.tabs-wrap{
+  display: flex;
+  justify-content: space-around;
+  padding: 20rpx 20rpx 0;
+  color: #333;
+  font-weight: bold;
+  font-size: 36rpx;
+}
+.tab-item{
+
+}
+.tab-actived{
+  color: #fff;
+  font-weight: bold;
+  background: linear-gradient(to right, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
+  border-radius: 38rpx 0rpx 0 38rpx;
+  padding: 0 20rpx;
+}
+.top-wrap{
+  padding: 20rpx 20rpx 0;
+}
 .pkg-product-land-mark {
-  padding: 20rpx;
   background: #f0f0f0;
   .top-box {
     border-radius: 20rpx;
@@ -219,73 +253,14 @@ export default {
   }
   .middle-img-wrap {
     margin: 20rpx 0 0 0;
+    background: #fff;
+    padding: 20rpx;
     .img {
       display: block;
       width: 100%;
       border-radius: 20rpx;
     }
   }
-  .list-box {
-    margin-top: 24rpx;
-    .item {
-      position: relative;
-      width: 344rpx;
-      margin-right: 22rpx;
-      margin-bottom: 22rpx;
-      border-radius: 20rpx;
-      background: #FFFFFF;
-      overflow: hidden;
-      .mark-img {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 3;
-        display: block;
-        width: 84rpx;
-        height: 74rpx;
-      }
-      .good-img {
-        display: block;
-        width: 344rpx;
-        height: 344rpx;
-      }
-      .content {
-        height: 156rpx;
-        padding: 8rpx 8rpx 18rpx 8rpx;
-        .more-t {
-          font-size: 28rpx;
-          line-height: 36rpx;
-          color: #333;
-        }
-        .desc {
-          padding: 5rpx 0;
-          height: 34rpx;
-          color: #FFC543;
-          font-size: 24rpx;
-        }
-        .price {
-          font-size: 40rpx;
-          line-height: 40rpx;
-          font-weight: bold;
-          color: #C52733;
-        }
-        .btn {
-          display: block;
-          width: 48rpx;
-          height: 48rpx;
-        }
-      }
-    }
-    .item:nth-child(2n) {
-      margin-right: 0;
-    }
-  }
-  .list-wrap {
-    margin: 20rpx 0 0 0;
-    .loadend {
-      width: 100%;
-    }
-  }
   .img-nodata {
     position: relative;
     top: 0;