dev/dcp-app-gate/pages/profile/personIntegrate/integrateListDetail.vue

<template>
	<view class="">
		<view style="background-color: $color-white !important;">
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('integrateListDetails')"></u-navbar>
		</view>
		<view class="content">
			<view class="content-title">
				<view class="example-body">
					<uni-datetime-picker v-model="range" type="daterange" @change="changeLog" />
				</view>

				<view class="detail-info">
					<view class="detail-integrate">
						<view class="get-integrate">
							{{$i18n.locale=='zh'?'积分获取':'Integral gain'}}：<text
								class="integrate-num">{{userDetail.addPoint==null?'0':userDetail.addPoint}}</text>
						</view>
						<view class="pay-integrate">
							{{$i18n.locale=='zh'?'积分支出':'Integral spending'}}：<text
								class="integrate-num">{{userDetail.deductPoint==null?'0':userDetail.deductPoint}}</text>
						</view>
					</view>
					<view class="subtotal-integrate">
						{{$i18n.locale=='zh'?'当月小计':'Monthly subtotal'}}：
						<text
							class="subtotal-integrate-num">{{userDetail.addPoint==null?'0':Number(userDetail.addPoint)-Number(userDetail.deductPoint)}}</text>{{$i18n.locale=='zh'?'积分':'Integral'}}
					</view>
				</view>
			</view>
			<view class="user-detail">
				<uni-section>
					<view class="ui-btn">
						<uni-segmented-control :current="current" :values="items" :style-type="styleType"
							:active-color="activeColor" @clickItem="onClickItem" class="ui-pay-btn" />
					</view>
				</uni-section>
				<view>
					<view v-if="current === 0">
						<view class="detail-list" v-for="(getList,index) in getInfo" :key="index">
							<view class="user-detail-list">
								<!-- <view class="list-pic">
									<image :src="newDownTask[getList.taskDict]" alt="" class="un-pic" />
								</view> -->
								<view class="list-user-info">
									<view class="list-title">{{$i18n.locale=='zh'?getList.title:getList.titleEn}}</view>
									<view class="list-info">{{$i18n.locale=='zh'?'任务中心':'The task center'}}</view>
									<view class="list-time">
										{{getList.updateDate|time('YYYY-MM-DD HH:mm:ss')}}
									</view>
								</view>
								<view class="list-num">+{{getList.point}}
									<image src='@/static/intetral-user.png' class="list-num-pic" />
								</view>
							</view>
						</view>
						<uni-load-more :status="status" v-show="this.total>10"></uni-load-more>
					</view>
					<view v-if="current === 1">
						<view class="detail-list" v-for="(payList,index) in getInfo" :key="index">
							<view class="user-detail-list">
								<!-- <view class="list-pic">
									<image :src="newDownTask[payList.taskDict]" alt="" class="un-pic" />
								</view> -->
								<view class="list-user-info">
									<view class="list-title">{{payList.title}}</view>
									<view class="list-info">任务中心</view>
									<view class="list-time">
										{{payList.updateDate|time('YYYY-MM-DD HH:mm:ss')}}
									</view>
								</view>
								<view class="list-num">-{{payList.point}}
									<image src='@/static/intetral-user.png' class="list-num-pic" />
								</view>
							</view>
						</view>
						<uni-load-more :status="status" v-show="this.total>10"></uni-load-more>
					</view>
				</view>
				<view class="ui-bgi-pic"></view>
			</view>

		</view>
	</view>
</template>

