Fix:[#988,#987,#986,#985,#983]修复测试反馈的问题和调整内容

pages/cloud/haveFun.vue

@@ -1,117 +1,36 @@
-<script>
-import {getHotelList, getHotelTypeList} from "@/api/inn.js";
-import {getCurAddress, getLocation} from "@/utils/common";
-
-export default {
-  data() {
-    return {
-      webUrl: this.$VUE_APP_RESOURCES_URL,
-      name: "",
-      page: 1,
-      typeList: [],
-      typeIndex: 0,
-      cityName: "",
-      hotelList: [],
-    }
-  },
-  onLoad() {
-    this.getMapData();
-    getHotelTypeList().then(({data}) => {
-      this.typeList = data;
-    });
-  },
-  onShow() {
-    let memCityName = uni.getStorageSync("cityName")
-
-    if (memCityName.length) {
-      this.cityName = memCityName;
-      uni.removeStorageSync("cityName")
-      this.search();
-    }
-  },
-  onReachBottom() {
-    if (!this.cityName) {
-      return
-    }
-    this.page++;
-    this.fetchList();
-  },
-  methods: {
-    goCity() {
-      uni.navigateTo({
-        url: `/pages/chose-city/chose-city?type=2&city=${this.cityName}`
-      })
-    },
-
-    goInnDetail(item) {
-      uni.navigateTo({
-        url: `/pagesInn/inn/innHome?id=${item.id}`
-      })
-    },
-
-    async getMapData() {
-      const map = await getLocation();
-      if (map.length > 1) {
-        const {latitude, longitude} = map[1];
-        const address = await getCurAddress(latitude, longitude);
-        this.cityName = address[1].data.result.ad_info.city;
-        this.search();
-      }
-    },
-
-    tapType(index) {
-      if (this.typeIndex === index) return;
-      this.typeIndex = index;
-      this.search();
-    },
-    search() {
-      this.page = 1;
-      this.hotelList = [];
-      this.fetchList();
-    },
-    fetchList() {
-      let param = {
-        page: this.page,
-        type: this.typeList[this.typeIndex].id,
-        cityName: this.cityName
-      };
-      let name = this.name.trim();
-      if (name.length > 0) param.name = name;
-      getHotelList(param).then(res => {
-        if (res.status === 200) {
-          for (let i = 0; i < res.data.length; i++) {
-            res.data[i].hide = true;
-            this.hotelList.push(res.data[i])
-          }
-        }
-      })
-    }
-  }
-}
-</script>
-
 <template>
   <view class="have-fun">
-<!--    <u-navbar title="寻趣味" height="90rpx">-->
-<!--      <view slot="left">&nbsp;</view>-->
-<!--    </u-navbar>-->
     <view class="top-box">
       <view class="search-box flex jc-between ai-center">
-        <input type="text" v-model="name" placeholder="搜索店铺" placeholder-style="color:#949494"
-               @confirm="search">
-        <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill"
-               @click="search"/>
+        <input
+          v-model="name"
+          type="text"
+          placeholder="搜索店铺"
+          placeholder-style="color:#949494"
+          @confirm="search"
+        >
+        <image
+          class="icon"
+          :src="webUrl+'/20220903142935869059.png'"
+          mode="scaleToFill"
+          @click="search"
+        />
       </view>
-
       <scroll-view class="type-box flex" scroll-x enable-flex>
-        <view class="item flex-0 flex flex-col jc-center ai-center" :class="{'active':typeIndex===index}"
-              v-for="(item,index) in typeList" :key="index" @click="tapType(index)">
+        <view
+          v-for="(item, index) in typeList"
+          :key="index"
+          :class="{
+            'active': typeIndex === index
+          }"
+          class="item flex-0 flex flex-col jc-center ai-center"
+          @click="tapType(index)"
+        >
           <image :src="item.icon" mode="scaleToFill"/>
           <view class="name">{{ item.name }}</view>
         </view>
       </scroll-view>
     </view>
-
     <view class="body">
       <view class="flex jc-end">
         <view class="city-box" @click="goCity('cloud')">
