|
@@ -11,7 +11,7 @@
|
|
|
.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{padding: 10px 5px 10px 0px;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;}
|
|
@@ -22,8 +22,13 @@
|
|
|
.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;}
|
|
|
+ .year{position: absolute;font-size: 13px;color: darkgray;z-index: 2;}
|
|
|
+ .mask{z-index: 3;}
|
|
|
+ .popup{position: fixed;top: 20%;width: 100%;}
|
|
|
+ .popup .conte{width: 85%;position: relative; background-color: white;margin: 0 auto;padding: 15px;border-radius: 8px;box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.1);}
|
|
|
+ .zzxq{margin: 0 auto;border-radius: 20px;margin-top: -30px;position:relative;background-color: #4CAF50;width: 120px;text-align: center;color: white;padding: 7px;}
|
|
|
+ .btn{margin-top: 25px;background-color: #9E9E9E;}
|
|
|
+ [v-cloak] {display: none;}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
@@ -48,7 +53,7 @@
|
|
|
<div class="clear"></div>
|
|
|
</div>
|
|
|
<div v-if="list.length>0">
|
|
|
- <div class="items" v-for="(item,index) in list">
|
|
|
+ <div class="items" v-for="(item,index) in list" @click="detail(item)">
|
|
|
<div class="row">
|
|
|
<div class="sm7">
|
|
|
<div class="qian" style="background-color: #4CAF50;" v-if="item.type==0">
|
|
@@ -59,7 +64,14 @@
|
|
|
</div>
|
|
|
<div class="ccn omit">
|
|
|
<div class="stitle omit">{{item.parttime_title}}</div>
|
|
|
- <div class="time">{{item.pay_date}}</div>
|
|
|
+ <div class="time" v-if="item.type==1">
|
|
|
+ <span>{{item.pay_date.substring(5,16)}} </span>
|
|
|
+ <span>转给:{{item.nickName}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="time" v-if="item.type==0">
|
|
|
+ <span>{{item.q_date.substring(5,16)}} </span>
|
|
|
+ <span>收到转账</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="sm3">
|
|
@@ -75,6 +87,116 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="mask" v-if="show">
|
|
|
+ <div class="popup">
|
|
|
+ <div class="conte">
|
|
|
+ <div class="zzxq">转账详情</div>
|
|
|
+ <div class="row" v-if="item.type==1">
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">项目:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.parttime_title}}{{item.parttime_title}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">收款人:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.nickName}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">联系电话:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.account}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">付款金额:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.amount}}元</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">付款方式:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.pay_mode}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">卡号:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.kh}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">持卡人姓名:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.kName}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">转账时间:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.pay_date}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">转账状态:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">平台已确认</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row" v-if="item.type==0">
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">项目:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.parttime_title}}{{item.parttime_title}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">付款金额:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.amount}}元</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">付款方式:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.pay_mode}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">卡号:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{user.kh}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">持卡人姓名:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{user.kName}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">转账时间:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">{{item.q_date}}</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ <div class="ditem">
|
|
|
+ <span class="fname">收款状态:</span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="bc omit">甲方已确认</span>
|
|
|
+ <div class="clear"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <button class="btn" @click="show=false">关闭</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<script src="../../js/mui.min.js"></script>
|
|
|
<script src="../../js/app.js"></script>
|
|
@@ -85,6 +207,9 @@
|
|
|
var vm = new Vue({
|
|
|
el: "#app",
|
|
|
data: {
|
|
|
+ user:getUser(),
|
|
|
+ show:false,
|
|
|
+ item:{},
|
|
|
year:getDate('year'),
|
|
|
list: [],
|
|
|
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
@@ -103,10 +228,13 @@
|
|
|
var dtPicker = new mui.DtPicker({type:'month'});
|
|
|
dtPicker.show(function (selectItems) {
|
|
|
vm.year=selectItems.y.text;
|
|
|
- console.log("asdsad");
|
|
|
vm.getChartData();
|
|
|
})
|
|
|
},
|
|
|
+ detail(item){
|
|
|
+ vm.show=true;
|
|
|
+ vm.item=item;
|
|
|
+ },
|
|
|
getData: function() {
|
|
|
request(urls().finance_list, {userId: getUser().id,state:1}, function(res) {
|
|
|
vm.list = res.data;
|