订单（五）01-商品总价与支付菜单布局——计算属性-计算选中商品的总价

商品总价与支付菜单布局——计算属性-计算选中商品的总价

• 商品总价与支付菜单

    <!-- 商品总价和支付按钮 -->
    <div class="all-price">
       合计：<span>￥{{calcTotal}}</span>
       <button type="primary" @click='handlePay'>支付</button>
    </div>
  </div>

效果

把购物车界面中计算属性里的 计算属性-总价部分 复制过来

在order/index.vue中

  computed: {
    calcTotal: function () {
      // 计算商品总价：单价 * 数量 再进行累加操作
      let total = 0
      for (let key in this.cart) {
        let p = this.cart[key]
        if (p.checked) {
          total += p.goods_price * p.num
        }
      }
      return total
    },
  }

动态总价

支付按钮事件@click='payHandle'

<script>
import request from '../../utils/request.js'

export default {
  data () {
    return {
      orderNumber: '',
      address: null,
      cart: {}
    }
  },
  methods: {
    handlePay () {
      // 进行支付
        //console.log('pay')
      // 先调用电商的后台接口；再调用微信平台接口进行付款
      let token = wx.getStorageSync('mytoken')
      request('my/orders/req_unifiedorder', {
        order_number: this.orderNumber
      }, 'post', {
        Authorization: token
      }).then(res => {
        // 获取支付相关参数，用于提供给小程序平台接口实现付款
        let pay = res.pay
        // 调用小程序API实现付款
        wx.requestPayment({
          // timeStamp: '',
          // nonceStr: '',
          // package: '',
          // signType: 'MD5',
          // paySign: '',
          ...pay,
          success: () => {
            // 如果该函数触发，说明支付成功
            // 删除支付过的商品并同步到缓存，最后跳回到购物车页面
            let cart = wx.getStorageSync('mycart')
            for (let key in this.cart) {
              delete cart[key]
            }
            wx.setStorageSync('mycart', cart)
            // 跳回到购物车页面
            wx.switchTab({
              url: '/pages/cart/main'
            })
          }
        })
      })
    }
  },
}

打印支付

附：

• 结构

  <!-- 商品总价和支付按钮 -->
<div class="all-price">
   合计：<span>￥{{allPrice}}</span>
   <button type="primary" @click='payHandle'>支付</button>
</div>

• 计算总价

allPrice () {
  // 计算选中商品的总价
  let sum = 0
  for (let key in this.cart) {
    let p = this.cart[key]
    if (p.checked) {
      // 选中的商品
      sum += p.goods_price * p.num
    }
  }
  return sum
}