28--学生 填写签到码页面 foreach

在这里插入图片描述

<template>
	<div>
		<div class="top">
			<i @click="back" class="cubeic-back"></i>
			<span>{{classname}}&nbsp;{{coursename}}</span>
			<cube-button  :primary='true' :outline='true' :inline='true' @click="qiandao">签到</cube-button>
		</div>
		<div class="data">
			<div v-for="(item,index) in list" :key="item.kqid" class="item">
				<div class="left">
					<span style='margin-right:5px;'>{{item.ymd}}</span>
					<span>{{item.weekday}}</span>
					<div style="color:#999;margin-top:5px;">{{item.his}}</div>
				</div>
				<div class="right">
					<span class="state">{{item.state}}</span>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		timestampToHis1,
		timestampToWeekday1,
		timestampToYmd1
	} from '../../common.js'
	export default{
		data:function(){
			return{
				list:[],
				classname:sessionStorage.getItem('classname'),
				coursename:sessionStorage.getItem('coursename')
			}
		},
		mounted(){
		this.$request({
			url: '/student.index/jilu',
			method: 'post',
			data: {
				token: sessionStorage.getItem('token'),
				ccid: sessionStorage.getItem('ccid')
			}
		}).then(res => {
			res.forEach(row => {
				// row['updatetime']=time()
				row['ymd'] = timestampToYmd1(row['updatetime'])
				row['his'] = timestampToHis1(row['updatetime'])
				row['weekday'] = timestampToWeekday1(row['updatetime'])
			})
			this.list = res
			console.log(this.list)
		}).catch(res => {
		
		})
		},
		methods:{
			qiandao:function(){
				this.$createDialog({
					type: 'prompt',
					title: '签到',
					prompt: {
						value: '',
						placeholder: '请输入签到码'
					},
					onConfirm: (e, promptValue) => {
						let data = {
							token: sessionStorage.getItem('token'),
							yzm: promptValue,
							ccid:sessionStorage.getItem('ccid')
						}
						this.$request({
							method: 'post',
							url: '/student.qiandao/qiandao',
							data: data	
						}).then(res => {
							this.$createToast({
								type: 'correct',
								time: 2000,	
								txt: res.message,
							}).show()
								this.list.push(res)
						})
					},
				}).show()
				
			},
			back:function(){
				this.$router.back()
			},
		}
	}
</script>

<style scoped>
	.page {
		font-size: 18px;
	}
	
	.top {
		display: flex;
		justify-content: space-between;
		height: 50px;
		padding: 10px 10px;
		align-items: center;
		background-color: #fff;
	}
	.data {
		margin-top: 24px;
	}
	.state{
		    padding-right: 11px;
	}
	.item {
		height: 52px;
		display: flex;
		justify-content: space-between;
	}
	
	.left {
		padding-left: 10px;
	}
</style>

猜你喜欢

转载自blog.csdn.net/xu_ze_qin/article/details/107128370