memory/pages/index/index.vue

<template>
	<view class="history-container">
		<template>
			<view class="item-list">
				<view class="item" v-for="(item,index) in items" :key="index">
					<view class="time">{{formatTime(item.expectedFinishDate)}}</view>
					<div class="item-cont" @click="linkTo(item)">
						<view class="center">
							<view class="sportType">
								<text>{{item.taskTitle}}</text>
							</view>
						</view>		
					</div>
				</view>
			</view>
			<template>
				<view class="pagination-box" v-if="total>0">
					<uni-pagination @change="changePageNumber"
					:pageSize="limit" :current="page"
					:total="total"></uni-pagination>				
				</view>
				<template v-else>
					<view class="isEmpty" >
						<p class="word">没有数据 ^_^ </p>
					</view>
				</template>
			</template>
		</template>
		<div class="create_bt">
			<image class="create_bt_image" src="/static/index/add.png" @click="create" mode="widthFix"></image>			
		</div>		
	</view>
</template>

<script>
	import config from "@/config/index.js"
	const baseUrl = process.env.NODE_ENV === 'development' ? config.base.dev : config.base.pro;
	import {getMemorylistByPage,getDataById} from '@/api/user.js'
	import {parseTime} from '@/libs/index.js'
	export default {
		data() {
			return {
				time:new Date(),
				note:"",
				page:1,
				limit:15,
				total:0,
				items:[],
				sportVedioPath:"",
				isLogin:true
			}
		},
		onShow() {
			this.getData()
			this.init()
		},
		methods: {		
			getData(){
				let page=this.page;
				let limit=this.limit;
				let accountId=uni.getStorageSync('accountId')
				let nowTime=parseTime(new Date(),"{y}-{m}-{d}")+' 00:00:00'
				getMemorylistByPage({
					accountId,
					nowTime,
					page, limit
				}).then((res)=>{
					this.items=res.data.list
					this.total=res.data.totalCount;
				})
			},
			init(){
				this.items=[]
				this.total=0
				this.limit=15
				this.page=1
			},
			onClick(item){
				let gradeId=item.gradeId
				let sportVedioPath=item.sportVedioPath;
				this.sportVedioPath=sportVedioPath
			}
			,formatTime(date) {
			  if (!date) return null
			  if(typeof(date)==="string"){date = new Date(date)}
			  var y = date.getFullYear()
			  var M = date.getMonth() + 1
			  var d = date.getDate()
			  var H = date.getHours()
			  var m = date.getMinutes()
			  var s = date.getSeconds()
			  M = M > 9 ? M : '0' + M; d = d > 9 ? d : '0' + d; H = H > 9 ? H : '0' + H
			  m = m > 9 ? m : '0' + m; s = s > 9 ? s : '0' + s
			  return `${y}-${M}-${d} ${H}:${m}:${s}`
			},
			formatImage(path){
				if(!path) return
				let fileName=path.substring(0,path.lastIndexOf('.'))
				return `${fileName}.jpg`;
			},			
			changePageNumber({type,current}){
				this.page=current
				this.getData()
			},
			linkTo(item){
				uni.setStorageSync('index-detail-info',item)
				uni.navigateTo({
					url:'/pages/index/detail/detail'
				})
			},
			create(){
				uni.navigateTo({
					url:'/pages/index/form/form'
				})				
			},
			isEmpty(val){
				if(val!=="undefined"&&val!==undefined&&val!==""&&val!==null){
					return false
				}
				return true
			}			
		}
	}
</script>

