415 lines
8.7 KiB
Vue
415 lines
8.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="integral">
|
|||
|
|
<view class="header" :class="'bg-' + themeColor.name">
|
|||
|
|
<view class="title">当前积分</view>
|
|||
|
|
<text class="num">
|
|||
|
|
{{
|
|||
|
|
(pointAdd + pointMin) ||
|
|||
|
|
'0'
|
|||
|
|
}}
|
|||
|
|
</text>
|
|||
|
|
<view class="line" />
|
|||
|
|
<view class="nav">
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="num">
|
|||
|
|
{{
|
|||
|
|
(pointAdd -pointMin) ||
|
|||
|
|
'0'
|
|||
|
|
}}
|
|||
|
|
</text>
|
|||
|
|
<text class="title">累计积分</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="num">
|
|||
|
|
{{
|
|||
|
|
-(
|
|||
|
|
pointMin ) || '0'
|
|||
|
|
}}
|
|||
|
|
</text>
|
|||
|
|
<text class="title">累计消费</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="num">
|
|||
|
|
{{
|
|||
|
|
(pointAdd) ||
|
|||
|
|
'0'
|
|||
|
|
}}
|
|||
|
|
</text>
|
|||
|
|
<text class="title">累计收入</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tab">
|
|||
|
|
<view
|
|||
|
|
class="item"
|
|||
|
|
:class="current === index ? `text-${themeColor.name} on` : ''"
|
|||
|
|
v-for="(item, index) in navList"
|
|||
|
|
:key="index"
|
|||
|
|
@tap="nav(index)"
|
|||
|
|
>
|
|||
|
|
{{ item.name }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="wrapper">
|
|||
|
|
<view class="list1" :hidden="current !== 0">
|
|||
|
|
<view class="tip acea-row row-middle">
|
|||
|
|
<span class="iconfont icon-shuoming"></span
|
|||
|
|
>提示：积分可用来兑换指定商品
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="list b-b"
|
|||
|
|
v-for="(item, index) in integralList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<view class="wrapper">
|
|||
|
|
<view class="address-box">
|
|||
|
|
{{ item.detail }}
|
|||
|
|
</view>
|
|||
|
|
<view class="u-box">
|
|||
|
|
{{ item.createTime }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text
|
|||
|
|
class="change-num"
|
|||
|
|
:class="
|
|||
|
|
parseFloat(item.point) >= 0 ? 'change-num-add' : 'change-num-reduce'
|
|||
|
|
"
|
|||
|
|
>{{ item.point | numFilter }}</text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
<rf-load-more class="load-more" :status="loadingType"></rf-load-more>
|
|||
|
|
</view>
|
|||
|
|
<view class="list1" :hidden="current !== 1">
|
|||
|
|
<view class="tip acea-row row-middle">
|
|||
|
|
<span class="iconfont icon-shuoming"></span
|
|||
|
|
>提示：积分兑换的商品
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="list b-b"
|
|||
|
|
v-for="(item, index) in integralOrderList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<view class="wrapper">
|
|||
|
|
<view class="address-box">
|
|||
|
|
{{ item.skuDetail.name }}
|
|||
|
|
</view>
|
|||
|
|
<view class="u-box">
|
|||
|
|
{{ item.createTime }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text
|
|||
|
|
class="change-num"
|
|||
|
|
:class="'change-num-reduce'
|
|||
|
|
"
|
|||
|
|
>-{{ item.skuDetail.point }}</text
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
<rf-load-more class="load-more" :status="loadingType"></rf-load-more>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!--加载动画-->
|
|||
|
|
<rfLoading isFullScreen :active="loading"></rfLoading>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* @des 积分中心
|
|||
|
|
*
|
|||
|
|
* @author 237524947@qq.com
|
|||
|
|
* @date 2020-01-10 15:24
|
|||
|
|
* @copyright 2019
|
|||
|
|
*/
|
|||
|
|
import { pointsList,pointTotalList,querypointmallorderlist ,
|
|||
|
|
submitpointmallorder ,
|
|||
|
|
confirmreceiptpointmallorder ,
|
|||
|
|
querypointmallorderdetail ,
|
|||
|
|
pointorderCount } from '@/api/userInfo';
|
|||
|
|
import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
|
|||
|
|
|
|||
|
|
import moment from '@/common/moment';
|
|||
|
|
export default {
|
|||
|
|
name: 'Integral',
|
|||
|
|
components: {
|
|||
|
|
rfLoadMore
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
navList: [{ name: '积分明细' }, { name: '积分订单' }],
|
|||
|
|
current: 0,
|
|||
|
|
pointAdd:0,
|
|||
|
|
pointMin:0,
|
|||
|
|
integralList: [],
|
|||
|
|
integralOrderList:[],
|
|||
|
|
loadingType: 'more',
|
|||
|
|
pageNum :0,
|
|||
|
|
userInfo: {},
|
|||
|
|
loading: true
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.initData(option);
|
|||
|
|
},
|
|||
|
|
filters: {
|
|||
|
|
time(val) {
|
|||
|
|
return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
|
|||
|
|
},
|
|||
|
|
numFilter(val) {
|
|||
|
|
return val >= 0 ? `+${val.toString()}` : val;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 加载更多
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (this.loadingType === 'nomore') return;
|
|||
|
|
this.pageNum++;
|
|||
|
|
this.getIntegralListList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
toCategory() {
|
|||
|
|
this.$mRouter.reLaunch({ route: '/pages/category/category' });
|
|||
|
|
},
|
|||
|
|
nav(index) {
|
|||
|
|
this.loading = true;
|
|||
|
|
this.current = index;
|
|||
|
|
this.pageNum = 0;
|
|||
|
|
this.integralList.length = 0;
|
|||
|
|
if(index==0){
|
|||
|
|
this.getIntegralListList();
|
|||
|
|
}else{
|
|||
|
|
this.querypointmallorderlist();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
initData(option) {
|
|||
|
|
this.userInfo = uni.getStorageSync('userInfo') || undefined;
|
|||
|
|
this.getPointTotalList();
|
|||
|
|
if(option && option.index==1){
|
|||
|
|
this.nav(1)
|
|||
|
|
this.querypointmallorderlist();
|
|||
|
|
}else{
|
|||
|
|
this.getIntegralListList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async getPointTotalList() {
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${pointTotalList}`, {
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
.then(r => {
|
|||
|
|
this.loading = false;
|
|||
|
|
if(r[0].type==1){
|
|||
|
|
this.pointAdd=r[0].point;
|
|||
|
|
this.pointMin=r[1].point;
|
|||
|
|
}else{
|
|||
|
|
this.pointMin=r[0].point;
|
|||
|
|
this.pointAdd=r[1].point;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
async querypointmallorderlist(){
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${querypointmallorderlist}`, {
|
|||
|
|
pageNum: this.pageNum,
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
.then(r => {
|
|||
|
|
this.loading = false;
|
|||
|
|
if(r.list){
|
|||
|
|
this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
|
|||
|
|
this.integralOrderList = [...this.integralOrderList, ...r.list];
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
async getIntegralListList() {
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${pointsList}`, {
|
|||
|
|
pageNum: this.pageNum,
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
.then(r => {
|
|||
|
|
this.loading = false;
|
|||
|
|
if(r.list){
|
|||
|
|
this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
|
|||
|
|
this.integralList = [...this.integralList, ...r.list];
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: $color-white;
|
|||
|
|
}
|
|||
|
|
.integral {
|
|||
|
|
background-color: $color-white;
|
|||
|
|
/* #ifndef H5 */
|
|||
|
|
height: 100vh;
|
|||
|
|
/* #endif */
|
|||
|
|
.header {
|
|||
|
|
opacity: 0.9;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 420upx;
|
|||
|
|
font-size: $font-base;
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 20upx 0;
|
|||
|
|
text-align: center;
|
|||
|
|
position: relative;
|
|||
|
|
.title {
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
margin: 10upx 0;
|
|||
|
|
}
|
|||
|
|
.num {
|
|||
|
|
/*<!--color: $base-color;-->*/
|
|||
|
|
font-size: $font-lg + 20upx;
|
|||
|
|
font-weight: lighter;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.line {
|
|||
|
|
width: 10%;
|
|||
|
|
height: 3upx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin: 20upx auto 30upx;
|
|||
|
|
}
|
|||
|
|
.nav {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
.item {
|
|||
|
|
flex: 1;
|
|||
|
|
.num {
|
|||
|
|
font-size: $font-lg + 4upx;
|
|||
|
|
display: block;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.tab {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -2upx;
|
|||
|
|
display: flex;
|
|||
|
|
width: 80%;
|
|||
|
|
margin: 0 10%;
|
|||
|
|
border-radius: 20upx 20upx 0 0;
|
|||
|
|
background-color: #f7f7f7;
|
|||
|
|
height: 80upx;
|
|||
|
|
line-height: 80upx;
|
|||
|
|
font-size: $font-base;
|
|||
|
|
color: #bbb;
|
|||
|
|
.item {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 80upx;
|
|||
|
|
}
|
|||
|
|
.on {
|
|||
|
|
background-color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-radius: 20upx 0 0 0;
|
|||
|
|
}
|
|||
|
|
.on:last-child {
|
|||
|
|
border-radius: 0 20upx 0 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.wrapper .list1 {
|
|||
|
|
background-color: #fff;
|
|||
|
|
.tip {
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
width: 90%;
|
|||
|
|
margin: $spacing-base 5%;
|
|||
|
|
height: 64upx;
|
|||
|
|
line-height: 64upx;
|
|||
|
|
border-radius: 30upx;
|
|||
|
|
background-color: #fff5e2;
|
|||
|
|
border: 1px solid #ffeac1;
|
|||
|
|
color: #c8a86b;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.list {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20upx 36upx;
|
|||
|
|
background: #fff;
|
|||
|
|
position: relative;
|
|||
|
|
.wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex: 1;
|
|||
|
|
.address-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: $font-base;
|
|||
|
|
color: $font-color-dark;
|
|||
|
|
}
|
|||
|
|
.u-box {
|
|||
|
|
color: $font-color-light;
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.change-num {
|
|||
|
|
font-size: $font-lg + 4upx;
|
|||
|
|
color: $font-color-base;
|
|||
|
|
}
|
|||
|
|
.change-num-add {
|
|||
|
|
color: #16ac57;
|
|||
|
|
}
|
|||
|
|
.change-num-reduce {
|
|||
|
|
color: $base-color;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.wrapper .list2 {
|
|||
|
|
/*background-color: #F76260;*/
|
|||
|
|
}
|
|||
|
|
.wrapper .list2 .item {
|
|||
|
|
background-image: linear-gradient(to right, #fff7e7 0%, #fffdf9 100%);
|
|||
|
|
width: 90%;
|
|||
|
|
margin: $spacing-base 5%;
|
|||
|
|
height: 120upx;
|
|||
|
|
line-height: 120upx;
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: 20upx;
|
|||
|
|
padding: 0 20upx;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.wrapper .list2 .item .pictrue {
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 100upx;
|
|||
|
|
margin: 20upx 0;
|
|||
|
|
image {
|
|||
|
|
width: 80%;
|
|||
|
|
height: 80%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.wrapper .list2 .item .name {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #c8a86b;
|
|||
|
|
margin: 0 20upx;
|
|||
|
|
}
|
|||
|
|
.wrapper .list2 .item .earn {
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
color: #c8a86b;
|
|||
|
|
border: 2upx solid #c8a86b;
|
|||
|
|
text-align: center;
|
|||
|
|
height: 48upx;
|
|||
|
|
margin: 36upx 0;
|
|||
|
|
width: 120upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
</style>
|