yunshengtai-uniapp/pagesB/pages/user/signIn/Sign/index.vue

<template>
	<view class="sign">
		<view class="header bg-color-red">
			<view class="headerCon acea-row row-between-wrapper">
				<view class="left acea-row row-between-wrapper">
					<view class="pictrue">
						<image :src="userInfo.avatar" />
					</view>
					<view class="text">
						<view class="line1">{{ userInfo.nickname }}</view>
						<view class="integral acea-row">
							<text>积分: {{ userInfo.integral }}</text>
						</view>
					</view>
				</view>
				<view @click="goSignRecord()" class="right acea-row row-middle">
					<view class="iconfont icon-caidan"></view>
					<view>明细</view>
				</view>
			</view>
		</view>
		<view class="wrapper">
			<view class="list acea-row row-between-wrapper">
				<view class="item" v-for="(item, signSystemListIndex) in signSystemList" :key="signSystemListIndex">
					<view :class="signSystemListIndex + 1 === signSystemList.length ? 'rewardTxt' : ''">{{ item.day }}</view>
					<view class="venus" :class=" (signSystemListIndex + 1 === signSystemList.length ? 'reward' : '') +' ' + (sign_index >= signSystemListIndex + 1 ? 'venusSelect' : '')"></view>
					<view class="num" :class="sign_index >= signSystemListIndex + 1 ? 'on' : ''">+{{ item.sign_num }}</view>
				</view>
			</view>
			<!--加在 but 上 on 为已签到-->
			<view class="but bg-color-red" :class="userInfo.is_day_sgin ? 'on' : ''" @click="goSign">{{ userInfo.isDaySign ? "已签到" : "立即签到" }}</view>
			<view class="lock"></view>
		</view>
		<view class="wrapper wrapper2">
			<view class="tip">已累计签到</view>
			<view class="list2 acea-row row-center row-bottom">
				<view class="item" v-for="(item, signCountIndex) in signCount" :key="signCountIndex">{{ item || 0 }}</view>
				<view class="data">天</view>
			</view>
			<view class="tip2">据说连续签到第{{ day }}天可获得超额积分，一定要坚持签到哦~~~</view>
			<view class="list3">
				<view class="item acea-row row-between-wrapper" v-for="(item, signListIndex) in signList" :key="signListIndex">
					<view>
						<view class="name line1">{{ item.title }}</view>
						<view class="data">{{ item.addTime }}</view>
					</view>
					<view class="num font-color-red">+{{ item.number }}</view>
				</view>
				<view @click="goSignRecord()" class="Loads acea-row row-center-wrapper" v-if="signList.length > 0">
					点击加载更多
					<view class="iconfont icon-xiangyou acea-row row-center-wrapper"></view>
				</view>
			</view>
		</view>
		<view class="signTip acea-row row-center-wrapper" :class="active === true ? 'on' : ''">
			<view class="signTipLight loadingpic">
				<image :src="`${$VUE_APP_RESOURCES_URL}/images/light.png`" />
			</view>
			<view class="signTipCon">
				<view class="state">签到成功</view>
				<view class="integral">获得{{ integral }}积分</view>
				<view class="signTipBnt" @click="close">好的</view>
			</view>
		</view>
		<view class="mask" @touchmove.prevent :hidden="active === false"></view>
	</view>
</template>
<style scoped lang="less">
	.Loads .iconfont {
		font-size: 0.25*100rpx;
		margin: 0.02*100rpx 0 0 0.1*100rpx;
	}
</style>
<script>
	import {
		postSignUser,
		getSignConfig,
		postSignIntegral,
		getSignList
	} from "@/api/user";
	import {
		add
	} from "@/utils/bc";

	export default {
		name: "Sign",
		components: {},
		props: {},
		data: function() {
			return {
				userInfo: {},
				integral: 0,
				signCount: [],
				sign_index: 0,
				signSystemList: [],
				signList: [],
				page: 1,
				limit: 3,
				active: false,
				day: ""
			};
		},
		mounted: function() {
			uni.showLoading({ title: "加载中", mask: true });
			this.signUser();
			this.signConfig();
			this.getSignList();
		},
		methods: {
			goSignRecord() {
				this.$yrouter.push("/pages/user/signIn/SignRecord/index");
			},
			// js给数字补0；num：需要补0的数字，length：长度（补到多少位）；
			PrefixInteger: function(num, length) {
				return (Array(length).join("0") + num).slice(-length).split("");
			},
			//数字转中文
			Rp: function(n) {
				var cnum = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
				var s = "";
				n = "" + n; // 数字转为字符串
				for (var i = 0; i < n.length; i++) {
					s += cnum[parseInt(n.charAt(i))];
				}
				return s;
			},
			// 获取用户信息
			signUser: function() {
				let that = this;
				postSignUser({
					sign: 1
				}).then(res => {
					uni.hideLoading();
					res.data.integral = parseInt(res.data.integral);
					var sumSginDay = res.data.sumSignDay;
					that.userInfo = res.data;
					that.signCount = that.PrefixInteger(sumSginDay, 4);
					that.sign_index = parseInt(res.data.signNum);
				});
			},
			// 签到配置
			signConfig: function() {
				let that = this;
				getSignConfig().then(res => {
					that.signSystemList = res.data;
					that.day = that.Rp(that.signSystemList.length);
				});
			},
			//  用户签到
			goSign: function() {
				let that = this,
					sumSginDay = that.userInfo.sumSignDay;
				if (that.userInfo.is_day_sgin) {
					uni.showToast({
						title: "您今日已签到!",
						icon: "none",
						duration: 2000
					});
					return
				}
				postSignIntegral().then(res => {
					that.active = true;
					that.integral = res.data.integral;
					let sign_index = parseInt(that.sign_index + 1);
					that.sign_index =
						sign_index > that.signSystemList.length ? 1 : sign_index;
					that.signCount = that.PrefixInteger(sumSginDay + 1, 4);
					that.userInfo.is_day_sgin = true;
					that.userInfo.integral = add(that.userInfo.integral, res.data.integral);
					that.getSignList();
				});
			},
			//  获取签到列表;
			getSignList: function() {
				let that = this;
				getSignList(that.page, that.limit).then(res => {
					that.signList = res.data;
				});
			},
			close: function() {
				this.active = false;
			}
		}
	};
</script>