购物车页面开发vue.js(demo)

最新推荐文章于 2024-04-20 21:04:55 发布
最新推荐文章于 2024-04-20 21:04:55 发布
阅读量234 收藏
点赞数
分类专栏： 小白分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ajax_A/article/details/105360169
版权

大致效果图就是这样的在这里插入图片描述
接下来上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: rgb(240, 240, 240);
        }

        .singleShop {
            background-color: white;
        }

        .shop-top {
            display: flex;
            border-bottom: solid 1px rgb(240, 240, 240);
            padding: 10px 0;
        }

        .shop-top h3 {
            font-weight: normal;
        }

        .isAllChoose .isStoreChoose,
        .isChoose .isGoodChoose {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: solid 1px rgb(211, 208, 208);
            border-radius: 50%;
            margin: 0 10px
        }

        .isChoose .isGoodChoose {
            margin: 38px 10px;

        }

        .goods {
            display: flex;
            margin: 10px 0;
        }

        .goodContent {
            display: flex;
        }

        .goodContent img {
            width: 100px;
            height: 100px;
        }

        .content {
            margin-left: 30px;
        }

        .content>p:nth-child(2) {
            margin: 10px 0;
            font-size: 14px;
            color: #777;
        }

        .shopCount {
            display: flex;
        }

        .shopCount p:first-child {
            color: rgb(81, 81, 235);
            margin-right: 20px;
        }

        .shopCount p:nth-child(2) span {
            border: solid 1px rgb(185, 185, 185);
            display: inline-block;
            line-height: 20px;
            width: 20px;
            text-align: center;
            margin-right: 5px;
            cursor: pointer;
        }

        .active {
            background-color: rgb(132, 132, 252);
        }
    </style>
</head>

