uni-app 优购商城 - 购物车功能

目录

一、购物车

      （1）ycq-address  - 收货地址

      （2）ycq-goods - 购物车显示商品信息

      （3）ycq-settle - 购物车结算页面

      （4）cart - 购物车页面

1、购物车页面

  在 pages/cart 写购物车的页面

<template>
    <view v-if="cart.length!==0">
        <!-- 地址框 -->
        <qxc-address :address="address"></qxc-address>
        <!-- 购物车标题 -->
        <view class="cart-title">
            <text class="iconfont icon-tuya_huabanfuben">购物车</text>
            <uni-icons class="item-img" type="cart"></uni-icons>
        </view>
        <!-- 购物车列表 -->
        <view>
            <qxc-goods v-for="(item,index) in cart" :key="index" :goods='item' :showCheck='true' :showNum="true"
                :allowLongTap="true" @changeNum='changeNum' @changChacked="changChacked">
            </qxc-goods>
        </view>
        <!-- 购物车统计 -->
        <qxc-settle :buttonText="'结算'" :showAllCheck="true" :cartData='cart' @changAllCheck='changAllCheck'>
        </qxc-settle>
        </view>
        <!-- 购物车为空时 -->
        <view class="cart-default" v-else>
            <view class="default-image">
                <image class="cart-image" src="../../static/cart_empty.png" mode="widthFix"></image>
            </view>
            <view class="default-text">
                购物车空空如也
            </view>
        </view>
 
 
</template>

<script>
    export default {
        data() {
            return {
                cart: [],
                address:{},
            }
        },
        //不能使用onload,否则从商品详情页加入购物车,再点击'购物车'后,购物车没有及时更新数据
        onShow() {
            //从缓存获取购物车数据
            this.cart = uni.getStorageSync('cart') || [];
            //从缓存获取地址数据
            this.address = uni.getStorageSync('address') || {};
            
        },
 
        methods: {
            changAllCheck(e) {
                this.cart.forEach(v => v.checked = e);
            },
 
            //修改购物车相应产品的选中状态
            changChacked(e) {
                let index = this.cart.findIndex(v => v.goods_id == e.goods_id);
                this.cart[index].checked = e.checked;
                //更改缓存中的购物车
                uni.setStorageSync('cart', this.cart);
            },
 
            //修改购物车相应产品的数量
            //5.31做了更改加了if 移了let index和最后储存的变量放入else
            changeNum(e) {
                let index = this.cart.findIndex(v => v.goods_id == e.goods_id);
                if (e.cartNum == 0) {
                    this.cart.splice(index, 1)