購物商城系統設計與實現總結_購物車

用戶進入購物車頁面對其進行查看和管理。系統在商品詳情頁提供了加入購物車按鈕，用戶在瀏覽時遇到自己心儀的商品，但又暫時不想購買或猶豫不決，可以將其加入購物車以便二次查詢。

在購物車裏中點擊商品可以進入對應商品詳情頁再次瀏覽，除此之外還提供了全選，單條/選中刪除，結算等功能。購物車內標題欄有全選框，顯示的每條商品信息前也有勾選框，點擊批量刪除或結算可以一次性對選中的商品進行對應功能處理。購物車界面如圖

 刪除單條產品，當用戶點擊某條商品信息後對應的紅色刪除按鈕時，即可刪除對應商品。

刪除所有選中的產品。批量刪除，是通過全選按鈕和商品勾選框結合實現。

結算後，結算的商品都要加入個人訂單數據表。

點擊查看詳情。當用戶點擊某條商品信息時，跳轉到對應詳情頁供用戶查看詳細信息。

對應代碼： 

<template>
    <div id="ShoppingCart">
        <div class="ShoppingCart_box">
            <h4 class="cart-title">購物清單</h4>
            <table>
                <!-- 標題欄 -->
                <tr class="product_title">
                    <td class="t_check" onselectstart="return false">
                        <span class="check_box" @click="selectProduct(isSelectAll)">
                            <i class="iconfont icon-duigou1" :class="{'check-true':isSelectAll}"></i>
                        </span>全選
                    </td>
                    <td colspan="2"  class="t_name">名稱</td>
                    <td class="t_price">單價(元)</td>
                    <td class="t_quantity">數量</td>
                    <td class="t_total">總價(元)</td>
                    <td class="t_delete">操作</td>
                </tr>
                <!-- 商品欄 -->
                <tr :key="index" v-for="(item,index) in productList">
                    <td>
                        <span class="check_box" @click='item.select=!item.select'>
                            <i class="iconfont icon-duigou1" :class="{'check-true':item.select}"></i>
                        </span>
                    </td>
                    <td colspan="2" class="product_data" @click="viewdetails(item.proid,item.category,'購物車')">
                        <div class="p-img">
                            <img :src="item.img" class="p_img" alt="">
                        </div>
                        <div class="p_info">
                            <p>{{item.name}}</p>
                            <p>規格：{{item.size}}</p>
                        </div>
                    </td>
                    <td class="p_price">￥{{item.price}}</td>
                    <!-- 調整數量 -->
                    <td class="p_quantity">
                        <input type="button" value="-" @click="subQuantity(item)">
                        <input class="quantity" type="text" v-model="item.quantity">
                        <input type="button" value="+" @click="addQuantity(item)">
                    </td>
                    <td class="p_total">￥{{item.price*item.quantity}}</td>
                    <td>
                        <button class="p_delete" @click='deleteOneProduct(index,item.id)'>刪除</button>
                    </td>
                </tr>
                <!-- 購物車爲空時顯示 -->
                <tr>
                    <td colspan="7" v-show="productList == undefined || productList.length <= 0" class="cartEmpty">
                        購物車什麼也沒有，<span @click="$router.push({path:'/home/first'})">去逛逛&gt;</span>
                    </td>
                </tr>
            </table>
            <!-- 統計結算行 -->
            <div class="statistic">
                <button class="check_delete" @click='deleteCheckProduct'>
                    <i class="iconfont icon-shanchu"></i>刪除勾選商品
                </button>
                <button class="buy" @click="displayPay = true">去結算</button>
                <div class="div_total">
                    <!-- 數量和總金額由計算屬性得出 -->
                    <span class="total_num">{{productTotal.quantity}}件商品總計：</span>
                    <span class="total_price">￥{{productTotal.totalPrice}}元</span>
                </div>
            </div>
            <!-- 支付提示框 -->
            <div class="payAlert" :class="{payShow:displayPay}">
                <h5>結算確認</h5>
                <img src="../../assets/imgs/pay.jpg" alt="">
                <div class="payBtns">
                    <button class="payCancel" @click="displayPay = false">取消</button>
                    <button class="payConfirm" @click="settle()">確認支付</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getLoginData,getcoData,deletecoData,batchJoin} from '@/api/index'
