examTeamApp/pages/PublicCards/history.vue

<template>
	<view class="common">
		<view class="tabbar">
			<scroll-view class="scroll-menu" scroll-x="true" style="white-space: nowrap;">
				<view v-for="(item,index) in labellist" :class="[active==index?'active':'']"
					@click="handleActive(item,index)">
					<text>{{item}}</text>
				</view>
			</scroll-view>
		</view>
		<view class="history">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="item.options" v-for="(item, index) in ranklist" :key="index"
					@click="swipeClick($event, index)">
					<view class='list'>
						<view class="item">
							<view class="time">
								<icon class="t-icon t-icon-shijian-mianxing-0"></icon>
								<text>{{item.record_time}}</text>
							</view>
							<view>{{item.v1}}<text>{{item.v1_name}}</text></view>
							<view>{{item.v2}}<text>{{item.v2_name}}</text></view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
			<view class="endtext" v-if="!lastPage || page >= lastPage">—— 到底了，看看别的吧 ——</view>
		</view>
		<view class="nolist" v-if="!lastPage">
			<image src="../../static/none.png"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		computed: {
			...mapState(['user', 'labelList']),
			labellist() {
				let that = this
				let list = []
				that.labelList.forEach(ite => {
					if (ite.acd_id == that.acd_id) {
						list = ite.list
						that.labelName = ite.list[0]
					}
				})
				return list
			},
			endDate() {
				return this.$tools.getDate("start")
			},
			startDate() {
				return this.$tools.GetDateStr(-90);
			},
		},
		data() {
			return {
				ranklist: [],
				page: 1,
				isDelete: false,
				lastPage: '',
				acd_id: "",
				active: 0,
				labelName: "",
			}
		},
		onLoad(options) {
			let that = this
			that.acd_id = options.acd_id
			that.$nextTick(() => {
				that.getList()
			})
		},
		onUnload() {
			console.log('关闭页面');
			let that = this
			var pages = getCurrentPages();
			var Page = pages[pages.length - 1]; //当前页
			var prevPage = pages[pages.length - 2];
			if (that.isDelete) { //确定要返回到相应页面，在触发
				prevPage.$vm.reload()
			}
		},
		onReachBottom() {
			let that = this
			console.log("onReachBottom", this.lastPage)
			if (!this.lastPage || this.page >= this.lastPage) {
				uni.showToast({
					title: '没有更多数据！',
					icon: 'none'
				})
				return
			}
			this.page++
			this.getList()
		},
		methods: {
			swipeClick(e, index) {
				let that = this
				let id = that.ranklist[index].id
				uni.showModal({
					title: '友情提示',
					content: '是否删除当前测量记录？',
					success: function(res) {
						if (res.confirm) {
							that.$model.getPublicHistoryDel({
								id: id,
							}).then((res) => {
								if (res.code != 0) {
									that.$tools.msg(res.msg)
									return
								}
								that.ranklist.splice(index, 1)
								that.$store.dispatch("getUserInfo", {
									aud_id: uni.getStorageSync('userid')
								})
								that.isDelete = true
								that.$tools.msg("删除成功")
							})
						} else if (res.cancel) {
							that.$tools.msg("您已取消操作！");
						}
					},
				})
			},
			getList() {
				let that = this
				that.$model.getPublicHistory({
					aud_id: uni.getStorageSync('userid'),
					acd_id: that.acd_id,
					page: that.page,
					name: that.labelName
				}).then((res) => {
					console.log("历史记录", res)
					if (res.code != 0) return
					let options = [{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}]
					res.data.rows.forEach(item => {
						item.options = options
					})
					this.ranklist = this.ranklist.concat(res.data.rows)
					this.lastPage = res.data.totalpage
				})
			},
			handleActive(ite, ind) {
				let that = this
				that.active = ind
				that.labelName = ite
				that.page = 1
				that.ranklist = []
				that.lastPage = ""
				that.getList()
			},
		}
	}
</script>
<style scoped="scoped" lang="scss">
	.common {
		width: 100%;
		min-height: 100.5vh; // 重点
		overflow-y: scroll;
		background-color: #f7f7f7;
	}

	.tabbar {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		justify-content: space-between;
		border-bottom: 1px solid #f7f7f7;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;
		background-color: #fff;

		.scroll-menu {
			width: 100%;
			white-space: nowrap;

			view {
				height: 55px;
				line-height: 55px;
				display: inline-block;
				min-width: 100px;
				margin: 0 10px;
				text-align: center;
			}
		}

		.active {
			color: $maincolor;
			font-weight: bold;
			border-bottom: 2px solid $maincolor;
		}
	}

	.history {
		width: calc(100% - 30px);
		height: auto;
		margin: 70px 15px 0;
		padding-bottom: 40px;

		.list {
			width: 100%;
			margin-top: 12px;
			position: relative;

			.item {
				width: calc(100% - 20px);
				height: auto;
				background: #fff;
				padding: 10px;
				display: flex;
				justify-content: space-between;
				border-radius: 10px;
				align-items: center;
				font-weight: 700;
				font-size: 30rpx !important;

				text {
					width: 100%;
					display: block;
					color: #666;
					text-align: center;
					font-weight: 500;
					font-size: 28rpx;
				}
				view {
					width: 28%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
				}
			}

			.time {
				width: 44% !important;
				font-size: 28rpx;
				color: #666;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: center;

				icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 5px;
				}

				text {
					width: 100%;
					font-size: 30rpx;
					margin-top: 3px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>