ChuangHengWx/components/CusTeamBackgroundFiles/index.vue

<template>
	<view class="background-files">
		<view class="background-files-head adfacjb">
			<view>
				<view class="background-files-title">团队背景资料</view>
				<view class="background-files-count">已上传 {{ count }} 个文档</view>
			</view>
			<view v-if="editable" class="background-files-add" @click="chooseWechatFiles">从微信会话选择</view>
		</view>

		<template v-if="editable">
			<view class="background-files-pc" @click="usePcUpload">使用电脑上传</view>

			<view v-if="files.length" class="file-list">
				<view v-for="file in files" :key="file.id" class="file-row adfacjb">
					<view class="file-main">
						<view class="file-name">{{ file.fileName || file.name || '未命名文件' }}</view>
						<view class="file-meta">{{ formatFileSize(file.fileSize || file.size) }}</view>
					</view>
					<view class="file-actions adfac">
						<view class="file-action" @click="previewFile(file)">{{ previewingId === file.id ? '打开中' : '查看' }}</view>
						<view class="file-action danger" @click="removeFile(file)">停用</view>
					</view>
				</view>
			</view>

			<view v-if="queue.length" class="queue-list">
				<view class="queue-title">本次选择</view>
				<view v-for="item in queue" :key="item.id" class="queue-row">
					<view class="queue-line adfacjb">
						<view class="queue-name">{{ item.name }}</view>
						<view class="queue-status" :class="item.status">{{ queueStatusText(item) }}</view>
					</view>
					<view v-if="item.status === 'uploading'" class="queue-progress">
						<view class="queue-progress-current" :style="{ width: item.progress + '%' }"></view>
					</view>
					<view v-if="item.error" class="queue-error">{{ item.error }}</view>
					<view v-if="item.status === 'failed' && !item.validationError" class="queue-retry" @click="retryItem(item)">重试</view>
				</view>
			</view>
		</template>

		<view v-if="pcDialogVisible" class="overlay adffcacjc">
			<view class="pc-dialog">
				<view class="dialog-title">使用电脑上传</view>
				<view class="dialog-desc" v-if="remainingSeconds > 0">在电脑打开链接或输入验证码，有效期剩余 {{ remainingText }}</view>
				<view class="dialog-expired" v-else>本次上传会话已过期，请重新生成</view>
				<view class="session-expiry">失效时间：{{ session && session.expiresAt || '-' }}</view>
				<view class="session-code">{{ session && session.code || '------' }}</view>
				<view class="session-link">{{ session && session.uploadUrl || '' }}</view>
				<view class="session-actions adfacjb">
					<view class="session-button secondary" :class="{ disabled: remainingSeconds === 0 }" @click="copyUploadUrl">复制链接</view>
					<view class="session-button secondary" @click="refreshPcSession">重新生成</view>
				</view>
				<view class="session-actions adfacjb">
					<view class="session-button primary" @click="finishDeferredPcUpload">完成并刷新</view>
					<view class="session-button secondary" @click="skipDeferredPcUpload">暂不上传</view>
				</view>
			</view>
		</view>

		<view v-if="textPreview.visible" class="overlay text-overlay adffcacjc">
			<view class="text-dialog adffc">
				<view class="dialog-title text-title">{{ textPreview.fileName }}</view>
				<view v-if="textPreview.truncated" class="truncated-tip">文件较大，仅展示前 256KB 内容</view>
				<scroll-view class="text-content" scroll-y>
					<text selectable>{{ textPreview.content }}</text>
				</scroll-view>
				<view class="text-close" @click="closeTextPreview">关闭</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	createTeamBackgroundSession,
	disableTeamBackgroundFile,
	downloadTeamBackgroundFile,
	listTeamBackgroundFiles,
	uploadTeamBackgroundFile
} from '@/http/teamBackgroundFile.js'
import teamBackgroundRules from '@/utils/teamBackgroundFile.js'

const {
	createBackgroundQueueItem,
	createEmptyTextPreviewState,
	createTextPreviewState,
	getSessionRemainingSeconds,
	getUploadableBackgroundFiles
} = teamBackgroundRules

