xdd-uniapp-new/v4/views/specialty/specialty.vue

<template>
  <view>
    <view class="fixed-top">
      <view class="city-box" @click="goCity">
        <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
        <text>{{ cityName }}</text>
      </view>
    </view>

    <view class="list flex flex-wrap" v-if="list.length">
      <view class="item" v-for="item in list" :key="item" @click="goDetils(item.id)">
        <view class="img-box">
          <image class="main" :src="item.image" mode="scaleToFill"></image>
          <image class="label" :src="webUrl+'/20220525103739004011.png'" mode="scaleToFill"></image>
        </view>
        <view class="content">
          <view class="title more-t">{{ item.storeName }}</view>
          <view class="price flex ai-center">
            <!-- <image class="label-vip" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill"></image> -->
            <text>￥{{ item.price }}</text>
          </view>
          <view class="cart-box flex ai-center jc-between">
            <view class="flex ai-center">
              <image class="icon-fire" :src="webUrl+'/20220214125642215597.png'" mode="scaleToFill"></image>
              <text>{{ item.sales }}人已购买</text>
            </view>
            <image class="icon-cart" :src="webUrl+'/20220214125543267695.png'" mode="scaleToFill"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="v4-nodata" style="margin-top: 120rpx;" v-else>
      <image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
      <view class="text">暂无数据</view>
    </view>
  </view>
</template>

<script>
import {
  fetchSpecialty
} from "@/api/shop"

export default {
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      page: 1,
      cityName: "丽江市",
      list: []
    }
  },
  onShow() {
    const memCityName = uni.getStorageSync("cityName")
    if (memCityName.length) {
      this.cityName = memCityName
      this.page = 1
      this.list = []
      this.fetchList(this.cityName)
      uni.removeStorageSync("cityName")
    }
  },
  onReachBottom: function () {
    this.page++;
    this.fetchList(this.cityName);
  },
  methods: {
    goCity() {
      uni.redirectTo({
        url: `/pages/chose-city/chose-city?type=0&city=${this.cityName}`
      })
    },
    goDetils(id) {
      this.$yrouter.push({
        path: "/pages/shop/GoodsCon/index",
        query: {
          id,
          from: "spe"
        }
      })
    },
    fetchList(cityName) {
      fetchSpecialty(this.page, cityName).then(res => {
        if (res.data.length > 0) {
          res.data.forEach(item => {
            this.list.push(item);
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 22rpx 0 20rpx;
  background: #F5F5FA;
  z-index: 100;
}

.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;
  }

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

.list {
  margin: 96rpx 32rpx 0;

  .item:nth-child(2n) {
    margin-left: 22rpx;
  }

  .item {
    width: 332rpx;
    margin-bottom: 24rpx;
    border-radius: 8rpx;
    background: #fff;

    .img-box {
      position: relative;

      .main {
        width: 332rpx;
        height: 332rpx;
        border-radius: 8rpx;
      }

      .label {
        position: absolute;
        top: 0;
        left: 0;
        width: 94rpx;
        height: 42rpx;
      }
    }

    .content {
      .label-vip {
        width: 40rpx;
        height: 24rpx;
        margin-right: 6rpx;
      }

      .icon-fire {
        width: 24rpx;
        height: 24rpx;
      }

      .icon-cart {
        width: 48rpx;
        height: 48rpx;
      }

      .title {
        margin: 8rpx 4rpx 0 10rpx;
        font-size: 26rpx;
        font-weight: bold;
        line-height: 36rpx;
        color: #333333;
      }

      .price {
        padding: 4rpx 10rpx 10rpx;
        font-size: 26rpx;
        font-weight: bold;
        line-height: 38rpx;
        color: #ED0F0F;
      }

      .cart-box {
        padding: 10rpx 12rpx 12rpx;
        border-top: 1rpx solid #EFEFEF;

        text {
          font-size: 22rpx;
          line-height: 32rpx;
          color: #333333;
        }
      }
    }
  }
}
</style>