Feat: 地标好物（服务）

pages/home/components/culture.vue

@@ -1,7 +1,17 @@
 <template>
+ <view>
   <view class="culture v12-d-grid-columns-2">
-    <view class="img-item " v-for="item in 10" :key="item"></view>
+    <view class="img-item " v-for="(item, index) in list" :key="index">
+      <image class="img-item" :src="item" mode="widthFix|heightFix" lazy-load="false"></image>
+    </view>
   </view>
+  <image
+    v-if="list.length === 0"
+    :src="webUrl + '/20231023131208675588.png'"
+    class="img-nodata"
+    mode="scaleToFill"
+  />
+ </view>
 </template>
 
 <script>
@@ -14,14 +24,27 @@ export default {
   },
   data() {
     return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
       list: []
     }
   },
-  mounted() {
+  watch: {
-    getCulture({landmarkDataId: this.landmarkDataId}).then(res => {
+    landmarkDataId(value) {
-      this.list = res.data
+      if(value) {
-    })
+        this.getData()
+      }
+    }
   },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      getCulture({landmarkDataId: this.landmarkDataId}).then(res => {
+        this.list = res.data.cultureImages
+      })
+    }
+  }
 }
 </script>
 
@@ -31,8 +54,17 @@ export default {
   padding: 20rpx;
 }
 .img-item{
+  width: 340rpx;
   height: 320rpx;
-  background: rgba(137,35,35,0.39);
   border-radius: 16rpx;
 }
+.img-nodata {
+  position: relative;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 352rpx;
+  height: 338rpx;
+  margin-bottom: 60rpx;
+}
 </style>

pages/home/components/goods.vue

@@ -27,6 +27,12 @@
         </view>
       </view>
     </view>
+    <image
+      v-if="goods.length === 0"
+      :src="webUrl + '/20231023131208675588.png'"
+      class="img-nodata"
+      mode="scaleToFill"
+    />
   </view>
 </template>
 