<body>
    <div id="app">
        <single-Shop v-for="(shop , index) in tempArr" :key="index" :sigle="shop" @goodadd="Add" @goodreduce="Reduce"
            @goodchoose="Goodactive" @goodallchange="allchange">

        </single-Shop>
        <p>总计{{AllCount}}</p>
    </div>
    <script src="./vue.js"></script>
    <script type="text/x-template" id="singleShop">
        <div class="singleShop">
            <div class="shop-top">
                <div class="isAllChoose">
                    <span class="isStoreChoose" @click="allchoose($event,sigle.Shopid,sigle.isChoose)" :class="sigle.isChoose ? 'active' : ''"></span>
                </div>
                <h3>{{sigle.name}}</h3>
            </div>
            <div class="goods" v-for="(good , index) in sigle.shopArr" :key="index">
                <div class="isChoose">
                    <!-- <div class="isAllChoose"> -->
                        <span class="isGoodChoose" @click="isActive($event,sigle.Shopid,index,good.isChoose)" :class="good.isChoose ? 'active' : ''"></span>
                    <!-- </div> -->
                </div>
                <div class="goodContent">
                    <img :src="good.goodsImg" alt="">
                    <div class="content">
                        <p>{{good.goodsName}}</p>
                        <p><span>{{good.goodsAttrName}}</span> <span>评分：{{good.shopScore}}</span></p>
                        <div class="shopCount">
                            <p>{{good.deliveryMoney}}</p>
                            <p><span @click="reduce($event,sigle.Shopid,index,good.goodsCnt)">-</span><span>{{good.goodsCnt}}</span><span @click="add($event,sigle.Shopid,index,good.goodsCnt)">+</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>

    <script>
        Vue.component("singleShop", {
            template: "#singleShop",
            data() {
                return {
                    isChoose: false
                }
            },
            props: {
                sigle: {
                    type: Object,
                    default: null
                },
                count: {

                }
            },
            methods: {
                add(e, id, index, num) {
                    // console.log(this)
                    if (num >= 10) return;
                    num = num + 1;
                    var obj = {
                        id,
                        index,
                        num
                    }
                    this.$emit("goodadd", obj)
                    // console.log(id,index,num)
                },
                reduce(e, id, index, num) {
                    if (num <= 1) return;
                    num = num - 1;
                    var obj = {
                        id,
                        index,
                        num
                    }
                    this.$emit("goodreduce", obj)
                },
                isActive(e, id, index, isChoose) {

                    isChoose = !isChoose
                    var obj = {
                        id,
                        index,
                        isChoose
                    }
                    console.log(obj)
                    this.$emit("goodchoose", obj)
                },
                // singlechoose(e,id,index,isChoose){
                //     isChoose = !isChoose;
                //     console.log(isChoose)
                //     var obj = {
                //         id,
                //         index,
                //         isChoose
                //     }
                //     this.$emit("singlechange",obj)
                // },
                allchoose(e, id, isChoose) {

                    isChoose = !isChoose;
                    console.log(isChoose)
                    var obj = {
                        id,
                        isChoose
                    }
                    this.$emit("goodallchange", obj)
                }
            }
        })
        var app = new Vue({
            el: "#app",
            data: {
                // AllCount:0,
                // num:
                tempArr: [
                    {
                        name: "某某超市店铺",
                        num: 0,
                        Shopid: "01",
                        isChoose: false,
                        shopArr: [
                            {
                                deliveryMoney: "8.00",
                                freeMoney: "100.00",
                                goodsAttr: ["属性:默认"],
                                goodsAttrId: "1386",
                                goodsAttrName: "规格:10贴",
                                goodsCnt: 1,
                                goodsFodbean: "0.00",
                                goodsId: "509",
                                goodsImg: "./2.jpg",
                                goodsName: "茵妆玫瑰臻颜透润蚕丝面膜10贴",
                                goodsPrice: "1.00",
                                goodsStock: "10000",
                                shopScore: "1.00",
                                isChoose: false
                            }, {
                                deliveryMoney: "8.00",
                                freeMoney: "100.00",
                                goodsAttr: ["属性:默认"],
                                goodsAttrId: "1398",
                                goodsAttrName: "规格:10贴",
                                goodsCnt: 1,
                                goodsFodbean: "0.00",
                                goodsId: "510",
                                goodsImg: "2.jpg",
                                goodsName: "茵妆薰衣草水润细嫩蚕丝面膜10贴",
                                goodsPrice: "1.00",
                                goodsStock: "10000",
                                shopScore: "0.00",
                                isChoose: false
                            }]
                    },
                    {
                        name: "某某超市店铺",
                        num: 0,
                        Shopid: "02",
                        isChoose: false,
                        shopArr: [
                            {
                                deliveryMoney: "8.00",
                                freeMoney: "100.00",
                                goodsAttr: ["属性:默认"],
                                goodsAttrId: "1386",
                                goodsAttrName: "规格:10贴",
                                goodsCnt: 1,
                                goodsFodbean: "0.00",
                                goodsId: "509",
                                goodsImg: "./2.jpg",
                                goodsName: "茵妆玫瑰臻颜透润蚕丝面膜10贴",
                                goodsPrice: "1.00",
                                goodsStock: "10000",
                                shopScore: "1.00",
                                isChoose: false
                            }, {
                                deliveryMoney: "8.00",
                                freeMoney: "100.00",
                                goodsAttr: ["属性:默认"],
                                goodsAttrId: "1398",
                                goodsAttrName: "规格:10贴",
                                goodsCnt: 1,
                                goodsFodbean: "0.00",
                                goodsId: "510",
                                goodsImg: "2.jpg",
                                goodsName: "茵妆薰衣草水润细嫩蚕丝面膜10贴",
                                goodsPrice: "1.00",
                                goodsStock: "10000",
                                shopScore: "0.00",
                                isChoose: false
                            }]
                    }
                ],
            },
            computed: {
                AllCount() {
                    let num = 0;
                    for (store of this.tempArr) {
                        // console.log(store)
                        if (store.isChoose) {
                            for (good of store.shopArr) {
                                num += (good.deliveryMoney) * 1
                            }
                        } else {
                            for (good of store.shopArr) {
                                if (good.isChoose) {
                                    num += (good.deliveryMoney) * 1
                                }
                            }
                        }
                    }
                    return num;
                }
            },
            methods: {
                Add(obj) {
                    // console.log(obj)
                    for (store of this.tempArr) {
                        // console.log(obj)
                        if (store.Shopid == obj.id) {
                            store.shopArr[obj.index].goodsCnt = obj.num;
                            // vue.set()
                            store.shopArr[obj.index].deliveryMoney = (8.00 * obj.num).toFixed(2);
                            // console.log(store.shopArr[obj.index].deliveryMoney )
                        }
                    }
                },
                Reduce(obj) {
                    for (store of this.tempArr) {
                        if (store.Shopid == obj.id) {
                            store.shopArr[obj.index].goodsCnt = obj.num;
                            store.shopArr[obj.index].deliveryMoney = (8.00 * obj.num).toFixed(2);
                        }
                    }
                },
                Goodactive(obj) {
                    // console.log(obj)
                    for (store of this.tempArr) {

                        if (store.Shopid == obj.id) {

                            store.shopArr[obj.index].isChoose = obj.isChoose;
                            var num = 0;
                            for (good of store.shopArr) {
                                if (good.isChoose) {
                                    num++
                                }
                            }
                            if (num == store.shopArr.length) {
                                store.isChoose = true
                            } else {
                                store.isChoose = false;
                            }

                        }

                    }
                },
                allchange(obj) {
                    // console.log(obj)
                    for (store of this.tempArr) {
                        if (store.Shopid == obj.id) {
                            store.isChoose = obj.isChoose;
                            for (good of store.shopArr) {
                                good.isChoose = obj.isChoose;
                            }
                        }
                    }
                }

            }
        })
    </script>
