Vue放大镜组件

Detail组件代码示例如下：

  <div class="detail-box">
    <el-button icon="el-icon-arrow-left" @click="$router.back()"
      >返回</el-button
    >
    <div class="main_detail">
      <!-- 放大镜组件 -->
      <!-- <div class="left">

            </div> -->
      <zoom-image :imgs="showImgs"></zoom-image>
      <!-- 商品的信息 -->
      <div class="right">
        <h2 class="title">{{ goodsData.title }}</h2>
        <p class="supplier">{{ goodsData.supplier }}</p>
        <p class="price">￥{{ goodsData.priceStr }}</p>
        <el-rate
          :value="3.7"
          disabled
          show-score
          text-color="#ff0000"
        ></el-rate>
        <el-button
          type="danger"
          icon="el-icon-shopping-cart-2"
          @click="addCart(goodsData.Id)"
          >添加购物车</el-button
        >
      </div>
    </div>

    <!-- 类似商品 -->
    <div class="same">
      <p>类似商品</p>
      <good-list :list="sameList"></good-list>
    </div>

    <div class="footer">
      <img src="../assets/footer.png" alt="" />
    </div>
  </div>
</template>

<script>
import { detailData, sameGoodData, addShopCart } from "../tools/ajax.js";
import zoomImage from "../components/ZoomImage.vue";
import goodList from "../components/GoodList.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      goodsData: {}, //商品对象
      showImgs: [], //放大镜组件需要显示的几张图片
      sameList: [], //同店铺的其他类似的商品
    };
  },
  components: {
    zoomImage,
    goodList,
  },
  computed: {
    ...mapState(["token"]),
  },
  created() {
    this.getDetailData(this.$route);
    document.scrollingElement.scrollTop = 0;
  },
  beforeRouteUpdate(to, from, next) {
    this.getDetailData(to);
    document.scrollingElement.scrollTop = 0;
    next();
  },
  methods: {
    // 获取详情的数据
    getDetailData(to) {
      detailData({
        goodId: to.query.gId,
      }).then((data) => {
        console.log(data);
        this.goodsData = data[0]; //本页面要用的数据
        this.showImgs = JSON.parse(data[0].imgs);

        // 需要根据制造商取出类似的商品
        this.getSameData(data[0].supplier);
      });
    },

    // 获取类似商品的数据
    getSameData(supply) {
      sameGoodData({
        supplier: supply,
      }).then((data) => {
        this.sameList = data;
      });
    },
    addCart(id) {
        console.log(this.token)
      // 添加购物车的
      if (this.token) {
        //
        addShopCart({
          token: this.token,
          goodId: id,
        }).then((data) => {
          console.log(data);
          if (data.code == 0) {
            this.$message({
              type: "success",
              message: "通行证已过期，请重新登录",
            });
            setTimeout(() => {
                this.$router.push("/login");
            }, 2000);
          }else if(data.code==1){
               this.$message({
              type: "success",
              message: "添加成功",
            });
          }else{
              this.$message({
              type: "error",
              message: "系统繁忙，请刷新尝试",
            });
          }
        });
      } else {
        this.$message({
          type: "success",
          message: "亲，你还没登录，请登录",
        });
        setTimeout(() => {
          this.$router.push("/login");
        }, 2000);
      }
    },
  },
};
</script>

<style scoped>
.detail-box {
  text-align: left;
  width: 1100px;
  margin: auto;
}
.main_detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  width: 200px;
  height: 240px;
  border: 1px solid red;
  padding: 10px;
}
.right {
  width: 200px;
  height: 240px;
  margin-right: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
}
.title {
  font-size: 20px;
}
.supplier {
  color: gray;
}
.price {
  color: red;
}
.same {
  margin-top: 20px;
}
.same p {
  padding-bottom: 10px;
  border-bottom: 1px solid gray;
  /* padding: 20px; */
}
</style>