feat: 初始化
This commit is contained in:
230
pages/report/report81/index.scss
Normal file
230
pages/report/report81/index.scss
Normal file
@ -0,0 +1,230 @@
|
||||
.container {
|
||||
padding: 11px 14px 10px 18px;
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
.searchInput {
|
||||
height: 34px;
|
||||
background: rgba(247, 248, 250, 1);
|
||||
border: none;
|
||||
flex-grow: 1;
|
||||
padding: 0 18rpx;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.btn {
|
||||
padding-right: 36rpx;
|
||||
padding-left: 38rpx;
|
||||
height: 34px;
|
||||
min-width: 168rpx;
|
||||
.filterText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search2 {
|
||||
padding-top: 8px;
|
||||
//display: flex;
|
||||
justify-content: left;
|
||||
//gap: 16rpx;
|
||||
.btn {
|
||||
width: 242rpx;
|
||||
height: 34px;
|
||||
background: rgba(247, 248, 250, 1);
|
||||
margin: 0;
|
||||
.filterText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(41, 187, 228, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: -1px 0px 5px 1px rgba(0, 0, 0, 0.15);
|
||||
margin: 16px 4px 0px 4px;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.itemTitle {
|
||||
width: 122px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.title-bg {
|
||||
width: 122px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
}
|
||||
.title-text {
|
||||
color: rgba(39, 65, 125, 1);
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
margin: 0px 20px 16px 20px;
|
||||
.column {
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
line-height: 22px;
|
||||
word-break:break-all;
|
||||
}
|
||||
.value {
|
||||
width: 70%;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
line-height: 24px;
|
||||
word-break:break-all;
|
||||
}
|
||||
.textarea {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
line-height: 24px;
|
||||
padding: 10px 17px;
|
||||
word-break:break-all;
|
||||
background: rgba(247, 248, 250, 1);
|
||||
}
|
||||
}
|
||||
.bottomItem {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(156, 156, 156, 1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.filterRow {
|
||||
padding: 0 32rpx;
|
||||
margin-bottom: 16px;
|
||||
.filterTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 21px;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
.filterInput {
|
||||
padding: 0 13px;
|
||||
height: 34px;
|
||||
background: rgba(247, 248, 250, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.allotRow {
|
||||
padding: 0 32rpx;
|
||||
margin-bottom: 16px;
|
||||
.allotItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
|
||||
.searchInput {
|
||||
height: 34px;
|
||||
background: rgba(247, 248, 250, 1);
|
||||
border: none;
|
||||
flex-grow: 1;
|
||||
padding: 0 18rpx;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.btn {
|
||||
padding-right: 36rpx;
|
||||
padding-left: 38rpx;
|
||||
height: 34px;
|
||||
min-width: 168rpx;
|
||||
.filterText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.userBox {
|
||||
margin-top: 24px;
|
||||
max-height: 150px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.operateBox {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.popup3View {
|
||||
padding: 44px 16rpx 10px 16rpx;
|
||||
.filterRow {
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
.filterLabel{
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
}
|
||||
.filterValue{
|
||||
flex: 1;
|
||||
padding-left: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
margin-bottom: 16px;
|
||||
.filterLabel {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.operateBox {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.inTheEnd {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::v-deep .uni-data-checklist .checklist-group .checklist-box.is--list.is-list-border{
|
||||
border-top: none;
|
||||
}
|
317
pages/report/report81/index.vue
Normal file
317
pages/report/report81/index.vue
Normal file
@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<NavBar />
|
||||
<view class="container">
|
||||
|
||||
<view class="title">
|
||||
<PageTitle :title="$t('home.report.title')" />
|
||||
</view>
|
||||
<view style="margin-top: 20px">
|
||||
<Segmented
|
||||
styleType="text"
|
||||
fontSize="16px"
|
||||
gap="6px"
|
||||
:current="current"
|
||||
:values="items"
|
||||
@clickItem="onClickItem"
|
||||
inActiveColor="#999999"
|
||||
activeColor="#000"
|
||||
></Segmented>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: 20px">
|
||||
<view class="search">
|
||||
<input class="searchInput" v-model="queryListParams.qcc_fuzzy_search" :placeholder="$t('home.customer.sellPage.name')+'/'+$t('home.customer.sellPage.email')">
|
||||
<button class="btn primaryButton" @click="search">
|
||||
<image src="/static/search.svg" mode="aspectFit" style="width: 14px;height: 14px"></image>
|
||||
<text class="filterText">{{ $t('form.search') }}</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="search2">
|
||||
<button class="btn primaryButton" @click="openFilter">
|
||||
<image src="/static/filtrate.svg" mode="aspectFit" style="width: 20px;height: 20px"></image>
|
||||
<text class="filterText">{{ $t('common.filter') }}</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<scroll-view style="height: calc(100vh - 260px);" scroll-y="true" @scrolltolower="scrolltolowerQuery" >
|
||||
<view class="item" v-for="item in records">
|
||||
<view class="top">
|
||||
<view class="itemTitle">
|
||||
<image class="title-bg" src="/static/titleIcon2.svg" mode="aspectFit"></image>
|
||||
<text class="title-text"> </text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-collapse class="box" style="margin-top: 12px" >
|
||||
<uni-collapse-item title-border="none" :show-arrow="false" :border="false" :open="item.if_show" :disabled="true">
|
||||
<template v-slot:title>
|
||||
|
||||
<view class="row" v-show="filterColumns.email">
|
||||
<view class="column">{{ filterColumns.email?.title }}</view>
|
||||
<view class="value">{{ item.email }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.ib_level">
|
||||
<view class="column">{{ filterColumns.ib_level?.title }}</view>
|
||||
<view class="value">{{ item.ib_level }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.ib_num">
|
||||
<view class="column">{{ filterColumns.ib_num?.title }}</view>
|
||||
<view class="value">{{ item.ib_num }}</view>
|
||||
</view>
|
||||
|
||||
<view class="bottomItem" v-show="!item.if_show" style="padding-bottom: 8px">
|
||||
<text @click="showItem(item)">{{ $t('home.customer.sellPage.open') }}</text>
|
||||
<image @click="showItem(item)" src="/static/openIcon.svg" mode="aspectFit" style="width: 14px;height: 8px"></image>
|
||||
</view>
|
||||
</template>
|
||||
<view class="content" style="padding-bottom: 8px">
|
||||
|
||||
<view class="row" v-show="filterColumns.cus_num">
|
||||
<view class="column">{{ filterColumns.cus_num?.title }}</view>
|
||||
<view class="value">{{ item.cus_num }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.gold_in">
|
||||
<view class="column">{{ filterColumns.gold_in?.title }}</view>
|
||||
<view class="value">{{ item.gold_in }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.gold_in_total">
|
||||
<view class="column">{{ filterColumns.gold_in_total?.title }}</view>
|
||||
<view class="value">{{ item.gold_in_total }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.mt_out">
|
||||
<view class="column">{{ filterColumns.mt_out?.title }}</view>
|
||||
<view class="value">{{ item.mt_out }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.mt_out_total">
|
||||
<view class="column">{{ filterColumns.mt_out_total?.title }}</view>
|
||||
<view class="value">{{ item.mt_out_total }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.fund_out">
|
||||
<view class="column">{{ filterColumns.fund_out?.title }}</view>
|
||||
<view class="value">{{ item.fund_out }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.fund_out_total">
|
||||
<view class="column">{{ filterColumns.fund_out_total?.title }}</view>
|
||||
<view class="value">{{ item.fund_out_total }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.net_deposit">
|
||||
<view class="column">{{ filterColumns.net_deposit?.title }}</view>
|
||||
<view class="value">{{ item.net_deposit }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.net_deposit_total">
|
||||
<view class="column">{{ filterColumns.net_deposit_total?.title }}</view>
|
||||
<view class="value">{{ item.net_deposit_total }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.rebate_amount">
|
||||
<view class="column">{{ filterColumns.rebate_amount?.title }}</view>
|
||||
<view class="value">{{ item.rebate_amount }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.volume">
|
||||
<view class="column">{{ filterColumns.volume?.title }}</view>
|
||||
<view class="value">{{ item.volume }}</view>
|
||||
</view>
|
||||
|
||||
<view class="row" v-show="filterColumns.volume_total">
|
||||
<view class="column">{{ filterColumns.volume_total?.title }}</view>
|
||||
<view class="value">{{ item.volume_total }}</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bottomItem">
|
||||
<text @click="hideItem(item)">{{ $t('home.customer.sellPage.packUp') }}</text>
|
||||
<image @click="hideItem(item)" src="/static/packUpIcon.svg" mode="aspectFit" style="width: 14px;height: 8px"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
<Spin v-show="loading" />
|
||||
<view class="inTheEnd" v-show="inTheEnd">{{ $t('common.inTheEnd') }}</view>
|
||||
<view class="inTheEnd" v-show="noData">{{ $t('common.noData') }}</view>
|
||||
<view style="height: 20px;width: 100%;"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="popup" background-color="#fff" type="bottom">
|
||||
<view style="padding: 37px 0;">
|
||||
<scroll-view style="max-height: 70vh;" scroll-y="true">
|
||||
|
||||
|
||||
<view class="filterRow">
|
||||
<view class="filterTitle">
|
||||
<text>{{ $t('activity.createTime') }}</text>
|
||||
</view>
|
||||
<uni-datetime-picker ref="timeRange" class="time" type="daterange" v-model="timeRange"/>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<view style="display: flex;gap: 12px;padding: 14px 16px;">
|
||||
<buttom class="btn secondaryButton" @click="reset">
|
||||
{{ $t('home.customer.sellPage.reset') }}
|
||||
</buttom>
|
||||
<buttom class="btn primaryButton" @click="search">
|
||||
{{ $t('home.customer.sellPage.confirm') }}
|
||||
</buttom>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Segmented from '@/pages/components/segmented/index.vue';
|
||||
import UniCollapse from "../../../uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue";
|
||||
import UniDataSelect from "../../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
|
||||
import { getTableData } from '@/services/report/report.ts';
|
||||
import { getFilterColumns, queryMenuList } from '@/services/home/home.ts';
|
||||
import { UserLanguage, reportMenu } from '@/utils/const';
|
||||
import { getMtServer } from '@/services/home/home.ts';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return{
|
||||
url:"/saleH5/report/getReport81",
|
||||
qcc_page_id:681,
|
||||
loading:false,
|
||||
current: 2,
|
||||
items: [],
|
||||
itemsLink: [],
|
||||
inTheEnd:false,
|
||||
noData:false,
|
||||
queryListParams:{
|
||||
app:"md",
|
||||
qcc_fuzzy_search:null,
|
||||
curr_page:1,
|
||||
page_size:5,
|
||||
time_start:null,
|
||||
time_end:null,
|
||||
},
|
||||
records:[],
|
||||
totalRecords:0,
|
||||
filterColumns:{},
|
||||
mtServerList:[],
|
||||
timeRange:['','']
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
async getMenuListData() {
|
||||
const res = await queryMenuList();
|
||||
if (res && res.code === 0) {
|
||||
for (var i = 0; i < res.data.length; i++) {
|
||||
const { saleRouteKey } = res.data[i]
|
||||
if (saleRouteKey == 'report') {
|
||||
if (res.data[i].children.length>0){
|
||||
let index = 0;
|
||||
for (let j = 0; j < res.data[i].children.length; j++) {
|
||||
if (res.data[i].children[j].saleRouteKey !=null && res.data[i].children[j].saleRouteKey !=''){
|
||||
this.items.push(res.data[i].children[j].name)
|
||||
this.itemsLink.push(reportMenu[res.data[i].children[j].saleRouteKey])
|
||||
if (res.data[i].children[j].saleRouteKey == 'report81'){
|
||||
this.current = index
|
||||
}
|
||||
index++
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onClickItem(e) {
|
||||
if (this.current != e.currentIndex) {
|
||||
uni.navigateTo({url: this.itemsLink[e.currentIndex]});
|
||||
}
|
||||
},
|
||||
search(){
|
||||
this.queryListParams.curr_page = 1
|
||||
this.queryListParams.page_size = 5
|
||||
this.queryList()
|
||||
},
|
||||
async queryList(){
|
||||
this.$refs.popup.close();
|
||||
this.records = []
|
||||
this.loading=true
|
||||
this.queryListParams.time_start = this.timeRange[0]
|
||||
this.queryListParams.time_end = this.timeRange[1]
|
||||
const res = await getTableData(this.url,this.queryListParams);
|
||||
if (res && res.code === 0) {
|
||||
let data = res.data;
|
||||
this.records = data.records
|
||||
}
|
||||
if (this.records == null || this.records.length == 0){
|
||||
this.noData = true
|
||||
}else {
|
||||
this.noData = false
|
||||
}
|
||||
|
||||
this.loading=false
|
||||
},
|
||||
async getFilterColumns(){
|
||||
const res = await getFilterColumns({
|
||||
qcc_page_id: this.qcc_page_id,
|
||||
qcc_language: UserLanguage
|
||||
});
|
||||
if (res && res.code === 0) {
|
||||
let data = res.data
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.filterColumns[data[i].field]=data[i]
|
||||
}
|
||||
}
|
||||
},
|
||||
showItem(user) {
|
||||
user.if_show = true;
|
||||
},
|
||||
hideItem(user) {
|
||||
user.if_show = false;
|
||||
},
|
||||
async scrolltolowerQuery(){
|
||||
if ((this.queryListParams.page_size + 5)<(this.totalRecords + 5)){
|
||||
this.inTheEnd = false;
|
||||
this.queryListParams.page_size = this.queryListParams.page_size +5
|
||||
this.queryList()
|
||||
}else {
|
||||
this.inTheEnd = true;
|
||||
}
|
||||
},
|
||||
openFilter() {
|
||||
this.$refs.popup.open()
|
||||
},
|
||||
reset() {
|
||||
this.queryListParams.curr_page=1
|
||||
this.queryListParams.page_size=5
|
||||
this.$refs.timeRange.clear()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getMenuListData()
|
||||
this.queryList()
|
||||
this.getFilterColumns()
|
||||
},
|
||||
components: {
|
||||
Segmented,
|
||||
UniCollapse,
|
||||
UniDataSelect
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
.is-input-border {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user