export default {
	props: {
		teamId: { type: [String, Number], default: '' },
		initialCount: { type: Number, default: 0 },
		editable: { type: Boolean, default: true }
	},
	data() {
		return {
			boundTeamId: '',
			session: null,
			pcDialogVisible: false,
			pcUploadDeferred: false,
			deferredPcResolve: null,
			files: [],
			count: this.initialCount || 0,
			queue: [],
			remainingSeconds: 0,
			sessionTimer: null,
			sessionRequestId: 0,
			refreshRequestId: 0,
			previewRequestId: 0,
			previewingId: '',
			uploadPromise: null,
			hasLoadedFiles: false,
			componentDestroyed: false,
			textPreview: createEmptyTextPreviewState()
		}
	},
	computed: {
		remainingText() {
			const minutes = Math.floor(this.remainingSeconds / 60)
			const seconds = this.remainingSeconds % 60
			return `${minutes}分${String(seconds).padStart(2, '0')}秒`
		}
	},
	watch: {
		teamId: {
			immediate: true,
			handler(value) {
				this.boundTeamId = value || ''
				this.hasLoadedFiles = false
				this.refreshRequestId += 1
				if (value && this.editable) {
					this.refreshFiles(value).catch(error => this.showError(error, '资料列表加载失败'))
				}
			}
		},
		initialCount(value) {
			if (!this.hasLoadedFiles) this.count = Number(value) || 0
		}
	},
	beforeDestroy() {
		this.componentDestroyed = true
		this.sessionRequestId += 1
		this.refreshRequestId += 1
		this.previewRequestId += 1
		this.clearSessionTimer()
		this.closeTextPreview()
		this.resolveDeferredPcUpload()
	},
	methods: {
		activeTeamId(teamId) {
			return teamId || this.teamId || this.boundTeamId
		},
		showError(error, fallback) {
			if (this.componentDestroyed) return
			this.$showToast(error && (error.message || error.msg) || fallback)
		},
		queueStatusText(item) {
			const labels = {
				pending: '待上传',
				uploading: `${item.progress || 0}%`,
				success: '已上传',
				failed: '失败'
			}
			return labels[item.status] || ''
		},
		formatFileSize(bytes) {
			const size = Number(bytes) || 0
			if (size < 1024) return `${size} B`
			if (size < 1024 * 1024) return `${Number((size / 1024).toFixed(1))} KB`
			return `${Number((size / 1024 / 1024).toFixed(1))} MB`
		},
		chooseWechatFiles() {
			if (typeof wx === 'undefined' || typeof wx.chooseMessageFile !== 'function') {
				this.$showToast('请在微信小程序中选择文件')
				return
			}
			wx.chooseMessageFile({
				count: 10,
				type: 'file',
				success: result => {
					const selectedAt = Date.now()
					;(result.tempFiles || []).forEach((file, index) => {
						this.queue.push(createBackgroundQueueItem(file, `${selectedAt}-${index}-${file.path}`))
					})
					const teamId = this.activeTeamId()
					if (teamId) this.uploadPending(teamId).catch(error => this.showError(error, '上传失败，请重试'))
				},
				fail: error => {
					if (error && !String(error.errMsg || '').includes('cancel')) this.showError(error, '文件选择失败')
				}
			})
		},
		uploadPending(teamId) {
			return this.flushPendingFiles(teamId)
		},
		async flushPendingFiles(teamId) {
			const targetTeamId = this.activeTeamId(teamId)
			if (!targetTeamId) return { success: 0, failed: 0 }
			this.boundTeamId = targetTeamId
			if (this.uploadPromise) return this.uploadPromise
			const upload = this.performPendingUploads(targetTeamId)
			this.uploadPromise = upload
			let result
			try {
				result = await upload
			} finally {
				if (this.uploadPromise === upload) this.uploadPromise = null
			}
			if (!this.componentDestroyed && this.queue.some(item => item.status === 'pending')) {
				const laterResult = await this.flushPendingFiles(targetTeamId)
				return {
					success: result.success + laterResult.success,
					failed: result.failed + laterResult.failed
				}
			}
			return result
		},
		async performPendingUploads(teamId) {
			let success = 0
			let failed = 0
			for (const item of getUploadableBackgroundFiles(this.queue)) {
				if (this.componentDestroyed) break
				item.status = 'uploading'
				item.error = ''
				try {
					await uploadTeamBackgroundFile(teamId, item.path, progress => {
						if (!this.componentDestroyed) item.progress = progress
					})
					if (this.componentDestroyed) break
					item.status = 'success'
					item.progress = 100
					success += 1
				} catch (error) {
					if (this.componentDestroyed) break
					item.status = 'failed'
					item.error = error && (error.message || error.msg) || '上传失败，请重试'
					failed += 1
				}
			}
			if (!this.componentDestroyed) await this.refreshFiles(teamId)
			return { success, failed }
		},
		retryItem(item) {
			if (item.validationError || item.status === 'uploading') return
			item.status = 'pending'
			item.error = ''
			item.progress = 0
			const teamId = this.activeTeamId()
			if (teamId) this.uploadPending(teamId).catch(error => this.showError(error, '上传失败，请重试'))
		},
		async refreshFiles(teamId = this.activeTeamId()) {
			if (!teamId || !this.editable) return []
			const requestId = ++this.refreshRequestId
			let files
			try {
				files = await listTeamBackgroundFiles(teamId)
			} catch (error) {
				if (this.componentDestroyed || requestId !== this.refreshRequestId) return this.files
				throw error
			}
			if (this.componentDestroyed || requestId !== this.refreshRequestId
				|| String(teamId) !== String(this.activeTeamId())) return this.files
			this.files = Array.isArray(files) ? files : []
			this.count = this.files.length
			this.hasLoadedFiles = true
			this.$emit('countChange', this.count)
			return this.files
		},
		async previewFile(file) {
			const teamId = this.activeTeamId()
			if (!teamId || !file || file.id === undefined || file.id === null) return
			const requestId = ++this.previewRequestId
			this.previewingId = file.id
			try {
				const result = await downloadTeamBackgroundFile(teamId, file.id)
				if (this.componentDestroyed || requestId !== this.previewRequestId) return
				if (result && result.mode === 'text') {
					this.textPreview = createTextPreviewState(result, file.fileName || file.name)
				}
			} catch (error) {
				if (requestId === this.previewRequestId) this.showError(error, '文件打开失败')
			} finally {
				if (requestId === this.previewRequestId) this.previewingId = ''
			}
		},
		closeTextPreview() {
			this.previewRequestId += 1
			this.previewingId = ''
			this.textPreview = createEmptyTextPreviewState()
		},
		removeFile(file) {
			const teamId = this.activeTeamId()
			if (!teamId || !file || file.id === undefined || file.id === null) return
			uni.showModal({
				title: '停用资料',
				content: `确定停用“${file.fileName || file.name || '该文件'}”吗？`,
				confirmColor: '#199C9C',
				success: async result => {
					if (!result.confirm) return
					try {
						await disableTeamBackgroundFile(teamId, file.id)
						await this.refreshFiles(teamId)
						if (!this.componentDestroyed) this.$showToast('已停用')
					} catch (error) {
						this.showError(error, '停用失败，请重试')
					}
				}
			})
		},
		usePcUpload() {
			const teamId = this.activeTeamId()
			if (!teamId) {
				this.pcUploadDeferred = true
				this.$showToast('将先保存团队，再生成电脑上传方式')
				return
			}
			this.pcUploadDeferred = false
			this.openPcSession(teamId).catch(error => this.showError(error, '上传会话创建失败'))
		},
		async openPcSession(teamId) {
			const requestId = ++this.sessionRequestId
			this.clearSessionTimer()
			let session
			try {
				session = await createTeamBackgroundSession(teamId)
			} catch (error) {
				if (this.componentDestroyed || requestId !== this.sessionRequestId) return null
				throw error
			}
			if (this.componentDestroyed || requestId !== this.sessionRequestId) return null
			this.boundTeamId = teamId
			this.session = session
			this.pcDialogVisible = true
			this.startSessionTimer()
			return session
		},
		startSessionTimer() {
			this.clearSessionTimer()
			this.updateRemainingSeconds()
			if (this.remainingSeconds === 0) return
			this.sessionTimer = setInterval(() => this.updateRemainingSeconds(), 1000)
		},
		updateRemainingSeconds() {
			this.remainingSeconds = getSessionRemainingSeconds(this.session && this.session.expiresAt)
			if (this.remainingSeconds === 0) this.clearSessionTimer()
		},
		clearSessionTimer() {
			if (this.sessionTimer) clearInterval(this.sessionTimer)
			this.sessionTimer = null
		},
		copyUploadUrl() {
			if (this.remainingSeconds === 0 || !this.session || !this.session.uploadUrl) return
			uni.setClipboardData({
				data: this.session.uploadUrl,
				success: () => this.$showToast('链接已复制'),
				fail: error => this.showError(error, '复制失败')
			})
		},
		refreshPcSession() {
			const teamId = this.activeTeamId()
			if (!teamId) return
			this.openPcSession(teamId).catch(error => this.showError(error, '上传会话创建失败'))
		},
		hasDeferredPcUpload() {
			return this.pcUploadDeferred
		},
		async waitForDeferredPcUpload(teamId) {
			this.resolveDeferredPcUpload()
			const session = await this.openPcSession(teamId)
			if (!session || this.componentDestroyed) return
			this.pcUploadDeferred = true
			return new Promise(resolve => {
				this.deferredPcResolve = resolve
			})
		},
		resolveDeferredPcUpload() {
			if (this.deferredPcResolve) this.deferredPcResolve()
			this.deferredPcResolve = null
			this.pcUploadDeferred = false
		},
		closePcDialog() {
			this.sessionRequestId += 1
			this.clearSessionTimer()
			this.pcDialogVisible = false
			this.session = null
			this.remainingSeconds = 0
		},
		finishDeferredPcUpload() {
			const teamId = this.activeTeamId()
			this.closePcDialog()
			this.resolveDeferredPcUpload()
			if (teamId) this.refreshFiles(teamId).catch(error => this.showError(error, '资料列表刷新失败'))
		},
		skipDeferredPcUpload() {
			this.closePcDialog()
			this.resolveDeferredPcUpload()
		}
	}
}
</script>

