xdd-uniapp-new/wenwan/views/storeList.vue

<template>
  <view class="wenwan-store-list">
    <view class="search-box flex jc-between ai-center">
      <input type="text" v-model="name" placeholder="搜索店铺" placeholder-style="color:#999" @confirm="search">
      <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
    </view>

    <view class="nav-box flex jc-between ai-center">
      <view class="location-box flex ai-center">
<!--        @click="goCity"-->
        <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
        <text class="city-name">{{ cityName }}</text>
        <text>当前定位</text>
      </view>
      <view class="more-box flex ai-center">
        <text @click="goClass">全部商品列表</text>
        <image :src="webUrl+'/20220903145836941399.png'" mode="scaleToFill"></image>
      </view>
    </view>

    <view class="list flex flex-wrap" v-if="list.length">
      <view class="item" v-for="item in list" :key="item.id" @click="goStore(item)">
        <image class="image" :src="item.cover" mode="scaleToFill"></image>

        <view class="title more-t">{{ item.content }}</view>

        <view class="footer flex ai-center">
          <image class="icon" :src="item.logo" mode="scaleToFill" v-if="item.logo"></image>
          <image class="icon" :src="webUrl+'/20230609145651814148.png'" v-else/>
          <view class="name one-t">{{ item.name }}</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>
</template>

<script>
import {fetchStore} from "@/api/wenwan";

export default {
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      page: 1,
      cityId: null,
      cityName: "丽江市",
      list: [],
      name: ""
    }
  },
  onLoad(option) {
    this.cityId = option.cityId;
  },
  onShow() {
    let memCityName = uni.getStorageSync("cityName")
    if (memCityName.length) {
      this.cityName = memCityName;
      this.page = 1;
      this.list = [];
      this.fetchList(this.cityName);
      uni.removeStorageSync("cityName")
    }
  },
  onReachBottom() {
    this.page++;
    this.fetchList(this.cityName);
  },
  methods: {
    goClass() {
      uni.navigateTo({
        url: "/wenwan/views/goodsClass?cityId=" + this.cityId
      })
    },
    goCity() {
      uni.redirectTo({
        url: `/components/chose-city/chose-city?type=1&city=${this.cityName}`
      })
    },
    goStore: function (item) {
      //跳转到客栈详情
      uni.navigateTo({
        url: `/wenwan/views/store?id=${item.id}`,
      })
    },
    search() {
      this.page = 1;
      this.list = [];
      this.fetchList(this.cityName);
    },
    fetchList(cityName) {
      fetchStore(this.page, cityName, this.name).then(res => {
        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.list.push(item);
          })
        }
        // else if (this.list.length === 0 && this.name.length === 0 && this.page === 1) {
        //   this.fetchList("");
        // }
        // this.page++;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.wenwan-store-list {
  min-height: 100vh;
  background: #F9F9F9;
  color: #333;
  font-size: 24rpx;


  view {
    box-sizing: border-box;
  }

  .search-box {
    width: 686rpx;
    height: 64rpx;
    margin: 40rpx auto;
    padding: 0 24rpx 0 32rpx;
    background: #fff;
    border-radius: 32rpx;

    input {
      width: 560rpx;
      font-size: 22rpx;
    }

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

  .nav-box {
    padding: 0 32rpx;

    .location-box {
      color: #999;

      .city-name {
        margin: 0 20rpx 0 6rpx;
        font-size: 32rpx;
        font-weight: bold;
      }

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

    .more-box {
      image {
        width: 26rpx;
        height: 26rpx;
        margin-left: 4rpx;
      }
    }
  }

  .list {
    margin: 24rpx 32rpx 0;

    .item {
      position: relative;
      width: 328rpx;
      height: 480rpx;
      margin-bottom: 24rpx;
      margin-right: 30rpx;
      background: #fff;
      border-radius: 8rpx;

      .image {
        width: 328rpx;
        height: 328rpx;
        border-radius: 8rpx;
      }

      .title {
        margin: 8rpx 8rpx 0;
        font-size: 26rpx;
      }

      .footer {
        position: absolute;
        bottom: 20rpx;
        left: 8rpx;

        .icon {
          width: 38rpx;
          height: 38rpx;
          margin-right: 6rpx;
          border-radius: 50%;
        }

        .name {
          width: 268rpx;
          color: #666;
        }
      }
    }

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