<template>
<div>
<ul>
<li class="bookItem" v-for="item in bookList" :key="item.id" style="text-align: left;">
<el-checkbox v-model="item.checked" @change="handleChecked(item)">
<img class="bookImg" :src="item.book_url" style="width: 100px; height: 100px;">
<h3>{{item.book_title}}</h3>
<span class="price">{{item.book_price}}</span>
<div @click.stop="func">
<el-input-number v-model="item.num" size="small" @change="handleChange" :min="1"></el-input-number>
</div>
</div>
</el-checkbox>
</li>
</ul>
</keep-alive>
<div class="cart">
<span></span>
<span class="highLight">{{mount}}</span>
<span></span>
<el-button type="primary" @click.native="onOrder" :disabled="disable"><router-link :to="{name:"Money",params:{data:this.sel}}"></router-link></el-button>
<!-- <el-button type="primary" @click.stop="onOrder"><router-link to="/book/bookMoney"></router-link></el-button> -->
</div>
</div>
</template>
<script>
export default {
data () {
return {
checkAll: false,
isIndeterminate: true,
breadCrumbList: [],
bookList: [],
radio: "0",
checkList: [],
num: 1,
mount: 0,
total: 0,
sel: [],
clickFlag: false,
disable: true
}
},
mounted () {
window.localStorage.checkList = "[object Object]"
this.bookList = [{
id: "0",
book_url: require("../assets/images/book1.jpg"),
book_title: "",
book_price: "39",
num: 0,
checked: false
},{
id: "1",
book_url: require("../assets/images/book2.jpg"),
book_title: "",
book_price: "45",
num: 0,
checked: false
},{
id: "2",
book_url: require("../assets/images/book3.jpg"),
book_title: "",
book_price: "59",
num: 0,
checked: false
}]
},
methods: {
func () {
},
handleChecked (val) {
//checkboxid
console.log(typeof this.checkList) //object?
if (this.checkList.indexOf(val.id) == -1)
this.checkList.push(val.id)
//
if (this.checkList.length > 0)
this.disable = false
//checkbox
if (val.checked === true) {
console.log(66)
this.mount += Number(val.num)
} else {
console.log(this.checkList)
console.log(typeof this.checkList)
// this.checkList.remove(val.id)
this.mount -= Number(val.num)
}
//checkboxidlocalStorage
window.localStorage.setItem("checkList",JSON.stringify(this.checkList))
},
</script>
