1.在商品订单计算商品价格的时候老觉得押金加不上去。后来用了number强转,将类型强转为数值类型才解决问题 data() { return { // 支付数值统计 statistic:[], coupon_money: 0, // 可抵扣优惠价
1.在商品订单计算商品价格的时候老觉得押金加不上去。后来用了number强转,将类型强转为数值类型才解决问题
data() { return{ // 支付数值统计 statistic:[], coupon_money:0,//可抵扣优惠价 real_total:0,//商品实付金额 } //计算变量,避免在html写入冗长计算式 computed: { total() { return Number(this.statistic.all_price) + Number(this.statistic.all_deposit_price) + Number(this.statistic.delivery_price) - Number(this.coupon_money) } //实时监听计算变量的变化 watch: { total(val) { this.real_total=val console.log("total:",val,this.statistic.all_price,this.statistic.all_deposit_price,this.statistic.delivery_price,this.coupon_money ) }
2.总结一下uni-app引用到vue的一些优点:
先封装一个函数计算mixin.js然后将其导出,在引用的文件里导入即可正常使用,主要用于将数值分割成整数和小数两部分,如果数值为整数,小数部分补零:
const tools = { data() { return { buttons: { 0: { cancel: true, pay: true, flag: "UNPAID", desc: "未支付" }, 1: { cancel: true, flag: "UNCONFIRMED", desc: "待确认" }, 2: { viewOrders: true, flag: "UNSHIPPED", desc: "待发货" }, 3: { viewOrders: true, flag: "SHIPPED", desc: "已发货" }, 4: { delete: true, viewOrders: true, flag: "COMPLETED", desc: "已收货" }, 5: { viewOrders: true, flag: "SERVICING", desc: "售后中" }, 9: { delete: true, viewOrders: true, flag: "BANKING", desc: "已存酒库" }, 10: { delete: true, viewOrders: true, flag: "CANCELED", desc: "已取消" }, 11: { delete: true, viewOrders: true, flag: "AUTOCANCELED", desc: "系统自动取消" }, } } }, methods: { getInteger(val) { val = val ? Number(val) : 0; return val.toFixed(2).split(".")[0] }, getDecimal(val) { val = val ? Number(val) : 0; return val.toFixed(2).split(".")[1] }, } } export default tools
3.在需要引用上面方法的文件夹里导入使用方式:
import tools from "@/mixins/mixin.js"; components: { uniIcon,uniPopup,uniDrawer }, mixins: [tools], data() { return{} }, } //然后直接在html里调用mixin.js里的方法即可: <span class="pay-btn-txt num">合计:¥{{getInteger(real_total)}}.<span class="mini">{{getDecimal(real_total)}}</span></span>