<style lang="scss" scoped>
.history-container{
	background:#E4F0FB;
}
.pagination-box{
	margin: 40rpx 0;
	background-color: #fff;
}
.isEmpty{
	width: 100%;
	height: 100vh;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzkgODYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjM4Ljg1JSIgeTE9IjAlIiB4Mj0iNjEuMTUlIiB5Mj0iMTAwJSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZDRkNGRCIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiNFRUVGRjMiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMCUiIHkxPSI5LjUlIiB5Mj0iOTAuNSUiPjxzdG9wIHN0b3AtY29sb3I9IiNGQ0ZDRkQiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRTlFQkVGIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGlkPSJjIiBkPSJNMCAwaDE3djM2SDB6Ii8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTM5LjUgODZDNjEuMzE1IDg2IDc5IDgzLjkxIDc5IDgxLjMzM1M1Ny4zMTUgNzggMzUuNSA3OCAwIDc4Ljc1NiAwIDgxLjMzM0MwIDgzLjkxMSAxNy42ODUgODYgMzkuNSA4NnoiIGZpbGw9IiNGN0Y4RkMiLz48cGF0aCBmaWxsPSIjRTVFN0U5IiBkPSJNMTMgNDVoNDBMNDIgNThIMnpNNjUuNTUxIDI5Ljk4bC0xNi4zMTMtNy42MDctMi44NDEtNS43MzggMTYuMzEzIDcuNjA3eiIvPjxwYXRoIGZpbGw9IiNFREVFRjIiIGQ9Ik02NS41NTEgMjkuOThsLTM0LjQ0LTE2LjA1OS0xNS4yMTQgMzIuNjI3IDM0LjQ0IDE2LjA2eiIvPjxwYXRoIGZpbGw9InVybCgjYSkiIHRyYW5zZm9ybT0icm90YXRlKDI1IDI3LjQ0NiAtNDMuNDE2KSIgZD0iTTM4IDdoMTd2MzZIMzh6Ii8+PHBhdGggZmlsbD0iI0Y4RjlGQiIgZD0iTTE1LjcwNSA2LjczN2wxNS40MDcgNy4xODQgMTUuNjQ2LS40MjctMTUuNDA3LTcuMTg1eiIvPjxwYXRoIGZpbGw9InVybCgjYikiIGQ9Ik0xMyA0NWg0MHYzNkgxM3oiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MyA0NSkiPjxtYXNrIGlkPSJkIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNjIi8+PC9tYXNrPjx1c2UgZmlsbD0iI0UwRTNFOSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTcgMCkiIHhsaW5rOmhyZWY9IiNjIi8+PHBhdGggZmlsbD0iI0Q1RDdERSIgbWFzaz0idXJsKCNkKSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjQgMCkiIGQ9Ik03IDBoMTdsLTQgMTgtMjAtMnoiLz48L2c+PHBhdGggZmlsbD0iI0Y4RjlGQiIgZD0iTTcwIDQ1SDUzbDkgMTNoMTd6Ii8+PC9nPjwvc3ZnPg==);
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	background-color: #fff;
	/* #ifndef MP-WEIXIN */
		height: calc( 100vh - 100px);	
	/* #endif */
	.word{
		width: 100%;
		text-align: center;
		position: absolute;
		top: 80vh;
		left: 0;
		color: #999;
		font-size: 28rpx;
		letter-spacing: 2rpx;
	}
}
.item-list{
	.item{
		&{
			padding: 0 20rpx;
		}
		.time{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 28rpx;
			color: #666666;		
			padding: 24rpx 0;
		}
		.item-cont{
			&{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 16rpx;
				background-color: #fff;
				border-radius: 20rpx;
			}
			.logo{
				width: 80rpx;
				height: 80rpx;
				border-radius: 8px;
				display: flex;
				justify-content:center;
				align-items: center;
				background-color: #e2e2e2;
				img{
					display: block;
					width: 80rpx;
					height: 80rpx;
					border-radius: 8px;
				}
			}	
			.center{
				color: #999;
				font-size: 12px;
				flex: 1;
				padding-left: 20rpx;
				.sportType{
					&{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 1;	
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #333333;	
					}
					.camera-box{
						padding-left: 26rpx;
						.camera{
							display: block;
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
			.rt{
				font-size: 32rpx;
				display: flex;
				justify-content:space-between;
				align-items: center;
				.name{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #F97743;	
					line-height: 1;
				}
				.score{
					font-weight: 900;
					padding-right: 10rpx;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF4600;
					line-height: 1;
				}
			}			
		}
	}
}
.create_bt,.create_bt_image{
	display: block;
	width: 100rpx;
	position: fixed;
	right: 10rpx;
	top: 55vh;
	opacity: 0.9;
}
</style>