vue过滤器金额大写

<template>
  <div class="liuone">
    <el-row v-if="seen">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">1</div></el-col
      >

      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">2</div></el-col
      >
    </el-row>
    <el-row :gutter="20" v-if="!seen">
      <el-col :span="16"
        ><div class="grid-content bg-purple">
          <el-table
            :data="data"
            style="width: 100%"
            highlight-current-row
            stripe
          >
            <el-table-column prop="startTime" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="startTime" label="项目名称" width="180">
            </el-table-column>
            <el-table-column prop="startTime" label="金额"> </el-table-column>

            <el-table-column prop="startTime" label="备注"> </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="left"
              width="150"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="bottom"
                >
                  <el-button
                    icon="el-icon-edit"
                    circle
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>新建项目</span>
              <el-button style="float: right; padding: 3px 0" type="text">
                <el-switch
                  v-model="disabled"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch
              ></el-button>
            </div>
            <dv-decoration-3 style="width: 100%; height: 30px" />
            <div class="text item">
              <span class="title_class"
                >日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期：</span
              >
              <el-date-picker
                clearable
                :disabled="disabled"
                class="input_class"
                v-model="blog.stat"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
              <br />
              <span class="title_class">项目名称：</span>
              <el-input
                clearable
                v-model="blog.xiangmumingcheng"
                @keyup.native="ipnutone = oninput(ipnutone)"
                class="input_class"
              ></el-input>
              <br />
              <span class="title_class"
                >金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额：</span
              >
              <el-input
                clearable
                v-model="blog.xiangmujiner"
                @keyup.native="ipnutone = oninput(ipnutone)"
                class="input_class"
              ></el-input>
              <div class="jisuanjiner">
                <div>{
   
   { blog.xiangmujiner | money }}元</div>
                <div>{
   
   { blog.xiangmujiner | smallToBig }}</div>
              </div>

              <span class="title_class"
                >备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span
              >
              <el-input
                class="input_class"
                type="textarea"
                v-model="blog.beizhu"
              ></el-input>
              <el-button
                @click="querenxiangmu"
                style="float: right"
                type="success"
                icon="el-icon-check"
                circle
              ></el-button>
            </div>
          </el-card>

          <el-card class="box-card" style="margin-top: 10px">
            <div slot="header" class="clearfix">
              <span>利率调整</span>
            </div>
            <dv-decoration-3
              style="width: 100%; height: 30px; margin-bottom: 10px"
            />
            <div class="text item">
              年化利率：
              <el-input
                placeholder="年化利率"
                v-model="nianhualilv"
                clearable
                class="input_class"
              >
              </el-input
              >%
              <br />
              投资预算：
              <el-input
                placeholder="投资预算"
                v-model="touziyusuan"
                clearable
                class="input_class"
              >
              </el-input
              >元
              <div class="jisuanjiner">
                <div>{
   
   { touziyusuan | money }}元</div>
                <div>{
   
   { touziyusuan | smallToBig }}</div>
              </div>
              峰值金额：
              <el-input
                placeholder="峰值金额"
                v-model="fengzhijiner"
                clearable
                class="input_class"
              >
              </el-input
              >元
              <div class="jisuanjiner">
                <div>{
   
   { fengzhijiner | money }}元</div>
                <div>{
   
   { fengzhijiner | smallToBig }}</div>
              </div>
              <el-button
                @click="lilvqueren"
                style="float: right"
                type="success"
                icon="el-icon-check"
                circle
              ></el-button>
            </div>
          </el-card></div
      ></el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :title="dialogTitle"
      width="800px"
      :visible.sync="formVisible"
      @close="resetForm('blogForm')"
    >
      <el-form :model="blog" :rules="rules" ref="blogForm">
        <el-form-item label="ID" prop="id" label-width="30%" hidden>
          <el-input v-model="blog.id" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { lilvweihu } from "@/api/index/index";
