chaihongjun.me

使用Vue和天天基金的数据制作了一个基金收益查询页面

来源：chaihongjun.me作者： 分类：javascript阅读()

这个只是一个非常原始的功能页面，根据输入的基金代码和购买的份额可以计算出最新的基金收益。刚开始做的时候，苦于寻找最近2个交易日数据的接口，可惜最初找到的网上的Jsonp接口数据只有最近一天的，后面发现了一个新的接口，但是这个不是可以使用ajax技术访问的接口，只是一个普通的JS链接，经过一番折腾，完成下面的页面，当然UI什么的还是非常的原始的，Vue的使用时越来越上瘾了，它的数据驱动的概念也会体会的越深刻。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>当日基金收益计算器</title>
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
    />
    <style>
      [v-cloak] {
        display: none;
      }
      .bg {
        background-color: #e9ecef;
      }
      span {
        font-weight: 500;
      }
      .red {
        color: red;
      }
      .green {
        color: green;
      }
      .black {
        color: black;
      }
      input {
        width: 100%;
      }
      .row {
        padding: 10px 10px;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <link rel="canonical" href="https://chaihongjun.me/tools/fund.html" />
  </head>
  <body>
    <div id="app" class="bg">
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <h1>当日基金收益计算</h1>
            <p v-cloak>当前日期： {{currentMonth}}月{{currentDate}}日</p>
          </div>
        </div>
        <!-- 基金代码 -->
        <div class="row">
          <div class="col text-center">
            <label for="fundCode" class="">基金代码：</label>
          </div>
          <div class="col text-center form-group">
            <input
              type="text"
              class="form-control"
              name="fundCode"
              placeholder="请输入基金代码"
              v-model.trim="fundCode"
              @blur="getAPI(fundCode)"
              @focus="clearJS(fundCode)"
            />
          </div>
        </div>
        <!-- 购买份额 -->
        <div class="row">
          <div class="col text-center">
            <label for="fundCode" class="">购买份额：</label>
          </div>
          <div class="col text-center form-group">
            <input
              type="text"
              class="form-control"
              name="amount"
              placeholder="请输入购买份额"
              v-model.trim="amount"
              @focus="amount =''"
            />
          </div>
        </div>
        <!-- 最新净值 -->
        <div class="row">
          <div class="col text-center">
            <label for="fundCode">最新净值：</label>
          </div>
          <div class="col text-center">
            <span :class="[newWorth>oldWorth?red:green]" v-cloak
              >{{newWorth}}</span
            ><span v-cloak>-[{{jzrq}}]</span>
          </div>
        </div>
        <!-- 前一净值  -->
        <div class="row">
          <div class="col text-center">
            <label for="fundCode">前一净值：</label>
          </div>
          <div class="col text-center">
            <span class="black" v-cloak>{{oldWorth}}</span>
          </div>
        </div>
        <!-- 基金名称 -->
        <div class="row">
          <div class="col text-center">
            <label for="fundName">基金名称：</label>
          </div>
          <div class="col text-center">
            <span class="black" v-cloak>{{fundName}}</span>
          </div>
        </div>
        <!-- 盈亏金额 -->
        <div class="row">
          <div class="col text-center">
            <label for="income">盈亏金额：</label>
          </div>
          <div class="col text-center">
            <span class="black" v-cloak>{{getIncome}}</span>
          </div>
        </div>
        <!-- 操作 -->
        <div class="row">
          <div class="col text-center">
            <button
              type="button"
              class="btn btn-lg btn-warning btn-block"
              @click="reset"
            >
              重置
            </button>
          </div>
          <div class="col text-center">
            <button
              type="button"
              class="btn btn-lg btn-primary btn-block"
              @click="confirm(fundCode,amount)"
            >
              计算
            </button>
          </div>
        </div>
        <!-- 结果 -->
        <div class="row">
          <div class="col">
            <p class="text-center">
              合计盈亏：<span
                :class="[allIncome>0?red:green]"
                style="font-size: 2rem;"
                v-cloak
              >
                {{getAllIncome}} </span
              >元
            </p>
          </div>
        </div>
        <!-- 列表     -->
        <div class="row">
          <div class="table-responsive">
            <table
              class="table table-striped text-nowrap table-bordered text-center"
            >
              <thead class="table-info">
                <tr>
                  <th>序号</th>
                  <!-- <th>基金代码</th> -->
                  <th>基金名称</th>
                  <th>盈亏金额</th>
                </tr>
              </thead>
              <tbody>
                <tr v-cloak v-for="(fund,index) of fundData" :key="index">
                  <td v-cloak>
                    {{index+1}}
                  </td>
                  <!-- <td v-cloak>
                    {{fund.fundCode}}
                  </td> -->
                  <td v-cloak>
                    {{fund.fundName}}
                  </td>
                  <td v-cloak>
                    {{fund.income}}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <footer class="text-center">
              <p class="text-center">叠加计算的使用方法：</p>
              <ul class="list-group">
                <li class="text-center list-group-item">1. 输入【基金代码】</li>
                <li class="text-center list-group-item">2. 输入【购买份额】</li>
                <li class="text-center list-group-item">3. 点击【计算】按钮</li>
                <li class="text-center list-group-item">
                  4. 点击【重置】回第一步，依此类推
                </li>
              </ul>
            </footer>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script>
  let global = window;
  let vm = new Vue({
    el: "#app",
    data: {
      red: "red",
      green: "green",
      jzrq: "",
      fundName: "",
      fundCode: "", //基金代码
      newWorth: 0, //当前基金净值
      oldWorth: 0, //前一个净值
      income: 0, //单只基金收益
      allIncome: 0, //全部基金收益
      amount: null, //基金份额
      currentMonth: new Date().getMonth() + 1, //当前月份
      currentDate: new Date().getDate(), //当前日
      fundData: [], //元素为每条基金数据
      funds: [
        {
          name: "富国天惠成长A",
          code: "161005",
        },
        {
          name: "工银文体产业股票",
          code: "001714",
        },
        {
          name: "国泰聚信价值灵活A",
          code: "000362",
        },
        {
          name: "诺安先锋混合",
          code: "320003",
        },
        {
          name: "易方达中小盘混合",
          code: "110011",
        },
      ],
    },
    computed: {
      getIncome() {
        return parseFloat(this.income).toFixed(2);
      },
      getAllIncome() {
        return parseFloat(this.allIncome).toFixed(2);
      },
    },
    methods: {
      reset() {
        // 清除页面挂载的基金JS
        global.removeFundJS(this.fundCode);
        // 清除表单
        this.amount = 0;
        this.fundCode = "";
        this.fundName = "";
        this.newWorth = 0;
        this.oldWorth = 0;
        this.income = 0;
      },
      clearJS(fundCode) {
        global.removeFundJS(fundCode);
      },
      getAPI(fundCode) {
        let url =
          "https://fund.eastmoney.com/pingzhongdata/" +
          fundCode +
          ".js?time=" +
          new Date().getTime();
        let fundData = document.createElement("script");
        fundData.type = "text/javascript";
        fundData.src = url;
        fundData.id = fundCode;
        if (!document.getElementById(fundCode)) {
          document.getElementsByTagName("head")[0].appendChild(fundData);
        }
        //判断基金净值有没有更新
        let jz = setTimeout(function () {
          //净值日期    //2020-07-12
          let jzrq = global.Data_currentFundManager[0].power.jzrq;
          // console.log("净值日期:" + jzrq);
          //净值日
          let jzDay = jzrq.split("-")[jzrq.split("-").length - 1];
          // console.log("净值日:" + jzDay);
          //当前日日
          let currentDay = new Date().getDate();
          // console.log(currentDay);
          if (jzDay == currentDay) {
            global.alert("当前净值已经更新，可继续查询");
          }
        }, 500);
        // clearTimeout(jz);
      },
      confirm(fundCode, amount) {
        if (!fundCode || amount == 0 || amount == "") {
          alert("请输入基金代码和购买份额");
        } else {
          global.getFundWorth(amount);
          // 填充到明细表
          this.fundData.push({
            fundCode: this.fundCode,
            fundName: this.fundName,
            income: this.getIncome,
          });
        }
      },
      copy(code) {
        //复制双击的数据到表单
        this.fundCode = code;
      },
    },
  });
  // 获取基金数据
  function getFundWorth(amount) {
    // 判断基金是否存在
    if (global.fS_name == undefined) {
      global.alert("基金代码输入错误！");
    }
    //获取基金数据
    // 基金名称
    vm.fundName = fS_name;
    // 当前基金最新净值
    vm.newWorth = Data_netWorthTrend[Data_netWorthTrend.length - 1].y;
    //  前一个净值
    vm.oldWorth = Data_netWorthTrend[Data_netWorthTrend.length - 2].y;
    // 当前净值日期
    vm.jzrq = global.Data_currentFundManager[0].power.jzrq;
    // 计算最后的单只收益
    vm.income = (vm.newWorth - vm.oldWorth) * amount;
    // 计算最后的全部总收益
    vm.allIncome += vm.income;
    // 清除页面挂载的基金JS
    global.removeFundJS(vm.fundCode);
  }
  // 清除基金接口
  function removeFundJS(fundCode) {
    let fundJs = document.getElementById(fundCode);
    if (fundJs) {
      document.getElementsByTagName("head")[0].removeChild(fundJs);
    }
  }
</script>


知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者：柴宏俊»

标签： vue(40)

相关推荐