</body>

</html>
一个小人儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuejs手把手教你写一个完整的购物车实例代码
10-19
主要介绍了vuejs-手把手教你写一个完整的购物车实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue购物车案例（源码）
m0_64970691的博客
10-11 5125
基于vue的购物车案例
基于SpringBoot+Vue+uniapp的网上商城的详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
hwx20010805的博客
04-20 979
🌞博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导✌🌞👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅Java精品实战案例《500套》
Vue.js-购物车案例
weixin_48137421的博客
06-07 2499
认识Vuejs-->Vue体验-->插值操作-->v-bind学习-->计算属性-->ES6相关知识-->事件监听-->条件判断-->循环遍历-->购物车案例
Vue制作购物车（完整版，附带详细代码讲解）
a2499797637的博客
09-20 2671
Vue制作完整功能购物车，超详细代码笔记
Vue实现购物车功能
2201_75321887的博客
06-03 6104
使用Vue组件完成一个带自动计算、删除、修改、选择、搜索、添加功能的购物车功能
Vue.js购物车demo
05-31
一个用vue.js做的购物车小demo，可根据自身需要进行增加删除修改等
vue.js 饿了么购物小demo
06-09
用最新的vue.js，better-scroll插件及组件之间值传递等实现饿了么购物店铺信息，商品分类分类与其对应商品滑动（联动）功能，商品评价，购物车（点击添加按钮，小球滑动等效果）功能demo
基于vue2vuex2实现的购物车demo
08-10
这个基于vue2vuex2的购物车demo是一个典型的前端应用案例，它展示了如何使用Vue.js构建组件，以及如何利用Vuex进行状态管理。通过结合Vuex的state、mutations、actions、getters以及localStorage，实现了购物车的...
Vue2全家桶+Vant搭建大型单页面商城项目。新蜂商城前后端分离版本-前端Vue项目源码.zip
10-21
Vue2全家桶指的是在开发基于Vue.js的项目时，使用一系列配套工具和技术栈，包括Vue Router（路由管理）、Vuex（状态管理）、Vue CLI（脚手架工具）以及Vuex ORM（数据持久化库）等，这些工具组合在一起，可以构建...
HTML+CSS+JS手机端购物车demo
10-18
在本项目"HTML+CSS+JS手机端购物车demo"中，我们将探讨如何利用前端技术栈，特别是HTML、CSS和JavaScript（以及Vue.js框架），来实现一个手机端的购物车功能。这个示例是一个获取JSON数据并使用Vue进行数据绑定和...
Vue实现购物车（非常简洁）
m0_58941767的博客
05-26 4920
废话不多说，直接上代码 效果图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale.
Vue2项目实战：尚品汇（三）商品详情界面、加入购物车成功界面、购物车界面
DogEgg_001的博客
10-09 4080
用户在搜索页点击商品图片就会跳转到商品详情页，商品信息根据商品id向服务器请求数据动态展示出。
Vue实现购物车
qq_45323410的博客
05-26 338
【代码】Vue实现购物车。
vue实现一个购物车全功能
shi15926lei的博客
07-09 3472
【代码】vue实现一个购物车全功能。
vue实现购物车功能
EvaY_Yang的博客
08-22 7770
vue实现购物车功能。我们利用了过滤器来实现“价格”和‘总价’的拼接，通过toFixed()方法实现保留两位小数，通过disabled属性来实现当数量小于等于1时，不再进行数量减法，通过计算属性computed来实现总价的计算，通过splice()方法来实现移除功能。
《Vue.js实战》购物车案例（包含全选、分类、删除）
Corlly的博客
08-09 3056
题目来源：《Vue.js实战》第五章 5.5 实战：利用计算属性、指令等知识开发购物车 参考链接：https://blog.csdn.net/XJ_18335388352/article/details/84777985 展示效果链接：https://loaln.github.io/vue_practice/html/shop.html 购物车案例实现效果​​​​​练习一： 在当前示例...
一个简洁的vue实现购物车功能
weixin_45910802的博客
09-01 209
【代码】一个简洁的vue实现购物车功能。
Vue.js购物车示例
飞蛾逐月
09-01 411
文章目录准备代码参考文献 准备 Vue.js 开发版本：https://cn.vuejs.org/js/vue.js 生产版本：https://cn.vuejs.org/js/vue.min.js 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值