gate-mini-program/packagePage/pages/record/record.vue

<template>
	<view class="container">
		<tui-tabs :tabs="tabs" :currentTab="currentTab" itemWidth="50%" @change="changeTab"></tui-tabs>
		
		<tui-list-view>
			<block v-for="(item,index) in records" :key="item.id">
				<tui-list-cell :lineLeft="false" @tap="showDetail(index)">
					<view class="tui-item-box">
						<view class="tui-msg-box">
							<image :src="apiHost+'/miniapp/static/weijing.png'" class="tui-msg-pic" mode="widthFix"></image>
							<view class="tui-msg-item">
								<view class="tui-msg-name">胃镜清洗({{index+1}}-{{currentTab}})</view>
								<view class="tui-msg-content">清洗人员：刘正风（护士）</view>
							</view>
						</view>
						<view class="tui-msg-right">
							<uni-tag :type="tagType" :text="tagName" :style="'border:none;padding:10rpx 20rpx;color:#000;'+tagStyle"></uni-tag>
						</view>
					</view>
					<view class="tui-default textleftright">
						<text class="textleft">清洗时间：2022-07-14 15:16</text>
						<text class="textright">总计清洗：12分13秒</text>
					</view>
				</tui-list-cell>
				<view style="height:20rpx"></view>
			</block>
		</tui-list-view>
		<tui-loadmore style="position:relative;top:-20rpx" v-if="showloadmore"></tui-loadmore>
		<tui-nomore style="position:relative;top:-20rpx" v-if="shownomore"></tui-nomore>
	</view>
</template>

<script>
	import myapp from '@/common/js/myapp.js'
	export default {
		data() {
			return {
				apiHost: myapp.apiHost,
				showloadmore: false,
				shownomore: false,
				curId: 0,
				tagType: 'success',
				tagStyle: '',
				tagBgColor:{
					'jixi': 'background-color:#ADDEFF !important',
					'shouxi': 'background-color:#ADFFB5 !important',
				},
				tagName:'',
				tagText:{
					'jixi': '机洗',
					'shouxi': '手洗',
				},
				records: [],
				currentTab: 0,
				tabs: [{
					name: "今日清洗记录"
				}, {
					name: "历史清洗记录"
				}]
			}
		},
		onShow: function() {
			let user = myapp.checkLogin()
			uni.setStorageSync('lastPagePath', '/packagePage/pages/record/record')			
			
			let records = []
			for (let i = 0; i < 10; i++) {
				this.curId++
				let row = {id: this.curId}
				records = records.concat([row])
			}
			this.records = records
			
			this.tagType  = 'success'
			this.tagStyle = this.tagBgColor['shouxi']
			this.tagName = this.tagText['shouxi']
			
			//datetime string
			console.log(JSON.stringify(myapp.dateTimeStr()))
		},
		methods: {
			changeTab: function(tab) {
				this.curId = 0
				this.currentTab = tab.index
				let records = []
				for (let i = 0; i < 10; i++) {
					this.curId++
					let row = {id: this.curId}
					records = records.concat([row])
				}
				this.records = records
				
				if (tab.index == 1) {
					this.tagType  = 'primary'
					this.tagStyle = this.tagBgColor['jixi']
					this.tagName = this.tagText['jixi']
				} else {
					this.tagType  = 'success'
					this.tagStyle = this.tagBgColor['shouxi']
					this.tagName = this.tagText['shouxi']
				}
				
			},
			showDetail: function(index) {
				uni.navigateTo({
					url:'/packagePage/pages/record_detail/record_detail'
				})
			},
			onReachBottom: function() {
				if (this.curId >= 30) {
					this.shownomore = true
					return false
				}
				this.showloadmore = true
				uni.showLoading({
					title: '加载中'
				})
				setTimeout(() => {
					let records = this.records
					for (let i = 0; i < 10; i++) {
						this.curId++
						let row = {id: this.curId}
						records = records.concat([row])
					}
					this.records = records
					this.showloadmore = false
					uni.hideLoading()
				}, 1000)
			}
		}
	}
</script>

<style>
	@import '../../../static/style/thorui.css';
	
	page {
		background-color: #F5F6FA;
	}	
	
	.textleft, .textright {
		color: #949494;
		font-size: 20rpx;
		margin-bottom: 20rpx;
	}
	.textleft {
		float:left;
	}
	.textright {
		float:right;
	}
	
	.textleftright {
		border-top:3px solid #F5F6FA;
	}
	
	.tui-default {
		padding: 30rpx 10rpx 40rpx 10rpx;
	}
	
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
	}
	
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}	
	
	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		line-height: 1;
		color: #9397a4;
	}
	
	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.uni-tag--primary {
		background-color:#ADDEFF !important;
		border:none !important;
		color:#000 !important;
	}
	
	.uni-tag--success {
		background-color:#ADFFB5 !important;
		border:none !important;
		color:#000 !important;
	}
</style>