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

<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;
      console.log("getHotelTypeList")
      this.search();
    });
  },
  onShow() {
    let memCityName = uni.getStorageSync("cityName")

    if (memCityName.length) {
      this.cityName = memCityName;
      uni.removeStorageSync("cityName")
      console.log("memCityName if")
      this.search();
    }
  },
  onReachBottom() {
    this.page++;
    this.fetchList();
  },
  methods: {
    goCity() {
      uni.navigateTo({
        url: `/components/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;
      }
    },

    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"/>
      </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)">
          <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 class="list" v-if="hotelList.length">
        <custom-waterfalls-flow :value="hotelList" imageKey="cover">
          <view class="item" v-for="(item,index) in hotelList" slot="slot{{index}}"
                @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>
            </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>
          </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>

<style scoped lang="less">
.have-fun {
  padding-top: 120rpx;

  .top-box {
    padding: 60rpx 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 {
    margin-top: 20rpx;

    .cover {
      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;
        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>