//訂單號和創建時間函數封裝
import {getTime,getNumber} from '@/assets/js/reuse'
// 混入屬性，頁面跳轉方法複用
import {productInfoMixin} from '@/assets/js/mixin'
export default {
    name: 'ShoppingCart',
    // 混入對象
    mixins:[productInfoMixin],
    data(){
        return {
            productList:[],
            userdata:[],
            displayPay:false
        }
    },
    mounted(){
        // 獲取商品數據
        this.getcartList()
        // 獲取用戶數據
        this.getUserdata()
    },
    computed:{
        // 檢測是否全部勾選
        isSelectAll() {
            // 如果數組爲空，返回false
            if(this.productList == undefined || this.productList.length <= 0){
                return false
            }else{
                // 如果數組中中每一條數據的select都爲true,才返回true,否則返回false
                return this.productList.every((value) => {return  value.select});
            }
        },
        // 計算選擇商品的總數和總價
        productTotal() {
            // 獲取list中select爲true的數據,即被勾選了的商品
            var List_true = this.productList.filter((item) => {return item.select});
            var totalPrice = 0;
            for (var i = 0; i < List_true.length; i++) {
                // 總價 = 每種商品的數量*單價
                totalPrice += List_true[i].quantity * List_true[i].price;
            }
            // 選擇產品的件數:List_true.lenth，總價:totalPrice
            return{quantity:List_true.length,totalPrice:totalPrice}
        }
    },
    methods:{
        //給數組元素添加屬性
        addAttribute(){
            //爲productList添加select（用於判定是否勾選，初始值爲false,即不選中）
            this.productList.map((item) =>{    //map:'鍵值對'
                this.$set(item,'select',false)      //往item添加select屬性，默認爲false
            })
        },
        // 全選與取消全選
        selectProduct(_isSelect){
            //遍歷productList,全部取反
            for (var i = 0; i < this.productList.length; i++) {
                this.productList[i].select = !_isSelect
            }
        },
        //數量-
        subQuantity(item){
            if(item.quantity > 1){
                item.quantity--
            }
        },
        //數量+
        addQuantity(item){
            //請求商品庫存，傳入商品類別，id
            getProInfo({
                colname:'quantity',
                formname:'productlist',
                id:item.proid
            })
            .then((res) =>{
                // 計算庫存是否足夠
                if(item.quantity < res[0].quantity){
                    item.quantity++
                }
            })
        },
        //刪除單條產品
        deleteOneProduct(index,id){
            //根據索引刪除productList的記錄
            this.productList.splice(index,1);
            let idlist = []
            idlist.push(id)
            this.deletecart(idlist)
        },
        //刪除所有選中的產品
        deleteCheckProduct(){
            let idlist = []
            // 將所有選中的商品id存入數組
            this.productList = this.productList.filter((item) => {
                if(item.select == true){
                    idlist.push(item.id)
                }
                return item.select == false
            })
            this.deletecart(idlist)
        },
        // 點擊確認，選中商品一次性購買，將所有選中商品加入個人訂單
        settle(){
            // 支付確認框隱藏
            this.displayPay = false
            // 存放勾選商品信息
            let selectList= []
            // 存放勾選商品id
            let idlist = []
            // 遍歷整個購物車數據
            this.productList = this.productList.filter((item) => {
                if(item.select == true){
                    // 將dataProcess處理好的這條信息加入數組
                    selectList.push(this.dataProcess(item))
                    idlist.push(item.id)
                }
                return item.select == false
            })
            // 選中結算的商品，從購物車刪除
            this.deletecart(idlist)
            // 批量加入個人訂單
            batchJoin(selectList)
            .then((res) => {
                alert('勾選商品購買成功，已加入訂單')
            })
            .catch(error => {
                alert('批量添加失敗')
            })
        },
        //將信息處理爲一個符合訂單數據表的數組格式
        dataProcess(item){
            let proarr = Object.values(item)
            // 將商品id置空，在訂單表內會自增
            proarr[0] = 0
            // 將最後一個select屬性去除
            proarr.splice(-1)
            // 加入狀態(status)值,結算後應爲待收貨即1
            proarr.push(1)
            // 加入收貨人信息
            proarr.push(this.userdata.name,this.userdata.phone,this.userdata.place)
            //獲取訂單創建時間
            let timedata = getTime()
            //訂單時間
            proarr.push(timedata.time)
            //訂單號編寫
            let orderNumber = getNumber(timedata.orderNumTime,item.proid,item.category)
            //把這一條訂單信息加入數組
            proarr.push(orderNumber)
            return proarr
        },
        // 獲取購物車數據
        getcartList(){
            getcoData({
                formname:'shoppingcart',
                username:sessionStorage.getItem("userName")
            })
            .then((res) => {
                this.productList = res
                // 添加用於判斷勾選的屬性
                this.addAttribute()
            })
            .catch(error => {
                alert('獲取失敗')
            })
        },
        //刪除購物車數據
        deletecart(idlist){
            deletecoData({
                formname:'shoppingcart',
                idlist:idlist
            })
            .then((res) => {
                // // 重新獲取購物車數據
                // this.getcartList()
            })
            .catch(error => {
                alert('刪除失敗')
            })
        },
        // 獲取用戶數據作爲默認收貨人
        getUserdata(){
            let userName = sessionStorage.getItem("userName")
            getLoginData({username: userName})
            .then(res => {
                this.userdata = res[0]
            })
        }
    }
}
</script>

