|
<template>
?? ?<div>
?? ??? ?<table>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td><input type="checkbox" :checked="ALLchecked" @click="allChecked"></td>
?? ??? ??? ??? ?<td>书名</td>
?? ??? ??? ??? ?<td>价格</td>
?? ??? ??? ??? ?<td>数量</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr style="height: 60px;" v-for="(item,index) in list" :key="index">
?? ??? ??? ??? ?<td><input type="checkbox" :checked="item.checked" @click="alone(index)"></td>
?? ??? ??? ??? ?<td style="width: 60px;">{{item.bookName}}</td>
?? ??? ??? ??? ?<td style="width: 60px;">{{item.price}}</td>
?? ??? ??? ??? ?<td style="width: 100px;"><button @click="item.count--">-</button>{{item.count}}<button @click="item.count++">+</button></td>
?? ??? ??? ??? ?<td style="width: 60px;">删除</td>
?? ??? ??? ?</tr>
?? ??? ?</table>
?? ??? ?<div>合计：{{totalPrice}}</div>
?? ?</div>
</template>
<script>
?? ?import {
?? ??? ?mapState
?? ?} from 'vuex';
?? ?export default {
?? ??? ?name: 'shopcart',
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?ALLchecked: false,
?? ??? ??? ??? ?select: [],
?? ??? ??? ??? ?list: [{
?? ??? ??? ??? ??? ??? ?id: 1,
?? ??? ??? ??? ??? ??? ?bookName: '红楼梦',
?? ??? ??? ??? ??? ??? ?price: '20.00',
?? ??? ??? ??? ??? ??? ?count: 1
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?id: 2,
?? ??? ??? ??? ??? ??? ?bookName: '水浒传',
?? ??? ??? ??? ??? ??? ?price: '20.00',
?? ??? ??? ??? ??? ??? ?count: 1
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?id: 3,
?? ??? ??? ??? ??? ??? ?bookName: '三国演义',
?? ??? ??? ??? ??? ??? ?price: '20.00',
?? ??? ??? ??? ??? ??? ?count: 1
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?id: 4,
?? ??? ??? ??? ??? ??? ?bookName: '西游记',
?? ??? ??? ??? ??? ??? ?price: '20.00',
?? ??? ??? ??? ??? ??? ?count: 1
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?],
?? ??? ??? ?}
?? ??? ?},
?? ??? ?created() {
?? ??? ??? ?this.list.map(v => {
?? ??? ??? ??? ?v['checked'] = false
?? ??? ??? ?})
?? ??? ?},
?? ??? ?computed: {
?? ??? ??? ?totalPrice() {
?? ??? ??? ??? ?let total = 0;
?? ??? ??? ??? ?this.list.map((element)=> {
?? ??? ??? ??? ??? ?if (element.checked == true) {
?? ??? ??? ??? ??? ??? ?total += element.price * element.count;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?});
?? ??? ??? ??? ?return total
?? ??? ??? ?},
?? ??? ??? ?...mapState({
?? ??? ??? ??? ?count: state => state.count
?? ??? ??? ?}),
?? ??? ??? ?
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?allChecked() {
?? ??? ??? ??? ?this.ALLchecked = !this.ALLchecked;
?? ??? ??? ??? ?this.list.forEach(element => {
?? ??? ??? ??? ??? ?element.checked = this.ALLchecked
?? ??? ??? ??? ?});
?? ??? ??? ??? ?let list = this.list
?? ??? ??? ??? ?this.list = JSON.parse(JSON.stringify(list))
?? ??? ??? ?},
?? ??? ??? ?//单选
?? ??? ??? ?alone(index) {
?? ??? ??? ??? ?console.log(this.list)
?? ??? ??? ??? ?let list = this.list
?? ??? ??? ??? ?list[index].checked = !list[index].checked;
?? ??? ??? ??? ?this.list = JSON.parse(JSON.stringify(list))
?? ??? ??? ??? ?for(var i=0;i<this.list.length;i++){
?? ??? ??? ??? ??? ?var qw= this.list[i];
?? ??? ??? ??? ??? ?if(qw.checked==false){
?? ??? ??? ??? ??? ??? ?this.ALLchecked=false
?? ??? ??? ??? ??? ??? ?return
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?this.ALLchecked=true
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ?}
?? ?}
</script>
<style scoped>
?? ?table>tr>td {
?? ??? ?margin: 20px;
?? ?}
</style>
?
|