wiki_enterprise_js/pages/my-code/my-code.vue

<template>
	<view>
		<!-- 添加 -->
		<button v-if="tableList && tableList.length === 0" class="shadow round bg-cyan add-btn iconfont icon-plus" hover-class="cc-active" @tap="openPage('/pages/apply-code/apply-code')"></button>
		<button v-if="tableList && tableList.length > 0" class="shadow round bg-cyan add-btn iconfont icon-plus" hover-class="cc-active" @tap="openPage('/pages/punch-the-clock/punch-the-clock')"></button>
		<view v-if="tableList && tableList.length > 0" class="cu-timeline" :key="index" v-for="(item, index) in tableList">
			<view class="cu-time">{{ +item.time | formatDate }}</view>
			<view class="cu-item text-blue cuIcon-locationfill">
				<view class="content shadow-blur bg-blue light">{{ item.district }}，{{ item.address }}</view>
			</view>
			<view class="cu-item text-green cuIcon-wefill">
				<view class="content shadow-blur light" :class="item.healthLevel === 0 ? 'bg-green' : item.healthLevel === 1 ? 'bg-yellow' : 'bg-red'">
					<view class="margin-bottom flex">
						体温：{{ item.animalHeat }}℃，
						<text v-for="state in status" :key="state.id">
							<text v-if="state.id === item.healthTypeId">状态：{{ state.name }}</text>
						</text>
					</view>
					<view>
						<text class="radius bg-red margin-tb margin-right padding-xs" v-show="item.touchHubei === 1">武汉接触史</text>
						<text class="radius bg-red margin-tb margin-right padding-xs" v-show="item.touchSick === 1">患者接触史</text>
					</view>
					<view class="margin-tb-sm">
						<text class="radius bg-red margin-tb margin-right padding-xs" v-show="item.touchOverseas === 1">境外人员接触史</text>
						<text class="radius bg-green margin-tb margin-right padding-xs" v-if="item.schoolLocation === 1">在校</text>
						<text class="radius bg-green margin-tb margin-right padding-xs" v-else>不在校</text>
					</view>
					<view class="margin-top">紧急联系人:{{ item.emergencyName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.emergencyPhone }}</view>
					<view class="margin-top" v-show="item.remark || item.filePath.length > 0">
						备注:{{ item.remark }}
						<view class="padding-top">
							<image @tap="viewImage(item.filePath, i)" :key="i" v-for="(file, i) in item.filePath" :src="file" style="width: 69px;height: 75px;"
							 class="margin-lr-xs"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="tableList && tableList.length === 0" class="padding-lg">您还没有申请健康码，请点击右下角加号申请健康码。</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from 'common/script/filters';
	import {
		showToast
	} from 'common/script/util';
	import {
		HEALTH_SIGN_HISTORY
	} from 'api/api';
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				tableList: []
			};
		},

		computed: mapState('user', ['token', 'userInfo', 'status']),

		// 时间戳转化日期
		filters: {
			formatDate(time) {
				var data = new Date(time);
				return formatDate(data, 'MM-dd');
			}
		},

		onLoad() {
			const startTime = +this.$moment()
				.startOf('year')
				.format('x');
			const endTime = +this.$moment()
				.endOf('day')
				.format('x');
			const params = {
				param: {
					startTime,
					endTime,
					token: this.token
				}
			};
			this.getHealthSignHistory(params);
		},

		methods: {
			...mapMutations('user', ['setStatus', 'setUserInfo']),

			// 获取健康打卡记录
			async getHealthSignHistory(params) {
				try {
					const res = await this.$http.post(HEALTH_SIGN_HISTORY, params);
					const {
						success,
						code,
						msg,
						data
					} = res.data;
					if (success && code === 200) {
						this.success = true;
						this.tableList = data;
					} else {
						uni.showToast({
							title: msg || '获取健康打卡记录失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.log('error: ', error);
					if (error.msg) {
						uni.showToast({
							title: error.msg || '获取健康打卡记录失败',
							icon: 'none'
						});
					}
				}
			},

			// 预览图片
			viewImage(filePath, index) {
				if (filePath && filePath.length > 0) {
					uni.previewImage({
						urls: filePath,
						current: filePath[index],
						indicator: 'number',
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.data-wrap {
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: flex-start;
		padding: 40rpx 0;

		.data-item {
			display: flex;
			flex-wrap: wrap;
			align-items: left;
			font-size: 36rpx;
			margin-bottom: 20rpx;

			.data-title {
				line-height: 60rpx;
				color: $black;
			}
		}
	}

	.add-btn {
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 96rpx;
		height: 96rpx;
		line-height: 96rpx;
		padding: 0;
		z-index: 1;
	}

	.add-btn::after {
		border: none;
	}
</style>