veterans_H5/h5_web/pages/progressiveIntegral/progressiveIntegral.vue

<!-- 进步积分 -->
<template>
	<view class="integral">
		<z-paging
			ref="paging"
			v-model="integralList"
			@query="queryList"
		>
			<!-- 导航栏 -->
			<u-navbar class="evaluate-intention-bar" back-text="" title="进步积分" :background="background" title-color="#fff" back-icon-color="#fff" slot="top">
			</u-navbar>
			
			<!-- 背景 -->
			<view class="integral-bg" slot="top"></view>
			
			<!-- 内容 -->
			<view class="integral-content" style="margin-top: -472rpx;" slot="top">
				<view class="integral-content-header">
					<view class="integral-content-header-grade">{{ totalCount }}</view>
					<view class="integral-content-header-point">
						<view class="point">
							<view></view>
						</view>
						<view>累计获得积分</view>
						<view class="point">
							<view></view>
						</view>
					</view>
					<view class="integral-content-header-rules" @click="jumpPage('/pages/integralRule/integralRule')">积分规则<u-icon name="arrow-right"/></view>
					<view class="integral-content-header-behavior">
						<view class="item" v-for="(item, index) in behaviorList" :key="index">{{ item.count }}<text>个{{ item.type === 1 ? '加' : '减' }}分行为</text></view>
						<!-- <view class="item">0<text>个减分行为</text></view> -->
					</view>
				</view>
			</view>
			<view class="integral-content" slot="top">
				<view class="integral-content-first">
					<view class="integral-content-first-header">获得进步积分可以</view>
					<view class="integral-content-first-box">
						<view class="integral-content-first-item">
							<image src="../../static/img/priority-recommendation-icon.png" mode=""></image>
							<view>优先推荐</view>
						</view>
						<view class="integral-content-first-item">
							<image src="../../static/img/priority-shift-icon.png" mode=""></image>
							<view>优先分班</view>
						</view>
						<view class="integral-content-first-item">
							<image src="../../static/img/priority-feedback-icon.png" mode=""></image>
							<view>优先反馈</view>
						</view>
					</view>
				</view>
			</view>
			<view class="integral-content" v-if="integralList.length">
				<view class="integral-content-list">
					<view class="integral-content-list-item" v-for="(item, index) in integralList" :key="index">
						<view class="left">
							<view>{{ item.remark }}</view>
							<view>{{ item.createTime }}</view>
						</view>
						<view class="right">
							<view v-if="item.type === 1">+{{ item.integral }}</view>
							<view v-else class="reduce">{{ item.integral }}</view>
						</view>
					</view>
				</view>
				<!-- <view class="integral-content-list" v-else>
					<u-empty mode="list"></u-empty>
				</view> -->
			</view>
		</z-paging>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#FE7C0F'
				},
				// 积分列表
				integralList: [],
				// 积分行为
				behaviorList: [],
				// 总分
				totalCount: 0
			}
		},
		onLoad() {
			this.getIntegralTotal();
		},
		methods: {
			/**
			 * @param { Number } pageNum
			 * @param { Number } pageSize
			 */
			queryList(pageNum, pageSize) {
				this.getintegralList(pageNum, pageSize);
			},
			/**
			 * 获取积分统计情况
			 */
			getIntegralTotal() {
				this.$u.api.mine.totalCount().then(res => {
					if (res.code === 200) {
						this.behaviorList = res.data;
						// 计算总分
						let total = 0
						this.totalCount = res.data.reduce((total, item) => total + item.total, 0)
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: '系统错误!',
						type: 'error'
					})
				})
			},
			/**
			 * 积分列表
			 */
			getintegralList(pageNum, pageSize) {
				this.$u.api.mine.integralList({pageNum, pageSize}).then(res => {
					if (res.code === 200) {
						this.$refs.paging.complete(res.rows);
					} else {
						this.$refs.paging.complete([]);
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				}).catch(() => {
					this.$refs.uToast.show({
						title: '系统错误!',
						type: 'error'
					})
				})
			},
			/**
			 * @param { String } url
			 */
			jumpPage(url) {
				this.$u.route(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import './progressiveIntegral.scss';
</style>