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

<template>
	<!-- 每日签到 -->
	<view>
		<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('getEveryDay')"></u-navbar>
		</view>
		<view class="content">
			<view class="top-pic">
				<view class="pic-text">
					<view class="big-text">{{$i18n.locale=='zh'?'立即签到':'Sign in immediately'}}</view>
					<view class="little-text">
						{{$i18n.locale=='zh'?'连续签到，奖励更丰富!':'Continuous check-in, more rich reward!'}}
					</view>
				</view>
			</view>
			<view class="body-day" v-if="flag==1">
				<view class="get-every">
					<view :class="index.charAt(index.length - 1)<=GetLength.length?'getDay1':'getDay'"
						v-for=" (item,index) in getSignIn" :key="index" @tap="getDailyIntetral(index)">
						<view :class="index.charAt(index.length - 1)<=GetLength.length?'dayImg1':'dayImg'">
							<view :class="index.charAt(index.length - 1)<=GetLength.length?'dayNum1':'dayNum'">
								{{$i18n.locale=='zh'?'第':'Day'}}{{index.charAt(index.length - 1)}}{{$i18n.locale=='zh'?'天':''}}
							</view>
							<image src="@/static/user-gave.png" class="img-pic" />
							<view :class="index.charAt(index.length - 1)<=GetLength.length?'imgText1':'imgText'">
								{{item}}{{$i18n.locale=='zh'?'积分':'Intetral'}}
							</view>
						</view>
					</view>
				</view>
				<u-button class="ntegrate-history" type="custom" shape="circle">
					{{$i18n.locale=='zh'?'积分签到获取历史':'Integral sign-in to obtain history'}}
				</u-button>
			</view>
			<view class="body-day" v-if="flag!=1">
				<view class="get-every">
					<view :class="index.charAt(index.length - 1)<=GetLength.length?'getDay1':'getDay'"
						v-for=" (item,index) in getSignIn" :key="index" @tap="getDailyIntetral(index)">
						<view :class="index.charAt(index.length - 1)<=GetLength.length?'dayImg1':'dayImg'">
							<view :class="index.charAt(index.length - 1)<=GetLength.length?'dayNum1':'dayNum'">
								{{$i18n.locale=='zh'?'第':'Day'}}{{index.charAt(index.length - 1)}}{{$i18n.locale=='zh'?'天':''}}
							</view>
							<image src="@/static/user-gave.png" class="img-pic" />
							<view :class="index.charAt(index.length - 1)<=GetLength.length?'imgText1':'imgText'">
								{{item}}{{$i18n.locale=='zh'?'积分':'Intetral'}}
							</view>
						</view>
					</view>
				</view>
				<u-button class="ntegrate-history" type="custom" shape="circle">
					{{$i18n.locale=='zh'?'积分签到获取历史':'Integral sign-in to obtain history'}}
				</u-button>
			</view>
			<view class="kong-ui"></view>
			<view class="title">
				<view class="title-list">{{$i18n.locale=='zh'?'日期':'Date'}}</view>
				<view class="title-list">{{$i18n.locale=='zh'?'分数':'Score'}}</view>
				<view class="title-list">{{$i18n.locale=='zh'?'备注':'Remark'}}</view>
			</view>
			<view v-if="flag==1" class="detail-list" v-for="(getList,index) in getInfo" :key="index">
				<view class="list-time get-details">{{getList.updateDate|time('YYYY-MM-DD')}}</view>
				<view class="list-integrate get-details">+{{getList.point}}</view>
				<view class="list-info get-details">{{$i18n.locale=='zh'?getList.title:getList.titleEn}}</view>
			</view>
			<view v-if="flag!=1" class="detail-list" v-for="(getList,index) in getInfo" :key="index">
				<view class="list-time get-details">{{getList.updateDate|time('YYYY-MM-DD')}}</view>
				<view class="list-integrate get-details">+{{getList.point}}</view>
				<view class="list-info get-details">{{$i18n.locale=='zh'?getList.title:getList.titleEn}}</view>
			</view>
			<uni-load-more :status="status" v-show="this.total>10"></uni-load-more>
		</view>
		<uni-popup ref="message">
			<uni-popup-message style="border-radius: 10px;" :type="msgType" :message="messageText" :duration="1000">
			</uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import moment from "moment";
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	import {
		addSignPointDetail
	} from '@/api/address'
	export default {
		components: {
			uniPopupDialog,
			uniPopupMessage,
			uniPopup
		},
		data() {
			return {
				flag: '1',
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				// getBtnEd: true,
				getInfo: {},
				getSignIn: {},
				GetLength: {},
				msgType: 'success',
				messageText: `请稍后...`,
				pageSize: "10",
				pageNo: "1",
				total: null,
				status: 'more',
				index: '',
			};
		},
		onShow() {
			this.findBasicInfo();
			this.getEveryDays();
			console.log(this.flag, '判断');
		},
		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);
		},
		filters: {
			twoDecimal(value) {
				return parseFloat(string(value)).toFixed(2);
			},
			time(data, type) {
				return moment(data).format(type);
			}
		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			async getDailyIntetral(index) {
				console.log(this.GetLength);
				//用户第一次签到
				if (this.GetLength.length === 0) {
					const tokendata = await this.$myRequest({
						url: '/sys/token',
						method: 'get'
					});
					addSignPointDetail({
							taskDict: "point_task_sign",
							point: this.getSignIn[`day${this.GetLength.length+1}`],
						},
						tokendata.data
					).then(() => {
						this.$refs.message.open()
						if (this.$i18n.locale == 'zh') {
							this.messageText = `签到成功`
							this.findBasicInfo();
							this.getEveryDays();
							this.flag += '1'
							return this.flag
						} else {
							this.messageText = `Sign in successfully`
							this.findBasicInfo();
							this.getEveryDays();
							this.flag += '1'
							return this.flag
						}
					})
				}
				//用户非第一次签到
				else {
					let todayDate = moment(new Date()).format("YYYY-MM-DD");
					var length = this.GetLength.length;
					var data = parseInt(length - 1);
					let lastSingIn = moment(
						this.GetLength[data].updateDate
					).format("YYYY-MM-DD");
					console.log(todayDate);
					console.log(lastSingIn);
					if (todayDate != lastSingIn) {
						const tokendata = await this.$myRequest({
							url: '/sys/token',
							method: 'get'
						});
						addSignPointDetail({
								taskDict: "point_task_sign",
								point: this.getSignIn[`day${this.GetLength.length+1}`],
							},
							tokendata.data
						).then(() => {
							this.$refs.message.open()
							if (this.$i18n.locale == 'zh') {
								this.messageText = `签到成功!`
								this.findBasicInfo();
								this.getEveryDays();
								this.flag += '1'
								return this.flag

							} else {
								this.messageText = `Sign in successfully`
								this.findBasicInfo();
								this.getEveryDays();
								this.flag += '1'
								return this.flag
							}
						});
					} else {
						this.$refs.message.open()
						if (this.$i18n.locale == 'zh') {
							this.messageText = `今天已签到!`
							this.findBasicInfo();
							this.getEveryDays();
							this.flag += '1'
							return this.flag
						} else {
							this.messageText = `Have signed in today`
							this.findBasicInfo();
							this.getEveryDays();
							this.flag += '1'
							return this.flag
						}
					}
				}

			},
			async findBasicInfo() {
				const result = await this.$myRequest({
					url: '/uc/userCenter/findBasicInfo',
					data: {},
				});
				this.form = result.data;
				this.getIntegrate();
			},
			async getIntegrate() {
				const res = await this.$myRequest({
					url: '/uc/umsUserPointDetailss/getUserPointDetailsPage',
					data: {
						"pageSize": this.pageSize,
						"pageNo": this.pageNo,
						"taskDict": "point_task_sign"
					}
				});
				// console.log(res);
				this.getInfo = res.data.umsUserPointDetailss
				this.total = res.data.page.totalCount
			},
			async getEveryDays() {
				const res = await this.$myRequest({
					url: '/uc/umsUserTasks/getUserTaskComplete',
					data: {

					}
				});
				// console.log(res, '===========');
				this.GetLength = res.data.sign ? res.data.sign : [],
					console.log(this.GetLength, res.data.sign, '大数据');
				this.getSignIn = res.data.signTask.taskPoint

			},


		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// background-color: #4592FE;

		.top-pic {
			height: 400rpx;
			background-image: url('@/static/bgc-blue.jpg');
			background-size: 100% 400rpx;

			.pic-text {
				width: 64%;
				height: 64%;
				background: rgba(255, 255, 255, 0.3);
				margin-left: 50%;
				border: 1rpx solid #fff;
				transform: translateX(-50%) translateY(28%);

				.big-text {
					font-size: 38rpx;
					font-weight: 700;
					color: #fff;
					text-align: center;
					transform: translateY(46%);
				}

				.little-text {
					font-size: 28rpx;
					text-align: center;
					color: #fff;
					transform: translateY(110%);
				}
			}
		}

		.sign-in {
			height: 60rpx;
			line-height: 60rpx;
			background-color: #73d502ff;
			width: 150rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 700;
			border-radius: 50rpx;
			margin-left: 75%;
		}

		.body-day {
			background-color: #fff;

			.get-every {
				width: 96%;
				margin-left: 2%;
				height: 360rpx;
				display: flex;
				flex-flow: wrap;
				justify-content: space-evenly;

				.getDay {
					width: 24%;
					height: 150rpx;
					border-radius: 20rpx;
					text-align: center;
					border: 1rpx solid #e566934d;
					background-color: #fef8ea;

					.dayImg {
						transform: translateY(-10rpx);

						.dayNum {
							border: 1rpx solid skyblue;
							border-radius: 50rpx;
							width: 100rpx;
							margin-left: 50%;
							transform: translateX(-50%);
							height: 45rpx;
							line-height: 45rpx;
							background-color: #fbb086ff;
							color: #fff;
						}

						.imgText {
							transform: translateY(-10rpx);
							font-size: 28rpx;
							color: #fbb086ff;
						}

						.img-pic {
							width: 70rpx;
							height: 70rpx;
						}
					}
				}

				.getDay:last-child {
					width: 49%;
				}

				.getDay1 {
					width: 24%;
					height: 150rpx;
					border-radius: 20rpx;
					text-align: center;
					border: 1rpx solid #00ff004d;
					background-color: #ccf6df;

					.dayImg1 {
						transform: translateY(-10rpx);

						.img-pic {
							width: 70rpx;
							height: 70rpx;
						}

						.dayNum1 {
							border: 1rpx solid skyblue;
							border-radius: 50rpx;
							width: 100rpx;
							margin-left: 50%;
							transform: translateX(-50%);
							height: 45rpx;
							line-height: 45rpx;
							background-color: #76d509ff;
							color: #fff;
						}

						.imgText1 {
							transform: translateY(-10rpx);
							font-size: 28rpx;
							color: #76d509ff;
						}
					}
				}

				.getDay1:last-child {
					width: 49%;
				}
			}

			.ntegrate-history {
				width: 60%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				background-color: #4592fe;
				color: #fff;
				margin-top: 10rpx;
			}
		}

		.kong-ui {
			height: 35rpx;
			background-color: #ffffff;
		}

		.title {
			height: 60rpx;
			display: flex;
			justify-content: space-evenly;

			.title-list {
				width: 33%;
				line-height: 60rpx;
				text-align: center;
			}
		}

		.detail-list {
			display: flex;
			justify-content: space-evenly;
			height: 80rpx;
			background-color: #fff;

			.get-details {
				line-height: 80rpx;
				width: 33%;
				text-align: center;
				font-size: 28rpx;
			}

			.list-integrate {
				font-size: 32rpx;
				color: #E02020FF;
				font-weight: 700;
			}
		}
	}
</style>