pet-front-order/pages/personalCenter/point.vue

<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>