<template>
  <div>
    <!-- 轮播 -->
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in banner" :key="index">
          <img v-lazy="image.picUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 店铺信息 -->
    <div v-for="item in subshop" :key="item.id">
      <p>{{ item.name }}</p>
      <p>{{ item.address }}</p>
      <p>
        营业时间 <span>{{ item.openingHours }}</span>
      </p>
      <p>
        联系电话 <span>{{ item.linkPhone }}</span>
      </p>
    </div>
    <!-- 店家推荐 -->
    <h1>店家推荐</h1>
    <div>
      <van-card
        v-for="item in shopping"
        :key="item.id"
        :price="item.minPrice"
        :title="item.name"
        :thumb="item.pic"
        @click="$router.push(`/menuInfo?id=${item.id}`)"
      />
      <!-- 点击事件，路由跳转，这里是简写
           可以单独写一个方法进行跳转
        -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner: [],//轮播图
      subshop: [],//店铺信息
      shopping: [],//店铺推荐
    };
  },
  methods: {
    //获取轮播数据
    getbanner() {
      this.$http.get("/banner/list").then((res) => {
        this.banner = res.data.data;
      });
    },
    //获取店铺信息
    getsubshop() {
      this.$http.get("/shop/subshop/list").then((res) => {
        this.subshop = res.data.data;
      });
    },
    //获取店铺推荐
    getshopping() {
      this.$http.post("/shop/goods/list").then((res) => {
        this.shopping = res.data.data;
      });
    },
  },
  mounted() {
    this.getbanner();
    this.getsubshop();
    this.getshopping();
  },
};
</script>

<style scoped>
.banner img {
  width: 100%;
}
h1 {
  text-align: center;
}
</style>