vue3微信公众号商城项目实战系列（9）购物车页面

本篇显示购物车中的商品，购物车表结构如下，我们通过接口服务抓取登录用户的购物车信息。

表名	字段	功能
shoppingcart	cart_id (int) 购物车编号 user_id (int) 用户编号 goods_id (int) 商品编号 goods_name (varchar) 商品名称 photo (varchar) 商品图片 price (decimal) 价格 qty (int) 数量	购物车表

页面效果如下：

先在 app.js 中增加查询购物车商品、创建订单的接口方法，如下：

export function cartQuery(data) {
  return request({
    url: '/cart/query', 
    method: 'post',
    data: data
  })
}
 
export function orderBuild(data) {
  return request({
    url: '/order/build', 
    method: 'post',
    data: data
  })
}

下面来看 cart.js 的代码

布局代码块：

<template>
    <div class="cart">
        <div class="cart-list">
            <div class="cart-item" v-for="(item,index) in cartList">
                <div><img class="cart-img" :src="item.photo" /></div>
                <div class="cart-info">
                    <div><span class="cart-name">{{ item.goodsName }}</span></div>
                    <span class="cart-price">￥{{ item.price }}元</span>
                    <div class="cart-qty">
                        <input class="txt_qty" type="number" v-model="item.qty" @blur="onModifyCart(item.goodsId, index)" />
                        <span class="cart-price">{{ item.price * item.qty }} 元</span>
                    </div>  
                </div>
            </div> 
        </div>  
        <div class="cart-total">
            <span class="cart-price">总价 : {{ totalAmt }}元</span>
            <input class="btn_order" type="button" value="下单" @click="onOrder" />
        </div>

        <TabBar name="cart" />
    </div>    
</template>

使用 v-for 遍历数组 cartList ，onModifyCart 是输入框的失去焦点事件，用户可以修改商品数量。

 

脚本代码块：

<script setup>
import { onMounted, reactive, toRefs, computed } from 'vue';
import {cartQuery, cartAdd} from '@/http/api';
import TabBar from '@/components/TabBar.vue';
import { useCartStore } from '@/stores/cart.js'
const cartStore = useCartStore();

const data = reactive({cartList:[] })
let {cartList} = toRefs(data);
  
11 const totalAmt = computed(() => {
12     let ttl=0;
13     data.cartList.forEach(function(item, index) {ttl+=item.price * item.qty;});
14     return ttl;
15 })
  
onMounted(() => {
    let formData={}; 
    cartQuery(formData).then(res=>{
        data.cartList=res; 
    });
})

function onModifyCart(goodsId, index){ 
    let newQty=data.cartList[index].qty
    let formData = {goodsId:goodsId,qty:newQty}; 
    //console.log(JSON.stringify(formData)); 
    cartAdd(formData).then(res=>{ 
        cartStore.reset(res.qty);
    })
}

 

function onOrder(){ 
    let cartinfo = '';
    data.cartList.forEach((item, index)=>{
        cartinfo+=','+item.goodsId+':'+item.qty; 
    });
    cartinfo=cartinfo.substring(1);
    let formData={cartinfo:cartinfo}; 
    orderBuild(formData).then(res=>{  
        router.push({name:'order',query:{oid:res.orderId}}); 
    })  
}
</script>

 

和 Home.vue 大部分是相同的，不同的见红色部分。

1 . 使用了 vue3 的 computed() 函数，它能将 totalAmt 这个变量变成一个计算属性，其作用就是汇总购物车中商品总额

，然后在总价那里显示出来。

2. cartAdd() 这个后端接口会返回一个 qty ,它表示当前用户购物车中商品的总数量，每次更新购物车商品数量

，后端接口都需要重新计算一下总数量，前端可以用这个值更新 cart.count ，确保商品数量同步。

3. let newQty=data.cartList[index].qty 这里可以取到用户输入的值，因为 cartList 是一个响应式对象

，用户输入的值 vue3 框架会自动帮我们设置到相应索引的qty属性中去。

4. reset() 方法 是 cart状态 中新增的方法，用于重置数量，修改后的代码如下（见红色部分）：

import { ref } from 'vue';
import {defineStore} from 'pinia';

export const useCartStore = defineStore('cart', () => {
    const count = ref(0);
    function increment(qty) {
      count.value += qty;
    }
    function reduction(qty){
        if(count.value>1){
            count.value -= qty;
        } 
    }
    function reset(qty){
15       count.value=qty;
16     }
    return { count, increment, reduction, reset }
  },
  {persist:true}
)

其他两个方法也做了改进，可以根据参数来做增减。

5.  onOrder() 方法遍历购物车中的商品信息，调用 orderBuild( ) 来生成订单，该方法的返回值是新生成订单的编号

，调用 router.push({name:'order',query:{oid:res.orderId}}); 方法时会自动生成查询字符串，形如 " ?oid=237832 "

，实际项目中每个商品前有 checkbox 可以让用户勾选，这里做了简化处理。

 

样式代码块：

<style>
.cart-list{
    display: flex;
    flex-direction: column;
}
.cart-item{
    display: flex;
    flex-direction: row;
    border:solid 1px #E0E0E0;
    margin-bottom: 6px;
    padding: 4px 0;
}
.cart-img{
    width: 100px;
    height: 100px;
    vertical-align: middle;
    border: solid 1px #F0F0F0;
    border-radius: 4px;
}
.cart-info{
    width: 100%; 
    padding-left: 8px;
    padding-right: 8px;
}
.cart-name{
    font-weight: bold;
}
.cart-price{
    font-size: 16px;
    font-weight: bold;
    color:orangered;
 } 
 .cart-qty{ 
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
 }
 .txt_qty{
    width: 60px;
 }

 .cart-total{ 
    width: 368px; 
    height: 30px;
    line-height: 30px;
    position: fixed;
    left: 3px;
    bottom: 56px;
    background-color: #e0fffe;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
 }
 .btn_order{
    width: 70px;
    height: 30px;
 }
</style>

这里根据页面布局要求来设置就可以了。