@@ -119,41 +38,150 @@ export default {
           <text>{{ cityName }}</text>
         </view>
       </view>
-
-      <view class="list" v-if="hotelList.length">
-        <custom-waterfalls-flow :value="hotelList" imageKey="cover">
-          <view
-            v-for="(item,index) in hotelList"
-            :key="index"
-            class="item"
-            @click="goInnDetail(item)"
-          >
-            <view class="cover-box">
-              <image class="cover" :src="item.cover" mode="scaleToFill"></image>
-              <view class="my-mask">
-                <image class="icon" :src="webUrl+'/20220510142728577618.png'"
-                       mode="scaleToFill"></image>
-                <text>{{ item.cityName }}</text>
+      <view v-if="isLoad">
+        <view v-if="hotelList.length > 0">
+          <view class="list-wrapper">
+            <view class="list">
+              <view
+                v-for="(item, index) in hotelEvenList"
+                :key="index"
+                class="item"
+                @click="goInnDetail(item)"
+              >
+                <fun-hotel-item :item="item" />
               </view>
             </view>
-            <view class="more-t">{{ item.content }}</view>
-            <view class="flex ai-center" style="margin-bottom: 18rpx;">
-              <image class="logo" :src="item.logo" mode="scaleToFill" v-if="item.logo"></image>
-              <image class="logo" :src="webUrl+'/20230609145651814148.png'" v-else/>
-              <text class="one-t">{{ item.name }}</text>
+            <view class="list">
+              <view
+                v-for="(item, index) in hotelOddList"
+                :key="index"
+                class="item"
+                @click="goInnDetail(item)"
+              >
+                <fun-hotel-item :item="item" />
+              </view>
             </view>
           </view>
-        </custom-waterfalls-flow>
-      </view>
-
-      <view class="v4-nodata" v-else>
-        <image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
-        <view class="text">暂无数据</view>
+        </view>
+        <view class="v4-nodata" v-else>
+          <image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
+          <view class="text">暂无数据</view>
+        </view>
       </view>
+      <goo-skeleton v-else />
     </view>
   </view>
 </template>
-
+<script>
+import { getHotelList, getHotelTypeList } from "@/api/inn.js"
+import { getCurAddress, getLocation } from "@/utils/common"
+import GooSkeleton from '@/components/GooSkeleton/index.vue'
+import FunHotelItem from './components/HotelItem'
+export default {
+  components: {
+    GooSkeleton,
+    FunHotelItem
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      name: '',
+      page: 1,
+      typeList: [],
+      typeIndex: 0,
+      cityName: '',
+      hotelList: [],
+      isLoad: false
+    }
+  },
+  computed: {
+    hotelOddList() {
+      const arr = this.hotelList.filter(function(item, index) { return index % 2 === 1 })
+      return arr
+    },
+    hotelEvenList() {
+      const arr = this.hotelList.filter(function(item, index) { return index % 2 === 0 })
+      return arr
+    }
+  },
+  onLoad() {
+    this.getMapData()
+    getHotelTypeList().then(({data}) => {
+      this.typeList = data;
+    })
+  },
+  onShow() {
+    const memCityName = uni.getStorageSync('cityName')
+    if (memCityName.length) {
+      this.cityName = memCityName
+      uni.removeStorageSync('cityName')
+      this.search()
+    }
+  },
+  methods: {
+    goCity() {
+      uni.navigateTo({
+        url: `/pages/chose-city/chose-city?type=2&city=${this.cityName}`
+      })
+    },
+    goInnDetail(item) {
+      uni.navigateTo({
+        url: `/pagesInn/inn/innHome?id=${item.id}`
+      })
+    },
+    async getMapData() {
+      const map = await getLocation()
+      if (map.length > 1) {
+        const {latitude, longitude} = map[1]
+        const address = await getCurAddress(latitude, longitude)
+        this.cityName = address[1].data.result.ad_info.city
+        this.search()
+      }
+    },
+    tapType(index) {
+      if (this.typeIndex === index) return
+      this.typeIndex = index
+      this.search()
+    },
+    search() {
+      this.isLoad = false
+      this.page = 1
+      this.hotelList = []
+      this.fetchList()
+    },
+    fetchList() {
+      const param = {
+        page: this.page,
+        type: this.typeList[this.typeIndex].id,
+        cityName: this.cityName
+      }
+      const name = this.name.trim()
+      if (name.length > 0) {
+        param.name = name
+      }
+      getHotelList(param).then(res => {
+        const { success, data } = res
+        if (success) {
+          for (let i = 0; i < data.length; i++) {
+            const cover = data[i].cover
+            data[i].hide = true
+            // 视频封面取第一帧图片
+            if (data[i].coverType === 2) {
+              data[i].videoCover = cover
+              data[i].cover = (cover + '?vframe/jpg/offset/1')
+            } else {
+              data[i].videoCover = ''
+            }
+            this.hotelList.push(data[i])
+          }
+        }
+      }).finally(() => {
+        this.isLoad = true
+      })
+    }
+  }
+}
+</script>
 <style scoped lang="less">
 .have-fun {
   //padding-top: 120rpx;
@@ -240,70 +268,16 @@ export default {
     }
   }
 
-  .list {
-    margin-top: 20rpx;
-
-    .cover {
+  .list-wrapper {
+    display: flex;
+    justify-content: space-between;
+    .list {
       width: 328rpx;
-      height: 328rpx;
-      vertical-align: middle;
-    }
-
-    .icon {
-      width: 26rpx;
-      height: 26rpx;
-      margin-top: -6rpx;
-      margin-right: 6rpx;
-      vertical-align: middle;
-    }
-
-    .logo {
-      width: 36rpx;
-      height: 36rpx;
-      vertical-align: middle;
-      margin: 0 8rpx;
-      border-radius: 50%;
-    }
-
-    .item {
-      width: 328rpx;
-      box-sizing: border-box;
-    }
-
-    .cover-box {
-      position: relative;
-      width: 328rpx;
-      height: auto;
-      border-radius: 14rpx;
-      overflow: hidden;
-
-      .my-mask {
-        position: absolute;
-        bottom: 0;
-        left: 0;
+      .item {
         width: 100%;
-        height: 60rpx;
-        line-height: 60rpx;
         box-sizing: border-box;
-        padding: 0 24rpx;
-        background: linear-gradient(rgba(51, 51, 51, 0), rgba(0, 0, 0, 1));
-        color: #fff;
-        font-size: 24rpx;
       }
     }
-
-    .more-t {
-      margin: 10rpx;
-    }
-
-    .one-t {
-      color: #666;
-      font-size: 24rpx;
-    }
-  }
-
-  /deep/ .waterfalls-flow-column .column-value {
-    background-color: rgba(0, 0, 0, 0) !important;
   }
 }
 </style>