<template>
    <div class="shop">
      <div class="shop_tit">附近店铺</div>
      <div v-for="item in shopItem" class="shop_item" :key="item._id">
        <div class="shop_img"><img :src="item.imgUrl"/></div>
        <div class="shop_cont">
          <p class="cont_tit">{{item.name}}</p>
          <p class="cont_info">
            <span>{{item.sales}}</span>
            <span>{{item.expressLimit}}</span>
            <span>{{item.expressPrice}}</span>
          </p>
          <p class="cont_vip">{{item.slogan}}</p>
        </div>
      </div>
    </div>
</template>
<script>
import { ref } from 'vue'
import axios from 'axios'
export default {
    name: 'Shop',
    setup () {
      const shopItem = ref([])
      const shopItemList = () => {
      axios.get('https://www.fastmock.site/mock/ae8e9031947a302fed5f92425995aa19/jd/api/shop/hot-list')
      .then((result) => {
        // const shopItem = result.data
        shopItem.value = result.data
      })
      .catch((error) => {
        console.log(error)
      })
      }
      shopItemList()
      return { shopItem }
    }
}
</script>