购物商城系统设计与实现总结_购物车

用户进入购物车页面对其进行查看和管理。系统在商品详情页提供了加入购物车按钮，用户在浏览时遇到自己心仪的商品，但又暂时不想购买或犹豫不决，可以将其加入购物车以便二次查询。

在购物车里中点击商品可以进入对应商品详情页再次浏览，除此之外还提供了全选，单条/选中删除，结算等功能。购物车内标题栏有全选框，显示的每条商品信息前也有勾选框，点击批量删除或结算可以一次性对选中的商品进行对应功能处理。购物车界面如图

 删除单条产品，当用户点击某条商品信息后对应的红色删除按钮时，即可删除对应商品。

删除所有选中的产品。批量删除，是通过全选按钮和商品勾选框结合实现。

结算后，结算的商品都要加入个人订单数据表。

点击查看详情。当用户点击某条商品信息时，跳转到对应详情页供用户查看详细信息。

对应代码： 

<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>