商品总价与支付菜单布局——计算属性-计算选中商品的总价
- 商品总价与支付菜单
<!-- 商品总价和支付按钮 -->
<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
}