H5_QiCaiYao/pages_tool/notes/notes.vue

<template>
	<view class="head">
		<!-- <image :src="$util.img('/upload/weapp/user/编组 6备份.png')" mode=""></image> -->
		<view class="head-jif">
			<div class="jifen">当前积分</div>
			<div class="min">6288</div>
		</view>
		<view class="bodty">
			<div class="df aic jcsb">
				<div class="jilu">积分记录</div>
				<div class="df aic time">
					2022年11月
					<image v-if="kg" :src="$util.img('/upload/weapp/user/arrow-top.png')" mode="" @click="btn"></image>
					<image v-else :src="$util.img('/upload/weapp/user/arrow-bottom.png')" mode="" @click="btn"></image>
					
				</div>
			</div>
			<div v-if="kg">
				<div v-for="(item,index) in list" :key="index">
					<div class="xu"></div>
					<div class="df jcsb aic">
						<div>
							<div class="name">{{item.name}}</div>
							<div class="tiem">2022-12-24 18:16:02</div>
						</div>
						<div class="mani">
							{{item.time}}
						</div>
					</div>
					
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kg:true,
				list:[
					{
						name:'签到',
						time:'+200'
					},
					{
						name:'兑换商品',
						time:'-2000'
					},
					{
						name:'后台抵扣',
						time:'-200'
					},
					{
						name:'购买商品',
						time:'+8000'
					}
				]
			};
		},
		onShow() {
			this.$api.sendRequest({
				url: '/api/membersignin/getSignRecords',
				data: {},
				success(res) {
					console.log(res);
				}
			})
		},
		methods:{
			btn(){
				this.kg=!this.kg
			}
		}
	}
</script>

<style lang="scss">
.head{
	padding: 32rpx 24rpx;
	box-sizing: border-box;
	.head-jif{
		width: 702rpx;
		height: 208rpx;
		background-color: rgb(17, 176, 247);
		border-radius: 20rpx;
		padding-top: 40rpx;
		padding-left: 48rpx;
		box-sizing: border-box;
		.jifen{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40rpx;
			
			
		}
		.min{
			font-size: 64rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 64rpx;
			margin-top: 16rpx;
		
		}
	}
	.bodty{
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.jilu{
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
		}
		.time{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
			image{
				width: 32rpx;height: 32rpx;
				margin-left: 10rpx;
			}
		}
		.name{
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
		}
		.tiem{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin-top: 10rpx;
		}
		.mani{
			font-size: 40rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #333333;
			line-height: 48rpx;
		}
		.xu{
			width: 630rpx;
			height: 1rpx;
			background: #E8E8E8;
			border-radius: 2rpx;
			margin: 30rpx 0;
		}
		
	}
}
</style>