vue中计算属性无法直接进行传参,如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)。

<template>
  <div class="bg-color-white bg-shadow-block pd16 mg-t-8">
    <div class="tong-title clearf">
      <div class="fn-left">
        <em></em>
        <small>{{title}}</small>
        <h-tooltip :content="tipContent" placement="top" class="tip-text-black v-baseline">
          <h-icon name="help-circled" class="v-middle" color="#CCCCCC" :size="18"></h-icon>
        </h-tooltip>
      </div>
    </div>
    <div class="important-trade">
      <!-- 缴款到期 -->
      <dl v-for="(expiring,index) in eventList.expirings" :key="index">
        <dt>
          <p>缴款即将到期</p>
          <em>{{expiring.custname}}</em>
        </dt>
        <dd class="clearf">
          <div class="fn-left">
            预约金额:
            <small>{{expiring.balance}}</small>
          </div>
          <div class="fn-right">
            距离到期:
            <small>{{countDownText(index)}}</small>
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { invokeApi } from "@src/seaj.base/api";
export default {
  name: "ImportantEventList",
  props: {
    title: String, //"重要交易事件"
    tipContent: String // "多行的样式,提示的文字信息提示的文字信息"
  },
  data() {
    return {
      timer: null,
      now: null,
      eventList: {
        expirings: [
          //缴款到期
          {
            custid: "", //客户编号
            custname: "恒生软件有限公司", //客户名称
            reservevaliddate: 20200327000000, //预约有效日期,Integer,YYYYMMDDhhmmss
            balance: 300, //预约金额
            requestno: "" //交易申请号
          },
          {
            custid: "", //客户编号
            custname: "恒生软件有限公司", //客户名称
            reservevaliddate: 20200328000000, //预约有效日期,Integer,YYYYMMDDhhmmss
            balance: 600.55, //预约金额
            requestno: "" //交易申请号
          }
        ],
        excesscaptials: [
          //超额到账
          {
            custid: "", //客户编号
            custname: "恒生软件有限公司", //客户名称
            capitalbalance: 450, // 到账金额
            balance: 300, //交易金额
            ratio: "50%" //超额百分比
          },
          {
            custid: "", //客户编号
            custname: "恒生软件有限公司", //客户名称
            capitalbalance: 200, // 到账金额
            balance: 100, //交易金额
            ratio: "100%" //超额百分比
          }
        ]
      }
    };
  },

  mounted: function() {
    this.timer = setInterval(() => {
      this.now = new Date();
    }, 1000);
  },
  computed: {
    countDownText: function() {
      return function(index) {
        const endStr = this.eventList.expirings[index].reservevaliddate + "";
        const year = endStr.substr(0, 4);
        const month = endStr.substr(4, 2);
        const day = endStr.substr(6, 2);
        const hour = endStr.substr(8, 2);
        const minute = endStr.substr(10, 2);
        const second = endStr.substr(12, 2);
        // 2020-03-27T10:30:00
        let endFormat = `${year}-${month}-${day}T${hour}:${minute}:${second}`;
        const end = Date.parse(endFormat); //到期时间
        let lefttime = parseInt((end - this.now) / 1000);

        if (lefttime <= 0) {
          return "00小时00分00秒";
        }

        let h = parseInt(lefttime / (60 * 60));
        let m = parseInt((lefttime / 60) % 60);
        let s = parseInt(lefttime % 60);
        //补零
        s = s < 10 ? "0" + s : s;
        m = m < 10 ? "0" + m : m;
        h = h < 10 ? "0" + h : h;

        return `${h}小时${m}${s}`;
      };
    }
  },
  distroyed: function() {
    clearInterval(this.timer);
  }
};
</script>

Logo

前往低代码交流专区

更多推荐