微信小程序项目_秋泊优选44-CSDN博客

本文链接：https://blog.csdn.net/cpcpn/article/details/108620881

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