200 lines
4.0 KiB
Vue
200 lines
4.0 KiB
Vue
<template>
|
|
<view class="points">
|
|
<view class="bg">
|
|
<image
|
|
class="bgImg"
|
|
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
<view class="Return" @click="onBack">
|
|
<image
|
|
class="ReturnImg"
|
|
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
<view class="title">积分</view>
|
|
<view class="content">
|
|
<scroll-view
|
|
show-scrollbar="false"
|
|
scroll-y="true"
|
|
class="scroll"
|
|
refresher-enabled="true"
|
|
refresher-threshold="40"
|
|
@refresherrefresh="onRefresherRefresh"
|
|
lower-threshold="100"
|
|
@scrolltolower="onScrollToLower"
|
|
:refresher-triggered="triggered"
|
|
v-if="pointslist.length!= 0"
|
|
>
|
|
<uni-card class="card" v-for="(item, index) in pointslist" :key="index" >
|
|
<view
|
|
class="card-content"
|
|
:style="{ 'background-color': item.status == 0 ? '#ff000011' : '#11ff002b' }"
|
|
>
|
|
|
|
<view class="info"><view>{{ item.info }}</view> <view class="num">{{item.status == 0? '-'+ item.number : '+' +item.number }}</view></view>
|
|
<view class="time">
|
|
{{ formatDate(item.time) }}
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
</scroll-view>
|
|
<view v-if="pointslist.length == 0" class="empty">暂无积分记录</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "../../../components/request.js";
|
|
import formatDate from "../../../components/formatDate.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: "Hello",
|
|
userinfo: {},
|
|
page: 0,
|
|
triggered:false,
|
|
pointslist:[],
|
|
};
|
|
},
|
|
onLoad() {
|
|
uni.getStorage({
|
|
key: "userinfo",
|
|
success: (res) => {
|
|
this.userinfo = res.data;
|
|
this.onRefresherRefresh();
|
|
},
|
|
});
|
|
},
|
|
onShareAppMessage(res) {
|
|
if (res.from === 'menu') {
|
|
return {
|
|
title: '分享',
|
|
path: "/pages/Home/Home"
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
formatDate: formatDate,
|
|
//下拉刷新
|
|
onRefresherRefresh() {
|
|
this.page = 0;
|
|
this.triggered = true;
|
|
this.pointslist = [];
|
|
this.getPointsDetail();
|
|
},
|
|
//上拉加载
|
|
onScrollToLower() {
|
|
this.page += 1;
|
|
this.getPointsDetail();
|
|
},
|
|
//获取积分详情
|
|
getPointsDetail() {
|
|
request({
|
|
url: "user/pointsDetail",
|
|
method: "POST",
|
|
data: {
|
|
userId: this.userinfo.id,
|
|
page: this.page,
|
|
size: 10,
|
|
},
|
|
userInfo: true,
|
|
}).then((res) => {
|
|
if (res.code === 200) {
|
|
this.pointslist.push(...res.data);
|
|
this.triggered = false;
|
|
} else {
|
|
console.log(res.msg);
|
|
}
|
|
});
|
|
},
|
|
// 返回上一页
|
|
onBack() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
}
|
|
.bgImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.Return {
|
|
position: absolute;
|
|
top: 110rpx;
|
|
left: 35rpx;
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
}
|
|
.title {
|
|
position: absolute;
|
|
top: 120rpx;
|
|
left: 335rpx;
|
|
font-size: 34rpx;
|
|
color: #100e0f;
|
|
font-weight: bold;
|
|
}
|
|
.ReturnImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.content {
|
|
position: absolute;
|
|
top: 250rpx;
|
|
left: 0rpx;
|
|
right: 0rpx;
|
|
bottom: 50rpx;
|
|
}
|
|
.scroll {
|
|
height: 100%;
|
|
width: 750rpx;
|
|
}
|
|
.empty{
|
|
height: 100%;
|
|
width: 750rpx;
|
|
line-height: 1200rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #898989;
|
|
}
|
|
.card-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
width: 600rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
margin-left: 50rpx;
|
|
}
|
|
.time {
|
|
font-size: 24rpx;
|
|
color: #7b7b7b;
|
|
}
|
|
.info {
|
|
font-size: 24rpx;
|
|
color: #898989;
|
|
display: flex;
|
|
}
|
|
.num {
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|