微信小程序支付页面、功能实现

43.点击“结算”跳转支付页面逻辑实现

1.先在cart下的index.html下的结算标签下写bindtap="handlePay"

 <!-- 结算 开始 -->
  <view class="order_pay_wrap" bindtap="handlePay">
    结算({{totalNum}})
  </view>
  <!-- 结算 结束 -->

然后在js下写handlePay方法，从购物车跳转到结算的条件是：已经选择了收货地址，已经选择了商品

// 点击结算，并设定结算的成立逻辑
  handlePay(){
    const {address,totalNum}=this.data;
    if(!address){
      wx.showToast({
        title: '您还没有选择收货地址',
        icon:'none'
      })
      return;
    }
    if(totalNum===0){
      wx.showToast({
        title: '您还没有选购商品',
        icon:'none'
      })
      return;
    }
    wx.navigateTo({
      url: '/pages/pay/index'
    })
  },

别忘记把新包pay的顶部标题改一下，即在购物车界面点了结算之后跳转到确认订单页面：index.json下：

{
  "usingComponents": {},
  "navigationBarTitleText": "确认订单"
}

2.然后写支付确认订单页面，同样是在index.html下写需要出现的标签，然后在less里设置样式

index.wxml：

其中在收货地址里text标签里decode="{{true}}"：设置该文本内容可以被解码，以避免一些特殊字符被直接显示出来。

<!-- 收货地址 开始 -->
<view class="recevie_address_row">
 

    <view class="user_info">
      <view class="user_info_item">{{address.provinceName+address.cityName+address.countyName}}</view>
      <view class="user_info_item user_info_detail">{{address.detailInfo}}</view>
      <text class="user_info_item" decode="{{true}}">{{address.userName}}&nbsp;&nbsp;{{address.telNumber}}</text>
     
    </view>

 
</view>
<!-- 收货地址 结束 -->

<!-- 购物车清单 开始 -->
<view class="cart_content">
  <view class="cart_main">
      <view class="cart_item"
        wx:for="{{cart}}"
        wx:key="id"
      >
        <!-- 商品图片 开始 -->
        <navigator class="cart_img_wrap" url="/pages/product_detail/index?id={{item.id}}">
          <image mode="widthFix" src="{{baseUrl+'/image/product/'+item.proPic}}"></image>
        </navigator>
        <!-- 商品图片 结束 -->
        <!-- 商品信息 开始 -->
        <view class="cart_info_wrap">
          <navigator url="/pages/product_detail/index?id={{item.id}}">
            <view class="goods_name">{{item.name}}</view>
          </navigator>
          <view class="goods_price_wrap">
            <view class="goods_price">
              ¥{{item.price}}
            </view>
            <view class="cart_num_tool">
              <view class="goods_num">×{{item.num}}</view>       
            </view>
          </view>
        </view>
        <!-- 商品信息 结束 -->
      </view>
  </view>
</view>
<!-- 购物车清单 结束 -->

<!-- 底部工具栏 开始 -->
<view class="footer_tool">


  <!-- 合计 开始 -->
  <view class="total_price_wrap">
    <view class="total_price">
      共{{totalNum}}件，合计<text class="total_price_text" decode="{{true}}">&nbsp;¥ {{totalPrice}}</text>
    </view>
  </view>
  <!-- 合计 结束 -->

  <!-- 结算 开始 -->
  <view class="order_pay_wrap" bindtap="handlePay">
    去付款
  </view>
  <!-- 结算 结束 -->
</view>
<!-- 底部工具栏 结束 -->

这段代码展示的信息如下：

 上图样式的less代码如下：