<script>
	import moment from "moment"
	const newDownTask = {
		point_task_upload_head_portrait: '@/static/blue/user-title.png',
		point_task_complete_info: '@/static/blue/user-1.png',
		point_task_verified_name: '@/static/blue/user-2.png',
		point_task_bind_email: '@/static/blue/user-3.png',
		point_task_set_nickname: '@/static/blue/user-4.png',
		point_task_bind_phone: '@/static/blue/user-5.png',
		platform_problem_feedback: '@/static/green/user-1.png',
		point_task_upload_resources_project: '@/static/green/user-2.png',
		project_recommended: '@/static/green/user-3.png',
		aubmit_a_message_once: '@/static/green/user-2.png',
		point_task_upload_journal: '@/static/green/user-2.png',
		point_task_upload_resources_result: '@/static/green/user-2.png',
		activity_registration_successful: '@/static/green/user-4.png',
		point_task_share_project: '@/static/green/user-5.png',
		meeting_registration_successful: '@/static/green/user-6.png',
		the_message_was_liked: '@/static/green/user-7.png',
		point_task_share_information: '@/static/green/user-6.png',
		point_task_sign: '@/static/green/user-8.png',
		message_is_saved: '@/static/green/user-9.png',
		point_task_upload_information: '@/static/green/user-11.png',
		point_task_development_cooperation_message: '@/static/green/user-12.png',
		point_task_project_message: '@/static/green/user-13.png',
		point_task_project_ask: '@/static/green/user-14.png',
		point_read_information: '@/static/green/user-15.png',
		point_task_attention: '@/static/green/user-16.png',
		point_task_view_resources_project: '@/static/green/user-17.png'

	}
	export default {
		components: {
			moment
		},
		data() {
			return {
				items: ['收获', '支出'],

				interType: '',
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],

				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'button',
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				form: {},
				getInfo: {},
				range: [],
				newDownTask: newDownTask,
				flag: false,
				userDetail: {},
				pageSize: "10",
				pageNo: "1",
				total: null,
				status: 'more',
			};

		},
		onShow() {
			this.getNowFormatDate();
			this.interType = 1
		},
		watch: {
			range(newval) {
				console.log('范围选:', this.range);
			},
		},


		filters: {
			twoDecimal(value) {
				return parseFloat(string(value)).toFixed(2);
			},
			time(data, type) {
				return moment(data).format(type);
			}
		},
		onReachBottom() {
			let allTotal = this.pageNo * this.pageSize
			if (allTotal < this.total) {
				console.log(this.total);
				//当前条数小于总条数 则增加请求页数
				this.status = 'loading';
				this.pageSize++;
				this.getIntegrate() //调用加载数据方法
			} else {
				this.status = 'noMore';
				// console.log('已加载全部数据')
			}
		},
		onPullDownRefresh() {
			//调用获取数据方法
			this.getIntegrate()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getNowFormatDate() {
				let date = new Date(),
					seperator1 = '-', //格式分隔符
					year = date.getFullYear(), //获取完整的年份(4位)
					month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
					month1 = date.getMonth() + 1,
					strDate = date.getDate() // 获取当前日(1-31)
				if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
				if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0
				let currentdate = year + seperator1 + month + seperator1 + strDate
				let currentInfo = year + seperator1 + month1 + seperator1 + strDate
				console.log('===2===', currentdate, currentInfo);
				this.range[0] = currentInfo
				this.range[1] = currentdate
				this.findBasicInfo();
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				if (this.interType == '0') {
					this.interType = 1
					this.getIntegrate()
				} else {
					this.interType = 0
					this.getIntegrate()
				}
				console.log(this.interType, '好多数据');
			},
			//选择时间
			async changeLog(e) {
				this.range = e
				// console.log('----change事件:', this.range);
				this.getIntegrate();

			},
			async findBasicInfo() {
				const result = await this.$myRequest({
					url: '/uc/userCenter/findBasicInfo',
					data: {},
				});
				this.form = result.data;
				// console.log(this.form, '====================');
				this.getIntegrate()
			},
			async getIntegrate() {
				const res = await this.$myRequest({
					url: '/uc/umsUserPointDetailss/getUserPointDetailsPage',
					data: {
						"pageSize": this.pageSize,
						"pageNo": this.pageNo,
						"pointType": this.interType,
						// "userId": this.form.id,
						'createStartDate': this.range[0],
						'createEndDate': this.range[1]
					}
				});
				// console.log(res);
				this.getInfo = res.data.umsUserPointDetailss
				this.userDetail = res.data.pointAndGrowth
				this.total = res.data.page.totalCount
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.example-body {
			width: 92%;
			margin-left: 4%;
		}

		.content-title {
			height: 365rpx;
			background-color: skyblue;

			.detail-info {
				width: 92%;
				height: 200rpx;
				margin-top: 7%;
				margin-left: 4%;
				border-radius: 20rpx;
				overflow: hidden;

				.detail-integrate {
					height: 100rpx;
					display: flex;
					background-color: rgba(255, 255, 255, 0.3);
					padding-left: 40rpx;

					.get-integrate {
						line-height: 100rpx;
						width: 40%;
					}

					.pay-integrate {
						line-height: 100rpx;
					}

					.integrate-num {
						font-size: 34rpx;
						font-weight: 700;
					}
				}

				.subtotal-integrate {
					height: 100rpx;
					background-color: rgba(255, 255, 255, 0.6);
					line-height: 100rpx;
					padding-left: 40rpx;

					.subtotal-integrate-num {
						font-size: 40rpx;
						// margin-left: 20rpx;
						font-weight: 700;
						padding: 0 10px;
					}
				}
			}
		}

		.user-detail {
			background-color: #fff;

			.ui-btn {
				width: 100%;

				.ui-pay-btn {
					width: 100%;
					background-color: #FFF;
				}
			}

			.get-integrate-detail {
				height: 70rpx;
				line-height: 70rpx;
			}

			.pay-integrate-detail {
				height: 70rpx;
				line-height: 70rpx;
			}

			.integrate-detail {
				height: 70rpx;
				line-height: 70rpx;
				width: 90rpx;
				height: 70rpx;
				text-align: center;
				color: deepskyblue;
				border-bottom: 2rpx solid deepskyblue;
			}
		}

		.detail-list {
			background-color: #fff;

			.user-detail-list {
				display: flex;
				height: 160rpx;
				width: 96%;
				margin-left: 2%;

				.list-pic {
					width: 20%;
					height: 160rpx;
					line-height: 160rpx;

					.un-pic {
						width: 100%;
						height: 100%;
					}
				}

				.list-user-info {
					width: 80%;
					margin-left: 10%;

					.list-title {
						height: 70rpx;
						line-height: 60rpx;
						font-size: 30rpx;
						font-weight: 700;

					}

					.list-info {
						height: 40rpx;
						line-height: 40rpx;
						font-size: 22rpx;
					}

					.list-time {

						height: 40rpx;
						line-height: 40rpx;
						font-size: 22rpx;


					}
				}

				.list-num {
					width: 30%;
					height: 160rpx;
					line-height: 160rpx;
					font-size: 40rpx;
					font-weight: 700;

					.list-num-pic {
						width: 16%;
						height: 20%;
						margin-left: 6rpx;
					}
				}
			}

		}

		.little-title {
			width: 96%;
			height: 100rpx;
			line-height: 100rpx;
			margin-left: 2%;
			font-size: 32rpx;
			text-align: center;
			letter-spacing: 3rpx;
			font-weight: 700;
			color: #0000004D;
			background-color: #f1f1f1;
		}
	}
</style>