vist_go_uniApp/pages/tabbar/visitor.vue

<template>
	<view class="container">
		<template v-if="!isLogin">
			<!-- 未登录状态 -->
			<view class="no-login">
				<image src="/static/images/no-login.png" mode="aspectFit" class="no-login-image"></image>
				<text class="no-login-text">登录后查看更多内容</text>
				<button class="login-btn" @click="goToLogin">去登录</button>
			</view>
		</template>
		<template v-else>
			<!-- Visit list -->
			<scroll-view scroll-y class="visit-list" @scrolltolower="onReachBottom">
				<template v-if="visitList.length > 0">
					<view class="visit-item" v-for="(item, index) in visitList" :key="index" @click="goToDetail(item)">
						<view class="visit-date">
							<text class="date-num">{{item.date}}</text>
							<text class="date-month">{{item.year}}</text>
						</view>
						<view class="visit-content">
							<view class="visit-header">
								<view class="visitor-info">
									<text class="visitor-label">对接人 </text>
									<text class="visitor-name">{{item.employeeName}}</text>
								</view>
								<text class="visit-status" :class="getStatusClass(item.status)">{{item.status}}</text>
							</view>
							<view class="visit-desc">{{item.visitReason}}</view>
							<view class="visit-time">
								<u-icon name="clock" size="12" color="#999"></u-icon>
								<text>{{item.time}}</text>
							</view>
						</view>
					</view>
					<!-- Loading more -->
					<u-loadmore :status="loadMoreStatus" />
				</template>
				<template v-else>
					<!-- 暂无数据 -->
					<view class="flex-items-plus">
						<image src="../../static/images/empty.png" class="empty "></image>
					</view>
					<view class="font28 font-gray flex-items-plus">
						数据为空
					</view>
					<no-data text="暂无访问记录" mode="list"></no-data>
				</template>
			</scroll-view>
		</template>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				visitList: [],
				loadMoreStatus: 'loadmore', // loadmore, loading, nomore
				params: {
					current: 1,
					size: 10,
				},
				hasMore: true
			};
		},
		computed: {
			...mapGetters(['isLogin'])
		},
		onLoad() {
			this.getList();
		},
		onShow() {

		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh();
		},
		methods: {
			// Refresh list
			refresh() {
				this.visitList = []
				this.params.current = 1
				this.hasMore = true
				this.loadMoreStatus = 'loadmore'
				this.getList()
			},

			// Handle reaching bottom of scroll
			onReachBottom() {
				if (!this.hasMore || this.loadMoreStatus === 'loading') return

				this.params.current++
				this.getList(true)
			},

			// Get status class for styling
			getStatusClass(status) {
				const statusMap = {
					'待访问': 'status-pending-visit',
					'待审核': 'status-pending-review',
					'已拒绝': 'status-rejected'
				}
				return statusMap[status] || 'status-default'
			},

			// Get visit list with mock data
			getList(loadMore = false) {
				if (!loadMore) {
					uni.showLoading({
						title: '加载中...'
					});
				}

				this.loadMoreStatus = 'loading'

				// 模拟接口延迟
				setTimeout(() => {
					// 模拟数据
					const mockData = Array(10).fill(0).map((_, index) => {
						const currentIndex = (this.params.current - 1) * 10 + index;
						const date = new Date();
						date.setDate(date.getDate() - currentIndex); // 每条数据日期递减

						const statusList = ['待访问', '待审核', '已拒绝'];
						const contactPersons = ['范海洋', '张河嘉', '李明', '王芳'];
						const descList = [
							'我是访问事由我是访问事由我是访问事由...',
							'需要进行业务对接商谈...',
							'产品展示与技术交流...',
							'项目合作洽谈...'
						];

						return {
							id: currentIndex,
							contactPerson: contactPersons[Math.floor(Math.random() * contactPersons
								.length)],
							createTime: date,
							status: statusList[Math.floor(Math.random() * statusList.length)],
							visitReason: descList[Math.floor(Math.random() * descList.length)]
						};
					});

					const list = mockData.map(item => ({
						...item,
						date: this.$u.timeFormat(item.createTime, 'DD'),
						year: this.$u.timeFormat(item.createTime, 'YYYY/MM'),
						time: this.$u.timeFormat(item.createTime, 'hh:mm')
					}));

					if (loadMore) {
						this.visitList = [...this.visitList, ...list];
					} else {
						this.visitList = list;
					}

					// 模拟总共有5页数据
					this.hasMore = this.params.current < 5;
					this.loadMoreStatus = this.hasMore ? 'loadmore' : 'nomore';

					if (!loadMore) {
						uni.hideLoading();
					}
				}, 500); // 增加500ms延迟模拟网络请求
			},

			// 跳转到详情页面
			goToDetail(item) {
				uni.navigateTo({
					url: `/pagesA/task/detail?id=${item.id}&status=${item.status}`
				});
			},

			// 跳转到登录页面
			goToLogin() {
				uni.navigateTo({
					url: '/pagesA/public/login'
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;

		.no-login {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 30vh;

			.no-login-image {
				width: 240rpx;
				height: 240rpx;
				margin-bottom: 40rpx;
			}

			.no-login-text {
				font-size: 32rpx;
				color: #999;
				margin-bottom: 60rpx;
			}

			.login-btn {
				width: 320rpx;
				height: 88rpx;
				background: #FF6B00;
				border-radius: 44rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.visit-list {
		height: 100vh;
	}

	.visit-item {
		background-color: #fff;
		margin: 16rpx 20rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: flex-start;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.visit-date {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 24rpx;
		min-width: 80rpx;

		.date-num {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			line-height: 1;
		}

		.date-month {
			font-size: 24rpx;
			color: #999;
			margin-top: 4rpx;
		}
	}

	.visit-content {
		flex: 1;

		.visit-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12rpx;

			.visitor-info {
				display: flex;
				align-items: center;

				.visitor-label {
					margin-right: 10rpx;
					font-size: 32rpx;
					color: #333;
					font-weight: normal;
				}

				.visitor-name {
					font-size: 36rpx;
					color: #333;
					font-weight: bold;
				}
			}

			.visit-status {
				font-size: 28rpx;
				padding: 4rpx 12rpx;
				border-radius: 12rpx;

				&.status-pending-visit {
					color: #4CAF50;
					background-color: rgba(76, 175, 80, 0.1);
				}

				&.status-pending-review {
					color: #2196F3;
					background-color: rgba(33, 150, 243, 0.1);
				}

				&.status-rejected {
					color: #F44336;
					background-color: rgba(244, 67, 54, 0.1);
				}
			}
		}

		.visit-desc {
			color: #666;
			font-size: 28rpx;
			line-height: 1.4;
			margin-bottom: 12rpx;
		}

		.visit-time {
			display: flex;
			align-items: center;
			gap: 8rpx;

			text {
				color: #999;
				font-size: 24rpx;
			}
		}
	}
</style>