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>