vue实现简单的移动端购物车案例

水深无声 2021-12-10 05:41 395阅读 0赞

通过vue实现一个简单的移动端购物车案例，包括显示商品基本信息，添加商品数量，选择及全选商品，进行计算价钱、购买或删除等操作。效果及演示如下图

![20190715165834908.gif][]

###  **实现步骤** ###

一、首先将需要用到的vue.js文件准备，或直接使用cdn地址

二、然后对页面整体进行布局和样式完善，主要包括头部、列表项和尾部确认提交

<body>
            <div id="app">
                <p>购物车</p>
                <p>共{
       {shoppingList.length}}件宝贝</p>
                <div class="shoppingMain">
                    <div class="shoppingItem" v-for="(item,index) in shoppingList">
                        <div class="selectCircle" :class="{checked:item.isSelect}" @click="selectGoods(item)"></div>
                        <div class="shoppingImg">
                            <img :src="item.imgurl" alt="">
                        </div>
                        <div class="itemRight">
                            <p class="title">{
       {item.title}}</p>
                            <p>{
       {item.color}}</p>
                            <div class="numAndMoney">
                                <p>￥{
       {item.money}}</p>
                                <div class="numberControl">
                                    <a class="btn" @click="numDel(item,index)">-</a>
                                    <input type="text" v-model="item.num" readonly="readonly">
                                    <a class="btn" @click="numAdd(item,index)">+</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottomMain">                
                    <div class="selectCircle" :class="{checked:allSelect}" @click="allGoodsSelect"></div>
                    <span style="padding: 10px">全选</span>
                    <button class="bottombtn2" @click="delGoods">删除</button>  
                    <button class="bottombtn1" @click="buyGoods">￥{
       {sum}} 结算</button>                
                </div>
            </div>
        </body>

