自學Vue的第06天：實戰之購物車

Koko君發表於2019-06-13
Vue

原始碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue學習</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <style type="text/css">
        span {
            cursor: pointer;
        }
    </style>
</head>

<body>

<div id="app">
    <div>
        課程：<input type="text" name="" v-model='course'>
        價錢：<input type="text" name="" v-model='price'>
        <button @click='addcourse'>新增商品</button>
    </div>
    <ul>
        <li v-for='(list,index) in classlist'>
            課程名稱：{{list.text}}---價格:{{list.price}}
            <button @click='addtochat(index)'>新增到購物車</button>
        </li>
    </ul>
    <chat :chatarr='chatarr'></chat>
</div>
<script type="text/javascript">
    //購物車元件
    var Chat = {
        props: ['chatarr'],
        template: `
                <div>
                    購物車
                    <table border="1">
                        <tr>
                            <th>選中</th>
                            <th>課程</th>
                            <th>數量</th>
                            <th>價格</th>
                        </tr>
                        <tr v-for="(chat,index) in chatarr">
                            <td><input type="checkbox" name="" v-model='chat.active'></td>
                            <td>{{chat.text}}</td>
                            <td>
                                <span @click='reducecount(index)'>-</span>
                                {{chat.count}}
                                <span @click='addcount(index)'>+</span>

                            </td>
                            <td>{{chat.count * chat.price}}</td>
                        </tr>
                        <tr>
                            <td colspan='2'>選中的課程：{{activeCount}}/{{count}}</td>
                            <td colspan='2'>需付金額：{{totalpirce}}</td>
                        </tr>
                    </table>
                </div>

            `,
        //計算屬性
        computed: {
            //已選中課程
            activeCount() {
                return this.chatarr.filter(v => v.active).length
            },
            //購物車存在多少項課程
            count() {
                return this.chatarr.length
            },
            //總價
            totalpirce() {
                let total = 0
                this.chatarr.forEach(v => {
                    if (v.active) {
                        total += v.price * v.count
                    }
                })
                return total
            }
        },
        watch: {
            //監聽購物車陣列，每當監聽到改變就存進本地儲存做資料持久化
            chatarr: {
                handler() {
                    window.localStorage.setItem('chat', JSON.stringify(this.chatarr))
                },
                deep: true
            }
        },
        methods: {
            //增加購物車商品數量
            addcount(index) {
                this.chatarr[index].count++
            },
            //減少購物車商品數量
            reducecount(index) {
                if (this.chatarr[index].count > 1) {
                    this.chatarr[index].count--
                } else {
                    if (window.confirm(`是否刪除${this.chatarr[index].text}?`)) {
                        this.chatarr.splice(index, 1)
                    }
                }
            }
        }
    }

    new Vue({
        el: '#app',
        components: {Chat},
        data() {
            return {
                classlist: [
                    {text: 'springcloud', price: 20},
                    {text: 'vue', price: 30},
                    {text: 'js', price: 40},
                    {text: 'php', price: 50},
                ],
                course: '',
                price: '',
                chatarr: []
            }
        },
        methods: {
            addcourse() {
                this.classlist.push({text: this.course, price: this.price});
                this.course = '';
                this.price = '';
            },
            addtochat(index) {
                const goods = this.classlist[index];
                const result = this.chatarr.find(v => v.text == goods.text);
                if (result) {
                    result.count += 1;
                } else {
                    this.chatarr.push({...goods, count: 1, active: true});
                }
            }

        },
        created() {
            //利用本地儲存做資料持久化  獲取本地儲存資料
            this.chatarr = JSON.parse(window.localStorage.getItem('chat'))
        }
    })
</script>
</body>

</html>
複製程式碼

自學Vue的第06天：實戰之購物車


相關文章