oil-station/gasStation-uni/pagesHome/PointsMing/PointsMing.vue
2024-01-05 16:53:19 +08:00

178 lines
3.5 KiB
Vue

<template>
<view class="content">
<view class="container">
<view class="my-header">
<view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
<view class="my-text">积分明细</view>
<view class="my-icons"></view>
</view>
<!-- 顶部区域 -->
<u-empty text="积分明细" v-if="detailList.length == 0" icon="http://cdn.uviewui.com/uview/empty/list.png">
</u-empty>
<view class="m-box" v-for="(item,index) in detailList" :key="index">
<view class="">
<view class="title" v-if="item.changeType == 1">{{item.changeReason}}</view>
<view class="title" v-else style="color: #F52D22;">积分支出</view>
<view class="times">{{item.createTime}}</view>
</view>
<view class="sr-nmb" v-if="item.changeType == 1">+{{item.pointsChange}}</view>
<view class="sc-nmb" v-else>{{item.pointsChange}}</view>
</view>
<!-- 判断根据实际情况而改 -->
<u-loadmore :status="status" v-if="show == true" />
</view>
</view>
</template>
<script>
import config from '@/config'
import request from '../../utils/request'
export default {
data() {
return {
show: false,
status: 'loading',
pageNo: 1,
pageSize: 10,
totalDetail: '',
detailList: [],
mingList: [
"3", "4", "5", "6",
],
subTitle: '2020-05-15',
thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
}
},
components: {
},
onShow() {
this.getIntegralDetailList()
},
onReachBottom() {
this.show = true
if (this.detailList.length >= this.totalDetail) {
uni.showToast({
title: '没有下一页数据',
icon: 'none'
})
this.status = "nomore"
} else {
this.pageNo++
this.getIntegralDetailList()
}
},
methods: {
goback() {
uni.navigateBack()
},
// 查询我的积分明细
getIntegralDetailList() {
uni.showLoading({
title: '加载中'
});
request({
url: 'business/integral/integralDetail/queryByPageUni',
method: 'get',
params: {
chainStoreId: uni.getStorageSync('chainStoreId'),
storeId: uni.getStorageSync('storeId'),
pageNo: this.pageNo,
pageSize: this.pageSize
}
}).then((res) => {
if (res.code == 200) {
if (this.pageNo != 1) {
this.detailList = this.detailList.concat(res.data.records)
} else {
this.detailList = res.data.records
}
this.totalDetail = res.data.total
this.show = false
uni.hideLoading();
}
})
},
}
}
</script>
<style scoped lang="scss">
.content {
background: #f4f5f6;
height: 100vh;
}
.container {
width: 100%;
background: #f4f5f6;
box-sizing: border-box;
padding-top: 88px;
padding-bottom: 15px;
}
.my-header {
width: 100%;
height: 88px;
background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
color: #000;
box-sizing: border-box;
padding: 0px 15px;
padding-top: 40px;
.my-icons {
width: 20px;
}
position: fixed;
top: 0px;
}
.m-box {
width: 95%;
margin: 10px auto;
border-radius: 8px;
background: #ffffff;
box-sizing: border-box;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.title {
font-size: 18px;
color: #0D2E8D;
font-weight: bold;
margin-bottom: 5px;
}
.times {
font-size: 14px;
color: #999999;
}
.sr-nmb {
font-size: 20px;
font-weight: 500;
color: #3CBC6F;
}
.sc-nmb {
font-size: 20px;
font-weight: 500;
color: #F52D22;
}
</style>