@@ -53,6 +59,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.img-nodata {
+  position: relative;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 352rpx;
+  height: 338rpx;
+  margin-bottom: 60rpx;
+}
 .list-box {
   margin-top: 24rpx;
   .item {

pages/home/components/information.vue

@@ -74,6 +74,12 @@
         class="no-data-loadend"
       />
     </view>
+    <image
+      v-if="infoArray.length === 0"
+      :src="webUrl + '/20231023131208675588.png'"
+      class="img-nodata"
+      mode="scaleToFill"
+    />
   </view>
 </template>
 
@@ -97,17 +103,27 @@ export default {
       infoArray: []
     }
   },
-  created() {
+  watch: {
-    const params = {
+    landmarkDataId(value) {
-      landmarkDataId: this.landmarkDataId,
+      if(value) {
-      page: 1,
+        this.getData()
-      limit: 9999
+      }
     }
-    getNews(params).then(res => {
+  },
-      this.infoArray = res.data.records
+  created() {
-    })
+    this.getData()
   },
   methods: {
+    getData() {
+      const params = {
+        landmarkDataId: this.landmarkDataId,
+        page: 1,
+        limit: 9999
+      }
+      getNews(params).then(res => {
+        this.infoArray = res.data.records
+      })
+    },
     likeInfoItemHandle(item, index, value, voValue) {
       hadLike({ landmarkNewsId: item.id }).then(res => {
         const { success } = res
@@ -258,5 +274,14 @@ export default {
   color: #666;
   font-size: 14px;
 }
+.img-nodata {
+  position: relative;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 352rpx;
+  height: 338rpx;
+  margin-bottom: 60rpx;
+}
 </style>
 

pages/home/components/policy.vue

@@ -13,6 +13,12 @@
         <view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733 " size="12"></u-icon></view>
       </view>
     </view>
+    <image
+      v-if="list.length === 0"
+      :src="webUrl + '/20231023131208675588.png'"
+      class="img-nodata"
+      mode="scaleToFill"
+    />
   </view>
 </template>
 
@@ -26,27 +32,38 @@ export default {
   },
   data() {
     return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
       list: [],
       currentList: [],
       isMore: false
     }
   },
-  mounted() {
+  watch: {
-    const params = {
+    landmarkDataId(value) {
-      landmarkDataId: this.landmarkDataId,
+      if(value) {
-      page: 1,
+        this.getData()
-      limit: 99999
-    }
-    getPorjectPolicyFiles(params).then(res => {
-      this.list = res.data.records
-      if(this.isMore) {
-        this.currentList = this.list
-      } else {
-        this.currentList = this.list.filter((item, index) => index < 3)
       }
-    })
+    }
+  },
+  mounted() {
+    this.getData()
   },
   methods: {
+    getData() {
+      const params = {
+        landmarkDataId: this.landmarkDataId,
+        page: 1,
+        limit: 99999
+      }
+      getPorjectPolicyFiles(params).then(res => {
+        this.list = res.data.records
+        if(this.isMore) {
+          this.currentList = this.list
+        } else {
+          this.currentList = this.list.filter((item, index) => index < 3)
+        }
+      })
+    },
     showMore() {
       this.isMore = !this.isMore
       if(this.isMore) {
@@ -131,4 +148,13 @@ export default {
   padding: 5rpx 20rpx;
   border-radius: 30rpx;
 }
+.img-nodata {
+  position: relative;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 352rpx;
+  height: 338rpx;
+  margin-bottom: 60rpx;
+}
 </style>

pages/home/components/projects.vue

@@ -30,7 +30,7 @@
     >
       <recommend v-if="actived === 1" :landmarkDataId="landmarkDataId"></recommend>
       <policy v-if="actived === 2" :landmarkDataId="landmarkDataId"></policy>
-      <serviec v-if="actived === 3" :landmarkDataId="landmarkDataId"></serviec>
+      <serviec v-if="actived === 3" :info="info"></serviec>
     </view>
   </view>
 </template>
@@ -46,7 +46,10 @@ export default {
     serviec
   },
   props: {
-    landmarkDataId: null
+    landmarkDataId: null,
+    info: {
+      default:() => {}
+    }
   },
   data() {
     return {

pages/home/components/recommend.vue

@@ -18,6 +18,12 @@
         <view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733 " size="12"></u-icon></view>
       </view>
     </view>
+    <image
+      v-if="list.length === 0"
+      :src="webUrl + '/20231023131208675588.png'"
+      class="img-nodata"
+      mode="scaleToFill"
+    />
   </view>
 </template>
 
@@ -31,22 +37,34 @@ export default {
   },
   data() {
     return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
       list: [],
       currentList: [],
       isMore: false
     }
   },
-  mounted() {
+  watch: {
-    getPorjectRecommend({landmarkDataId: this.landmarkDataId}).then(res => {
+    landmarkDataId(value) {
-      this.list = res.data
+      if(value) {
-      if(this.isMore) {
+        this.getData()
-        this.currentList = this.list
-      } else {
-        this.currentList = this.list.filter((item, index) => index < 3)
       }
-    })
+    }
   },
+  mounted() {
+    this.getData()
+  },
+  
   methods: {
+    getData() {
+      getPorjectRecommend({landmarkDataId: this.landmarkDataId}).then(res => {
+        this.list = res.data
+        if(this.isMore) {
+          this.currentList = this.list
+        } else {
+          this.currentList = this.list.filter((item, index) => index < 3)
+        }
+      })
+    },
     toStore(id) {
       if (!id) {
         return
@@ -131,4 +149,13 @@ export default {
   padding: 5rpx 20rpx;
   border-radius: 30rpx;
 }
+.img-nodata {
+  position: relative;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 352rpx;
+  height: 338rpx;
+  margin-bottom: 60rpx;
+}
 </style>

pages/home/components/serviec.vue

@@ -1,17 +1,100 @@
 <template>
   <view class="service">
-    服务
+    <view class="map-cont">
+      <map
+        :longitude="info.longitude"
+        :latitude="info.latitude"
+        style="width: 100%;height: 400rpx; border-radius: 20rpx;"
+      />
+    </view>
+    <view class="v12-mt-3 info-wrap">
+      <view>
+        <view class="v12-font-32 v12-font-bold v12-mb-2">{{ info.name }}</view>
+        <view class="v12-font-24 v12-mb-1 v12-dark1-text">办公时间:{{ info.officeTime }}</view>
+        <view class="v12-font-24 v12-mb-1 v12-dark1-text">{{ info.address }}</view>
+      </view>
+      <view class="action-wrap">
+        <view>
+          <view>
+            <image :src="webUrl + '/page/qianxian/icon-addr.png'" class="img" />
+          </view>
+          <view class="text-center">导航</view>
+        </view>
+        <view>
+          <view>
+            <image :src="webUrl + '/page/qianxian/icon-phone.png'" class="img" />
+          </view>
+          <view class="text-center">客服</view>
+        </view>
+      </view>
+    </view>
+    <view style="padding: 0 20rpx;"><u-divider></u-divider></view>
+    <view class="intro-wrap">
+      <view class="v12-dark-text v12-font-bold">
+        简介
+      </view>
+      <view class="intro-text">
+        {{ info.intro }}
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
 export default {
   props: {
-    landmarkDataId: null
+    info: {
-  }
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+    }
+  },
+  mounted() {
+    console.log(this.info);
+  },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
-
+.intro-text{
+  color: #999;
+  font-size: 24rpx;
+  margin-top: 20rpx;
+}
+.intro-wrap{
+  padding: 0 20rpx 20rpx;
+}
+.action-wrap{
+  display: flex;
+  align-items: center;
+  .text-center{
+    text-align: center;
+    font-size: 24rpx;
+    color: #666;
+  }
+}
+.info-wrap{
+  display: flex;
+  justify-content: space-around;
+  padding: 40rpx 0 0;
+}
+.service{
+  position: relative;
+}
+.map-cont {
+  height: 400rpx;
+  border-radius: 20rpx;
+  background: #f2f1ed;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+.img{
+  display: block;
+  width: 64rpx;
+  height: 64rpx;
+  margin: 0 0 16rpx 16rpx;
+}
 </style>

pages/home/landMark.vue

@@ -46,7 +46,7 @@
       </view>
       <view  class="list-wrap">
         <view v-if="actived === 1">
-          <projects :landmarkDataId="landmarkDataId"></projects>
+          <projects :landmarkDataId="landmarkDataId" :info="mapData.serviceInfo"></projects>
         </view>
         <view v-if="actived === 2">
           <culture :landmarkDataId="landmarkDataId"></culture>
@@ -62,13 +62,8 @@
             mode="widthFix"
             class="loadend"
           />
-          </view>
+        </view>
-          <image
+          
-            v-if="goods.length === 0"
-            :src="webUrl + '/20231023131208675588.png'"
-            class="img-nodata"
-            mode="scaleToFill"
-          />
         </view>
 
     </view>
@@ -153,13 +148,14 @@ export default {
       this.page = 1
       this.goods = []
       this.isCompleteLoadGood = false
+      this.actived = 1
       this.getMap()
       this.fetchGoods()
     },
     getMap() {
       const id = this.navList[this.navIndex]['id']
       getProvince(id).then(({data}) => {
-        this.mapData = data
+        this.mapData = data || {}
         this.isLoad = true
       })
     },