738 lines
18 KiB
Vue
738 lines
18 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="markTitle">
|
|
<span class="mark">{{ memberPoint || "" }}</span>
|
|
<span class="text">可用积分</span>
|
|
</div>
|
|
|
|
<div class="detailBox">
|
|
<div class="tabBox">
|
|
<div class="title">积分明细</div>
|
|
|
|
<div class="tabs">
|
|
<div
|
|
:class="selectTab === item.value ? 'tabItem selectTab' : 'tabItem'"
|
|
v-for="(item, index) in tabList"
|
|
:key="index"
|
|
@click="handleChangeSelectTab(item.value)"
|
|
>
|
|
{{ item.label || "" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="markList">
|
|
<div
|
|
style="width: 100%; height: 100%"
|
|
v-if="showList && showList.length > 0"
|
|
>
|
|
<div class="markItem" v-for="(item, index) in showList" :key="index">
|
|
<div class="itemTitle">
|
|
<image class="titleIcon" src="/static/images/home/markIcon.png" />
|
|
<span class="label">{{ item.label || "-" }}获取</span>
|
|
<span class="value">{{ item.obtain || "-" }}</span>
|
|
<span class="label">已使用</span>
|
|
<span class="value">{{ item.consume || "-" }}</span>
|
|
</div>
|
|
<div
|
|
class="childrenList"
|
|
v-if="item.children && item.children.length > 0"
|
|
>
|
|
<div
|
|
class="itemContent"
|
|
v-for="(subItem, subIndex) in item.children"
|
|
:key="subIndex"
|
|
>
|
|
<div class="top">
|
|
<div class="topLeft">
|
|
{{ subItem.SERVERPART_NAME + subItem.SHOPNAME }}
|
|
</div>
|
|
<div class="topRight">
|
|
<span class="unit">{{
|
|
subItem.POINT_TYPE > 0
|
|
? "+"
|
|
: subItem.POINT_TYPE < 0
|
|
? "-"
|
|
: ""
|
|
}}</span>
|
|
<span class="value">{{
|
|
subItem.CURRENT_POINT || "-"
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">{{ subItem.OPERATE_DATE || "-" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="width: 100%; height: 100%"
|
|
v-if="!(showList && showList.length > 0)"
|
|
>
|
|
<no-data :text="'您暂无积分记录'" :isShow="true" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="consumption" v-if="false">
|
|
<div class="consumption-card">
|
|
<div class="card-block">
|
|
<div>
|
|
<div>可用积分</div>
|
|
<div class="amount">{{ memberPoint }}</div>
|
|
</div>
|
|
|
|
<navigator
|
|
open-type="redirect"
|
|
url="/pages/homeFn/consumption/index"
|
|
class="jump-btn"
|
|
>
|
|
消费记录
|
|
<image
|
|
src="https://eshangtech.com/ShopICO/consumption/to-other.png"
|
|
style="width: 25rpx; height: 25rpx"
|
|
mode="aspectFit"
|
|
></image>
|
|
</navigator>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="consumption-title">
|
|
<div>本月积分</div>
|
|
<div class="consumption-title-des">
|
|
获取:
|
|
<span style="margin-right: 16rpx" class="colorGr">{{
|
|
pageMsg.SumGetPoint
|
|
}}</span>
|
|
使用: <span class="colorOr">{{ pageMsg.SumUsePoint }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="consumption-content" v-if="pageMsg.List.length > 0">
|
|
<block v-for="(unit, i) in pageMsg.List" :key="i">
|
|
<!-- <p class="consumption-content-date">{{unit.date}}</p> -->
|
|
<div class="consumption-content-unit">
|
|
<div class="cp-u-left">
|
|
<!-- <i class='ico-shop'></i> -->
|
|
<div>
|
|
<p class="cp-u-title">
|
|
{{ unit.SERVERPART_NAME + unit.SHOPNAME }}
|
|
</p>
|
|
|
|
<p class="cp-u-type">{{ unit.OPERATE_DATE }}</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p
|
|
class="cp-u-price"
|
|
:class="{
|
|
colorOr: unit.POINT_TYPE < 0,
|
|
colorGr: unit.POINT_TYPE > 0,
|
|
}"
|
|
>
|
|
{{ unit.POINT_TYPE * unit.CURRENT_POINT }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</block>
|
|
</div>
|
|
<div v-if="loadingType == 0">
|
|
<no-data :text="'您暂无积分记录'" :isShow="pageMsg.List.length > 0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import noData from "../../../components/noData.vue";
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
loadingType: 1,
|
|
searchByDate: 0,
|
|
memberPoint: 0, // 可用积分
|
|
searchTime: [],
|
|
consumptionRecord: [],
|
|
timeFlag: 0,
|
|
pageMsg: {
|
|
List: [],
|
|
pageSize: 16,
|
|
pageIndex: 1,
|
|
isLoadMore: true,
|
|
SumGetPoint: 0,
|
|
SumUsePoint: 0,
|
|
},
|
|
showPicker: false,
|
|
tabList: [
|
|
{ label: "全部", value: 0 },
|
|
{ label: "获取", value: 1 },
|
|
{ label: "消耗", value: 2 },
|
|
],
|
|
selectTab: 0,
|
|
allList: [],
|
|
showList: [],
|
|
};
|
|
},
|
|
components: {
|
|
noData,
|
|
},
|
|
computed: {
|
|
...mapGetters(["user"]),
|
|
},
|
|
methods: {
|
|
// 修改选择的列表
|
|
handleChangeSelectTab(value) {
|
|
this.selectTab = value;
|
|
this.showList = this.allList[value];
|
|
console.log("this.showList", this.showList);
|
|
this.$forceUpdate;
|
|
},
|
|
getConsuptionRecord() {
|
|
let _this = this;
|
|
|
|
_this.$api
|
|
.getCoop({
|
|
action_type: "GetPointRecord",
|
|
pageSize: 999999,
|
|
pageIndex: 1,
|
|
isSum: 1,
|
|
// starDate: _this.searchTime[0],
|
|
// endDate: _this.searchTime[1]
|
|
})
|
|
.then(function (res) {
|
|
console.log("res321312", res);
|
|
uni.hideLoading();
|
|
_this.pageMsg.SumUsePoint = res.Data.SumUsePoint;
|
|
_this.pageMsg.SumGetPoint = res.Data.SumGetPoint;
|
|
_this.handleSetTypeList(res.Data.List);
|
|
|
|
// _this.pageMsg.List =
|
|
// _this.pageMsg.pageIndex === 1
|
|
// ? res.Data.List
|
|
// : _this.pageMsg.List.concat(res.Data.List);
|
|
// _this.pageMsg.SumUsePoint = res.Data.SumUsePoint;
|
|
// _this.pageMsg.SumGetPoint = res.Data.SumGetPoint;
|
|
// console.log("_this.pageMsg", _this.pageMsg);
|
|
// if (res.Data.List.length < _this.pageMsg.pageSize) {
|
|
// _this.pageMsg.isLoadMore = false;
|
|
// }
|
|
// _this.loadingType = 0;
|
|
// _this.$forceUpdate();
|
|
});
|
|
},
|
|
// 将数据按照全部、获取、消耗
|
|
handleSetTypeList(list) {
|
|
// 按顺序为全部、获取、消耗
|
|
let allList = [[], [], []];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
allList[0].push(item);
|
|
if (item.POINT_TYPE > 0) {
|
|
allList[1].push(item);
|
|
}
|
|
if (item.POINT_TYPE < 0) {
|
|
allList[2].push(item);
|
|
}
|
|
});
|
|
}
|
|
console.log("allList", allList);
|
|
let res = [];
|
|
allList.forEach((item) => {
|
|
let newItem = this.handleListGetMonth(item);
|
|
res.push(newItem);
|
|
});
|
|
console.log("res", res);
|
|
|
|
this.allList = res;
|
|
this.showList = res[this.selectTab];
|
|
},
|
|
// 将传入的数组变成 一个月份一个月份的
|
|
handleListGetMonth(list) {
|
|
let res = [];
|
|
let monthTypeList = [];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
const date = new Date(item.OPERATE_DATE);
|
|
let y = date.getFullYear();
|
|
let m = date.getMonth() + 1;
|
|
if (m < 10) {
|
|
m = "0" + m;
|
|
}
|
|
let time = `${y}${m}`;
|
|
if (monthTypeList.indexOf(time) === -1) {
|
|
monthTypeList.push(time);
|
|
res.push({
|
|
label: time,
|
|
children: [item],
|
|
});
|
|
} else {
|
|
let index = monthTypeList.indexOf(time);
|
|
res[index].children.push(item);
|
|
}
|
|
});
|
|
}
|
|
if (res && res.length > 0) {
|
|
res.forEach((item) => {
|
|
// 获取
|
|
let obtain = 0;
|
|
// 消耗
|
|
let consume = 0;
|
|
if (item.children && item.children.length > 0) {
|
|
item.children.forEach((item) => {
|
|
if (item.POINT_TYPE > 0) {
|
|
obtain += item.CURRENT_POINT;
|
|
}
|
|
if (item.POINT_TYPE < 0) {
|
|
consume += item.CURRENT_POINT;
|
|
}
|
|
});
|
|
}
|
|
item.obtain = obtain;
|
|
item.consume = consume;
|
|
});
|
|
}
|
|
console.log("res3213", res);
|
|
return res;
|
|
},
|
|
getToday() {
|
|
let _this = this;
|
|
_this.searchTime[0] = _this.$utils.cutDate(new Date(), "YYYY/MM/DD");
|
|
_this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY/MM/DD");
|
|
_this.getConsuptionRecord();
|
|
},
|
|
getWeek() {
|
|
let _this = this;
|
|
_this.searchTime[0] = _this.$utils.cutDate(
|
|
new Date(),
|
|
"YYYY/MM/DD",
|
|
-(new Date().getDay() - 1)
|
|
);
|
|
_this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY/MM/DD");
|
|
_this.getConsuptionRecord();
|
|
},
|
|
getMonth() {
|
|
let _this = this;
|
|
_this.searchTime[0] = _this.$utils.cutDate(
|
|
new Date(),
|
|
"YYYY/MM/DD",
|
|
-(new Date().getDate() - 1)
|
|
);
|
|
_this.searchTime[1] = _this.$utils.cutDate(new Date(), "YYYY/MM/DD");
|
|
_this.getConsuptionRecord();
|
|
},
|
|
onShowDatePicker(f) {
|
|
// 显示
|
|
this.showPicker = true;
|
|
this.timeFlag = f;
|
|
},
|
|
onSelected(data) {
|
|
// 选择
|
|
this.searchTime[this.timeFlag] = data.value;
|
|
},
|
|
getMemberPoint() {
|
|
// 获取会员积分
|
|
let _this = this;
|
|
|
|
this.$api
|
|
.getCoop({
|
|
action_type: "GetMemberPoint",
|
|
})
|
|
.then(function (rs) {
|
|
_this.memberPoint = rs.Data.MEMBERSHIP_POINT || 0;
|
|
});
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.loadingType = 1; // 正在在加载
|
|
uni.showLoading({ title: "加载中" });
|
|
this.getMonth();
|
|
this.getMemberPoint();
|
|
// this.getMemberInfo()consumption/consumption_bg.png
|
|
},
|
|
onShow() {
|
|
this.pageMsg.pageIndex = 1;
|
|
},
|
|
onReachBottom() {
|
|
if (this.pageMsg.isLoadMore) {
|
|
this.pageMsg.pageIndex += 1;
|
|
this.getConsuptionRecord();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100%;
|
|
background: #f5f5f5;
|
|
.markTitle {
|
|
width: 100%;
|
|
padding: 16rpx 40rpx;
|
|
box-sizing: border-box;
|
|
.mark {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 72rpx;
|
|
color: #ba922f;
|
|
line-height: 84rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.text {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.detailBox {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 24rpx 32rpx;
|
|
.tabBox {
|
|
padding-bottom: 34rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
.title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.tabs {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.tabItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #716f69;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding: 8rpx 24rpx;
|
|
background: #f5f6f7;
|
|
border-radius: 4rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.selectTab {
|
|
color: #ffffff;
|
|
background: #ba922f;
|
|
}
|
|
}
|
|
}
|
|
|
|
.markList {
|
|
width: 100%;
|
|
height: calc(100% - 184rpx);
|
|
margin-top: 32rpx;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
|
|
.markItem {
|
|
width: 100%;
|
|
margin-bottom: 48rpx;
|
|
.itemTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
.titleIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.label {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-right: 8rpx;
|
|
}
|
|
.value {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #ba922f;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-right: 32rpx;
|
|
}
|
|
}
|
|
.childrenList {
|
|
width: 100%;
|
|
.itemContent {
|
|
box-sizing: border-box;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
.top {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 4rpx;
|
|
.topLeft {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
display: inline-block;
|
|
width: 80%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.topRight {
|
|
.unit {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #ba922f;
|
|
line-height: 40rpx;
|
|
text-align: right;
|
|
font-style: normal;
|
|
}
|
|
.value {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #ba922f;
|
|
line-height: 40rpx;
|
|
text-align: right;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
.bottom {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #716f69;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.markList::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.consumption {
|
|
background: #f5f5f5;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.consumption-card {
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
width: 100%;
|
|
height: 284rpx;
|
|
background: url("https://eshangtech.com/ShopICO/consumption/i-bg.png")
|
|
no-repeat center;
|
|
background-size: contain;
|
|
box-sizing: border-box;
|
|
padding: 68rpx 50rpx 68rpx 80rpx;
|
|
}
|
|
|
|
.card-block {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.amount {
|
|
color: #fff;
|
|
text-align: left;
|
|
font-size: 60rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.jump-btn {
|
|
background: url("https://eshangtech.com/ShopICO/consumption/i-btn.png")
|
|
no-repeat center;
|
|
width: 190rpx;
|
|
height: 68rpx;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-size: contain;
|
|
border-radius: 34rpx;
|
|
justify-content: center;
|
|
}
|
|
|
|
.consumption-history {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.consumption-history > div {
|
|
width: 50%;
|
|
text-align: center;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.consumption-history > div:first-child {
|
|
border-right: 2px solid #fff;
|
|
}
|
|
|
|
.consumption-history > div span {
|
|
display: block;
|
|
}
|
|
|
|
.consumption-btn-box {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 40rpx 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.consumption-btn {
|
|
width: 210rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #4aa3f5;
|
|
box-shadow: 0 0 8rpx #4aa3f5;
|
|
}
|
|
|
|
.consumption-search-box {
|
|
background-color: #fff;
|
|
border-top: 1rpx solid #eee;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.search-by-date {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #333;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.ico-timer {
|
|
/* background url(../../../static/img/zq.png) no-repeat center */
|
|
background-size: contain;
|
|
height: 45rpx;
|
|
width: 45rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.search-content-unit {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 80rpx;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.search-content-unit + .search-content-unit {
|
|
border-top: 1rpx solid #eee;
|
|
}
|
|
|
|
.date-color {
|
|
color: #4aa3f5;
|
|
}
|
|
|
|
.consumption-title {
|
|
padding: 0 32rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bolder;
|
|
margin-top: 48rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.consumption-title-des {
|
|
font-size: 28rpx;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.consumption-content {
|
|
/* background-color #fff */
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.consumption-content-date {
|
|
color: #999;
|
|
font-size: 12px;
|
|
padding-bottom: 10rpx;
|
|
padding-left: 40rpx;
|
|
}
|
|
|
|
.consumption-content-unit {
|
|
display: flex;
|
|
padding: 0 32rpx;
|
|
line-height: 42rpx;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
margin-top: 28rpx;
|
|
}
|
|
|
|
.ico-shop {
|
|
/* background url(../../../static/img/xiaofei_shop.png) no-repeat center */
|
|
background-size: contain;
|
|
height: 72rpx;
|
|
width: 72rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.cp-u-left {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.cp-u-title {
|
|
font-size: 28rpx;
|
|
color: #494949;
|
|
}
|
|
|
|
.cp-u-type {
|
|
font-size: 24rpx;
|
|
color: #939393;
|
|
}
|
|
|
|
.colorOr {
|
|
color: #de7e42;
|
|
}
|
|
|
|
.colorGr {
|
|
color: #45ab58;
|
|
}
|
|
|
|
.cp-u-price {
|
|
text-align: right;
|
|
font-size: 32rpx;
|
|
}
|
|
</style>
|