<style scoped>
/* 圖片名稱處樣式訂單和購物車相同，所以複用 */
@import '../../assets/css/cartorder.css';
/* 支付提示框 */
@import '../../assets/css/payAlert.css';
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#ShoppingCart{
    width: 100%;
}
.ShoppingCart_box{
    border: 1px solid #aaa;
    border-top: 2px solid rgb(131, 131, 226);
    width: 1020px;
    margin: 50px auto;
    position: relative;
}
.cart-title{
    font-size: 25px;
    color: #66b1ff;
    text-align: center;
    line-height: 60px;
}
table{
    border-collapse: collapse;
}
/* 標題欄 */
.product_title{
    background-color: #f7f7f7;
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
}
.product_title td{
    text-align: center;
    height: 38px;
    line-height: 38px;
}
.t_check{
    width: 100px;
}
.t_name{
    width: 350px;
}
.t_price{
    width: 100px;
}
.t_quantity{
    width: 210px;
}
.t_total{
    width: 120px;
}
.t_delete{
    width: 140px;
}
table .check_box{
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    border: 1px solid #e3e3e3;
    background-color: white;
    margin: 8px 5px 8px 15px;
    position: relative;
}
.product_title td .icon-duigou1{
    line-height: 20px;
}
.icon-duigou1{
    color: red;
    margin-left: 2px;
    display: none;
}
.check-true{display: block;}
/* 商品欄 */
.p_price{
    text-align: center;
    color: #e92846;
}
/* 調整數量的按鍵 */
.p_quantity{
    padding: 0 30px;
}
table input{
    border: #e3e3e3 solid 1px;
    padding: 5px 10px;
    color: #848484;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
}
.quantity{
    width: 30px;
    color: black;
    text-align: center;
    font-size: 14px;
}
.p_total{
    text-align: center;
    color: #e92846;
}
.p_delete{
    width: 80px;
    height: 30px;
    background-color: #fd3729;
    border: none;
    margin: 0 30px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
}
/* 購物車爲空時提示字 */
.cartEmpty{
    width: 1005px;
    height: 100px;
    text-align: center;

}
.cartEmpty span{
    color: blue;
    cursor: pointer;
}
/* 統計結算行 */
.statistic{
    height: 40px;
    background-color: #eeecec;
}
.check_delete{
    font-size: 14px;
    color: #333;
    padding: 0 10px;
    margin-top: 10px;
    cursor: pointer;
    border: none;
}
.buy,.div_total{
    float: right;
}
.div_total{
    margin-top: 10px;
}
.total_price{
    color: #e92846;
}
.buy{
    margin-left: 20px;
    width: 100px;
    height: 40px;
    border: none;
    color: #fff;
    font-size: 18px;
    text-align: center;
    background-color: #ff3300;
    border: 1px solid #eeecec;
    cursor: pointer;
}
/* 結算提示框 */
.payAlert{
    height: 280px;
    top: -400px;
    left: 300px;
}
.payShow{
    top: 130px;
    left: 300px;
}
</style>