jiuyiUniapp/jiuyi2/pages/index/integral.vue

<script setup>
	/**
	 * 积分
	 */
	import api from '@/api/index.js';
	import {
		useStore,
	} from 'vuex'
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'
	// 积分记录
	import integralLog from '@/components/index/integralLog'
	// vuex
	const store = useStore()
	//我的卷轴列表
	const dataList = ref([])
	//读秒记录
	const viewData = ref({
		seconds: 0
	})
	//积分变动记录
	const scrollLogData = ref([])
	// 总积分
	const total = ref(0)
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})
	// 进度条
	const progress = computed(() => {
		let result = viewData.value.seconds
		result = Math.min(Number(result), 100)
		return result
	})

	onLoad(() => {
		buyScrollList()
		// viewingTasks()
		getLog()
	})

	// 查看我购买的卷轴
	function buyScrollList() {
		api.intergral.buyScrollList({}).then(rs => {
			if (rs.code == 200) {
				const result = rs.data
				// 待释放总积分
				total.value = result.total
				// 卷轴列表
				dataList.value = result.dataList.map(item => {
					item.formatHash = item.scrollHash.replace(/(\d{4})\d*(\d{4})/, "$1****$2")
					// item.style = {
					// 	'1级卷轴': 'scroll1',
					// 	'2级卷轴': 'scroll2',
					// 	'3级卷轴': 'scroll3',
					// 	'4级卷轴': 'scroll4',
					// } [item.scrollName]
					return item
				})
				return
			}
		})
	}

	// 今日任务读秒记录
	function viewingTasks() {
		api.intergral.viewingTasks({}).then(rs => {
			if (rs.code == 200 && rs.data) {
				viewData.value = rs.data
				return
			}
		})
	}

	// 积分变动明细
	function getLog() {
		api.intergral.getDetailInfoByDate({
			query: {
				pageNum: 1,
				pageSize: 10,
			}
		}).then(rs => {
			if (rs.code == 200) {
				scrollLogData.value = rs.rows
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	function navigateToPage(path) {
		uni.navigateTo({
			url: path
		});
	}

	/**
	 * 去详情
	 * @param {Object} item
	 */
	function handleDetail(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/index/integralDetail', {
				id: item.coreScrollInfoId,
			})
		})
	}

	/**
	 * 复制
	 * @param {Object} item 当前对象
	 */
	function handleCopy(item) {
		util.copyText(item.scrollHash)
	}
</script>

<template>
	<view class="appbw">
		<view class="score rows mtb30 mlr30 ptb20 plr30 cfff f34 br20">
			<view class="title">可释放总积分</view>
			<view class="value mt5 ptb5 plr20 tac br10">{{total}}</view>
		</view>

		<view class="listBox">
			<view class="board pr oh mtb30 mlr30 ptb20 plr20 cfff f30 br20" v-for="(item, index) in dataList"
				:key="item.id" @click="handleDetail(item)">
				<view class=" df">
					<view class="left f1 mr40">
						<view class="key mt20 f32">卷轴可释放</view>
						<view class="value mt5 ptb5 tac bfff br20">{{item.scrollRemainPoints}}</view>
					</view>

					<view class="right f1">
						<view class="f36">{{item.scrollName}}</view>
					</view>

					<image class="image pa" src="/static/integral.png" mode="aspectFit" />
				</view>
				<view class="mt20 df aic f28">
					<view>卷轴哈希: {{item.formatHash}}</view>
					<view class="wh30 ml15" @click="handleCopy(item)">
						<image src="/static/copy2.png" mode="aspectFit" class="wh24" />
					</view>
				</view>
			</view>
		</view>

		<!-- 任务读秒 -->
		<view class="task pr mtb30 mlr30 ptb20 plr40 f28 bFFFBF3 br20">
			<view class="title c333 f36">任务读秒</view>

			<view class="progressBox oh bar mt60">
				<view class="progress bar" :style="{width: progress + '%'}"></view>
			</view>

			<view class="label pa t0 r0 ptb5 plr20 cfff">优先</view>
		</view>

		<!-- 释放记录 -->
		<view class="log mtb30 mlr30 ptb20 plr40 c666 f28 bFFFBF3 br20">
			<view class="line rows">
				<view class="title c333 f36">当日明细</view>
				<view class="" @click="navigateToPage('/pages/index/integralLog')">全部</view>
			</view>

			<integralLog :list="scrollLogData" />
		</view>

		<!-- 填充 -->
		<view class="fill" style="height: 30rpx;"></view>
	</view>
</template>

<style lang="scss">
	.score {
		background-color: #333;
	}

	// 列表
	// .listBox {
	// 	.scroll1 {
	// 		background-color: #F4F4F4;
	// 	}

	// 	.scroll2 {
	// 		background-color: #E4FBFF;
	// 	}

	// 	.scroll3 {
	// 		background-color: #CACDFF;
	// 	}

	// 	.scroll4 {
	// 		background-color: #F4CAFF;
	// 	}
	// }

	// 
	.board {
		background-image: linear-gradient(121deg, #27EFE2 0%, #A45EFF 43%, #FF004F 99%);

		.value {
			color: #3D3D3D;
			font-size: 40rpx;
		}

		.image {
			right: 0rpx;
			bottom: -50rpx;
			width: 200rpx;
			height: 200rpx;
			transform: rotate(-5deg);
		}
	}

	// 任务读秒
	.task {
		.label {
			background-image: linear-gradient(116deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
			border-radius: 0 24rpx 0 24rpx;
		}

		// 进度条
		.progressBox {
			background-color: #D6D6D6;

			.progress {
				height: 30rpx;
				background-image: linear-gradient(97deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
			}
		}
	}
</style>