Vue 简单购物车实现

代码模块 专栏收录该内容
5 篇文章 0 订阅

vue——购物车代码

<template>
  <div>
    <!-- 头部导航 -->
    <van-sticky>
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="back"
      >`在这里插入代码片`
        <template #right>
          <van-icon
            name="shopping-cart-o"
            size="20"
            color="black"
            :badge="carts.length"
            @click="goCart"
          />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!--展示的商品 -->
    <!-- ---------------------------------------------------------------------- -->
    <ul>
      <li>
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(img, index) in goods.imgs" :key="index">
            <img :src="img" alt="" width="100%" />
          </van-swipe-item>
        </van-swipe>
        <p class="op">{{ goods.originalPrice }}</p>
        <span> {{ goods.title }} </span>
        <!-- ---------------------------------------------- -->
        <img
          v-for="(url, index) in goods.detailPics"
          :key="index"
          :src="url.img"
          style="width:100%;"
        />
      </li>
    </ul>
    <!-- ---------------------------------------------------------------------- -->
    <!-- 计算总价 -->
    <!-- ---------------------------------------------------------------------- -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="carts.length"
        @click="goCart"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" :badge="12" />
      <van-goods-action-button
        type="warning"
        @click="addCart"
        text="加入购物车"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="show = true"
      >
      </van-goods-action-button>
    </van-goods-action>
    <!-- ======================================================== -->
    <!-- 返回顶部 -->
    <div class="revert" @click="revert" v-show="QWE">
      <!-- <i class="iconfont iconfanhuidingbu"> </i> -->
      <van-icon name="upgrade" size="30" />
    </div>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: {},
      carts: [],
      QWE: false,
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系,比如商品有颜色和尺码两大类规格,颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目,一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName:规格类目名称
            v: [
              {
                id: "30349", // skuValueId:规格值 id
                name: "红色", // skuValueName:规格值名称
                imgUrl:
                  "https://t16img.yangkeduo.com/pdd_oms/2020-06-10/8dec236116d3a0bc3b6987eb21bf13d8.jpg", // 规格类目图片,只有第一个规格类目可以定义图片
              },
              {
                id: "1215",
                name: "蓝色",
                imgUrl: "https://img.yzcdn.cn/2.jpg",
              },
              {
                id: "1216",
                name: "黄色",
                imgUrl: "https://img.yzcdn.cn/2.jpg",
              },
            ],
            k_s: "s1", // skuKeyStr:sku 组合列表(下方 list)中当前类目对应的 key 值,value 值会是从属于当前类目的一个规格值 id
          },
        ],
        // 所有 sku 的组合列表,比如红色、M 码为一个 sku 组合,红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId,下单时后端需要
            price: 100, // 价格(单位分)
            s1: "1215", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "0", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "0", // 最多包含3个规格值,为0表示不存在该规格
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId,下单时后端需要
            price: 100, // 价格(单位分)
            s1: "30349", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "0", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "0", // 最多包含3个规格值,为0表示不存在该规格
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId,下单时后端需要
            price: 100, // 价格(单位分)
            s1: "1216", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "0", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "0", // 最多包含3个规格值,为0表示不存在该规格
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "1.00", // 默认价格(单位元)
        stock_num: 227, // 商品总库存

        hide_stock: false, // 是否隐藏剩余库存
      },
    };
  },
  computed: {
    goods() {
      return {
        picture: this.goods.imgs.img[0],
      };
    },
  },
  mounted() {
    // 初始化本地仓库
    let carts = localStorage.carts;
    // 判断数组不能为空,也不能为未定义
    if (carts != undefined && carts != null) {
      // 解析本地存储
      this.carts = JSON.parse(carts);
    }
    // 商品列表传递过来的id
    let id = this.$route.query.id;
    this.$axios
      .get("http://api.kudesoft.cn/tdk/details", {
        params: {
          id,
        },
      })
      .then((res) => {
        this.goods = res.data.data.data;
        // console.log(goods)
        // 分割商品详情的轮播图
        this.goods.imgs = this.goods.imgs.split(",");
        // console.log(res.data.data.data.detailPics);
        // 分割商品详情的图片
        this.goods.detailPics = JSON.parse(this.goods.detailPics)
      })
      .catch((err) => {
        console.log(err);
      });
  },
  created() {
    this.listenerFunction();
  },
  methods: {
    handleScroll() {
      if (window.pageYOffset > 1000) {
        this.QWE = true;
      } else {
        this.QWE = false;
      }
    },
    // 返回顶部的方法
    revert() {
      $("html")
        .stop()
        .animate(
          {
            scrollTop: 0,
          },
          3000
        );
    },
    listenerFunction(e) {
      document.addEventListener("scroll", this.handleScroll, true);
    },
    addCart() {
      let rel = true;
      this.carts.map((item) => {
        if (item.goods.id == this.goods.id) {
          item.buynum++;
          rel = false;
          return;
        }
      });
      if (rel) {
        this.carts.push({
          goods: this.goods,
          buynum: 1,
        });
        this.$toast.success("添加成功!");
        // localStorage.carts = JSON.stringify(this.carts);
      }
      localStorage.carts = JSON.stringify(this.carts);
    },
    // 去往购物车
    goCart() {
      this.$router.push({
        name: "cart",
        params: {},
      });
    },
    // 返回按钮
    back() {
      window.history.back();
    },
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.listenerFunction);
  },
};
</script>

<style scoped>
.op {
  font-size: 20px;
  font-weight: 900;
  color: red;
}
.revert {
  position: fixed;
  top: 404px;
  left: 316px;
  z-index: 99999;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.iconfont {
  font-size: 30px;
}
</style>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值