sadjv2/anmo-user/pages/my/IntegralStatistics.vue

772 lines
25 KiB
Vue

<template>
<view>
<view class="ciycle">
<view id="IntegralStatisticsTop" ref="IntegralStatisticsTop">
<view class="innerTop">
<view class="innerTopLeft">
<view v-for="item in rangeSelect" :key="item.id"
:class="activeRange == item.id ? 'activeTab' : 'defaultTab'" @click="selectedRange(item)">
{{item.title}}
</view>
</view>
<view class="innerTopRightImport">
<view class="innerTopRight" @tap="showAndHiddenDatePicker">查看更多></view>
</view>
</view>
<view class="innerBottom">
<view class="innerBottomOfTop">
<view class="innerTimer">
{{intervalDatesUltimately}}
</view>
</view>
<view class="IntegralImport">
<view class="totalIntegral">
总积分
</view>
<view class="totalIntegralNumber">
{{totalIntegralNum?totalIntegralNum:0}}
</view>
</view>
<view class="innerBottomOfBottom">
<view class="IntegralClassify">
<view class="">
{{onlineCredits?onlineCredits:0}}
</view>
<view class="IntegralClassifyInnerBottom">
时长积分
</view>
</view>
<view class="IntegralClassify">
<view class="">
{{storedValue?storedValue:0}}
</view>
<view class="IntegralClassifyInnerBottom">
储值积分
</view>
</view>
<view class="IntegralClassify">
<view class="">
{{totalOnlineTime?totalOnlineTime:0}}小时
</view>
<view class="IntegralClassifyInnerBottom">
在线时长
</view>
</view>
</view>
</view>
<uni-datetime-picker type="date" ref="dataPicker" :clear-icon="true" return-type="string"
@change="confirmSelectedDate" v-model="selectedDate" @maskClick="maskClick" />
</view>
<view id="IntegralStatisticsBottom" :style="{height:domNeedHeight == 0? 420 + 'px' : domNeedHeight + 'px'}">
<view class="isbOptions" ref="isbOptions">
<view v-for="item in bottomOptionsInfo" :key="item.id"
:class="activeIntegral == item.id ?'bottomActiveTab optionsInfo':'bottomDefaultTab optionsInfo'"
@tap="integralTypes(item)">
{{item.title}}
</view>
</view>
<view class="optionsDetail">
<!-- 时长积分 -->
<cc-nodata title="暂无数据" v-if="noDataScrollStatus"
:style="{width:100+'%',height:domNeedHeight == 0? 420 + 'px' : domNeedHeight + 'px'}"></cc-nodata>
<view v-if="activeIntegral == 1 && !noDataScrollStatus " class="">
<view v-for="(item,index) in IntegralDetail" :key="index" class="optionsDetailImport">
<view class="dateHeader">
{{item.formattedDate}}
</view>
<view v-for="item2 in item.children" :key="item2.id" class="dataDetail">
<view class="dateAndTime">
{{item2.createTime}}
</view>
<view class="dateAndTime">
{{item2.onlineTime}}
</view>
<view class="dateAndTime">
+{{item2.userRecharge}}
</view>
</view>
<!-- <u-line color="#c7c9cb" margin="20rpx 0rpx" /> -->
</view>
<uniLoadMore color="#007AFF" :iconType="iconType" :status="loadingStatus" :marginBottom="20"
:marginTop="20" v-if="isShowLoadMore" />
</view>
<!-- 储值积分 -->
<view v-if="activeIntegral == 2 && !noDataScrollStatus " class="">
<view v-for="(item,index) in IntegralDetail" :key="item.id" class="optionsDetailImport">
<view class="storedIntegralTop">
<view class="dateHeader">{{item.formattedDate}}</view>
<!-- <view class="storedIntegralTopOfRight">
<view class="">总积分</view>
<view class="">{{item.userRecharge}}</view>
</view> -->
</view>
<view class="storedIntegralMiddle">
<view class="">充值 {{item.userRecharge}} 元</view>
<view class="storedIntegralMiddleofRight">+{{item.userRecharge}}</view>
</view>
<view class="storedIntegralBottom">备注:充值订单号 No.{{item.ordersNo}}</view>
</view>
<uniLoadMore color="#007AFF" :iconType="iconType" :status="loadingStatus" :marginBottom="20"
:marginTop="20" v-if="isShowLoadMore" />
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import * as websocketUtils from 'utils/websocketUtils.js';
import uniLoadMore from "@/uview-ui/components/u-loadmore/u-loadmore.vue";
import {
getXZX,
post
} from "@/common/httpRequest.js";
import {
watch
} from "vue";
export default {
components: {
uniLoadMore,
},
onUnload() {
this.selectedDate = null;
this.activeRange = null;
this.activeIntegral = null;
this.loadingStatus = null;
this.currentPage = null;
this.IntegralDetail = null;
this.totalOnlineTime = null;
this.totalIntegralNum = null;
this.intervalDatesUltimately = null;
this.onlineCredits = null;
this.storedValue = null;
this.pageSize = null;
this.recordLastTimeRange = null;
this.noDataScrollStatus = null;
this.noDataMenuStatus = null;
this.isIntegralHasData = null;
this.iconType = null;
this.rangeSelect = null;
this.bottomOptionsInfo = null;
},
onLaunch() {},
onShow() {
let artificerId = uni.getStorageSync("artificerId");
this.artificerId = artificerId;
this.selectedDate = this.getCurrentTimeStamp();
//获取下方积分明细(列表)
this.getIntegralDetails({
activeIntegralType: 1,
selectedDate: this.selectedDate,
});
this.getHomePageNum();
},
onLoad() {
},
mounted() {
},
onReady() {
//自适应改变列表高度
this.selfAdaptionChangeElemtHeight();
},
//上拉触底
onReachBottom() {
this.currentPage += 1;
this.isScroll = true;
// debugger;
if (this.loadingStatus == "nomore") {
return;
} else {
this.getIntegralDetails({
activeIntegralType: this.activeIntegral,
selectedDate: this.selectedDate,
}, true);
}
},
//下拉刷新
onPullDownRefresh(e) {
this.IntegralDetail = [];
this.totalOnlineTime = [];
this.totalIntegralNum = [];
this.currentPage = 1;
this.totalIntegralNum = null;
this.onlineCredits = null;
this.storedValue = null;
this.totalOnlineTime = null;
this.getHomePageNum();
this.getIntegralDetails({
activeIntegralType: this.activeIntegral,
selectedDate: this.selectedDate,
activeRange
});
},
watch: {
// 监听数据源改变下拉刷新的状态
IntegralDetail(newData, oldData) {
if (newData.length >= 1) {
uni.stopPullDownRefresh();
} else if (newData.length == 0) {
uni.stopPullDownRefresh();
}
},
// loadingStatus(newData, oldData) {
// if (newData == "nomore" && !this.isIntegralHasData && this.isScroll) {
// this.noDataScrollStatus = false;
// } else if (newData == "loading") {
// this.noDataScrollStatus = false;
// } else {
// this.noDataScrollStatus = true;
// }
// },
},
data() {
return {
domNeedHeight: 0, //元素的所需高度
title: "积分明细",
backgroundcolor: "linear-gradient(to bottom, #294856, #1a615b)",
selectedDate: this.currentDate,
activeRange: 1,
activeIntegral: 1,
loadingStatus: "loadmore",
currentPage: 1,
pageSize: 8,
storedValue: null,
onlineCredits: null,
intervalDatesUltimately: null,
totalOnlineTime: null,
totalIntegralNum: null,
recordLastTimeRange: null,
noDataScrollStatus: false,
noDataMenuStatus: false,
isIntegralHasData: null,
iconType: "circle",
isShowLoadMore: null,
rangeSelect: [{
id: 1,
title: "本期",
}, {
id: 2,
title: "上期",
}],
bottomOptionsInfo: [{
id: 1,
title: "时长积分"
}, {
id: 2,
title: "储值积分"
}],
IntegralDetail: [],
artificerId: null,
RangeTimeNum: null,
}
},
methods: {
// 根据admin端配置积分时长字段取值
getCountIntegralRangeTimeNum() {
return getXZX("/app/artificer/integral/time").then(async (res) => {
if (res && res.data) {
this.RangeTimeNum = Number(res.data);
} else {
this.RangeTimeNum = 10;
}
})
},
//自适应改变列表高度
selfAdaptionChangeElemtHeight() {
let _this = this;
try {
uni.getSystemInfo({
success: res => {
if (res && res.windowHeight) {
let query = uni.createSelectorQuery().in(this);
query
.select(".optionsDetail")
.boundingClientRect((data) => {
_this.domNeedHeight = res.windowHeight - data.top - 20;
})
.exec();
}
}
});
} catch (e) {
//TODO handle the exception
}
},
// //获取下方积分明细(列表)
// getIntegralDetails(insideParams, isScroll) {
// this.isShowLoadMore = true;
// this.IntegralDetail = [];
// this.loadingStatus = "loading";
// let {
// activeIntegralType,
// selectedDate,
// } = insideParams;
// this.$Request.postJson("/app/artificer/integral?artificerId=" + this.artificerId + "&current=" + this
// .currentPage + "&size=" +
// this.pageSize + "&date=" + (selectedDate ? selectedDate : this.getCurrentTimeStamp()) +
// "&type=" +
// activeIntegralType,
// ).then(async (
// res) => {
// // res.data[0] = [];
// // 接口不通时
// if (res && res.status == 404) {
// this.loadingStatus = "nomore";
// this.isShowLoadMore = false;
// this.noDataScrollStatus = true;
// return;
// }
// let status = Object.keys(res.data[0]);
// if (res && res.data && status.length == 0) {
// //200但无数据时
// if (!isScroll) {
// //如果isScroll为null时说明不在滚动
// this.noDataScrollStatus = true;
// this.isShowLoadMore = false;
// } else {
// this.noDataScrollStatus = false;
// }
// this.loadingStatus = "nomore";
// } else if (status.length !== 0) {
// //有数据时
// this.noDataScrollStatus = false;
// this.isShowLoadMore = true;
// if (activeIntegralType == 1) {
// //时长积分
// let formatStr = null;
// let formatDataObj = null;
// for (let item in res.data[0]) {
// let formatDataObj = Object.assign({}, res.data[0][item]);
// let formatDataObjOfChildElement = {};
// for (let item2 in formatDataObj) {
// formatDataObjOfChildElement = {
// formattedDate: formatDataObj[item2].formattedDate,
// id: formatDataObj[item2].id,
// type: formatDataObj[item2].type,
// }
// }
// formatDataObjOfChildElement.children = res.data[0][item].filter((item3) =>
// item3);
// formatDataObjOfChildElement.children = formatDataObjOfChildElement.children
// .sort((
// a,
// b) => {
// return new Date(a.formattedDate) - new Date(b.formattedDate);
// })
// await this.getCountIntegralRangeTimeNum();
// for (let i = 0; i < formatDataObjOfChildElement.children.length; i++) {
// formatDataObjOfChildElement
// .children[i]
// .createTime.substring(
// 10);
// formatStr = formatDataObjOfChildElement.children[i].userRecharge * this
// .RangeTimeNum;
// formatDataObjOfChildElement.children[i].onlineTime = `在线${formatStr}分钟`;
// }
// console.log(formatDataObjOfChildElement);
// this.IntegralDetail.push(formatDataObjOfChildElement);
// }
// this.IntegralDetail = this.IntegralDetail.sort((a, b) => {
// return new Date(a.formattedDate) - new Date(b.formattedDate);
// });
// let count = 0;
// for (let i = 0; i < this.IntegralDetail.length; i++) {
// console.log(this.IntegralDetail[i].children);
// for (let j = 0; j < this.IntegralDetail[i].children.length; j++) {
// count++;
// }
// }
// // 对于下拉刷新组件状态的判断
// if (count < res.count) {
// this.loadingStatus = "loadmore";
// } else if (this.IntegralDetail.length > res.count) {
// this.loadingStatus = "nomore";
// } else {
// this.loadingStatus = "nomore";
// }
// return;
// }
// //储值积分
// let formatStr = null;
// let formatDataObj = null;
// for (let item in res.data[0]) {
// let formatDataObj = Object.assign({}, res.data[0][item]);
// let formatDataObjOfChildElement = {};
// for (let item2 in formatDataObj) {
// formatDataObjOfChildElement = {
// formattedDate: formatDataObj[item2].createTime,
// id: formatDataObj[item2].id,
// type: formatDataObj[item2].type,
// userRecharge: formatDataObj[item2].userRecharge,
// ordersNo: formatDataObj[item2].ordersNo,
// }
// }
// this.IntegralDetail.push(formatDataObjOfChildElement);
// this.IntegralDetail = this.IntegralDetail.sort((
// a,
// b) => {
// return new Date(a.formattedDate) - new Date(b.formattedDate);
// })
// this.noDataScrollStatus = false;
// this.noDataMenuStatus = false;
// }
// this.loadingStatus = "loadmore";
// this.isIntegralHasData = true;
// if (this.IntegralDetail.length < res.count) {
// this.loadingStatus = "loadmore";
// } else if (this.IntegralDetail.length > res.count) {
// this.loadingStatus = "nomore";
// } else {
// this.loadingStatus = "nomore";
// }
// }
// })
// },
//获取下方积分明细(列表)
getIntegralDetails(insideParams, isScroll) {
this.isShowLoadMore = true;
this.loadingStatus = "loading";
let {
activeIntegralType,
fundType,
selectedDate,
} = insideParams;
this.$Request.postJson("/app/artificer/integral?artificerId=" + this.artificerId + "&current=" + this
.currentPage + "&size=" +
this.pageSize + "&date=" + (selectedDate ? selectedDate : this.getCurrentTimeStamp()) +
"&type=" +
activeIntegralType + "&fundType=" + fundType,
).then(async (
res) => {
// 接口不通时
if (res && res.code !== 0) {
this.loadingStatus = "nomore";
this.isShowLoadMore = false;
this.noDataScrollStatus = true;
return;
}
if (res && res.data.length == 0) {
//200但无数据时
if (!isScroll) {
//如果isScroll为null时说明不在滚动
this.noDataScrollStatus = true;
this.isShowLoadMore = false;
} else {
this.noDataScrollStatus = false;
}
this.loadingStatus = "nomore";
} else {
//有数据时
this.noDataScrollStatus = false;
this.isShowLoadMore = true;
if (activeIntegralType == 1) {
//时长积分
let formatStr = null;
let count = null;
await this.getCountIntegralRangeTimeNum();
res.data.forEach((item) => {
if (item.children) {
item.children.forEach((child) => {
count++;
formatStr = child.userRecharge * this.RangeTimeNum;
child.onlineTime = `在线${formatStr}分钟`;
})
}
this.IntegralDetail.push(item);
})
// 对于下拉刷新组件状态的判断
if (count < res.count) {
this.loadingStatus = "loadmore";
} else if (count > res.count) {
this.loadingStatus = "nomore";
} else {
this.loadingStatus = "nomore";
}
return;
}
//储值积分
// this.noDataScrollStatus = false;
// this.isShowLoadMore = true;
let formatStr = null;
let formatDataObj = {};
let count = null;
res.data.forEach((item) => {
if (item.children) {
item.children.forEach((child) => {
count++;
console.log(child);
formatDataObj = {
formattedDate: child.createTime,
id: child.id,
type: child.type,
userRecharge: child.userRecharge,
ordersNo: child.ordersNo,
}
this.IntegralDetail.push(formatDataObj);
})
}
})
// for (let item in res.data[0]) {
// let formatDataObj = Object.assign({}, res.data[0][item]);
// let formatDataObjOfChildElement = {};
// for (let item2 in formatDataObj) {
// formatDataObjOfChildElement = {
// formattedDate: formatDataObj[item2].createTime,
// id: formatDataObj[item2].id,
// type: formatDataObj[item2].type,
// userRecharge: formatDataObj[item2].userRecharge,
// ordersNo: formatDataObj[item2].ordersNo,
// }
// }
// this.IntegralDetail.push(formatDataObjOfChildElement);
// this.IntegralDetail = this.IntegralDetail.sort((
// a,
// b) => {
// return new Date(a.formattedDate) - new Date(b.formattedDate);
// })
// }
// this.loadingStatus = "loadmore";
// this.isIntegralHasData = true;
if (count < res.count) {
this.loadingStatus = "loadmore";
} else if (count > res.count) {
this.loadingStatus = "nomore";
} else {
this.loadingStatus = "nomore";
}
}
})
},
//查询积分明细页面三个分类数值型数据
getHomePageNum(recordLastTimeRange = "") {
this.storedValue = null;
this.onlineCredits = null;
this.intervalDatesUltimately = null;
this.totalIntegralNum = null;
this.totalOnlineTime = null;
this.$Request.postJson("/app/artificer/stored/value?date=" + this.selectedDate + "&type=" + this
.activeRange + "&artificerId=" + this.artificerId, ).then((res) => {
if (res && res.data) {
this.storedValue = Math.floor(res.data?.storedValue);
this.onlineCredits = Math.floor(res.data?.onlineCredits);
this.intervalDatesUltimately = res.data?.intervalDatesUltimately;
this.totalIntegralNum = Math.floor(res.data?.sum);
this.totalOnlineTime = Math.floor(res.data?.onLineTime);
}
})
},
//异步展开日期选择Picker
showAndHiddenDatePicker() {
this.$refs.dataPicker.show();
},
//日期选择确认事件
confirmSelectedDate(e) {
this.selectedDate = e;
this.IntegralDetail = [];
this.getHomePageNum(this.selectedDate);
this.getIntegralDetails({
activeIntegralType: this.activeIntegral,
fundType: this.activeRange,
selectedDate: e,
});
},
//点击日期选择框遮罩层事件
maskClick() {},
//选择区间类型(本期/上期)
selectedRange(item) {
if (item && item.id) {
if (item.id == this.activeRange) return;
this.activeRange = item.id;
this.currentPage = 1;
this.isScroll = false;
this.IntegralDetail = [];
this.selectedDate = this.getCurrentTimeStamp();
if (item.id == 1) {
//本期
this.getHomePageNum(this.selectedDate);
this.getIntegralDetails({
activeIntegralType: this.activeIntegral,
fundType: this.activeRange,
selectedDate: this.selectedDate,
});
} else if (item.id == 2) {
//上期
let arr = this.selectedDate?.split("-");
if (arr.length > 0) {
this.recordLastTimeRange = this.lastTimeRangeAlgorithm({
year: arr[0],
month: arr[1],
day: arr[2],
}, );
this.getHomePageNum(this.selectedDate);
this.getIntegralDetails({
activeIntegralType: this.activeIntegral,
fundType: this.activeRange,
selectedDate: this.selectedDate,
});
}
}
}
},
//选择积分类型(时长积分/储值积分)
integralTypes(item) {
if (item && item.id) {
if (item.id == this.activeIntegral) return;
this.activeIntegral = item.id;
this.currentPage = 1;
this.IntegralDetail = [];
this.isScroll = false;
this.loadingStatus = "loadmore";
this.getIntegralDetails({
activeIntegralType: this.activeIntegral,
fundType: this.activeRange,
selectedDate: this.getCurrentTimeStamp(),
});
}
},
//获取当前时间及转换方法
getCurrentTimeStamp(formatDate = null, iscomplex = null) {
let year = "",
month = "",
day = "",
currentDate = "";
if (formatDate) {
let realDateTimeStamp = new Date(formatDate);
year = realDateTimeStamp.getFullYear();
month = realDateTimeStamp.getMonth() + 1;
day = realDateTimeStamp.getDate();
} else {
let dateSet = new Date();
year = dateSet.getFullYear();
month = dateSet.getMonth() + 1;
day = dateSet.getDate();
}
if (iscomplex) {
currentDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
return {
year,
month,
day,
formatDate: currentDate,
};
} else {
currentDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
return currentDate;
}
},
//积分列表中用于计算上期具体日期的算法
lastTimeRangeAlgorithm(currentTimeStampStr, str = null) {
let dateSet = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
26, 27, 28, 29, 30, 31
];
let bigMonth = [1, 2, 3, 5, 7, 8, 10, 12];
//切换时未选择页面中【查看更多】的具体日期时 取 当前时间
//包含两个入口(1.进入组件后直接点击【上期】时只通过时间戳 取 当前时间。
// 2.通过组件内【查看更多】查询上期数据,则以选择的日期作为当前时间算出上个积分周期“范围”。例如【查看更多】内选择的2024-01-05,则通过算法返回的值为2023-12-27,
// 当前业务需求是只需要算出当前积分周期内的随便一天展示即可,也就是10天内的任何一天。)
let formatYear = currentTimeStampStr.year;
let formatMonth = currentTimeStampStr.month;
let formatDateNumType = currentTimeStampStr.day;
//用于调试
// formatYear = 2024;
// formatMonth = 12;
// formatDateNumType = 24;
//以下主要为日期计算逻辑,年月日联动其次
if (formatDateNumType && formatDateNumType >= 1 && formatDateNumType <= 10) {
//第一周期
console.log("firstTimeRange");
let dateTimeStamp = new Date();
if (formatMonth == 3) {
//如果为2月时,将日期集合通过【闰年规则】进行格式化(闰年29天/非闰年28天)
//以下为【闰年规则】
(formatYear % 4 == 0 && formatYear % 100 != 0) || formatYear % 400 == 0 ? dateSet.splice(-2) :
dateSet.splice(-
3);
if (formatDateNumType == 10) {
formatDateNumType = formatDateNumType - 11;
} else {
formatDateNumType = formatDateNumType - 10;
}
//年份、月份及日期联动
if (formatDateNumType <= 0) {
//如果相减为负数说明则为前一年的年底
formatMonth -= 1;
if (formatMonth == 0) {
formatMonth = 12;
formatYear -= 1;
};
}
} else {
//不是2月份的其他月份时
if (formatDateNumType == 10) {
formatDateNumType = formatDateNumType - 11;
} else {
formatDateNumType = formatDateNumType - 10;
}
//年份、月份及日期联动
if (formatDateNumType <= 0) {
//如果相减为负数说明则为前一年的年底
formatMonth -= 1;
if (formatMonth == 0) {
formatMonth = 12;
formatYear -= 1;
}
}
//用于判断大小月(30天/31天)
let index = bigMonth.indexOf(formatMonth);
if (index && index < 0 && index !== 1) {
dateSet.splice(-1);
}
}
let lastDateArrSet = dateSet.splice(formatDateNumType);
if (lastDateArrSet.length >= 1) formatDateNumType = lastDateArrSet[0];
} else if (formatDateNumType && formatDateNumType >= 11 && formatDateNumType <= 20) {
//第二周期
console.log("secondTimeRange");
formatDateNumType = formatDateNumType - 10;
} else if (formatDateNumType && formatDateNumType >= 21) {
//第三周期
console.log("thirdTimeRange");
if (formatDateNumType >= 30 && formatDateNumType <= 31) {
//自然日除了2月份以外时
formatDateNumType = formatDateNumType - 11;
} else {
//自然日二月份时
formatDateNumType = formatDateNumType - 10;
}
}
console.log(formatYear, formatMonth, formatDateNumType, "达瓦达瓦");
//最终返回值
if (formatMonth && formatMonth.length > 1) {
return formatYear + "-" + formatMonth + "-" + (
formatDateNumType <
10 ? '0' + formatDateNumType : formatDateNumType);
return;
}
return formatYear + "-" + (formatMonth < 10 ? '0' + formatMonth : formatMonth) + "-" + (
formatDateNumType <
10 ? '0' + formatDateNumType : formatDateNumType);
},
}
}
</script>
<style scoped>
@import "@/static/css/IntegralStatistics.css";
</style>
<style>
page {
background-color: #f1f1f1;
height: 100%;
}
</style>