181 lines
3.3 KiB
Vue
181 lines
3.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="header-wrap">
|
||
<view class="item">
|
||
<text class="t">{{ listData.nickName }} {{ listData.phone }}</text>
|
||
</view>
|
||
<view class="item">
|
||
<text class="t">当前积分 {{ listData.point }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="item" v-for="item in listData.list" :key="item.id">
|
||
<view class="top">
|
||
<text class="t">{{ item.content }}</text>
|
||
</view>
|
||
<view class="user-info">
|
||
<view class="left">
|
||
<view class="info">
|
||
<text class="t1">{{ item.shopName }}</text>
|
||
<text class="t2">{{ item.createTime }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<text class="t1">{{ item.floatPoints }}</text>
|
||
<text class="t2">变动后积分：{{ item.balancePoints }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-loadmore :status="listData.status"></u-loadmore>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive } from 'vue';
|
||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||
import { pointUserRecord } from '@/http/api/market/point.js';
|
||
|
||
const listData = reactive({
|
||
nickName: '',
|
||
phone: '',
|
||
id: '',
|
||
point: '',
|
||
page: 1,
|
||
size: 10,
|
||
status: 'loading',
|
||
list: []
|
||
});
|
||
|
||
onReachBottom(() => {
|
||
if (listData.status != 'nomore') {
|
||
listData.page++;
|
||
pointUserRecordAjax();
|
||
}
|
||
});
|
||
|
||
// 获取用户所有门店下积分列表
|
||
async function pointUserRecordAjax() {
|
||
try {
|
||
const res = await pointUserRecord({
|
||
page: listData.page,
|
||
size: listData.size,
|
||
id: listData.id
|
||
});
|
||
|
||
if (listData.page == 1) {
|
||
listData.list = res.records;
|
||
} else {
|
||
listData.list.push(...res.records);
|
||
}
|
||
|
||
if (res.pageNumber >= res.totalPage) {
|
||
listData.status = 'nomore';
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
onLoad((options) => {
|
||
listData.id = options.id;
|
||
listData.nickName = options.nickName;
|
||
listData.phone = options.phone;
|
||
listData.point = options.point;
|
||
pointUserRecordAjax();
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #f8f8f8;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.header-wrap {
|
||
width: 100%;
|
||
height: 53px;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
background-color: #fff;
|
||
padding: 0 28upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.item {
|
||
flex: 1;
|
||
&:last-child {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.t {
|
||
font-size: 28upx;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
.list {
|
||
padding: calc(53px + 28upx) 28upx 28upx;
|
||
.item {
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
padding: 28upx;
|
||
&:not(:first-child) {
|
||
margin-top: 28upx;
|
||
}
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.t {
|
||
font-size: 32upx;
|
||
color: #333;
|
||
}
|
||
}
|
||
.user-info {
|
||
display: flex;
|
||
padding: 28upx 0;
|
||
.left {
|
||
flex: 1;
|
||
display: flex;
|
||
.info {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.t1 {
|
||
font-size: 28upx;
|
||
color: #333;
|
||
}
|
||
.t2 {
|
||
font-size: 24upx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.t1 {
|
||
font-size: 32upx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
.t2 {
|
||
color: #666;
|
||
font-size: 24upx;
|
||
}
|
||
}
|
||
}
|
||
.footer-wrap {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
}
|
||
</style>
|