js之购物车代码逻辑

水深无声 2022-09-13 04:22 236阅读 0赞

<template>
    	<div class="about">
    		<div>
    			<table style="width: 1000px;">
    				<tr>
    					
    				</tr>
    				<tr>
    					<th><input type="checkbox" @change="handleChange()" v-model="flag"></th>
    					<th>序号</th>
    					<th>名称</th>
    					<th>价格</th>
    					<th>数量</th>
    					<th>操作</th>
    				</tr>
    				<tr v-for="item in dataList">
    					<td><input type="checkbox" v-model="checkgroup" :value="item" @change="handleChange1()"></td>
    					<td>{
       {item.id}}</td>
    					<td>{
       {item.name}}</td>
    					<td>{
       {item.price}}</td>
    					<td>
    						<button @click="jian(item)">-</button>
    						{
       { item.number }}
    						<button @click="item.number++">+</button>
    					</td>
    					<td>
    						<button @click="tel">删除</button>
    					</td>
    				</tr>
    			</table>
    			checkgroup:{
       { checkgroup }}
    			<p>商品总价：{
       { getsum() }} 元</p>
    			
    		</div>
    	</div>
    </template>
    <script type="text/javascript">
    	export default {
    		data() {
    			return {
    				checkgroup: [],
    				flag: false,
    				dataList: [{
    						'id': 1,
    						'name': '铅笔',
    						'price': 1,
    						'number': 100
    					},
    					{
    						'id': 2,
    						'name': '文具盒',
    						'price': 5,
    						'number': 25
    					},
    					{
    						'id': 3,
    						'name': '乒乓球',
    						'price': 10,
    						'number': 30
    					},
    					{
    						'id': 4,
    						'name': '篮球',
    						'price': 60,
    						'number': 0
    					},
    					{
    						'id': 5,
    						'name': '固体胶',
    						'price': 0.5,
    						'number': 500
    					},
    					{
    						'id': 6,
    						'name': '漫画',
    						'price': 10.5,
    						'number': 3
    					},
    				]
    			}
    		},
    		methods: {
    			// 全选全不选
    			handleChange() {
    				console.log('改变了', this.flag)
    				if (this.flag) {
    					this.checkgroup = this.dataList
    				} else {
    					this.checkgroup = []
    				}
    			},
    			// 反选
    			handleChange1() {
    				console.log('handleChange1 判断是不是都勾选或有一个未勾选')
    				if (this.checkgroup.length === this.dataList.length) {
    					this.flag = true
    				} else {
    					this.flag = false
    				}
    			},
    			// 总价/*  */
    			getsum() {
    				var sum = 0
    				for (var i in this.checkgroup) {
    					sum += this.checkgroup[i].price * this.checkgroup[i].number
    				}
    				return sum
    			},
    			// 数量减
    			jian(item) {
    				console.log("减")
    				var number = item.number--
    				if (number === 1) {
    					item.number = 1
    				}
    			},
    			tel(t) {
    				console.log("删除")
    			}
    		}
    	}
    </script>