<style scoped lang="scss">
.background-files {
	background: #ffffff;
	border-radius: 24rpx;
	margin-top: 20rpx;
	padding: 28rpx 24rpx;
	box-sizing: border-box;
}
.background-files-title, .queue-title, .dialog-title {
	font-size: 30rpx;
	color: #002846;
	line-height: 42rpx;
}
.background-files-count, .file-meta, .dialog-desc {
	font-size: 24rpx;
	color: #95a5b1;
	line-height: 34rpx;
	margin-top: 8rpx;
}
.background-files-add {
	padding: 18rpx 22rpx;
	border-radius: 36rpx;
	background: linear-gradient(90deg, #33a7a7 0%, #64bbbb 100%);
	font-size: 24rpx;
	color: #ffffff;
}
.background-files-pc {
	font-size: 26rpx;
	color: #199c9c;
	line-height: 38rpx;
	text-align: right;
	margin-top: 20rpx;
}
.file-list, .queue-list {
	margin-top: 24rpx;
	border-top: 1rpx solid #efefef;
}
.file-row {
	padding: 22rpx 0;
	border-bottom: 1rpx solid #efefef;
}
.file-main { width: calc(100% - 190rpx); }
.file-name, .queue-name {
	font-size: 26rpx;
	color: #667e90;
	line-height: 36rpx;
	word-break: break-all;
}
.file-action {
	font-size: 24rpx;
	color: #199c9c;
	margin-left: 20rpx;
}
.file-action.danger { color: #fd4f66; }
.queue-title { margin-top: 22rpx; }
.queue-row {
	padding: 20rpx 0;
	border-bottom: 1rpx solid #efefef;
	position: relative;
}
.queue-name { width: calc(100% - 130rpx); }
.queue-status { font-size: 24rpx; color: #95a5b1; }
.queue-status.success { color: #199c9c; }
.queue-status.failed, .queue-error { color: #fd4f66; }
.queue-progress {
	height: 8rpx;
	background: #f0f2f8;
	border-radius: 4rpx;
	margin-top: 12rpx;
	overflow: hidden;
}
.queue-progress-current { height: 100%; background: #4db2b2; }
.queue-error { font-size: 22rpx; line-height: 32rpx; margin-top: 8rpx; }
.queue-retry { font-size: 24rpx; color: #199c9c; margin-top: 10rpx; }
.overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1200;
	background: rgba(0, 0, 0, .55);
	padding: 40rpx;
	box-sizing: border-box;
}
.pc-dialog, .text-dialog {
	width: 100%;
	background: #ffffff;
	border-radius: 28rpx;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
}
.dialog-title { font-weight: bold; text-align: center; }
.dialog-desc, .dialog-expired { text-align: center; margin-top: 24rpx; }
.dialog-expired { font-size: 24rpx; color: #fd4f66; }
.session-expiry { font-size: 22rpx; color: #95a5b1; text-align: center; margin-top: 12rpx; }
.session-code {
	font-size: 56rpx;
	font-weight: bold;
	letter-spacing: 12rpx;
	color: #002846;
	text-align: center;
	margin-top: 30rpx;
}
.session-link {
	font-size: 22rpx;
	color: #667e90;
	line-height: 32rpx;
	word-break: break-all;
	background: #f7f8fa;
	padding: 20rpx;
	border-radius: 16rpx;
	margin-top: 26rpx;
}
.session-actions { margin-top: 26rpx; }
.session-button {
	width: calc(50% - 12rpx);
	height: 72rpx;
	line-height: 72rpx;
	border-radius: 36rpx;
	font-size: 26rpx;
	text-align: center;
	box-sizing: border-box;
}
.session-button.primary { color: #ffffff; background: #33a7a7; }
.session-button.secondary { color: #199c9c; border: 1rpx solid #199c9c; }
.session-button.disabled { color: #b3bfc8; border-color: #b3bfc8; }
.text-dialog { height: 80vh; }
.text-title {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.truncated-tip {
	font-size: 22rpx;
	color: #b06a00;
	line-height: 32rpx;
	text-align: center;
	margin-top: 16rpx;
}
.text-content {
	width: 100%;
	flex: 1;
	background: #f7f8fa;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 24rpx;
	margin-top: 22rpx;
	font-size: 26rpx;
	color: #334b5c;
	line-height: 40rpx;
	white-space: pre-wrap;
	word-break: break-all;
}
.text-close {
	width: 100%;
	height: 76rpx;
	line-height: 76rpx;
	border-radius: 38rpx;
	background: #33a7a7;
	color: #ffffff;
	font-size: 28rpx;
	text-align: center;
	margin-top: 24rpx;
}
</style>