UNIAPP优购商城购物车功能

目录

一、购物车页面

（1）、qxc-address（收货地址）

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

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

4、购物车页面

---

前言：由于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">