微信小程序项目_秋泊优选44

40、购物车-结算按钮功能

点击结算按钮

判断有没有收货地址信息
判断用户有没有选购商品
经过以上的验证跳转到支付页面!

pages\cart\index.wxml
绑定点击按钮事件

    <!--结算-->
    <view class="order_pay_wrap" bindtap="handlePay">
        结算{
   
   {totalNum}}
    </view>

showToast的封装utils\asyncWx.js

// Promise 形式showToast
export const showToast=({
    
    title})=>{
    
    
    return new Promise((resolve, reject)=>{
    
    
        wx.showToast({
    
    
            title: title,
            icon:'none',
            success: (res) => {
    
    
                resolve(res);
            },
            fail: (err) => {
    
    
                reject(err);
            }
        });   
    })
}

pages\cart\index.js

// 在小程序代码里使用es7的async和await语法(引入解决报错的包)
import {
    
    getSetting, chooseAddress, openSetting, showModal, showToast} from "../../utils/asyncWx.js";
  // 点击结算按钮事件
  async handlePay(){
    
    
    // 1 判断收货地址
    const {
    
    address,totalNum}=this.data;
    if(!address.userName){
    
    
      await showToast({
    
    title:"您还没有选择收货地址"});
      return;
    }
    // 2 判断用户有没有选购商品
    if(totalNum===0){
    
    
      await showToast({
    
    title: "您还没有选购商品"});
      return;
    }
    // 3 跳转到支付页面
    wx.navigateTo({
    
    
      url: '/pages/pay/index'
    });
  }

微信小程序弹窗提示(showToast)API