uni-zhihuikuangshan-2/pages/index/integral/integral.vue

<template>
	<view>
		<view class="top">
			<image src="./img/jifen.jpg" mode="aspectFill"></image>
			
			<view class="inner">
				<view class="name">总积分</view>
				<view class="total">{{total}}</view>
			</view>
		</view>
		
		<view class="content">
			<view class="title">
				<view class="text">积分规则</view>
				<view class="more" @click="go_more()">积分明细 <uni-icons type="arrowright" color="#999" size="11"></uni-icons>
				</view>
			</view>
			<view class="list">
				<view class="item">
					<view class="left">
						<view class="type">签到</view>
						<view class="text">1分/每日首次登录</view>
						<view class="box">
							<slider block-size="0" disabled :min="1" :max="1"/>
							<view class="text">	已获1分/每日上限1分</view>
						</view>
					</view>
					<view class="right">
						<view class="tip" v-if="is_finish == 0" style="background-color: #94BA2B;color: #FFFFFF;">未完成</view>
						<view class="tip" v-if="is_finish == 1">已完成</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 完成状态
				is_finish:0,
				// 总积分
				total:0
			};
		},
		onLoad() {
			this.get_staff_integral_list()
			//查询员工积分
			this.get_staff_integral_query()
		},
		methods:{
			//查询员工积分
			get_staff_integral_query() {
				this.$api.staff_integral_query({
					staff_num: uni.getStorageSync('user').staff_num
				}).then((res) => {
					// console.log(res)
					
					this.total = res.data.content.data.integral_sum
				})
			},
			
			get_staff_integral_list(){
				this.$api.staff_integral_list({
					staff_num: uni.getStorageSync('user').staff_num,
					integral_type: 1
				}).then((res)=>{
					// console.log(res.data.content.data)
					
					this.is_finish = res.data.content.data.is_finish
				})
			},
			// 积分明细
			go_more(){
				uni.navigateTo({
					url:"./detail/detail"
				})
			}
		}
	}
</script>

<style lang="scss">
	.top{
		image{
			width: 750rpx;
			height: 340rpx;
		}
		
		position: relative;
		
		.inner{
			position: absolute;
			top: 0;
			left: 0;
			
			width: 750rpx;
			text-align: center;
			color: #FFFFFF;
			.name{
				margin-top: 140rpx;
				font-size: 32rpx;
			}
			.total{
				font-size: 68rpx;
				line-height: 150rpx;
			}
		}
	}
	
	.content {
		background-color: #FFFFFF;
	
		box-sizing: border-box;
		padding: 50rpx 25rpx;
	}
	
	.title {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	
		.text {
			font-size: 36rpx;
		}
	
		.more {
			font-size: 26rpx;
			color: #999;
	
		}
	}
	
	.list{
		margin-top: 40rpx;
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			// height: 150rpx;
			.left{
				font-size: 28rpx;
				line-height: 50rpx;
				.type{
					font-size: 32rpx;
				}
				.text{
					color: #999;
				}
				.box{
					display: flex;
					align-items: center;
					
					slider{
						margin: 0;
						width: 100rpx;
					}
					.text{
						margin-left: 20rpx;
						color: #999;
					}
				}
			}
			.right{
				.tip{
					padding: 10rpx 20rpx;
					background-color: #e9e9e9;
					color: #666;
					font-size: 24rpx;
				}
			}
		}
	}
</style>