目录
前言:由于uniapp拥有高效开发,性能优秀,功能扩展灵活等优点,吸引了无数电商企业使用uniapp一次开发多个平台应用和部署,而今天要讲的,就是多渠道经营的卖家要开发商城中不可或缺的功能:购物车
那么首先,我们需要写出地址框,购物车标题,购物车统计,以及购物车为空时的页面
一、购物车页面
<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>
以上代码是一个 UniApp 页面的模板代码,使用了条件渲染来展示购物车的内容。根据 `cart` 数组的长度,当购物车不为空时,会渲染购物车的地址框、标题、列表和统计部分;当购物车为空时,会显示一个空购物车的提示信息。
具体来看:
<view v-if="cart.length!==0">`:根据 `cart` 数组的长度判断购物车是否为空,如果不为空,则渲染下面的内容。
<qxc-address :address="address"></qxc-address>`:展示购物车的地址框,通过 address="address"` 将 `address` 对象传递给 `qxc-address` 组件。
<view class="cart-title">`:购物车的标题部分,包括一个文字标题和一个购物车图标。
<view>:购物车的列表部分,使用 `v-for` 循环遍历 `cart` 数组中的每个商品,将商品数据传递给 `qxc-goods` 组件进行渲染。
`<qxc-settle>`:购物车的结算部分,展示结算按钮和全选功能,通过 `:buttonText`、`showAllCheck` 和 `cartData` 属性将相应的数据传递给 `qxc-settle` 组件。
`<view class="cart-default" v-else>`:当购物车为空时,显示购物车为空的提示信息。
`<image class="cart-image" src="../../static/cart_empty.png" mode="widthFix"></image>`:显示一个空购物车的图片。
`<view class="default-text">购物车空空如也</view>`:显示一个提示文本,表示购物车为空。
这段代码使用了多个自定义组件(例如 `qxc-address`、`qxc-goods` 和 `qxc-settle`),
(1)、qxc-address(收货地址)
<template>
<view class="address">
<view class="address-button" v-if="!address.userName">
<button type="primary" size="mini" @click="getAddress" open-type="openSetting">