export default {
  data() {
    return {
      dialogTitle: "编辑",
      // 是否显示
      formVisible: false,
      disabled: true,
      ipnutone: "0",
      input: "",
      data: [],
      seen: false,
      screenWidth: "",
      screenHeight: "",
      nianhualilv: "",
      touziyusuan: "",
      fengzhijiner: "",
      blog: {
        id: "",
        stat: "",
        beizhu: "",
        xiangmumingcheng: "",
        xiangmujiner: "",
      },
    };
  },
  created() {
    this.onLoad();
  },
  methods: {
    onLoad() {
      this.screenWidth = document.body.clientWidth;
      this.screenHeight = document.body.clientHeight;
      console.log(this.screenWidth);
      if (this.screenWidth < 500) {
        this.seen = true;
      }

      // 日期
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hours = now.getHours(); //得到小时
      var Minutes = now.getMinutes(); //得到分钟
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      hours = hours.toString().padStart(2, "0");
      Minutes = Minutes.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      // this.blog = "";
      this.$set(this.blog, "stat", defaultDate);

      lilvweihu().then((res) => {
        console.log(12111);
        console.log(res);
      });
      // getList().then((res) => {
      //   this.data = res.data.data.records;
      // });
    },
    lilvqueren() {
      console.log(1211);
      this.$message({
        message: "恭喜你，这是一条成功消息",
        type: "success",
      });
      //  let params = {
      //   startTime: this.startTime,
      //   endTime: this.endTime,
      //   content: this.content,
      //   issueState: this.fabuzhuangtai,
      //   exeState: this.zhixingzhuangtai
      // };
      // lilvweihu().then((res) => {
      //   console.log(res);
      // });
    },
    querenxiangmu() {
      console.log(1211);
      this.$message({
        message: "恭喜你，这是一条成功消息",
        type: "success",
      });
    },
    //mobile
    oninput(num) {
      var str = num;
      var len1 = str.substr(0, 1);
      var len2 = str.substr(1, 1);
      //如果第一位是0，第二位不是点，就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1);
      }
      //第一位不能是.
      if (len1 == ".") {
        str = "";
      }
      //限制只能输入一个小数点
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1);
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, ""); // 保留数字和小数点
      str = str.replace(/\.\d\d\d$/, ""); // 小数点后只能输两位
      return str;
    },
  },
  mounted() {},
  filters: {
    money(value) {
      if (!value) return "0.00";

      var intPart = Number(value).toFixed(0); //获取整数部分

      var intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); //将整数部分逢三一断

      var floatPart = ".00"; //预定义小数部分

      var value2Array = value.split(".");

      //=2表示数据有小数位

      if (value2Array.length == 2) {
        floatPart = value2Array[1].toString(); //拿到小数部分

        if (floatPart.length == 1) {
          //补0,实际上用不着

          return intPartFormat + "." + floatPart + "0";
        } else {
          return intPartFormat + "." + floatPart;
        }
      } else {
        return intPartFormat + floatPart;
      }
    },
    smallToBig(money) {
      //  将数字金额转换为大写金额
      var cnNums = new Array(
        "零",
        "壹",
        "贰",
        "叁",
        "肆",
        "伍",
        "陆",
        "柒",
        "捌",
        "玖"
      ); //汉字的数字
      var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      var cnInteger = "整"; //整数金额时后面跟的字符
      var cnIntLast = "元"; //整数完以后的单位
      //最大处理的数字
      var maxNum = 999999999999999.99;
      var integerNum; //金额整数部分
      var decimalNum; //金额小数部分
      //输出的中文金额字符串
      var chineseStr = "";
      var parts; //分离金额后用的数组，预定义
      if (money == "") {
        return "";
      }

      money = parseFloat(money);
      if (money >= maxNum) {
        //超出最大处理数字
        return "超出最大处理数字";
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr;
      }

      //四舍五入保留两位小数,转换为字符串
      money = Math.round(money * 100).toString();
      integerNum = money.substr(0, money.length - 2);
      decimalNum = money.substr(money.length - 2);

      //获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0];
            }
            //归零
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        chineseStr += cnIntLast;
      }
      //小数部分
      if (decimalNum != "") {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1);
          if (n != "0") {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (chineseStr == "") {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
        chineseStr += cnInteger;
      }
      return chineseStr;
    },
  },
};
</script>
<style>
.liuone .el-input--suffix .el-input__inner {
  padding: 3px;
}
.liuone .el-input__icon {
  display: none;
}
</style>
<style scoped>
.input_class {
  width: 320px;
  margin-bottom: 10px;
}
.input_class_two {
  width: 70px;
  margin-bottom: 10px;
}
.jisuanjiner {
  width: 100%;
  margin-left: 87px;
  height: 60px;
}
.title_class {
  float: left;
  line-height: 35px;
}
</style>