antissoft / lvqianmeiye_ERP

<template>
	<view class="container">

		<!-- 会员信息卡片 -->
		<view class="member-card">
			<view class="member-info">
				<view class="member-avatar">👤</view>
				<view class="member-details">
					<view class="member-name">{{ memberName }}</view>
					<!-- <view class="member-id">用户ID: {{ userid }}</view> -->
				</view>
			</view>
		</view>

		<!-- 服务日志列表 -->
		<view class="log-card">
			<view class="log-header">
				<text class="log-title">服务记录</text>
				<view class="log-header-right">
					<text class="log-count">共 {{ totalCount || logList.length }} 条</text>
					<!-- <button @click="addServiceLog" class="btn-add-log">新增服务日志</button> -->
				</view>
			</view>

			<scroll-view scroll-y class="log-content" @scrolltolower="loadMore" :lower-threshold="100">
				<view v-for="(log, index) in logList" :key="log.id" class="log-item">
					<view class="log-header-info">
						<view class="log-time">{{ utils.formatTime(log.createTime) }}</view>
						<view class="log-header-right-info">
							<view class="log-creator">创建人: {{ log.createUserName || log.createUser || '未知' }}</view>
							<button @click.stop="editServiceLog(log)" class="btn-edit-log">编辑</button>
						</view>
					</view>
					
					<!-- 使用前图片 -->
					<view v-if="log.beforeImage && log.beforeImage.length > 0" class="log-images-section">
						<view class="images-title">使用前图片</view>
						<view class="images-grid">
							<view v-for="(image, imgIndex) in log.beforeImage" :key="imgIndex" class="image-item" @tap="previewImage(image.url)">
								<image :src="getFullImageUrl(image.url)" mode="aspectFill" class="log-image" />
							</view>
						</view>
					</view>
					
					<!-- 使用后图片 -->
					<view v-if="log.afterImage && log.afterImage.length > 0" class="log-images-section">
						<view class="images-title">使用后图片</view>
						<view class="images-grid">
							<view v-for="(image, imgIndex) in log.afterImage" :key="imgIndex" class="image-item" @tap="previewImage(image.url)">
								<image :src="getFullImageUrl(image.url)" mode="aspectFill" class="log-image" />
							</view>
						</view>
					</view>
					
					<!-- 备注 -->
					<view v-if="log.remark" class="log-remark">
						<view class="remark-label">备注:</view>
						<view class="remark-content">{{ log.remark }}</view>
					</view>
					
					<!-- 科技部备注 -->
					<view v-if="log.kjbRemark" class="log-remark">
						<view class="remark-label">科技部备注:</view>
						<view class="remark-content">{{ log.kjbRemark }}</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="!loading && logList.length === 0" class="empty-state">
					<view class="empty-icon">📝</view>
					<view class="empty-text">暂无服务日志</view>
					<view class="empty-tip">该用户还没有服务日志</view>
				</view>

				<!-- 加载状态 -->
				<view v-if="loading && logList.length === 0" class="loading-state">
					<view class="loading-text">正在加载数据...</view>
				</view>

				<!-- 加载更多 -->
				<view v-if="logList.length > 0" class="loadmore-wrapper">
					<view v-if="loadmoreStatus === 'loading'" class="loadmore-text">正在加载...</view>
					<view v-else-if="loadmoreStatus === 'nomore'" class="loadmore-text">没有更多了</view>
					<view v-else class="loadmore-text">上拉加载更多</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js'
	import lxApi from '@/apis/modules/lx.js'
	
	export default {
		data() {
			return {
				userid: '',
				memberName: '',
				logList: [],
				baseUrl:config.getImgBaseUrl(),
				// 分页相关
				currentPage: 1,
				pageSize: 10,
				totalCount: 0,
				hasMore: true,
				loading: false,
				loadmoreStatus: 'loadmore' // loadmore: 可以加载, loading: 加载中, nomore: 没有更多
			}
		},
		onLoad(options) {
			// 获取传递的参数
			this.userid = options.userid || ''
			this.memberName = decodeURIComponent(options.memberName || '未知会员')
		
			// 加载服务日志数据
			// this.loadServiceLogs()
		},

		onShow() {
			// 页面显示时重新加载数据，以便显示新增的服务日志
			this.refreshData()
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 新增服务日志
			addServiceLog() {
				uni.navigateTo({
					url: `/pages/addServiceLog/addServiceLog?userid=${this.userid}&memberName=${encodeURIComponent(this.memberName)}`
				})
			},

			// 编辑服务日志
			editServiceLog(log) {
				console.log('编辑服务日志:', log)
				uni.navigateTo({
					url: `/pages/addServiceLog/addServiceLog?consumeId=${log.consumeId}&memberName=${encodeURIComponent(this.memberName)}&logId=${log.id}&mode=edit`
				})
			},

			// 刷新数据（重置到第一页）
			refreshData() {
				this.currentPage = 1
				this.hasMore = true
				this.loadmoreStatus = 'loadmore'
				this.loadServiceLogs()
			},

			// 加载更多
			loadMore() {
				if (this.loading || !this.hasMore || this.loadmoreStatus === 'loading') {
					return
				}
				this.currentPage++
				this.loadServiceLogs(true)
			},

			// 加载服务日志
			async loadServiceLogs(isLoadMore = false) {
				try {
					if (!this.userid) {
						console.warn('用户ID为空，无法加载服务日志')
						return
					}

					// 防止重复加载
					if (this.loading) {
						return
					}

					this.loading = true
					if (isLoadMore) {
						this.loadmoreStatus = 'loading'
					}

					const params = {
						currentPage: this.currentPage,
						pageSize: this.pageSize,
						memberId: this.userid
					}

					const res = await lxApi.lqxhfeedbackGetList(params)

					if (res.code === 200) {
						// 处理分页数据
						let list = []
						if (res.data) {
							// 如果返回的是分页对象
							if (res.data.list && Array.isArray(res.data.list)) {
								list = res.data.list
								this.totalCount = res.data.pagination?.total || res.data.total || 0
							} 
							// 如果返回的是数组
							else if (Array.isArray(res.data)) {
								list = res.data
								this.totalCount = list.length
							}
							// 如果返回的是对象，尝试获取列表
							else if (res.data.data && Array.isArray(res.data.data)) {
								list = res.data.data
								this.totalCount = res.data.total || res.data.pagination?.total || 0
							}
						}

						const mappedList = list.map(log => ({
							id: log.id,
							userid: log.userid || log.memberId,
							beforeImage: this.parseImageJson(log.beforeImage),
							afterImage: this.parseImageJson(log.afterImage),
							remark: log.remark,
							kjbRemark: log.kjbRemark,
							createUser: log.createUser,
							createUserName: log.createUserName,
							createTime: log.createTime,
							updateTime: log.updateTime,
							consumeId: log.consumeId
						}))

						if (isLoadMore) {
							// 加载更多，追加数据
							this.logList = [...this.logList, ...mappedList]
						} else {
							// 首次加载或刷新，替换数据
							this.logList = mappedList
						}

						// 判断是否还有更多数据
						this.hasMore = mappedList.length === this.pageSize
						this.loadmoreStatus = this.hasMore ? 'loadmore' : 'nomore'
					} else {
						if (!isLoadMore) {
							this.logList = []
						}
						this.hasMore = false
						this.loadmoreStatus = 'nomore'
						uni.showToast({
							title: res.msg || '加载失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载服务日志失败:', error)
					if (!isLoadMore) {
						this.logList = []
					}
					this.hasMore = false
					this.loadmoreStatus = 'nomore'
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					if (isLoadMore) {
						this.loadmoreStatus = this.hasMore ? 'loadmore' : 'nomore'
					}
				}
			},

			// 解析图片JSON字符串
			parseImageJson(imageJson) {
				try {
					if (!imageJson) return []
					return JSON.parse(imageJson)
				} catch (error) {
					console.error('解析图片JSON失败:', error)
					return []
				}
			},

			// 获取完整图片URL
			getFullImageUrl(url) {
				if (!url) return ''
				// 如果URL已经是完整路径，直接返回
				if (url.startsWith('http')) {
					return url
				}
				// 如果是相对路径，拼接基础URL
				return this.baseUrl + url
			},

			// 预览图片
			previewImage(url) {
				if (!url) return
				const fullUrl = this.getFullImageUrl(url)
				uni.previewImage({
					urls: [fullUrl],
					current: fullUrl
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 40rpx;
		box-sizing: border-box;
	}

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

	.back-btn {
		display: flex;
		align-items: center;
		background: #fff;
		border: none;
		border-radius: 24rpx;
		padding: 16rpx 24rpx;
		color: #388e3c;
		font-size: 28rpx;
		box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.15);
		transition: all 0.2s ease;
	}

	.back-btn:active {
		transform: scale(0.95);
	}

	.back-icon {
		font-size: 32rpx;
		margin-right: 8rpx;
	}

	.back-text {
		font-size: 28rpx;
	}

	.header-title {
		text-align: center;
		color: #388e3c;
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 4rpx;
		flex: 1;
	}

	.header-placeholder {
		width: 120rpx;
	}

	.member-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.member-info {
		display: flex;
		align-items: center;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		margin-right: 24rpx;
	}

	.member-details {
		flex: 1;
	}

	.member-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2e7d32;
		margin-bottom: 8rpx;
	}

	.member-id {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.log-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		overflow: hidden;
		flex: 1;
	}

	.log-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 40rpx;
		color: #fff;
		font-weight: 600;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.log-header-right {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.log-title {
		font-size: 32rpx;
	}

	.log-count {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.log-content {
		max-height: calc(100vh - 400rpx);
		overflow-y: auto;
	}

	.log-item {
		padding: 32rpx 40rpx;
		border-bottom: 2rpx solid #f0f0f0;
		position: relative;
	}

	.log-item:last-child {
		border-bottom: none;
	}

	.log-time {
		font-size: 24rpx;
		color: #6a9c6a;
		margin-bottom: 12rpx;
	}

	.log-content-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		margin-bottom: 12rpx;
	}

	.log-staff {
		font-size: 24rpx;
		color: #2e7d32;
		font-weight: 500;
	}

	.empty-state {
		text-align: center;
		padding: 120rpx 40rpx;
		color: #6a9c6a;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 32rpx;
		margin-bottom: 16rpx;
	}

	.empty-tip {
		font-size: 28rpx;
		opacity: 0.7;
	}

	.loading-state {
		text-align: center;
		padding: 120rpx 40rpx;
		color: #6a9c6a;
	}

	.loading-text {
		font-size: 28rpx;
	}

	.loadmore-wrapper {
		padding: 40rpx;
		text-align: center;
	}

	.loadmore-text {
		font-size: 24rpx;
		color: #6a9c6a;
		opacity: 0.7;
	}

	.btn-add-log {
		background: rgba(255, 255, 255, 0.2);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 20rpx;
		padding: 12rpx 24rpx;
		color: #fff;
		font-size: 24rpx;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	.btn-add-log:active {
		background: rgba(255, 255, 255, 0.3);
		transform: scale(0.95);
	}

	/* 服务日志项目样式 */
	.log-header-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		padding-bottom: 12rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.log-header-right-info {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.log-creator {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.btn-edit-log {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		border: none;
		border-radius: 12rpx;
		padding: 8rpx 20rpx;
		color: #fff;
		font-size: 22rpx;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	.btn-edit-log:active {
		transform: scale(0.95);
		opacity: 0.8;
	}

	.log-images-section {
		margin-bottom: 24rpx;
	}

	.images-title {
		font-size: 26rpx;
		color: #2e7d32;
		font-weight: 600;
		margin-bottom: 12rpx;
	}

	.images-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.image-item {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		overflow: hidden;
		// border: 2rpx solid #e0e0e0;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.image-item:active {
		transform: scale(0.95);
		border-color: #4caf50;
	}

	.log-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.log-remark {
		background: #f9fff9;
		border: 2rpx solid #c8e6c9;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-top: 16rpx;
	}

	.remark-label {
		font-size: 26rpx;
		color: #2e7d32;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.remark-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}
</style>