bztang-admin/plugins/cultural-space/views/fund/index.blade.php

282 lines
12 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@extends('layouts.base')
<style>
.user{
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
overflow: hidden;
height: 80px;
}
.user .user-avatar{
height: 50px;
width: 50px;
margin-right: 5px;
border-radius: 50%;
overflow: hidden;
}
.user .user-avatar .avatar-image{
width: 100% !important;
height: 100% !important;
}
.user .user-info{
height: 50px;
text-align: left;
}
.user .user-info .user-nickname{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user .user-info .user-status{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.panel-body .label{
display: inline-block;
margin-bottom: 2px;
border-radius: 2px;
font-size: 14px!important;
padding: 5px !important;
text-transform: uppercase;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
}
.panel-body{
padding-top: 0;
margin-bottom: 30px;
overflow: auto;
padding-right: 30px;
}
</style>
@section('content')
<div class="w1200 m0a" id="weightValueIndexContent">
<div class="panel panel-default">
<div class="panel-body">
<el-tabs v-model="tabs_active" @tab-click="changeTabs">
<el-tab-pane label="基金统计" name="show_detail">
<el-row>
<el-col :span="4">
<div class="grid-content bg-purple">基金总数:[[fundData.fund_money || 0]]</div>
</el-col>
<el-col :span="4"><div class="grid-content bg-purple-light">文创豆总数:[[fundData.voucher_number || 0]]</div></el-col>
<el-col :span="4"><div class="grid-content bg-purple">当前价值:[[fundData.current_fee || 0]]</div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light">上次价值:[[fundData.last_fee || 0]]</div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light">历史基金:[[fundData.history_fund_money || 0]]</div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light">历史文创豆:[[fundData.history_number || 0]]</div></el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="用户持有统计" name="show_user">
{{--搜索--}}
<el-form :inline="true" :model="search_list">
<el-form-item label="会员ID">
<el-input v-model="search_list.uid" placeholder="请输入会员ID"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="clickSearch">查询</el-button>
<el-button type="primary" @click="rechargeLegumes">充值</el-button>
</el-form-item>
</el-form>
{{--表单--}}
<el-table :data="list" style="width: 100%" v-if="tabs_active == 'show_user'">
<el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
<el-table-column align="center" prop="member" label="用户信息" width="300">
<template slot-scope="scope">
<div class="user">
<div class="user-avatar">
<img class="avatar-image" :src="scope.row.member.avatar_image || ''" />
</div>
<div class="user-info">
<div class="user-nickname">昵称:[[scope.row.member.nickname || '']]</div>
<div class="user-status">ID[[scope.row.member.uid || '']]</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="change_front">
<template slot="header" slot-scope="scope">
<span class="label label-default">平台总数</span>
<span class="label label-info">用户持有</span>
<span class="label label-warning">占比(%)</span>
</template>
<template slot-scope="scope">
<span class="label label-default">[[scope.row.total_voucher_number || '0.00' ]]</span>
<span class="label label-info">[[scope.row.voucher_number || '0.00' ]]</span>
<span class="label label-warning">[[scope.row.voucher_number_ratio ? scope.row.voucher_number_ratio + '%' : '0%' ]]</span>
</template>
</el-table-column>
<el-table-column align="center" prop="created_at" label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="seeChangeRecord(scope.row.uid)">变更明细</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="明细" name="show_group">
{{--搜索--}}
<el-form :inline="true" :model="search_list">
<el-form-item label="会员ID">
<el-input v-model="search_list.member_id" placeholder="请输入会员ID"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="clickSearch">查询</el-button>
</el-form-item>
</el-form>
{{--表单--}}
<el-table :data="list" style="width: 100%">
<el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
<el-table-column align="center" prop="member" label="商品名称" width="300">
<template slot-scope="scope">
<div class="user">
<div class="user-avatar">
<img class="avatar-image" :src="scope.row.member.avatar_image || ''" />
</div>
<div class="user-info">
<div class="user-nickname">昵称:[[scope.row.member.nickname || '']]</div>
<div class="user-status">ID[[scope.row.member.uid || '']]</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="change_type" label="变更类型" width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.change_type == 1 ? 'danger' : 'success'" disable-transitions>
[[scope.row.change_type == 1 ? '减少' : '增加']]
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" prop="voucher_number" label="变更数量"></el-table-column>
<el-table-column align="center" prop="created_at" label="变更时间"> </el-table-column>
<el-table-column align="center" prop="good_name" label="备注"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
{{--分页--}}
<el-pagination
v-if="total_page > 1"
background
layout="prev, pager, next"
:page-count="total_page"
:current-page="page"
@current-change="changePage">
</el-pagination>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#weightValueIndexContent',
delimiters: ['[[', ']]'],
name: 'cultural_space_index_content',
data: {
fundData:[],
tabs_active: "{{$selected_tab}}" || 'show_detail',
level_list: JSON.parse('{!! json_encode($level_list) !!}'),
// 分页信息
page: 1,
total_page: 1,
list: [],
search_list: {
member_id: '',
team_dividend_agency_level_id: '',
change_type: '',
}
},
watch:{},
mounted () {
this.getData();
},
methods: {
// 获取数据 根据当前选项卡获取对应的信息
getData(){
let _this = this;
let loading = _this.showLoading();
let link = "{!! yzWebUrl('plugin.cultural-space.admin.fund.getfund') !!}";
if(_this.tabs_active === 'show_group') link = "{!! yzWebUrl('plugin.cultural-space.admin.fund.getfundRecord') !!}";
if(_this.tabs_active === 'show_user') link = "{!! yzWebUrl('plugin.cultural-space.admin.contribution.index') !!}";
$.ajax({
url: link,
type: "post",
data: {
page: _this.page,
search: _this.search_list,
is_get: 1,
tabs_active: 'show_group',
},
success: function(result) {
loading.close(0);
let data = result.data;
if(_this.tabs_active == 'show_detail'){
_this.fundData= data;
return;
}
if(parseInt(result.result) === 1){
// 处理数据
_this.list = data.data;
_this.total_page = data.last_page;
}
}
});
},
// 切换选项卡
changeTabs(){
this.page = 1;
this.search_list = {
member_id: '',
team_dividend_agency_level_id: '',
change_type: '',
};
this.total_page = 1;
this.list = [];
this.getData();
},
// 数据分页
changePage(val){
this.page = val;
this.getData();
},
// 相关搜索
clickSearch(){
this.page = 1;
this.getData()
},
// 显示加载动画
showLoading(){
return this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
},
// 用户持有统计中查看某个用户的变更记录
seeChangeRecord(uid){
this.search_list.member_id = uid;
this.page = 1;
this.tabs_active = 'show_group';
this.getData()
},
// 充值文创豆
rechargeLegumes(){
// 查看店长业绩及补助信息
let link = "{{yzWebUrl('plugin.cultural-space.admin.fund.recharge')}}";
let popup = util.ajaxshow(link,'充值文创豆',{
width: $(window).width() * 0.8 > 1200 ? $(window).width() * 0.8 : 1200,
height: $(window).height() * 0.8 > 1200 ? $(window).height() * 0.8 : 1200,
});
}
},
})
</script>
@endsection