/* 样式设置 */
                body{
                    margin: 0;
                    padding: 0;
                    background: #e0dada;
                }
                button{
                    outline: none;
                    border-color: transparent;
                    box-shadow:none;
                }
                #app{
                    margin: 0;
                    padding: 0;
                    width: 100%;
                   
                }
                .shoppingMain{
                    width: 100%;
                    height: auto;
                    margin-bottom: 70px;
                }
                .shoppingItem{
                    width: 96%;
                    margin-left: 2%;
                    margin-bottom: 10px;
                    background: #fff;
                    border-radius:5px;
                    display: flex;
                }
                .selectCircle{
                    width: 15px;
                    height: 15px;
                    border: 1px solid #a7a5a5;
                    border-radius: 50%;
                    margin: auto 0px auto 10px;
                }
                .shoppingImg{
                    width: 100px;
                    height: 100px;
                    padding: 10px;
                }
                .shoppingImg img{
                    height: 100%;
                    width: 100%;
                }
                .itemRight{
                    font-size: 10px;
                    width: 200px;
                }
                .title{
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .numAndMoney{
                    display: flex;
                }
                input{
                    width: 40px;
                    height: 20px;
                    margin: 10px;
                    text-align: center;
                }
                .numberControl{
                    position: absolute;
                    right: 30px;
                }
                .bottomMain{
                    position: fixed;
                    width: 100%;
                    height: auto;
                    border: 1px #a7a5a5 solid;
                    bottom: 0;
                    left: 0;
                    background: #fff;
                    display: flex;
                    padding: 10px;
                }
                .bottombtn1{
                    width:auto;
                    height: 30px;
                    border: none;
                    color: #fff;
                    background-color: #e26411;
                    border-radius: 25px;
                    margin: 5px 0 0 20px;
                }
                .bottombtn2{
                    width:70px;
                    height: 30px;
                    border: none;
                    color: #fff;
                    background-color: #cecac7;
                    border-radius: 25px;
                    margin: 5px 0 0 80px;
                }
                .checked{
                    background: #e26411;
                    border: 1px solid rgba(0, 0, 0, 0)
                }

三、对数据进行模拟和操作

## **完整代码** ##

<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>购物车</title>
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
            <style>
                body{
                    margin: 0;
                    padding: 0;
                    background: #e0dada;
                }
                button{
                    outline: none;
                    border-color: transparent;
                    box-shadow:none;
                }
                #app{
                    margin: 0;
                    padding: 0;
                    width: 100%;
                   
                }
                .shoppingMain{
                    width: 100%;
                    height: auto;
                    margin-bottom: 70px;
                }
                .shoppingItem{
                    width: 96%;
                    margin-left: 2%;
                    margin-bottom: 10px;
                    background: #fff;
                    border-radius:5px;
                    display: flex;
                }
                .selectCircle{
                    width: 15px;
                    height: 15px;
                    border: 1px solid #a7a5a5;
                    border-radius: 50%;
                    margin: auto 0px auto 10px;
                }
                .shoppingImg{
                    width: 100px;
                    height: 100px;
                    padding: 10px;
                }
                .shoppingImg img{
                    height: 100%;
                    width: 100%;
                }
                .itemRight{
                    font-size: 10px;
                    width: 200px;
                }
                .title{
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .numAndMoney{
                    display: flex;
                }
                input{
                    width: 40px;
                    height: 20px;
                    margin: 10px;
                    text-align: center;
                }
                .numberControl{
                    position: absolute;
                    right: 30px;
                }
                .bottomMain{
                    position: fixed;
                    width: 100%;
                    height: auto;
                    border: 1px #a7a5a5 solid;
                    bottom: 0;
                    left: 0;
                    background: #fff;
                    display: flex;
                    padding: 10px;
                }
                .bottombtn1{
                    width:auto;
                    height: 30px;
                    border: none;
                    color: #fff;
                    background-color: #e26411;
                    border-radius: 25px;
                    margin: 5px 0 0 20px;
                }
                .bottombtn2{
                    width:70px;
                    height: 30px;
                    border: none;
                    color: #fff;
                    background-color: #cecac7;
                    border-radius: 25px;
                    margin: 5px 0 0 80px;
                }
                .checked{
                    background: #e26411;
                    border: 1px solid rgba(0, 0, 0, 0)
                }
            </style>
        </head>
        <body>
            <div id="app">
                <p>购物车</p>
                <p>共{
       {shoppingList.length}}件宝贝</p>
                <div class="shoppingMain">
                    <div class="shoppingItem" v-for="(item,index) in shoppingList">
                        <div class="selectCircle" :class="{checked:item.isSelect}" @click="selectGoods(item)"></div>
                        <div class="shoppingImg">
                            <img :src="item.imgurl" alt="">
                        </div>
                        <div class="itemRight">
                            <p class="title">{
       {item.title}}</p>
                            <p>{
       {item.color}}</p>
                            <div class="numAndMoney">
                                <p>￥{
       {item.money}}</p>
                                <div class="numberControl">
                                    <a class="btn" @click="numDel(item,index)">-</a>
                                    <input type="text" v-model="item.num" readonly="readonly">
                                    <a class="btn" @click="numAdd(item,index)">+</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottomMain">
                    <div class="selectCircle" :class="{checked:allSelect}" @click="allGoodsSelect"></div>
                    <span style="padding: 10px">全选</span>
                    <button class="bottombtn2" @click="delGoods">删除</button>  
                    <button class="bottombtn1" @click="buyGoods">￥{
       {sum}} 结算</button>                
                </div>
            </div>
    
            <script>      
                var vm = new Vue({
                    el:'#app',
                    data:{
                        shoppingList:[
                            {
                                imgurl:"img/item.jpg",
                                title:"女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包",
                                color:"粉色",
                                money:149,
                                num:"1",
                                isSelect:false,
                            },
                            {
                                imgurl:"img/item.jpg",
                                title:"女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包",
                                color:"粉色",
                                money:149,
                                num:"1",
                                isSelect:false,
                            },
                            {
                                imgurl:"img/item.jpg",
                                title:"女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包",
                                color:"粉色",
                                money:149,
                                num:"1",
                                isSelect:false,
                            },
                            {
                                imgurl:"img/item.jpg",
                                title:"女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包",
                                color:"粉色",
                                money:149,
                                num:"1",
                                isSelect:false,
                            },
                            {
                                imgurl:"img/item.jpg",
                                title:"女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包女包",
                                color:"粉色",
                                money:149,
                                num:"1",
                                isSelect:false,
                            },
                        ],
                        allSelect:false,
                        sum:0
                    },
                    methods:{
                        selectGoods(item){
                            item.isSelect = !item.isSelect
                            this.allSelect = false
                            if(item.isSelect == true){
                                this.sum = this.sum+(item.money*item.num)
                            }else{
                                this.sum = this.sum-(item.money*item.num)
                            }
                        },
                        allGoodsSelect(){
                            this.allSelect = !this.allSelect
                            if(this.allSelect == true){
                                this.sum=0
                                for(var i=0;i<this.shoppingList.length;i++){
                                    this.shoppingList[i].isSelect = true;
                                    this.sum = this.sum+(this.shoppingList[i].money*this.shoppingList[i].num)
                                }
                            }else{
                                for(var i=0;i<this.shoppingList.length;i++){
                                    this.sum = this.sum-(this.shoppingList[i].money*this.shoppingList[i].num)
                                    this.shoppingList[i].isSelect = false;
                                }
                            }
                        },
                        numAdd(item,index){
                            item.num++
                            if(item.isSelect == true){
                                this.sum = this.sum+item.money
                            }
                        },
                        numDel(item,index){
                            item.num--
                            if(item.isSelect == true){
                                this.sum = this.sum-item.money
                            }
                            if(item.num == 0){
                                this.shoppingList.splice(index,1)
                            }
                        },
                        buyGoods(){
                            alert("购买成功,共花费"+this.sum+"元")
                        },
                        delGoods(){
                            this.sum = 0;
                            for(var i=0;i<this.shoppingList.length;i++){
                                if(this.shoppingList[i].isSelect){
                                    this.shoppingList.splice(i,1)
                                    i--
                                }
                            }
                            if(this.allSelect){
                                this.shoppingList.splice(0,this.shoppingList.length);
                                this.allSelect = false
                            }
                        }
                    }
                })
            </script>
        </body>
    </html>

[20190715165834908.gif]: /images/20211209/5aeca61634964dcdbce12802e6b06545.png