![]()
![]()
@@ -57,7 +57,12 @@ module.exports = {
},
data() {
return {
- fileList: []
+ fileList: [],
+ imagePreviewInstance: null,
+ imagePreviewContainer: null,
+ imagePreviewHistoryUnsubscribe: null,
+ closingImagePreviewFromHistory: false,
+ imagePreviewLayerName: "h5-file-image-preview"
}
},
methods: {
@@ -103,9 +108,94 @@ module.exports = {
requestFullFile(ids) {
this.$axios.post("/platform/sys/file/previewFileData", {ids: JSON.stringify(ids)}).then((res) => {
if (res.code === 0) {
- this.fileList = res.data
+ this.$set(this, "fileList", res.data || [])
}
})
+ },
+
+ // 判断附件是否为图片；item 传完整文件对象，返回 boolean 类型。
+ isImageFile(item) {
+ const suffix = item && item.suffix ? String(item.suffix).toLowerCase() : ""
+ return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(suffix)
+ },
+
+ /**
+ * 预览附件。
+ * item 传 previewFileData 返回的文件对象，需包含 id、suffix、downloadPath；方法无返回值。
+ * 图片会与当前附件列表中的其他图片组成轮播，非图片继续使用公共文件预览逻辑。
+ */
+ onPreviewFile(item) {
+ if (!this.isImageFile(item)) {
+ this.$commonUtil.previewFile(item)
+ return
+ }
+ if (this.imagePreviewInstance) return
+ const imageFiles = this.fileList.filter((file) => this.isImageFile(file) && file.downloadPath)
+ const startPosition = imageFiles.findIndex((file) => file.id === item.id)
+ if (startPosition < 0) return
+ const previewContainer = document.createElement("div")
+ previewContainer.style.display = "none"
+ imageFiles.forEach((file) => {
+ const image = document.createElement("img")
+ image.src = file.downloadPath
+ image.alt = file.name || ""
+ previewContainer.appendChild(image)
+ })
+ document.body.appendChild(previewContainer)
+ this.$set(this, "closingImagePreviewFromHistory", false)
+ this.$set(this, "imagePreviewContainer", previewContainer)
+ this.$set(this, "imagePreviewInstance", new Viewer(previewContainer, {
+ zIndex: 99999,
+ title: false,
+ initialViewIndex: startPosition,
+ hidden: () => { this.handleImagePreviewHidden() }
+ }))
+ this.imagePreviewInstance.show()
+ window.h5HistoryLayerManager.open(this.imagePreviewLayerName)
+ },
+
+ // Viewer 完全关闭后销毁实例和临时图片容器，并按关闭来源同步浏览器历史。
+ handleImagePreviewHidden() {
+ const closedFromHistory = this.closingImagePreviewFromHistory
+ this.cleanupImagePreview()
+ if (closedFromHistory) {
+ this.$set(this, "closingImagePreviewFromHistory", false)
+ return
+ }
+ if (window.h5HistoryLayerManager.stack.includes(this.imagePreviewLayerName)) {
+ window.h5HistoryLayerManager.close(this.imagePreviewLayerName)
+ }
+ },
+
+ // 清理 Viewer 实例及其临时 DOM；方法无参数、无返回值。
+ cleanupImagePreview() {
+ const previewInstance = this.imagePreviewInstance
+ const previewContainer = this.imagePreviewContainer
+ this.$set(this, "imagePreviewInstance", null)
+ this.$set(this, "imagePreviewContainer", null)
+ if (previewInstance) previewInstance.destroy()
+ if (previewContainer && previewContainer.parentNode) {
+ previewContainer.parentNode.removeChild(previewContainer)
+ }
+ },
+
+ // 浏览器返回导致图片预览层出栈时，仅关闭预览实例，不再重复回退历史记录。
+ syncImagePreviewHistory(stack) {
+ if (!this.imagePreviewInstance || stack.includes(this.imagePreviewLayerName)) return
+ this.$set(this, "closingImagePreviewFromHistory", true)
+ this.imagePreviewInstance.hide()
+ }
+ },
+ created() {
+ this.$set(this, "imagePreviewHistoryUnsubscribe", window.h5HistoryLayerManager.subscribe((stack) => {
+ this.syncImagePreviewHistory(stack)
+ }))
+ },
+ beforeDestroy() {
+ if (this.imagePreviewHistoryUnsubscribe) this.imagePreviewHistoryUnsubscribe()
+ if (this.imagePreviewInstance || this.imagePreviewContainer) {
+ this.$set(this, "closingImagePreviewFromHistory", true)
+ this.cleanupImagePreview()
}
}
}
diff --git a/src/main/resources/views/platform/zhgh/activity/workscollection/manage/index.html b/src/main/resources/views/platform/zhgh/activity/workscollection/manage/index.html
index d059200b..a4174eae 100644
--- a/src/main/resources/views/platform/zhgh/activity/workscollection/manage/index.html
+++ b/src/main/resources/views/platform/zhgh/activity/workscollection/manage/index.html
@@ -118,283 +118,7 @@ layout("/layouts/platform.html"){
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 作品类型
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 开启
- 关闭
-
-
-
-
- 取消
- {{ copyTemplateMode ? "另存为" : "保存" }}
- {{ copyTemplateMode ? "新活动提交" : "确定" }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- jpg
- jpeg
- png
- mp3
- mp4
- docx
- xlsx
- pdf
- zip
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 取消
- 确定
-
-
+
+
diff --git a/src/main/resources/views/platform/zhghh5/activity/workscollection/mine/index.html b/src/main/resources/views/platform/zhghh5/activity/workscollection/mine/index.html
index e79c0385..0933ab31 100644
--- a/src/main/resources/views/platform/zhghh5/activity/workscollection/mine/index.html
+++ b/src/main/resources/views/platform/zhghh5/activity/workscollection/mine/index.html
@@ -1,47 +1,474 @@
-
-
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- 编辑
-
-
-
- 删除
-
-
-
+
+
+
+
+ ![]()
+
+
+ {{hasCover(row) ? '图片加载失败' : '暂无图片'}}
+
+
+
{{row.name}}
+
所属活动：{{row.activityName || '暂无活动信息'}}
+
+ 提交时间：{{$moment(row.createdAt).format('YYYY-MM-DD HH:mm')}}
+
+
+
+ 主题{{row.subjectName}}
+
+
+ 类型{{row.worksName}}
+
+
+
+
+
+
+
+
+
+
+
暂无作品记录
+
当前筛选条件下暂时没有已提交作品
+
+
+
+
+
-
@@ -51,22 +478,59 @@ layout("/layouts/platform_h5.html"){
new Vue({
el: "#app",
store,
+ components: {
+ 'apply-form': applyForm,
+ 'info': INFO,
+ },
data() {
return {
+ tableData: [],
+ loading: false,
+ skeletonLoading: true,
+ finished: false,
+ refreshing: false,
+ imageLoadErrors: {},
+ filterOpened: false,
+ deleteConfirmVisible: false,
+ deleteLoading: false,
+ pendingDeleteRow: {},
pageForm: {
pageNumber: 1,
pageSize: 10,
totalCount: 0,
searchKeyword: '',
year: new Date().getFullYear(),
+ activityType: 1,
},
+ typeOptions: [
+ {text: '全部', value: 1},
+ {text: '征集中', value: 2},
+ {text: '已结束', value: 3},
+ ],
+ historyLayerPageKey: 'works-collection-mine-h5',
+ historyLayerUnsubscribe: null,
}
},
- components: {
- 'apply-form': applyForm,
- 'info': INFO,
- },
methods: {
+ hasCover(row) {
+ return !!(row && row.cover && String(row.cover).trim())
+ },
+ handleImageError(row) {
+ this.$set(this.imageLoadErrors, row.id, true)
+ },
+ onFilterOpen() {
+ this.$set(this, 'filterOpened', true)
+ },
+ onFilterClose() {
+ this.$set(this, 'filterOpened', false)
+ },
+ handlePageBack() {
+ if (window.h5HistoryLayerManager.stack.length) {
+ window.h5HistoryLayerManager.close()
+ return
+ }
+ this.historyBack()
+ },
onView(row) {
this.$refs.infoRef.onOpen(row)
},
@@ -78,30 +542,89 @@ layout("/layouts/platform_h5.html"){
this.$refs.applyFormRef.onOpenEdit(row)
},
onDelete(row) {
- this.$dialog.confirm({
- title: '温馨提示',
- message: '您确定要删除吗？',
- }).then(() => {
- this.$axios.post("/platform/activity/worksCollection/upload/delete", {id:row.id}).then((res) => {
- if (res.code === 0) {
- this.$toast.success(res.msg)
- this.doSearch()
- }
- })
- }).catch(() => {
- // on cancel
- });
+ this.$set(this, 'pendingDeleteRow', row)
+ window.h5HistoryLayerManager.open('works-collection-mine-delete-confirm')
},
- onReady() {
- this.doSearch()
+ closeDeleteConfirm() {
+ window.h5HistoryLayerManager.close('works-collection-mine-delete-confirm')
},
- doSearch() {
- this.$nextTick(() => {
- this.pageForm.pageNumber = 1
- this.pageForm.totalCount = 0
- this.$refs.tableListRef.doSearch()
+ confirmDelete() {
+ const row = this.pendingDeleteRow
+ window.h5HistoryLayerManager.close('works-collection-mine-delete-confirm', () => {
+ this.deleteRow(row)
})
},
+ // 删除接口接收作品 id，成功后重置分页列表；接口返回 Result JSON。
+ deleteRow(row) {
+ if (!row || !row.id || this.deleteLoading) return
+ this.$set(this, 'deleteLoading', true)
+ this.$axios.post('/platform/activity/worksCollection/upload/delete', {id: row.id}).then((res) => {
+ if (res.code === 0) {
+ this.$toast.success(res.msg || '删除成功')
+ this.loadWorks(true)
+ }
+ }).finally(() => {
+ this.$set(this, 'deleteLoading', false)
+ })
+ },
+ onLoad() {
+ if (!this.finished) this.loadWorks(false)
+ },
+ onRefresh() {
+ this.loadWorks(true)
+ },
+ /**
+ * 加载当前用户作品分页数据。
+ * reset 为 true 时从第一页重新查询；接口返回 Pagination，list 为作品数组、totalCount 为总数。
+ */
+ loadWorks(reset) {
+ const showSkeleton = !!reset
+ if (reset) {
+ this.$set(this, 'skeletonLoading', true)
+ this.$set(this.pageForm, 'pageNumber', 1)
+ this.$set(this.pageForm, 'totalCount', 0)
+ this.$set(this, 'tableData', [])
+ this.$set(this, 'finished', false)
+ this.$set(this, 'imageLoadErrors', {})
+ }
+ this.$set(this, 'loading', true)
+ this.$axios.post('/platform/activity/worksCollection/upload/pageData', this.pageForm, {
+ h5SkeletonLoading: showSkeleton
+ }).then((res) => {
+ if (res.code === 0) {
+ const list = res.data && res.data.list ? res.data.list : []
+ this.$set(this, 'tableData', this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list))
+ this.$set(this.pageForm, 'totalCount', res.data && res.data.totalCount ? res.data.totalCount : 0)
+ this.$set(this, 'finished', this.tableData.length >= this.pageForm.totalCount)
+ if (!this.finished) {
+ this.$set(this.pageForm, 'pageNumber', this.pageForm.pageNumber + 1)
+ }
+ }
+ }).finally(() => {
+ this.$set(this, 'loading', false)
+ this.$set(this, 'refreshing', false)
+ if (showSkeleton) this.$set(this, 'skeletonLoading', false)
+ })
+ },
+ doSearch() {
+ this.loadWorks(true)
+ },
+ syncHistoryLayers(stack) {
+ this.$set(this, 'deleteConfirmVisible', stack.includes('works-collection-mine-delete-confirm'))
+ }
+ },
+ created() {
+ window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => {
+ this.syncHistoryLayers(stack)
+ })
+ this.$set(this, 'historyLayerUnsubscribe', window.h5HistoryLayerManager.subscribe((stack) => {
+ this.syncHistoryLayers(stack)
+ }))
+ this.loadWorks(true)
+ },
+ beforeDestroy() {
+ if (this.historyLayerUnsubscribe) this.historyLayerUnsubscribe()
+ window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
}
})
diff --git a/src/main/resources/views/platform/zhghh5/activity/workscollection/mine/info.js b/src/main/resources/views/platform/zhghh5/activity/workscollection/mine/info.js
index 93cda6d7..530c07ed 100644
--- a/src/main/resources/views/platform/zhghh5/activity/workscollection/mine/info.js
+++ b/src/main/resources/views/platform/zhghh5/activity/workscollection/mine/info.js
@@ -2,63 +2,189 @@ const INFO = {
template: /*language=HTML*/
`
-
-
-
-
- {{ viewData.userName }}
-
-
- {{ viewData.loginName }}
-
-
- {{ viewData.unitName }}
-
-
- {{ viewData.unionName }}
-
-
- {{ viewData.name }}
-
-
- {{ viewData.activityName }}
-
-
- {{ viewData.subjectName }}
-
-
- {{ viewData.worksName }}
-
-
- {{ viewData.description }}
-
-
-
-
-
+
`,
+ style: /*language=CSS*/ `
+ /deep/ .works-detail-popup,
+ /deep/ .works-detail-page {
+ background-color: #f3f7fd;
+ }
+
+ /deep/ .works-detail-page {
+ min-height: 100vh;
+ }
+
+ /deep/ .works-detail-page .van-nav-bar__title {
+ color: #1f2937;
+ font-size: 16px;
+ }
+
+ /deep/ .works-detail-page .van-nav-bar .van-icon,
+ /deep/ .works-detail-page .van-nav-bar__text {
+ color: #397fbd;
+ }
+
+ /deep/ .works-detail-scroll {
+ height: calc(100vh - 46px);
+ padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
+ overflow-x: hidden;
+ overflow-y: auto;
+ box-sizing: border-box;
+ }
+
+ /deep/ .works-detail-card {
+ margin-top: 12px;
+ overflow: hidden;
+ border: 1px solid #e9eff7;
+ border-radius: 12px;
+ background-color: #fff;
+ box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+ }
+
+ /deep/ .works-detail-scroll > .works-detail-card:first-child {
+ margin-top: 0;
+ }
+
+ /deep/ .works-detail-card__title {
+ position: relative;
+ margin: 0;
+ padding: 13px 14px 9px 22px;
+ color: #354255;
+ font-size: 15px;
+ line-height: 21px;
+ font-weight: 600;
+ }
+
+ /deep/ .works-detail-card__title::before {
+ position: absolute;
+ top: 16px;
+ bottom: 12px;
+ left: 12px;
+ width: 2px;
+ border-radius: 2px;
+ background-color: #1989fa;
+ content: "";
+ }
+
+ /deep/ .works-detail-card .van-cell {
+ padding: 10px 14px;
+ color: #596779;
+ }
+
+ /deep/ .works-detail-card .van-cell__title {
+ flex: 0 0 82px;
+ font-size: 14px;
+ }
+
+ /deep/ .works-detail-card .van-cell__value {
+ color: #4f5d70;
+ font-size: 14px;
+ word-break: break-word;
+ }
+
+ /deep/ .works-detail-description,
+ /deep/ .works-detail-files,
+ /deep/ .works-detail-empty {
+ padding: 4px 14px 16px;
+ color: #536174;
+ font-size: 14px;
+ line-height: 1.8;
+ white-space: pre-wrap;
+ word-break: break-word;
+ }
+
+ /deep/ .works-detail-empty {
+ color: #9aa7b8;
+ }
+ `,
data() {
return {
viewData: {},
visible: false,
+ historyLayerUnsubscribe: null,
}
},
methods: {
+ /**
+ * 查询并打开作品详情。
+ * row 需传作品 id；接口返回作品、活动、主题、类型及附件信息的 Result JSON。
+ */
onOpen(row) {
+ this.$set(this, "viewData", Object.assign({}, row, {files: this.normalizeFiles(row.files)}))
+ window.h5HistoryLayerManager.open("works-collection-mine-info")
this.$axios.post("/platform/activity/worksCollection/common/findOne", {id: row.id}).then((res) => {
if (res.code === 0) {
- this.viewData = res.data
- try {
- this.viewData.files = JSON.parse(this.viewData.files)
- } catch (err) {
- }
+ const viewData = res.data || {}
+ viewData.files = this.normalizeFiles(viewData.files)
+ this.$set(this, "viewData", viewData)
}
})
- this.visible = true
},
-
+ normalizeFiles(files) {
+ if (Array.isArray(files)) return files
+ if (!files) return []
+ try {
+ const result = JSON.parse(files)
+ return Array.isArray(result) ? result : []
+ } catch (err) {
+ return []
+ }
+ },
+ closeInfo() {
+ window.h5HistoryLayerManager.close("works-collection-mine-info")
+ },
+ syncHistoryLayers(stack) {
+ this.$set(this, "visible", stack.includes("works-collection-mine-info"))
+ }
+ },
+ created() {
+ this.$set(this, "historyLayerUnsubscribe", window.h5HistoryLayerManager.subscribe((stack) => {
+ this.syncHistoryLayers(stack)
+ }))
+ },
+ beforeDestroy() {
+ if (this.historyLayerUnsubscribe) this.historyLayerUnsubscribe()
}
}
diff --git a/src/main/resources/views/platform/zhghh5/activity/workscollection/read/index.html b/src/main/resources/views/platform/zhghh5/activity/workscollection/read/index.html
index 82ded3e0..30f2ed0d 100644
--- a/src/main/resources/views/platform/zhghh5/activity/workscollection/read/index.html
+++ b/src/main/resources/views/platform/zhghh5/activity/workscollection/read/index.html
@@ -1,66 +1,495 @@
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
点赞
+
+
+
+
+
-
-
-
取消点赞
+
+
+
暂无作品记录
+
当前筛选条件下暂时没有可阅览作品
-
-
-
+
+
+
+
+
+ {{row.worksName || '--'}}
+ {{row.userName || '--'}}
+ {{row.loginName || '--'}}
+ {{$moment(row.createdAt).format('YYYY-MM-DD')}}
+
+
+ 上传附件
+
+ 共{{getAttachmentCount(row.files)}}个附件 · 左滑查看更多
+
+
+
+
+
+
+
+ 查看
+
+
+
+
+ 点赞
+
+
+
+ 取消点赞
+
+
+ ♥
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
- 提交
-
-
-
-
+
+
-
-
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- {{row.activityGroupName}}
-
- {{$moment(row.startDateTime).format('MM/DD HH:mm')
- + '~' + $moment(row.endDateTime).format('MM/DD HH:mm')}}
-
-
-
-
-
-
查看介绍
+
-
-
- 去报名
-
-
-
-
-
-
-
-
{{infoRow.name}}
-
+
+
+
+
+
![]()
+
+
+ {{ hasCover(row) ? '图片加载失败' : '暂无图片' }}
+
+
+
{{ row.name }}
+
+ 征集时间：{{ $moment(row.startDateTime).format('MM/DD HH:mm') }}~{{ $moment(row.endDateTime).format('MM/DD HH:mm') }}
+
+
+
+ 面向对象{{ row.activityGroupName }}
+
+
+
+
+
+
+
+
暂无作品征集活动
+
当前筛选条件下暂时没有可展示的活动
+
-
+
+
+
+
@@ -985,22 +997,22 @@ layout("/layouts/platform_h5.html"){
- 保存
- 提交
- 提交
+ 保存申请
+ 提交申请
+ 提交申请
发票识别中...
-
+
- 上传发票文件后会自动识别发票信息；开启自动校验时会同步校验发票是否重复。
+
+
+
-
+
+
-
-
-
-
+
+
+
+
+
+
+
-
-
+
+
+
- {{row.loginName}}
- {{row.userName}}
- {{row.unionName}}
- {{row.unitName}}
- {{formatCreateTime(row.createTime)}}
- {{getReimburseProjectName(row.reimburseProject)}}
- {{getRemarkText(row)}}
-
- {{getStateName(row.stateId)}}
-
+ {{getReimburseProjectName(row.reimburseProject) || '--'}}
+ {{getRemarkText(row) || '--'}}
+ {{row.unionName || '--'}}
+ {{row.unitName || '--'}}
+ {{formatCreateTime(row.createTime) || '--'}}
+ {{formatMoney(row.money)}}
-
+
查看
-
-
+
+
撤回
-
+
删除
+
暂无报销统计记录
当前筛选条件下暂时没有报销记录
+
-
+
+
@@ -1337,68 +1398,23 @@ layout("/layouts/platform_h5.html"){
+ 
+ 
+