<template>
  <div>
    <div>
      <p>{{ basicInfo.name }}</p>
      <p class="images">
        <img :src="basicInfo.pic" alt="" />
      </p>
      <p>￥{{ basicInfo.minPrice }}</p>
    </div>
    <div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="onClickButton(basicInfo)"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      basicInfo: [],//当前商品详细信息
    };
  },
  methods: {
    //获取当前商品
    getbasicInfo(id) {
      // console.log(id);
      this.$http
        .get("/shop/goods/detail", {
          params: {
            id: id,
          },
        })
        .then((res) => {
          // console.log(res);
          this.basicInfo = res.data.data.basicInfo;
        });
    },
    //点击进入购物车页面
    //决定使用vuex状态管理器来存放我们获得到的商品详情信息
    onClickButton(obj) {
      // console.log(obj);
      this.$store.commit("addCar", obj);
      this.$router.push("/home/shoppingCart");
    },
  },
  mounted() {
    //$route.query获取地址栏上的信息
    // console.log(this.$route.query.id);
    this.getbasicInfo(this.$route.query.id);
  },
};
</script>

<style scoped>
.images img {
  width: 100%;
}
</style>