<!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" />
<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;}
[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>
<span class="save mui-pull-right" @click="save()">请款记录</span>
</header>
<img src="../../images/top.png" class="fm" />
<div class="mui-content">
<div class="m_box">
<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" @click="preview(item)">
<div class="row">
<div class="sm7">
<div class="qian"><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.pay_mode=='收款方'">+{{item.amount}}</div>
<div class="money" v-if="item.pay_mode=='付款方'" 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 type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
list: []
},
mounted: function() {
this.getData();
this.initChart();
},
methods: {
//获取数据
getData: function() {
request(urls().finance_list, {userId: getUser().id}, function(res) {
vm.list = res.data;
console.log("asd:"+JSON.stringify(res));
plus.nativeUI.closeWaiting();
})
request(urls().chart_list, {userId: getUser().id}, function(res) {
vm.list = res.data;
console.log("asd:"+JSON.stringify(res));
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: '30%',
right: '15',
bottom: '5',
containLabel: true
},
legend: {
data: ['收入', '支出']
},
xAxis: {
data: ['6月', '7月', '8月', '9月', '10月']
},
yAxis: {},
series: [{
name: '收入',
type: 'bar',
data: [300, 200, 320, 1000, 1600],
markPoint: {
label: {
color: 'white', //气泡中字体颜色
},
data: [{
type: 'max',
name: 'Max'
}]
}
},
{
name: '支出',
type: 'bar',
data: [100, 150, 500, 200, 650]
},
]
};
myChart.setOption(option);
}
}
})
</script>
</body>
</html>