8.购物车页面
接口文档
8.1收货按钮样式
<!--pages/cart/cart.wxml-->
<view class="revice_address_row">
<view class="assress_btn">
<button type="primary" plain>获取收货地址</button>
</view>
</view>
.assress_btn{
padding: 20rpx;
}
8.2获取收货地址(由于新版本优化了获取地址不需要弹出授权窗口,所以代码比较简化)
不弹出授权窗口,直接选择地址
先在wxml中绑定一个点击事件
<button type="primary" plain bindtap="handleChooseAddress">获取收货地址</button>
在js中
page({
/* 获取用户的收货地址
1.绑定点击事件
2.调用小程序内置API wx.chooseAddress获取用户的收货地址
3.把获取到的收货地址存入到本地存储中
*/
handleChooseAddress(){
// console.log("干一行行一行一行行行行行");
// 获取收货地址
wx.chooseAddress({
success: (address) => {
// console.log(result);
wx.setStorageSync("address", address);
},
})
}
})
8.3获取需要弹出授权窗口的收货地址(以前一些旧版本)
先弹出权限窗口,再选择地址
<button type="primary" plain bindtap="handleChooseAddress">获取收货地址</button>
page({
/* 获取用户的收货地址
1.绑定点击事件
2.获取用户对小程序所授予获取地址的权限状态 scopeAddress
1 假设用户点击获取收货地址权限的提示框是 确定 authSsetting: scope.address
scopeAddress值为true,则直接调用获取收货地址
2 假设用户从来没有调用过收货地址的API
scopeAddress值为undefined,则直接调用获取收货地址
3 假设用户点击获取收货地址权限的提示框是 取消 scopeAddress值为false,则
1.引导用户自己打开授权设置
2.当用户重新给与获取地址权限的时候,则调用获取收货地
3.把获取到的收货地址存入到本地存储中
*/
handleChooseAddress(){
// 获取权限状态
wx.getSetting({
success: (result) => {
// 判断权限状态 属性名很怪异的时候可以使用[]形式来获取属性值
const scopeAddress=result.authSetting["scope.address"];
if(scopeAddress===true||scopeAddress===undefined){
wx.chooseAddress({
success: (result1) => {
// console.log(result1);
wx.setStorageSync("result1", result1);
},
})
}else{
// 用户以前拒绝过授权,引导用户打开授权页面
wx.openSetting({
success: (result2) => {
// 调用收货地址
wx.chooseAddress({
success: (result3) => {
// console.log(result3);
wx.setStorageSync("result3", result3);
},
})
}
})
}
}
})
}
})
8.4优化获取需要弹出授权窗口的收货地址的代码
因为上面的代码太多嵌套了所以要用es7里async的方法简化
首先在utils文件夹中新建asyncWx.js文件,用来封装原来的微信小程序的API
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);
}
})
})
}
然后在js引入并使用
// pages/cart/cart.js
import { getSetting,chooseAddress,openSetting } from "../../utils/asyncWx";
Page({
async handleChooseAddress(){
/* try管理正常的代码,catch管理错误的代码 */
try {
// 1.获取权限状态
const res1=await getSetting();
const scopeAddress=res1.authSetting["scope.address"];
// // 2.判断权限状态
// if(scopeAddress===true||scopeAddress===undefined){
// // 3.调用收货地址的API
// const res2=await chooseAddress();
// console.log(res2);
// }else{
// // 4.引导用户打开授权页面
// await openSetting();
// // 5.调用收货地址的API
// const res2=await chooseAddress();
// console.log(res2);
// }
/* 因为不管判断是那种情况结果是一样的都要调用地址,
所以可以把3和5放在if外面共用,进而可以再优化2(只写2的对立面),if为false触发4即可
*/
if(scopeAddress===false){
await openSetting();
}
const res2=await chooseAddress();
// console.log(res2);
// 存入缓存
wx.setStorageSync("res2", res2);
} catch (error) {
console.log(error);
}
}
})
8.5收货地址和按钮切换显示
分析:如果之前使用过收货地址那么应该显示的是收货地址的详细内容,如果是第一次使用那么显示的是添加收货地址的按钮
首先在js中获取缓存的地址
data: {
address:{}
},
onShow: function () {
// 1.获取缓存中的收货地址信息
const address=wx.getStorageSync("address");
// 2.给data赋值
this.setData({
address
})
},
在wxml中
<!--pages/cart/cart.wxml-->
<!-- 收货地址 -->
<view class="revice_address_row">
<!-- 当收货地址不存在的时候按钮显示 address里面没有数据说明收货地址不存在 -->
<view class="assress_btn" wx:if="{
{!address.userName}}">
<button type="primary" plain bindtap="handleChooseAddress">获取收货地址</button>
</view>
<!-- 当收货地址存在的时候详细信息就显示 -->
<view class="user_info_row" wx:else>
<view class="user_info">
<view>{
{address.userName}}</view>
<view>{
{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
</view>
<view class="user_phone">{
{address.telNumber}}</view>
</view>
</view>
/* pages/cart/cart.wxss */
.assress_btn{
padding: 20rpx;
}
.user_info_row{
display: flex;
padding: 20rpx;
}
.user_info{
flex: 5;
}
.user_phone{
flex: 3;
text-align: right;
}
8.6购物车列表动态渲染
首先在js中获取缓存的购物车数据
data: {
address:{},
cart:[]
},
onShow: function () {
// 1.获取缓存中的收货地址信息
const address=wx.getStorageSync("address");
// 1.获取缓存中的购物车数据
const cart=wx.getStorageSync("cart")||[]
// 2.给data赋值
this.setData({
address,
cart
})
},
在wxml中 的结构
<!-- 购物车内容 -->
<view class="cart_content">
<view class="cart-title">购物车</view>
<view class="cart_main">
<view class="cart_item" wx:for="{
{cart}}" wx:key="goods_id">
<!-- 复选框 -->