xdd-uniapp-new/pages/cloud/haveFun.vue

<template>
  <view class="have-fun">
    <view class="top-box">
      <view class="search-box flex jc-between ai-center">
        <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
          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')">
          <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
          <text>{{ cityName }}</text>
        </view>
      </view>
      <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="list">
              <view
                v-for="(item, index) in hotelOddList"
                :key="index"
                class="item"
                @click="goInnDetail(item)"
              >
                <fun-hotel-item :item="item" />
              </view>
            </view>
          </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
        :show-avatar="false"
      />
    </view>
  </view>
</template>
<script>
import { getHotelList, getHotelTypeList } from "@/api/inn.js"
import { getCurAddress, getLocation } from "@/utils/common"
import FunHotelItem from './components/HotelItem'
import { pageListenMixins } from '@/mixins/pageListenMixins'
export default {
  components: {
    FunHotelItem
  },
  mixins: [pageListenMixins],
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      name: '',
      page: 1,
      typeList: [],
      typeIndex: 0,
      cityName: '',
      hotelList: [],
      isLoad: false,
      pageKeyId: Object.freeze('findFunIndex')
    }
  },
  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
    }
  },
	onReachBottom() {
    // 后端接口结构需要调整下，需要补充总页数，前端可判断当前页数大于等于总页数则不发送网络请求
    this.page++
		this.fetchList()
	},
  onLoad() {
    getHotelTypeList().then(({data}) => {
      this.typeList = data
      this.getMapData()
    })
  },
  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}&from=fun`
      })
    },
    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;

  .top-box {
    padding: 32rpx 0 20rpx;
    background: #fff;

    .search-box {
      width: 686rpx;
      height: 60rpx;
      box-sizing: border-box;
      margin: 0 auto;
      padding: 0 24rpx 0 32rpx;
      border: 2rpx solid #BBD2D2;
      border-radius: 30rpx;

      input {
        font-size: 24rpx;
      }

      .icon {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .type-box {
      height: 180rpx;
      box-sizing: border-box;
      white-space: nowrap;
      padding: 20rpx 20rpx 0 48rpx;

      .item {
        width: 160rpx;
        height: 160rpx;
        margin-right: 20rpx;
        border-radius: 26rpx;

        image {
          width: 72rpx;
          height: 72rpx;
        }

        .name {
          margin-top: 12rpx;
          color: #949494;
          font-size: 24rpx;
          line-height: 34rpx;
        }
      }

      .active {
        background: #DCF2FE;

        .name {
          color: #333;
        }
      }
    }
  }

  .body {
    padding: 20rpx 32rpx;
    background: #F9F9F9;
  }

  .city-box {
    display: inline-flex;
    align-items: center;
    padding: 8rpx 18rpx 8rpx 16rpx;
    border-radius: 30px;
    background: #fff;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 4rpx;
    }

    text {
      color: #333;
      font-size: 28rpx;
    }
  }

  .list-wrapper {
    display: flex;
    justify-content: space-between;
    .list {
      width: 328rpx;
      .item {
        width: 100%;
        box-sizing: border-box;
      }
    }
  }
}
</style>