uni-app中的数值监控方式及函数的封装和引用方式

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>