zhonglxcx/zhonglmini/pages/user/jifen.vue

<template>
	<view>
		<view class="top">
			<view class="topleft">当前积分:<text class='dqnum'>{{nowjf}}</text></view>
			<view class="topright">已消费:<text class='xfnum'>{{xfnow}}</text></view>
			<view class="rule" @click="showgz">规则</view>
		</view>
		<view class="bottom">
			<view class="listtitle">
				<span>类型</span>
				<span>数量</span>
				<span>余量</span>
				<span>时间</span>
			</view>
			<view class="list" v-for="(row,index) in list" :key="index" >
				<span>{{row.lxtext}}</span>
				<span :class="[row.lx>0?'isxiaof':'isshour']">{{row.nums}}</span>
				<span>{{row.yunums}}</span>
				<span>{{row.rq}}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowjf:0,
				xfnow:0,
				list:[],
				shuomtext:''
			}
		},
		onShow(){
			let getuserinfo=uni.getStorageSync('userinfo');
			this.jifenlist(getuserinfo.uid,getuserinfo.aid);
			this.baseinfo('jftip');
		},
		methods: {
			//提现列表
			async jifenlist(uid,aid){
				let info= await this.$api.jifenlist({action:'jifenlist',uid:uid,aid:aid});
				this.list=info.data.list;
				this.nowjf=info.data.nowcount;
				this.xfnow=info.data.xfcount;
			},
			async baseinfo(key) {
				let reinfo=await this.$api.baseinfo({action:'baseinfo',key:key});
				this.shuomtext=reinfo.data.info
				
			},
			showgz(){
				let t=this;
				uni.showModal({
					title: '积分规则',
					showCancel:false,
					confirmText:'已知晓',
					content: this.shuomtext,
					success: function (res) {}
				});
			}
		}
	}
</script>

<style lang='scss'>
.top{
	display: flex;
	width: 100%;
	background-color: #488ED8;
	justify-content: space-between;
	padding: 20upx;
	color: #ffffff;
}
.topleft{
		width: 40%;
		display: flex;
		justify-content: space-around;
		text{
			font-size: 40upx;
			font-weight: bold;
		}
		border-right: 1upx solid #ffffff;
	}
.topright{
		width: 40%;
		display: flex;
		justify-content: space-around;
		text{
			font-size: 40upx;
			font-weight: bold;
		}
	}
	.rule{
		width: 15%;
		font-size: 30upx;
		border: 1upx #fff solid;
		padding: 2upx;
		border-radius: 25upx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
.listtitle{
	display: flex;
	justify-content: space-between;
	border-bottom: 1upx #F6F6F6 solid;
	color: #666666;
	padding:10upx 2upx;
	span{
		width: 25%;
		border-right: 1upx #F6F6F6 solid;
		text-align: center;
	}
}
.list{
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding:15upx 2upx;
	font-size: 30upx;
	span{
		width: 25%;
		text-align: center;
	}
	border-bottom: 1upx #F6F6F6 solid;
}
.isshour{
	color: #F90101;
}
.isxiaof{
	color: #008000;
}
</style>