上一篇文章：微信小程序开发一个小商城（五、产品详细信息）

在产品详细信息界面中单击添加购物时，我们将跳至购物车界面。购物车界面是一个标签栏，跳跃时需要添加ope类型。查看购物车的静态页面：如下所示

页面分析：在顶部，您需要获取传递地址：如果存在，则显示信息，如果不存在，则显示按钮以指示用户已被授权。以下是类似于商品清单的小型产品块，以下类似于goods_detail中的“添加到购物车”列。

获取用户授权和显示地址

使用wx：if else确定要显示哪个（授权按钮或信息）

获取收货地址 {{address.userName}} {{address.provinceName}}{{address.cityName}}{{address.countyName}}{{address.countyName}}{{address.detailInfo}} {{address.telNumber}}

在按钮和信息上添加一些样式：

.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进行判断，并在产品为空时使用外部网络图片替换它。

购物车 {{item.goods_name}} ￥{{item.goods_price}} - {{item.num}} +

类似地，商品清单界面以及样式添加了一个复选框。将复选框居中。

.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;}}}}}}}

现在购买

简单的视图，外加颜色等：和绝对定位

全选 合计 ￥{{totalPrice}} 包含运费 结算({{totalNum}})

样式文件

.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获取地址，并在获取值后将值设置为cache，然后可以在wxml文件中获取值并进行判断：

async handleChooseAddress(e) { console.log("获取地址"); try { //获取授权状态 const res1 = await getSetting(); const scopeAddress = res1.authSetting["scope.address"]; //判断授权状态 if (scopeAddress === false) { await openSetting(); } //调用api const 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); },

增加和减少商品数量：将单击事件绑定到加号和减号，以指示数量是加一还是减一，这取决于绑定到该按钮的操作值以及何时该数量为1，单按减号淡出提示：询问用户是否删除。缓存修改后的价值车和盖子的原始阵列。

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); } },

是否选中，在选中的属性中，单击一次以指示选择，再次单击以取消，这与原始收集功能类似。只有选定的产品才会计入总价。

handleItemChange(e) { //获取id const 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); },

选择所有产品，单击下面的“全选”按钮后，所有产品数据的检查值将变为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", }); },

可以在存储中查看缓存的对象：如下图所示：

然后在高速缓存中的购物车上，单击购物车以查看是否选中了所选属性：如下所示：

同时，您可以在appdata中看到页面的相应属性值：如下所示，总共有5种产品，cate数组的大小为5。所有选择为true，地址信息也存在，totalPrice总价格，totalNum的总数

感谢您的阅读，文章正在不断更新中……

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