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

<template>
  <view class="cloud-page">
    <view class="search-box flex">
      <view class="city-box" @click="goCity('cloud')">
        <image
          :src="webUrl+'/20220903142929759087.png'"
          mode="scaleToFill"
        />
        <text>{{ cityName }}</text>
      </view>
      <uni-search-bar
        placeholder="输入搜索关键词"
        @confirm="search"
        @clear="clearName"
      />
    </view>
    <view class="nav-box">
      <view
        v-for="(item, index) in typeList"
        :key="index"
        class="item flex-0"
        @click="changeType(index)"
      >
        <image :src="item.icon" mode="scaleToFill"></image>
        <view class="nav">{{ item.name }}</view>
      </view>
    </view>
    <view class="list-box">
      <view
        v-if="hotelList.length"
        class="list"
      >
        <custom-waterfalls-flow :value="hotelList" imageKey="cover">
          <view
            v-for="(item,index) in hotelList"
            :key="index"
            slot="slot{{index}}"
            class="item"
            @click="goInnDetail(item)"
        >
            <view class="cover-box">
              <image
                :src="item.cover"
                mode="scaleToFill"
                class="cover"
              />
              <view class="my-mask">
                <image
                  class="icon"
                  :src="webUrl+'/20220510142728577618.png'"
                  mode="scaleToFill"
                />
                <text>{{ item.cityName }}</text>
              </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"
              />
              <text class="one-t">{{ item.name }}</text>
            </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>
  </view>
</template>

<script>
import { getCurAddress, getLocation } from "@/utils/common"
import {
  getHotelTypeList,
  getHotelList
} from '@/api/inn.js'
export default {
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      typeList: [],
      name: '',
      page: 1,
      type: 0,
      // 跳转初始分类名
      tabName: '',
      hotelList: [],
      cityName: '丽江市',
      paramCity: ''
    }
  },
  onLoad(){
    this.fetchTypeList()
  },
  onShow() {
    const name = uni.getStorageSync('name')
    if (name) {
      this.tabName = name
      uni.removeStorageSync('name')
    }
    const memCityName = uni.getStorageSync('cityName')
    if (memCityName.length) {
      this.cityName = memCityName
      this.paramCity = memCityName
      this.page = 1
      this.hotelList = []
      this.fetchList()
      uni.removeStorageSync('cityName')
    }
  },
  onReachBottom() {
    this.page++
    this.fetchList()
  },
  methods: {
    goCity() {
      uni.navigateTo({
        url:`/pages/chose-city/chose-city?type=2&city=${this.cityName}`
      })
    },
    //获取当前定位地址
    async getCurAddressFn() {
      const that = this
      uni.showLoading({
        title: '定位中...'
      })
      const map = await getLocation()
      if (map.length > 1) {
        const {latitude, longitude} = map[1]
        getCurAddress(latitude, longitude, address => {
          that.cityName = address.city
          that.paramCity = address.city
        })
      }
    },
    fetchTypeList() {
      this.hotelList = []
      getHotelTypeList().then(res => {
        const { status, data } = res
        if (status === 200) {
          for (let i = 0; i < data.length; i++) {
            if (this.tabName == data[i].name) {
              this.type = i
            }
          }
          this.typeList = data
          const memCityName = uni.getStorageSync('cityName')
          if (memCityName.length) {
            this.cityName = memCityName
            this.paramCity = memCityName
            this.page = 1
            this.list = []
            this.fetchList()
            uni.removeStorageSync('cityName')
          } else {
            this.getCurAddressFn()
          }
        }
      })
    },
    search(e) {
      this.name = e.value
      this.page = 1
      this.hotelList = []
      this.fetchList()
    },
    clearName() {
      this.name = ''
      this.page = 1
      this.hotelList = []
      this.fetchList()
    },
    changeType(index) {
      this.type = index
      this.page = 1
      this.hotelList = []
      this.fetchList()
    },
    fetchList() {
      getHotelList({
        name: this.name,
        page: this.page,
        type: this.typeList[this.type].id,
        cityName: this.paramCity
      }).then(res => {
        if (res.status === 200) {
          this.paramCity = this.cityName
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].hide = true
            this.hotelList.push(res.data[i])
          }
        }
      })
    },
    goInnDetail(item) {
      //跳转到客栈详情
      this.$yrouter.push({
        path: '/pagesInn/inn/innHome',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.cloud-page {
  .search-box {
    padding: 0 12rpx;
    background: #fff;

    /deep/.uni-searchbar__box {
      border-radius: 44rpx !important;
    }
  }

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

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

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

  .nav-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 36rpx 24rpx;
    background: #fff;
    overflow-x: auto;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 70rpx;

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

      .nav {
        color: #666;
        font-size: 24rpx;
        line-height: 34rpx;
        font-weight: bold;
      }
    }

    .item:first-child {
      margin-left: 0;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .list-box {
    padding: 20rpx 32rpx;

    .type-name {
      position: relative;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #080F1A;
    }

    .type-name::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 10rpx;
      background: rgba(253, 104, 93, 0.39);
      z-index: -1;
    }

    .list {
      margin-top: 20rpx;

      .cover {
        width: 332rpx;
        height: 332rpx;
        vertical-align: middle;
      }

      .icon {
        width: 22rpx;
        height: 22rpx;
        margin-right: 10rpx;
        vertical-align: middle;
      }

      .logo {
        width: 36rpx;
        height: 36rpx;
        vertical-align: middle;
        margin: 0 8rpx;
        border-radius: 50%;
      }

      .cover-box {
        position: relative;
        height: auto;

        .my-mask {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 56rpx;
          line-height: 56rpx;
          box-sizing: border-box;
          padding: 0 24rpx;
          background: linear-gradient(rgba(51, 51, 51, 0), rgba(0, 0, 0, 1));
          color: #fff;
          font-size: 22rpx;
        }
      }

      .more-t {
        margin: 10rpx;
      }
    }
  }
}
</style>