You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.4 KiB
105 lines
2.4 KiB
<template>
|
|
<view class="personal-point">
|
|
<view class="personal-point-header">
|
|
<view class="personal-point-show">
|
|
<view class="personal-point-value">
|
|
{{currentPonit}}
|
|
<view style="font-size: 16px; margin-left: 5px;">
|
|
当前积分
|
|
</view>
|
|
</view>
|
|
<view class="personal-point-img">
|
|
<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/point/qianbi.png" alt="point" style="width: 108px; height: 88px;" mode="widthFix"/>
|
|
</view>
|
|
</view>
|
|
<view class="personal-point-list" v-if="pointList.length>0">
|
|
<view v-for="(item,index) in pointList" :key="index" class="personal-point-list-item">
|
|
<view class="personal-point-list-item-date">
|
|
{{item.createAt}}
|
|
</view>
|
|
<view class="personal-point-list-item-value">
|
|
{{item.action == 'added' ? '+':'-'}} {{item.point}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getPointList} from "@/api/system/personal.js"
|
|
export default{
|
|
data(){
|
|
return{
|
|
currentPonit:0,
|
|
pointList:[]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getPointList();
|
|
},
|
|
methods:{
|
|
getPointList(){
|
|
getPointList().then(res=>{
|
|
this.pointList = res.content
|
|
if(this.pointList.length>0){
|
|
this.currentPonit = res.content[0].pointAfter || 0
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.personal-point{
|
|
.personal-point-header{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
align-content:flex-start;
|
|
width: 100%;
|
|
height: 226px;
|
|
flex-shrink: 0;
|
|
background: linear-gradient(0deg, #F5F5F7 0%, #FFBF60 99.41%);
|
|
.personal-point-show{
|
|
width: 100%;
|
|
height: 95px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 30px;
|
|
.personal-point-value{
|
|
color: #FFF;
|
|
font-size: 38px;
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
}
|
|
.personal-point-list{
|
|
margin: 10px;
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
background-color: #FFF;
|
|
.personal-point-list-item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 48px;
|
|
border-bottom: 1px solid #efefef;
|
|
margin-left: 15px;
|
|
padding-right: 15px;
|
|
.personal-point-list-item-date{
|
|
color: #333;
|
|
font-size: 14px;
|
|
}
|
|
.personal-point-list-item-value{
|
|
color: #FFAA48;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|