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" id="goods-box">
      <view class="item" v-for="item in list" :key="item.id" @click="goStore(item)">
        <image class="image" :src="item.cover + (item.coverType === 2 ? '?vframe/jpg/offset/1' : '')" 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>
    <FunctionGuide :maxStep="1" @hide="setGuide('wenwanIndex')" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
  </view>
</template>

<script>
import {fetchStore} from "@/api/wenwan";
import FunctionGuide from '@/components/FunctionGuide'
import GuideMixins from '@/mixins/GuideMixins'

export default {
  components: {
    FunctionGuide
  },
  mixins: [GuideMixins],
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      page: 1,
      cityId: null,
      cityName: "丽江市",
      list: [],
      name: ""
    }
  },
  onLoad(option) {
    this.cityId = option.cityId;
    this.queryGuide('wenwanIndex')
  },
  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: {
    showFunctionGuide() {
      if(this._step == this.functionGuideData.step) return
      if(this.functionGuideData.step == 1) {
        this._step = this.functionGuideData.step
        const imgs = [
          {
            url: this.webUrl + '/引导页素材/文玩艺术/Group 2/Group 2-1.png',
            style: {
              position: 'absolute',
              zIndex: 99,
              width: '425rpx',
              top: 0*2+'rpx',
              left: 50*2+'rpx',
              right: 0,
              margin: 'auto',
              height: '213rpx',
              /* px: ; */
            },
            isBtn: false
          },
          {
            url: this.webUrl + '/引导页素材/文玩艺术/Group 2/Group 2-2.png',
            style: {
              position: 'absolute',
              zIndex: 99,
              width: '117rpx',
              top: 75*2+'rpx',
              left: 0*2+'rpx',
              right: 0,
              margin: 'auto',
              height: '46rpx',
            },
            isBtn: 'jump'
          },
          {
            url: this.webUrl + '/引导页素材/文玩艺术/Group 2/Group 2-3.png',
            style: {
              position: 'absolute',
              zIndex: 99,
              width: '117rpx',
              top: 75*2+'rpx',
              left: 240*2+'rpx',
              height: '46rpx',
            },
            isBtn: 'next'
          },
        ]
        this.getElementData('#goods-box', res=>{
          console.log(res, 'res---------');
          
          this.setFunctionGuideData({
            imgs: imgs,
            tipsPosition: '420rpx',
            btnGroupPosition: '',
            position: {
              top: res.top + 'px',
              left: res.left + 'px',
              width:  `${res.width}px`,
              height:  `${res.height}px`,
            }
          })
        })
        return
      } else {
        return
      }
    },
    goClass() {
      uni.navigateTo({
        url: "/wenwan/views/goodsClass?cityId=" + this.cityId
      })
    },
    goCity() {
      uni.redirectTo({
        url: `/pages/chose-city/chose-city?type=1&city=${this.cityName}`
      })
    },
    goStore: function (item) {
      // 跳转到客栈详情
      uni.navigateTo({
        url: `/pagesInn/inn/innHome?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>