上一篇文章：微信小程序开发一个小型商城（五、商品详情）
当我们在商品详情界面中点击添加购物后，会跳转到购物车界面，购物车界面是一个tabbar，在跳转的时候需要加上ope-type。看下购物车的静态页面把：如下图

页面分析：在最上面需要获取收货地址：当存在则显示信息，不存在的时候显示一个按钮表示要用户授权。下面是类似与goodlist的一个个的小商品块，再下面就类似与goods_detail当中的加入购物车那一栏。

获取用户授权，显示地址
使用wx:if else进行判断显示哪一个（授权按钮还是信息）

<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.countyName}}{{address.detailInfo}}</view></view><view class="user_phone">{{address.telNumber}}</view></view></view>

给按钮和信息加上些许样式：

.revice_address_row {.address_btn {padding: 20rpx;button {width: 60%;}}.user_info_row {display: flex;padding: 20rpx;.user_info {flex: 5;}.user_phone {flex: 3;text-align: right;}}}

商品的购买列表
先写上一个购物车，商品列表可以从good_list里面照搬一些。以及当商品为空时，同样用wx:if else 进行判断，为空后使用一种外网图片进行替换。

<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 bindtap="handleItemChange" data-id="{{item.goods_id}}"><checkbox checked="{{item.checked}}"></checkbox></checkbox-group></view><!--商品图片--><navigator class="cart_img_wrap"><image src="{{item.goods_small_logo}}" mode="widthFix" /></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_tool"><view class="num_edit" bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{-1}}">-</view><view class="goods_num">{{item.num}}</view><view class="num_edit" bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{1}}">+</view></view></view></view></view></block><block wx:else><image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3559485588,3499568517&fm=15&gp=0.jpg" mode="widthFix" /></block></view>
</view>

同理goodslist界面，加上样式，多了一个复选框。使复选框居中显示。

