【微信小程序】黑马优购--06购物车

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">
      <!-- 复选框 -->