lzf
/
partTime-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!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">&#xe615;</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">&#xe61a;</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>