321 行
12 KiB
HTML
可执行文件
321 行
12 KiB
HTML
可执行文件
<!DOCTYPE html>
|
|
<html>
|
|
<!--[1.2.91]-->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vip/css/reset.css"/>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vip/css/estatements.css"/>
|
|
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vip/css/integralRecord.css">
|
|
|
|
<link rel="stylesheet" href="__PUBLIC__/vue/element-ui.css">
|
|
<title>余额记录</title>
|
|
<style>
|
|
.integralRecordList:nth-last-child(1){
|
|
margin-bottom: 50px;
|
|
}
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
.integralRecord{
|
|
flex-shrink: 0;
|
|
}
|
|
.integralRecordBox{
|
|
flex:1;
|
|
overflow-y: auto;
|
|
}
|
|
.goods_detail-list {
|
|
text-align: right;
|
|
font-size: 12px;
|
|
color: #6FA1FB;
|
|
}
|
|
.wrap{
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#app{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
.dropload-load {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
color: #c2ccd1;
|
|
margin-top: 10px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
}
|
|
.loading {
|
|
display: inline-block;
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 100%;
|
|
margin: 6px;
|
|
border: 2px solid #666;
|
|
border-bottom-color: transparent;
|
|
vertical-align: middle;
|
|
-webkit-animation: rotate 0.75s linear infinite;
|
|
animation: rotate 0.75s linear infinite;
|
|
}
|
|
@-webkit-keyframes rotate {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
50% { -webkit-transform: rotate(180deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
@keyframes rotate {
|
|
0% { transform: rotate(0deg); }
|
|
50% { transform: rotate(180deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.vip-details{
|
|
margin-bottom: 20px;
|
|
}
|
|
.vip-details-list{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 3px 0;
|
|
}
|
|
.vip-details-title{
|
|
text-align: center;
|
|
font-size: 18px;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
padding-bottom: 15px;
|
|
}
|
|
.vip-details-left{
|
|
color: #333333;
|
|
font-size: 14px;
|
|
}
|
|
.vip-details-right{
|
|
padding-left: 10px;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<div class="wrap">
|
|
<!-- 统计 -->
|
|
<div class="integralRecord">
|
|
<div class="integral" style="border-right: 1px solid rgb(241,241,241);">
|
|
<div class="integralText">充值</div>
|
|
<div class="integralNum">{{sum}}元</div>
|
|
</div>
|
|
<div class="Record">
|
|
<div class="RecordText">消费</div>
|
|
<div class="RecordNum">{{less}}元</div>
|
|
</div>
|
|
</div>
|
|
<!-- 记录 -->
|
|
<div class="integralRecordBox">
|
|
<template v-for="(val,key) in recharge_order_list">
|
|
<div class="integralRecordList">
|
|
<div class="integralRecordTitle" @click="pack_up(key)">
|
|
<span>{{key}}</span>
|
|
<i class="iconfont" :class="val.show?'icon-xiangxia':'icon-xiangshang'"></i>
|
|
</div>
|
|
<div class="content_con" v-show="val.show">
|
|
<div class="integralRecordContent" v-for="value in val.list" style="border-bottom: 1px solid rgba(245,245,245,1);">
|
|
<div class="record">
|
|
<span class="recordWord">{{value.remark}}</span>
|
|
<span class="recordNum" style="color:#ff877e" v-if="value.type == 1 || value.type == 3 || value.type == 5 || value.type == 6 || value.type == 7 || value.type == 8">+{{value.all_money}}元</span>
|
|
<span class="recordNum" v-else>-{{value.all_money}}元</span>
|
|
</div>
|
|
<div class="integralRecordTime">{{value.timedetail}}</div>
|
|
<div v-if="value.type == 2 || value.type == 3" class="goods_detail-list" @click="goods_detail_list(value.bill_id)">查看详情</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="dropload-load" v-if="loading">
|
|
<span class="loading"></span>
|
|
<span>加载中...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 对话框 -->
|
|
<el-dialog :visible.sync="look_detail" width="90%" top="5vh" :show-close="false" :before-close="close_goods_detail">
|
|
<div v-loading="loading" element-loading-text="数据加载中，请等待" element-loading-spinner="el-icon-loading">
|
|
<div class="vip-details" v-if="sell_show">
|
|
<div class="vip-details-title">订单详情</div>
|
|
<div class="vip-details-list">
|
|
<div class="vip-details-left">订单号:</div>
|
|
<div class="vip-details-right">{{order_data.order_no}}</div>
|
|
</div>
|
|
<div class="vip-details-list">
|
|
<div class="vip-details-left">门店名:</div>
|
|
<div class="vip-details-right">{{order_data.store_name}}</div>
|
|
</div>
|
|
<div class="vip-details-list">
|
|
<div class="vip-details-left">场景:</div>
|
|
<div class="vip-details-right">{{order_data.sell_scene}}</div>
|
|
</div>
|
|
<div class="vip-details-list">
|
|
<div class="vip-details-left">金额:</div>
|
|
<div class="vip-details-right">￥{{order_data.sell_money}}</div>
|
|
</div>
|
|
<div class="vip-details-list">
|
|
<div class="vip-details-left">时间:</div>
|
|
<div class="vip-details-right">{{order_data.sell_time}}</div>
|
|
</div>
|
|
<el-table :data="sell_list" :center="true" size="mini" border>
|
|
<el-table-column prop="goods_name" label="商品" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="num" label="数量"></el-table-column>
|
|
<el-table-column prop="money" label="金额"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div v-else style="text-align: center;color: #99a9bf;">
|
|
<span>暂无数据</span>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</body>
|
|
<script src="__PUBLIC__/vip/js/jquery-3.2.1.min.js"></script>
|
|
<script src="__PUBLIC__/vip/js/window-reload.js"></script>
|
|
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
|
<script src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
|
<script src="__PUBLIC__/vue/element-ui.js"></script>
|
|
<script type="text/javascript">
|
|
/* element 组件 */
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
sum: 0, // 充值金额
|
|
less: 0, // 消费金额
|
|
look_detail: false, // 查看详情
|
|
recharge_order_list: [], // 余额记录
|
|
order_lists: [], // 获取的数组
|
|
pack_up_bottom: true, // 下拉到底
|
|
page: 1, // 分页
|
|
limit: 20, // 数量
|
|
loading: false, // 加载
|
|
sell_show:true, // 显示
|
|
order_data:{
|
|
order_id:'', // 订单号
|
|
store_name:'', // 门点名称
|
|
sell_scene:'', // 销售场景
|
|
sell_money:'', // 销售金额
|
|
sell_time:'', // 销售金额
|
|
},
|
|
sell_list: [], // 商品详情列表
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/* 获取金额统计 */
|
|
get_money_statistics(){
|
|
var that = this;
|
|
$.ajax({
|
|
url:"{:U('get_money_statistics')}",
|
|
type:"post",
|
|
success:function(res){
|
|
that.sum = res.sum;
|
|
that.less = res.less;
|
|
}
|
|
})
|
|
},
|
|
|
|
/* 获取余额记录 */
|
|
get_recharge_order_list(){
|
|
var that = this;
|
|
if(that.loading == true){
|
|
return false;
|
|
}
|
|
that.loading = true;
|
|
$.ajax({
|
|
url:"{:U('get_recharge_order_list')}",
|
|
type:"post",
|
|
data:{page:that.page,limit:that.limit,order_lists:that.order_lists},
|
|
success:function(res){
|
|
if(res.status == 2){
|
|
that.loading = false;
|
|
that.recharge_order_list = res.list;
|
|
that.order_lists = res.order_lists;
|
|
}else if(res.status == 1){
|
|
that.loading = false;
|
|
that.pack_up_bottom = false;
|
|
return false;
|
|
}else{
|
|
that.loading = false;
|
|
return false;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
/* 收起 */
|
|
pack_up(key){
|
|
var that = this;
|
|
var recharge_order_list = that.recharge_order_list;
|
|
recharge_order_list[key].show = !recharge_order_list[key].show;
|
|
that.recharge_order_list = recharge_order_list;
|
|
},
|
|
|
|
/* 查看详情 */
|
|
goods_detail_list(bill_id){
|
|
var that = this;
|
|
$.ajax({
|
|
url:"{:U('get_goods_list')}",
|
|
type:"post",
|
|
data:{bill_id:bill_id},
|
|
success:function(res){
|
|
that.look_detail = true;
|
|
if(res.status == 1){
|
|
that.order_data = res.order_data
|
|
that.sell_list = res.sell_list;
|
|
that.sell_show = true;
|
|
}else{
|
|
that.sell_show = false;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
/* 关闭弹出 */
|
|
close_goods_detail(){
|
|
var order_data = {
|
|
order_id:'',
|
|
store_name:'',
|
|
sell_scene:'',
|
|
sell_money:'',
|
|
sell_time:'',
|
|
};
|
|
this.order_data = order_data;
|
|
this.sell_list = [];
|
|
this.look_detail = false;
|
|
},
|
|
|
|
/* 上拉加载 */
|
|
handleScroll: function (e) {
|
|
if(this.pack_up_bottom == false){
|
|
return false;
|
|
}
|
|
var scrollTop = e.target.scrollTop;
|
|
var windowHeight = e.target.clientHeight;
|
|
var scrollHeight = e.target.scrollHeight;
|
|
if (scrollTop + windowHeight >= scrollHeight - 20) {
|
|
var page = this.page;
|
|
this.page = page + 1;
|
|
this.get_recharge_order_list();
|
|
}
|
|
},
|
|
},
|
|
|
|
created: function () {
|
|
this.get_money_statistics();
|
|
this.get_recharge_order_list();
|
|
},
|
|
|
|
/* 监听上拉 */
|
|
mounted: function () {
|
|
document.querySelector('#app').addEventListener('scroll', this.handleScroll, true);
|
|
},
|
|
});
|
|
</script>
|
|
</html>
|