| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>资金流水</title>
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <link href="../../css/mui.min.css" rel="stylesheet" />
- <link href="../../css/mui.picker.min.css" rel="stylesheet" />
- <style>
- .m_box {padding: 10px 10px 25px 15px;box-shadow: 0 1px 6px #dbdbdb;border-radius: 8px;position: relative;overflow: hidden;}
- .fm{width: 100%;z-index: 1;}
- .mui-content{padding: 0px 15px!important;margin-top: -65px;z-index: 11111;}
- .items{padding: 10px;font-size: 12px;margin-top:10px;background-color: white;border-bottom: 1px solid #eeeded;}
- .items:last-child{border: 0px;}
- .divider{margin-top: 25px;margin-bottom: 25px;}
- .qian{float: left;width: 40px;height: 40px;border-radius: 50%;background-color: orange;text-align: center;line-height: 40px;}
- .icsf{color: white;}
- .ccn{float: left;padding-left: 10px;width: 75%;}
- .ccn .stitle{font-size: 14px;width: 100%;color: #6c6c6c;}
- .sm7{overflow: hidden;}
- .money{float: right;color: orange;font-size: 15px;padding-top: 3px;}
- .ccn .time{color: darkgray;}
- .save{color:white;padding-top: 12px;}
- .year{position: absolute;font-size: 13px;color: darkgray;z-index: 11;}
- [v-cloak] {display: none;}
- </style>
- </head>
- <body>
- <div id="app" v-cloak>
- <header class="mui-bar mui-bar-nav">
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
- <h1 class="mui-title">资金流水</h1>
- <div class="save mui-pull-right" @click="record()">请款记录</div>
- </header>
- <img src="../../images/top.png" class="fm" />
- <div class="mui-content">
- <div class="m_box">
- <div class="year" @click.stop="select()">
- <span>{{year}}年</span>
- <span class="icon"></span>
- </div>
- <div id="main" style="height:220px;"></div>
- <div class="divider">
- <div class="line" style="width: 30%;"></div>
- <div class="text" style="width: 40%;">资金明细</div>
- <div class="line" style="width: 30%;"></div>
- <div class="clear"></div>
- </div>
- <div v-if="list.length>0">
- <div class="items" v-for="(item,index) in list">
- <div class="row">
- <div class="sm7">
- <div class="qian" style="background-color: #4CAF50;" v-if="item.pay_mode=='收款方'">
- <i class="icon icsf">收</i>
- </div>
- <div class="qian" style="background-color: #F44336;" v-if="item.pay_mode=='付款方'">
- <i class="icon icsf">支</i>
- </div>
- <div class="ccn omit">
- <div class="stitle omit">{{item.parttime_title}}</div>
- <div class="time">{{item.pay_date}}</div>
- </div>
- </div>
- <div class="sm3">
- <div class="money" v-if="item.type=='0'" style="color: #4CAF50;">+{{item.amount}}元</div>
- <div class="money" v-if="item.type=='1'" style="color: #F44336;">-{{item.amount}}元</div>
- </div>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- <div class="no_data" v-else style="padding-top: 50px;">
- <i class="icon icon-48"></i><br />没有数据
- </div>
- </div>
- </div>
- </div>
- <script src="../../js/mui.min.js"></script>
- <script src="../../js/app.js"></script>
- <script src="../../js/vue.min.js"></script>
- <script src="../../js/echarts.min.js"></script>
- <script src="../../js/mui.picker.min.js"></script>
- <script type="text/javascript">
- var vm = new Vue({
- el: "#app",
- data: {
- year:getDate('year'),
- list: [],
- xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- chart: []
- },
- mounted: function() {
- this.getData();
- this.getChartData();
- },
- methods: {
- //请款记录
- record:function(){
- open('record', 'record.html', null, 'slide-in-bottom');
- },
- select:function(){
- var dtPicker = new mui.DtPicker({type:'month'});
- dtPicker.show(function (selectItems) {
- vm.year=selectItems.y.text;
- console.log("asdsad");
- vm.getChartData();
- })
- },
- getData: function() {
- request(urls().finance_list, {userId: getUser().id,state:1}, function(res) {
- vm.list = res.data;
- plus.nativeUI.closeWaiting();
- })
- },
- //获取图表数据
- getChartData:function(){
- this.chart=[{series: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]},{series: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}];
- request(urls().chart_list, {userId: getUser().id,year:this.year}, function(res) {
- res.data.forEach((item, index) => {
- if (item.pay_mode == '收款方') {
- vm.chart[0].series[item.pay_date - 1] = item.amount;
- }
- if (item.pay_mode == '付款方') {
- vm.chart[1].series[item.pay_date - 1] = item.amount;
- }
- });
- vm.initChart();
- plus.nativeUI.closeWaiting();
- })
- },
- //初始化图表
- initChart: function() {
- var myChart = echarts.init(document.getElementById('main'));
- var option = {
- toolbox: {
- show: true,
- iconStyle: {
- borderColor: "#6c6c6c",
- },
- feature: {
- magicType: {
- type: ['line', 'bar']
- },
- }
- },
- color: ['#4CAF50', '#F44336'],
- grid: {
- left: '15',
- top: '20%',
- right: '15',
- bottom: '5',
- containLabel: true
- },
- legend: {
- data: ['收入', '支出']
- },
- xAxis: {
- data: vm.xAxis
- },
- yAxis: {},
- series: [{
- name: '收入',
- type: 'bar',
- data: vm.chart[0].series,
- },
- {
- name: '支出',
- type: 'bar',
- data: vm.chart[1].series,
- }
- ]
- };
- myChart.setOption(option);
- }
- }
- })
- </script>
- </body>
- </html>
|
