baiyuchengpin/pages_shopping/live/integral.vue

<template>
	<view>
		<view class="top-cont">
			<!-- 背景图片 -->
			<image class="bg"
				src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/ed4a8ff0406747a68e40988b210d1c78.png"
				mode=""></image>
			<view class="top-inner">
				<!-- 这里是状态栏 -->
				<view class="fixed-top-box" :style="{ background: bg }">
					<view class="status_bar" :style="{height: statusBarHeight}"></view>
					<view class="back-box" @click="back">
						<text class="title">我的积分</text>
						<text></text>
					</view>
				</view>
				<!-- 顶部固定后站位元素 -->
				<view style="padding-bottom: 88upx;">
					<view :style="{height: statusBarHeight}"></view>
				</view>
				<!-- 可用积分 -->
				<view class="available-points">
					<text class="label">可用积分</text>
					<text class="num">{{integral}}</text>
				</view>

			
				<view class="content">
					<!-- 积分列表 -->
					<view class="points-cont">
						<!-- 列表 -->
						<view class="point-list">
							<view v-for="(item,index) in list" :key="index" class="item">
								<view class="left">
									<text class="title">
										<!-- {{item.logTypeName}} -->
										<!-- 直播间完课积分 -->
										 {{utils.getDictLabel2Name(typeOptions,item.logType)}}
									</text>
									<view class="time">{{item.createTime}}</view>
								</view>
								<view class="right">
									<text v-if="item.integral<0" class="less">{{item.integral}}</text>
									<text v-else class="add">+{{item.integral}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	// import {
	// 	getUserIntegralInfo
	// } from '@/api/living.js' // 积分
	// import {
	// 	completionRecords,
	// 	completionInfo,doSign
	// } from '@/api/integral.js'
	import {getUserIntegralLogsList,getUserSign} from '@/api/integral';

	import {getDictByKey} from '@/api/common.js'
	// import {getUserSign,getUserIntegralLogsList,doSign} from '@/api/integral';
	// import {
	// 	doSign
	// } from '@/api/integral';
	export default {
		comments() {
			Loading
		},
		data() {
			return {
				totalDays: null,
				records: null,
				liveId: 712,
				signNum: 0,
				typeOptions: [],
				top: 0,
				integral: 0,
				sign: [],
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// tab切换
				// {lable:'获得',value:1},{lable:'消耗',value:2}
				// tags: [{lable:'最近十条',value:0},],
				// 选中的tab
				tabIndex: 0,
				current: 0,
				page: {
					type: 0,
					page: 1,
					pageSize: 10
				},
				list: [],
				loaded: false,
				loading: false
			};
		},
		onLoad(option) {
			this.getDictByKey("sys_integral_log_type");
			if (option.liveId) {
				this.liveId = option.liveId
			}
			console.log("进入积分页面了")
			// this.integrallogs()
			// this.getUserIntegralInfo()
			// this.completionRecords()
			// this.completionInfo()
			this.getUserSign()
			this.getUserIntegralLogsList();
		},
		computed: {
			// 计算属性的 getter
			bg: function() {
				return 'rgba(255,142,60, ' + this.top / 30 + ')';
			},
		},
		methods: {
			// integrallogs() {
			// 	integrallogs(data).then((res) => {
			// 		if (res.code == 200) {
			// 			console.log("用户领取看课积分", res)
			// 			// receiveList
			// 		}
			// 	}).catch((error) => {});
			// },
			// 查询用户积分领取记录
			// completionRecords() {
			// 	if (!this.liveId) return;
			// 	const data = {
			// 		liveId: this.liveId
			// 	}
			// 	completionRecords(data).then((res) => {
			// 		if (res.code == 200) {
			// 			this.list = res.data
			// 			console.log("查询用户积分领取记录", res)
			// 		}
			// 	}).catch((error) => {

			// 	});
			// },

			//查询用户积分余额和看直播信息统计
			// completionInfo() {
			// 	if (!this.liveId) return;
			// 	const data = {
			// 		liveId: this.liveId
			// 	}
			// 	completionInfo(data).then((res) => {
			// 		if (res.code == 200) {
			// 			this.integral = res.data.integral
			// 			this.records = res.data.records
			// 			this.totalDays = res.data.totalDays
			// 			console.log("查询用户积分余额和看直播信息统计", res)
			// 		}
			// 	}).catch((error) => {

			// 	});
			// },


			// doSign() {
			// 	var data = {};
			// 	// uni.showLoading({
			// 	// 	title:"正在加载中..."
			// 	// })
			// 	doSign(data).then(
			// 		res => {
			// 			// uni.hideLoading()
			// 			if (res.code == 200) {
			// 				uni.showToast({
			// 					icon: 'success',
			// 					title: res.msg,
			// 				});
			// 				this.list = [];
			// 				this.page.page = 1;
			// 				this.list = [];
			// 				this.loaded = false;
			// 				this.loading = false;
			// 				this.getUserIntegralLogsList();
			// 				this.getUserSign();
			// 			} else {
			// 				uni.showToast({
			// 					icon: 'none',
			// 					title: res.msg,
			// 				});
			// 			}
			// 		},
			// 		rej => {}
			// 	);
			// },
			getUserSign() {
				getUserSign().then(
					res => {
						if (res.code == 200) {
							this.data = res.member;
							this.signNum = res.signNum;
							this.isDaySign = res.isDaySign;
							this.integral = res.integral;
							this.sign = JSON.parse(res.sign);

						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},


			// // 积分
			// getUserIntegralInfo() {
			// 	uni.showLoading({
			// 		title: "正在加载中..."
			// 	})
			// 	getUserIntegralInfo().then(res => {
			// 		uni.hideLoading()
			// 		if (res.code == 200) {
			// 			console.log("积分>>", res)
			// 			// 处理列表数据，将"积分"替换为"积分"
			// 			this.list = res.data.logs.map(item => {
			// 				return {
			// 					...item,
			// 					logTypeName: item.logTypeName ? item.logTypeName.replace(/积分/g, '积分') :
			// 						item.logTypeName
			// 				}
			// 			})
			// 			this.integral = res.data.integral
			// 		}
			// 	}).catch(error => {
			// 		console.error("获取积分数据失败:", error);

			// 	});
			// },



			getDictByKey(key) {
				var data = {
					key: key
				}
				getDictByKey(data).then(
					res => {
						if (res.code == 200) {
							this.typeOptions = res.data;
						}
					},
					err => {}
				);

			},


			getUserIntegralLogsList() {
				let that = this;
				if (that.loaded == true || that.loading == true) return;
				that.loading = true;
				uni.showLoading({
					title: "加载中..."
				})
				getUserIntegralLogsList(that.page).then(
					res => {
						that.loading = false;
						that.loaded = res.data.list.length < that.page.pageSize;
						that.page.page = that.page.page + 1;
						that.list.push.apply(that.list, res.data.list);
						uni.hideLoading()
					},
					err => {
						uni.hideLoading()
						uni.showToast({
							title: err.msg,
							icon: 'none',
							duration: 2000
						});
					}
				);
			},
			// 返回上一页
			back() {
				uni.navigateBack()
			},
			// tab选择
			// tabChange(item) {
			// 	console.log(item)
			// 	this.tabIndex = item.value
			// 	this.page.type=this.tabIndex;
			// 	this.page.page=1;
			// 	this.list=[];
			// 	this.loaded=false;
			// 	this.loading=false;
			// 	this.getUserIntegralLogsList();
			// }
		}
	}
</script>

<style lang="scss">
	.fixed-top-box {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		transition: all 0.5s;

	}

	.top-cont {
		width: 100%;
		height: 654upx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		.top-inner {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;

			.back-box {
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;

				image {
					width: 40upx;
					height: 40upx;
				}

				.title {
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.available-points {
				margin-top: 140upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.label {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 1;
				}

				.num {
					font-size: 80upx;
					font-family: Gilroy;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 1;
					margin-top: 28upx;
				}
			}

			.singn-content {
				padding: 0 20upx;
				margin-top: 50upx;
			}

			.sign-in-box {
				height: 380upx;
				background: #FFFFFF;
				border-radius: 16upx;

				.inner {
					padding: 40upx 30upx;

					.title-box {
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 1;

						.num {
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: Bold;
							color: #FF7511;
							margin: 0 10upx;
							line-height: 1;
						}
					}

					.sign-list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 40upx;

						.item {
							display: flex;
							justify-content: center;

							.right {
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;

								image {
									width: 44upx;
									height: 44upx;
									margin-bottom: 20upx;
								}

								.text {
									font-size: 24upx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #FF7511;
									line-height: 1;
									white-space: nowrap;
								}
							}

							.line {
								width: 34upx;
								height: 4upx;
								background: #F6CDA7;
								border-radius: 2upx;
								margin-top: 22upx;
							}

							&:first-child {
								.line {
									display: none;
								}
							}

							&.active {
								.line {
									background: #FF8E3C;
								}
							}
						}
					}
				}

				.sign-btn-box {
					padding: 0 14upx;

					.btn {
						width: 100%;
						height: 88upx;
						box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
						background-color: #FF7511;
						border-radius: 44rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 32upx;
							height: 32upx;
						}

						.text {
							font-size: 30upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 1;
						}
					}
				}
			}

		}
	}

	.content {
		margin-top: 20upx;
		padding: 0 20upx 40upx;

		.points-cont {

			background-color: #FFFFFF;
			border-radius: 16upx;

			.pub-tab-box {
				padding: 0 80upx;

				.tab-inner {
					height: 88upx;
					line-height: 88upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.item {
					font-size: 28upx;
					white-space: nowrap;
					line-height: 1;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: center;

					&.active {
						font-weight: bold;
						color: #333333;
					}

					.text {
						position: relative;
						z-index: 1;
					}

					.tab-bg {
						width: 72upx;
						height: 28upx;
						position: absolute;
						top: 17upx;
						left: 50%;
						transform: translateX(-36upx);
						z-index: -1;
					}
				}
			}

			.point-list {
				padding: 0 30upx;

				.item {
					padding: 30upx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F0F0F0;

					&:last-child {
						border-bottom: none;
					}

					.left {
						.title {
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
							line-height: 1;
						}

						.time {
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 1;
							margin-top: 22upx;
						}
					}

					.right {
						.add {
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
						}

						.less {
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #F56C6C;
						}
					}
				}
			}
		}
	}
</style>