veterans_H5/h5_web/pages/progressiveIntegral/progressiveIntegral.vue

<!-- 进步积分 -->
<template>
	<view class="integral">
		
		<!-- 导航栏 -->
		<u-navbar class="evaluate-intention-bar" back-text="" title="进步积分" :background="background" title-color="#fff" back-icon-color="#fff">
		</u-navbar>
		
		<!-- 背景 -->
		<view class="integral-bg"></view>
		
		<!-- 内容 -->
		<view class="integral-content">
			
			<view class="integral-content-header">
				<view class="integral-content-header-grade">688</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">积分规则<u-icon name="arrow-right"/></view>
				<view class="integral-content-header-behavior">
					<view class="item">286<text>个加分行为</text></view>
					<view class="item">33<text>个减分行为</text></view>
				</view>
			</view>
			
			<view class="integral-content-first">
				<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 class="integral-content-list">
				<view class="integral-content-list-item" v-for="(item, index) in integralList" :key="index">
					<view class="left">
						<view>{{ item.title }}</view>
						<view>{{ item.date }}</view>
					</view>
					<view class="right">
						<view v-if="item.type === 0">+{{ item.grade }}</view>
						<view v-else class="reduce">-{{ item.grade }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#FE7C0F'
				},
				// 积分列表
				integralList: [
					{
						title: '签到成功',
						date: '2021-03-25',
						grade: 100,
						type: 0
					},
					{
						title: '积分商城兑换',
						date: '2021-03-24',
						grade: 5000,
						type: 1
					},
					{
						title: '签到成功',
						date: '2021-03-24',
						grade: 100,
						type: 0
					},
					{
						title: '签到成功',
						date: '2021-03-23',
						grade: 100,
						type: 0
					},
					{
						title: '签到成功',
						date: '2021-03-22',
						grade: 100,
						type: 0
					},
					{
						title: '签到成功',
						date: '2021-03-21',
						grade: 100,
						type: 0
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

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