.cart_content {.cart_title {padding: 20rpx;color: var(--themeColor);font-size: 36rpx;border-top: 1px solid currentColor;border-bottom: 1px solid currentColor;}.cart_main {.cart_item {display: flex;padding: 10rpx;border-bottom: 1px solid #ccc;.cart_chk_wrap {flex: 1;display: flex;justify-content: center;align-items: center;checkbox-group {checkbox {}}}.cart_img_wrap {flex: 2;display: flex;justify-content: center;align-items: center;image {width: 80%;}      }.cart_info_wrap {flex: 4;display: flex;flex-direction: column;justify-content: space-around;.goods_name {display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;color: #666;}.goods_price_wrap {display: flex;justify-content: space-between;.goods_price {color: var(--themeColor);font-size: 34rpx;}.cart_num_tool {display: flex;.num_edit {width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #ccc;}.goods_num {width: 50rpx;height: 50rpx;display: flex;justify-content: center;align-items: center;}}}}}}}

立即购买
一个单纯的view，加上颜色等：以及绝对定位

<view class="footer_tool"><!--全选--><veiw class="all_chk_wrap"><checkbox-group bindchange="handleItemAllchange"><checkbox checked="{{allchecked}}">全选</checkbox></checkbox-group></veiw><!--总价格--><view class="total_price_wrap"><view class="total_price">合计<text class="total_price_text">￥{{totalPrice}}</text></view><view>包含运费</view></view><!--结算--><view class="order_pay_wrap" bindtap="handlePay">结算({{totalNum}})</view>
</view>

样式文件

.footer_tool {position: fixed;bottom: 0;left: 0;width: 100%;height: 90rpx;background-color: #fff;display: flex;border-top: 1px solid #ccc;.all_chk_wrap {flex: 2;display: flex;align-items: center;justify-content: center;}.total_price_wrap {flex: 4;padding-left: 15rpx;.total_price {.total_price_text {color: var(--themeColor);font-size: 34rpx;font-weight: 600;}}}.order_pay_wrap {flex: 3;background-color: var(--themeColor);font-size: 32rpx;font-weight: 600;color: #fff;display: flex;justify-content: center;align-items: center;}
}

js文件动态获取数据及渲染

页面整合
在这个页面当中会发现会使用到很多的内置api以及方法，将这些方法进行封装以下，提升代码的性能：在util文件夹下新建一个文件ansycWx.js文件中代码如下所示：为例不让文章显得太过长就把代码格式弄了一下，复制代码后可重新整理代码格式。

export const getSetting = () => {return new Promise((resolve, reject) => {wx.getSetting({success: (result) => {resolve(result);},fail: (err) => {reject(err);},});});
};
export const chooseAddress = () => {return new Promise((resolve, reject) => {wx.chooseAddress({success: (result) => {resolve(result);},fail: (err) => {reject(err);},});});
};
export const openSetting = () => {return new Promise((resolve, reject) => {wx.openSetting({success: (result) => {resolve(result);},fail: (err) => {reject(err);},});});
};
export const login = () => {return new Promise((resolve, reject) => {wx.login({timeout: 10000,success: (result) => {resolve(result);},fail: (err) => {reject(err);},});});
};
export const requestPayment = (pay) => {return new Promise((resolve, reject) => {wx.requestPayment({...pay,success: (result) => {resolve(result)},fail: (err) => {reject(err)},});});
};

index.js文件
在编写之前将文件进行导入：如下代码所示：

import { request } from "../../request/index.js";
import regeneratorRuntime from "../../lib/runtime/runtime";
import { getSetting, chooseAddress, openSetting } from "../../util/ansycWx.js";

在data属性中定义变量：

address: {}, //地址信息
cart: [], //购物车数组
allchecked: false, //全部选中
totalPrice: 0, //总价
totalNum: 0, //总数量

首先就是调用获取地址的api，获取值后将值进行设为缓存，再者在wxml文件当中就可以对值进行获取，并判断：

async handleChooseAddress(e) {console.log("获取地址");try {//获取授权状态const res1 = await getSetting();const scopeAddress = res1.authSetting["scope.address"];//判断授权状态if (scopeAddress === false) {await openSetting();}//调用apiconst address = await chooseAddress();//把值设置到缓存当中。wx.setStorageSync("address", address);} catch (error) {console.log(error);}},

在这个页面当中存在数据时刻独秀要进行修改，将这些代码抽离出来，使用一个新的方法进行封装。也就是对购物车当中的数据，有商品数据、是否选中。

  setCart(cart) {let allchecked = true;//申明总价格和总数量let totalPrice = 0;let totalNum = 0;cart.forEach((v) => {if (v.checked) {totalPrice += v.num * v.goods_price;totalNum += v.num;} else {allchecked = false;}});//判断数组是否为空allchecked = cart.length != 0 ? allchecked : false;this.setData({cart,allchecked,totalPrice,totalNum,});wx.setStorageSync("cart", cart);},

商品数量的加减：在加号和减号给其绑定一个单击事件，表示数量是加一还是减一，根据按钮绑定的operation值决定，并且当数量为1时，单击减号要淡出提示：问用户是否决定删除。将修改后的值cart缓存，壶盖原数组。

  handleItemNumEdit(e) {const { operation, id } = e.currentTarget.dataset;//console.log(operation,id)//获取购物车数组let { cart } = this.data;//找到需要修改的索引const index = cart.findIndex((v) => v.goods_id === id);//修改数量if (cart[index].num === 1 && operation === -1) {//跳出弹窗提示wx.showModal({title: "提示",content: "是否要删除",success: (result) => {if (result.confirm) {cart.splice(index, 1); //表示删除这一条数据this.setCart(cart);} else if (result.cancel) {console.log("取消删除");}},});} else {cart[index].num += operation;//设置回缓存和data中this.setCart(cart);}},

是否选中，在checked属性中，单击一次后表示选中，再次单击后取消，就类似于原先的收藏功能。切只有被选中了的商品才会进行计算到总价格当中。

  handleItemChange(e) {//获取idconst goods_id = e.currentTarget.dataset.id;//console.log(goods_id)//获取购物车数组let { cart } = this.data;let index = cart.findIndex((v) => v.goods_id === goods_id);//取反 加上！非。cart[index].checked = !cart[index].checked;this.setCart(cart);},

商品的全选，在下方单击全选按钮后，对商品的所有数据的checked值改为true：即全选。

  handleItemAllchange(e) {let { cart, allchecked } = this.data;//修改选中状态allchecked = !allchecked;//循环修改cart数组当中的选中状态cart.forEach((v) => (v.checked = allchecked));//修改后的值进行填充this.setCart(cart);},

最后商品结算：单击结算按钮后需要判断是否有收货地址，以及是否有商品进行购买：条件都满足后将进行跳转到结算界面：使用wx.navigateTo进行跳转

  //商品结算handlePay(e) {//判断收货地址const { address, totalNum } = this.data;if (address.userName === "") {wx.showToast({title: "还未选择收货地址",icon: "none",success: (result) => {},fail: () => {},complete: () => {},});return;}//判断是否有选购商品if (totalNum === 0) {wx.showToast({title: "还未选购商品",icon: "none",success: (result) => {},fail: () => {},complete: () => {},});return;}//执行正常购买商品的逻辑,即跳转页面wx.navigateTo({url: "/pages/pay/index",});},

在storage当中可以查看到这个缓存的对象：如下图所示：

以及缓存当中的cart，点开cart可以看到是否选中的属性checked：如下图：

与此同时在appdata里面可以看到页面的对应的属性值：如下，共有5条商品 cate数组的大小为5 是否全部选中的allchecked属性值为true 、address地址信息也存在、totalPrice总价格，totalNum总条数

感谢你的阅览，文章持续更新中…

下一篇文章：微信小程序开发一个小型商城（七、支付页面）