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>