duomendian/pages/users/user_sgin_list/index.vue

<template>
	<!-- 签到 -->
	<view>
		<view class='sign-record'>
			<view class='list' v-for="(item,index) in signList" :key="index">
				<view class='item'>
					<view class='data'>{{item.month}}</view>
					<view class='listn'>
						<view class='itemn acea-row row-between-wrapper' v-for="(itemn,indexn) in item.list" :key="indexn">
							<view>
								<view class='name line1'>{{itemn.title}}</view>
								<view>{{itemn.add_time}}</view>
							</view>
							<view class='num font-color'>
								<text class="txt">+{{itemn.number || itemn.exp_num}}</text>
								<image v-if="itemn.number" src="../../../static/images/sign-icon-01.png" class="image"></image>
								<image v-else src="../../../static/images/sign-icon-02.png" class="image"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper' v-if="signList.length > 0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadtitle}}
			</view>
			<view class="mt-20" v-if="!signList.length">
				<emptyPage title="暂无签到记录~" src="/statics/images/noOrder.gif"></emptyPage>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSignMonthList
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import emptyPage from '@/components/emptyPage';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				loading: false,
				loadend: false,
				loadtitle: '加载更多',
				page: 1,
				limit: 8,
				signList: [],
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false //是否隐藏授权
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						// #ifdef H5 || APP-PLUS
						this.getSignMoneList();
						// #endif
					}
				},
				deep: true
			}
		},
		onLoad() {
			if (this.isLogin) {
				this.getSignMoneList();
			} else {
				toLogin()
			}
		},
		onShow() {
			uni.removeStorageSync('form_type_cart');
		},
		onReachBottom: function() {
			this.getSignMoneList();
		},
		methods: {
			/**
			 * 
			 * 授权回调
			 */
			onLoadFun: function() {
				this.getSignMoneList();
				this.isShowAuth = false;
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/**
			 * 获取签到记录列表
			 */
			getSignMoneList: function() {
				let that = this;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadtitle = "";
				getSignMonthList({
					page: that.page,
					limit: that.limit
				}).then(res => {
					let list = res.data;
					let loadend = list.length < that.limit;
					that.signList = that.$util.SplitArray(list, that.signList);
					that.$set(that, 'signList', that.signList);
					that.loadend = loadend;
					that.loading = false;
					that.loadtitle = loadend ? "没有更多内容啦~" : "加载更多"
				}).catch(err => {
					that.loading = false;
					that.loadtitle = '加载更多';
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sign-record {
		padding: 0 20rpx;
	}

	.sign-record .list .item .data {
		height: 90rpx;
		padding: 0;
	}

	.sign-record .list .item .listn {
		border-radius: 24rpx;
		line-height: 34rpx;
	}

	.sign-record .list .item .listn .itemn {
		height: auto;
		padding: 32rpx 24rpx;
	}

	.sign-record .list .item .listn .itemn .name {
		margin-bottom: 12rpx;
		line-height: 40rpx;
		color: #333333;
	}

	.sign-record .list .item .listn .itemn .num {
		align-self: flex-start;
		// display: flex;
		// align-items: center;
		font-family: Regular;
		font-size: 36rpx;
		height: 40rpx;
		line-height: 40rpx;

		.txt {
			vertical-align: middle;
		}

		.image {
			vertical-align: text-bottom;
			width: 36rpx;
			height: 36rpx;
			margin-left: 8rpx;
		}
	}
</style>