xdd-uniapp-new/v4/components/select-city.vue

<template>
  <view class="page-select-city">
    <uni-search-bar class="search" :placeholder="`搜索${title}`" bgColor="#fff" @confirm="search" @input="input">
    </uni-search-bar>
    <view class="city-box">
      <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
      <text class="main">{{location}}</text>
      <text class="sub">当前定位</text>
    </view>

    <view class="group" v-if="topList.length>0">
      <view class="title" style="font-size: 28rpx;">特别推荐</view>
      <view class="list">
        <view class="item" v-for="item in topList" :key="item" @click="select(item)">
          <view class="has-goods" v-if="item.hasGoods==0 && back==='specialty'">{{labelText}}</view>
          <image :src="item.icon" mode="scaleToFill"></image>
          <view class="city-name">{{item.cityName}}</view>
        </view>
      </view>
    </view>

    <view class="group">
      <view class="title" style="font-size: 28rpx;">全国城市</view>

      <view class="group" style="margin-left: 0;margin-right: 0;" v-for="group in list">
        <view class="title">{{group.label}}</view>
        <view class="list">
          <view class="item" v-for="item in group.city" :key="item" @click="select(item)">
            <view class="has-goods" v-if="item.hasGoods==0 && back==='specialty'">{{labelText}}</view>
            <image :src="item.icon" mode="scaleToFill"></image>
            <view class="city-name">{{item.cityName}}</view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    fetchCity
  } from "@/api/shop";
  import {
    getHotelCityList
  } from "@/api/inn";
  export default {
    data() {
      return {
        webUrl: this.$VUE_APP_RESOURCES_URL,
        back: "",
        location: "",
        title: "",
        list: [],
        topCount: 0,
        topList: [],
        labelText: "暂无特产"
      }
    },
    onLoad: function(options) {
      this.back = options.back;
      this.location = options.city;

      if (this.back === "specialty") {
        this.title = "特产";
        uni.setNavigationBarTitle({
          title: this.title
        });
      }

      this.fetchList();
    },
    methods: {
      fetchList() {
        switch (this.back) {
          case "specialty":
            fetchCity().then(res => {
              if (res.success) {
                this.topList = res.data.tops;
                this.list = res.data.group;
              }
            })
            break;
            case "cloud":
            getHotelCityList().then(res=>{
              this.list = res.data;
            })
            break;
          default:
            break;
        }
      },

      select(item) {
        uni.setStorageSync("cityName", item.cityName)
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss">
  .page-select-city {
    min-height: 100vh;
    background: #fff;
  }

  .search {
    .uni-searchbar {
      padding: 20rpx 32rpx 12rpx !important;

      .uni-searchbar__box {
        border-radius: 44px !important;
        background: #F6F6F6 !important;
      }
    }
  }

  .city-box {
    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;
    }

    .main {
      font-size: 32rpx;
      font-weight: bold;
      line-height: 48rpx;
      color: #333333;
    }

    .sub {
      margin: 14rpx 0 0 22rpx;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 34rpx;
      color: #999999;
    }
  }

  .group {
    margin: 40rpx 32rpx 0;

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

    .list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 18rpx;

      .item {
        position: relative;
        width: 154rpx;
        height: 154rpx;
        // height: 214rpx;
        box-sizing: border-box;
        margin: 0 22rpx 24rpx 0;
        // border: 2rpx solid #707070;
        border-radius: 8px;

        image {
          width: 100%;
          height: 100%;
          border-radius: 8px;
          vertical-align: middle;
        }

        .has-goods {
          position: absolute;
          left: 0;
          top: 0;
          padding: 6rpx;
          border-radius: 8px 0 8px 0;
          background: #f66;
          color: #fff;
          font-size: 24rpx;
          line-height: 1;
        }

        .city-name {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 48rpx;
          line-height: 48rpx;
          border-radius: 0 0 8px 8px;
          background: rgba(0, 0, 0, .2);
          color: #fff;
          text-align: center;
          font-size: 24rpx;
        }
      }

      .item:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
</style>