小程序项目--电商优购day05

购物车页面

效果

业务逻辑

1.渲染购物⻋数据
2.添加收货地址
3.修改商品数量
4.单选和全选功能

接口
1.获取购物车数据,本地存储实现
2.调⽤微信的收货地址

关键技术

• ⼩程序 选择收货地址api

• ⼩程序复选框组件

1. wxml文件

<!-- 收货地址 -->
<view class="revice_address_row">
	<!-- 当收货地址不存在按钮显示 -->
	<view class="address_btn" wx:if="{
   {!address.userName}}">
		<button
		 bindtap="handleChooseAddress"
		 type="primary"
		 plain
		>获取收货地址
		</button>
	</view>
	<!-- 当收货地址存在 详细信息显示 -->
	<view wx:else class="user_info_row">
		<view class="user_info">
			<view>{
   {
   address.userName}}</view>
			<view>{
   {
   address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
		</view>
		<view class="user_phone">
			<view>{
   {
   address.telNumber}}</view>
		</view>
	</view>

	<!-- 购物车内容 -->
	<view class="cart_content">
		<view class="cart_title">购物车</view>
		<view class="cart_main">
		<!-- 当cart数组长度不为0,显示商品信息 -->
	  <block wx:if="{
   {cart.length!==0}}">
				<view class="cart_item"	 wx:for="{
   {cart}}"	 wx:key="goods_id">
				<!-- 复选框 -->
				<view class="cart_chk_wrap">
					<checkbox-group bindchange="handleItemChange" data-id="{
   {item.goods_id}}">
						<checkbox checked="{
   {item.checked}}" />
					</checkbox-group>
				</view>
				<!-- 商品图片 -->
				<navigator class="cart_img_wrap">
					<image mode="widthFix" src="{
   {item.goods_small_logo}}" />
				</navigator>
				<!-- 商品信息 -->
				<view class="cart_info_wrap">
					<view class="goods_name">{
   {
   item.goods_name}}</view>
					<view class="goods_price_wrap">
						<view class="goods_price">¥{
   {
   item.goods_price}} </view>
						<view class="cart_num_total">
							<view
							 class="num_edit"
							 bindtap