vue组件创建购物车列表

vue组件创建购物车列表

代码实现效果:
APP组件

vue组件创建todolist效果
<template>
  <div class="wai">
    <One ref="one"></One>
    <Two></Two>
  </div>
</template>

<script>
  import One from '@/components/One.vue';
  import Two from '@/components/Two.vue';
  import { EventBus } from '@/EventBus.js';
  export default {
    data(){
      return {
        zg:"",
      }
    },
    components:{
      One,
      Two
    },
    mounted(){
        EventBus.$on("fa",({list})=>{
          this.zg = list
        })
    },
    computed:{
    }
  }
</script>

<style  scoped>
.wai{
  width: 600px;
  height: 500px;
  margin: 0 auto;
}
</style>

input框输入子组件

<template>
    <div class="one">
        <input type="text" placeholder="输入名称" @keyup.enter="tian" v-model.trim="na">
        <input type="text" placeholder="输入价格" @keyup.enter="tian" v-model.trim="pr">
    </div>
</template>

<script>
    import { EventBus } from '@/EventBus.js';
    export default {
        data(){
            return {
                items:[],
                na:"",
				pr:""
            }
        },
       methods:{
            tian(){
                if(this.na==""||this.pr==""||isNaN(this.pr)){
                    return false
                }
                let obj = {
                    id:0,
                    name:this.na,
                    num:1,
                    price:this.pr,
					inp:false
                }
                this.items.push(obj)
                this.na=""
                this.pr=""
                EventBus.$emit("can",{
                    items:this.items
                })
            },
       }
    }
</script>

<style scoped>
.one{
    text-align: center  ;
}
input{
    width: 60px;
    height: auto;
    margin: 0 auto;
    padding-left: 10px;
    margin: 0 10px;
}
</style>

显示数据组件

<template>
    <div id="two">
        <ul>
            <li>
				<span>序号</span>
				<span>选项</span>
                <span>商品名</span>
                <span>数值</span>
                <span>价格</span>
				<span>看心情</span>
            </li>
            <li v-for="(item,index) in fen" :key="index">
				<span class="id">{{index+1}}</span>
				<span><input type="checkbox" class="inp" :checked="item.inp" @click="danx(item,index)"></span>
                <span class="name">{{item.name}}</span>
                <span>
					<div class="num">
					    <button @click="jia(item)">+</button>
					    <span>{{item.num}}</span>
					    <button @click="jian(item)">-</button>
					</div>
				</span>
                <span class="price">{{item.num*item.price}}</span>
				<span><button @click="shan(index)">删除</button></span>
            </li>
        </ul>
		<button @click="shang">上一页</button>
		<button v-for="(item,index) in ye" :class="item==dq?'page':''" @click="dq=item" >{{item}}</button>
		<button @click="xia">下一页</button>
		
		
		
		<ul class="uu">
			<li>
				<input type="checkbox" v-model="ck" @click="dck">全选
			</li>
			<li></li>
			<li></li>
			<!-- {{zong.lens}} {{zong.all}}-->
			<li>数量:{{zong.lens}}</li>
			<li>总价:{{zong.sum}}</li>
		</ul>
    </div>
</template>

<script>
    import { EventBus } from '@/EventBus.js';
    export default {
        data(){
            return {
                list:"",
				size:2,
				dq:1,
				ck:false,
				dx:0,
				dxjs:0
            }
        },
        mounted(){
            EventBus.$on("can",({items})=>{
                this.list=items
				// console.log(this.list)
            })
        },
        methods:{
            jia(v){
               v.num++
            },
            jian(v){
                if(v.num<=0){
                    v.num=0
                }else{
                    v.num--
                }
            },
			shang(){
				if(this.dq<=1){
					this.dq = 1
				}else{
					this.dq--
					console.log(this.dq)
				}
			},
			xia(){
				if(this.dq>=Math.ceil(this.list.length/this.size)){
					this.dq = Math.ceil(this.list.length/this.size)
				}else{
					this.dq++
				}
			},
			danx(v,k){
				if(v.inp==true){
					
					v.inp = false
					this.ck = false
				}else{
					v.inp = true
					for(var i=0;i<=this.list.length-1;i++){
						if(this.list[i].inp==true){
							if(this.dxjs>=this.list.length){
								this.dxjs = 1
							}else{
								this.dxjs+=1
							}
							if(this.dxjs==this.list.length){
								this.ck = true;
							}
						}else{
							this.dxjs = 0;
							this.ck = false
						}
					}
				}
			},
			dck(){
				if(this.ck==true){
					for(var i=0;i<this.list.length;i++){
						this.list[i].inp = !this.ck;
					}
					console.log(this.list.inp)
					console.log(this.list)
				}else{
					for(var i=0;i<this.list.length;i++){
						this.list[i].inp = !this.ck;
					}
					
				}
			},
			shan(a){
				if(this.list[a].inp == true){
					this.list.splice(a,1)
				}
			},
			
        },
		computed:{
			ye(){
				return Math.ceil(this.list.length/this.size)
			},
			fen(){
				let after = (this.dq-1)*this.size
				let end = after+this.size
				return this.list.slice(after,end)
			},
			zong(){
				if(this.list == ""){
					return false;
				}
			  let shops = this.list.filter(v=> v.inp)
			  var zo = 0;
			  let le = 0;
			  for(var i=0;i<=shops.length-1;i++){
				// let le = shops[i].num
				le += shops[i].num;
			    zo+=le*shops[i].price
			  } 
			  console.log(zo)	
			  console.log(le)
			  return {lens:le,sum:zo}
			},
			
		},
        updated(){
            EventBus.$emit("fa",{
                list:this.list
            })
        },
    }
</script>

<style scoped>
	.uu{
			width: 600px;
			height: auto;
		}
	.uu>li{
		width: 100px;
		height: 40px;
		float: left;
		text-align: center;
		list-style: none;
		/* background: pink; */
	}
li{
    width: 600px;
    height: 40px;
    list-style: none;
}
.inp{
	float: left;
}
.page{
	background-color: blue;
}
li>span{
	width: 100px;
	height: 20px;
	display: inline-block;
	text-align: center;
	float: left;
}
li>span>input{
	margin-left:45px ;
}
#two{
    text-align: center;
}
</style>

EventBus.js中间传输文件

import Vue from "vue";

export const EventBus = new Vue();