Merge branch 'refs/heads/feature_界面UI优化' into feature_主分支合并UI优化
# Conflicts: # src/main/resources/views/platform/zhghh5/democratic/proposal/query/comprehensive/index.html # src/main/resources/views/platform/zhghh5/democratic/proposal/transact/commissioner/index.html # src/main/resources/views/platform/zhghh5/democratic/proposal/transact/delegation/index.html # src/main/resources/views/platform/zhghh5/democratic/proposal/transact/feedbackEvaluation/index.html # src/main/resources/views/platform/zhghh5/democratic/proposal/transact/mine/index.html # src/main/resources/views/platform/zhghh5/democratic/proposal/transact/schoolLeaderApproval/index.html # src/main/resources/views/platform/zhghh5/democratic/proposal/transact/seconded/index.html # src/main/resources/views/platform/zhghh5/democratic/proposal/transact/suggestion/index.html # src/main/resources/views/platform/zhghh5/democratic/proposal/transact/unitReply/index.html
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<el-card shadow="never">
|
||||
<table-tool :app="this" label="风采墙栏目">
|
||||
<el-button size="medium" type="primary" icon="el-icon-plus" @click="openAdd">新增栏目</el-button>
|
||||
<el-button size="medium" icon="el-icon-s-unfold" @click="expandAll">展开全部</el-button>
|
||||
<el-button size="medium" icon="el-icon-s-fold" @click="collapseAll">折叠全部</el-button>
|
||||
</table-tool>
|
||||
<el-table ref="categoryTable" v-loading="loading" :data="tableData" border row-key="id"
|
||||
:tree-props="{children: 'children'}" default-expand-all>
|
||||
<el-table-column prop="name" label="栏目名称" min-width="220" align="left"></el-table-column>
|
||||
<el-table-column prop="sortOrder" label="排序" width="90" align="center"></el-table-column>
|
||||
<el-table-column label="显示" width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<el-switch :value="row.visible === 1" @change="changeVisible(row, $event)"></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="轮播" width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.slider === 1 ? 'success' : 'info'" size="mini">
|
||||
{{row.slider === 1 ? '开启' : '关闭'}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="190" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="primary" size="mini" @click="openEdit(row)">编辑</el-button>
|
||||
<el-button type="danger" size="mini" @click="remove(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</guava>
|
||||
|
||||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="560px" :close-on-click-modal="false">
|
||||
<el-form ref="categoryForm" :model="formData" :rules="rules" label-width="100px">
|
||||
<el-form-item label="上级栏目" prop="parentId">
|
||||
<el-select v-model="formData.parentId" style="width: 100%" placeholder="请选择上级栏目">
|
||||
<el-option label="顶级栏目" value="0"></el-option>
|
||||
<el-option v-for="item in rootOptions" :key="item.id" :label="item.name" :value="item.id"
|
||||
:disabled="item.id === formData.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="栏目名称" prop="name">
|
||||
<el-input v-model.trim="formData.name" maxlength="100" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sortOrder">
|
||||
<el-input-number v-model="formData.sortOrder" :min="0" :max="9999" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示状态">
|
||||
<el-radio-group v-model="formData.visible">
|
||||
<el-radio :label="1">显示</el-radio>
|
||||
<el-radio :label="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="参与轮播">
|
||||
<el-radio-group v-model="formData.slider">
|
||||
<el-radio :label="1">开启</el-radio>
|
||||
<el-radio :label="0">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="el-form-item__tip">子栏目开启轮播后，其上级栏目会自动开启。</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="submit">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
submitting: false,
|
||||
tableData: [],
|
||||
rootOptions: [],
|
||||
dialogVisible: false,
|
||||
dialogTitle: "",
|
||||
formData: {},
|
||||
rules: {
|
||||
parentId: [{required: true, message: "请选择上级栏目", trigger: "change"}],
|
||||
name: [{required: true, message: "请输入栏目名称", trigger: "blur"}],
|
||||
sortOrder: [{required: true, message: "请输入排序", trigger: "change"}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 加载栏目树，同时提取顶级栏目作为上级栏目选项。
|
||||
loadData() {
|
||||
this.loading = true
|
||||
this.$axios.post(loc() + "/treeData").then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.tableData = resp.data || []
|
||||
this.rootOptions = (resp.data || []).slice()
|
||||
// 栏目数据为异步加载，赋值后显式展开，避免组件只展示顶级栏目。
|
||||
this.$nextTick(this.expandAll)
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
}).finally(() => this.loading = false)
|
||||
},
|
||||
// 构造新增栏目默认值。
|
||||
openAdd() {
|
||||
this.dialogTitle = "新增栏目"
|
||||
this.formData = {parentId: "0", name: "", sortOrder: 255, visible: 1, slider: 0}
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => this.$refs.categoryForm && this.$refs.categoryForm.clearValidate())
|
||||
},
|
||||
// 将当前行复制到表单，避免直接修改表格数据。
|
||||
openEdit(row) {
|
||||
this.dialogTitle = "编辑栏目"
|
||||
this.formData = Object.assign({}, row)
|
||||
delete this.formData.children
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => this.$refs.categoryForm && this.$refs.categoryForm.clearValidate())
|
||||
},
|
||||
// 展开当前栏目树中的全部父级栏目。
|
||||
expandAll() {
|
||||
this.setAllExpanded(true)
|
||||
},
|
||||
// 折叠当前栏目树中的全部父级栏目。
|
||||
collapseAll() {
|
||||
this.setAllExpanded(false)
|
||||
},
|
||||
// Element UI 异步树表格需要逐行设置展开状态。
|
||||
setAllExpanded(expanded) {
|
||||
const table = this.$refs.categoryTable
|
||||
if (!table) return
|
||||
const walk = rows => {
|
||||
(rows || []).forEach(row => {
|
||||
if (row.children && row.children.length) {
|
||||
table.toggleRowExpansion(row, expanded)
|
||||
walk(row.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
walk(this.tableData)
|
||||
},
|
||||
// 校验后调用新增或编辑接口。
|
||||
submit() {
|
||||
this.$refs.categoryForm.validate(valid => {
|
||||
if (!valid) return
|
||||
this.submitting = true
|
||||
const api = this.formData.id ? "/doEdit" : "/doAdd"
|
||||
this.$axios.post(loc() + api, this.formData).then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.$message.success(resp.msg || "保存成功")
|
||||
this.dialogVisible = false
|
||||
this.loadData()
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
}).finally(() => this.submitting = false)
|
||||
})
|
||||
},
|
||||
// 修改栏目显示状态，失败时重新加载以恢复开关。
|
||||
changeVisible(row, checked) {
|
||||
this.$axios.post(loc() + "/doVisible", {id: row.id, visible: checked ? 1 : 0}).then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.$message.success("设置成功")
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
this.loadData()
|
||||
})
|
||||
},
|
||||
// 删除前进行二次确认；存在内容时后端会阻止删除。
|
||||
remove(row) {
|
||||
this.$confirm("确定删除栏目“" + row.name + "”吗？", "提示", {type: "warning"}).then(() => {
|
||||
this.$axios.post(loc() + "/doDelete", {id: row.id}).then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.$message.success("删除成功")
|
||||
this.loadData()
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,381 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<style>
|
||||
.spread-editor-page { width: 100%; }
|
||||
.spread-editor-page .form-card { width: 100%; max-width: none; margin: 0; box-sizing: border-box; }
|
||||
.spread-editor-page .form-tip { color: #909399; font-size: 12px; line-height: 20px; }
|
||||
.spread-editor-page .footer-actions { padding: 18px 0 6px; text-align: center; }
|
||||
.spread-editor-page .slider-upload-head { width: 100%; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.spread-editor-page .slider-upload-title { color: #303133; font-weight: 600; }
|
||||
.spread-editor-page .slider-upload-count { color: #909399; font-size: 13px; font-weight: 400; }
|
||||
.spread-editor-page .slider-meta-list { width: 100%; margin-top: 14px; }
|
||||
.spread-editor-page .slider-meta-toolbar { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.spread-editor-page .slider-meta-item { margin-bottom: 12px; padding: 14px; display: grid; grid-template-columns: 130px minmax(220px, 1fr) 92px; gap: 14px; align-items: center; border: 1px solid #e4e7ed; border-radius: 8px; background: #fafafa; transition: border-color .2s, box-shadow .2s; }
|
||||
.spread-editor-page .slider-meta-item:hover { border-color: #c6e2ff; box-shadow: 0 5px 16px rgba(64,158,255,.10); }
|
||||
.spread-editor-page .slider-preview-wrap { position: relative; }
|
||||
.spread-editor-page .slider-index { min-width: 26px; height: 26px; padding: 0 7px; position: absolute; top: 6px; left: 6px; z-index: 2; box-sizing: border-box; color: #fff; font-size: 12px; line-height: 26px; text-align: center; border-radius: 13px; background: rgba(0,0,0,.58); }
|
||||
.spread-editor-page .slider-meta-image { width: 130px; height: 82px; display: block; object-fit: cover; border: 4px solid #fff; border-radius: 5px; box-sizing: border-box; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
|
||||
.spread-editor-page .slider-field-label { margin-bottom: 7px; display: block; color: #606266; font-size: 13px; }
|
||||
.spread-editor-page .color-danger { color: #f56c6c; }
|
||||
.spread-editor-page .slider-item-actions { display: flex; flex-direction: column; align-items: stretch; }
|
||||
.spread-editor-page .slider-item-actions .el-button + .el-button { margin-top: 6px; margin-left: 0; }
|
||||
@media(max-width: 1050px) {
|
||||
.spread-editor-page .slider-meta-item { grid-template-columns: 110px minmax(0, 1fr) 92px; }
|
||||
.spread-editor-page .slider-meta-image { width: 110px; }
|
||||
.spread-editor-page .slider-item-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
|
||||
.spread-editor-page .slider-item-actions .el-button + .el-button { margin-top: 0; margin-left: 8px; }
|
||||
}
|
||||
@media(max-width: 680px) {
|
||||
.spread-editor-page .slider-meta-item { grid-template-columns: 1fr; }
|
||||
.spread-editor-page .slider-meta-image { width: 100%; height: 180px; }
|
||||
.spread-editor-page .slider-item-actions { grid-column: auto; }
|
||||
}
|
||||
</style>
|
||||
<div id="app" class="spread-editor-page" v-cloak>
|
||||
<el-card class="form-card" shadow="never" v-loading="loading">
|
||||
<div slot="header">
|
||||
<span style="font-size: 17px;font-weight: 600">{{formData.id ? '编辑风采内容' : '发布风采内容'}}</span>
|
||||
</div>
|
||||
<el-form ref="contentForm" :model="formData" :rules="rules" label-width="105px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属栏目" prop="categoryId">
|
||||
<el-cascader v-model="formData.categoryId" :options="categoryOptions"
|
||||
:props="{value:'id', label:'name', children:'children', emitPath:false, checkStrictly:false}"
|
||||
filterable clearable style="width: 100%" placeholder="请选择末级栏目"></el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所属工会" prop="unionId">
|
||||
<el-select v-model="formData.unionId" filterable clearable style="width: 100%"
|
||||
placeholder="请选择所属工会" @change="contentUnionChanged">
|
||||
<el-option v-for="item in unionOptions" :key="item.id"
|
||||
:label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="排序" prop="sortOrder">
|
||||
<el-input-number v-model="formData.sortOrder" :min="0" :max="9999" style="width: 100%"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model.trim="formData.title" maxlength="300" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<!-- 副标题当前无实际业务用途，暂不开放录入。
|
||||
<el-form-item label="副标题">
|
||||
<el-input v-model.trim="formData.subTitle" maxlength="255" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
-->
|
||||
|
||||
<el-form-item label="摘要" prop="summary">
|
||||
<el-input v-model="formData.summary" type="textarea" :rows="3" maxlength="1000" show-word-limit
|
||||
placeholder="用于风采墙列表展示"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="封面图" prop="thumbUrl">
|
||||
<file-upload :upload_number="1" :upload_size="10 * 1024 * 1024"
|
||||
:value.sync="formData.thumbUrl" accept=".jpg,.jpeg,.png,.webp"
|
||||
upload_mode="image" upload_result_category="interval"></file-upload>
|
||||
<div class="form-tip">建议使用横版图片，单张不超过 10MB。</div>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="sliderEnabled" label="轮播图片">
|
||||
<div class="slider-upload-head">
|
||||
<span class="slider-upload-title">点击下方“+”新增轮播图片</span>
|
||||
<span class="slider-upload-count">已添加 {{sliderMeta.length}} / 10 张</span>
|
||||
</div>
|
||||
<file-upload :upload_number="10" :upload_size="10 * 1024 * 1024"
|
||||
:value.sync="sliderFiles" accept=".jpg,.jpeg,.png,.webp"
|
||||
upload_mode="image" upload_result_category="array"></file-upload>
|
||||
<div class="form-tip">仅栏目开启“参与轮播”后生效，最多上传 10 张；每张图片只需填写标题，工会名称沿用内容所属工会。</div>
|
||||
<div v-if="sliderMeta.length" class="slider-meta-list">
|
||||
<div class="slider-meta-toolbar">
|
||||
<span class="form-tip">可调整顺序，轮播将按当前顺序展示。</span>
|
||||
<el-button type="text" icon="el-icon-delete" class="color-danger" @click="clearSliderImages">
|
||||
清空全部
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-for="(img, index) in sliderMeta" :key="img.src + '-' + index" class="slider-meta-item">
|
||||
<div class="slider-preview-wrap">
|
||||
<span class="slider-index">{{index + 1}}</span>
|
||||
<img class="slider-meta-image" :src="img.src" :alt="img.title || ('轮播图' + (index + 1))">
|
||||
</div>
|
||||
<div>
|
||||
<span class="slider-field-label"><i class="color-danger">*</i> 图片标题</span>
|
||||
<el-input v-model.trim="img.title" maxlength="100" show-word-limit
|
||||
:placeholder="'请输入第' + (index + 1) + '张图片标题'"></el-input>
|
||||
</div>
|
||||
|
||||
<div class="slider-item-actions">
|
||||
<el-button size="mini" icon="el-icon-top" :disabled="index === 0"
|
||||
@click="moveSliderImage(index, -1)">上移</el-button>
|
||||
<el-button size="mini" icon="el-icon-bottom" :disabled="index === sliderMeta.length - 1"
|
||||
@click="moveSliderImage(index, 1)">下移</el-button>
|
||||
<el-button size="mini" type="danger" plain icon="el-icon-delete"
|
||||
@click="removeSliderImage(index)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="正文" prop="contentBody">
|
||||
<text-editor v-model="formData.contentBody" :height="360" placeholder="请输入风采内容"></text-editor>
|
||||
</el-form-item>
|
||||
<el-form-item label="置顶">
|
||||
<el-switch v-model="formData.isTop" :active-value="1" :inactive-value="0"
|
||||
active-text="置顶" inactive-text="不置顶"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="发布状态">
|
||||
<el-radio-group v-model="formData.isPublished">
|
||||
<el-radio :label="0">保存草稿</el-radio>
|
||||
<el-radio :label="1">立即发布</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div class="footer-actions">
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="submit">保存</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
submitting: false,
|
||||
categoryOptions: [],
|
||||
unionOptions: [],
|
||||
sliderFiles: [],
|
||||
sliderMeta: [],
|
||||
formData: {},
|
||||
rules: {
|
||||
categoryId: [{required: true, message: "请选择所属栏目", trigger: "change"}],
|
||||
unionId: [{required: true, message: "请选择所属工会", trigger: "change"}],
|
||||
title: [{required: true, message: "请输入标题", trigger: "blur"}],
|
||||
summary: [{required: true, message: "请输入摘要", trigger: "blur"}],
|
||||
contentBody: [{required: true, message: "请输入正文", trigger: "change"}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 仅所选末级栏目及其上级栏目都开启轮播时，显示轮播图片配置。
|
||||
sliderEnabled() {
|
||||
if (!this.formData.categoryId) return false
|
||||
const findPath = (nodes, categoryId, parents) => {
|
||||
for (const node of nodes || []) {
|
||||
const path = parents.concat(node)
|
||||
if (node.id === categoryId) return path
|
||||
const childPath = findPath(node.children, categoryId, path)
|
||||
if (childPath) return childPath
|
||||
}
|
||||
return null
|
||||
}
|
||||
const categoryPath = findPath(this.categoryOptions, this.formData.categoryId, [])
|
||||
return !!categoryPath && categoryPath.every(item => Number(item.slider) === 1)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 生成新增内容时使用的默认表单。
|
||||
defaultForm() {
|
||||
return {
|
||||
categoryId: "", unionId: "", unionName: "", title: "", subTitle: "", summary: "", contentBody: "",
|
||||
thumbUrl: "", sliderImages: "", isTop: 0,
|
||||
viewCount: 0, sortOrder: 255, isPublished: 0
|
||||
}
|
||||
},
|
||||
// 读取地址栏中的编辑内容 ID。
|
||||
getEditId() {
|
||||
return new URLSearchParams(window.location.search).get("id") || ""
|
||||
},
|
||||
// 加载栏目树，内容只能选择末级栏目。
|
||||
loadCategories() {
|
||||
return this.$axios.post(loc() + "/categoryTree").then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.categoryOptions = resp.data || []
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 按当前登录人员权限加载可选择工会。
|
||||
loadUnionOptions() {
|
||||
return this.$axios.post(loc() + "/unionOptions").then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.unionOptions = resp.data || []
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 内容所属工会变化时同步保存工会名称。
|
||||
contentUnionChanged(unionId) {
|
||||
const union = this.unionOptions.find(item => item.id === unionId)
|
||||
this.formData.unionName = union ? union.name : ""
|
||||
},
|
||||
|
||||
// 分工会人员只有一个可选工会时自动带入，校工会管理员仍需主动选择。
|
||||
applyUnionDefaults() {
|
||||
if (this.unionOptions.length !== 1) return
|
||||
const union = this.unionOptions[0]
|
||||
if (!this.formData.unionId) {
|
||||
this.formData.unionId = union.id
|
||||
this.formData.unionName = union.name
|
||||
}
|
||||
|
||||
},
|
||||
// 编辑状态下加载内容详情并还原轮播图片数组。
|
||||
loadDetail(id) {
|
||||
if (!id) return Promise.resolve()
|
||||
this.loading = true
|
||||
return this.$axios.post(loc() + "/detailData", {id}).then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.formData = Object.assign(this.defaultForm(), resp.data || {})
|
||||
this.sliderMeta = this.parseSliderImages(this.formData.sliderImages)
|
||||
this.sliderFiles = this.sliderMeta.map(item => item.src)
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
}).finally(() => this.loading = false)
|
||||
},
|
||||
// 兼容历史图片地址数组，并转换为只包含图片地址和标题的轮播对象。
|
||||
parseSliderImages(value) {
|
||||
if (!value) return []
|
||||
let items = value
|
||||
if (!Array.isArray(items)) {
|
||||
try {
|
||||
items = JSON.parse(value)
|
||||
} catch (e) {
|
||||
items = String(value).split(",").filter(Boolean)
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(items)) return []
|
||||
return items.map(item => {
|
||||
if (typeof item === "string") {
|
||||
return {src: item, title: ""}
|
||||
}
|
||||
return {
|
||||
src: item.src || item.url || item.data || (item.response && item.response.data) || "",
|
||||
title: item.title || ""
|
||||
}
|
||||
}).filter(item => item.src)
|
||||
},
|
||||
// 取得上传组件返回的图片地址。
|
||||
getSliderFileUrl(item) {
|
||||
if (typeof item === "string") return item
|
||||
return item && (item.url || item.data || (item.response && item.response.data)) || ""
|
||||
},
|
||||
// 上传或删除图片后同步图片元数据，并保留已经填写的标题和工会。
|
||||
syncSliderMeta() {
|
||||
const oldItems = {}
|
||||
this.sliderMeta.forEach(item => oldItems[item.src] = item)
|
||||
this.sliderMeta = (this.sliderFiles || []).map(item => this.getSliderFileUrl(item)).filter(Boolean).map(src => {
|
||||
return oldItems[src] || {src: src, title: ""}
|
||||
})
|
||||
this.applyUnionDefaults()
|
||||
},
|
||||
// 删除单张轮播图片，同时更新上传组件和图片配置。
|
||||
removeSliderImage(index) {
|
||||
const files = (this.sliderFiles || []).slice()
|
||||
files.splice(index, 1)
|
||||
this.sliderFiles = files
|
||||
this.$message.success("已删除第" + (index + 1) + "张轮播图片")
|
||||
},
|
||||
// 调整轮播图片顺序，保存和展示均使用调整后的顺序。
|
||||
moveSliderImage(index, offset) {
|
||||
const targetIndex = index + offset
|
||||
if (targetIndex < 0 || targetIndex >= this.sliderMeta.length) return
|
||||
const files = (this.sliderFiles || []).slice()
|
||||
const file = files[index]
|
||||
files.splice(index, 1)
|
||||
files.splice(targetIndex, 0, file)
|
||||
this.sliderFiles = files
|
||||
},
|
||||
// 清空全部轮播图片，二次确认避免误操作。
|
||||
clearSliderImages() {
|
||||
this.$confirm("确定清空全部轮播图片吗？", "提示", {type: "warning"}).then(() => {
|
||||
this.sliderFiles = []
|
||||
this.sliderMeta = []
|
||||
this.$message.success("轮播图片已清空")
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 将轮播图片地址和标题转换为可持久化 JSON。
|
||||
buildSliderImages() {
|
||||
this.syncSliderMeta()
|
||||
return JSON.stringify(this.sliderMeta.map(item => ({
|
||||
src: item.src,
|
||||
title: item.title
|
||||
})))
|
||||
},
|
||||
// 校验每张轮播图的标题。
|
||||
validateSliderMeta() {
|
||||
this.syncSliderMeta()
|
||||
const invalidIndex = this.sliderMeta.findIndex(item => !item.title)
|
||||
if (invalidIndex < 0) return true
|
||||
this.$message.warning("请输入第" + (invalidIndex + 1) + "张轮播图标题")
|
||||
return false
|
||||
},
|
||||
// 重置新增表单；编辑状态下恢复数据库内容。
|
||||
resetForm() {
|
||||
const id = this.getEditId()
|
||||
if (id) {
|
||||
this.loadDetail(id)
|
||||
} else {
|
||||
this.formData = this.defaultForm()
|
||||
this.sliderFiles = []
|
||||
this.sliderMeta = []
|
||||
this.applyUnionDefaults()
|
||||
}
|
||||
this.$nextTick(() => this.$refs.contentForm && this.$refs.contentForm.clearValidate())
|
||||
},
|
||||
// 校验并提交新增或编辑数据。
|
||||
submit() {
|
||||
this.$refs.contentForm.validate(valid => {
|
||||
if (!valid) return
|
||||
if (this.sliderEnabled && !this.validateSliderMeta()) return
|
||||
const data = Object.assign({}, this.formData)
|
||||
if (this.sliderEnabled) {
|
||||
data.sliderImages = this.buildSliderImages()
|
||||
} else {
|
||||
// 未开启轮播的栏目不提交隐藏字段，编辑时保留已有数据，避免切换栏目造成误删。
|
||||
delete data.sliderImages
|
||||
}
|
||||
// 推荐和头条没有对应业务逻辑，提交时不再携带这两个字段。
|
||||
delete data.isRecommend
|
||||
delete data.isHeadline
|
||||
const api = data.id ? "/doEdit" : "/doAdd"
|
||||
this.submitting = true
|
||||
this.$axios.post(loc() + api, data).then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.$message.success(resp.msg || "保存成功")
|
||||
if (!data.id) {
|
||||
this.resetForm()
|
||||
}
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
}).finally(() => this.submitting = false)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听上传组件结果，及时生成对应的标题和工会填写行。
|
||||
sliderFiles: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.syncSliderMeta()
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.formData = this.defaultForm()
|
||||
const id = this.getEditId()
|
||||
Promise.all([this.loadCategories(), this.loadUnionOptions(), this.loadDetail(id)]).then(this.applyUnionDefaults)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,366 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<style>
|
||||
#sub-app-container-main-content { padding: 0 !important; background: #f5f5f5; }
|
||||
.spread-wall { min-height: 100%; overflow-x: hidden; color: #2c3e50; background: #f5f5f5; }
|
||||
.spread-hero { min-height: 450px; position: relative; padding: 18px 0 72px; display: flex; flex-direction: column; justify-content: center; overflow: visible; }
|
||||
.spread-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 320px; background: url("${base!}/assets/platform/img/spread-bg.png?v=20260731") top center / cover no-repeat; z-index: 0; }
|
||||
.spread-hero > * { position: relative; z-index: 1; }
|
||||
.spread-brand { margin: 0 auto 24px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; color: #2c3e50; border-radius: 12px; background: rgba(255,255,255,.76); box-shadow: 0 10px 26px rgba(0,0,0,.12); backdrop-filter: blur(6px); }
|
||||
.spread-brand-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: #c0141a; font-size: 24px; border-radius: 50%; background: #fff0f0; }
|
||||
.spread-brand-title { font-family: "Microsoft YaHei", serif; font-size: 24px; font-weight: 700; letter-spacing: 3px; }
|
||||
.carousel-bg-text { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,.04); font-size: 170px; font-weight: 900; letter-spacing: 24px; pointer-events: none; user-select: none; }
|
||||
.hero-slider { width: calc(100% - 32px); max-width: none; min-height: 380px; height: auto; aspect-ratio: 32 / 9; margin: 0 auto; }
|
||||
.hero-slider .el-carousel, .hero-slider .el-carousel__container { height: 100%; }
|
||||
.hero-slider .el-carousel__arrow { width: 42px; height: 42px; color: #fff; border: 1px solid rgba(255,255,255,.25); background: rgba(44,62,80,.42); backdrop-filter: blur(4px); }
|
||||
.hero-slider .el-carousel__item--card { overflow: visible; display: flex; align-items: center; justify-content: center; }
|
||||
.hero-slider .el-carousel__mask { opacity: 0; background: transparent; }
|
||||
.slider-item { width: 97%; height: auto; aspect-ratio: 16 / 9; margin: 0 auto; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; border: 8px solid #fff; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.12); }
|
||||
.slider-item img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; flex: 0 0 auto; object-fit: contain !important; object-position: center; background: #fff; }
|
||||
.slider-caption { min-height: 25%; padding: 10px 18px 9px; position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; box-sizing: border-box; color: #fff; background: linear-gradient(to bottom, rgba(82,82,82,.30) 0%, rgba(52,52,52,.52) 45%, rgba(24,24,24,.78) 100%); }
|
||||
.slider-caption-line { width: 100%; }
|
||||
.slider-caption-title { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,.42); white-space: normal; word-break: break-all; }
|
||||
.slider-caption-tag { max-width: 32%; margin: 0 8px 0 0; padding: 1px 7px; display: inline-block; overflow: hidden; box-sizing: border-box; color: rgba(255,255,255,.92); font-size: 10px; font-weight: 400; line-height: 18px; vertical-align: middle; text-align: center; text-overflow: ellipsis; white-space: nowrap; border: 1px solid rgba(255,255,255,.42); border-radius: 3px; background: rgba(255,255,255,.10); }
|
||||
.slider-empty { height: 380px; display: flex; align-items: center; justify-content: center; color: #8a6f68; font-size: 22px; letter-spacing: 5px; border-radius: 12px; background: rgba(255,255,255,.86); box-shadow: 0 8px 28px rgba(0,0,0,.08); }
|
||||
.spread-main { width: calc(100% - 32px); max-width: none; margin: -42px auto 40px; padding: 20px 0 38px; position: relative; z-index: 5; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
|
||||
.category-panel, .content-panel { background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(90,53,34,.09); }
|
||||
.category-panel { position: sticky; top: 20px; overflow: hidden; }
|
||||
.category-header { padding: 18px 15px; color: #fff; font-family: "Microsoft YaHei", serif; font-size: 18px; font-weight: 700; text-align: center; letter-spacing: 2px; background: #c0141a; }
|
||||
.category-group { border-bottom: 1px solid #f0e7e5; }
|
||||
.category-parent { padding: 18px 20px; display: flex; align-items: center; gap: 10px; color: #2c3e50; cursor: pointer; transition: color .2s, background .2s; user-select: none; }
|
||||
.category-parent:hover, .category-parent.open, .category-parent.active { color: #c0141a; background: #fafafa; }
|
||||
.category-parent-name { flex: 1; font-size: 15px; }
|
||||
.category-arrow { font-size: 13px; transition: transform .25s ease; }
|
||||
.category-parent.open .category-arrow { transform: rotate(90deg); }
|
||||
.category-children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
|
||||
.category-children.open { grid-template-rows: 1fr; }
|
||||
.category-children-inner { min-height: 0; overflow: hidden; }
|
||||
.category-child { padding: 14px 20px 14px 32px; display: flex; align-items: center; gap: 10px; color: #606266; cursor: pointer; border-left: 3px solid transparent; transition: color .2s, background .2s; }
|
||||
.category-child::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #c0c4cc; }
|
||||
.category-child:hover, .category-child.active { color: #c0141a; background: #fff5f5; border-left-color: #c0141a; }
|
||||
.category-child:hover::before, .category-child.active::before { background: #c0141a; }
|
||||
.content-panel { min-height: 600px; padding: 30px; }
|
||||
.section-heading { margin-bottom: 22px; padding-bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid #ebeef5; }
|
||||
.section-heading h2 { margin: 0 0 4px; color: #2c3e50; font-family: "Microsoft YaHei", serif; font-size: 24px; }
|
||||
.section-heading span { color: #909399; font-size: 14px; }
|
||||
.content-card { margin-bottom: 16px; padding: 20px; display: grid; grid-template-columns: 80px minmax(0,1fr) 90px; gap: 20px; align-items: center; cursor: pointer; border: 1px solid #ebeef5; border-radius: 8px; transition: transform .2s, border-color .2s, box-shadow .2s; }
|
||||
.content-card:hover { transform: translateY(-2px); border-color: #f3c8c6; box-shadow: 0 8px 20px rgba(192,20,26,.08); }
|
||||
.content-date { color: #909399; text-align: center; border-right: 1px solid #ebeef5; }
|
||||
.content-date strong { display: block; color: #2c3e50; font-size: 25px; }
|
||||
.content-card:hover .content-date strong { color: #c0141a; }
|
||||
.content-title { margin-bottom: 8px; color: #303133; font-size: 17px; font-weight: 700; }
|
||||
.content-summary { overflow: hidden; color: #7c6d67; font-size: 13px; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.content-view { color: #aa9d96; font-size: 12px; text-align: right; }
|
||||
.wall-pagination { margin-top: 25px; text-align: center; }
|
||||
.detail-title { margin: 8px 0 12px; color: #672025; font-size: 28px; text-align: center; }
|
||||
.detail-meta { padding-bottom: 18px; color: #9c8d86; text-align: center; border-bottom: 1px solid #eee2d9; }
|
||||
.detail-cover { max-width: 100%; max-height: 520px; margin: 24px auto; display: block; object-fit: contain; border-radius: 8px; }
|
||||
.detail-body { width: 100%; overflow: hidden; color: #493b36; font-size: 16px; line-height: 1.9; word-break: break-word; }
|
||||
.detail-body img, .detail-body video { max-width: 100% !important; height: auto !important; }
|
||||
.detail-body table { max-width: 100% !important; }
|
||||
.back-link { margin-bottom: 12px; }
|
||||
@media (max-width: 900px) {
|
||||
.spread-hero { min-height: 360px; padding-bottom: 50px; }
|
||||
.spread-hero::before { height: 260px; }
|
||||
.hero-slider, .hero-slider .el-carousel, .hero-slider .el-carousel__container { height: 280px; }
|
||||
.spread-main { width: calc(100% - 24px); grid-template-columns: 1fr; margin-top: -20px; }
|
||||
.category-panel { position: static; }
|
||||
.content-panel { padding: 20px 15px; }
|
||||
.content-card { grid-template-columns: 64px minmax(0,1fr); }
|
||||
.content-view { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" class="spread-wall" v-cloak>
|
||||
<header class="spread-hero">
|
||||
<div class="spread-brand">
|
||||
<span class="spread-brand-icon"><i class="el-icon-trophy"></i></span>
|
||||
<span class="spread-brand-title">风采墙</span>
|
||||
</div>
|
||||
<div class="carousel-bg-text">HONOR</div>
|
||||
<div class="hero-slider">
|
||||
<el-carousel v-if="sliderItems.length" type="card" height="100%" :interval="4000"
|
||||
indicator-position="none" arrow="hover" :autoplay="sliderItems.length > 1" loop>
|
||||
<el-carousel-item v-for="item in sliderItems" :key="item.slideKey">
|
||||
<div class="slider-item" @click="openDetail(item)">
|
||||
<img v-if="item.sliderImage" :src="item.sliderImage" :alt="item.title">
|
||||
<div class="slider-caption">
|
||||
<div class="slider-caption-line">
|
||||
<div class="slider-caption-title" :title="item.title">
|
||||
<span class="slider-caption-tag">{{item.unionName || item.categoryName || '风采展示'}}</span>{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div v-else class="slider-empty">榜样引领 · 风采绽放</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="spread-main">
|
||||
<aside class="category-panel">
|
||||
<div class="category-header">工会信息传播与文化展示</div>
|
||||
<div v-for="parent in categories" :key="parent.id" class="category-group">
|
||||
<div class="category-parent" :class="{open: isParentOpen(parent), active: isParentActive(parent)}" @click="toggleParent(parent)">
|
||||
<i class="el-icon-tickets"></i>
|
||||
<span class="category-parent-name">{{parent.name}}</span>
|
||||
<i v-if="parent.children && parent.children.length" class="el-icon-arrow-right category-arrow"></i>
|
||||
</div>
|
||||
<div v-if="parent.children && parent.children.length"
|
||||
class="category-children" :class="{open: isParentOpen(parent)}">
|
||||
<div class="category-children-inner">
|
||||
<div v-for="child in parent.children" :key="child.id"
|
||||
class="category-child" :class="{active: currentCategory.id === child.id}"
|
||||
@click="selectCategory(child)">{{child.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="content-panel" v-loading="loading">
|
||||
<template v-if="!detail">
|
||||
<div class="section-heading">
|
||||
<h2>{{currentCategory.name || '风采展示'}}</h2>
|
||||
<span>展示教职工的先进事迹与精彩瞬间</span>
|
||||
</div>
|
||||
<article v-for="item in pageData.list" :key="item.id" class="content-card" @click="openDetail(item)">
|
||||
<div class="content-date">
|
||||
<strong>{{datePart(item.publishedAt, 'DD')}}</strong>
|
||||
{{datePart(item.publishedAt, 'YYYY.MM')}}
|
||||
</div>
|
||||
<div>
|
||||
<div class="content-title">
|
||||
<el-tag v-if="item.isTop === 1" type="danger" size="mini">置顶</el-tag>
|
||||
{{item.title}}
|
||||
</div>
|
||||
<div class="content-summary">{{item.summary || item.subTitle || '点击查看详细内容'}}</div>
|
||||
</div>
|
||||
<div class="content-view"><i class="el-icon-view"></i> {{item.viewCount || 0}}</div>
|
||||
</article>
|
||||
<el-empty v-if="!pageData.list.length && !loading" description="暂无风采内容"></el-empty>
|
||||
<el-pagination v-if="pageData.totalCount > pageData.pageSize" class="wall-pagination"
|
||||
background layout="prev, pager, next" :current-page.sync="pageData.pageNumber"
|
||||
:page-size="pageData.pageSize" :total="pageData.totalCount"
|
||||
@current-change="loadPage"></el-pagination>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button class="back-link" icon="el-icon-back" plain size="small" @click="backToList">返回列表</el-button>
|
||||
<h1 class="detail-title">{{detail.title}}</h1>
|
||||
<div class="detail-meta">
|
||||
{{formatTime(detail.publishedAt || detail.createdAt)}}
|
||||
{{detail.categoryName}} <i class="el-icon-view"></i> {{detail.viewCount || 0}}
|
||||
</div>
|
||||
<img v-if="getCoverUrl(detail.thumbUrl)" class="detail-cover" :src="getCoverUrl(detail.thumbUrl)" :alt="detail.title">
|
||||
<div class="detail-body" v-html="detail.contentBody"></div>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
apiBase: "/platform/spread/display",
|
||||
loading: false,
|
||||
categories: [],
|
||||
sliderItems: [],
|
||||
openParents: [],
|
||||
currentCategory: {},
|
||||
detail: null,
|
||||
pageData: {pageNumber: 1, pageSize: 8, totalCount: 0, list: []}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 加载可见栏目并自动选择第一个末级栏目。
|
||||
loadCategories() {
|
||||
return this.$axios.post(this.apiBase + "/categoryTree").then(resp => {
|
||||
if (resp.code !== 0) return
|
||||
this.categories = resp.data || []
|
||||
const firstParent = this.categories[0]
|
||||
this.openParents = firstParent ? [firstParent.id] : []
|
||||
this.currentCategory = firstParent && firstParent.children && firstParent.children.length
|
||||
? firstParent.children[0] : (firstParent || {})
|
||||
})
|
||||
},
|
||||
// 判断父栏目是否处于展开状态。
|
||||
isParentOpen(parent) {
|
||||
return this.openParents.indexOf(parent.id) !== -1
|
||||
},
|
||||
// 当前栏目属于该父栏目时保持父级高亮。
|
||||
isParentActive(parent) {
|
||||
if (this.currentCategory.id === parent.id) return true
|
||||
return (parent.children || []).some(child => child.id === this.currentCategory.id)
|
||||
},
|
||||
// 点击父栏目时展开或关闭子节点；无子节点时直接查询该栏目。
|
||||
toggleParent(parent) {
|
||||
const children = parent.children || []
|
||||
if (!children.length) {
|
||||
this.selectCategory(parent)
|
||||
return
|
||||
}
|
||||
const index = this.openParents.indexOf(parent.id)
|
||||
if (index === -1) {
|
||||
this.openParents.push(parent.id)
|
||||
} else {
|
||||
this.openParents.splice(index, 1)
|
||||
}
|
||||
},
|
||||
// 加载开启轮播栏目的最新发布内容。
|
||||
loadSlider() {
|
||||
return this.$axios.post(this.apiBase + "/sliderData").then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.sliderItems = this.buildSliderItems(resp.data || [])
|
||||
}
|
||||
})
|
||||
},
|
||||
// 根据当前栏目加载已发布内容。
|
||||
loadPage() {
|
||||
if (!this.currentCategory.id) {
|
||||
this.pageData.list = []
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
this.$axios.post(this.apiBase + "/pageData", {
|
||||
categoryId: this.currentCategory.id,
|
||||
pageNumber: this.pageData.pageNumber,
|
||||
pageSize: this.pageData.pageSize
|
||||
}).then(resp => {
|
||||
if (resp.code === 0) this.pageData = resp.data
|
||||
}).finally(() => this.loading = false)
|
||||
},
|
||||
// 切换栏目时回到第一页和列表状态。
|
||||
selectCategory(category) {
|
||||
this.currentCategory = category
|
||||
this.detail = null
|
||||
this.pageData.pageNumber = 1
|
||||
const parent = this.categories.find(item => (item.children || []).some(child => child.id === category.id))
|
||||
if (parent && !this.isParentOpen(parent)) {
|
||||
this.openParents.push(parent.id)
|
||||
}
|
||||
this.loadPage()
|
||||
},
|
||||
// 根据内容所属栏目同步左侧栏目选中状态，并展开对应父栏目。
|
||||
syncCategorySelection(categoryId) {
|
||||
if (!categoryId) return
|
||||
for (const parent of this.categories) {
|
||||
if (parent.id === categoryId) {
|
||||
this.currentCategory = parent
|
||||
return
|
||||
}
|
||||
const child = (parent.children || []).find(item => item.id === categoryId)
|
||||
if (child) {
|
||||
this.currentCategory = child
|
||||
if (!this.isParentOpen(parent)) this.openParents.push(parent.id)
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
// 从详情返回时，按当前回显栏目重新加载内容列表。
|
||||
backToList() {
|
||||
this.detail = null
|
||||
this.pageData.pageNumber = 1
|
||||
this.loadPage()
|
||||
},
|
||||
// 获取完整详情并登记一次浏览。
|
||||
openDetail(item) {
|
||||
this.loading = true
|
||||
Promise.all([
|
||||
this.$axios.post(this.apiBase + "/detailData", {id: item.id}),
|
||||
this.$axios.post(this.apiBase + "/addView", {id: item.id})
|
||||
]).then(values => {
|
||||
if (values[0].code === 0) {
|
||||
this.detail = values[0].data
|
||||
this.detail.viewCount = Number(this.detail.viewCount || 0) + 1
|
||||
this.syncCategorySelection(this.detail.categoryId || item.categoryId)
|
||||
// 轮播区域较高，打开详情后滚动到正文区域完整展示内容。
|
||||
this.$nextTick(() => {
|
||||
const main = document.querySelector(".spread-main")
|
||||
if (main) main.scrollIntoView({behavior: "smooth", block: "start"})
|
||||
})
|
||||
}
|
||||
}).finally(() => this.loading = false)
|
||||
},
|
||||
// 将上传字段转换为完整图片地址数组。
|
||||
getImageUrls(value) {
|
||||
if (!value) return []
|
||||
let files = value
|
||||
if (typeof value === "string" && value.trim().startsWith("[")) {
|
||||
try {
|
||||
files = JSON.parse(value)
|
||||
} catch (e) {
|
||||
files = []
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(files)) {
|
||||
files = String(files).split(",")
|
||||
}
|
||||
return files.map(file => {
|
||||
if (typeof file === "string") return file.trim()
|
||||
return file && (file.src || file.url || file.data || (file.response && file.response.data)) || ""
|
||||
}).filter(Boolean)
|
||||
},
|
||||
// 从上传字段中取得第一张图片地址。
|
||||
getCoverUrl(value) {
|
||||
const urls = this.getImageUrls(value)
|
||||
return urls.length ? urls[0] : ""
|
||||
},
|
||||
// 将轮播图片解析为图片地址和标题，兼容历史纯地址数组。
|
||||
getSliderEntries(value) {
|
||||
if (!value) return []
|
||||
let items = value
|
||||
if (!Array.isArray(items)) {
|
||||
try {
|
||||
items = JSON.parse(value)
|
||||
} catch (e) {
|
||||
items = String(value).split(",").filter(Boolean)
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(items)) return []
|
||||
return items.map(item => {
|
||||
if (typeof item === "string") return {src: item}
|
||||
return {
|
||||
src: item.src || item.url || item.data || (item.response && item.response.data) || "",
|
||||
title: item.title || ""
|
||||
}
|
||||
}).filter(item => item.src)
|
||||
},
|
||||
// 每篇内容的多张轮播图片分别生成轮播项，图片标题独立，工会名称继承内容。
|
||||
buildSliderItems(contents) {
|
||||
const result = []
|
||||
const source = contents || []
|
||||
source.forEach(item => {
|
||||
let slides = this.getSliderEntries(item.sliderImages)
|
||||
if (!slides.length) {
|
||||
slides = this.getImageUrls(item.thumbUrl).map(url => ({src: url}))
|
||||
}
|
||||
slides.forEach((slide, index) => {
|
||||
result.push(Object.assign({}, item, {
|
||||
title: slide.title || item.title,
|
||||
sliderImage: slide.src,
|
||||
slideKey: item.id + "-" + index
|
||||
}))
|
||||
})
|
||||
})
|
||||
return result
|
||||
},
|
||||
// 格式化列表日期的指定部分。
|
||||
datePart(value, format) {
|
||||
return value ? this.$moment(Number(value)).format(format) : "--"
|
||||
},
|
||||
// 格式化详情发布时间。
|
||||
formatTime(value) {
|
||||
return value ? this.$moment(Number(value)).format("YYYY-MM-DD HH:mm") : ""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
Promise.all([this.loadCategories(), this.loadSlider()]).then(() => this.loadPage())
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,203 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<div id="app" v-cloak>
|
||||
<guava ref="guava">
|
||||
<el-card shadow="never">
|
||||
<search :is-search-button="false">
|
||||
<search-item label="内容标题">
|
||||
<el-input v-model="pageForm.title" clearable placeholder="请输入标题" @keyup.enter.native="doSearch"></el-input>
|
||||
</search-item>
|
||||
<search-item label="所属栏目">
|
||||
<el-cascader v-model="pageForm.categoryId" :options="categoryOptions"
|
||||
:props="{value:'id',label:'name',children:'children',emitPath:false,checkStrictly:true}"
|
||||
clearable filterable style="width: 100%"></el-cascader>
|
||||
</search-item>
|
||||
<search-item label="发布状态">
|
||||
<el-select v-model="pageForm.isPublished" clearable placeholder="请选择">
|
||||
<el-option label="草稿" :value="0"></el-option>
|
||||
<el-option label="已发布" :value="1"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
<search-item label="创建时间">
|
||||
<el-date-picker v-model="pageForm.createTime" type="datetimerange"
|
||||
start-placeholder="开始时间" end-placeholder="结束时间"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"></el-date-picker>
|
||||
</search-item>
|
||||
<div class="search-query">
|
||||
<el-button type="primary" size="medium" icon="el-icon-search" @click="doSearch">搜索</el-button>
|
||||
<el-button size="medium" @click="resetSearch">重置</el-button>
|
||||
</div>
|
||||
</search>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mt10" shadow="never">
|
||||
<table-tool :app="this" label="风采内容列表">
|
||||
<el-button type="primary" size="medium" icon="el-icon-plus" @click="goCreate">发布内容</el-button>
|
||||
</table-tool>
|
||||
<el-table v-loading="tableLoading" :data="tableData" :size="tableSize" border>
|
||||
<el-table-column :index="indexMethod" type="index" label="序号" width="70" align="center"></el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="240" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="categoryName" label="栏目" min-width="180">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{row.categoryName}}</span>
|
||||
<el-tag v-if="categorySliderEnabled(row.categoryId)" type="success" size="mini"
|
||||
effect="plain" style="margin-left: 6px">轮播</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="unionName" label="所属工会" min-width="150" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="isTop" label="置顶" width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.isTop === 1 ? 'success' : 'info'" size="mini">
|
||||
{{row.isTop === 1 ? '置顶' : '未置顶'}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="viewCount" label="浏览量" width="100" align="center"></el-table-column>
|
||||
<el-table-column prop="sortOrder" label="排序" width="90" align="center"></el-table-column>
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.isPublished === 1 ? 'success' : 'info'" size="mini">
|
||||
{{row.isPublished === 1 ? '已发布' : '草稿'}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发布时间" width="170" align="center">
|
||||
<template slot-scope="{row}">{{formatTime(row.publishedAt)}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="270" align="center" fixed="right">
|
||||
<template slot-scope="{row}">
|
||||
<el-button size="mini" type="primary" @click="goEdit(row)">编辑</el-button>
|
||||
<el-button size="mini" :type="row.isPublished === 1 ? 'warning' : 'success'"
|
||||
@click="togglePublish(row)">
|
||||
{{row.isPublished === 1 ? '撤回' : '发布'}}
|
||||
</el-button>
|
||||
<el-button size="mini" type="danger" @click="remove(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--#include("/layouts/pagination.html"){}#-->
|
||||
</el-card>
|
||||
</guava>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
mixins: [initTableMixins],
|
||||
data() {
|
||||
return {
|
||||
apiBase: "/platform/spread/manage",
|
||||
categoryOptions: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 组装分页查询参数，将时间范围拆成后端字段。
|
||||
buildPageParams() {
|
||||
const params = Object.assign({}, this.pageForm)
|
||||
params.beginTime = params.createTime && params.createTime.length ? params.createTime[0] : ""
|
||||
params.endTime = params.createTime && params.createTime.length ? params.createTime[1] : ""
|
||||
delete params.createTime
|
||||
return params
|
||||
},
|
||||
// 加载内容管理分页数据。
|
||||
pageData() {
|
||||
this.tableLoading = true
|
||||
this.$axios.post(this.apiBase + "/pageData", this.buildPageParams()).then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.tableData = resp.data.list || []
|
||||
this.pageForm.totalCount = resp.data.totalCount || 0
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
}).finally(() => this.tableLoading = false)
|
||||
},
|
||||
// 加载可筛选的栏目树。
|
||||
loadCategories() {
|
||||
return this.$axios.post(this.apiBase + "/categoryTree").then(resp => {
|
||||
if (resp.code === 0) this.categoryOptions = resp.data || []
|
||||
})
|
||||
},
|
||||
// 判断内容所属栏目及其全部上级栏目是否都已开启轮播。
|
||||
categorySliderEnabled(categoryId) {
|
||||
const findPath = (nodes, parents) => {
|
||||
for (const node of nodes || []) {
|
||||
const path = parents.concat(node)
|
||||
if (node.id === categoryId) return path
|
||||
const childPath = findPath(node.children, path)
|
||||
if (childPath) return childPath
|
||||
}
|
||||
return null
|
||||
}
|
||||
const categoryPath = findPath(this.categoryOptions, [])
|
||||
return !!categoryPath && categoryPath.every(item => Number(item.slider) === 1)
|
||||
},
|
||||
// 清空筛选条件并重新查询。
|
||||
resetSearch() {
|
||||
this.pageForm.title = ""
|
||||
this.pageForm.categoryId = ""
|
||||
this.pageForm.isPublished = ""
|
||||
this.pageForm.createTime = []
|
||||
this.doSearch()
|
||||
},
|
||||
// 跳转到独立发布页面。
|
||||
goCreate() {
|
||||
this.navigate("/platform/spread/creation")
|
||||
},
|
||||
// 跳转到发布页面并携带编辑 ID。
|
||||
goEdit(row) {
|
||||
this.navigate("/platform/spread/creation?id=" + encodeURIComponent(row.id))
|
||||
},
|
||||
// 兼容 pjax 与普通页面跳转。
|
||||
navigate(url) {
|
||||
if (window.commonUtil && commonUtil.pjaxPush) {
|
||||
commonUtil.pjaxPush(url)
|
||||
} else {
|
||||
window.location.href = url
|
||||
}
|
||||
},
|
||||
// 发布已保存的草稿，或撤回已发布内容。
|
||||
togglePublish(row) {
|
||||
const status = row.isPublished === 1 ? 0 : 1
|
||||
const action = status === 1 ? "发布" : "撤回"
|
||||
this.$confirm("确定" + action + "“" + row.title + "”吗？", "提示", {type: "warning"}).then(() => {
|
||||
this.$axios.post(this.apiBase + "/doPublish", {id: row.id, status}).then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.$message.success(action + "成功")
|
||||
this.pageData()
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 删除内容前进行二次确认。
|
||||
remove(row) {
|
||||
this.$confirm("删除后无法恢复，确定删除该内容吗？", "提示", {type: "warning"}).then(() => {
|
||||
this.$axios.post(this.apiBase + "/doDelete", {id: row.id}).then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.$message.success("删除成功")
|
||||
this.pageData()
|
||||
} else {
|
||||
this.$message.warning(resp.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 将毫秒时间戳格式化为日期时间。
|
||||
formatTime(value) {
|
||||
return value ? this.$moment(Number(value)).format("YYYY-MM-DD HH:mm:ss") : ""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$set(this.pageForm, "title", "")
|
||||
this.$set(this.pageForm, "categoryId", "")
|
||||
this.$set(this.pageForm, "isPublished", "")
|
||||
this.$set(this.pageForm, "createTime", [])
|
||||
this.loadCategories().then(() => this.pageData())
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,252 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<script src="${base!}/assets/platform/plugins/echarts/echarts.min.js" nonce="${cspNonce!}"></script>
|
||||
<style>
|
||||
#sub-app-container-main-content { background: #f4f6f8; }
|
||||
.spread-statistics { width: 100%; }
|
||||
.spread-statistics .filter-card { margin-bottom: 12px; }
|
||||
.spread-statistics .metrics-card { margin-bottom: 18px; border: 0; border-radius: 12px; }
|
||||
.spread-statistics .metrics-card > .el-card__body { padding: 24px; }
|
||||
.spread-statistics .stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
|
||||
.spread-statistics .metric-tile { min-width: 0; min-height: 108px; padding: 20px; display: flex; align-items: center; gap: 16px; box-sizing: border-box; border: 1px solid #e8edf3; border-radius: 13px; background: #fff; box-shadow: 0 3px 14px rgba(15,23,42,.06); transition: transform .25s, box-shadow .25s; }
|
||||
.spread-statistics .metric-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.11); }
|
||||
.spread-statistics .metric-icon { width: 58px; height: 58px; flex: 0 0 58px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 27px; border-radius: 14px; }
|
||||
.spread-statistics .metric-icon.purple { background: linear-gradient(135deg,#667eea,#764ba2); }
|
||||
.spread-statistics .metric-icon.green { background: linear-gradient(135deg,#43e97b,#38f9d7); }
|
||||
.spread-statistics .metric-icon.orange { background: linear-gradient(135deg,#f7971e,#ffd200); }
|
||||
.spread-statistics .metric-icon.blue { background: linear-gradient(135deg,#4facfe,#00d7ef); }
|
||||
.spread-statistics .metric-icon.pink { background: linear-gradient(135deg,#f093fb,#f5576c); }
|
||||
.spread-statistics .metric-info { min-width: 0; }
|
||||
.spread-statistics .stat-label { margin-bottom: 6px; overflow: hidden; color: #8492a6; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.spread-statistics .stat-value { color: #17233d; font-size: 31px; font-weight: 700; line-height: 1; }
|
||||
.spread-statistics .chart-grid { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(0, 2fr); gap: 14px; }
|
||||
.spread-statistics .chart-card { min-width: 0; border: 0; border-radius: 11px; }
|
||||
.spread-statistics .chart-card > .el-card__header { padding: 26px 26px 18px; font-size: 18px; border-bottom: 1px solid #e4e7ed; }
|
||||
.spread-statistics .chart-card > .el-card__body { padding: 8px 24px 18px; }
|
||||
.spread-statistics .chart-box { width: 100%; height: 410px; }
|
||||
.spread-statistics .top-table-card { margin-top: 14px; border: 0; border-radius: 11px; }
|
||||
.spread-statistics .top-table-card > .el-card__header { padding: 20px 24px; font-size: 17px; }
|
||||
@media(max-width: 1199px) { .spread-statistics .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||||
@media(max-width: 980px) { .spread-statistics .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spread-statistics .chart-grid { grid-template-columns: 1fr; } }
|
||||
@media(max-width: 560px) { .spread-statistics .stat-grid { grid-template-columns: 1fr; } .spread-statistics .metrics-card > .el-card__body { padding: 12px; } }
|
||||
</style>
|
||||
<div id="app" class="spread-statistics" v-cloak>
|
||||
<guava ref="guava">
|
||||
<el-card class="filter-card" shadow="never">
|
||||
<search :is-search-button="false">
|
||||
<search-item label="所属栏目">
|
||||
<el-cascader v-model="query.categoryId" :options="categoryOptions"
|
||||
:props="{value:'id',label:'name',children:'children',emitPath:false,checkStrictly:true}"
|
||||
clearable filterable style="width: 100%"></el-cascader>
|
||||
</search-item>
|
||||
<search-item label="发布状态">
|
||||
<el-select v-model="query.isPublished" clearable placeholder="全部">
|
||||
<el-option label="草稿" :value="0"></el-option>
|
||||
<el-option label="已发布" :value="1"></el-option>
|
||||
</el-select>
|
||||
</search-item>
|
||||
<search-item label="创建时间">
|
||||
<el-date-picker v-model="query.createTime" type="datetimerange"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始时间"
|
||||
end-placeholder="结束时间" style="width: 100%"></el-date-picker>
|
||||
</search-item>
|
||||
<div class="search-query">
|
||||
<el-button type="primary" size="medium" icon="el-icon-search" @click="loadAll">查询</el-button>
|
||||
<el-button size="medium" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
</search>
|
||||
</el-card>
|
||||
|
||||
<el-card class="metrics-card" shadow="never" v-loading="loading">
|
||||
<div class="stat-grid">
|
||||
<div class="metric-tile">
|
||||
<div class="metric-icon purple"><i class="el-icon-folder-opened"></i></div>
|
||||
<div class="metric-info"><div class="stat-label">栏目总数</div><div class="stat-value">{{summary.categoryCount || 0}}</div></div>
|
||||
</div>
|
||||
<div class="metric-tile">
|
||||
<div class="metric-icon purple"><i class="el-icon-document"></i></div>
|
||||
<div class="metric-info"><div class="stat-label">内容总数</div><div class="stat-value">{{summary.contentCount || 0}}</div></div>
|
||||
</div>
|
||||
<div class="metric-tile">
|
||||
<div class="metric-icon green"><i class="el-icon-circle-check"></i></div>
|
||||
<div class="metric-info"><div class="stat-label">已发布</div><div class="stat-value">{{summary.publishedCount || 0}}</div></div>
|
||||
</div>
|
||||
<div class="metric-tile">
|
||||
<div class="metric-icon orange"><i class="el-icon-time"></i></div>
|
||||
<div class="metric-info"><div class="stat-label">未发布</div><div class="stat-value">{{unpublishedCount}}</div></div>
|
||||
</div>
|
||||
<div class="metric-tile">
|
||||
<div class="metric-icon blue"><i class="el-icon-view"></i></div>
|
||||
<div class="metric-info"><div class="stat-label">总访问量</div><div class="stat-value">{{summary.viewCount || 0}}</div></div>
|
||||
</div>
|
||||
<div class="metric-tile">
|
||||
<div class="metric-icon pink"><i class="el-icon-data-line"></i></div>
|
||||
<div class="metric-info"><div class="stat-label">平均访问量</div><div class="stat-value">{{summary.avgViewCount || 0}}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div class="chart-grid">
|
||||
<el-card class="chart-card" shadow="never">
|
||||
<div slot="header"><b>栏目访问量占比</b></div>
|
||||
<div ref="categoryChart" class="chart-box"></div>
|
||||
</el-card>
|
||||
<el-card class="chart-card" shadow="never">
|
||||
<div slot="header"><b>新闻内容访问量 Top10</b></div>
|
||||
<div ref="topChart" class="chart-box"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-card class="top-table-card" shadow="never" v-loading="loading">
|
||||
<div slot="header"><b>新闻内容访问量 Top10</b></div>
|
||||
<el-table :data="topData" stripe border style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
|
||||
<el-table-column prop="categoryName" label="栏目" min-width="120" align="center"></el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="260" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="summary" label="摘要" min-width="260" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="unionName" label="所属工会" min-width="150" show-overflow-tooltip align="center"></el-table-column>
|
||||
<el-table-column label="发布时间" width="170" align="center">
|
||||
<template slot-scope="{row}">{{formatTime(row.publishedAt)}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="viewCount" label="访问量" width="100" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</guava>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
apiBase: "/platform/spread/statistics",
|
||||
loading: false,
|
||||
query: {categoryId: "", isPublished: "", createTime: []},
|
||||
categoryOptions: [],
|
||||
summary: {},
|
||||
topData: [],
|
||||
categoryData: [],
|
||||
topChart: null,
|
||||
categoryChart: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 未发布数量由内容总数减去已发布数量得到。
|
||||
unpublishedCount() {
|
||||
return Math.max(Number(this.summary.contentCount || 0) - Number(this.summary.publishedCount || 0), 0)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 将时间范围拆分成统计接口参数。
|
||||
buildParams() {
|
||||
return {
|
||||
categoryId: this.query.categoryId,
|
||||
isPublished: this.query.isPublished,
|
||||
beginTime: this.query.createTime && this.query.createTime.length ? this.query.createTime[0] : "",
|
||||
endTime: this.query.createTime && this.query.createTime.length ? this.query.createTime[1] : ""
|
||||
}
|
||||
},
|
||||
// 加载栏目筛选树。
|
||||
loadCategories() {
|
||||
return this.$axios.post(this.apiBase + "/categoryTree").then(resp => {
|
||||
if (resp.code === 0) this.categoryOptions = resp.data || []
|
||||
})
|
||||
},
|
||||
// 并行加载卡片、排行和栏目统计，减少页面等待时间。
|
||||
loadAll() {
|
||||
this.loading = true
|
||||
const params = this.buildParams()
|
||||
Promise.all([
|
||||
this.$axios.post(this.apiBase + "/summary", params),
|
||||
this.$axios.post(this.apiBase + "/top10", params),
|
||||
this.$axios.post(this.apiBase + "/categoryData", params)
|
||||
]).then(values => {
|
||||
this.summary = values[0].code === 0 ? (values[0].data || {}) : {}
|
||||
this.topData = values[1].code === 0 ? (values[1].data || []) : []
|
||||
this.categoryData = values[2].code === 0 ? (values[2].data || []) : []
|
||||
this.$nextTick(this.renderCharts)
|
||||
}).finally(() => this.loading = false)
|
||||
},
|
||||
// 清空筛选并重新统计。
|
||||
resetQuery() {
|
||||
this.query = {categoryId: "", isPublished: "", createTime: []}
|
||||
this.loadAll()
|
||||
},
|
||||
// 创建或刷新两个统计图表。
|
||||
renderCharts() {
|
||||
if (!window.echarts) return
|
||||
if (!this.topChart) this.topChart = echarts.init(this.$refs.topChart)
|
||||
if (!this.categoryChart) this.categoryChart = echarts.init(this.$refs.categoryChart)
|
||||
this.topChart.setOption({
|
||||
color: ["#5b8ff9"],
|
||||
tooltip: {trigger: "axis", axisPointer: {type: "shadow"}},
|
||||
grid: {left: 58, right: 28, top: 42, bottom: 82},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.topData.map(item => item.title),
|
||||
axisTick: {show: false},
|
||||
axisLine: {lineStyle: {color: "#cfd5df"}},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 24,
|
||||
color: "#606266",
|
||||
formatter: value => value.length > 12 ? value.slice(0, 12) + "…" : value
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
minInterval: 1,
|
||||
axisLine: {show: false},
|
||||
axisTick: {show: false},
|
||||
splitLine: {lineStyle: {color: "#dfe3e8", type: "dashed"}}
|
||||
},
|
||||
series: [{
|
||||
type: "bar",
|
||||
barMaxWidth: 44,
|
||||
itemStyle: {color: "#5b8ff9"},
|
||||
data: this.topData.map(item => item.viewCount || 0)
|
||||
}]
|
||||
}, true)
|
||||
this.categoryChart.setOption({
|
||||
color: ["#5b8ff9", "#5ad8a6", "#6f86ad", "#f6bd16", "#e8684a", "#9270ca"],
|
||||
tooltip: {trigger: "item", formatter: "{b}<br/>访问量：{c}<br/>占比：{d}%"},
|
||||
series: [{
|
||||
type: "pie",
|
||||
radius: ["35%", "64%"],
|
||||
center: ["50%", "56%"],
|
||||
avoidLabelOverlap: true,
|
||||
itemStyle: {borderColor: "#fff", borderWidth: 3, borderRadius: 10},
|
||||
label: {color: "#303133", formatter: "{b}: {d}%"},
|
||||
labelLine: {length: 16, length2: 18},
|
||||
data: this.categoryData.map(item => ({name: item.categoryName, value: item.viewCount || 0}))
|
||||
}]
|
||||
}, true)
|
||||
},
|
||||
// 格式化 Top10 表格的发布时间。
|
||||
formatTime(value) {
|
||||
return value ? this.$moment(Number(value)).format("YYYY-MM-DD HH:mm:ss") : ""
|
||||
},
|
||||
// 浏览器尺寸变化时重算图表尺寸。
|
||||
resizeCharts() {
|
||||
if (this.topChart) this.topChart.resize()
|
||||
if (this.categoryChart) this.categoryChart.resize()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("resize", this.resizeCharts)
|
||||
// 图表容器挂载完成后自动执行首次查询，避免必须点击“查询”才显示数据。
|
||||
this.$nextTick(() => {
|
||||
this.loadCategories().then(() => this.loadAll())
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener("resize", this.resizeCharts)
|
||||
if (this.topChart) this.topChart.dispose()
|
||||
if (this.categoryChart) this.categoryChart.dispose()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -3,79 +3,448 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.list-card {
|
||||
border-radius: 0;
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.list-card-body {
|
||||
/* width: calc(100% - 140px);
|
||||
display: flex;*/
|
||||
width: calc(100% - 140px);
|
||||
.culture-activity-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.culture-activity-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.culture-activity-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.culture-activity-page .van-nav-bar .van-icon,
|
||||
.culture-activity-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.culture-activity-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.culture-activity-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background-color: #247fe8;
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.culture-activity-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.culture-activity-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 64%;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
|
||||
}
|
||||
|
||||
.culture-activity-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
|
||||
}
|
||||
|
||||
.culture-activity-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.culture-activity-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .culture-activity-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.culture-activity-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.culture-activity-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.culture-activity-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.culture-activity-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.culture-activity-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.culture-activity-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__item {
|
||||
min-width: 0;
|
||||
flex: 1 1 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__item:last-child {
|
||||
flex-grow: 1.35;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__title {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0 15px 0 4px;
|
||||
overflow: hidden;
|
||||
color: #66758a;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__title::after {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__title--active,
|
||||
.culture-activity-filter .van-dropdown-item__option--active,
|
||||
.culture-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.culture-activity-filter .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.culture-activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.list-card-body .title {
|
||||
.culture-activity-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.culture-activity-card__cover,
|
||||
.culture-activity-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.culture-activity-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.culture-activity-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.culture-activity-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.culture-activity-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.culture-activity-card__body {
|
||||
padding: 12px 38px 14px 14px;
|
||||
}
|
||||
|
||||
.culture-activity-card__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.culture-activity-card__time {
|
||||
margin-top: 4px;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.culture-activity-card__meta {
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.culture-activity-card__address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: #69788d;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.culture-activity-card__address .van-icon {
|
||||
margin: 2px 5px 0 0;
|
||||
flex: none;
|
||||
color: #6c9ff8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.culture-activity-card__address span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-card-body .time {
|
||||
color: #9a9696;
|
||||
line-height: 20px;
|
||||
.culture-activity-card__tags {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.list-card-body .footer {
|
||||
text-align: right;
|
||||
.culture-activity-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.list-card-body .footer .tag {
|
||||
border: 1px solid transparent;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
.culture-activity-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
.list-card-img img{
|
||||
width: 100%;
|
||||
|
||||
.culture-activity-card__arrow {
|
||||
position: absolute;
|
||||
top: 164px;
|
||||
right: 14px;
|
||||
color: #b4bdca;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.culture-activity-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.culture-activity-empty img {
|
||||
display: block;
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
border-radius: 12px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.culture-activity-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.culture-activity-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.culture-activity-page .van-list__finished-text,
|
||||
.culture-activity-page .van-list__loading {
|
||||
color: #9aa7b8;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="活动列表" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item :options="stateList" @change="doSearch" v-model="pageForm.state"></van-dropdown-item>
|
||||
<van-dropdown-item :options="isEnrolledOptions" @change="doSearch" v-model="pageForm.isEnrolled"></van-dropdown-item>
|
||||
<van-dropdown-item :options="activityTypeOptions" @change="doSearch" v-model="pageForm.activity_type"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<table-list api="/platform/activity/culture/applyUser/pageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="name"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="报名开始时间">
|
||||
{{$moment(row.startTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="报名结束时间">
|
||||
{{$moment(row.endTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<template v-if="$moment().isBefore($moment(row.endTime))">
|
||||
<div class="action-btn" @click="openDetail(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>去报名</span>
|
||||
<div class="culture-activity-page">
|
||||
<van-nav-bar title="文化活动" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
|
||||
<div class="culture-activity-content">
|
||||
<section class="culture-activity-hero">
|
||||
<img class="culture-activity-hero__image" src="/assets/mobile/img/activity/hero/culture-hero-v3.png" alt="文化活动插画">
|
||||
<div class="culture-activity-hero__copy">
|
||||
<div class="culture-activity-hero__title">文化活动</div>
|
||||
<div class="culture-activity-hero__subtitle">丰富生活 · 乐享校园</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</table-list>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="culture-activity-sticky">
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
class="culture-activity-search"
|
||||
placeholder="搜索文化活动"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu class="culture-activity-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item :options="stateList" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.state"></van-dropdown-item>
|
||||
<van-dropdown-item :options="isEnrolledOptions" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.isEnrolled"></van-dropdown-item>
|
||||
<van-dropdown-item :options="activityTypeOptions" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.activity_type"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model="loading" :finished="finished" @load="onLoad">
|
||||
<div class="culture-activity-list">
|
||||
<div v-for="row in tableData" :key="row.id" class="culture-activity-card" @click="openDetail(row)">
|
||||
<img
|
||||
v-if="hasCover(row) && !imageLoadErrors[row.id]"
|
||||
class="culture-activity-card__cover"
|
||||
:src="row.cover"
|
||||
:alt="row.name"
|
||||
@error="handleImageError(row)"
|
||||
>
|
||||
<div v-else class="culture-activity-card__cover-state" :class="{'is-error': hasCover(row)}">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="culture-activity-card__body">
|
||||
<div class="culture-activity-card__title">{{ row.name }}</div>
|
||||
<div class="culture-activity-card__time" v-if="row.applyStartTime && row.applyEndTime">
|
||||
报名时间：{{ $moment(row.applyStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.applyEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="culture-activity-card__time" v-if="row.startTime && row.endTime">
|
||||
活动时间：{{ $moment(row.startTime).format('MM/DD HH:mm') }}~{{ $moment(row.endTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="culture-activity-card__meta" v-if="row.address || row.projectTypeName || formatSignUpMethod(row.signUpMethod)">
|
||||
<div class="culture-activity-card__address" v-if="row.address">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
<span>{{ row.address }}</span>
|
||||
</div>
|
||||
<div class="culture-activity-card__tags" v-if="row.projectTypeName || formatSignUpMethod(row.signUpMethod)">
|
||||
<span class="culture-activity-card__tag" v-if="row.projectTypeName">
|
||||
<span class="culture-activity-card__tag-label">活动类型</span>{{ row.projectTypeName }}
|
||||
</span>
|
||||
<span class="culture-activity-card__tag" v-if="formatSignUpMethod(row.signUpMethod)">
|
||||
<span class="culture-activity-card__tag-label">报名方式</span>{{ formatSignUpMethod(row.signUpMethod) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-icon class="culture-activity-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="!loading && tableData.length === 0" class="culture-activity-empty">
|
||||
<img src="/assets/mobile/img/activity/culture-empty.png" alt="文化活动空状态插画">
|
||||
<div class="culture-activity-empty__title">暂无文化活动</div>
|
||||
<div class="culture-activity-empty__hint">当前筛选条件下暂时没有可展示的活动</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-popup :style="{ height: '100%',width: '100%'}" position="right" v-model="viewShow">
|
||||
<mobile-culture-apply-user :id="viewData.id" @back="back" @submit_back="submit_back" ref="viewInfo"></mobile-culture-apply-user>
|
||||
@@ -92,10 +461,14 @@ layout("/layouts/platform_h5.html"){
|
||||
finished: false,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
searchKeyword: "",
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
state: 2,
|
||||
isEnrolled: 0,
|
||||
year: new Date().getFullYear(),
|
||||
name: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0,
|
||||
@@ -128,6 +501,47 @@ layout("/layouts/platform_h5.html"){
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
},
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
formatSignUpMethod(value) {
|
||||
return {
|
||||
1: "个人报名",
|
||||
2: "组队报名",
|
||||
3: "分工会报名"
|
||||
}[Number(value)] || ""
|
||||
},
|
||||
onLoad() {
|
||||
if (!this.finished) this.loadActivities(false)
|
||||
},
|
||||
onRefresh() {
|
||||
this.loadActivities(true)
|
||||
},
|
||||
loadActivities(reset) {
|
||||
if (reset) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.imageLoadErrors = {}
|
||||
}
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/activity/culture/applyUser/pageData", this.pageForm).then((res) => {
|
||||
if (res.code === 0) {
|
||||
const list = res.data && res.data.list ? res.data.list : []
|
||||
this.tableData = this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0
|
||||
this.finished = this.tableData.length >= this.pageForm.totalCount
|
||||
if (!this.finished) this.pageForm.pageNumber++
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
|
||||
openDetail(row) {
|
||||
this.$axios.post('/platform/activity/basic/scope/getScopeUser',{activityGroupId:row.groupId}).then(res=>{
|
||||
@@ -216,11 +630,8 @@ layout("/layouts/platform_h5.html"){
|
||||
.catch(() => {})
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
this.pageForm.name = this.searchKeyword.trim()
|
||||
this.loadActivities(true)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -3,44 +3,182 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.title {
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
background: #ffffff;
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.culture-detail-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(78px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.culture-detail-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.culture-detail-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.culture-detail-page .van-nav-bar .van-icon,
|
||||
.culture-detail-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.culture-detail-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.culture-detail-overview,
|
||||
.notice,
|
||||
.block,
|
||||
.form-create-h5 {
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.culture-detail-cover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.culture-detail-cover img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.culture-detail-cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.culture-detail-cover-state .van-icon {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.culture-detail-summary {
|
||||
padding: 15px 14px 14px;
|
||||
}
|
||||
|
||||
.culture-detail-title {
|
||||
color: #23344a;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.culture-detail-tags {
|
||||
display: flex;
|
||||
margin-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.culture-detail-tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 9px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.culture-detail-info {
|
||||
margin-top: 13px;
|
||||
padding-top: 3px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
min-height: 46px;
|
||||
padding: 10px 0;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.info-item__icon {
|
||||
display: flex;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 10px;
|
||||
flex: 0 0 28px;
|
||||
align-items: center;
|
||||
padding: 20px 15px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
column-gap: 10px;
|
||||
background: #ffffff;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
color: #4389e8;
|
||||
background-color: #edf5ff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-item__content {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-item__label {
|
||||
color: #8b98aa;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.info-item__value {
|
||||
margin-top: 2px;
|
||||
color: #34445a;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.left-tag-title::before {
|
||||
content: "";
|
||||
width: 5px;
|
||||
background: var(--color-primary);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
top: 3px;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.users {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #e8e0e0;
|
||||
padding: 14px;
|
||||
margin-top: 12px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.users-title {
|
||||
font-size: 1.1em;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-left: 11px;
|
||||
color: #263548;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.users-content {
|
||||
@@ -64,60 +202,133 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #e8e0e0;
|
||||
background: #ffffff;
|
||||
padding: 15px 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid #e8e0e0;
|
||||
background: #ffffff;
|
||||
margin-top: 12px;
|
||||
padding: 15px 14px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
font-size: 1.1em;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding: 0 0 10px 11px;
|
||||
border-bottom: 1px solid #edf1f6;
|
||||
color: #263548;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
padding: 10px;
|
||||
padding: 10px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.notice-content,
|
||||
.notice-content div,
|
||||
.notice-content p,
|
||||
.notice-content span,
|
||||
.notice-content li {
|
||||
color: #3f4c5e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.notice-content h1,
|
||||
.notice-content h2,
|
||||
.notice-content h3,
|
||||
.notice-content h4,
|
||||
.notice-content h5,
|
||||
.notice-content h6 {
|
||||
margin: 16px 0 10px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 19px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.notice-content > :first-child,
|
||||
.notice-content > rich-text > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.notice-content p {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.notice-content img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.notice-content table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
background: #ffffff;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
min-height: 64px;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #e8eef6;
|
||||
background: rgba(255, 255, 255, .97);
|
||||
box-shadow: 0 -6px 18px rgba(36, 65, 102, .08);
|
||||
}
|
||||
|
||||
.footer .bottom-button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
height: 46px;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgb(255, 255, 255);
|
||||
height: 100%;
|
||||
border-radius: 23px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .2);
|
||||
}
|
||||
|
||||
.footer .bottom-button.is-primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.footer .bottom-button.is-danger {
|
||||
color: #fff;
|
||||
border: 1px solid #ee5a5a;
|
||||
background-color: #ee5a5a;
|
||||
box-shadow: 0 6px 16px rgba(238, 90, 90, .2);
|
||||
}
|
||||
|
||||
.footer .bottom-button.is-disabled {
|
||||
color: #8b98aa;
|
||||
background-color: #eef2f7;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.form-create-h5 {
|
||||
background-color: #ffffff;
|
||||
margin-top: 10px;
|
||||
padding: 10px 10px 56px 10px;
|
||||
margin-top: 12px;
|
||||
padding: 15px 14px;
|
||||
}
|
||||
|
||||
.form-create-h5 .el-form {
|
||||
@@ -159,58 +370,139 @@ layout("/layouts/platform_h5.html"){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.block .el-select {
|
||||
width: calc(100% - 88px);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.block > .el-button,
|
||||
.block > div > .el-button {
|
||||
margin-top: 12px;
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.block .el-input__inner {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.block .el-table {
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
color: #566579;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.block .text-primary {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: #7b8ba1;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" placeholder fixed left-arrow left-text="返回" placeholder
|
||||
title="活动详情"></van-nav-bar>
|
||||
<div class="culture-detail-page">
|
||||
<van-nav-bar @click-left="historyBack" fixed left-arrow left-text="返回" placeholder title="活动详情"></van-nav-bar>
|
||||
|
||||
<div style="background: #ededed; padding-bottom: 56px">
|
||||
<van-image :src="viewData.cover"></van-image>
|
||||
<div class="title">{{viewData.name}}</div>
|
||||
<div class="info">
|
||||
<main class="culture-detail-content">
|
||||
<section class="culture-detail-overview">
|
||||
<van-image class="culture-detail-cover" :src="viewData.cover" fit="cover">
|
||||
<template #loading>
|
||||
<div class="culture-detail-cover-state">
|
||||
<van-loading type="spinner" color="#1989fa"></van-loading>
|
||||
<span>图片加载中</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="culture-detail-cover-state">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ viewData.cover ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-image>
|
||||
<div class="culture-detail-summary">
|
||||
<div class="culture-detail-title">{{viewData.name}}</div>
|
||||
<div class="culture-detail-tags">
|
||||
<span class="culture-detail-tag" v-if="viewData.projectTypeName">{{viewData.projectTypeName}}</span>
|
||||
<span class="culture-detail-tag" v-if="viewData.signUpMethod===1">个人报名</span>
|
||||
<span class="culture-detail-tag" v-else-if="viewData.signUpMethod===2">组队报名</span>
|
||||
<span class="culture-detail-tag" v-else-if="viewData.signUpMethod===3">分工会报名</span>
|
||||
</div>
|
||||
<div class="culture-detail-info">
|
||||
<div class="info-item">
|
||||
<van-icon name="underway-o"></van-icon>
|
||||
<div>{{viewData.startTime}}至{{viewData.endTime}}</div>
|
||||
<div class="info-item__icon"><van-icon name="underway-o"></van-icon></div>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">活动时间</div>
|
||||
<div class="info-item__value">
|
||||
{{viewData.startTime ? $moment(viewData.startTime).format('YYYY-MM-DD HH:mm') : '待定'}}
|
||||
至
|
||||
{{viewData.endTime ? $moment(viewData.endTime).format('YYYY-MM-DD HH:mm') : '待定'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item" v-if="viewData.applyStartTime || viewData.applyEndTime">
|
||||
<div class="info-item__icon"><van-icon name="clock-o"></van-icon></div>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">报名时间</div>
|
||||
<div class="info-item__value">
|
||||
{{viewData.applyStartTime ? $moment(viewData.applyStartTime).format('YYYY-MM-DD HH:mm') : '待定'}}
|
||||
至
|
||||
{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('YYYY-MM-DD HH:mm') : '待定'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
<div>{{viewData.address}}</div>
|
||||
<div class="info-item__icon"><van-icon name="location-o"></van-icon></div>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">活动地点</div>
|
||||
<div class="info-item__value">{{viewData.address || '待定'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item" v-if="viewData.userNumberLimit===1">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
活动限制人数
|
||||
<span>{{viewData.totalUserNumberLimit}}人</span>
|
||||
<div class="info-item__icon"><van-icon name="friends-o"></van-icon></div>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">活动限制人数</div>
|
||||
<div class="info-item__value">{{viewData.totalUserNumberLimit}}人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item" v-if="viewData.userNumberLimit===2">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
本工会限制名额
|
||||
<span>{{viewData.unionLimitNum}}人</span>
|
||||
<div class="info-item__icon"><van-icon name="friends-o"></van-icon></div>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">本工会限制名额</div>
|
||||
<div class="info-item__value">{{viewData.unionLimitNum}}人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
报名方式：
|
||||
<span v-if="viewData.signUpMethod===1" style="color: var(--color-primary)">个人报名</span>
|
||||
<span v-if="viewData.signUpMethod===2" style="color: var(--color-primary)">组队报名</span>
|
||||
<span v-if="viewData.signUpMethod===3" style="color: var(--color-primary)">分工会报名</span>
|
||||
<div class="info-item__icon"><van-icon name="records"></van-icon></div>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">报名方式</div>
|
||||
<div class="info-item__value">
|
||||
<span v-if="viewData.signUpMethod===1">个人报名</span>
|
||||
<span v-else-if="viewData.signUpMethod===2">组队报名</span>
|
||||
<span v-else-if="viewData.signUpMethod===3">分工会报名</span>
|
||||
<span v-else>无需报名</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item" v-if="viewData.signUpMethod==3">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
组队人数：
|
||||
<span style="color: var(--color-primary)">{{viewData.teamNum}}</span>
|
||||
人
|
||||
<div class="info-item__icon"><van-icon name="cluster-o"></van-icon></div>
|
||||
<div class="info-item__content">
|
||||
<div class="info-item__label">组队人数</div>
|
||||
<div class="info-item__value">{{viewData.teamNum}}人</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="info-item" v-if="viewData.signUpMethod==1">-->
|
||||
<!-- <van-icon name="location-o"></van-icon>-->
|
||||
<!-- 报名人数：-->
|
||||
<!-- <span style="color: var(--color-primary)">2</span>-->
|
||||
<!-- 人-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="notice">
|
||||
<div class="notice-title left-tag-title">活动详情</div>
|
||||
<rich-text :value="viewData.activityContent" :height="300"></rich-text>
|
||||
<div class="notice-content">
|
||||
<rich-text :value="viewData.activityContent" :height="300"></rich-text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人报名 啥也不要-->
|
||||
@@ -327,27 +619,31 @@ layout("/layouts/platform_h5.html"){
|
||||
<form-create :value.sync="dynamicFormData" v-model="fapi" :rule="formCreateRule"
|
||||
:option="formCreateOption"></form-create>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="footer">
|
||||
<div class="bottom-button" style="background: var(--color-primary)" v-if="!isSignUp && inApplyTime"
|
||||
@click="onConfirm">
|
||||
<span>立即报名</span>
|
||||
<span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
|
||||
<div class="footer">
|
||||
<div class="bottom-button is-primary" v-if="!isSignUp && inApplyTime" @click="onConfirm">
|
||||
<span>立即报名</span>
|
||||
<span>{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('MM-DD HH:mm') : ''}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button is-primary" v-if="isSignUp && inApplyTime" @click="onConfirmAgain">
|
||||
<span>重新提交</span>
|
||||
<span>{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('MM-DD HH:mm') : ''}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button is-danger" v-if="isSignUp && inApplyTime" @click="onCancel">
|
||||
<span>取消报名</span>
|
||||
<span>{{viewData.applyEndTime ? $moment(viewData.applyEndTime).format('MM-DD HH:mm') : ''}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button is-disabled"
|
||||
v-if="viewData.applyEndTime && $moment(viewData.applyEndTime).valueOf() < $moment().valueOf() && $moment(viewData.endTime).valueOf() >= $moment().valueOf()">
|
||||
已过报名时间
|
||||
</div>
|
||||
|
||||
<div class="bottom-button is-disabled" v-if="$moment(viewData.endTime).valueOf() < $moment().valueOf()">活动已结束</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button" style="background: var(--color-primary)" v-if="isSignUp && inApplyTime"
|
||||
@click="onConfirmAgain">
|
||||
<span>重新提交</span>
|
||||
<span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button" style="background: red" v-if="isSignUp && inApplyTime" @click="onCancel">
|
||||
<span>取消报名</span>
|
||||
<span style="font-size: 12px; margin-top: 5px">{{viewData.applyEndTime}}截止报名</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-button" v-if="$moment(viewData.endTime).valueOf() < $moment().valueOf()">活动已结束</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,112 +2,572 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
.info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.info-container {
|
||||
margin-bottom: 60px;
|
||||
|
||||
.family-activity-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.family-activity-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
.info-img {
|
||||
display: block;
|
||||
|
||||
.family-activity-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-count-down {
|
||||
|
||||
.family-activity-page .van-nav-bar .van-icon,
|
||||
.family-activity-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.family-activity-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.family-activity-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background-color: #247fe8;
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
.item-header .van-tag {
|
||||
|
||||
.family-activity-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: left center;
|
||||
}
|
||||
|
||||
.family-activity-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 64%;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
|
||||
}
|
||||
|
||||
.family-activity-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
|
||||
}
|
||||
|
||||
.family-activity-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.family-activity-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .family-activity-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-activity-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.family-activity-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.family-activity-filter {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.family-activity-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.family-activity-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.family-activity-filter .van-dropdown-menu__title {
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.family-activity-filter .van-dropdown-menu__title--active,
|
||||
.family-activity-filter .van-dropdown-item__option--active,
|
||||
.family-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.family-activity-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-activity-list .table-list-container {
|
||||
display: flex;
|
||||
margin-top: 0 !important;
|
||||
padding: 0 !important;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.family-activity-list .table-list-item {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
border: 0 !important;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.family-activity-list .table-list-item .item-header {
|
||||
display: block !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.family-activity-list .table-list-item .item-actions:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.family-activity-card__cover,
|
||||
.family-activity-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.family-activity-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.family-activity-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.family-activity-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.family-activity-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.family-activity-card__body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 12px 38px 14px 14px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.family-activity-card__title {
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.family-activity-card__time {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 6px;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.family-activity-card__meta {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.family-activity-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.family-activity-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.family-activity-card__arrow {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 14px;
|
||||
color: #b4bdca;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.family-activity-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-activity-empty img {
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.family-activity-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.family-activity-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.family-intro-popup,
|
||||
.family-intro-page {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-intro-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.family-intro-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-intro-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-intro-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.family-intro-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.family-intro-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.family-intro-card {
|
||||
margin-top: 12px;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.family-intro-card .content {
|
||||
padding: 0 !important;
|
||||
color: #3f4c5e !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.family-intro-card .content div,
|
||||
.family-intro-card .content p,
|
||||
.family-intro-card .content span,
|
||||
.family-intro-card .content li {
|
||||
color: #3f4c5e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
white-space: normal !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.family-intro-card .content h1,
|
||||
.family-intro-card .content h2,
|
||||
.family-intro-card .content h3,
|
||||
.family-intro-card .content h4 {
|
||||
margin: 16px 0 9px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 18px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.family-intro-card .content > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.family-intro-card .content p {
|
||||
margin: 0 0 8px !important;
|
||||
}
|
||||
|
||||
.family-intro-card .content ul,
|
||||
.family-intro-card .content ol {
|
||||
margin: 8px 0 !important;
|
||||
padding-left: 22px !important;
|
||||
}
|
||||
|
||||
.family-intro-card .content img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
margin: 8px auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.family-intro-card .content table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.family-intro-empty {
|
||||
display: flex;
|
||||
min-height: 180px;
|
||||
margin-top: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
border-radius: 12px;
|
||||
color: #9aa7b8;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.family-intro-empty .van-icon {
|
||||
color: #83b5f4;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.family-intro-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-intro-footer .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
font-size: 15px;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
|
||||
.family-intro-footer .van-button--disabled {
|
||||
color: #8b98aa !important;
|
||||
background-color: #eef2f7 !important;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.family-intro-footer .van-count-down {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="亲子活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<div id="app" v-cloak>
|
||||
<div class="family-activity-page">
|
||||
<van-nav-bar title="亲子活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/family/apply/activityPageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template #header="{index,row}">
|
||||
<div class="item-header">
|
||||
<div class="item-title">{{ row.activityName }}</div>
|
||||
<div>
|
||||
<van-tag type="primary" v-if="$moment().isBefore($moment(row.activitySignUpStartTime))">
|
||||
即将开始
|
||||
</van-tag>
|
||||
<van-tag type="success" v-if="$moment().isAfter($moment(row.activitySignUpStartTime)) && $moment().isBefore($moment(row.activitySignUpEndTime))">
|
||||
进行中
|
||||
</van-tag>
|
||||
<van-tag class="grey" v-if="$moment().isAfter($moment(row.activitySignUpEndTime))">
|
||||
已结束
|
||||
</van-tag>
|
||||
<div class="family-activity-content">
|
||||
<section class="family-activity-hero">
|
||||
<img class="family-activity-hero__image" src="/assets/mobile/img/activity/hero/family-hero-v3.png" alt="亲子活动插画">
|
||||
<div class="family-activity-hero__copy">
|
||||
<div class="family-activity-hero__title">亲子活动</div>
|
||||
<div class="family-activity-hero__subtitle">温馨陪伴 · 快乐成长</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="family-activity-sticky">
|
||||
<van-search v-model="pageForm.searchKeyword" class="family-activity-search" placeholder="搜索亲子活动"
|
||||
shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
|
||||
<van-dropdown-menu class="family-activity-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<table-list class="family-activity-list" api="/platform/family/apply/activityPageData"
|
||||
:page_form.sync="pageForm" ref="tableListRef" @ready="onReady">
|
||||
<template #empty>
|
||||
<div class="family-activity-empty">
|
||||
<img src="/assets/mobile/img/activity/family-empty.png" alt="亲子活动空状态插画">
|
||||
<div class="family-activity-empty__title">暂无亲子活动</div>
|
||||
<div class="family-activity-empty__hint">当前筛选条件下暂时没有可展示的活动</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #header="{index,row}">
|
||||
<img v-if="hasCover(row) && !imageLoadErrors[row.id]" class="family-activity-card__cover"
|
||||
:src="row.cover" :alt="row.activityName" @error="handleImageError(row)" @click="onView(row)">
|
||||
<div v-else class="family-activity-card__cover-state" :class="{'is-error': hasCover(row)}" @click="onView(row)">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="面向对象">{{row.activityGroupName}}</table-column>
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<template v-if="$moment().isBefore($moment(row.activitySignUpEndTime))">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看介绍</span>
|
||||
<div class="family-activity-card__body" @click="onView(row)">
|
||||
<div class="family-activity-card__title">{{ row.activityName }}</div>
|
||||
<div class="family-activity-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
|
||||
报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>去报名</span>
|
||||
<div class="family-activity-card__time" v-if="row.activityStartTime && row.activityEndTime">
|
||||
活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="family-activity-card__meta" v-if="row.activityGroupName || row.trainType">
|
||||
<span class="family-activity-card__tag" v-if="row.activityGroupName"><span class="family-activity-card__tag-label">面向对象</span>{{row.activityGroupName}}</span>
|
||||
<span class="family-activity-card__tag" v-if="row.trainType"><span class="family-activity-card__tag-label">活动类型</span>{{row.trainType}}</span>
|
||||
</div>
|
||||
<van-icon class="family-activity-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
|
||||
|
||||
<div class="info-container">
|
||||
<div>
|
||||
<van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
|
||||
<div class="info-title">{{infoRow.activityName}}</div>
|
||||
<pdf-preview :content="infoRow.introduce"></pdf-preview>
|
||||
<van-popup class="family-intro-popup" :style="{height: '100%', width: '100%'}" position="right" safe-area-inset-bottom v-model="infoVisible">
|
||||
<div class="family-intro-page">
|
||||
<van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
|
||||
<div class="family-intro-scroll">
|
||||
<div class="family-intro-hero">
|
||||
<div class="family-intro-hero__icon"><van-icon name="description"></van-icon></div>
|
||||
<div>
|
||||
<div class="family-intro-hero__title">亲子活动报名须知</div>
|
||||
<div class="family-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="family-intro-card" v-if="infoRow.introduce">
|
||||
<pdf-preview :content="infoRow.introduce"></pdf-preview>
|
||||
</div>
|
||||
<div v-else class="family-intro-empty">
|
||||
<van-icon name="description"></van-icon>
|
||||
<span>暂无活动介绍</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<van-button @click="onApply(infoRow)" type="primary" block>
|
||||
<span v-if="time >= 0">
|
||||
去报名
|
||||
</span>
|
||||
<template v-else>
|
||||
距离开始
|
||||
<van-count-down :time="Math.abs(time)" class="count-down" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
|
||||
</template>
|
||||
<div class="family-intro-footer">
|
||||
<van-button v-if="canApply(infoRow)" @click="onApply(infoRow)" type="primary" block round>进入报名</van-button>
|
||||
<van-button v-else-if="time < 0" @click="onApply(infoRow)" type="primary" block round>
|
||||
距离开始
|
||||
<van-count-down :time="Math.abs(time)" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
|
||||
</van-button>
|
||||
<van-button v-else disabled block round>{{ registrationStatusText(infoRow) }}</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</van-popup>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -136,17 +596,48 @@ layout("/layouts/platform_h5.html"){
|
||||
],
|
||||
infoVisible: false,
|
||||
infoRow: {},
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
|
||||
id: GetQueryString('id')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
isRegistrationClosed(row) {
|
||||
return !!(row && row.activitySignUpEndTime && !this.$moment().isBefore(this.$moment(row.activitySignUpEndTime)))
|
||||
},
|
||||
canApply(row) {
|
||||
if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
|
||||
return false
|
||||
}
|
||||
const now = Date.now()
|
||||
return now >= this.$moment(row.activitySignUpStartTime).valueOf()
|
||||
&& now <= this.$moment(row.activitySignUpEndTime).valueOf()
|
||||
},
|
||||
registrationStatusText(row) {
|
||||
if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
|
||||
return '当前不可报名'
|
||||
}
|
||||
if(Date.now() < this.$moment(row.activitySignUpStartTime).valueOf()) {
|
||||
return '报名未开始'
|
||||
}
|
||||
return '已过报名时间'
|
||||
},
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.time = this.$moment().diff(this.$moment(row.activitySignUpStartTime), 'milliseconds')
|
||||
this.infoVisible = true
|
||||
},
|
||||
onApply(row) {
|
||||
if(this.isRegistrationClosed(row)) {
|
||||
return
|
||||
}
|
||||
if(this.$moment().isBefore(this.$moment(row.activitySignUpStartTime))) {
|
||||
this.onView(row)
|
||||
return
|
||||
|
||||
@@ -3,8 +3,9 @@ const times = {
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<van-action-sheet v-model="visible" title="时间段" cancel-text="取消">
|
||||
<button v-for="(item,index) in row?.courseTimes" type="button" class="van-action-sheet__item">
|
||||
<van-action-sheet class="family-course-times-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" v-model="visible" title="时间段" cancel-text="取消">
|
||||
<div class="family-course-times-list">
|
||||
<button v-for="(item,index) in row?.courseTimes" :key="index" type="button" class="van-action-sheet__item family-course-time-item">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div>
|
||||
<div class="van-action-sheet__name">
|
||||
@@ -21,6 +22,7 @@ const times = {
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-popup round :safe-area-inset-bottom="true"
|
||||
@@ -84,6 +86,84 @@ const times = {
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
|
||||
.family-course-times-sheet {
|
||||
overflow: hidden;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__header {
|
||||
height: 48px;
|
||||
color: #1f2f43;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__close {
|
||||
top: 13px;
|
||||
color: #b5bdc9;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.family-course-times-list {
|
||||
height: calc(100% - 98px);
|
||||
padding: 10px 12px 0;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .family-course-time-item {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__name {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__subname {
|
||||
margin-top: 5px;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .sign_button .van-button {
|
||||
min-width: 48px;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
box-shadow: 0 4px 10px rgba(25, 137, 250, .18);
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .sign_button .van-button--disabled {
|
||||
color: #8b98aa;
|
||||
background-color: #eef2f7;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.family-course-times-sheet /deep/ .van-action-sheet__cancel {
|
||||
height: 50px;
|
||||
color: #66758a;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ const applyForm = {
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<van-action-sheet :close-on-click-overlay="false" title="报名信息" v-model="visible">
|
||||
<van-action-sheet class="family-course-form-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" title="报名信息" v-model="visible">
|
||||
<van-form ref="formRef" class="form-container">
|
||||
<van-cell-group title="活动信息" class="form-section">
|
||||
<van-field label="活动名称" readonly v-model="row.courseName"></van-field>
|
||||
@@ -39,16 +39,20 @@ const applyForm = {
|
||||
|
||||
<van-cell-group class="form-section">
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div class="family-member-section-title">
|
||||
<div>{{activity.keyWord}}信息</div>
|
||||
<div>
|
||||
<van-tag @click="delFamily" size="large" type="primary" color="#ff3b30">删除{{activity.keyWord}}</van-tag>
|
||||
<van-tag @click="addFamily" size="large" type="primary" color="#1867b0">添加{{activity.keyWord}}</van-tag>
|
||||
<div class="family-member-actions">
|
||||
<button type="button" class="family-member-action family-member-action--delete" :aria-label="'删除' + activity.keyWord" @click="delFamily">
|
||||
<van-icon name="delete-o"></van-icon>
|
||||
</button>
|
||||
<button type="button" class="family-member-action family-member-action--add" :aria-label="'添加' + activity.keyWord" @click="addFamily">
|
||||
<van-icon name="plus"></van-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="formData.mobileColumnsValue && formData.mobileColumnsValue.length > 0" class="mt10">
|
||||
<van-tabs v-model="familyActive" type="card" color="#0e78c5" animated>
|
||||
<van-tabs v-model="familyActive" color="#1989fa" title-active-color="#1989fa" animated>
|
||||
<van-tab v-for="item, index in formData.mobileColumnsValue"
|
||||
:name="index + ''"
|
||||
:title="activity.keyWord + (index + 1)"
|
||||
@@ -328,16 +332,117 @@ const applyForm = {
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.family-course-form-sheet {
|
||||
overflow: hidden;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-action-sheet__header {
|
||||
height: 48px;
|
||||
color: #1f2f43;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-action-sheet__close {
|
||||
top: 13px;
|
||||
color: #b5bdc9;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .form-container {
|
||||
height: calc(100% - 48px);
|
||||
padding: 10px 12px 72px;
|
||||
overflow-y: auto;
|
||||
background-color: #f3f7fd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .form-section {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-cell-group__title {
|
||||
padding: 12px 14px 8px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-cell-group__title::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-cell {
|
||||
padding: 11px 14px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-field__label {
|
||||
color: #66758a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-tabs__nav--card {
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
background-color: #eef3f9;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-tabs__nav--card .van-tab {
|
||||
border-right: 0;
|
||||
color: #66758a;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .van-tabs__nav--card .van-tab--active {
|
||||
color: #1989fa;
|
||||
background-color: #e7f2ff;
|
||||
}
|
||||
|
||||
/deep/ .companionList_empty_text {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
color: grey;
|
||||
}
|
||||
/deep/ .button {
|
||||
position: fixed;
|
||||
|
||||
.family-course-form-sheet /deep/ .button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: auto;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-course-form-sheet /deep/ .button .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,296 +2,475 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
.info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
}
|
||||
.info-container {
|
||||
|
||||
}
|
||||
.button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.info-img {
|
||||
display: block;
|
||||
}
|
||||
.van-count-down {
|
||||
color: #fff;
|
||||
}
|
||||
.table-list-container {
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item {
|
||||
.family-mine-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-mine-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eaecef;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-title {
|
||||
.family-mine-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
|
||||
.family-mine-page .van-nav-bar .van-icon,
|
||||
.family-mine-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.family-mine-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.family-mine-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
padding-right: 10px;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background: linear-gradient(115deg, #347eea 0%, #5b9cf4 58%, #cfe3ff 100%);
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .img-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .img-container img {
|
||||
width: 100%;
|
||||
.family-mine-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 67%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
object-position: right center;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
|
||||
mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
|
||||
}
|
||||
|
||||
|
||||
.table-list-container .table-list-item .item-meta {
|
||||
.family-mine-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
padding: 4px 0;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
.family-mine-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .meta-item i {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
.family-mine-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-content {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
.family-mine-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .family-mine-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-search {
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.5;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-footer {
|
||||
.family-mine-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.family-mine-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.family-mine-filter {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.family-mine-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.family-mine-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.family-mine-filter .van-dropdown-menu__title {
|
||||
width: auto;
|
||||
max-width: calc(100% - 24px);
|
||||
padding: 0 12px 0 0;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.family-mine-filter .van-dropdown-menu__title::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.family-mine-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #eaecef;
|
||||
color: #909399;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.family-mine-card {
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.family-mine-card__cover,
|
||||
.family-mine-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.family-mine-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.family-mine-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .item-actions {
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
justify-content: end;
|
||||
margin-top: 15px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #eaecef;
|
||||
.family-mine-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
font-size: 14px;
|
||||
color: var(--color-primary);
|
||||
padding: 4px 0;
|
||||
.family-mine-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .action-btn i {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
.family-mine-card__body {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .action-btn.delete {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.table-list-container .table-list-item .action-btn.review {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.table-list-container .empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.table-list-container .empty-state i {
|
||||
font-size: 60px;
|
||||
margin-bottom: 16px;
|
||||
color: #dcdee0;
|
||||
}
|
||||
|
||||
.table-list-container .empty-state p {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.table-column {
|
||||
display: flex;
|
||||
padding: 6px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
max-width: 120px;
|
||||
white-space: nowrap;
|
||||
.family-mine-card__title {
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #555;
|
||||
.family-mine-card__time {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.family-mine-card__meta {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.family-mine-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.family-mine-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.family-mine-card__actions {
|
||||
display: flex;
|
||||
padding: 12px 14px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: #f8fbff;
|
||||
}
|
||||
|
||||
.family-mine-card__action {
|
||||
display: inline-flex;
|
||||
min-width: 82px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-card__action .van-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.family-mine-card__action.is-primary {
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
|
||||
}
|
||||
|
||||
.family-mine-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.family-mine-empty img {
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.family-mine-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.family-mine-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.family-mine-intro-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.family-mine-intro-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-intro-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.family-mine-intro-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 44px;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.family-mine-intro-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.family-mine-intro-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.family-mine-intro-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
color: #3f4c5e;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
flex-grow: 1; /* 动态占据剩余部分 */
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出的部分 */
|
||||
text-overflow: ellipsis; /* 省略号 */
|
||||
line-height: 1.8;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.family-mine-intro-card img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="亲子活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<div id="app" v-cloak>
|
||||
<div class="family-mine-page">
|
||||
<van-nav-bar title="亲子活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/family/apply/activityPageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="activityName"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="面向对象">{{row.activityGroupName}}</table-column>
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>活动介绍</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onInfo(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>{{row.keyWord}}信息</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>操作</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="活动详细信息" v-model="infoVisible" cancel-text="取消">
|
||||
|
||||
<div class="info-container">
|
||||
<div>
|
||||
<van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
|
||||
<div class="info-title">{{infoRow.activityName}}</div>
|
||||
<pdf-preview :content="infoRow.introduce"></pdf-preview>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="报名信息" v-model="courseVisible" cancel-text="取消">
|
||||
<div class="table-list-container">
|
||||
<div v-for="(row, index) in mineCourses" :key="index" class="table-list-item">
|
||||
<div class="item-header">
|
||||
<div class="item-title" style="white-space: normal">{{ row.courseName }}</div>
|
||||
<div class="family-mine-content">
|
||||
<section class="family-mine-hero">
|
||||
<img class="family-mine-hero__image" src="/assets/mobile/img/activity/hero/family-hero-v3.png" alt="亲子活动插画">
|
||||
<div class="family-mine-hero__copy">
|
||||
<div class="family-mine-hero__title">我的报名</div>
|
||||
<div class="family-mine-hero__subtitle">亲子活动 · 报名记录</div>
|
||||
</div>
|
||||
<div style="display: flex;column-gap: 10px">
|
||||
<div class="table-column">
|
||||
<div class="label">校区：</div>
|
||||
<div class="value">{{ row.campus }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="family-mine-sticky">
|
||||
<van-search v-model="pageForm.searchKeyword" class="family-mine-search" placeholder="搜索已报名活动" shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
|
||||
<van-dropdown-menu class="family-mine-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
<div style="display: flex;column-gap: 10px">
|
||||
<div class="table-column">
|
||||
<div class="label">地点：</div>
|
||||
<div class="value">{{ row.courseLocation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;column-gap: 10px">
|
||||
<div class="table-column">
|
||||
<div class="label">联系人：</div>
|
||||
<div class="value">{{ row.courseInstructor }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;column-gap: 10px">
|
||||
<div class="table-column">
|
||||
<div class="label">家属人数：</div>
|
||||
<div class="value">
|
||||
{{ row.mobileColumnsValue ? JSON.parse(row.mobileColumnsValue).length : '暂无' }}
|
||||
</van-sticky>
|
||||
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
|
||||
<div class="family-mine-list">
|
||||
<div v-for="row in tableData" :key="row.id" class="family-mine-card">
|
||||
<img v-if="hasCover(row) && !imageLoadErrors[row.id]" class="family-mine-card__cover" :src="row.cover" :alt="row.activityName" @error="handleImageError(row)">
|
||||
<div v-else class="family-mine-card__cover-state" :class="{'is-error': hasCover(row)}">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="family-mine-card__body">
|
||||
<div class="family-mine-card__title">{{ row.activityName }}</div>
|
||||
<div class="family-mine-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
|
||||
报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="family-mine-card__time" v-if="row.activityStartTime && row.activityEndTime">
|
||||
活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="family-mine-card__meta" v-if="row.activityGroupName || row.trainType">
|
||||
<span class="family-mine-card__tag" v-if="row.activityGroupName"><span class="family-mine-card__tag-label">面向对象</span>{{ row.activityGroupName }}</span>
|
||||
<span class="family-mine-card__tag" v-if="row.trainType"><span class="family-mine-card__tag-label">活动类型</span>{{ row.trainType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="family-mine-card__actions">
|
||||
<button type="button" class="family-mine-card__action" @click="onView(row)"><van-icon name="eye-o"></van-icon>查看介绍</button>
|
||||
<button type="button" class="family-mine-card__action is-primary" @click="onApply(row)"><van-icon name="edit"></van-icon>查看报名</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="!loading && tableData.length === 0" class="family-mine-empty">
|
||||
<img src="/assets/mobile/img/activity/family-empty.png" alt="亲子活动报名空状态插画">
|
||||
<div class="family-mine-empty__title">暂无报名记录</div>
|
||||
<div class="family-mine-empty__hint">当前筛选条件下暂时没有已报名活动</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-actions"></div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
|
||||
<van-popup :style="{height: '100%', width: '100%'}" position="right" v-model="infoVisible">
|
||||
<div class="family-mine-intro-page">
|
||||
<van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
|
||||
<div class="family-mine-intro-scroll">
|
||||
<div class="family-mine-intro-hero">
|
||||
<div class="family-mine-intro-hero__icon"><van-icon name="description"></van-icon></div>
|
||||
<div>
|
||||
<div class="family-mine-intro-hero__title">亲子活动报名须知</div>
|
||||
<div class="family-mine-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="infoRow.introduce" class="family-mine-intro-card" v-html="infoRow.introduce"></div>
|
||||
<div v-else class="family-mine-intro-card">暂无活动介绍</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
@@ -308,12 +487,15 @@ layout("/layouts/platform_h5.html"){
|
||||
],
|
||||
infoVisible: false,
|
||||
infoRow: {},
|
||||
|
||||
mineCourses: [],
|
||||
courseVisible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.infoVisible = true
|
||||
@@ -321,24 +503,45 @@ layout("/layouts/platform_h5.html"){
|
||||
onApply(row) {
|
||||
this.$pjaxReplace('/platform/family/apply/list/h5?id=' + row.id + '&dataType=mine')
|
||||
},
|
||||
onInfo(row) {
|
||||
this.$axios.post('/platform/family/mine/queryMineCourse', {activityId: row.id})
|
||||
.then((res) => {
|
||||
this.mineCourses = res.data
|
||||
this.courseVisible = true
|
||||
})
|
||||
onLoad() {
|
||||
if(!this.finished) {
|
||||
this.loadActivities(false)
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
onRefresh() {
|
||||
this.loadActivities(true)
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
loadActivities(reset) {
|
||||
if(reset) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.imageLoadErrors = {}
|
||||
}
|
||||
this.loading = true
|
||||
this.$axios.post('/platform/family/apply/activityPageData', this.pageForm).then((res) => {
|
||||
if(res.code === 0) {
|
||||
const list = res.data && res.data.list ? res.data.list : []
|
||||
this.tableData = this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0
|
||||
this.finished = this.tableData.length >= this.pageForm.totalCount
|
||||
if(!this.finished) {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,53 +2,682 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
.van-tag--default {
|
||||
background-color: #f1f1f1 !important;
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-activity-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-activity-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-activity-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sports-activity-page .van-nav-bar .van-icon,
|
||||
.sports-activity-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.sports-activity-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.sports-activity-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background-color: #247fe8;
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.sports-activity-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.sports-activity-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 64%;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
|
||||
}
|
||||
|
||||
.sports-activity-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
|
||||
}
|
||||
|
||||
.sports-activity-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.sports-activity-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .sports-activity-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-activity-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.sports-activity-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-activity-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-activity-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.sports-activity-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.sports-activity-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-menu__title {
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-menu__title--active,
|
||||
.sports-activity-filter .van-dropdown-item__option--active,
|
||||
.sports-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-activity-filter .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.sports-activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sports-activity-card {
|
||||
display: flex;
|
||||
min-height: 74px;
|
||||
padding: 14px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.sports-activity-card {
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sports-activity-card__icon {
|
||||
display: flex;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 38px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9px;
|
||||
color: #4d91ef;
|
||||
background-color: #edf4ff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.sports-activity-card__body {
|
||||
min-width: 0;
|
||||
padding: 12px 38px 14px 14px;
|
||||
box-sizing: border-box;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sports-activity-card__cover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin: 0;
|
||||
flex: 0 0 150px;
|
||||
object-fit: cover;
|
||||
border-radius: 0;
|
||||
background-color: #edf4ff;
|
||||
}
|
||||
|
||||
.sports-activity-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
flex: 0 0 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
background-color: #edf4fc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sports-activity-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.sports-activity-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.sports-activity-card > .sports-activity-card__icon {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin: 0;
|
||||
flex: 0 0 150px;
|
||||
border-radius: 0;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.sports-activity-card__title {
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.sports-activity-card__title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-activity-card__time {
|
||||
margin-top: 4px;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-activity-card__meta {
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.sports-activity-card__address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: #69788d;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.sports-activity-card__address .van-icon {
|
||||
margin: 2px 5px 0 0;
|
||||
flex: none;
|
||||
color: #6c9ff8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-activity-card__address span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-activity-card__tags {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sports-activity-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.sports-activity-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.sports-activity-card__arrow {
|
||||
position: absolute;
|
||||
top: 164px;
|
||||
right: 14px;
|
||||
color: #b4bdca;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sports-activity-empty-illustration {
|
||||
display: flex;
|
||||
min-height: 250px;
|
||||
padding: 24px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sports-activity-empty-illustration img {
|
||||
display: block;
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.sports-activity-empty-illustration__title {
|
||||
margin-top: -8px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sports-activity-empty-illustration__hint {
|
||||
margin-top: 6px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.activity-notification-popup,
|
||||
.activity-notification-page {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.activity-notification-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.activity-notification-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.activity-notification-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.activity-notification-page .van-nav-bar .van-icon,
|
||||
.activity-notification-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.activity-notification-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activity-notification-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
}
|
||||
|
||||
.activity-notification-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.activity-notification-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.activity-notification-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.activity-notification-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.activity-notification-content,
|
||||
.activity-notification-content div,
|
||||
.activity-notification-content p,
|
||||
.activity-notification-content span,
|
||||
.activity-notification-content li {
|
||||
color: #3f4c5e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.activity-notification-content h1,
|
||||
.activity-notification-content h2,
|
||||
.activity-notification-content h3 {
|
||||
margin: 16px 0 10px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 19px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.activity-notification-content > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.activity-notification-content p {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.activity-notification-content img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.activity-notification-content table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.activity-notification-empty {
|
||||
display: flex;
|
||||
min-height: 180px;
|
||||
margin-top: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
border-radius: 12px;
|
||||
color: #9aa7b8;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.activity-notification-empty .van-icon {
|
||||
color: #83b5f4;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.activity-notification-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activity-notification-footer .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
font-size: 15px;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
|
||||
.activity-notification-footer .van-button.is-disabled,
|
||||
.activity-notification-footer .van-button--disabled {
|
||||
color: #8b98aa !important;
|
||||
background-color: #eef2f7 !important;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="活动列表" @click-left="()=>this.$pjaxReplace('/platform/home')" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item :options="stateList" @change="doSearch"
|
||||
v-model="pageForm.isActivity"></van-dropdown-item>
|
||||
<van-dropdown-item :options="applyStatusOptions" @change="doSearch"
|
||||
v-model="pageForm.applyStatus"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<div class="sports-activity-page">
|
||||
<van-nav-bar
|
||||
title="体育活动"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
fixed
|
||||
placeholder
|
||||
@click-left="goBack"
|
||||
></van-nav-bar>
|
||||
|
||||
<table-list api="/platform/activity/apply/h5/activityData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="NAME"
|
||||
img="image"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.applyStartTime).format('MM/DD HH:mm') + '~' + $moment(row.applyEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.startTime).format('MM/DD HH:mm') + '~' + $moment(row.endTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<template v-if="$moment().isBefore($moment(row.applyEndTime))">
|
||||
<div class="action-btn" @click="openView(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>去报名</span>
|
||||
<div class="sports-activity-content">
|
||||
<section class="sports-activity-hero">
|
||||
<img
|
||||
class="sports-activity-hero__image"
|
||||
src="/assets/mobile/img/activity/hero/sports-hero-v2.png"
|
||||
alt="体育活动插画"
|
||||
>
|
||||
<div class="sports-activity-hero__copy">
|
||||
<div class="sports-activity-hero__title">体育活动</div>
|
||||
<div class="sports-activity-hero__subtitle">强健体魄 · 运动同行</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</table-list>
|
||||
</section>
|
||||
|
||||
<activity_event_notification
|
||||
:event_notification="viewData.eventNotification"
|
||||
:id="viewData.id"
|
||||
ref="eventNotification"
|
||||
></activity_event_notification>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="sports-activity-sticky">
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
class="sports-activity-search"
|
||||
placeholder="搜索体育活动"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
|
||||
<van-dropdown-menu
|
||||
class="sports-activity-filter"
|
||||
:class="{'is-open': filterOpened}"
|
||||
active-color="#1989fa"
|
||||
>
|
||||
<year-van-dropdown-item
|
||||
:num="5"
|
||||
v-model="pageForm.year"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></year-van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.isActivity"
|
||||
:options="stateList"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.applyStatus"
|
||||
:options="applyStatusOptions"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<div class="sports-activity-list">
|
||||
<div
|
||||
v-for="row in activityList"
|
||||
:key="row.id"
|
||||
class="sports-activity-card"
|
||||
@click="openView(row)"
|
||||
>
|
||||
<img
|
||||
v-if="hasActivityImage(row) && !imageLoadErrors[row.id]"
|
||||
class="sports-activity-card__cover"
|
||||
:src="row.image"
|
||||
:alt="row.NAME || row.name"
|
||||
@error="handleImageError(row)"
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
class="sports-activity-card__cover-state"
|
||||
:class="{'is-error': hasActivityImage(row)}"
|
||||
>
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasActivityImage(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="sports-activity-card__body">
|
||||
<div class="sports-activity-card__title">{{ row.NAME || row.name }}</div>
|
||||
<div class="sports-activity-card__time" v-if="row.applyStartTime && row.applyEndTime">
|
||||
报名时间：{{ $moment(row.applyStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.applyEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="sports-activity-card__time" v-if="row.startTime && row.endTime">
|
||||
活动时间：{{ $moment(row.startTime).format('MM/DD HH:mm') }}~{{ $moment(row.endTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="sports-activity-card__meta" v-if="row.address || formatGameStyle(row.gameStyle) || formatApplyType(row.applyType) || formatApplyWay(row.applyWay)">
|
||||
<div class="sports-activity-card__address" v-if="row.address">
|
||||
<van-icon name="location-o"></van-icon>
|
||||
<span>{{ row.address }}</span>
|
||||
</div>
|
||||
<div class="sports-activity-card__tags" v-if="formatGameStyle(row.gameStyle) || formatApplyType(row.applyType) || formatApplyWay(row.applyWay)">
|
||||
<span class="sports-activity-card__tag" v-if="formatGameStyle(row.gameStyle)">
|
||||
<span class="sports-activity-card__tag-label">竞赛方式</span>{{ formatGameStyle(row.gameStyle) }}
|
||||
</span>
|
||||
<span class="sports-activity-card__tag" v-if="formatApplyType(row.applyType)">
|
||||
<span class="sports-activity-card__tag-label">活动类型</span>{{ formatApplyType(row.applyType) }}
|
||||
</span>
|
||||
<span class="sports-activity-card__tag" v-if="formatApplyWay(row.applyWay)">
|
||||
<span class="sports-activity-card__tag-label">报名方式</span>{{ formatApplyWay(row.applyWay) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<van-icon class="sports-activity-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
|
||||
<div v-if="activityList.length === 0" class="sports-activity-empty-illustration">
|
||||
<img src="/assets/mobile/img/activity/sports-empty.png" alt="体育活动空状态插画">
|
||||
<div class="sports-activity-empty-illustration__title">{{ emptyText }}</div>
|
||||
<div class="sports-activity-empty-illustration__hint">{{ emptyHint }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<activity_event_notification
|
||||
:event_notification="viewData.eventNotification"
|
||||
:id="viewData.id"
|
||||
:apply_start_time="viewData.applyStartTime"
|
||||
:apply_end_time="viewData.applyEndTime"
|
||||
ref="eventNotification"
|
||||
></activity_event_notification>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
@@ -57,52 +686,106 @@ layout("/layouts/platform_h5.html"){
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
activityList: [],
|
||||
searchKeyword: "",
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
isActivity: 2,
|
||||
applyStatus: 1,
|
||||
year: new Date().getFullYear(),
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0
|
||||
year: new Date().getFullYear()
|
||||
},
|
||||
yearList: [],
|
||||
stateList: [
|
||||
{value: 1, text: "全部活动"},
|
||||
{value: 2, text: "报名中"},
|
||||
{value: 3, text: "报名已结束"}
|
||||
],
|
||||
applyStatusOptions: [
|
||||
{value: 1, text: "未报名"},
|
||||
{value: 2, text: "已报名"}
|
||||
],
|
||||
stateList: [
|
||||
{value: 1, text: "全部"},
|
||||
{value: 2, text: "报名中"},
|
||||
{value: 3, text: "报名已结束"}
|
||||
],
|
||||
subLoading: false,
|
||||
viewShow: false,
|
||||
viewData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
emptyText() {
|
||||
if (this.searchKeyword.trim()) return "未找到相关体育活动"
|
||||
if (this.pageForm.isActivity === 3) return "暂无已结束的体育活动"
|
||||
if (this.pageForm.isActivity === 2) return "暂无报名中的体育活动"
|
||||
return "暂无体育活动"
|
||||
},
|
||||
emptyHint() {
|
||||
return this.searchKeyword.trim() ? "请尝试更换搜索关键词" : "当前筛选条件下暂时没有活动"
|
||||
}
|
||||
},
|
||||
components: {
|
||||
activity_event_notification: ACTIVITY_EVENT_NOTIFICATION
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$pjaxReplace("/platform/home")
|
||||
},
|
||||
openView(row) {
|
||||
this.viewData = row
|
||||
this.$refs.eventNotification.viewShow = true
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
this.$refs.eventNotification.viewShow = true
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
doSearch() {
|
||||
this.loadActivities()
|
||||
},
|
||||
hasActivityImage(row) {
|
||||
return !!(row && row.image && String(row.image).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
formatGameStyle(value) {
|
||||
return {
|
||||
1: "竞赛类",
|
||||
2: "非竞赛类"
|
||||
}[Number(value)] || ""
|
||||
},
|
||||
formatApplyType(value) {
|
||||
return {
|
||||
1: "单一团体赛",
|
||||
2: "综合赛",
|
||||
3: "个人赛"
|
||||
}[Number(value)] || ""
|
||||
},
|
||||
formatApplyWay(value) {
|
||||
if (value === null || value === undefined || value === "") return ""
|
||||
let values = value
|
||||
if (typeof values === "string") {
|
||||
try {
|
||||
values = JSON.parse(values)
|
||||
} catch (e) {
|
||||
values = values.split(",")
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(values)) values = [values]
|
||||
const labels = {
|
||||
1: "个人报名",
|
||||
2: "分工会报名",
|
||||
3: "小程序报名"
|
||||
}
|
||||
return values.map(item => labels[Number(item)]).filter(Boolean).join("、")
|
||||
},
|
||||
loadActivities() {
|
||||
this.activityList = []
|
||||
this.imageLoadErrors = {}
|
||||
const queryForm = Object.assign({}, this.pageForm, {
|
||||
searchKeyword: this.searchKeyword.trim()
|
||||
})
|
||||
this.$axios.post("/platform/activity/apply/h5/activityData", queryForm).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.activityList = res.data && res.data.list ? res.data.list : []
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadActivities()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,567 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-event-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-event-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-event-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sports-event-page .van-nav-bar .van-icon,
|
||||
.sports-event-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.sports-event-summary {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
margin: 12px 12px 0;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
}
|
||||
|
||||
.sports-event-summary__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.sports-event-summary__body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sports-event-summary__title {
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-summary__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.sports-event-sticky {
|
||||
padding: 10px 0 8px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.sports-event-search {
|
||||
margin: 0 12px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sports-event-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 13px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(55, 85, 126, .07);
|
||||
}
|
||||
|
||||
.sports-event-search .van-field__control {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-event-list-head {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 16px 0 0;
|
||||
padding: 0 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-event-list-head__title {
|
||||
color: #263548;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sports-event-list-head__count {
|
||||
color: #8d9aad;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sports-event-list-head__tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sports-event-view-toggle {
|
||||
display: inline-flex;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
color: #397de0;
|
||||
background-color: #eaf3ff;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.sports-event-view-toggle i {
|
||||
margin-right: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sports-event-page .sports-event-card-list {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card {
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.sports-event-page .table-card > .van-image,
|
||||
.sports-event-page .table-card > .van-image img {
|
||||
display: block;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell {
|
||||
padding: 9px 16px;
|
||||
color: #566579;
|
||||
font-size: 13px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell:first-of-type {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
border-color: #edf1f6;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell__title {
|
||||
color: #66758a;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-cell__value,
|
||||
.sports-event-page .table-card .van-cell__right-icon {
|
||||
color: #263548;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .font-size3 {
|
||||
color: #23344a;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .van-tag {
|
||||
padding: 3px 7px;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .sports-event-status-tag.is-pending {
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .sports-event-status-tag.is-success {
|
||||
color: #35a86b;
|
||||
background-color: #eaf8f1;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .sports-event-status-tag.is-rejected {
|
||||
color: #df5b59;
|
||||
background-color: #fff1f0;
|
||||
}
|
||||
|
||||
.sports-event-card__body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sports-event-card__title-row {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sports-event-card__title {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
color: #23344a;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sports-event-card__status {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sports-event-card__activity {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
align-items: center;
|
||||
color: #78879a;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.sports-event-card__activity .van-icon {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-event-card__tags,
|
||||
.sports-event-card__config {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sports-event-card__tag,
|
||||
.sports-event-card__config-tag {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-event-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #7f9fc9;
|
||||
}
|
||||
|
||||
.sports-event-card__stats {
|
||||
display: grid;
|
||||
margin-top: 12px;
|
||||
padding: 12px 0;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
border-top: 1px solid #edf1f6;
|
||||
border-bottom: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.sports-event-card__stat {
|
||||
min-width: 0;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-event-card__stat:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sports-event-card__stat:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sports-event-card__stat + .sports-event-card__stat {
|
||||
border-left: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.sports-event-card__stat-label {
|
||||
color: #7b899b;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.sports-event-card__stat-value {
|
||||
margin-top: 3px;
|
||||
overflow: hidden;
|
||||
color: #33445a;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-card__config-tag {
|
||||
color: #66758a;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.sports-event-card__extra {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sports-event-card__extra-row {
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
align-items: flex-start;
|
||||
color: #66758a;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.sports-event-card__extra-row .van-icon {
|
||||
margin: 2px 6px 0 0;
|
||||
flex: 0 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.sports-event-card__extra-label {
|
||||
margin-right: 8px;
|
||||
flex: 0 0 auto;
|
||||
color: #7b899b;
|
||||
}
|
||||
|
||||
.sports-event-card__extra-value {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
color: #33445a;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .table-card-footer {
|
||||
min-height: 56px;
|
||||
margin-top: 4px;
|
||||
padding: 12px 16px;
|
||||
align-items: center;
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: #f8fbff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .table-card-footer::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sports-event-card__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sports-event-card__footer > div {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card .table-card-footer .van-cell__value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .van-button {
|
||||
min-width: 78px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .van-button i {
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .sports-event-apply-button {
|
||||
width: 108px;
|
||||
min-width: 108px;
|
||||
height: 32px;
|
||||
color: #fff !important;
|
||||
border-color: #1989fa !important;
|
||||
background-color: #1989fa !important;
|
||||
box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .sports-event-cancel-button {
|
||||
width: 108px;
|
||||
min-width: 108px;
|
||||
height: 32px;
|
||||
color: #fff !important;
|
||||
border-color: #e84d4f !important;
|
||||
background-color: #e84d4f !important;
|
||||
box-shadow: 0 5px 12px rgba(232, 77, 79, .16);
|
||||
}
|
||||
|
||||
.sports-event-page .table-card-footer .van-button__content {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-compact-list {
|
||||
margin: 0 12px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.sports-event-compact-item {
|
||||
display: flex;
|
||||
min-height: 68px;
|
||||
padding: 12px 14px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #edf1f6;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sports-event-compact-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.sports-event-compact-item__name {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
color: #23344a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-compact-item__action {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.sports-event-page .sports-event-compact-list .sports-event-compact-button.van-button {
|
||||
min-width: 0;
|
||||
height: 28px !important;
|
||||
padding: 0 10px !important;
|
||||
border: 0 !important;
|
||||
border-radius: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.sports-event-compact-button i {
|
||||
margin-right: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sports-event-page .sports-event-compact-list .sports-event-compact-button--apply.van-button {
|
||||
color: #397de0 !important;
|
||||
background: #edf5ff !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.sports-event-page .sports-event-compact-list .sports-event-compact-button--cancel.van-button {
|
||||
color: #df5b59 !important;
|
||||
background: #fff1f0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.sports-event-compact-button .van-button__content {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sports-event-page .van-list__finished-text,
|
||||
.sports-event-page .van-list__loading {
|
||||
color: #9aa7b8;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.sports-event-refresh {
|
||||
min-height: calc(100vh - 226px);
|
||||
}
|
||||
|
||||
.sports-event-empty {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
padding: 28px 18px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sports-event-empty img {
|
||||
display: block;
|
||||
width: 82%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.sports-event-empty__title {
|
||||
margin-top: -8px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sports-event-empty__hint {
|
||||
margin-top: 6px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="sports-event-page">
|
||||
<van-sticky>
|
||||
<van-nav-bar
|
||||
@click-left="historyBack"
|
||||
@@ -13,99 +572,176 @@ layout("/layouts/platform_h5.html"){
|
||||
></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<div class="sports-event-summary">
|
||||
<div class="sports-event-summary__icon">
|
||||
<van-icon name="award-o"></van-icon>
|
||||
</div>
|
||||
<div class="sports-event-summary__body">
|
||||
<div class="sports-event-summary__title">体育活动项目</div>
|
||||
<div class="sports-event-summary__subtitle">选择适合的项目，参与健康运动</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="sports-event-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
class="sports-event-search"
|
||||
placeholder="搜索项目名称"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
|
||||
<div class="sports-event-list-head">
|
||||
<button type="button" class="sports-event-view-toggle" @click="toggleViewMode">
|
||||
<i :class="viewMode === 'card' ? 'fa fa-list' : 'fa fa-th-large'"></i>
|
||||
<span>{{ viewMode === 'card' ? '列表' : '卡片' }}</span>
|
||||
</button>
|
||||
<div class="sports-event-list-head__count" v-if="pageForm.totalCount">共 {{ pageForm.totalCount }} 项</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-pull-refresh class="sports-event-refresh" v-model="refreshing" @refresh="onRefresh">
|
||||
<div>
|
||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0"
|
||||
v-model="loading">
|
||||
<div class="table-list">
|
||||
<div class="sports-event-card-list" v-if="viewMode === 'card'">
|
||||
<div :key="row.id" class="table-card" v-for="row in tableData">
|
||||
<van-image :src="row.image" fit="cover" height="200" v-if="row.image" width="100%"></van-image>
|
||||
<van-cell>
|
||||
<template slot="title">
|
||||
<div class="flex-align">
|
||||
<span class="font-size3 bold">{{row.allName}}</span>
|
||||
<div class="sports-event-card__body">
|
||||
<div class="sports-event-card__title-row">
|
||||
<div class="sports-event-card__title">{{row.allName}}</div>
|
||||
<div class="sports-event-card__status">
|
||||
<template v-if="row.status&&row.applyWay.length===1&&row.applyWay.includes(1)">
|
||||
<van-tag class="sports-event-status-tag is-pending" v-if="row.status===1">待审核</van-tag>
|
||||
<van-tag class="sports-event-status-tag is-success" v-if="row.status===2">已成功报名</van-tag>
|
||||
<van-tag class="sports-event-status-tag is-rejected" v-if="row.status===3">审核不通过</van-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<van-tag class="sports-event-status-tag is-pending" v-if="row.status2===0">待审核</van-tag>
|
||||
<van-tag class="sports-event-status-tag is-success" v-if="row.status2===2">已成功报名</van-tag>
|
||||
<van-tag class="sports-event-status-tag is-rejected" v-if="row.status2===3">审核不通过</van-tag>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<div style="display: flex; justify-content: flex-end"
|
||||
v-if="row.status&&row.applyWay.length===1&&row.applyWay.includes(1)">
|
||||
<van-tag type="primary" v-if="row.status===1">待审核</van-tag>
|
||||
<van-tag type="success" v-if="row.status===2">已成功报名</van-tag>
|
||||
<van-tag type="danger" v-if="row.status===3">审核不通过</van-tag>
|
||||
</div>
|
||||
<div class="sports-event-card__activity" v-if="row.name">
|
||||
<van-icon name="flag-o"></van-icon>
|
||||
<span>{{row.name}}</span>
|
||||
</div>
|
||||
<div class="sports-event-card__tags">
|
||||
<span class="sports-event-card__tag" v-if="row.eveProjectType"><span class="sports-event-card__tag-label">项目</span>{{row.eveProjectType == 2 ? '团体' : '单项'}}</span>
|
||||
<span class="sports-event-card__tag"><span class="sports-event-card__tag-label">性别</span>{{row.isMenWomen == 1 ? '男子' : row.isMenWomen == 2 ? '女子' : '不限'}}</span>
|
||||
<span class="sports-event-card__tag" v-if="row.isInterest">趣味项目</span>
|
||||
<span class="sports-event-card__tag" v-if="row.registrationWays"><span class="sports-event-card__tag-label">报名</span>{{row.registrationWays == 2 ? '双人' : '单人'}}</span>
|
||||
<span class="sports-event-card__tag" v-if="row.applyType"><span class="sports-event-card__tag-label">活动</span>{{row.applyType == 2 ? '综合类' : '单一类'}}</span>
|
||||
<span class="sports-event-card__tag" v-if="row.applyWay && row.applyWay.includes(1)">个人报名</span>
|
||||
<span class="sports-event-card__tag" v-if="row.applyWay && row.applyWay.includes(2)">分工会报名</span>
|
||||
<span class="sports-event-card__tag" v-if="row.applyWay && row.applyWay.includes(3)">小程序报名</span>
|
||||
</div>
|
||||
<div class="sports-event-card__stats">
|
||||
<div class="sports-event-card__stat">
|
||||
<div class="sports-event-card__stat-label">可报队数</div>
|
||||
<div class="sports-event-card__stat-value">{{row.eveProjectType == 2 && row.restrictTotalTeam != null ? row.restrictTotalTeam + '队' : '不适用'}}</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end" v-else>
|
||||
<van-tag type="primary" v-if="row.status2===0">待审核</van-tag>
|
||||
<van-tag type="success" v-if="row.status2===2">已成功报名</van-tag>
|
||||
<van-tag type="danger" v-if="row.status2===3">审核不通过</van-tag>
|
||||
<div class="sports-event-card__stat">
|
||||
<div class="sports-event-card__stat-label">运动员人数</div>
|
||||
<div class="sports-event-card__stat-value" v-if="row.athletesMinNum != null && row.athletesMaxNum != null">{{row.athletesMinNum}}-{{row.athletesMaxNum}}人</div>
|
||||
<div class="sports-event-card__stat-value" v-else-if="row.athletesMaxNum != null">最多{{row.athletesMaxNum}}人</div>
|
||||
<div class="sports-event-card__stat-value" v-else>暂无限制</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="可报队数" v-if="row.eveProjectType==='2'">
|
||||
<template #right-icon>{{ row.restrictTotalTeam }}队</template>
|
||||
</van-cell>
|
||||
<van-cell title="每队可报人数" v-if="row.athletesMaxNum<=99">
|
||||
<template #right-icon>
|
||||
<span v-if="row.athletesMaxNum">{{ row.athletesMaxNum }}人</span>
|
||||
<span v-else-if="row.applyType===1">{{ row.athletesMaxNum * row.restrictTotalTeam}}人</span>
|
||||
<span v-else-if="row.applyType===2&&row.eveProjectType==='1'">{{row.athletesMaxNum}}人</span>
|
||||
<span v-else-if="row.applyType===2&&row.eveProjectType==='2'">
|
||||
{{(row.restrictGirlNum ? row.restrictGirlNum : 0) + (row.restrictBoyNum ? row.restrictBoyNum : 0)}}人
|
||||
</span>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<!-- <van-cell title="已报名总人数">-->
|
||||
<!-- <template #right-icon>-->
|
||||
<!-- <span v-if="row.successUserApply>0&&row.applyType!==3">{{ row.successUserApply }}人</span>-->
|
||||
<!-- <span v-else-if="JSON.parse(row.applyWay).length===2&&row.applyWay.includes(1)">{{row.totalApplyNum}}人</span>-->
|
||||
<!-- <span v-else-if="row.totalApplyNum>0&&row.applyType===3">{{ row.totalApplyNum }}人</span>-->
|
||||
<!-- <span v-else>0人</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </van-cell>-->
|
||||
<van-cell title="暂保存人数">
|
||||
<template #right-icon>
|
||||
<span v-if="row.apply_num_bc>0">已保存（{{row.apply_num_bc}}）人</span>
|
||||
<span v-else>暂无已保存人数</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="已报名人员" v-if="JSON.parse(row.applyWay).length===1">
|
||||
<template #right-icon>
|
||||
<span @click="openApplyUser(row)" v-if="row.userApplyNames">{{ row.userApplyNames}}</span>
|
||||
<span v-else>暂无</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell class="table-card-footer">
|
||||
<div class="sports-event-card__stat">
|
||||
<div class="sports-event-card__stat-label">每人限报</div>
|
||||
<div class="sports-event-card__stat-value">{{row.restrictRegNumber != null ? row.restrictRegNumber + '项' : '暂无限制'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sports-event-card__config" v-if="row.restrictBoyNum != null || row.restrictGirlNum != null || row.coachNum != null || row.leanderNum != null || row.substituteNum != null || row.isLeader || row.isManGirlNum">
|
||||
<span class="sports-event-card__config-tag" v-if="row.restrictBoyNum != null">男子 {{row.restrictBoyNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.restrictGirlNum != null">女子 {{row.restrictGirlNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.coachNum != null">教练 {{row.coachNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.leanderNum != null">领队 {{row.leanderNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.substituteNum != null">替补 {{row.substituteNum}}人</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.isLeader">仅报领队</span>
|
||||
<span class="sports-event-card__config-tag" v-if="row.isManGirlNum">男女不限</span>
|
||||
</div>
|
||||
<div class="sports-event-card__extra">
|
||||
<div class="sports-event-card__extra-row" v-if="row.startAgeDate || row.endAgeDate"><van-icon name="calendar-o"></van-icon><span class="sports-event-card__extra-label">出生日期</span><span class="sports-event-card__extra-value">{{row.startAgeDate || '不限'}} 至 {{row.endAgeDate || '不限'}}</span></div>
|
||||
<div class="sports-event-card__extra-row" v-if="row.activityTeamName"><van-icon name="friends-o"></van-icon><span class="sports-event-card__extra-label">当前小队</span><span class="sports-event-card__extra-value">{{row.activityTeamName}}</span></div>
|
||||
<div class="sports-event-card__extra-row" v-if="row.userApplyNames"><van-icon name="contact-o"></van-icon><span class="sports-event-card__extra-label">已报名人员</span><span class="sports-event-card__extra-value" @click="openApplyUser(row)">{{row.userApplyNames}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-card-footer sports-event-card__footer">
|
||||
<div v-if="row.applyWay.length===1&&row.applyWay.includes(1)">
|
||||
<van-button :loading="subLoading" @click="signUpUser(row)" round
|
||||
<van-button class="sports-event-apply-button" :loading="subLoading" @click="signUpUser(row)" round
|
||||
size="small"
|
||||
type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply===0">
|
||||
报 名
|
||||
<i class="fa fa-sign-in"></i>
|
||||
我要报名
|
||||
</van-button>
|
||||
<van-button :loading="subLoading" @click="cancelApply(row)" round
|
||||
<van-button class="sports-event-cancel-button" :loading="subLoading" @click="cancelApply(row)" round
|
||||
size="small"
|
||||
color="#dd6363"
|
||||
type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply>0">
|
||||
<i class="fa fa-trash"></i>
|
||||
取消报名
|
||||
</van-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<van-button :loading="subLoading" @click="signUpUser(row)" round
|
||||
<van-button class="sports-event-apply-button" :loading="subLoading" @click="signUpUser(row)" round
|
||||
size="small"
|
||||
type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply2===0">
|
||||
报 名
|
||||
<i class="fa fa-sign-in"></i>
|
||||
我要报名
|
||||
</van-button>
|
||||
<van-button :loading="subLoading" @click="cancelApply(row)" round
|
||||
<van-button class="sports-event-cancel-button" :loading="subLoading" @click="cancelApply(row)" round
|
||||
size="small"
|
||||
color="#dd6363"
|
||||
type="primary" v-if="activityData.applyWay.includes(1)&&row.userApply2>0">
|
||||
<i class="fa fa-trash"></i>
|
||||
取消报名
|
||||
</van-button>
|
||||
</div>
|
||||
</van-cell>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sports-event-compact-list" v-else>
|
||||
<div :key="row.id" class="sports-event-compact-item" v-for="row in tableData">
|
||||
<div class="sports-event-compact-item__name">{{ row.allName }}</div>
|
||||
<div class="sports-event-compact-item__action">
|
||||
<div v-if="row.applyWay.length===1&&row.applyWay.includes(1)">
|
||||
<van-button class="sports-event-compact-button sports-event-compact-button--apply" :loading="subLoading" @click="signUpUser(row)" round
|
||||
size="small" type="default"
|
||||
v-if="activityData.applyWay.includes(1)&&row.userApply===0">
|
||||
<i class="fa fa-sign-in"></i>我要报名
|
||||
</van-button>
|
||||
<van-button class="sports-event-compact-button sports-event-compact-button--cancel" :loading="subLoading" @click="cancelApply(row)" round
|
||||
size="small" type="default"
|
||||
v-if="activityData.applyWay.includes(1)&&row.userApply>0">
|
||||
<i class="fa fa-trash"></i>取消报名
|
||||
</van-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<van-button class="sports-event-compact-button sports-event-compact-button--apply" :loading="subLoading" @click="signUpUser(row)" round
|
||||
size="small" type="default"
|
||||
v-if="activityData.applyWay.includes(1)&&row.userApply2===0">
|
||||
<i class="fa fa-sign-in"></i>我要报名
|
||||
</van-button>
|
||||
<van-button class="sports-event-compact-button sports-event-compact-button--cancel" :loading="subLoading" @click="cancelApply(row)" round
|
||||
size="small" type="default"
|
||||
v-if="activityData.applyWay.includes(1)&&row.userApply2>0">
|
||||
<i class="fa fa-trash"></i>取消报名
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"
|
||||
v-else></van-empty>
|
||||
<div class="sports-event-empty" v-else>
|
||||
<img src="/assets/mobile/img/activity/sports-empty.png" alt="体育活动项目空状态插画">
|
||||
<div class="sports-event-empty__title">暂无可报名项目</div>
|
||||
<div class="sports-event-empty__hint">当前活动暂未发布可报名项目</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -118,18 +754,24 @@ layout("/layouts/platform_h5.html"){
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
refreshing: false,
|
||||
pageForm: {
|
||||
activityId: GetQueryString("activityId"),
|
||||
searchKeyword: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0
|
||||
},
|
||||
subLoading: false,
|
||||
activityData: {}
|
||||
activityData: {},
|
||||
viewMode: "card"
|
||||
}
|
||||
},
|
||||
components: {},
|
||||
methods: {
|
||||
toggleViewMode() {
|
||||
this.viewMode = this.viewMode === "card" ? "list" : "card"
|
||||
},
|
||||
openApplyUser() {
|
||||
},
|
||||
cancelApply(row) {
|
||||
@@ -201,9 +843,13 @@ layout("/layouts/platform_h5.html"){
|
||||
this.tableKey = new Date().getTime()
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.finished = false
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
},
|
||||
onRefresh() {
|
||||
this.doSearch()
|
||||
},
|
||||
pageData() {
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/activity/apply/h5/pageData", {data: JSON.stringify(this.pageForm)}).then((res) => {
|
||||
@@ -214,7 +860,9 @@ layout("/layouts/platform_h5.html"){
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@@ -1,16 +1,47 @@
|
||||
let ACTIVITY_EVENT_NOTIFICATION = {
|
||||
template: `
|
||||
<div>
|
||||
<van-popup :style="{ height: '100%',width: '100%'}" position="right" safe-area-inset-bottom v-model="viewShow">
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="viewShow=false" left-arrow left-text="返回" title="活动通知"></van-nav-bar>
|
||||
</van-sticky>
|
||||
<div style="height: calc(100vh - 44px); overflow-y: auto">
|
||||
<div v-html="event_notification"class="paddingX10" style="padding-bottom: 44px;white-space: pre-wrap;overflow-x: hidden" v-if="event_notification"></div>
|
||||
<div v-else>暂无</div>
|
||||
<van-button @click="openReg" block style="position: fixed; bottom: 0;"
|
||||
type="primary">进入报名
|
||||
</van-button>
|
||||
<div class="activity-notification-component">
|
||||
<van-popup
|
||||
v-model="viewShow"
|
||||
class="activity-notification-popup"
|
||||
:style="{ height: '100%', width: '100%' }"
|
||||
position="right"
|
||||
safe-area-inset-bottom
|
||||
>
|
||||
<div class="activity-notification-page">
|
||||
<van-sticky>
|
||||
<van-nav-bar
|
||||
title="活动通知"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
@click-left="viewShow = false"
|
||||
></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<div class="activity-notification-scroll">
|
||||
<div class="activity-notification-hero">
|
||||
<div class="activity-notification-hero__icon">
|
||||
<van-icon name="description"></van-icon>
|
||||
</div>
|
||||
<div>
|
||||
<div class="activity-notification-hero__title">活动报名须知</div>
|
||||
<div class="activity-notification-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article v-if="event_notification" class="activity-notification-card">
|
||||
<div class="activity-notification-content" v-html="event_notification"></div>
|
||||
</article>
|
||||
<div v-else class="activity-notification-empty">
|
||||
<van-icon name="description"></van-icon>
|
||||
<span>暂无活动通知</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="activity-notification-footer">
|
||||
<van-button v-if="inApplyTime" type="primary" round block @click="openReg">进入报名</van-button>
|
||||
<van-button v-else class="is-disabled" disabled round block>{{ applyStatusText }}</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
@@ -21,6 +52,12 @@ let ACTIVITY_EVENT_NOTIFICATION = {
|
||||
},
|
||||
id: {
|
||||
value: { type: String, default: "暂无" }
|
||||
},
|
||||
apply_start_time: {
|
||||
value: { type: String, default: "" }
|
||||
},
|
||||
apply_end_time: {
|
||||
value: { type: String, default: "" }
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -28,9 +65,189 @@ let ACTIVITY_EVENT_NOTIFICATION = {
|
||||
viewShow: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 详情页统一控制报名入口状态，活动列表仅负责进入详情。
|
||||
inApplyTime() {
|
||||
if (!this.apply_start_time || !this.apply_end_time) return false
|
||||
const now = Date.now()
|
||||
return now >= this.$moment(this.apply_start_time).valueOf()
|
||||
&& now <= this.$moment(this.apply_end_time).valueOf()
|
||||
},
|
||||
applyStatusText() {
|
||||
if (!this.apply_start_time || !this.apply_end_time) return "当前不可报名"
|
||||
if (Date.now() < this.$moment(this.apply_start_time).valueOf()) return "报名未开始"
|
||||
return "已过报名时间"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openReg() {
|
||||
this.$pjaxReplace("/platform/activity/apply/h5/eventList?activityId=" + this.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.activity-notification-popup {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.activity-notification-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.activity-notification-page /deep/ .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.activity-notification-page /deep/ .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.activity-notification-page /deep/ .van-nav-bar .van-icon,
|
||||
.activity-notification-page /deep/ .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.activity-notification-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activity-notification-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
}
|
||||
|
||||
.activity-notification-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.activity-notification-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.activity-notification-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.activity-notification-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.activity-notification-content {
|
||||
color: #3f4c5e;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.activity-notification-content /deep/ h1,
|
||||
.activity-notification-content /deep/ h2,
|
||||
.activity-notification-content /deep/ h3 {
|
||||
margin: 0 0 12px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 20px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.activity-notification-content /deep/ p {
|
||||
margin: 0 0 8px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
.activity-notification-content /deep/ img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.activity-notification-content /deep/ table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.activity-notification-empty {
|
||||
display: flex;
|
||||
min-height: 180px;
|
||||
margin-top: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
border-radius: 12px;
|
||||
color: #9aa7b8;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.activity-notification-empty /deep/ .van-icon {
|
||||
color: #83b5f4;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.activity-notification-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.activity-notification-footer /deep/ .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
font-size: 15px;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
|
||||
.activity-notification-footer /deep/ .van-button.is-disabled,
|
||||
.activity-notification-footer /deep/ .van-button--disabled {
|
||||
color: #8b98aa !important;
|
||||
background-color: #eef2f7 !important;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@@ -2,93 +2,621 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
.info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.info-container {
|
||||
margin-bottom: 60px;
|
||||
|
||||
.brand-activity-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.brand-activity-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
.info-img {
|
||||
display: block;
|
||||
|
||||
.brand-activity-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-count-down {
|
||||
|
||||
.brand-activity-page .van-nav-bar .van-icon,
|
||||
.brand-activity-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.brand-activity-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.brand-activity-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background-color: #247fe8;
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.brand-activity-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.brand-activity-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 64%;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(90deg, rgba(22, 112, 232, .98) 0%, rgba(22, 112, 232, .88) 52%, rgba(22, 112, 232, 0) 100%);
|
||||
}
|
||||
|
||||
.brand-activity-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 2px 6px rgba(17, 86, 182, .18);
|
||||
}
|
||||
|
||||
.brand-activity-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.brand-activity-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .brand-activity-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-activity-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.brand-activity-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.brand-activity-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-activity-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.brand-activity-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.brand-activity-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__item {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__title {
|
||||
width: auto;
|
||||
max-width: calc(100% - 24px);
|
||||
padding: 0 12px 0 0;
|
||||
overflow: hidden;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__title::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__title--active,
|
||||
.brand-activity-filter .van-dropdown-item__option--active,
|
||||
.brand-activity-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.brand-activity-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand-activity-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover,
|
||||
.brand-activity-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.brand-activity-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.brand-activity-card__body {
|
||||
padding: 12px 38px 14px 14px;
|
||||
}
|
||||
|
||||
.brand-activity-card__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-activity-card__time {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-activity-card__meta {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.brand-activity-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.brand-activity-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.brand-activity-card__arrow {
|
||||
position: absolute;
|
||||
top: 164px;
|
||||
right: 14px;
|
||||
color: #b4bdca;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.brand-activity-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-activity-empty img {
|
||||
display: block;
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-activity-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-activity-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.brand-activity-page .van-list__loading {
|
||||
color: #9aa7b8;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.brand-intro-popup,
|
||||
.brand-intro-page {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.brand-intro-page {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.brand-intro-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.brand-intro-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.brand-intro-page .van-nav-bar .van-icon,
|
||||
.brand-intro-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.brand-intro-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-intro-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
}
|
||||
|
||||
.brand-intro-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.brand-intro-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-intro-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.brand-intro-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.brand-intro-content,
|
||||
.brand-intro-content div,
|
||||
.brand-intro-content p,
|
||||
.brand-intro-content span,
|
||||
.brand-intro-content li {
|
||||
color: #3f4c5e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.brand-intro-content h1,
|
||||
.brand-intro-content h2,
|
||||
.brand-intro-content h3 {
|
||||
margin: 16px 0 10px !important;
|
||||
color: #1f2f43 !important;
|
||||
font-size: 19px !important;
|
||||
line-height: 1.5 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.brand-intro-content > :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.brand-intro-content p {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.brand-intro-content img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.brand-intro-content table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.brand-intro-empty {
|
||||
display: flex;
|
||||
min-height: 180px;
|
||||
margin-top: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
border-radius: 12px;
|
||||
color: #9aa7b8;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-intro-empty .van-icon {
|
||||
color: #83b5f4;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.brand-intro-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-intro-footer .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
font-size: 15px;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
|
||||
.brand-intro-footer .van-button--disabled {
|
||||
color: #8b98aa !important;
|
||||
background-color: #eef2f7 !important;
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.brand-intro-footer .van-count-down {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="品牌活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<div id="app" v-cloak>
|
||||
<div class="brand-activity-page">
|
||||
<van-nav-bar title="品牌活动" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/trainSignUp/apply/activityPageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="activityName"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="面向对象">{{row.activityGroupName}}</table-column>
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<template v-if="$moment().isBefore($moment(row.activitySignUpEndTime))">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看介绍</span>
|
||||
<div class="brand-activity-content">
|
||||
<section class="brand-activity-hero">
|
||||
<img class="brand-activity-hero__image" src="/assets/mobile/img/activity/hero/brand-hero-v2.png" alt="品牌活动插画">
|
||||
<div class="brand-activity-hero__copy">
|
||||
<div class="brand-activity-hero__title">品牌活动</div>
|
||||
<div class="brand-activity-hero__subtitle">品牌引领 · 成长同行</div>
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>去报名</span>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="brand-activity-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
class="brand-activity-search"
|
||||
placeholder="搜索品牌活动"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu class="brand-activity-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</table-list>
|
||||
</van-sticky>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
|
||||
<div class="brand-activity-list">
|
||||
<div v-for="row in tableData" :key="row.id" class="brand-activity-card" @click="onView(row)">
|
||||
<img
|
||||
v-if="hasCover(row) && !imageLoadErrors[row.id]"
|
||||
class="brand-activity-card__cover"
|
||||
:src="row.cover"
|
||||
:alt="row.activityName"
|
||||
@error="handleImageError(row)"
|
||||
>
|
||||
<div v-else class="brand-activity-card__cover-state" :class="{'is-error': hasCover(row)}">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="brand-activity-card__body">
|
||||
<div class="brand-activity-card__title">{{ row.activityName }}</div>
|
||||
<div class="brand-activity-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
|
||||
报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="brand-activity-card__time" v-if="row.activityStartTime && row.activityEndTime">
|
||||
活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="brand-activity-card__meta" v-if="row.activityGroupName || row.trainType">
|
||||
<span class="brand-activity-card__tag" v-if="row.activityGroupName">
|
||||
<span class="brand-activity-card__tag-label">面向对象</span>{{ row.activityGroupName }}
|
||||
</span>
|
||||
<span class="brand-activity-card__tag" v-if="row.trainType">
|
||||
<span class="brand-activity-card__tag-label">活动类型</span>{{ row.trainType }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<van-icon class="brand-activity-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="!loading && tableData.length === 0" class="brand-activity-empty">
|
||||
<img src="/assets/mobile/img/activity/culture-empty.png" alt="品牌活动空状态插画">
|
||||
<div class="brand-activity-empty__title">暂无品牌活动</div>
|
||||
<div class="brand-activity-empty__hint">当前筛选条件下暂时没有可展示的活动</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-container">
|
||||
<div>
|
||||
<van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
|
||||
<div class="info-title">{{infoRow.activityName}}</div>
|
||||
<pdf-preview :content="infoRow.introduce"></pdf-preview>
|
||||
<van-popup class="brand-intro-popup" :style="{height: '100%', width: '100%'}" position="right" safe-area-inset-bottom v-model="infoVisible">
|
||||
<div class="brand-intro-page">
|
||||
<van-sticky>
|
||||
<van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
|
||||
</van-sticky>
|
||||
<div class="brand-intro-scroll">
|
||||
<div class="brand-intro-hero">
|
||||
<div class="brand-intro-hero__icon">
|
||||
<van-icon name="description"></van-icon>
|
||||
</div>
|
||||
<div>
|
||||
<div class="brand-intro-hero__title">活动报名须知</div>
|
||||
<div class="brand-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
<article v-if="infoRow.introduce" class="brand-intro-card">
|
||||
<div class="brand-intro-content" v-html="infoRow.introduce"></div>
|
||||
</article>
|
||||
<div v-else class="brand-intro-empty">
|
||||
<van-icon name="description"></van-icon>
|
||||
<span>暂无活动介绍</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<van-button @click="onApply(infoRow)" type="primary" block>
|
||||
<span v-if="time >= 0">
|
||||
去报名
|
||||
</span>
|
||||
<template v-else>
|
||||
距离开始
|
||||
<van-count-down :time="Math.abs(time)" class="count-down" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
|
||||
</template>
|
||||
<div class="brand-intro-footer">
|
||||
<van-button v-if="canApply(infoRow)" @click="onApply(infoRow)" type="primary" block round>进入报名</van-button>
|
||||
<van-button v-else-if="time < 0" @click="onApply(infoRow)" type="primary" block round>
|
||||
距离开始
|
||||
<van-count-down :time="Math.abs(time)" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
|
||||
</van-button>
|
||||
<van-button v-else disabled block round>{{ registrationStatusText(infoRow) }}</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
@@ -96,11 +624,16 @@ layout("/layouts/platform_h5.html"){
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: 0,
|
||||
tableData: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
@@ -121,12 +654,41 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
isRegistrationClosed(row) {
|
||||
return !!(row && row.activitySignUpEndTime && !this.$moment().isBefore(this.$moment(row.activitySignUpEndTime)))
|
||||
},
|
||||
canApply(row) {
|
||||
if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
|
||||
return false
|
||||
}
|
||||
const now = Date.now()
|
||||
return now >= this.$moment(row.activitySignUpStartTime).valueOf()
|
||||
&& now <= this.$moment(row.activitySignUpEndTime).valueOf()
|
||||
},
|
||||
registrationStatusText(row) {
|
||||
if(!row || !row.activitySignUpStartTime || !row.activitySignUpEndTime) {
|
||||
return '当前不可报名'
|
||||
}
|
||||
if(Date.now() < this.$moment(row.activitySignUpStartTime).valueOf()) {
|
||||
return '报名未开始'
|
||||
}
|
||||
return '已过报名时间'
|
||||
},
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.time = this.$moment().diff(this.$moment(row.activitySignUpStartTime), 'milliseconds')
|
||||
this.infoVisible = true
|
||||
},
|
||||
onApply(row) {
|
||||
if(this.isRegistrationClosed(row)) {
|
||||
return
|
||||
}
|
||||
if(this.$moment().isBefore(this.$moment(row.activitySignUpStartTime))) {
|
||||
this.onView(row)
|
||||
return
|
||||
@@ -151,22 +713,47 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
if(this.id) {
|
||||
this.fetchOne()
|
||||
onLoad() {
|
||||
if(!this.finished) {
|
||||
this.loadActivities(false)
|
||||
}
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
onRefresh() {
|
||||
this.loadActivities(true)
|
||||
},
|
||||
loadActivities(reset) {
|
||||
if(reset) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.imageLoadErrors = {}
|
||||
}
|
||||
this.loading = true
|
||||
this.$axios.post('/platform/trainSignUp/apply/activityPageData', this.pageForm).then((res) => {
|
||||
if(res.code === 0) {
|
||||
const list = res.data && res.data.list ? res.data.list : []
|
||||
this.tableData = this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0
|
||||
this.finished = this.tableData.length >= this.pageForm.totalCount
|
||||
if(!this.finished) {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
created() {
|
||||
this.loadActivities(true)
|
||||
if(this.id) {
|
||||
this.fetchOne()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -3,9 +3,10 @@ const times = {
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<van-action-sheet v-model="visible" title="时间段" cancel-text="取消">
|
||||
<div id="mapContainer" v-if="row?.isMobileSign === true && row?.signType === 3" style="width: 100%; height: 250px"></div>
|
||||
<button v-for="(item,index) in row?.courseTimes" type="button" class="van-action-sheet__item">
|
||||
<van-action-sheet class="brand-course-times-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" v-model="visible" title="时间段" cancel-text="取消">
|
||||
<div class="brand-course-times-list">
|
||||
<div id="mapContainer" v-if="row?.isMobileSign === true && row?.signType === 3" class="brand-course-times-map"></div>
|
||||
<button v-for="(item,index) in row?.courseTimes" :key="index" type="button" class="van-action-sheet__item brand-course-time-item">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div>
|
||||
<div class="van-action-sheet__name">
|
||||
@@ -22,6 +23,7 @@ const times = {
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
<van-popup round :safe-area-inset-bottom="true"
|
||||
@@ -215,6 +217,70 @@ const times = {
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
|
||||
.brand-course-times-sheet {
|
||||
overflow: hidden;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__header {
|
||||
height: 48px;
|
||||
color: #1f2f43;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__close {
|
||||
top: 13px;
|
||||
color: #b5bdc9;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.brand-course-times-list {
|
||||
height: calc(100% - 98px);
|
||||
padding: 10px 12px 0;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-course-times-map {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .brand-course-time-item {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__name {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__subname {
|
||||
margin-top: 5px;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.brand-course-times-sheet /deep/ .van-action-sheet__cancel {
|
||||
height: 50px;
|
||||
color: #66758a;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ const applyForm = {
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<van-action-sheet :close-on-click-overlay="false" title="报名信息" v-model="visible">
|
||||
<van-action-sheet class="brand-course-form-sheet" :style="{height: '78%'}" :close-on-click-overlay="true" title="报名信息" v-model="visible">
|
||||
<van-form ref="formRef" class="form-container">
|
||||
<van-cell-group title="活动信息" class="form-section">
|
||||
<van-field label="活动名称" readonly v-model="row.courseName"></van-field>
|
||||
@@ -150,10 +150,90 @@ const applyForm = {
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
/deep/ .button {
|
||||
position: fixed;
|
||||
.brand-course-form-sheet {
|
||||
overflow: hidden;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-action-sheet__header {
|
||||
height: 48px;
|
||||
color: #1f2f43;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-action-sheet__close {
|
||||
top: 13px;
|
||||
color: #b5bdc9;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .form-container {
|
||||
height: calc(100% - 48px);
|
||||
padding: 10px 12px 72px;
|
||||
overflow-y: auto;
|
||||
background-color: #f3f7fd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .form-section {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 18px rgba(55, 85, 126, .07);
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-cell-group__title {
|
||||
padding: 12px 14px 8px;
|
||||
color: #263548;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-cell-group__title::before {
|
||||
width: 3px;
|
||||
top: 12px;
|
||||
bottom: 8px;
|
||||
border-radius: 2px;
|
||||
background-color: #1989fa;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-cell {
|
||||
padding: 11px 14px;
|
||||
color: #263548;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .van-field__label {
|
||||
color: #66758a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: rgba(255, 255, 255, .96);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-course-form-sheet /deep/ .button .van-button {
|
||||
height: 42px;
|
||||
border: 0;
|
||||
border-radius: 21px;
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 6px 16px rgba(25, 137, 250, .22);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,91 +2,475 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style scoped>
|
||||
.info-title {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
padding: 13px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
text-align: center !important;
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.info-container {
|
||||
|
||||
.brand-mine-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.brand-mine-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
.info-img {
|
||||
display: block;
|
||||
|
||||
.brand-mine-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-count-down {
|
||||
|
||||
.brand-mine-page .van-nav-bar .van-icon,
|
||||
.brand-mine-page .van-nav-bar__text {
|
||||
color: #397fbd;
|
||||
}
|
||||
|
||||
.brand-mine-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.brand-mine-hero {
|
||||
position: relative;
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
background: linear-gradient(115deg, #347eea 0%, #5b9cf4 58%, #cfe3ff 100%);
|
||||
box-shadow: 0 8px 20px rgba(51, 117, 219, .18);
|
||||
}
|
||||
|
||||
.brand-mine-hero__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 67%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: right center;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
|
||||
mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
|
||||
}
|
||||
|
||||
.brand-mine-hero__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-left: 16px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.brand-mine-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.brand-mine-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .brand-mine-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-search {
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.brand-mine-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.brand-mine-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-mine-filter {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.brand-mine-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.brand-mine-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.brand-mine-filter .van-dropdown-menu__title {
|
||||
width: auto;
|
||||
max-width: calc(100% - 24px);
|
||||
padding: 0 12px 0 0;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.brand-mine-filter .van-dropdown-menu__title::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.brand-mine-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand-mine-card {
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
}
|
||||
|
||||
.brand-mine-card__cover,
|
||||
.brand-mine-card__cover-state {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #edf4fc;
|
||||
}
|
||||
|
||||
.brand-mine-card__cover {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.brand-mine-card__cover-state {
|
||||
flex-direction: column;
|
||||
row-gap: 8px;
|
||||
color: #8da1ba;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.brand-mine-card__cover-state .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.brand-mine-card__cover-state.is-error {
|
||||
color: #c27b75;
|
||||
background-color: #fff3f1;
|
||||
}
|
||||
|
||||
.brand-mine-card__body {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.brand-mine-card__title {
|
||||
overflow: hidden;
|
||||
color: #303846;
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-mine-card__time {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: #98a2b2;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-mine-card__meta {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
}
|
||||
|
||||
.brand-mine-card__tag {
|
||||
display: inline-flex;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.brand-mine-card__tag-label {
|
||||
margin-right: 4px;
|
||||
color: #8aa7cf;
|
||||
}
|
||||
|
||||
.brand-mine-card__actions {
|
||||
display: flex;
|
||||
padding: 12px 14px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
border-top: 1px solid #edf1f6;
|
||||
background-color: #f8fbff;
|
||||
}
|
||||
|
||||
.brand-mine-card__action {
|
||||
display: inline-flex;
|
||||
min-width: 82px;
|
||||
height: 32px;
|
||||
padding: 0 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: 16px;
|
||||
color: #397de0;
|
||||
background-color: #edf5ff;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-card__action .van-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.brand-mine-card__action.is-primary {
|
||||
color: #fff;
|
||||
background-color: #1989fa;
|
||||
box-shadow: 0 5px 12px rgba(25, 137, 250, .18);
|
||||
}
|
||||
|
||||
.brand-mine-empty {
|
||||
display: flex;
|
||||
min-height: 260px;
|
||||
padding: 26px 18px 32px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-mine-empty img {
|
||||
width: 82%;
|
||||
max-width: 280px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-mine-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand-mine-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.brand-mine-intro-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.brand-mine-intro-scroll {
|
||||
height: calc(100vh - 46px);
|
||||
padding: 12px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-intro-hero {
|
||||
display: flex;
|
||||
min-height: 82px;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #2d7eea 0%, #5ba6f7 100%);
|
||||
box-shadow: 0 8px 20px rgba(45, 126, 234, .18);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-mine-intro-hero__icon {
|
||||
display: flex;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-right: 12px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 44px;
|
||||
border-radius: 11px;
|
||||
color: #2d7eea;
|
||||
background-color: rgba(255, 255, 255, .92);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.brand-mine-intro-hero__title {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.brand-mine-intro-hero__subtitle {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.brand-mine-intro-card {
|
||||
margin-top: 12px;
|
||||
padding: 18px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
color: #3f4c5e;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.brand-mine-intro-card img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="品牌活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<div id="app" v-cloak>
|
||||
<div class="brand-mine-page">
|
||||
<van-nav-bar title="品牌活动-我的报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<div class="brand-mine-content">
|
||||
<section class="brand-mine-hero">
|
||||
<img class="brand-mine-hero__image" src="/assets/mobile/img/home/v4/feature-activity.png" alt="品牌活动插画">
|
||||
<div class="brand-mine-hero__copy">
|
||||
<div class="brand-mine-hero__title">我的报名</div>
|
||||
<div class="brand-mine-hero__subtitle">品牌活动 · 报名记录</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<table-list api="/platform/trainSignUp/apply/activityPageData"
|
||||
:page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
title="activityName"
|
||||
img="cover"
|
||||
@ready="onReady"
|
||||
>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="面向对象">{{row.activityGroupName}}</table-column>
|
||||
<table-column label="报名时间">
|
||||
{{$moment(row.activitySignUpStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activitySignUpEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
<table-column label="活动时间">
|
||||
{{$moment(row.activityStartTime).format('MM/DD HH:mm') + '~' + $moment(row.activityEndTime).format('MM/DD HH:mm')}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看介绍</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="brand-mine-sticky">
|
||||
<van-search v-model="pageForm.searchKeyword" class="brand-mine-search" placeholder="搜索已报名活动" shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
|
||||
<van-dropdown-menu class="brand-mine-filter" :class="{'is-open': filterOpened}" active-color="#1989fa">
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.activityType" :options="typeOptions" :multiple="false" @change="doSearch" @open="filterOpened = true" @close="filterOpened = false"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="活动详细信息" v-model="infoVisible" cancel-text="取消">
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model="loading" :finished="finished" :immediate-check="false" @load="onLoad">
|
||||
<div class="brand-mine-list">
|
||||
<div v-for="row in tableData" :key="row.id" class="brand-mine-card">
|
||||
<img v-if="hasCover(row) && !imageLoadErrors[row.id]" class="brand-mine-card__cover" :src="row.cover" :alt="row.activityName" @error="handleImageError(row)">
|
||||
<div v-else class="brand-mine-card__cover-state" :class="{'is-error': hasCover(row)}">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>{{ hasCover(row) ? '图片加载失败' : '暂无图片' }}</span>
|
||||
</div>
|
||||
<div class="brand-mine-card__body">
|
||||
<div class="brand-mine-card__title">{{ row.activityName }}</div>
|
||||
<div class="brand-mine-card__time" v-if="row.activitySignUpStartTime && row.activitySignUpEndTime">
|
||||
报名时间：{{ $moment(row.activitySignUpStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activitySignUpEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="brand-mine-card__time" v-if="row.activityStartTime && row.activityEndTime">
|
||||
活动时间：{{ $moment(row.activityStartTime).format('MM/DD HH:mm') }}~{{ $moment(row.activityEndTime).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="brand-mine-card__meta" v-if="row.activityGroupName || row.trainType">
|
||||
<span class="brand-mine-card__tag" v-if="row.activityGroupName"><span class="brand-mine-card__tag-label">面向对象</span>{{ row.activityGroupName }}</span>
|
||||
<span class="brand-mine-card__tag" v-if="row.trainType"><span class="brand-mine-card__tag-label">活动类型</span>{{ row.trainType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand-mine-card__actions">
|
||||
<button type="button" class="brand-mine-card__action" @click="onView(row)"><van-icon name="eye-o"></van-icon>查看介绍</button>
|
||||
<button type="button" class="brand-mine-card__action is-primary" @click="onApply(row)"><van-icon name="edit"></van-icon>查看报名</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="!loading && tableData.length === 0" class="brand-mine-empty">
|
||||
<img src="/assets/mobile/img/activity/culture-empty.png" alt="品牌活动报名空状态插画">
|
||||
<div class="brand-mine-empty__title">暂无报名记录</div>
|
||||
<div class="brand-mine-empty__hint">当前筛选条件下暂时没有已报名活动</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-container">
|
||||
<div>
|
||||
<van-image class="info-img" height="186" width="100%" :src="infoRow.cover"></van-image>
|
||||
<div class="info-title">{{infoRow.activityName}}</div>
|
||||
<pdf-preview :content="infoRow.introduce"></pdf-preview>
|
||||
<van-popup :style="{height: '100%', width: '100%'}" position="right" v-model="infoVisible">
|
||||
<div class="brand-mine-intro-page">
|
||||
<van-nav-bar title="活动介绍" left-text="返回" left-arrow @click-left="infoVisible = false"></van-nav-bar>
|
||||
<div class="brand-mine-intro-scroll">
|
||||
<div class="brand-mine-intro-hero">
|
||||
<div class="brand-mine-intro-hero__icon"><van-icon name="description"></van-icon></div>
|
||||
<div>
|
||||
<div class="brand-mine-intro-hero__title">活动报名须知</div>
|
||||
<div class="brand-mine-intro-hero__subtitle">请仔细阅读活动安排与报名要求</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="infoRow.introduce" class="brand-mine-intro-card" v-html="infoRow.introduce"></div>
|
||||
<div v-else class="brand-mine-intro-card">暂无活动介绍</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"pdf-preview": httpVueLoader("/components/plugins/sysFilePreview/PdfIndex.vue?v=" + new Date().getTime())
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
imageLoadErrors: {},
|
||||
filterOpened: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
@@ -106,6 +490,12 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hasCover(row) {
|
||||
return !!(row && row.cover && String(row.cover).trim())
|
||||
},
|
||||
handleImageError(row) {
|
||||
this.$set(this.imageLoadErrors, row.id, true)
|
||||
},
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.infoVisible = true
|
||||
@@ -113,17 +503,45 @@ layout("/layouts/platform_h5.html"){
|
||||
onApply(row) {
|
||||
this.$pjaxReplace('/platform/trainSignUp/apply/list/h5?id=' + row.id + '&dataType=mine')
|
||||
},
|
||||
onReady() {
|
||||
this.doSearch()
|
||||
onLoad() {
|
||||
if(!this.finished) {
|
||||
this.loadActivities(false)
|
||||
}
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
onRefresh() {
|
||||
this.loadActivities(true)
|
||||
},
|
||||
loadActivities(reset) {
|
||||
if(reset) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.imageLoadErrors = {}
|
||||
}
|
||||
this.loading = true
|
||||
this.$axios.post('/platform/trainSignUp/apply/activityPageData', this.pageForm).then((res) => {
|
||||
if(res.code === 0) {
|
||||
const list = res.data && res.data.list ? res.data.list : []
|
||||
this.tableData = this.pageForm.pageNumber === 1 ? list : this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data && res.data.totalCount ? res.data.totalCount : 0
|
||||
this.finished = this.tableData.length >= this.pageForm.totalCount
|
||||
if(!this.finished) {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
this.refreshing = false
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadActivities(true)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@@ -166,7 +166,7 @@ layout("/layouts/platform_tour_signup_h5.html"){
|
||||
</style>
|
||||
|
||||
<div id="app" class="tour-signup-h5">
|
||||
<van-nav-bar title="疗休养报名" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<van-nav-bar title="疗休养报名" left-text="返回" left-arrow @click-left="$pjaxReplace('/platform/h5/home')" fixed placeholder></van-nav-bar>
|
||||
|
||||
<div class="tour-signup-banner">
|
||||
<van-swipe class="tour-signup-swipe" :autoplay="3500" indicator-color="white">
|
||||
@@ -438,7 +438,7 @@ layout("/layouts/platform_tour_signup_h5.html"){
|
||||
if (this.readCountdown > 0) {
|
||||
return
|
||||
}
|
||||
window.location.href = "/platform/tour/signup/h5/signup"
|
||||
this.$pjaxReplace('/platform/tour/signup/h5/signup')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -0,0 +1,454 @@
|
||||
.proposal-view-page {
|
||||
--proposal-view-primary: #1677ee;
|
||||
--proposal-view-text: #354255;
|
||||
--proposal-view-muted: #8a97a8;
|
||||
min-height: 100%;
|
||||
padding-bottom: calc(20px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
color: var(--proposal-view-text);
|
||||
background: #f3f7fc;
|
||||
}
|
||||
|
||||
/* 提案 H5 列表统一使用全屏 Popup 承载详情和办理表单。 */
|
||||
.proposal-full-popup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #f3f7fc;
|
||||
}
|
||||
|
||||
.proposal-full-popup__page {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-top: 46px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.proposal-full-popup__page > .van-nav-bar {
|
||||
z-index: 20;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.proposal-full-popup__scroll {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.proposal-full-popup__scroll .proposal-view-main {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.proposal-popup-form-actions {
|
||||
display: flex;
|
||||
padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
|
||||
justify-content: space-between;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.proposal-action-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.reply-unit-popup {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.reply-unit-toolbar {
|
||||
display: grid;
|
||||
min-height: 48px;
|
||||
border-bottom: 1px solid #eee;
|
||||
grid-template-columns: 64px 1fr 64px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reply-unit-toolbar button {
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.reply-unit-toolbar button:last-child {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.reply-unit-toolbar-title {
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reply-unit-list {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.reply-unit-empty {
|
||||
padding: 48px 16px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.transfer-dialog {
|
||||
padding: 18px 16px 76px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.proposal-info-card {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.proposal-info-card .info-item {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: column;
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
.proposal-info-card .info-item label {
|
||||
color: #969799;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.proposal-full-popup__page > .button-group {
|
||||
display: flex;
|
||||
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.proposal-view-main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 12px 15px 0;
|
||||
}
|
||||
|
||||
.proposal-view-card {
|
||||
margin-bottom: 11px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e9eff7;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 3px 11px rgba(51, 87, 126, 0.08);
|
||||
}
|
||||
|
||||
.proposal-view-card__title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 12px 14px 8px 21px;
|
||||
color: #354255;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.proposal-view-card__title::before {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
bottom: 11px;
|
||||
left: 12px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--proposal-view-primary);
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* 审核、附议、反馈及答复输入框统一复用提案查询 Card 的视觉规范。 */
|
||||
.proposal-audit-card__required {
|
||||
margin-left: 4px;
|
||||
color: #ee0a24;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-field.proposal-audit-field {
|
||||
width: calc(100% - 28px);
|
||||
margin: 0 14px 14px;
|
||||
padding: 12px;
|
||||
border: 1px solid #c9d5e5;
|
||||
border-radius: 10px;
|
||||
background-color: #f7f9fd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-field.proposal-audit-field .van-field__control {
|
||||
min-height: 150px;
|
||||
color: #253247;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-field.proposal-audit-field .van-field__control::placeholder {
|
||||
color: #9aa7b8;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-field.proposal-audit-field .van-field__word-limit {
|
||||
color: #718096;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-field.proposal-audit-field::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-cell-group {
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-cell {
|
||||
min-height: 44px;
|
||||
padding: 10px 14px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-cell:not(:last-child)::after {
|
||||
right: 14px;
|
||||
left: 14px;
|
||||
border-color: #eef2f7;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-cell__title {
|
||||
flex: 0 0 92px;
|
||||
width: 92px;
|
||||
color: #596779;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-cell__value {
|
||||
min-width: 0;
|
||||
color: #4f5d70;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.proposal-view-card .proposal-view-long-cell {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.proposal-view-card .proposal-view-long-cell .van-cell__title {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.proposal-view-card .proposal-view-long-cell .van-cell__value {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.proposal-view-rich-value,
|
||||
.proposal-view-rich-value * {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.proposal-view-rich-value img,
|
||||
.proposal-view-rich-value image {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.proposal-view-card .van-tag {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.proposal-view-merge-cell .van-cell__title {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.proposal-view-merge-cell .van-cell__label {
|
||||
margin-top: 4px;
|
||||
color: var(--proposal-view-muted);
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.proposal-flow-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.proposal-flow-card__hint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-right: 14px;
|
||||
color: var(--proposal-view-muted);
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-flow-card__hint .van-icon {
|
||||
margin-left: 4px;
|
||||
color: #7f8da0;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.proposal-flow-scroll {
|
||||
width: 100%;
|
||||
padding: 4px 14px 15px;
|
||||
overflow-x: auto;
|
||||
box-sizing: border-box;
|
||||
scroll-behavior: smooth;
|
||||
scroll-snap-type: x proximity;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.proposal-flow-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proposal-flow-track {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.proposal-flow-track::before {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 52px;
|
||||
left: 52px;
|
||||
height: 2px;
|
||||
background: #d8e9ff;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.proposal-flow-node {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex: 0 0 108px;
|
||||
width: 108px;
|
||||
padding: 0 6px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
color: var(--proposal-view-text);
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
scroll-snap-align: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.proposal-flow-node__icon {
|
||||
display: flex;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 3px solid #ffffff;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
background: var(--proposal-view-primary);
|
||||
box-shadow: 0 2px 7px rgba(22, 119, 238, 0.22);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.proposal-flow-node__icon .van-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.proposal-flow-node__title {
|
||||
display: -webkit-box;
|
||||
min-height: 40px;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
color: #354255;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.proposal-flow-node__handler {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 1px;
|
||||
overflow: hidden;
|
||||
color: var(--proposal-view-muted);
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-flow-node.is-active .proposal-flow-node__icon {
|
||||
box-shadow: 0 0 0 5px #e7f2ff, 0 3px 9px rgba(22, 119, 238, 0.28);
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.proposal-flow-node.is-active .proposal-flow-node__title {
|
||||
color: var(--proposal-view-primary);
|
||||
}
|
||||
|
||||
.proposal-flow-detail__name {
|
||||
margin: 0;
|
||||
padding: 4px 14px 10px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
color: #26364a;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.proposal-flow-detail__tip {
|
||||
padding: 9px 14px 12px;
|
||||
border-top: 1px solid #eef2f7;
|
||||
color: var(--proposal-view-muted);
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal-view-table-wrap {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.proposal-view-table-wrap .el-table {
|
||||
min-width: 560px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.proposal-view-slot:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.proposal-view-main {
|
||||
max-width: 520px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,247 +1,358 @@
|
||||
const PROPOSAL_INFO = {
|
||||
name: "ProposalInfo",
|
||||
template: /*language=HTML*/ `
|
||||
<van-action-sheet v-model="visible" title="查看详情">
|
||||
<div class="detail-container">
|
||||
<van-cell-group title="基本信息">
|
||||
<van-cell title="提案名称">
|
||||
<div style="font-weight:bold;">
|
||||
{{ viewData.name }}
|
||||
<div class="proposal-info-content proposal-view-page">
|
||||
<main class="proposal-view-main">
|
||||
<!-- 编号和名称优先展示，便于手机端进入详情后快速确认当前提案。 -->
|
||||
<section class="proposal-view-card">
|
||||
<h2 class="proposal-view-card__title">提案内容</h2>
|
||||
<van-cell-group :border="false">
|
||||
<van-cell title="提案编号">{{ viewData.code || '--' }}</van-cell>
|
||||
<van-cell title="提案名称">{{ viewData.name || '--' }}</van-cell>
|
||||
<van-cell title="立案编号">{{ viewData.caseFilingCode || '暂无' }}</van-cell>
|
||||
<van-cell title="立案结果" v-if="viewData.caseFilingResult">
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_RESULT"
|
||||
:value="viewData.caseFilingResult"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="立案类型" v-if="viewData.caseFilingType">
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_TYPE"
|
||||
:value="viewData.caseFilingType"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="提案类型">{{ viewData.typeName || '--' }}</van-cell>
|
||||
<van-cell title="提案方式">{{ getDictText(dict.type.PROPOSAL_SOURCE, viewData.source) }}</van-cell>
|
||||
<van-cell title="代表姓名">{{ viewData.createUserName || '--' }}</van-cell>
|
||||
<van-cell title="所属教代会">{{ viewData.sessionName || viewData.fullName || '--' }}</van-cell>
|
||||
<van-cell :title="viewData.committeeName ? '所属委员会' : '所属代表团'">
|
||||
{{ viewData.committeeName || viewData.delegationName || '--' }}
|
||||
</van-cell>
|
||||
<van-cell title="单位">{{ viewData.unitName || '--' }}</van-cell>
|
||||
<van-cell title="联系电话">{{ viewData.mobile || '--' }}</van-cell>
|
||||
<van-cell title="提案时间">{{ viewData.createTime || '--' }}</van-cell>
|
||||
<van-cell title="提案案由" class="proposal-view-long-cell">
|
||||
<div class="proposal-view-rich-value" v-html="viewData.brief || '--'"></div>
|
||||
</van-cell>
|
||||
<van-cell title="建议措施" class="proposal-view-long-cell">
|
||||
<div class="proposal-view-rich-value" v-html="viewData.measures || '--'"></div>
|
||||
</van-cell>
|
||||
<van-cell title="附件" class="proposal-view-long-cell">
|
||||
<file-preview :files="viewData.files" complete_result></file-preview>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
<!-- 并案信息仍支持点击切换当前公共详情组件的数据。 -->
|
||||
<section class="proposal-view-card" v-if="viewData.merges && viewData.merges.length">
|
||||
<h2 class="proposal-view-card__title">并案信息</h2>
|
||||
<van-cell-group :border="false">
|
||||
<van-cell v-for="(merge, index) in viewData.merges"
|
||||
:key="merge.id"
|
||||
class="proposal-view-merge-cell"
|
||||
:title="(index + 1) + '. ' + merge.name"
|
||||
:label="'提案编号：' + merge.code + '｜提案人：' + merge.createUserName + '｜类别：' + merge.typeName + '｜代表团：' + merge.delegationName"
|
||||
is-link
|
||||
@click="openView(merge)">
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
<!-- 每位委员会成员意见独立成卡片，便于手机端逐块阅读。 -->
|
||||
<section class="proposal-view-card"
|
||||
v-for="(opinion, index) in viewData.commissionerOpinions || []"
|
||||
:key="'commissioner-' + index">
|
||||
<h2 class="proposal-view-card__title">委员会成员意见 {{ index + 1 }}</h2>
|
||||
<van-cell-group :border="false">
|
||||
<van-cell title="委员">
|
||||
{{ opinion.commissionerName || '--' }}<template v-if="opinion.commissionerLoginName">（{{ opinion.commissionerLoginName }}）</template>
|
||||
</van-cell>
|
||||
<van-cell title="立案结果">
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_RESULT"
|
||||
:value="opinion.caseFilingResult"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="立案类型" v-if="opinion.caseFilingType">
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_TYPE"
|
||||
:value="opinion.caseFilingType"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="意见" v-if="opinion.opinionText" class="proposal-view-long-cell">
|
||||
<div class="proposal-view-rich-value">{{ opinion.opinionText }}</div>
|
||||
</van-cell>
|
||||
<van-cell title="时间" v-if="opinion.opinionTime">{{ opinion.opinionTime }}</van-cell>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
<!-- 已办 WF 任务压缩为横向时间轴，节点仅展示名称和办理人。 -->
|
||||
<section class="proposal-view-card proposal-flow-card" v-if="doneTasks && doneTasks.length">
|
||||
<div class="proposal-flow-card__header">
|
||||
<h2 class="proposal-view-card__title">审批流程</h2>
|
||||
<span class="proposal-flow-card__hint">
|
||||
左右滑动查看
|
||||
<van-icon name="exchange"></van-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="proposal-flow-scroll" ref="workflowScroll">
|
||||
<div class="proposal-flow-track">
|
||||
<button type="button"
|
||||
ref="workflowNode"
|
||||
class="proposal-flow-node"
|
||||
:class="{'is-active': selectedTask && selectedTask.id === task.id}"
|
||||
v-for="(task, index) in doneTasks"
|
||||
:key="task.id"
|
||||
@click="selectTask(task)">
|
||||
<span class="proposal-flow-node__icon">
|
||||
<van-icon :name="getTaskNodeIcon(task, index)"></van-icon>
|
||||
</span>
|
||||
<span class="proposal-flow-node__title">{{ task.displayName || '--' }}</span>
|
||||
<span class="proposal-flow-node__handler">{{ getTaskHandlerName(task) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</van-cell>
|
||||
<van-cell title="提案编号">{{ viewData.code }}</van-cell>
|
||||
<van-cell title="立案编号">{{ viewData.caseFilingCode || '暂无' }}</van-cell>
|
||||
<van-cell title="提案人">{{ viewData.createUserName }}</van-cell>
|
||||
<van-cell title="提案时间">{{ viewData.createTime }}</van-cell>
|
||||
<van-cell title="教代会届次">{{ viewData.fullName }}</van-cell>
|
||||
<van-cell title="提案人单位">{{ viewData.unitName }}</van-cell>
|
||||
<van-cell :title="viewData.mannerCode!=='W03'?'代表团名称':'委员会名称'">
|
||||
{{ viewData.mannerCode !== 'W03' ? viewData.delegationName : viewData.committeeName }}
|
||||
</van-cell>
|
||||
<van-cell title="提案类别">
|
||||
{{viewData.typeName}}
|
||||
</van-cell>
|
||||
<!--<van-cell title="建议承办单位">
|
||||
{{viewData.suggestUnits}}
|
||||
</van-cell>-->
|
||||
<van-cell title="立案结果">
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_RESULT"
|
||||
:value="viewData.caseFilingResult"></dict-tag>
|
||||
</van-cell>
|
||||
<!--<van-cell title="调研情况" class="direction-column-cell">
|
||||
<div v-html="viewData.researchFindings"></div>
|
||||
</van-cell>-->
|
||||
<van-cell title="提案案由" class="direction-column-cell">
|
||||
<div v-html="viewData.brief"></div>
|
||||
</van-cell>
|
||||
<van-cell title="建议措施" class="direction-column-cell">
|
||||
<div v-html="viewData.measures"></div>
|
||||
</van-cell>
|
||||
<van-cell title="附件" class="direction-column-cell">
|
||||
<file-preview :files="viewData.files" complete_result></file-preview>
|
||||
</van-cell>
|
||||
<!-- <van-cell title="签字">-->
|
||||
<!-- <div slot="label">-->
|
||||
<!-- <van-image :src="viewData.signature"-->
|
||||
<!-- style="width: 100%;height: 150px;border: 1px dashed"></van-image>-->
|
||||
<!-- </div>-->
|
||||
<!-- </van-cell>-->
|
||||
</van-cell-group>
|
||||
|
||||
<!--并案信息-->
|
||||
<van-cell-group title="并案信息" v-if="viewData.merges && viewData.merges.length">
|
||||
<van-cell v-for="(merge, index) in viewData.merges" :key="merge.id"
|
||||
:title="(index + 1) + '. ' + merge.name"
|
||||
:label="'提案编号：' + merge.code + ' | 提案人：' + merge.createUserName + ' | 类别：' + merge.typeName + ' | 代表团：' + merge.delegationName"
|
||||
is-link
|
||||
@click="openView(merge)">
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<!--委员会成员意见-->
|
||||
<template v-if="viewData.commissionerOpinions && viewData.commissionerOpinions.length">
|
||||
<div class="process-title" style="margin-bottom: 0!important;">
|
||||
委员会成员意见
|
||||
</div>
|
||||
<div v-for="(opinion, index) in viewData.commissionerOpinions" :key="index"
|
||||
style="margin-bottom: 16px;">
|
||||
<van-cell :title="opinion.commissionerName + '(' + opinion.commissionerLoginName + ')'"
|
||||
class="direction-column-cell">
|
||||
</van-cell>
|
||||
<van-cell title="立案结果">
|
||||
<div style="display: flex;justify-content: end;">
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_RESULT"
|
||||
:value="opinion.caseFilingResult"></dict-tag>
|
||||
<template v-if="opinion.caseFilingType">
|
||||
(
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_TYPE"
|
||||
:value="opinion.caseFilingType"></dict-tag>
|
||||
)
|
||||
</template>
|
||||
</div>
|
||||
</van-cell>
|
||||
<van-cell title="意见" v-if="opinion.opinionText">
|
||||
<div>{{ opinion.opinionText }}</div>
|
||||
</van-cell>
|
||||
<van-cell title="时间" v-if="opinion.opinionTime">
|
||||
{{ opinion.opinionTime }}
|
||||
</van-cell>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
<!-- 点击时间轴节点后，只在此处展示该任务原有的完整详情。 -->
|
||||
<section class="proposal-view-card proposal-flow-detail" v-if="selectedTask">
|
||||
<h2 class="proposal-view-card__title">节点详情</h2>
|
||||
<h3 class="proposal-flow-detail__name">{{ selectedTask.displayName || '--' }}</h3>
|
||||
<van-cell-group :border="false">
|
||||
<template v-if="selectedTask.ext && selectedTask.ext.isFirstTaskNode">
|
||||
<van-cell title="申请用户">
|
||||
{{ selectedTask.ext.initiatorName || '--' }}（{{ selectedTask.ext.initiatorAccount || '--' }}）
|
||||
</van-cell>
|
||||
<van-cell title="申请时间">{{ selectedTask.finishTime || '--' }}</van-cell>
|
||||
<van-cell title="办理结果">
|
||||
<dict-tag :options="dict.type.PROCESS_TASK_SUBMIT_TYPE"
|
||||
:value="selectedTask.ext.submitType"></dict-tag>
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<template v-for="task in doneTasks">
|
||||
<van-cell-group :title="task.displayName" v-if="task.ext.isFirstTaskNode">
|
||||
<van-cell title="申请用户">{{ task.ext.initiatorName }}({{task.ext.initiatorAccount}})
|
||||
</van-cell>
|
||||
<van-cell title="申请时间">{{ task.finishTime }}</van-cell>
|
||||
<van-cell title="办理结果">
|
||||
<dict-tag :options="dict.type.PROCESS_TASK_SUBMIT_TYPE"
|
||||
:value="task.ext.submitType"></dict-tag>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<template v-else-if="selectedTask.taskName === 'invite'">
|
||||
<van-cell title="办理用户">
|
||||
{{ selectedTask.taskFormData.userName || '--' }}（{{ selectedTask.taskFormData.loginName || '--' }}）
|
||||
</van-cell>
|
||||
<van-cell title="办理时间">{{ selectedTask.finishTime || '--' }}</van-cell>
|
||||
<van-cell title="附议人" class="proposal-view-long-cell">
|
||||
<div class="proposal-view-table-wrap">
|
||||
<el-table :data="selectedTask?.taskFormData?.seconder">
|
||||
<el-table-column label="姓名" prop="userName"></el-table-column>
|
||||
<el-table-column label="工号" prop="loginName"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex"></el-table-column>
|
||||
<el-table-column label="单位" prop="unitName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="分工会" prop="unionName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="代表团" prop="delegationName" show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<!--邀请附议人-->
|
||||
<van-cell-group :title="task.displayName"
|
||||
v-else-if="task.taskName === 'invite'">
|
||||
<van-cell title="办理用户">{{ task.taskFormData.userName }}({{task.taskFormData.loginName}})
|
||||
</van-cell>
|
||||
<van-cell title="办理时间">{{ task.finishTime }}</van-cell>
|
||||
<van-cell title="附议人" v-if="task.taskName === 'invite'"
|
||||
class="direction-column-cell">
|
||||
<el-table :data="task?.taskFormData?.seconder">
|
||||
<el-table-column label="姓名" prop="userName"></el-table-column>
|
||||
<el-table-column label="工号" prop="loginName"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex"></el-table-column>
|
||||
<el-table-column label="单位" prop="unitName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="分工会" prop="unionName"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="代表团" prop="delegationName"
|
||||
show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<!--提案委员会立案-->
|
||||
<van-cell-group :title="task.displayName"
|
||||
v-else-if="task.taskName === 'committee'||task.taskName === 'committeeFilingUnit'">
|
||||
<van-cell title="办理用户">{{ task.taskFormData.userName }}({{task.taskFormData.loginName}})
|
||||
</van-cell>
|
||||
<van-cell title="办理时间">{{ task.finishTime }}</van-cell>
|
||||
<van-cell title="立案结果">
|
||||
<div style="display: flex;justify-content: center">
|
||||
<template v-else-if="selectedTask.taskName === 'committee' || selectedTask.taskName === 'committeeFilingUnit'">
|
||||
<van-cell title="办理用户">
|
||||
{{ selectedTask.taskFormData.userName || '--' }}（{{ selectedTask.taskFormData.loginName || '--' }}）
|
||||
</van-cell>
|
||||
<van-cell title="办理时间">{{ selectedTask.finishTime || '--' }}</van-cell>
|
||||
<van-cell title="立案结果">
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_RESULT"
|
||||
:value="task.ext.tf_caseFilingResult"></dict-tag>
|
||||
|
||||
<template v-if="task.ext.tf_caseFilingType">
|
||||
(
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_TYPE"
|
||||
:value="task.ext.tf_caseFilingType"></dict-tag>
|
||||
)
|
||||
:value="selectedTask.ext.tf_caseFilingResult"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="立案类型" v-if="selectedTask.ext.tf_caseFilingType">
|
||||
<dict-tag :options="dict.type.PROPOSAL_CASE_FILING_TYPE"
|
||||
:value="selectedTask.ext.tf_caseFilingType"></dict-tag>
|
||||
</van-cell>
|
||||
<template v-if="['CONFIRM_FILING', 'SUGGESTION'].includes(selectedTask.ext.tf_caseFilingResult)">
|
||||
<van-cell v-if="selectedTask.ext.tf_caseFilingResult === 'SUGGESTION'" title="承办单位">
|
||||
{{ selectedTask?.ext?.tf_masterUnitNameStr || selectedTask?.ext?.tf_slaveUnitNameStr || '--' }}
|
||||
</van-cell>
|
||||
<template v-else>
|
||||
<van-cell title="主办单位">{{ selectedTask?.ext?.tf_masterUnitNameStr || '--' }}</van-cell>
|
||||
<van-cell title="协办单位">{{ selectedTask?.ext?.tf_slaveUnitNameStr || '--' }}</van-cell>
|
||||
</template>
|
||||
</div>
|
||||
</van-cell>
|
||||
<template v-if="['CONFIRM_FILING','SUGGESTION'].includes(task.ext.tf_caseFilingResult)">
|
||||
<van-cell v-if="task.ext.tf_caseFilingResult === 'SUGGESTION'" title="承办单位">{{ task?.ext?.tf_masterUnitNameStr || task?.ext?.tf_slaveUnitNameStr }}</van-cell>
|
||||
<template v-else>
|
||||
<van-cell title="主办单位">{{ task?.ext?.tf_masterUnitNameStr }}</van-cell>
|
||||
<van-cell title="协办单位">{{ task?.ext?.tf_slaveUnitNameStr }}</van-cell>
|
||||
</template>
|
||||
<van-cell title="办理意见"
|
||||
v-if="selectedTask.taskFormData.tf_opinion"
|
||||
class="proposal-view-long-cell">
|
||||
<div class="proposal-view-rich-value" v-html="selectedTask.taskFormData.tf_opinion"></div>
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<van-cell title="办理单位"
|
||||
v-if="['opinion_unit_reply', 'unit_reply', 'two_unit_reply', 'master_reply', 'slave_reply'].includes(selectedTask.taskName)">
|
||||
{{ selectedTask.ext.underTakeName || '--' }}
|
||||
</van-cell>
|
||||
<van-cell title="办理用户">
|
||||
{{ selectedTask.taskFormData.userName || '--' }}（{{ selectedTask.taskFormData.loginName || '--' }}）
|
||||
</van-cell>
|
||||
<van-cell title="办理时间">{{ selectedTask.finishTime || '--' }}</van-cell>
|
||||
<van-cell title="办理评价" v-if="selectedTask.taskName === 'feedback'">
|
||||
<dict-tag :options="dict.type.PROPOSAL_FEEDBACK"
|
||||
:value="selectedTask.ext.tf_feedback"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="办理结果" v-else>
|
||||
<dict-tag :options="dict.type.PROCESS_TASK_SUBMIT_TYPE"
|
||||
:value="selectedTask.ext.submitType"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="办理意见"
|
||||
v-if="selectedTask.taskFormData && selectedTask.taskFormData.tf_opinion"
|
||||
class="proposal-view-long-cell">
|
||||
<div class="proposal-view-rich-value" v-html="selectedTask.taskFormData.tf_opinion"></div>
|
||||
</van-cell>
|
||||
</template>
|
||||
<van-cell title="办理意见" v-if="task.taskFormData.tf_opinion" class="direction-column-cell">
|
||||
<div v-html="task.taskFormData.tf_opinion"></div>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<div class="proposal-flow-detail__tip">点击其他节点查看详情</div>
|
||||
</section>
|
||||
|
||||
<van-cell-group :title="task.displayName" v-else>
|
||||
<van-cell title="办理单位" v-if="['opinion_unit_reply','unit_reply','two_unit_reply','master_reply','slave_reply'].includes(task.taskName)">
|
||||
{{task.ext.underTakeName}}
|
||||
</van-cell>
|
||||
|
||||
<van-cell title="办理用户">{{ task.taskFormData.userName }}({{task.taskFormData.loginName}})
|
||||
</van-cell>
|
||||
<van-cell title="办理时间">{{ task.finishTime }}</van-cell>
|
||||
|
||||
<van-cell title="办理评价" v-if="['feedback'].includes(task.taskName)">
|
||||
<dict-tag :options="dict.type.PROPOSAL_FEEDBACK"
|
||||
:value="task.ext.tf_feedback"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="办理结果" v-else>
|
||||
<dict-tag :options="dict.type.PROCESS_TASK_SUBMIT_TYPE"
|
||||
:value="task.ext.submitType"></dict-tag>
|
||||
</van-cell>
|
||||
<van-cell title="办理意见" v-if="!task.ext.isFirstTaskNode" class="direction-column-cell">
|
||||
<div v-html="task.taskFormData.tf_opinion"></div>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<slot></slot>
|
||||
</van-action-sheet>
|
||||
<!-- 审批、答复等业务页面继续通过原插槽追加表单。 -->
|
||||
<div class="proposal-view-slot">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
`,
|
||||
dicts: ["PROPOSAL_TYPE", "PROPOSAL_CASE_FILING_RESULT", "PROPOSAL_CASE_FILING_TYPE", "PROCESS_TASK_SUBMIT_TYPE", "PROPOSAL_FEEDBACK"],
|
||||
props: {
|
||||
// bizId 为提案主键；组件根据该参数加载提案详情和对应的已办流程记录。
|
||||
bizId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
// visible 表示承载详情的 Popup 是否打开；每次重新打开时都需要查询最新详情和流程记录。
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
dicts: ["PROPOSAL_TYPE", "PROPOSAL_SOURCE", "PROPOSAL_CASE_FILING_RESULT", "PROPOSAL_CASE_FILING_TYPE", "PROCESS_TASK_SUBMIT_TYPE", "PROPOSAL_FEEDBACK"],
|
||||
data() {
|
||||
return {
|
||||
visible:false,
|
||||
viewData: {},
|
||||
doneTasks: [],
|
||||
row: null,
|
||||
originalRow: null, // 用于保存原始数据，支持返回功能
|
||||
selectedTask: null,
|
||||
currentBizId: "",
|
||||
reloadPending: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
bizId: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
if (!value) return
|
||||
this.$set(this, "currentBizId", value)
|
||||
if (this.visible) this.queueReload()
|
||||
}
|
||||
},
|
||||
visible(value) {
|
||||
if (!value || !this.bizId) return
|
||||
this.$set(this, "currentBizId", this.bizId)
|
||||
this.queueReload()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打开
|
||||
onOpen(row) {
|
||||
this.row = row
|
||||
this.visible = true
|
||||
this.getInfo()
|
||||
this.getDoneTasks()
|
||||
/**
|
||||
* 合并同一轮 bizId 与 Popup 显示状态变化触发的刷新。
|
||||
* 无参数；组件可见且存在提案主键时调用详情和已办流程接口，无返回值。
|
||||
*/
|
||||
queueReload() {
|
||||
if (this.reloadPending) return
|
||||
this.$set(this, "reloadPending", true)
|
||||
this.$nextTick(() => {
|
||||
this.$set(this, "reloadPending", false)
|
||||
if (!this.visible || !this.currentBizId) return
|
||||
this.getInfo()
|
||||
this.getDoneTasks()
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭
|
||||
onClose(){
|
||||
this.visible = false
|
||||
/**
|
||||
* 获取字典字段的展示文本。
|
||||
* options 为 PROPOSAL_SOURCE 等字典数组，value 为业务保存的字典 code；返回名称字符串，无匹配项时返回原值或 --。
|
||||
*/
|
||||
getDictText(options, value) {
|
||||
const option = (options || []).find((item) => String(item.code) === String(value))
|
||||
return option ? (option.name || option.label || value) : (value || "--")
|
||||
},
|
||||
|
||||
// 获取申请信息
|
||||
/**
|
||||
* 获取横向流程节点的办理人名称。
|
||||
* task 为 doneTasks 接口返回的任务对象；发起节点读取 initiatorName，其他节点读取 taskFormData.userName，返回字符串。
|
||||
*/
|
||||
getTaskHandlerName(task) {
|
||||
if (!task) return "--"
|
||||
if (task.ext && task.ext.isFirstTaskNode) {
|
||||
return task.ext.initiatorName || "--"
|
||||
}
|
||||
return task.taskFormData && task.taskFormData.userName
|
||||
? task.taskFormData.userName
|
||||
: "--"
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据任务类型返回 Vant 图标名称，只用于区分发起、邀请附议和普通已办节点。
|
||||
*/
|
||||
getTaskNodeIcon(task) {
|
||||
if (task && task.ext && task.ext.isFirstTaskNode) return "manager-o"
|
||||
if (task && task.taskName === "invite") return "friends-o"
|
||||
return "passed"
|
||||
},
|
||||
|
||||
/**
|
||||
* 选中流程节点并展示详情。
|
||||
* task 为 doneTasks 中的任务对象；该方法无返回值，并把对应节点滚动到横向区域中部。
|
||||
*/
|
||||
selectTask(task) {
|
||||
if (!task) return
|
||||
this.$set(this, "selectedTask", task)
|
||||
this.scrollTaskIntoView(task.id)
|
||||
},
|
||||
|
||||
/**
|
||||
* 将指定任务节点滚动至时间轴可视区域中部。
|
||||
* taskId 为流程任务主键；节点或滚动容器不存在时直接结束，无返回值。
|
||||
*/
|
||||
scrollTaskIntoView(taskId) {
|
||||
this.$nextTick(() => {
|
||||
const nodes = this.$refs.workflowNode
|
||||
const nodeList = Array.isArray(nodes) ? nodes : [nodes]
|
||||
const taskIndex = this.doneTasks.findIndex((item) => String(item.id) === String(taskId))
|
||||
const node = nodeList[taskIndex]
|
||||
const scrollContainer = this.$refs.workflowScroll
|
||||
if (!node || !scrollContainer) return
|
||||
const targetLeft = node.offsetLeft - (scrollContainer.clientWidth - node.offsetWidth) / 2
|
||||
scrollContainer.scrollLeft = Math.max(0, targetLeft)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 使用 currentBizId 查询提案详情。
|
||||
* 接口参数 id 为提案主键；成功响应的 data 为详情对象并写入 viewData。
|
||||
*/
|
||||
getInfo() {
|
||||
this.$axios.post("/platform/proposal/common/proposalInfo", {id: this.row.id}).then((res) => {
|
||||
this.$axios.post("/platform/proposal/common/proposalInfo", {id: this.currentBizId}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.viewData = res.data
|
||||
this.$set(this, "viewData", res.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 查看提案
|
||||
openView(row) {
|
||||
// 如果传入的是并案对象，则打开新的详情页面
|
||||
if (row && typeof row === 'object' && row.id) {
|
||||
// 创建一个新的提案详情组件实例来显示并案详情
|
||||
this.$nextTick(() => {
|
||||
// 可以通过事件总线或者其他方式来打开新的详情页面
|
||||
// 这里暂时使用简单的方式，直接在当前组件中显示
|
||||
const currentRow = this.row;
|
||||
this.row = row;
|
||||
this.getInfo();
|
||||
// 保存原来的数据，以便返回时恢复
|
||||
this.originalRow = currentRow;
|
||||
})
|
||||
} else {
|
||||
// 原有的逻辑，通过ID查看
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.infoDialogRef) {
|
||||
this.$refs.infoDialogRef.onOpen(row)
|
||||
}
|
||||
})
|
||||
this.$set(this, "currentBizId", row.id)
|
||||
this.queueReload()
|
||||
}
|
||||
},
|
||||
|
||||
// 获取已办任务审批记录
|
||||
/**
|
||||
* 使用 currentBizId 查询已办流程记录。
|
||||
* 接口参数 bizId 为提案主键；成功响应的 data 为流程任务数组并写入 doneTasks。
|
||||
*/
|
||||
getDoneTasks() {
|
||||
this.$axios.post("/flow/common/doneTasks", {bizId: this.row.id}).then((res) => {
|
||||
this.$set(this, "doneTasks", [])
|
||||
this.$set(this, "selectedTask", null)
|
||||
this.$axios.post("/flow/common/doneTasks", {bizId: this.currentBizId}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.doneTasks = res.data
|
||||
const taskList = res.data || []
|
||||
const latestTask = taskList.length ? taskList[taskList.length - 1] : null
|
||||
this.$set(this, "doneTasks", taskList)
|
||||
this.$set(this, "selectedTask", latestTask)
|
||||
if (latestTask) {
|
||||
this.scrollTaskIntoView(latestTask.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
const PROPOSAL_TASK_POPUP = {
|
||||
template: /*language=HTML*/ `
|
||||
<van-popup v-model="visible" position="right" class="proposal-full-popup" :close-on-click-overlay="false" get-container="#app">
|
||||
<div class="proposal-full-popup__page">
|
||||
<van-nav-bar @click-left="close" left-arrow left-text="返回" :title="title" placeholder fixed></van-nav-bar>
|
||||
<div class="proposal-full-popup__scroll">
|
||||
<proposal-info v-if="bizId" :biz-id="bizId" :visible="visible">
|
||||
<div v-if="isApproval">
|
||||
<van-form ref="formRef">
|
||||
<template v-if="kind === 'delegation' || kind === 'preAudit' || kind === 'schoolLeaderApproval'">
|
||||
<section class="proposal-view-card">
|
||||
<h2 class="proposal-view-card__title">审批意见<span class="proposal-audit-card__required">*</span></h2>
|
||||
<van-field v-model="formData.tf_opinion" class="proposal-audit-field" name="tf_opinion" type="textarea" rows="6" label="" placeholder="请输入审批意见" :rules="[{required:true,message:'请填写审批意见'}]" required maxlength="100" show-word-limit></van-field>
|
||||
</section>
|
||||
</template>
|
||||
<template v-if="kind === 'feedbackEvaluation'">
|
||||
<van-field v-model="formData.tf_feedback_name" label="满意度" placeholder="请选择满意度" :rules="[{required:true,message:'请选择满意度'}]" required readonly is-link @click="openLayer('feedback-picker')"></van-field>
|
||||
<section class="proposal-view-card">
|
||||
<h2 class="proposal-view-card__title">审批意见<span class="proposal-audit-card__required">*</span></h2>
|
||||
<van-field v-model="formData.tf_opinion" class="proposal-audit-field" name="tf_opinion" type="textarea" rows="6" label="" placeholder="请输入审批意见" :rules="[{required:true,message:'请填写审批意见'}]" required maxlength="100" show-word-limit></van-field>
|
||||
</section>
|
||||
</template>
|
||||
<template v-if="kind === 'suggestion'">
|
||||
<van-field v-model="formData.result" label="承办意向" placeholder="请选择承办意向" :rules="[{required:true,message:'请选择承办意向'}]" required readonly is-link @click="openLayer('result-picker')"></van-field>
|
||||
<section class="proposal-view-card">
|
||||
<h2 class="proposal-view-card__title">反馈意见<span class="proposal-audit-card__required">*</span></h2>
|
||||
<van-field v-model="formData.opinion" class="proposal-audit-field" name="opinion" type="textarea" rows="6" label="" placeholder="请输入反馈意见" :rules="[{required:true,message:'请输入反馈意见'}]" required show-word-limit></van-field>
|
||||
</section>
|
||||
</template>
|
||||
<template v-if="kind === 'unitReply'">
|
||||
<van-field :value="formData.underTakeName" label="承办单位" readonly></van-field>
|
||||
<van-field v-model="formData.tf_implementStateName" label="落实情况" placeholder="请选择落实情况" :rules="[{required:true,message:'请选择落实情况'}]" required readonly is-link @click="openLayer('implement-picker')"></van-field>
|
||||
<section class="proposal-view-card">
|
||||
<h2 class="proposal-view-card__title">答复内容<span class="proposal-audit-card__required">*</span></h2>
|
||||
<van-field v-model="formData.tf_opinion" class="proposal-audit-field" name="tf_opinion" type="textarea" rows="6" label="" placeholder="请输入答复内容" :rules="[{required:true,message:'请填写答复内容'}]" required maxlength="100" show-word-limit></van-field>
|
||||
</section>
|
||||
<van-field v-if="supportCandidate && formData.underTakeIsMaster" v-model="formData.tf_nextNodeOperatorName" label="校领导" placeholder="请选择校领导" :rules="[{required:true,message:'请选择校领导'}]" required readonly is-link @click="openLayer('candidate-picker')"></van-field>
|
||||
</template>
|
||||
<template v-if="kind === 'caseCheck'">
|
||||
<van-field :value="formData.tf_username" label="审核人" readonly></van-field>
|
||||
<van-field :value="formData.tf_auditTime" label="审核时间" readonly></van-field>
|
||||
<van-field :value="formData.tf_caseCheckNeedSecondReply" label="二次答复" required :rules="[{validator:validateSecondReply,message:'请选择是否需要二次答复'}]">
|
||||
<template #input><van-radio-group v-model="formData.tf_caseCheckNeedSecondReply" direction="horizontal" @change="onSecondReplyChange"><van-radio :name="0">无需二次答复</van-radio><van-radio :name="1">需要二次答复</van-radio></van-radio-group></template>
|
||||
</van-field>
|
||||
<van-field v-if="formData.tf_caseCheckNeedSecondReply === 1" :value="selectedReplyUnitNames" label="答复单位" placeholder="请选择办理单位" readonly required is-link :rules="[{validator:validateSecondReplyUnits,message:'请选择需要二次答复的办理单位'}]" @click="openReplyUnitPicker"></van-field>
|
||||
<section class="proposal-view-card">
|
||||
<h2 class="proposal-view-card__title">审批意见<span class="proposal-audit-card__required">*</span></h2>
|
||||
<van-field v-model="formData.tf_opinion" class="proposal-audit-field" name="tf_opinion" type="textarea" rows="6" label="" placeholder="请输入审批意见" required maxlength="100" show-word-limit :rules="[{required:true,message:'请填写审批意见'}]"></van-field>
|
||||
</section>
|
||||
</template>
|
||||
</van-form>
|
||||
<div class="proposal-popup-form-actions" v-if="kind === 'delegation'">
|
||||
<van-button type="danger" block :loading="formLoading" @click="prepareSubmit(6)">退回</van-button><van-button type="danger" block :loading="formLoading" @click="prepareSubmit(2)">不同意</van-button><van-button type="primary" block :loading="formLoading" @click="prepareSubmit(1)">同意</van-button>
|
||||
</div>
|
||||
<div class="proposal-popup-form-actions" v-else-if="kind === 'preAudit'" style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr))">
|
||||
<van-button type="warning" :loading="formLoading" @click="prepareSubmit(4)">退回（不审核）</van-button><van-button type="warning" :loading="formLoading" @click="prepareSubmit(6)">退回（审核）</van-button><van-button type="danger" :loading="formLoading" @click="prepareSubmit(2)">不同意</van-button><van-button type="primary" :loading="formLoading" @click="prepareSubmit(1)">同意</van-button>
|
||||
</div>
|
||||
<div class="proposal-popup-form-actions" v-else-if="kind === 'schoolLeaderApproval'"><van-button type="danger" block :loading="formLoading" @click="prepareSubmit('back')">退回答复</van-button><van-button type="primary" block :loading="formLoading" @click="prepareSubmit('agree')">同意答复</van-button></div>
|
||||
<div class="proposal-popup-form-actions" v-else><van-button block :disabled="formLoading" @click="close">取消</van-button><van-button type="primary" block :loading="formLoading" @click="prepareSubmit(1)">提交</van-button></div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
</div>
|
||||
</div>
|
||||
<van-popup v-model="feedbackPickerVisible" position="bottom" :close-on-click-overlay="false"><van-picker show-toolbar :columns="dict.type.PROPOSAL_FEEDBACK.map((item) => ({text:item.label,value:item.code}))" @confirm="confirmFeedback" @cancel="closeLayer('feedback-picker')"></van-picker></van-popup>
|
||||
<van-popup v-model="resultPickerVisible" position="bottom" :close-on-click-overlay="false"><van-picker show-toolbar :columns="dict.type.UNDERTAKE_SUGGESTION.map((item) => item.code)" @confirm="confirmResult" @cancel="closeLayer('result-picker')"></van-picker></van-popup>
|
||||
<van-popup v-model="implementPickerVisible" position="bottom" :close-on-click-overlay="false"><van-picker show-toolbar :columns="dict.type.PROPOSAL_REPLY_IMPLEMENT.map((item) => ({text:item.label,value:item.code}))" @confirm="confirmImplement" @cancel="closeLayer('implement-picker')"></van-picker></van-popup>
|
||||
<van-popup v-model="candidatePickerVisible" position="bottom" :close-on-click-overlay="false"><van-picker show-toolbar :columns="candidates.map((item) => ({text:item.userName,value:item.userId}))" @confirm="confirmCandidate" @cancel="closeLayer('candidate-picker')"></van-picker></van-popup>
|
||||
<van-popup v-model="replyUnitPickerVisible" position="bottom" round :close-on-click-overlay="false" :style="{height:'70%'}">
|
||||
<div class="reply-unit-popup"><div class="reply-unit-toolbar"><button type="button" @click="closeLayer('reply-unit-picker')">取消</button><div class="reply-unit-toolbar-title">选择答复单位</div><button type="button" @click="confirmReplyUnits">确定</button></div>
|
||||
<div class="reply-unit-list" v-if="replyUnitOptions.length"><van-checkbox-group v-model="pendingReplyUnitIds"><van-cell v-for="item in replyUnitOptions" :key="item.unitId" clickable :title="item.unitName" :label="item.isMaster ? '主办单位' : '协办单位'" @click="toggleReplyUnit(item)"><template #right-icon><van-checkbox :name="item.unitId" @click.stop></van-checkbox></template></van-cell></van-checkbox-group></div>
|
||||
<div class="reply-unit-empty" v-else>暂无可选办理单位</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
<van-dialog :value="confirmVisible" title="提示" message="您确定要提交吗？" show-cancel-button @confirm="submit" @cancel="closeLayer('submit-confirm')"></van-dialog>
|
||||
</van-popup>
|
||||
`,
|
||||
dicts: ["PROPOSAL_FEEDBACK", "UNDERTAKE_SUGGESTION", "PROPOSAL_REPLY_IMPLEMENT"],
|
||||
components: {"proposal-info": PROPOSAL_INFO},
|
||||
props: {kind: {type: String, required: true}, pageKey: {type: String, required: true}},
|
||||
data() { return {visible:false,bizId:"",action:"view",formData:{},formLoading:false,pendingSubmitType:1,feedbackPickerVisible:false,resultPickerVisible:false,implementPickerVisible:false,candidatePickerVisible:false,replyUnitPickerVisible:false,confirmVisible:false,supportCandidate:false,candidates:[],replyUnitOptions:[],pendingReplyUnitIds:[],unsubscribeHistoryLayer:null} },
|
||||
computed: {
|
||||
isApproval() { return this.action === "approval" },
|
||||
title() { const titles={delegation:"团长审核",preAudit:"校工会预审核",schoolLeaderApproval:"分管校领导审批",feedbackEvaluation:"反馈评价",suggestion:"承办单位意见",unitReply:"承办单位答复",caseCheck:"提案委员会审查"}; return this.isApproval ? titles[this.kind] : "提案详情" },
|
||||
selectedReplyUnitNames() { const ids=this.formData.tf_secondReplyUnitIds || []; return this.replyUnitOptions.filter((item) => ids.indexOf(item.unitId)>-1).map((item) => item.unitName+"（"+(item.isMaster?"主办":"协办")+"）").join("、") }
|
||||
},
|
||||
methods: {
|
||||
syncLayers(stack) { this.$set(this,"visible",stack.includes("detail")); this.$set(this,"feedbackPickerVisible",stack.includes("feedback-picker")); this.$set(this,"resultPickerVisible",stack.includes("result-picker")); this.$set(this,"implementPickerVisible",stack.includes("implement-picker")); this.$set(this,"candidatePickerVisible",stack.includes("candidate-picker")); this.$set(this,"replyUnitPickerVisible",stack.includes("reply-unit-picker")); this.$set(this,"confirmVisible",stack.includes("submit-confirm")) },
|
||||
openLayer(name) { window.h5HistoryLayerManager.open(name) }, closeLayer(name,callback) { window.h5HistoryLayerManager.close(name,callback) }, close() { this.closeLayer("detail") },
|
||||
/** row 提供详情主键和当前 WF 任务参数，action 为 view 或 approval。 */
|
||||
open(row,action) {
|
||||
const defaultTaskNames={delegation:"团长审核",preAudit:"校工会预审核",feedbackEvaluation:"反馈评价",unitReply:"承办单位答复",caseCheck:"提案委员会审查"}
|
||||
const taskName=this.kind === "unitReply" ? (row.taskName || defaultTaskNames[this.kind]) : (row.curTaskName || row.taskName || defaultTaskNames[this.kind] || "")
|
||||
this.$set(this,"bizId",row.id); this.$set(this,"action",action); this.$set(this,"formData",{proposalId:row.id,processTaskId:row.taskId || "",taskKey:row.taskKey || "",taskName:taskName,instanceId:row.instanceId || "",underTakeName:row.underTakeName || "",underTakeIsMaster:!!row.underTakeIsMaster,tf_opinion:"",opinion:""})
|
||||
if (action === "approval" && this.kind === "unitReply") this.loadCandidates(row.taskId || "")
|
||||
if (action === "approval" && this.kind === "caseCheck") { this.$set(this.formData,"tf_auditTime",moment().format("YYYY-MM-DD")); this.$set(this.formData,"tf_username",(this.$store.state.user && this.$store.state.user.username) || ""); this.$set(this.formData,"tf_caseCheckNeedSecondReply",0); this.$set(this.formData,"tf_secondReplyUnitIds",[]); this.loadReplyUnits(row.id) }
|
||||
this.openLayer("detail")
|
||||
},
|
||||
loadCandidates(taskId) { this.$axios.post("/flow/common/candidate",{taskId:taskId}).then((res) => { if (res.code === 0) { this.$set(this,"candidates",res.data.candidates || []); this.$set(this,"supportCandidate",res.data.support) } }) },
|
||||
confirmFeedback(value) { this.$set(this.formData,"tf_feedback_name",value.text); this.$set(this.formData,"tf_feedback",value.value); this.closeLayer("feedback-picker") },
|
||||
confirmResult(value) { this.$set(this.formData,"result",value); this.closeLayer("result-picker") },
|
||||
confirmImplement(value) { this.$set(this.formData,"tf_implementStateName",value.text); this.$set(this.formData,"tf_implementState",value.value); this.closeLayer("implement-picker") },
|
||||
confirmCandidate(value) { this.$set(this.formData,"tf_nextNodeOperatorName",value.text); this.$set(this.formData,"tf_nextNodeOperator",value.value); this.closeLayer("candidate-picker") },
|
||||
validateSecondReply(value) { return value === 0 || value === 1 },
|
||||
validateSecondReplyUnits() { return this.formData.tf_caseCheckNeedSecondReply !== 1 || (this.formData.tf_secondReplyUnitIds || []).length > 0 },
|
||||
onSecondReplyChange(value) { if (value !== 1) this.$set(this.formData,"tf_secondReplyUnitIds",[]) },
|
||||
loadReplyUnits(proposalId) { this.$axios.post("/platform/proposal/case/check/listReplyUnits",{proposalId:proposalId}).then((res) => { if (res && res.code === 0) this.$set(this,"replyUnitOptions",res.data || []) }) },
|
||||
openReplyUnitPicker() { this.$set(this,"pendingReplyUnitIds",[...(this.formData.tf_secondReplyUnitIds || [])]); this.openLayer("reply-unit-picker") },
|
||||
toggleReplyUnit(item) { const ids=[...this.pendingReplyUnitIds]; const index=ids.indexOf(item.unitId); if (index>-1) ids.splice(index,1); else ids.push(item.unitId); this.$set(this,"pendingReplyUnitIds",ids) },
|
||||
confirmReplyUnits() { this.$set(this.formData,"tf_secondReplyUnitIds",[...this.pendingReplyUnitIds]); this.closeLayer("reply-unit-picker") },
|
||||
buildCaseCheckData() { const data={...this.formData}; const units=data.tf_caseCheckNeedSecondReply === 1 ? this.replyUnitOptions.filter((item) => data.tf_secondReplyUnitIds.indexOf(item.unitId)>-1) : []; const masters=units.filter((item) => item.isMaster); const slaves=units.filter((item) => !item.isMaster); data.tf_masterUnitIds=masters.map((item) => item.unitId); data.tf_masterUnitId=data.tf_masterUnitIds[0] || ""; data.tf_masterUnitNames=masters.map((item) => item.unitName); data.tf_masterUnitName=data.tf_masterUnitNames[0] || ""; data.tf_masterUnitNameStr=data.tf_masterUnitNames.join(","); data.tf_slaveUnitIds=slaves.map((item) => item.unitId); data.tf_slaveUnitNames=slaves.map((item) => item.unitName); data.tf_slaveUnitNameStr=data.tf_slaveUnitNames.join(","); return data },
|
||||
prepareSubmit(value) { this.$refs.formRef.validate().then(() => { this.$set(this,"pendingSubmitType",value); this.openLayer("submit-confirm") }).catch(() => {}) },
|
||||
/** 根据页面类型保留原接口和参数分支，成功后清理全部弹层历史并通知列表刷新。 */
|
||||
submit() {
|
||||
this.$set(this,"formLoading",true)
|
||||
let request
|
||||
if (this.kind === "suggestion") request=this.$axios.post("/platform/proposal/suggestion/suggest",this.formData)
|
||||
else if (this.kind === "schoolLeaderApproval") { const data={...this.formData,tf_approval:this.pendingSubmitType}; delete data.taskKey; delete data.taskName; request=this.$axios.post("/platform/proposal/schoolLeaderApproval/executeTask",{data:JSON.stringify(data)}) }
|
||||
else {
|
||||
const data=this.kind === "caseCheck" ? {...this.buildCaseCheckData(),submitType:this.pendingSubmitType} : {...this.formData,submitType:this.pendingSubmitType}
|
||||
if (this.kind === "preAudit") { data.taskName="startTask"; if (this.pendingSubmitType === 4) { data.tf_sourceTaskKey=this.formData.taskKey; data.tf_audit=false } }
|
||||
if (this.kind === "unitReply") { delete data.underTakeIsMaster; delete data.underTakeName }
|
||||
if (this.kind === "feedbackEvaluation" && data.tf_feedback === "DISSATISFIED") request=this.$axios.post("/platform/proposal/feedbackEvaluation/caseInfo",{instId:data.instanceId}).then((res) => { if (res.code !== 0) return Promise.reject(new Error(res.msg || "查询立案信息失败")); data.tf_masterUnitId=res.data.tf_masterUnitId; return this.$axios.post("/flow/common/executeTask",{data:JSON.stringify(data)}) })
|
||||
else request=this.$axios.post("/flow/common/executeTask",{data:JSON.stringify(data)})
|
||||
}
|
||||
request.then((res) => { if (res && res.code === 0) { this.$toast.success(res.msg); window.h5HistoryLayerManager.closeAll(() => this.$emit("success")) } }).catch((error) => { if (error && error.message && error.message !== "cancel") this.$toast.fail(error.message) }).finally(() => { this.$set(this,"formLoading",false) })
|
||||
}
|
||||
},
|
||||
created() { window.h5HistoryLayerManager.ensureRegistered(this.pageKey); this.$set(this,"unsubscribeHistoryLayer",window.h5HistoryLayerManager.subscribe((stack) => this.syncLayers(stack))) },
|
||||
beforeDestroy() { if (this.unsubscribeHistoryLayer) this.unsubscribeHistoryLayer(); if (window.h5HistoryLayerManager.pageKey === this.pageKey) window.h5HistoryLayerManager.unregister(this.pageKey) }
|
||||
}
|
||||
+57
-27
@@ -1,8 +1,11 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="提案查询" placeholder fixed></van-nav-bar>
|
||||
<van-nav-bar @click-left="handlePageBack" left-arrow left-text="返回" title="提案查询" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
@@ -13,9 +16,9 @@ layout("/layouts/platform_h5.html"){
|
||||
@search="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<van-dropdown-item v-model="pageForm.searchSessionId" :options="sessionOptions" @change="sessionChange"></van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.sessionId" :options="sessionOptions" @change="sessionChange"></van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-if="pageForm.searchSessionId"
|
||||
v-if="pageForm.sessionId"
|
||||
v-model="pageForm.delegationId"
|
||||
:options="delegationOptions"
|
||||
@change="doSearch"
|
||||
@@ -49,7 +52,9 @@ layout("/layouts/platform_h5.html"){
|
||||
<van-cell title="代表团" :value="row.delegationName"></van-cell>
|
||||
<van-cell title="当前节点" :value="row.processInstanceNodeName"></van-cell>
|
||||
<van-cell class="table-card-footer">
|
||||
<van-button size="small" @click="openView(row)">查看</van-button>
|
||||
<van-button size="small" @click="openView(row)">
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>查看
|
||||
</van-button>
|
||||
</van-cell>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,20 +62,26 @@ layout("/layouts/platform_h5.html"){
|
||||
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
|
||||
<van-popup :style="{ height: '100%', width: '100%' }" position="right" safe-area-inset-bottom v-model="infoShow">
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="infoShow=false" left-arrow left-text="返回" title="提案信息"></van-nav-bar>
|
||||
</van-sticky>
|
||||
<div style="height: calc(100vh - 44px); overflow-y: auto">
|
||||
<info ref="infoRef"></info>
|
||||
<van-popup v-model="detailVisible" class="proposal-full-popup" position="right"
|
||||
:close-on-click-overlay="false" safe-area-inset-bottom>
|
||||
<div class="proposal-full-popup__page">
|
||||
<van-nav-bar title="提案信息" left-arrow left-text="返回" fixed
|
||||
@click-left="closeHistoryLayer('detail')"></van-nav-bar>
|
||||
<div class="proposal-full-popup__scroll">
|
||||
<proposal-info v-if="detailVisible && detailBizId" :biz-id="detailBizId" :visible="detailVisible"></proposal-info>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
@@ -78,7 +89,7 @@ layout("/layouts/platform_h5.html"){
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
name: null,
|
||||
searchSessionId: null,
|
||||
sessionId: null,
|
||||
unionId: null,
|
||||
unitId: null,
|
||||
delegationId: null
|
||||
@@ -99,17 +110,36 @@ layout("/layouts/platform_h5.html"){
|
||||
moreOptions: {},
|
||||
id: "",
|
||||
formValidSuccess: false,
|
||||
infoShow: false
|
||||
detailVisible: false,
|
||||
detailBizId: "",
|
||||
historyLayerPageKey: "proposal-query-comprehensive-h5"
|
||||
}
|
||||
},
|
||||
components: {
|
||||
info: H5_PROPOSAL_INFO_COMPONENT
|
||||
},
|
||||
methods: {
|
||||
historyBack,
|
||||
registerHistoryLayers() {
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => {
|
||||
this.$set(this, "detailVisible", stack.includes("detail"))
|
||||
})
|
||||
},
|
||||
openHistoryLayer(layerName) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open(layerName)) return
|
||||
if (layerName === "detail") this.$set(this, "detailVisible", true)
|
||||
},
|
||||
closeHistoryLayer(layerName) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close(layerName)) return
|
||||
if (layerName === "detail") this.$set(this, "detailVisible", false)
|
||||
},
|
||||
handlePageBack() {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
|
||||
window.h5HistoryLayerManager.close()
|
||||
return
|
||||
}
|
||||
historyBack()
|
||||
},
|
||||
sessionChange(val) {
|
||||
this.pageForm.delegationId = null
|
||||
if (this.pageForm.searchSessionId) {
|
||||
if (this.pageForm.sessionId) {
|
||||
this.listDelegation()
|
||||
} else {
|
||||
this.delegationOptions = [
|
||||
@@ -130,16 +160,11 @@ layout("/layouts/platform_h5.html"){
|
||||
value: null
|
||||
}
|
||||
].concat(res.data.map((v) => ({ text: v.fullName, value: v.id })))
|
||||
// 届次接口按开始时间倒序返回，首条即最新届次；无届次时继续按全部届次查询。
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "searchSessionId", res.data[0].id)
|
||||
}
|
||||
this.sessionChange()
|
||||
}
|
||||
})
|
||||
},
|
||||
listDelegation() {
|
||||
this.$axios.post("/platform/proposal/common/listDelegation", { sessionId: this.pageForm.searchSessionId }).then((res) => {
|
||||
this.$axios.post("/platform/proposal/common/listDelegation", { sessionId: this.pageForm.sessionId }).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.delegationOptions = [
|
||||
{
|
||||
@@ -166,10 +191,8 @@ layout("/layouts/platform_h5.html"){
|
||||
},
|
||||
|
||||
openView(row) {
|
||||
this.infoShow = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.infoRef.onOpen(row.id)
|
||||
})
|
||||
this.$set(this, "detailBizId", row.id)
|
||||
this.openHistoryLayer("detail")
|
||||
},
|
||||
|
||||
pageData() {
|
||||
@@ -197,7 +220,14 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.registerHistoryLayers()
|
||||
this.pageData()
|
||||
this.listSession()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (window.h5HistoryLayerManager) {
|
||||
window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
+433
@@ -0,0 +1,433 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-case-check-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-case-check-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-case-check-page .van-nav-bar__title {
|
||||
color: #172033;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-case-check-page .van-nav-bar .van-icon,
|
||||
.proposal-case-check-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-case-check-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.proposal-case-check-sticky {
|
||||
padding: 22px 12px 1px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-case-check-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.proposal-case-check-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-case-check-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-case-check-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-dropdown-menu__bar,
|
||||
.proposal-case-check-filter .van-dropdown-menu__item,
|
||||
.proposal-case-check-filter .van-dropdown-menu__title {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-dropdown-menu__bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-dropdown-menu__item,
|
||||
.proposal-case-check-filter .van-dropdown-menu__title {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-dropdown-menu__item {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-dropdown-menu__title {
|
||||
display: inline-flex;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-dropdown-menu__title--active,
|
||||
.proposal-case-check-filter .van-dropdown-item__option--active,
|
||||
.proposal-case-check-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-dropdown-item__option {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-case-check-filter .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.proposal-case-check-list .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proposal-case-check-empty {
|
||||
display: flex;
|
||||
min-height: 280px;
|
||||
padding: 46px 18px 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal-case-check-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.proposal-case-check-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-case-check-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-case-check-card-header {
|
||||
display: flex;
|
||||
margin-bottom: 7px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.proposal-case-check-card-heading {
|
||||
min-width: 0;
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.proposal-case-check-card-title {
|
||||
overflow: hidden;
|
||||
color: #253247;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-case-check-card-code {
|
||||
margin-top: 1px;
|
||||
color: #9ba6b6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-case-check-status {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.proposal-case-check-status .van-tag {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
padding: 3px 9px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.proposal-case-check-content,
|
||||
.proposal-case-check-sticky {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style id="style-proposal-task-popup-h5">
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<div class="proposal-case-check-page">
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="提案委员会审查" placeholder fixed></van-nav-bar>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="proposal-case-check-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
class="proposal-case-check-search"
|
||||
placeholder="请输入提案名称搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu
|
||||
class="proposal-case-check-filter"
|
||||
:class="{'is-open': filterOpened}"
|
||||
active-color="#1989fa"
|
||||
>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.sessionId"
|
||||
:options="sessionOptions"
|
||||
:multiple="false"
|
||||
@change="doSearch"
|
||||
@open="onFilterOpen"
|
||||
@close="onFilterClose"
|
||||
></van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.approvalText"
|
||||
:options="approvalOptions"
|
||||
:multiple="false"
|
||||
@change="approvalChange"
|
||||
@open="onFilterOpen"
|
||||
@close="onFilterClose"
|
||||
></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<main class="proposal-case-check-content">
|
||||
<div class="proposal-case-check-list">
|
||||
<!-- 列表无记录时使用提案 H5 统一空状态。 -->
|
||||
<div v-if="pageForm.totalCount === 0" class="proposal-case-check-empty">
|
||||
<img src="/assets/mobile/img/proposal/proposal-empty.png" alt="暂无提案记录插画">
|
||||
<div class="proposal-case-check-empty__title">暂无提案记录</div>
|
||||
<div class="proposal-case-check-empty__hint">当前筛选条件下暂时没有提案</div>
|
||||
</div>
|
||||
<table-list api="/platform/proposal/case/check/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template #header="{index,row}">
|
||||
<div class="proposal-case-check-card-header">
|
||||
<div class="proposal-case-check-card-heading">
|
||||
<div class="proposal-case-check-card-title">{{row.name}}</div>
|
||||
<div class="proposal-case-check-card-code">编号：{{row.code || '--'}}</div>
|
||||
</div>
|
||||
<enum-tag
|
||||
class="proposal-case-check-status"
|
||||
v-if="row.instanceState"
|
||||
:value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum"
|
||||
label_key="message"
|
||||
size="small"
|
||||
></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="立案编号">{{row.caseFilingCode || '--'}}</table-column>
|
||||
<table-column label="提案类别">{{row.typeName || '--'}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName || '--'}}</table-column>
|
||||
<table-column label="教代会">{{row.sessionName || '--'}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName || '--'}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName || '--'}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="edit"></van-icon>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<van-icon class="proposal-action-icon" name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<proposal-task-popup ref="taskPopup" kind="caseCheck" page-key="proposal-case-check-task" @success="doSearch"></proposal-task-popup>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
<!--#include("../../common/task-popup.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {"proposal-task-popup": PROPOSAL_TASK_POPUP},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
pageOrderName: "",
|
||||
pageOrderBy: "",
|
||||
name: null,
|
||||
sessionId: null,
|
||||
approvalText: "0",
|
||||
approval: false
|
||||
},
|
||||
sessionOptions: [],
|
||||
filterOpened: false,
|
||||
approvalOptions: [
|
||||
{text: "未审核", value: "0"},
|
||||
{text: "已审核", value: "1"}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReady() {
|
||||
this.listSession(false)
|
||||
},
|
||||
|
||||
// 审核状态下拉框使用字符串值展示，查询接口使用布尔值区分已审核和未审核。
|
||||
approvalChange(value) {
|
||||
this.$set(this.pageForm, "approval", value === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
|
||||
onFilterOpen() {
|
||||
this.$set(this, "filterOpened", true)
|
||||
},
|
||||
|
||||
onFilterClose() {
|
||||
this.$set(this, "filterOpened", false)
|
||||
},
|
||||
|
||||
// 缓存恢复时只加载教代会选项，不覆盖离开列表前的筛选条件和列表快照。
|
||||
listSession(skipDefaultSearch) {
|
||||
this.$axios.post("/platform/proposal/common/listSession").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$set(this, "sessionOptions", [{text: "全部教代会", value: null}]
|
||||
.concat(res.data.map((item) => ({text: item.fullName, value: item.id}))))
|
||||
if (skipDefaultSearch) return
|
||||
this.$set(this.pageForm, "sessionId", res.data.length > 0 ? res.data[0].id : null)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onView(row, index) {
|
||||
this.$refs.taskPopup.open(row, "view")
|
||||
},
|
||||
|
||||
onApproval(row, index) {
|
||||
this.$refs.taskPopup.open(row, "approval")
|
||||
},
|
||||
|
||||
onRevoke(row) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要撤回吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/flow/common/revokeTask", {taskId: row.taskId}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.$set(this.pageForm, "pageNumber", 1)
|
||||
this.$set(this.pageForm, "totalCount", 0)
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const tab = new URLSearchParams(window.location.search).get("tab")
|
||||
if (tab === "done") {
|
||||
this.$set(this.pageForm, "approval", true)
|
||||
this.$set(this.pageForm, "approvalText", "1")
|
||||
} else if (tab === "todo") {
|
||||
this.$set(this.pageForm, "approval", false)
|
||||
this.$set(this.pageForm, "approvalText", "0")
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
+149
-112
@@ -1,8 +1,11 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="委员会成员意见" placeholder
|
||||
<van-nav-bar @click-left="handlePageBack" left-arrow left-text="返回" title="委员会成员意见" placeholder
|
||||
fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
@@ -41,86 +44,81 @@ layout("/layouts/platform_h5.html"){
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="!row.pcoId" @click="onApproval(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<van-icon class="proposal-action-icon" name="edit"></van-icon>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<proposal-info ref="proposalInfoRef">
|
||||
<div v-if="showApprovalForm">
|
||||
<div class="process-title">提案委员会成员意见</div>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.caseFilingResultName"
|
||||
name="caseFilingResultName"
|
||||
label="立案结果"
|
||||
placeholder="请选择立案结果"
|
||||
:rules="[{ required: true, message: '请选择立案结果' }]"
|
||||
required
|
||||
is-link
|
||||
@click="showCaseFilingResultPicker = true"
|
||||
></van-field>
|
||||
<van-popup v-model="showCaseFilingResultPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="dict.type.PROPOSAL_CASE_FILING_RESULT.map(item => ({text: item.label, value: item.code}))"
|
||||
@confirm="onCaseFilingResultConfirm"
|
||||
@cancel="showCaseFilingResultPicker = false"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
|
||||
<template v-if="['CONFIRM_FILING'].includes(formData.caseFilingResult)">
|
||||
<van-field
|
||||
v-model="formData.caseFilingTypeName"
|
||||
name="caseFilingTypeName"
|
||||
label="立案结果"
|
||||
placeholder="请选择立案类型"
|
||||
:rules="[{ required: true, message: '请选择立案类型' }]"
|
||||
required
|
||||
is-link
|
||||
@click="showCaseFilingTypePicker = true"
|
||||
></van-field>
|
||||
<van-popup v-model="showCaseFilingTypePicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="dict.type.PROPOSAL_CASE_FILING_TYPE.map(item => ({text: item.label, value: item.code}))"
|
||||
@confirm="onCaseFilingTypeConfirm"
|
||||
@cancel="showCaseFilingTypePicker = false"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<van-field
|
||||
v-model="formData.opinion"
|
||||
name="opinion"
|
||||
label="审批意见"
|
||||
placeholder="请输入审批意见"
|
||||
:rules="[{ required: true, message: '请填写审批意见' }]"
|
||||
required
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
></van-field>
|
||||
</van-form>
|
||||
<div style="display: flex; justify-content: space-between; column-gap: 10px; padding: 10px">
|
||||
<van-button type="primary" block @click="doSubmit">提交</van-button>
|
||||
<van-button block @click="$refs.proposalInfoRef.onClose()">取消</van-button>
|
||||
<van-popup v-model="detailVisible" class="proposal-full-popup" position="right"
|
||||
:close-on-click-overlay="false" safe-area-inset-bottom>
|
||||
<div class="proposal-full-popup__page">
|
||||
<van-nav-bar :title="popupTitle" left-arrow left-text="返回" fixed
|
||||
@click-left="closeHistoryLayer('detail')"></van-nav-bar>
|
||||
<div class="proposal-full-popup__scroll">
|
||||
<proposal-info v-if="detailVisible && detailBizId" :biz-id="detailBizId" :visible="detailVisible">
|
||||
<div v-if="isApproval">
|
||||
<van-form ref="formRef">
|
||||
<van-field v-model="formData.caseFilingResultName" name="caseFilingResultName"
|
||||
label="立案结果" placeholder="请选择立案结果" readonly required is-link
|
||||
:rules="[{ required: true, message: '请选择立案结果' }]"
|
||||
@click="openHistoryLayer('result-picker')"></van-field>
|
||||
<template v-if="formData.caseFilingResult === 'CONFIRM_FILING'">
|
||||
<van-field v-model="formData.caseFilingTypeName" name="caseFilingTypeName"
|
||||
label="立案类型" placeholder="请选择立案类型" readonly required is-link
|
||||
:rules="[{ required: true, message: '请选择立案类型' }]"
|
||||
@click="openHistoryLayer('type-picker')"></van-field>
|
||||
</template>
|
||||
<section class="proposal-view-card">
|
||||
<h2 class="proposal-view-card__title">
|
||||
审批意见
|
||||
<span class="proposal-audit-card__required">*</span>
|
||||
</h2>
|
||||
<van-field v-model="formData.opinion" class="proposal-audit-field" name="opinion"
|
||||
type="textarea" rows="6" label="" placeholder="请输入审批意见"
|
||||
required maxlength="100" show-word-limit
|
||||
:rules="[{ required: true, message: '请填写审批意见' }]"></van-field>
|
||||
</section>
|
||||
</van-form>
|
||||
<div class="proposal-popup-form-actions">
|
||||
<van-button block :disabled="formLoading" @click="closeHistoryLayer('detail')">取消</van-button>
|
||||
<van-button type="primary" block :loading="formLoading" @click="submitApproval">提交</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
</div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="showCaseFilingResultPicker" position="bottom" :close-on-click-overlay="false">
|
||||
<van-picker show-toolbar
|
||||
:columns="dict.type.PROPOSAL_CASE_FILING_RESULT.map(item => ({text: item.label, value: item.code}))"
|
||||
@confirm="onCaseFilingResultConfirm"
|
||||
@cancel="closeHistoryLayer('result-picker')"></van-picker>
|
||||
</van-popup>
|
||||
<van-popup v-model="showCaseFilingTypePicker" position="bottom" :close-on-click-overlay="false">
|
||||
<van-picker show-toolbar
|
||||
:columns="dict.type.PROPOSAL_CASE_FILING_TYPE.map(item => ({text: item.label, value: item.code}))"
|
||||
@confirm="onCaseFilingTypeConfirm"
|
||||
@cancel="closeHistoryLayer('type-picker')"></van-picker>
|
||||
</van-popup>
|
||||
<van-dialog :value="submitConfirmVisible" title="提示" message="您确定要提交吗？" show-cancel-button
|
||||
@confirm="confirmApproval" @cancel="closeHistoryLayer('submit-confirm')"></van-dialog>
|
||||
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
dicts: ["PROPOSAL_CASE_FILING_RESULT", "PROPOSAL_CASE_FILING_TYPE"],
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
@@ -134,17 +132,57 @@ layout("/layouts/platform_h5.html"){
|
||||
},
|
||||
|
||||
sessionOptions: [],
|
||||
detailVisible: false,
|
||||
detailBizId: "",
|
||||
popupAction: "view",
|
||||
formData: {},
|
||||
showApprovalForm: false,
|
||||
|
||||
formLoading: false,
|
||||
showCaseFilingResultPicker: false,
|
||||
showCaseFilingTypePicker: false
|
||||
showCaseFilingTypePicker: false,
|
||||
submitConfirmVisible: false,
|
||||
historyLayerPageKey: "proposal-commissioner-h5"
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
computed: {
|
||||
isApproval() {
|
||||
return this.popupAction === "approval"
|
||||
},
|
||||
popupTitle() {
|
||||
return this.isApproval ? "委员会成员意见" : "提案详情"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
registerHistoryLayers() {
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => {
|
||||
this.$set(this, "detailVisible", stack.includes("detail"))
|
||||
this.$set(this, "showCaseFilingResultPicker", stack.includes("result-picker"))
|
||||
this.$set(this, "showCaseFilingTypePicker", stack.includes("type-picker"))
|
||||
this.$set(this, "submitConfirmVisible", stack.includes("submit-confirm"))
|
||||
})
|
||||
},
|
||||
openHistoryLayer(layerName) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open(layerName)) return
|
||||
this.setHistoryLayerVisible(layerName, true)
|
||||
},
|
||||
closeHistoryLayer(layerName, afterClose = null) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close(layerName, afterClose)) return
|
||||
this.setHistoryLayerVisible(layerName, false)
|
||||
if (typeof afterClose === "function") afterClose()
|
||||
},
|
||||
setHistoryLayerVisible(layerName, visible) {
|
||||
if (layerName === "detail") this.$set(this, "detailVisible", visible)
|
||||
if (layerName === "result-picker") this.$set(this, "showCaseFilingResultPicker", visible)
|
||||
if (layerName === "type-picker") this.$set(this, "showCaseFilingTypePicker", visible)
|
||||
if (layerName === "submit-confirm") this.$set(this, "submitConfirmVisible", visible)
|
||||
},
|
||||
handlePageBack() {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
|
||||
window.h5HistoryLayerManager.close()
|
||||
return
|
||||
}
|
||||
this.historyBack()
|
||||
},
|
||||
onReady() {
|
||||
this.listSession()
|
||||
},
|
||||
@@ -157,65 +195,58 @@ layout("/layouts/platform_h5.html"){
|
||||
value: null
|
||||
}
|
||||
].concat(res.data.map((v) => ({text: v.fullName, value: v.id})))
|
||||
// 届次接口按开始时间倒序返回，首条即最新届次；无届次时继续按全部届次查询。
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "sessionId", res.data[0].id)
|
||||
if (this.sessionOptions.length > 0) {
|
||||
this.pageForm.sessionId = this.sessionOptions[0].value
|
||||
this.doSearch()
|
||||
}
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onView(row) {
|
||||
this.showApprovalForm = false
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
},
|
||||
|
||||
// 确定立案类型
|
||||
onCaseFilingResultConfirm(value) {
|
||||
this.$set(this.formData, "caseFilingResultName", value.text)
|
||||
this.$set(this.formData, "caseFilingResult", value.value)
|
||||
this.showCaseFilingResultPicker = false
|
||||
},
|
||||
|
||||
// 确定立案类型
|
||||
onCaseFilingTypeConfirm(value) {
|
||||
this.$set(this.formData, "caseFilingTypeName", value.text)
|
||||
this.$set(this.formData, "caseFilingType", value.value)
|
||||
this.showCaseFilingTypePicker = false
|
||||
this.$set(this, "detailBizId", row.id)
|
||||
this.$set(this, "popupAction", "view")
|
||||
this.$set(this, "formData", {})
|
||||
this.openHistoryLayer("detail")
|
||||
},
|
||||
|
||||
onApproval(row) {
|
||||
this.showApprovalForm = true
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.formData = {
|
||||
this.$set(this, "detailBizId", row.id)
|
||||
this.$set(this, "popupAction", "approval")
|
||||
this.$set(this, "formData", {
|
||||
proposalId: row.id,
|
||||
caseFilingResult: null,
|
||||
caseFilingType: null,
|
||||
opinion: null
|
||||
}
|
||||
})
|
||||
this.openHistoryLayer("detail")
|
||||
},
|
||||
|
||||
async doSubmit() {
|
||||
try {
|
||||
await this.$refs.formRef.validate();
|
||||
this.$dialog.confirm({
|
||||
title: '提示',
|
||||
message: "您确定要提交吗？",
|
||||
}).then(() => {
|
||||
this.$axios.post('/platform/proposal/commissioner/doApproval', this.formData).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.proposalInfoRef.onClose()
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
onCaseFilingResultConfirm(value) {
|
||||
this.$set(this.formData, "caseFilingResultName", value.text)
|
||||
this.$set(this.formData, "caseFilingResult", value.value)
|
||||
this.closeHistoryLayer("result-picker")
|
||||
},
|
||||
onCaseFilingTypeConfirm(value) {
|
||||
this.$set(this.formData, "caseFilingTypeName", value.text)
|
||||
this.$set(this.formData, "caseFilingType", value.value)
|
||||
this.closeHistoryLayer("type-picker")
|
||||
},
|
||||
submitApproval() {
|
||||
this.$refs.formRef.validate().then(() => this.openHistoryLayer("submit-confirm")).catch(() => {})
|
||||
},
|
||||
confirmApproval() {
|
||||
this.closeHistoryLayer("submit-confirm", () => this.doSubmitApproval())
|
||||
},
|
||||
doSubmitApproval() {
|
||||
this.$set(this, "formLoading", true)
|
||||
this.$axios.post("/platform/proposal/commissioner/doApproval", this.formData)
|
||||
.then((res) => {
|
||||
if (res && res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.closeHistoryLayer("detail", () => this.doSearch())
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
.finally(() => this.$set(this, "formLoading", false))
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
@@ -225,6 +256,12 @@ layout("/layouts/platform_h5.html"){
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.registerHistoryLayers()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (window.h5HistoryLayerManager) window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
+356
-126
@@ -1,90 +1,344 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-delegation-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-delegation-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-delegation-page .van-nav-bar__title {
|
||||
color: #172033;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-delegation-page .van-nav-bar .van-icon,
|
||||
.proposal-delegation-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-delegation-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.proposal-delegation-sticky {
|
||||
padding: 22px 12px 1px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-delegation-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.proposal-delegation-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-delegation-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-delegation-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-dropdown-menu__bar,
|
||||
.proposal-delegation-filter .van-dropdown-menu__item,
|
||||
.proposal-delegation-filter .van-dropdown-menu__title {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-dropdown-menu__bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-dropdown-menu__item,
|
||||
.proposal-delegation-filter .van-dropdown-menu__title {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-dropdown-menu__item {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-dropdown-menu__title {
|
||||
display: inline-flex;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-dropdown-menu__title--active,
|
||||
.proposal-delegation-filter .van-dropdown-item__option--active,
|
||||
.proposal-delegation-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-dropdown-item__option {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-delegation-filter .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.proposal-delegation-list .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proposal-delegation-empty {
|
||||
display: flex;
|
||||
min-height: 280px;
|
||||
padding: 46px 18px 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal-delegation-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.proposal-delegation-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-delegation-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-delegation-card-header {
|
||||
display: flex;
|
||||
margin-bottom: 7px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.proposal-delegation-card-heading {
|
||||
min-width: 0;
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.proposal-delegation-card-title {
|
||||
overflow: hidden;
|
||||
color: #253247;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-delegation-card-code {
|
||||
margin-top: 1px;
|
||||
color: #9ba6b6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-delegation-status {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.proposal-delegation-status .van-tag {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
padding: 3px 9px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.proposal-delegation-content,
|
||||
.proposal-delegation-sticky {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style id="style-proposal-task-popup-h5">
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="团长审核" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
:show-action="false"
|
||||
:reverse-color="false"
|
||||
input-align="left"
|
||||
placeholder="请输入提案名称搜索"
|
||||
@search="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<van-dropdown-item v-model="pageForm.sessionId" :options="sessionOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
<van-tabs v-model="pageForm.approvalText"
|
||||
@change="(val)=>{this.pageForm.approval = val==='1';this.doSearch();}">
|
||||
<van-tab title="已审核" name="1"></van-tab>
|
||||
<van-tab title="未审核" name="0"></van-tab>
|
||||
</van-tabs>
|
||||
</van-sticky>
|
||||
<div class="proposal-delegation-page">
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="团长审核" placeholder fixed></van-nav-bar>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="proposal-delegation-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
class="proposal-delegation-search"
|
||||
placeholder="请输入提案名称搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu
|
||||
class="proposal-delegation-filter"
|
||||
:class="{'is-open': filterOpened}"
|
||||
active-color="#1989fa"
|
||||
>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.sessionId"
|
||||
:options="sessionOptions"
|
||||
:multiple="false"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.approvalText"
|
||||
:options="approvalOptions"
|
||||
:multiple="false"
|
||||
@change="approvalChange"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/proposal/delegation/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案编号">{{row.code}}</table-column>
|
||||
<table-column label="提案类别">{{row.typeName}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看</span>
|
||||
<main class="proposal-delegation-content">
|
||||
<div class="proposal-delegation-list">
|
||||
<!-- 列表无记录时使用与“我的提案”一致的提案专用空状态。 -->
|
||||
<div v-if="pageForm.totalCount === 0" class="proposal-delegation-empty">
|
||||
<img src="/assets/mobile/img/proposal/proposal-empty.png" alt="暂无提案记录插画">
|
||||
<div class="proposal-delegation-empty__title">暂无提案记录</div>
|
||||
<div class="proposal-delegation-empty__hint">当前筛选条件下暂时没有提案</div>
|
||||
</div>
|
||||
<table-list api="/platform/proposal/delegation/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template #header="{index,row}">
|
||||
<div class="proposal-delegation-card-header">
|
||||
<div class="proposal-delegation-card-heading">
|
||||
<div class="proposal-delegation-card-title">{{row.name}}</div>
|
||||
<div class="proposal-delegation-card-code">编号：{{row.code || '--'}}</div>
|
||||
</div>
|
||||
<enum-tag
|
||||
class="proposal-delegation-status"
|
||||
v-if="row.instanceState"
|
||||
:value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum"
|
||||
label_key="message"
|
||||
size="small"
|
||||
></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案类别">{{row.typeName || '--'}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName || '--'}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName || '--'}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName || '--'}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="edit"></van-icon>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<van-icon class="proposal-action-icon" name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<i class="fa fa-reply"></i>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<proposal-info ref="proposalInfoRef">
|
||||
<div v-if="showApprovalForm">
|
||||
<div class="process-title">{{formData.taskName}}</div>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.tf_opinion"
|
||||
name="tf_opinion"
|
||||
label="审批意见"
|
||||
placeholder="请输入审批意见"
|
||||
:rules="[{ required: true, message: '请填写审批意见' }]"
|
||||
required
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
></van-field>
|
||||
</van-form>
|
||||
<div style="display: flex; justify-content: space-between; column-gap: 10px; padding: 10px">
|
||||
<van-button type="primary" block @click="handleTaskAction(1)">同意</van-button>
|
||||
<van-button type="danger" block @click="handleTaskAction(2)">不同意</van-button>
|
||||
<van-button type="danger" block @click="handleTaskAction(6)">退回</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
<proposal-task-popup ref="taskPopup" kind="delegation" page-key="proposal-delegation-task" @success="doSearch"></proposal-task-popup>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
|
||||
const vue = new Vue({
|
||||
<!--#include("../../common/task-popup.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {"proposal-task-popup": PROPOSAL_TASK_POPUP},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
pageOrderName: "",
|
||||
pageOrderBy: "",
|
||||
name: null,
|
||||
sessionId: null,
|
||||
approvalText: "0",
|
||||
@@ -92,74 +346,40 @@ layout("/layouts/platform_h5.html"){
|
||||
},
|
||||
|
||||
sessionOptions: [],
|
||||
formData: {},
|
||||
showApprovalForm: false
|
||||
filterOpened: false,
|
||||
approvalOptions: [
|
||||
{text: "未审核", value: "0"},
|
||||
{text: "已审核", value: "1"}
|
||||
],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
},
|
||||
methods: {
|
||||
onReady() {
|
||||
this.listSession()
|
||||
this.listSession(false)
|
||||
},
|
||||
listSession() {
|
||||
// 审核状态下拉框使用字符串值展示，查询接口使用布尔值区分已审核和未审核。
|
||||
approvalChange(value) {
|
||||
this.$set(this.pageForm, "approval", value === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
listSession(skipDefaultSearch) {
|
||||
this.$axios.post("/platform/proposal/common/listSession").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.sessionOptions = [
|
||||
{
|
||||
text: "全部届次",
|
||||
value: null
|
||||
}
|
||||
].concat(res.data.map((v) => ({text: v.fullName, value: v.id})))
|
||||
// 届次接口按开始时间倒序返回，首条即最新届次；无届次时继续按全部届次查询。
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "sessionId", res.data[0].id)
|
||||
}
|
||||
this.sessionOptions = [{text: "全部届次", value: null}]
|
||||
.concat(res.data.map((v) => ({text: v.fullName, value: v.id})))
|
||||
if (skipDefaultSearch) return
|
||||
this.$set(this.pageForm, "sessionId", res.data.length > 0 ? res.data[0].id : null)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onView(row) {
|
||||
this.showApprovalForm = false
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
onView(row, index) {
|
||||
this.$refs.taskPopup.open(row, "view")
|
||||
},
|
||||
|
||||
onApproval(row) {
|
||||
this.showApprovalForm = true
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.formData = {
|
||||
processTaskId: row.taskId,
|
||||
taskName: row.curTaskName
|
||||
}
|
||||
},
|
||||
|
||||
async handleTaskAction(val) {
|
||||
try {
|
||||
await this.$refs.formRef.validate();
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/flow/common/executeTask", {
|
||||
data: JSON.stringify({
|
||||
...this.formData,
|
||||
submitType: val
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.proposalInfoRef.onClose()
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
onApproval(row, index) {
|
||||
this.$refs.taskPopup.open(row, "approval")
|
||||
},
|
||||
|
||||
onRevoke(row){
|
||||
@@ -178,11 +398,21 @@ layout("/layouts/platform_h5.html"){
|
||||
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$set(this.pageForm, "pageNumber", 1)
|
||||
this.$set(this.pageForm, "totalCount", 0)
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const tab = new URLSearchParams(window.location.search).get("tab")
|
||||
if (tab === "done") {
|
||||
this.$set(this.pageForm, "approval", true)
|
||||
this.$set(this.pageForm, "approvalText", "1")
|
||||
} else if (tab === "todo") {
|
||||
this.$set(this.pageForm, "approval", false)
|
||||
this.$set(this.pageForm, "approvalText", "0")
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
+360
-203
@@ -1,244 +1,391 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-page .van-nav-bar__title {
|
||||
color: #172033;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-page .van-nav-bar .van-icon,
|
||||
.proposal-feedback-evaluation-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-sticky {
|
||||
padding: 22px 12px 1px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__bar,
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__item,
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__title {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__item,
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__title {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__item {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__title {
|
||||
display: inline-flex;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__title--active,
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-item__option--active,
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-dropdown-item__option {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-filter .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-list .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-empty {
|
||||
display: flex;
|
||||
min-height: 280px;
|
||||
padding: 46px 18px 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-card-header {
|
||||
display: flex;
|
||||
margin-bottom: 7px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-card-heading {
|
||||
min-width: 0;
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-card-title {
|
||||
overflow: hidden;
|
||||
color: #253247;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-card-code {
|
||||
margin-top: 1px;
|
||||
color: #9ba6b6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-status {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.proposal-feedback-evaluation-status .van-tag {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
padding: 3px 9px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.proposal-feedback-evaluation-content,
|
||||
.proposal-feedback-evaluation-sticky {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style id="style-proposal-task-popup-h5">
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="反馈评价" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
:show-action="false"
|
||||
:reverse-color="false"
|
||||
input-align="left"
|
||||
placeholder="请输入提案名称搜索"
|
||||
@search="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<van-dropdown-item v-model="pageForm.sessionId" :options="sessionOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
<van-tabs v-model="pageForm.approvalText"
|
||||
@change="(val)=>{this.pageForm.approval = val==='1';this.doSearch();}">
|
||||
<van-tab title="已反馈" name="1"></van-tab>
|
||||
<van-tab title="未反馈" name="0"></van-tab>
|
||||
</van-tabs>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/proposal/feedbackEvaluation/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案编号">{{row.code}}</table-column>
|
||||
<table-column label="提案类别">{{row.typeName}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看</span>
|
||||
<div class="proposal-feedback-evaluation-page">
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="反馈评价" placeholder fixed></van-nav-bar>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="proposal-feedback-evaluation-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
class="proposal-feedback-evaluation-search"
|
||||
placeholder="请输入提案名称搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu
|
||||
class="proposal-feedback-evaluation-filter"
|
||||
:class="{'is-open': filterOpened}"
|
||||
active-color="#1989fa"
|
||||
>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.sessionId"
|
||||
:options="sessionOptions"
|
||||
:multiple="false"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.approvalText"
|
||||
:options="approvalOptions"
|
||||
:multiple="false"
|
||||
@change="approvalChange"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>评价</span>
|
||||
</van-sticky>
|
||||
|
||||
<main class="proposal-feedback-evaluation-content">
|
||||
<div class="proposal-feedback-evaluation-list">
|
||||
<!-- 列表无记录时使用与团长审核一致的提案专用空状态。 -->
|
||||
<div v-if="pageForm.totalCount === 0" class="proposal-feedback-evaluation-empty">
|
||||
<img src="/assets/mobile/img/proposal/proposal-empty.png" alt="暂无提案记录插画">
|
||||
<div class="proposal-feedback-evaluation-empty__title">暂无提案记录</div>
|
||||
<div class="proposal-feedback-evaluation-empty__hint">当前筛选条件下暂时没有提案</div>
|
||||
</div>
|
||||
<table-list api="/platform/proposal/feedbackEvaluation/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template #header="{index,row}">
|
||||
<div class="proposal-feedback-evaluation-card-header">
|
||||
<div class="proposal-feedback-evaluation-card-heading">
|
||||
<div class="proposal-feedback-evaluation-card-title">{{row.name}}</div>
|
||||
<div class="proposal-feedback-evaluation-card-code">编号：{{row.code || '--'}}</div>
|
||||
</div>
|
||||
<enum-tag
|
||||
class="proposal-feedback-evaluation-status"
|
||||
v-if="row.instanceState"
|
||||
:value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum"
|
||||
label_key="message"
|
||||
size="small"
|
||||
></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案类别">{{row.typeName || '--'}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName || '--'}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName || '--'}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName || '--'}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="edit"></van-icon>
|
||||
<span>评价</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<van-icon class="proposal-action-icon" name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<i class="fa fa-reply"></i>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<proposal-info ref="proposalInfoRef">
|
||||
<div v-if="showApprovalForm">
|
||||
<div class="process-title">{{formData.taskName}}</div>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.tf_feedback_name"
|
||||
name="tf_feedback_name"
|
||||
label="满意度"
|
||||
placeholder="请选择满意度"
|
||||
:rules="[{ required: true, message: '请选择满意度' }]"
|
||||
required
|
||||
is-link
|
||||
@click="showFeedBackPicker = true"
|
||||
></van-field>
|
||||
<van-popup v-model="showFeedBackPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="dict.type.PROPOSAL_FEEDBACK.map(item => ({text: item.label, value: item.code}))"
|
||||
@confirm="onFeedBackConfirm"
|
||||
@cancel="showFeedBackPicker = false"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
|
||||
<van-field
|
||||
v-model="formData.tf_opinion"
|
||||
name="tf_opinion"
|
||||
label="反馈意见"
|
||||
placeholder="请输入反馈意见"
|
||||
:rules="[{ required: true, message: '请填写反馈意见' }]"
|
||||
required
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
></van-field>
|
||||
|
||||
<template v-if="['SATISFIED','FAIRLY_SATISFIED'].includes(formData.tf_feedback)">
|
||||
<van-field
|
||||
v-model="formData.tf_address"
|
||||
name="tf_address"
|
||||
label="通讯地址"
|
||||
placeholder="请输入通讯地址"
|
||||
:rules="[{ required: true, message: '请输入通讯地址' }]"
|
||||
required
|
||||
show-word-limit
|
||||
></van-field>
|
||||
<!--联系电话-->
|
||||
<van-field
|
||||
v-model="formData.tf_phone"
|
||||
name="tf_phone"
|
||||
label="联系电话"
|
||||
placeholder="请输入联系电话"
|
||||
:rules="[{ required: true, message: '请输入联系电话' }]"
|
||||
required
|
||||
show-word-limit
|
||||
></van-field>
|
||||
<!--邮政编码-->
|
||||
<van-field
|
||||
v-model="formData.tf_postcode"
|
||||
name="tf_postcode"
|
||||
label="邮政编码"
|
||||
placeholder="请输入邮政编码"
|
||||
:rules="[{ required: true, message: '请输入邮政编码' }]"
|
||||
required
|
||||
show-word-limit
|
||||
></van-field>
|
||||
</template>
|
||||
</van-form>
|
||||
<div style="display: flex; justify-content: space-between; column-gap: 10px; padding: 10px">
|
||||
<van-button type="primary" block @click="handleTaskAction(1)">提交</van-button>
|
||||
<van-button type="danger" block @click="$refs.proposalInfoRef.onClose()">取消</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<proposal-task-popup ref="taskPopup" kind="feedbackEvaluation" page-key="proposal-feedback-task" @success="doSearch"></proposal-task-popup>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
|
||||
<!--#include("../../common/task-popup.js"){}#-->
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
dicts: ["PROPOSAL_FEEDBACK"],
|
||||
store,
|
||||
components: {"proposal-task-popup": PROPOSAL_TASK_POPUP},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
pageOrderName: "",
|
||||
pageOrderBy: "",
|
||||
name: null,
|
||||
sessionId: null,
|
||||
approvalText: "0",
|
||||
approval: false
|
||||
},
|
||||
|
||||
sessionOptions: [],
|
||||
formData: {},
|
||||
showApprovalForm: false,
|
||||
|
||||
showFeedBackPicker: false
|
||||
filterOpened: false,
|
||||
approvalOptions: [
|
||||
{text: "未评价", value: "0"},
|
||||
{text: "已评价", value: "1"}
|
||||
],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
},
|
||||
methods: {
|
||||
onReady() {
|
||||
this.listSession()
|
||||
this.listSession(false)
|
||||
},
|
||||
listSession() {
|
||||
|
||||
// 评价状态下拉框使用字符串值展示，查询接口使用布尔值区分已评价和未评价。
|
||||
approvalChange(value) {
|
||||
this.$set(this.pageForm, "approval", value === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
|
||||
// 缓存恢复时只加载届次选项，不覆盖离开列表前的筛选条件和列表快照。
|
||||
listSession(skipDefaultSearch) {
|
||||
this.$axios.post("/platform/proposal/common/listSession").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.sessionOptions = [
|
||||
{
|
||||
text: "全部届次",
|
||||
value: null
|
||||
}
|
||||
].concat(res.data.map((v) => ({text: v.fullName, value: v.id})))
|
||||
// 届次接口按开始时间倒序返回，首条即最新届次；无届次时继续按全部届次查询。
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "sessionId", res.data[0].id)
|
||||
}
|
||||
this.sessionOptions = [{text: "全部届次", value: null}]
|
||||
.concat(res.data.map((item) => ({text: item.fullName, value: item.id})))
|
||||
if (skipDefaultSearch) return
|
||||
// 保留反馈评价原有默认口径：首次进入查询全部届次。
|
||||
this.$set(this.pageForm, "sessionId", null)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onView(row) {
|
||||
this.showApprovalForm = false
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
onView(row, index) {
|
||||
this.$refs.taskPopup.open(row, "view")
|
||||
},
|
||||
|
||||
onApproval(row) {
|
||||
this.showApprovalForm = true
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.formData = {
|
||||
processTaskId: row.taskId,
|
||||
taskName: row.curTaskName,
|
||||
instanceId: row.instanceId
|
||||
}
|
||||
onApproval(row, index) {
|
||||
this.$refs.taskPopup.open(row, "approval")
|
||||
},
|
||||
|
||||
onFeedBackConfirm({value, text}) {
|
||||
this.formData.tf_feedback_name = text
|
||||
this.formData.tf_feedback = value
|
||||
this.showFeedBackPicker = false
|
||||
},
|
||||
|
||||
async handleTaskAction(val) {
|
||||
try {
|
||||
await this.$refs.formRef.validate();
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交吗？"
|
||||
}).then(async () => {
|
||||
debugger
|
||||
const formData = {
|
||||
...this.formData,
|
||||
submitType: val
|
||||
}
|
||||
// 不满意
|
||||
if (this.formData.tf_feedback === 'DISSATISFIED') {
|
||||
const caseInfo = await this.getCaseInfo(this.formData.instanceId)
|
||||
formData.tf_masterUnitId = caseInfo.tf_masterUnitId
|
||||
}
|
||||
|
||||
this.$axios.post("/flow/common/executeTask", {
|
||||
data: JSON.stringify(formData)
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.proposalInfoRef.onClose()
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
},
|
||||
// 获取立案信息
|
||||
async getCaseInfo(instId) {
|
||||
const {
|
||||
data,
|
||||
code
|
||||
} = await this.$axios.post('/platform/proposal/feedbackEvaluation/caseInfo', {instId})
|
||||
if (code === 0) {
|
||||
return data
|
||||
}
|
||||
},
|
||||
onRevoke(row) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
@@ -255,11 +402,21 @@ layout("/layouts/platform_h5.html"){
|
||||
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$set(this.pageForm, "pageNumber", 1)
|
||||
this.$set(this.pageForm, "totalCount", 0)
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const tab = new URLSearchParams(window.location.search).get("tab")
|
||||
if (tab === "done") {
|
||||
this.$set(this.pageForm, "approval", true)
|
||||
this.$set(this.pageForm, "approvalText", "1")
|
||||
} else if (tab === "todo") {
|
||||
this.$set(this.pageForm, "approval", false)
|
||||
this.$set(this.pageForm, "approvalText", "0")
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
+525
-66
@@ -1,63 +1,455 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-mine-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-mine-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-mine-page .van-nav-bar__title {
|
||||
color: #172033;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-mine-page .van-nav-bar .van-icon,
|
||||
.proposal-mine-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-mine-popup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-mine-popup .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-mine-popup .van-nav-bar .van-icon,
|
||||
.proposal-mine-popup .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
/* 详情弹框复用项目全屏 Popup 的固定导航结构，内容区域单独滚动。 */
|
||||
.proposal-detail-popup {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.proposal-detail-popup-page {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-top: 46px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.proposal-detail-popup-page .van-nav-bar {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.proposal-detail-scroll {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.proposal-detail-scroll .proposal-view-main {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.proposal-mine-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.proposal-mine-sticky {
|
||||
padding: 22px 12px 1px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-mine-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.proposal-mine-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-mine-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-mine-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.proposal-mine-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.proposal-mine-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.proposal-mine-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.proposal-mine-filter .van-dropdown-menu__item {
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.proposal-mine-filter .van-dropdown-menu__title {
|
||||
display: inline-flex;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-mine-filter .van-dropdown-menu__title--active,
|
||||
.proposal-mine-filter .van-dropdown-item__option--active,
|
||||
.proposal-mine-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-mine-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.proposal-mine-filter .van-dropdown-item__option {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-mine-filter .van-dropdown-item__option .van-cell__title {
|
||||
display: flex;
|
||||
min-height: 20px;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.proposal-mine-list {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.proposal-mine-list .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proposal-mine-empty {
|
||||
display: flex;
|
||||
min-height: 280px;
|
||||
padding: 46px 18px 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal-mine-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.proposal-mine-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-mine-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-invite-empty {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
padding: 40px 18px 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal-invite-empty img {
|
||||
display: block;
|
||||
width: 82%;
|
||||
max-width: 270px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.proposal-invite-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-invite-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-card-header {
|
||||
display: flex;
|
||||
margin-bottom: 7px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.proposal-card-heading {
|
||||
min-width: 0;
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.proposal-card-title {
|
||||
overflow: hidden;
|
||||
color: #253247;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-card-code {
|
||||
margin-top: 1px;
|
||||
color: #9ba6b6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-card-status {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.proposal-card-status .van-tag,
|
||||
.proposal-card-status--plain {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
padding: 3px 9px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-card-status--plain {
|
||||
color: #1989fa;
|
||||
background-color: #eaf4ff;
|
||||
}
|
||||
|
||||
.proposal-mine-page .table-list-container .table-list-item .action-btn .van-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.proposal-mine-content {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.proposal-mine-sticky {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="我的提案" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
:reverse-color="false"
|
||||
:show-action="false"
|
||||
@search="doSearch"
|
||||
input-align="left"
|
||||
placeholder="请输入提案名称搜索"
|
||||
v-model="pageForm.name"
|
||||
></van-search>
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<van-dropdown-item :multiple="false" :options="sessionOptions" @change="doSearch"
|
||||
v-model="pageForm.sessionId"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<div class="proposal-mine-page">
|
||||
<van-nav-bar @click-left="handlePageBack" left-arrow left-text="返回" title="我的提案" placeholder fixed></van-nav-bar>
|
||||
|
||||
<table-list api="/platform/proposal/mine/h5/pageData" :page_form.sync="pageForm" @ready="onReady" ref="tableListRef"
|
||||
title="name">
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案编号">{{row.code}}</table-column>
|
||||
<table-column label="提案类别">{{row.typeName}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName}}</table-column>
|
||||
<table-column label="当前节点">{{ (row.startTaskId) ? row.taskName : '待提交' }}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看</span>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="proposal-mine-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
class="proposal-mine-search"
|
||||
placeholder="请输入提案名称搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu
|
||||
class="proposal-mine-filter"
|
||||
:class="{'is-open': filterOpened}"
|
||||
active-color="#1989fa"
|
||||
:close-on-click-outside="false"
|
||||
:close-on-click-overlay="false"
|
||||
>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.sessionId"
|
||||
:multiple="false"
|
||||
:options="sessionOptions"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskKey === 'startTask' || !row.instanceId"
|
||||
@click="onEdit(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="action-btn"
|
||||
v-if="row.taskKey === 'invite' || row.taskKey === 'second'"
|
||||
@click="onInvite(row)">
|
||||
<i class="fa fa-user-plus"></i>
|
||||
<span>邀请附议人</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<i class="fa fa-undo"></i>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.taskKey === 'startTask' || !row.instanceId"
|
||||
@click="onDelete(row)">
|
||||
<i class="fa fa-trash"></i>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</van-sticky>
|
||||
|
||||
<invite-seconder @refresh="doSearch" ref="inviteSeconderRef"></invite-seconder>
|
||||
<main class="proposal-mine-content">
|
||||
<div class="proposal-mine-list">
|
||||
<div v-if="pageForm.totalCount === 0" class="proposal-mine-empty">
|
||||
<img src="/assets/mobile/img/proposal/proposal-empty.png" alt="暂无提案记录插画">
|
||||
<div class="proposal-mine-empty__title">暂无提案记录</div>
|
||||
<div class="proposal-mine-empty__hint">当前筛选条件下暂时没有提案</div>
|
||||
</div>
|
||||
<table-list api="/platform/proposal/mine/pageData" :page_form.sync="pageForm" @ready="onReady" ref="tableListRef"
|
||||
title="name">
|
||||
<template #header="{index,row}">
|
||||
<div class="proposal-card-header">
|
||||
<div class="proposal-card-heading">
|
||||
<div class="proposal-card-title">{{row.name}}</div>
|
||||
<div class="proposal-card-code">编号：{{row.code || '--'}}</div>
|
||||
</div>
|
||||
<!-- 流程已启动时显示真实实例状态，尚未启动的提案统一标记为待提交。 -->
|
||||
<enum-tag
|
||||
class="proposal-card-status"
|
||||
v-if="row.instanceState"
|
||||
:value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum"
|
||||
label_key="message"
|
||||
size="small"
|
||||
></enum-tag>
|
||||
<span v-else class="proposal-card-status proposal-card-status--plain">待提交</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案类别">{{row.typeName || '--'}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName || '--'}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName || '--'}}</table-column>
|
||||
<table-column label="当前节点">{{ (row.startTaskId) ? row.taskName : '待提交' }}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<van-icon name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskKey === 'startTask' || !row.instanceId"
|
||||
@click="onEdit(row)">
|
||||
<van-icon class="proposal-action-icon" name="edit"></van-icon>
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="action-btn"
|
||||
v-if="row.taskKey === 'invite' || row.taskKey === 'second'"
|
||||
@click="onInvite(row)">
|
||||
<van-icon class="proposal-action-icon" name="friends-o"></van-icon>
|
||||
<span>邀请附议人</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<van-icon class="proposal-action-icon" name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.taskKey === 'startTask' || !row.instanceId"
|
||||
@click="onDelete(row)">
|
||||
<van-icon class="proposal-action-icon" name="delete-o"></van-icon>
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<proposal-info ref="proposalInfoRef"></proposal-info>
|
||||
<van-popup
|
||||
v-model="detailVisible"
|
||||
class="proposal-mine-popup proposal-detail-popup"
|
||||
position="right"
|
||||
:close-on-click-overlay="false"
|
||||
safe-area-inset-bottom>
|
||||
<div class="proposal-detail-popup-page">
|
||||
<van-nav-bar
|
||||
title="提案详情"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
fixed
|
||||
@click-left="closeHistoryLayer('detail')">
|
||||
</van-nav-bar>
|
||||
<div class="proposal-detail-scroll">
|
||||
<proposal-info v-if="detailVisible && detailBizId" :biz-id="detailBizId" :visible="detailVisible"></proposal-info>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<invite-seconder
|
||||
:visible="inviteVisible"
|
||||
:confirm-visible="inviteConfirmVisible"
|
||||
@close="closeHistoryLayer('invite')"
|
||||
@open-confirm="openHistoryLayer('invite-confirm')"
|
||||
@close-confirm="closeHistoryLayer('invite-confirm')"
|
||||
@confirm-invite="confirmInvite"
|
||||
@refresh="doSearch"
|
||||
ref="inviteSeconderRef">
|
||||
</invite-seconder>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
@@ -68,8 +460,8 @@ layout("/layouts/platform_h5.html"){
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"invite-seconder": PROPOSAL_INVITE_SECONDER_COMPONENT,
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
"proposal-info": PROPOSAL_INFO,
|
||||
"invite-seconder": PROPOSAL_INVITE_SECONDER_COMPONENT
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -78,34 +470,85 @@ layout("/layouts/platform_h5.html"){
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
searchKeyword: "",
|
||||
pageOrderName: "",
|
||||
pageOrderBy: "",
|
||||
sessionId: null
|
||||
},
|
||||
|
||||
sessionOptions: [],
|
||||
infoShow: false
|
||||
filterOpened: false,
|
||||
detailVisible: false,
|
||||
detailBizId: "",
|
||||
inviteVisible: false,
|
||||
inviteConfirmVisible: false,
|
||||
historyLayerPageKey: "proposal-mine-h5"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 注册“我的提案”页面弹层历史。
|
||||
* pageKey 使用固定页面标识；回调参数 stack 为当前弹层名称数组，无返回值。
|
||||
*/
|
||||
registerHistoryLayers() {
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => {
|
||||
this.syncHistoryLayerStack(stack)
|
||||
})
|
||||
},
|
||||
|
||||
// 根据浏览器历史栈同步详情、邀请附议和邀请确认弹层的显示状态。
|
||||
syncHistoryLayerStack(stack) {
|
||||
this.$set(this, "detailVisible", stack.includes("detail"))
|
||||
this.$set(this, "inviteVisible", stack.includes("invite"))
|
||||
this.$set(this, "inviteConfirmVisible", stack.includes("invite-confirm"))
|
||||
},
|
||||
|
||||
// 打开弹层时同步增加当前地址的浏览器历史记录。
|
||||
openHistoryLayer(layerName) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open(layerName)) return
|
||||
this.setHistoryLayerVisible(layerName, true)
|
||||
},
|
||||
|
||||
// 主动关闭弹层时回退对应历史记录，afterClose 在历史状态同步后执行。
|
||||
closeHistoryLayer(layerName, afterClose = null) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close(layerName, afterClose)) return
|
||||
this.setHistoryLayerVisible(layerName, false)
|
||||
if (typeof afterClose === "function") afterClose()
|
||||
},
|
||||
|
||||
setHistoryLayerVisible(layerName, visible) {
|
||||
if (layerName === "detail") this.$set(this, "detailVisible", visible)
|
||||
if (layerName === "invite") this.$set(this, "inviteVisible", visible)
|
||||
if (layerName === "invite-confirm") this.$set(this, "inviteConfirmVisible", visible)
|
||||
},
|
||||
|
||||
// 页面返回时优先关闭最上层弹框，没有弹框时再返回上一业务页面。
|
||||
handlePageBack() {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
|
||||
window.h5HistoryLayerManager.close()
|
||||
return
|
||||
}
|
||||
this.historyBack()
|
||||
},
|
||||
|
||||
listSession() {
|
||||
this.$axios.post("/platform/proposal/common/listSession").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.sessionOptions = res.data
|
||||
.map((v) => ({
|
||||
this.sessionOptions = [{text: "全部届次", value: null}]
|
||||
.concat(res.data.map((v) => ({
|
||||
text: v.fullName,
|
||||
value: v.id
|
||||
}))
|
||||
.concat([{text: "全部届次", value: null}])
|
||||
if (this.sessionOptions.length > 0) {
|
||||
this.pageForm.sessionId = this.sessionOptions[0].value
|
||||
this.doSearch()
|
||||
}
|
||||
})))
|
||||
// “全部届次”固定展示在首位，但首次查询仍默认使用接口倒序返回的最新届次。
|
||||
this.$set(this.pageForm, "sessionId", res.data.length > 0 ? res.data[0].id : null)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onView(row) {
|
||||
this.showApprovalForm = false
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.$set(this, "detailBizId", row.id)
|
||||
this.openHistoryLayer("detail")
|
||||
},
|
||||
|
||||
onEdit(row) {
|
||||
@@ -155,14 +598,30 @@ layout("/layouts/platform_h5.html"){
|
||||
onInvite(row) {
|
||||
this.$axios.post("/platform/proposal/mine/inviteCheck", {id: row.id}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.inviteSeconderRef.onOpen(row)
|
||||
this.$refs.inviteSeconderRef.prepare(row)
|
||||
this.openHistoryLayer("invite")
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 邀请确认后先关闭确认层，再提交邀请，避免浏览器历史中残留已关闭的 Dialog。
|
||||
confirmInvite() {
|
||||
this.closeHistoryLayer("invite-confirm", () => {
|
||||
this.$refs.inviteSeconderRef.submitInvite()
|
||||
})
|
||||
},
|
||||
|
||||
onReady() {
|
||||
this.listSession()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.registerHistoryLayers()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (window.h5HistoryLayerManager) {
|
||||
window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
+169
-102
@@ -1,55 +1,101 @@
|
||||
const PROPOSAL_INVITE_SECONDER_COMPONENT = {
|
||||
template: `
|
||||
<van-action-sheet v-model="visible" title="邀请附议人" class="height100">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
:show-action="false"
|
||||
placeholder="请输入工号或者姓名查询"
|
||||
@search="doSearch"
|
||||
></van-search>
|
||||
<van-tabs v-model="isInvite" @click="isInviteClick">
|
||||
<van-tab title="已邀请" name="1"></van-tab>
|
||||
<van-tab title="可邀请" name="0"></van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<van-checkbox-group v-model="tableSelection" v-if="tableData && tableData.length>0">
|
||||
<van-cell-group >
|
||||
<van-cell
|
||||
v-for="(item, index) in tableData"
|
||||
clickable
|
||||
:key="item.loginName"
|
||||
@click="tableRowToggle(index)"
|
||||
>
|
||||
<span slot="title">
|
||||
{{item.userName}}
|
||||
({{item.loginName}})
|
||||
</span>
|
||||
<span slot="label" class="font-size0 van-color-text-assist">
|
||||
{{item.unitName}}
|
||||
</span>
|
||||
<van-checkbox
|
||||
:name="item"
|
||||
:ref="'checkboxes'+item.loginName"
|
||||
slot="right-icon"
|
||||
v-if="!pageForm.isInvite"></van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<div class="p10">
|
||||
<van-pagination
|
||||
v-model="pageForm.pageNumber"
|
||||
:total-items="pageForm.totalCount"
|
||||
:items-per-page="pageForm.pageSize"
|
||||
@change="pageData"
|
||||
></van-pagination>
|
||||
<van-button @click="invite" type="primary" block :disabled="pageForm.isInvite" class="mt10">邀请</van-button>
|
||||
</div>
|
||||
</van-checkbox-group>
|
||||
<van-empty v-else :figure="2"></van-empty>
|
||||
</van-action-sheet>
|
||||
`,
|
||||
template: /*language=HTML*/ `
|
||||
<van-popup
|
||||
:value="visible"
|
||||
class="proposal-mine-popup proposal-invite-popup"
|
||||
position="right"
|
||||
:close-on-click-overlay="false"
|
||||
safe-area-inset-bottom>
|
||||
<van-nav-bar
|
||||
title="邀请附议人"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
fixed
|
||||
placeholder
|
||||
@click-left="$emit('close')">
|
||||
</van-nav-bar>
|
||||
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
:show-action="false"
|
||||
placeholder="请输入工号或者姓名查询"
|
||||
@search="doSearch">
|
||||
</van-search>
|
||||
<van-tabs v-model="isInvite" @click="isInviteClick">
|
||||
<van-tab title="已邀请" name="1"></van-tab>
|
||||
<van-tab title="可邀请" name="0"></van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<van-checkbox-group v-model="tableSelection" v-if="tableData && tableData.length > 0">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
v-for="(item, index) in tableData"
|
||||
clickable
|
||||
:key="item.loginName"
|
||||
@click="tableRowToggle(index)">
|
||||
<span slot="title">
|
||||
{{item.userName}}（{{item.loginName}}）
|
||||
</span>
|
||||
<span slot="label" class="font-size0 van-color-text-assist">
|
||||
{{item.unitName}}
|
||||
</span>
|
||||
<van-checkbox
|
||||
:name="item"
|
||||
:ref="'checkboxes' + item.loginName"
|
||||
slot="right-icon"
|
||||
v-if="!pageForm.isInvite">
|
||||
</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<div class="p10">
|
||||
<van-pagination
|
||||
v-model="pageForm.pageNumber"
|
||||
:total-items="pageForm.totalCount"
|
||||
:items-per-page="pageForm.pageSize"
|
||||
@change="pageData">
|
||||
</van-pagination>
|
||||
<van-button
|
||||
@click="invite"
|
||||
type="primary"
|
||||
block
|
||||
:disabled="pageForm.isInvite"
|
||||
class="mt10">
|
||||
邀请
|
||||
</van-button>
|
||||
</div>
|
||||
</van-checkbox-group>
|
||||
|
||||
<!-- 空状态提示随“已邀请 / 可邀请”标签切换，便于用户判断当前无数据的具体范围。 -->
|
||||
<div v-else class="proposal-invite-empty">
|
||||
<img src="/assets/mobile/img/proposal/proposal-empty.png" alt="暂无附议人插画">
|
||||
<div class="proposal-invite-empty__title">暂无附议人</div>
|
||||
<div class="proposal-invite-empty__hint">
|
||||
{{ isInvite === "1" ? "当前暂无已邀请的附议人" : "当前暂无可邀请的附议人" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-dialog
|
||||
:value="confirmVisible"
|
||||
title="提示"
|
||||
:message="confirmMessage"
|
||||
show-cancel-button
|
||||
@confirm="$emit('confirm-invite')"
|
||||
@cancel="$emit('close-confirm')">
|
||||
</van-dialog>
|
||||
</van-popup>
|
||||
`,
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
confirmVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
secondedNum: 0,
|
||||
record: {},
|
||||
tableData: [],
|
||||
@@ -57,77 +103,93 @@ const PROPOSAL_INVITE_SECONDER_COMPONENT = {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0,
|
||||
pageOrderName: "",
|
||||
pageOrderBy: "",
|
||||
isInvite: false,
|
||||
searchKeyword: null
|
||||
},
|
||||
config: {},
|
||||
isInvite: "0",
|
||||
tableSelection: []
|
||||
tableSelection: [],
|
||||
confirmMessage: ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(value) {
|
||||
if (!value || !this.record.id) return
|
||||
this.getConfig().then(() => {
|
||||
this.pageData()
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onOpen(record) {
|
||||
this.visible = true
|
||||
this.record = record
|
||||
await this.getConfig()
|
||||
this.pageData()
|
||||
|
||||
|
||||
},
|
||||
detail(id) {
|
||||
/**
|
||||
* 准备邀请附议弹框数据。
|
||||
* record 为列表当前提案对象，至少包含 id 和 sessionId；该方法只缓存提案并重置查询条件，无返回值。
|
||||
*/
|
||||
prepare(record) {
|
||||
this.$set(this, "record", record || {})
|
||||
this.$set(this, "isInvite", "0")
|
||||
this.$set(this, "tableSelection", [])
|
||||
this.$set(this.pageForm, "pageNumber", 1)
|
||||
this.$set(this.pageForm, "isInvite", false)
|
||||
this.$set(this.pageForm, "searchKeyword", null)
|
||||
},
|
||||
|
||||
// 校验勾选结果后打开确认 Dialog，实际提交在确认并回退 Dialog 历史层后执行。
|
||||
invite() {
|
||||
if (this.tableSelection.length === 0) {
|
||||
this.$toast("请先选择附议人后在点击邀请")
|
||||
this.$toast("请先选择附议人后再点击邀请")
|
||||
return
|
||||
}
|
||||
const userNames = [...new Set(this.tableSelection.map((item) => item.userName))]
|
||||
this.$set(this, "confirmMessage", "您确定要邀请" + userNames.join("、") + "代表附议吗？")
|
||||
this.$emit("open-confirm")
|
||||
},
|
||||
|
||||
const loginNames = [...new Set(this.tableSelection.map((s) => s.loginName))]
|
||||
const userName = [...new Set(this.tableSelection.map((s) => s.userName))]
|
||||
|
||||
console.log(this.tableSelection)
|
||||
|
||||
this.$dialog.confirm({
|
||||
title: '提示',
|
||||
message: "您确定要邀请" + userName.join("、") + "代表附议吗？",
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/proposal/mine/inviteSeconder", {
|
||||
proposalId: this.record.id,
|
||||
seconders: JSON.stringify(loginNames)
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.pageData()
|
||||
this.$toast.success(res.msg)
|
||||
this.tableSelection = []
|
||||
// this.visible = false
|
||||
this.$emit("refresh", null)
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
/**
|
||||
* 提交邀请附议人。
|
||||
* 参数 proposalId 为当前提案主键，seconders 为已勾选人员工号数组；接口返回 Result，code 为 0 表示邀请成功。
|
||||
*/
|
||||
submitInvite() {
|
||||
const loginNames = [...new Set(this.tableSelection.map((item) => item.loginName))]
|
||||
this.$axios.post("/platform/proposal/mine/inviteSeconder", {
|
||||
proposalId: this.record.id,
|
||||
seconders: JSON.stringify(loginNames)
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.pageData()
|
||||
this.$toast.success(res.msg)
|
||||
this.$set(this, "tableSelection", [])
|
||||
this.$emit("refresh")
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询邀请附议人列表。
|
||||
* 参数包含当前提案 ID、届次 ID、邀请状态、关键词及分页条件；返回分页对象并更新列表和总数。
|
||||
*/
|
||||
pageData() {
|
||||
this.$axios.post("/platform/proposal/mine/listSeconder", {
|
||||
...this.pageForm,
|
||||
sessionId: this.record.sessionId,
|
||||
proposalId: this.record.id
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$set(this, "tableData", res.data.list || [])
|
||||
this.$set(this.pageForm, "totalCount", res.data.totalCount || 0)
|
||||
this.echoCheckBox()
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.list
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
this.echoCheckBox()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 翻页回显勾选
|
||||
// 翻页后回显当前已勾选的附议人。
|
||||
echoCheckBox() {
|
||||
this.$nextTick(() => {
|
||||
this.tableData.forEach((item) => {
|
||||
const checkboxRef = this.$refs['checkboxes' + item.loginName]
|
||||
if (checkboxRef && this.tableSelection.map((s) => s.loginName).includes(item.loginName)) {
|
||||
const checkboxRef = this.$refs["checkboxes" + item.loginName]
|
||||
if (checkboxRef && this.tableSelection.map((selected) => selected.loginName).includes(item.loginName)) {
|
||||
checkboxRef[0].toggle()
|
||||
}
|
||||
})
|
||||
@@ -135,24 +197,29 @@ const PROPOSAL_INVITE_SECONDER_COMPONENT = {
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.$set(this.pageForm, "pageNumber", 1)
|
||||
this.pageData()
|
||||
},
|
||||
|
||||
isInviteClick(index, title) {
|
||||
this.pageForm.isInvite = index === "1"
|
||||
isInviteClick(name) {
|
||||
this.$set(this.pageForm, "isInvite", name === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
|
||||
tableRowToggle(index) {
|
||||
console.log(index)
|
||||
if (this.pageForm.isInvite || index < 0) return
|
||||
},
|
||||
|
||||
async getConfig() {
|
||||
const {code, data} = await this.$axios.post("/platform/proposal/common/config")
|
||||
if (code === 0) {
|
||||
this.config = data
|
||||
}
|
||||
/**
|
||||
* 查询提案附议配置。
|
||||
* 接口无业务参数，返回 ProposalConfig 配置对象；Promise 用于确保配置完成后再查询人员列表。
|
||||
*/
|
||||
getConfig() {
|
||||
return this.$axios.post("/platform/proposal/common/config").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$set(this, "config", res.data || {})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+415
@@ -0,0 +1,415 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-page .van-nav-bar__title {
|
||||
color: #172033;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-page .van-nav-bar .van-icon,
|
||||
.proposal-pre-audit-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-sticky {
|
||||
padding: 22px 12px 1px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.proposal-pre-audit-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-filter .van-dropdown-menu__bar,
|
||||
.proposal-pre-audit-filter .van-dropdown-menu__item,
|
||||
.proposal-pre-audit-filter .van-dropdown-menu__title {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-filter .van-dropdown-menu__bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-filter .van-dropdown-menu__title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-filter .van-dropdown-menu__title--active,
|
||||
.proposal-pre-audit-filter .van-dropdown-item__option--active,
|
||||
.proposal-pre-audit-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.proposal-pre-audit-filter .van-dropdown-item__option {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-list .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-empty {
|
||||
display: flex;
|
||||
min-height: 280px;
|
||||
padding: 46px 18px 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-card-header {
|
||||
display: flex;
|
||||
margin-bottom: 7px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-card-heading {
|
||||
min-width: 0;
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-card-title {
|
||||
overflow: hidden;
|
||||
color: #253247;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-card-code {
|
||||
margin-top: 1px;
|
||||
color: #9ba6b6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-status {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.proposal-pre-audit-status .van-tag {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
padding: 3px 9px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.proposal-pre-audit-content,
|
||||
.proposal-pre-audit-sticky {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style id="style-proposal-task-popup-h5">
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<div class="proposal-pre-audit-page">
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="校工会预审核" placeholder fixed></van-nav-bar>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="proposal-pre-audit-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
class="proposal-pre-audit-search"
|
||||
placeholder="请输入提案名称搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu
|
||||
class="proposal-pre-audit-filter"
|
||||
:class="{'is-open': filterOpened}"
|
||||
active-color="#1989fa"
|
||||
>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.sessionId"
|
||||
:options="sessionOptions"
|
||||
:multiple="false"
|
||||
@change="doSearch"
|
||||
@open="onFilterOpen"
|
||||
@close="onFilterClose"
|
||||
></van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.approvalText"
|
||||
:options="approvalOptions"
|
||||
:multiple="false"
|
||||
@change="approvalChange"
|
||||
@open="onFilterOpen"
|
||||
@close="onFilterClose"
|
||||
></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<main class="proposal-pre-audit-content">
|
||||
<div class="proposal-pre-audit-list">
|
||||
<!-- 列表无记录时使用与“我的提案”一致的提案专用空状态。 -->
|
||||
<div v-if="pageForm.totalCount === 0" class="proposal-pre-audit-empty">
|
||||
<img src="/assets/mobile/img/proposal/proposal-empty.png" alt="暂无提案记录插画">
|
||||
<div class="proposal-pre-audit-empty__title">暂无提案记录</div>
|
||||
<div class="proposal-pre-audit-empty__hint">当前筛选条件下暂时没有提案</div>
|
||||
</div>
|
||||
<table-list api="/platform/proposal/pre/audit/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef" title="name">
|
||||
<template #header="{index,row}">
|
||||
<div class="proposal-pre-audit-card-header">
|
||||
<div class="proposal-pre-audit-card-heading">
|
||||
<div class="proposal-pre-audit-card-title">{{row.name}}</div>
|
||||
<div class="proposal-pre-audit-card-code">编号：{{row.code || '--'}}</div>
|
||||
</div>
|
||||
<enum-tag
|
||||
class="proposal-pre-audit-status"
|
||||
v-if="row.instanceState"
|
||||
:value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum"
|
||||
label_key="message"
|
||||
size="small"
|
||||
></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="立案编号">{{row.caseFilingCode || '--'}}</table-column>
|
||||
<table-column label="提案类别">{{row.typeName || '--'}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName || '--'}}</table-column>
|
||||
<table-column label="教代会">{{row.sessionName || '--'}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName || '--'}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName || '--'}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="edit"></van-icon>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<van-icon class="proposal-action-icon" name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<proposal-task-popup ref="taskPopup" kind="preAudit" page-key="proposal-pre-audit-task" @success="doSearch"></proposal-task-popup>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
<!--#include("../../common/task-popup.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {"proposal-task-popup": PROPOSAL_TASK_POPUP},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
pageOrderName: "",
|
||||
pageOrderBy: "",
|
||||
name: null,
|
||||
sessionId: null,
|
||||
approvalText: "0",
|
||||
approval: false
|
||||
},
|
||||
sessionOptions: [],
|
||||
filterOpened: false,
|
||||
approvalOptions: [
|
||||
{text: "未审核", value: "0"},
|
||||
{text: "已审核", value: "1"}
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReady() {
|
||||
this.listSession(false)
|
||||
},
|
||||
|
||||
onFilterOpen() {
|
||||
this.filterOpened = true
|
||||
},
|
||||
|
||||
onFilterClose() {
|
||||
this.filterOpened = false
|
||||
},
|
||||
|
||||
// 审核状态下拉使用字符串展示，查询接口使用布尔值区分已审核和未审核。
|
||||
approvalChange(value) {
|
||||
this.$set(this.pageForm, "approval", value === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
|
||||
// 与其他提案 H5 页面一致加载全部教代会；首次进入默认选中最新一届，缓存恢复时不覆盖原筛选条件。
|
||||
listSession(skipDefaultSearch) {
|
||||
this.$axios.post("/platform/proposal/common/listSession").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.sessionOptions = [{text: "全部教代会", value: null}]
|
||||
.concat(res.data.map((item) => ({text: item.fullName, value: item.id})))
|
||||
if (skipDefaultSearch) return
|
||||
this.$set(this.pageForm, "sessionId", res.data.length > 0 ? res.data[0].id : null)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onView(row, index) {
|
||||
this.$refs.taskPopup.open(row, "view")
|
||||
},
|
||||
|
||||
onApproval(row, index) {
|
||||
this.$refs.taskPopup.open(row, "approval")
|
||||
},
|
||||
|
||||
onRevoke(row) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要撤回吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/flow/common/revokeTask", {taskId: row.taskId}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.$set(this.pageForm, "pageNumber", 1)
|
||||
this.$set(this.pageForm, "totalCount", 0)
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const tab = new URLSearchParams(window.location.search).get("tab")
|
||||
if (tab === "done") {
|
||||
this.$set(this.pageForm, "approval", true)
|
||||
this.$set(this.pageForm, "approvalText", "1")
|
||||
} else if (tab === "todo") {
|
||||
this.$set(this.pageForm, "approval", false)
|
||||
this.$set(this.pageForm, "approvalText", "0")
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
+42
-180
@@ -1,196 +1,58 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style id="style-proposal-school-leader-h5">
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="分管校领导审批" placeholder fixed></van-nav-bar>
|
||||
<van-nav-bar @click-left="handlePageBack" left-arrow left-text="返回" title="分管校领导审批" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
:show-action="false"
|
||||
:reverse-color="false"
|
||||
input-align="left"
|
||||
placeholder="请输入提案名称搜索"
|
||||
@search="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<van-dropdown-item v-model="pageForm.sessionId" :options="sessionOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
<van-tabs v-model="pageForm.approvalText"
|
||||
@change="(val)=>{this.pageForm.approval = val==='1';this.doSearch();}">
|
||||
<van-tab title="已审核" name="1"></van-tab>
|
||||
<van-tab title="未审核" name="0"></van-tab>
|
||||
</van-tabs>
|
||||
<van-search v-model="pageForm.name" placeholder="请输入提案名称搜索" @search="doSearch"></van-search>
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false"><van-dropdown-item v-model="pageForm.sessionId" :options="sessionOptions" @change="doSearch"></van-dropdown-item></van-dropdown-menu>
|
||||
<van-tabs v-model="pageForm.approvalText" @change="approvalChange"><van-tab title="已审核" name="1"></van-tab><van-tab title="未审核" name="0"></van-tab></van-tabs>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/proposal/schoolLeaderApproval/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案编号">{{row.code}}</table-column>
|
||||
<table-column label="提案类别">{{row.typeName}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>审核</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<i class="fa fa-reply"></i>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
<table-list api="/platform/proposal/schoolLeaderApproval/pageData" :page_form.sync="pageForm" @ready="onReady" ref="tableListRef" title="name">
|
||||
<template v-slot="{row}"><table-column label="提案编号">{{row.code}}</table-column><table-column label="提案类别">{{row.typeName}}</table-column><table-column label="提案人">{{row.createUserName}}</table-column><table-column label="代表团">{{row.delegationName}}</table-column><table-column label="当前节点">{{row.curTaskName}}</table-column></template>
|
||||
<template #actions="{row}">
|
||||
<div class="action-btn" @click="onView(row)"><van-icon class="proposal-action-icon" name="eye-o"></van-icon><span>查看</span></div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row)"><van-icon class="proposal-action-icon" name="edit"></van-icon><span>审核</span></div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)"><van-icon class="proposal-action-icon" name="revoke"></van-icon><span>撤回</span></div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<proposal-info ref="proposalInfoRef">
|
||||
<div v-if="showApprovalForm">
|
||||
<div class="process-title">{{formData.taskName}}</div>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.tf_opinion"
|
||||
name="tf_opinion"
|
||||
label="审批意见"
|
||||
placeholder="请输入审批意见"
|
||||
:rules="[{ required: true, message: '请填写审批意见' }]"
|
||||
required
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
></van-field>
|
||||
</van-form>
|
||||
<div style="display: flex; justify-content: space-between; column-gap: 10px; padding: 10px">
|
||||
<van-button type="primary" block @click="handleTaskAction('agree')">同意答复</van-button>
|
||||
<van-button type="danger" block @click="handleTaskAction('back')">退回答复</van-button>
|
||||
</div>
|
||||
<van-popup v-model="detailVisible" position="right" class="proposal-full-popup" :close-on-click-overlay="false" get-container="#app">
|
||||
<div class="proposal-full-popup__page"><van-nav-bar @click-left="closeDetail" left-arrow left-text="返回" :title="popupTitle" placeholder fixed></van-nav-bar>
|
||||
<div class="proposal-full-popup__scroll"><proposal-info v-if="detailBizId" :biz-id="detailBizId" :visible="detailVisible">
|
||||
<div v-if="isApproval"><van-form ref="formRef"><section class="proposal-view-card"><h2 class="proposal-view-card__title">审批意见<span class="proposal-audit-card__required">*</span></h2><van-field v-model="formData.tf_opinion" class="proposal-audit-field" name="tf_opinion" type="textarea" rows="6" label="" placeholder="请输入审批意见" :rules="[{required:true,message:'请填写审批意见'}]" required maxlength="100" show-word-limit></van-field></section></van-form>
|
||||
<div class="proposal-popup-form-actions"><van-button type="danger" block :loading="formLoading" @click="handleTaskAction('back')">退回答复</van-button><van-button type="primary" block :loading="formLoading" @click="handleTaskAction('agree')">同意答复</van-button></div>
|
||||
</div>
|
||||
</proposal-info></div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
|
||||
</van-popup>
|
||||
<van-dialog :value="submitConfirmVisible" title="提示" message="您确定要提交吗？" show-cancel-button @confirm="confirmTaskAction" @cancel="closeSubmitConfirm"></van-dialog>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
name: null,
|
||||
sessionId: null,
|
||||
approvalText: "0",
|
||||
approval: false
|
||||
},
|
||||
|
||||
sessionOptions: [],
|
||||
formData: {},
|
||||
showApprovalForm: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
},
|
||||
new Vue({
|
||||
el: "#app", store, components: {"proposal-info": PROPOSAL_INFO},
|
||||
data() { return {pageForm:{pageNumber:1,pageSize:10,totalCount:0,name:null,sessionId:null,approvalText:"0",approval:false},sessionOptions:[],detailVisible:false,detailBizId:"",action:"view",formData:{},formLoading:false,submitConfirmVisible:false,pendingSubmitType:"",historyLayerPageKey:"proposal-school-leader-approval"} },
|
||||
computed: {isApproval() { return this.action === "approval" }, popupTitle() { return this.isApproval ? "分管校领导审批" : "提案详情" }},
|
||||
methods: {
|
||||
onReady() {
|
||||
this.listSession()
|
||||
},
|
||||
listSession() {
|
||||
this.$axios.post("/platform/proposal/common/listSession").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.sessionOptions = [
|
||||
{
|
||||
text: "全部届次",
|
||||
value: null
|
||||
}
|
||||
].concat(res.data.map((v) => ({text: v.fullName, value: v.id})))
|
||||
// 届次接口按开始时间倒序返回，首条即最新届次；无届次时继续按全部届次查询。
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "sessionId", res.data[0].id)
|
||||
}
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onView(row) {
|
||||
this.showApprovalForm = false
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
},
|
||||
|
||||
onApproval(row) {
|
||||
this.showApprovalForm = true
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.formData = {
|
||||
processTaskId: row.taskId,
|
||||
taskKey: row.taskKey,
|
||||
taskName: row.taskName,
|
||||
proposalId: row.id
|
||||
}
|
||||
},
|
||||
|
||||
async handleTaskAction(val) {
|
||||
try {
|
||||
await this.$refs.formRef.validate();
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交吗？"
|
||||
}).then(() => {
|
||||
|
||||
const formData = {
|
||||
...this.formData,
|
||||
tf_approval: val
|
||||
}
|
||||
delete formData.taskKey
|
||||
delete formData.taskName
|
||||
|
||||
|
||||
this.$axios.post("/platform/proposal/schoolLeaderApproval/executeTask", {
|
||||
data: JSON.stringify(formData)
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.proposalInfoRef.onClose()
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
onRevoke(row){
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要撤回吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/flow/common/revokeTask", {taskId: row.taskId}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
},
|
||||
}
|
||||
registerHistoryLayers() { window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => { this.$set(this,"detailVisible",stack.includes("detail")); this.$set(this,"submitConfirmVisible",stack.includes("submit-confirm")) }) },
|
||||
openHistoryLayer(name) { window.h5HistoryLayerManager.open(name) },
|
||||
closeHistoryLayer(name,callback) { window.h5HistoryLayerManager.close(name,callback) },
|
||||
handlePageBack() { if (window.h5HistoryLayerManager.stack.length) { window.h5HistoryLayerManager.close(); return } historyBack() },
|
||||
closeDetail() { this.closeHistoryLayer("detail") }, closeSubmitConfirm() { this.closeHistoryLayer("submit-confirm") },
|
||||
approvalChange(value) { this.$set(this.pageForm,"approval",value === "1"); this.doSearch() }, onReady() { this.listSession() },
|
||||
listSession() { this.$axios.post("/platform/proposal/common/listSession").then((res) => { if (res.code !== 0) return; this.$set(this,"sessionOptions",[{text:"全部届次",value:null}].concat(res.data.map((v) => ({text:v.fullName,value:v.id})))); this.$set(this.pageForm,"sessionId",this.sessionOptions[0].value); this.doSearch() }) },
|
||||
onView(row) { this.$set(this,"detailBizId",row.id); this.$set(this,"action","view"); this.$set(this,"formData",{}); this.openHistoryLayer("detail") },
|
||||
onApproval(row) { this.$set(this,"detailBizId",row.id); this.$set(this,"action","approval"); this.$set(this,"formData",{processTaskId:row.taskId,taskKey:row.taskKey || "",taskName:row.taskName || "分管校领导审批",proposalId:row.id,tf_opinion:""}); this.openHistoryLayer("detail") },
|
||||
/** val 为 back 或 agree，确认后提交分管校领导审批接口。 */
|
||||
handleTaskAction(val) { this.$refs.formRef.validate().then(() => { this.$set(this,"pendingSubmitType",val); this.openHistoryLayer("submit-confirm") }).catch(() => {}) },
|
||||
confirmTaskAction() { const submitData={...this.formData,tf_approval:this.pendingSubmitType}; delete submitData.taskKey; delete submitData.taskName; this.$set(this,"formLoading",true); this.$axios.post("/platform/proposal/schoolLeaderApproval/executeTask",{data:JSON.stringify(submitData)}).then((res) => { if (res && res.code === 0) { this.$toast.success(res.msg); window.h5HistoryLayerManager.closeAll(() => this.doSearch()) } }).finally(() => { this.$set(this,"formLoading",false) }) },
|
||||
onRevoke(row) { this.$dialog.confirm({title:"提示",message:"您确定要撤回吗？"}).then(() => this.$axios.post("/flow/common/revokeTask",{taskId:row.taskId})).then((res) => { if (res && res.code === 0) { this.$toast.success(res.msg); this.doSearch() } }).catch(() => {}) },
|
||||
doSearch() { this.$nextTick(() => { this.$set(this.pageForm,"pageNumber",1); this.$set(this.pageForm,"totalCount",0); this.$refs.tableListRef.doSearch() }) }
|
||||
},
|
||||
created() { this.registerHistoryLayers() }, beforeDestroy() { window.h5HistoryLayerManager.unregister(this.historyLayerPageKey) }
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
|
||||
+571
-141
@@ -1,98 +1,454 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-seconded-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-seconded-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-seconded-page .van-nav-bar__title {
|
||||
color: #172033;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-seconded-page .van-nav-bar .van-icon,
|
||||
.proposal-seconded-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-seconded-popup {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-seconded-popup-page {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-top: 46px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.proposal-seconded-popup-page .van-nav-bar {
|
||||
z-index: 20;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-seconded-popup-scroll {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.proposal-seconded-popup-scroll .proposal-view-main {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.proposal-seconded-form-actions {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.proposal-seconded-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.proposal-seconded-sticky {
|
||||
padding: 22px 12px 1px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-seconded-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.proposal-seconded-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-seconded-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-seconded-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter .van-dropdown-menu__item {
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter .van-dropdown-menu__title {
|
||||
display: inline-flex;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter .van-dropdown-menu__title--active,
|
||||
.proposal-seconded-filter .van-dropdown-item__option--active,
|
||||
.proposal-seconded-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.proposal-seconded-filter .van-dropdown-item__option {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter .van-dropdown-item__option .van-cell__title {
|
||||
display: flex;
|
||||
min-height: 20px;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.proposal-seconded-filter .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.proposal-seconded-list .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proposal-seconded-empty {
|
||||
display: flex;
|
||||
min-height: 280px;
|
||||
padding: 46px 18px 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal-seconded-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.proposal-seconded-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-seconded-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-seconded-card-header {
|
||||
display: flex;
|
||||
margin-bottom: 7px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.proposal-seconded-card-heading {
|
||||
min-width: 0;
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.proposal-seconded-card-title {
|
||||
overflow: hidden;
|
||||
color: #253247;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-seconded-card-code {
|
||||
margin-top: 1px;
|
||||
color: #9ba6b6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-seconded-status {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.proposal-seconded-status .van-tag {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
padding: 3px 9px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-seconded-page .table-list-container .table-list-item .action-btn .van-icon {
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.proposal-seconded-content {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.proposal-seconded-sticky {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="附议提案" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
:show-action="false"
|
||||
:reverse-color="false"
|
||||
input-align="left"
|
||||
placeholder="请输入提案名称搜索"
|
||||
@search="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<van-dropdown-item v-model="pageForm.sessionId" :options="sessionOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
<van-tabs v-model="pageForm.approvalText"
|
||||
@change="(val)=>{this.pageForm.approval = val==='1';this.doSearch();}">
|
||||
<van-tab title="已附议" name="1"></van-tab>
|
||||
<van-tab title="未附议" name="0"></van-tab>
|
||||
</van-tabs>
|
||||
</van-sticky>
|
||||
<div class="proposal-seconded-page">
|
||||
<van-nav-bar @click-left="handlePageBack" left-arrow left-text="返回" title="附议提案" placeholder fixed></van-nav-bar>
|
||||
|
||||
<table-list api="/platform/proposal/seconded/h5/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案编号">{{row.code}}</table-column>
|
||||
<table-column label="提案类别">{{row.typeName}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看</span>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="proposal-seconded-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
class="proposal-seconded-search"
|
||||
placeholder="请输入提案名称搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu
|
||||
class="proposal-seconded-filter"
|
||||
:class="{'is-open': filterOpened}"
|
||||
active-color="#1989fa"
|
||||
>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.sessionId"
|
||||
:options="sessionOptions"
|
||||
:multiple="false"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.approvalText"
|
||||
:options="approvalOptions"
|
||||
:multiple="false"
|
||||
@change="approvalChange"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
<div class="action-btn" v-if="showSecondAction(row)" @click="onApproval(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>附议</span>
|
||||
</div>
|
||||
<!-- <div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">-->
|
||||
<!-- <i class="fa fa-reply"></i>-->
|
||||
<!-- <span>撤回</span>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
</table-list>
|
||||
</van-sticky>
|
||||
|
||||
<proposal-info ref="proposalInfoRef">
|
||||
<div v-if="showApprovalForm">
|
||||
<div class="process-title">提案附议</div>
|
||||
<!-- <div class="process-title">{{formData.taskName}}</div>-->
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.tf_opinion"
|
||||
name="tf_opinion"
|
||||
label="审批意见"
|
||||
placeholder="请输入审批意见"
|
||||
:rules="[{ required: true, message: '请填写审批意见' }]"
|
||||
required
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
></van-field>
|
||||
<!-- <van-field label="签字" name="approvalSignature" v-model="formData.signature" required class="direction-column-field">-->
|
||||
<!-- <h5-signature v-model="formData.approvalSignature" slot="input"></h5-signature>-->
|
||||
<!-- </van-field>-->
|
||||
</van-form>
|
||||
<div v-if="row && row.curTaskCode === 'second'"
|
||||
style="display: flex; justify-content: space-between; column-gap: 10px; padding: 10px">
|
||||
<van-button type="primary" block @click="handleTaskAction(1)">同意</van-button>
|
||||
<van-button type="danger" block @click="handleTaskAction(20)">不同意</van-button>
|
||||
<main class="proposal-seconded-content">
|
||||
<div class="proposal-seconded-list">
|
||||
<!-- 列表无记录时使用与“我的提案”一致的提案专用空状态。 -->
|
||||
<div v-if="pageForm.totalCount === 0" class="proposal-seconded-empty">
|
||||
<img src="/assets/mobile/img/proposal/proposal-empty.png" alt="暂无提案记录插画">
|
||||
<div class="proposal-seconded-empty__title">暂无提案记录</div>
|
||||
<div class="proposal-seconded-empty__hint">当前筛选条件下暂时没有提案</div>
|
||||
</div>
|
||||
<table-list api="/platform/proposal/seconded/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template #header="{index,row}">
|
||||
<div class="proposal-seconded-card-header">
|
||||
<div class="proposal-seconded-card-heading">
|
||||
<div class="proposal-seconded-card-title">{{row.name}}</div>
|
||||
<div class="proposal-seconded-card-code">编号：{{row.code || '--'}}</div>
|
||||
</div>
|
||||
<!-- 流程状态固定显示在卡片右上角，并使用胶囊形标签突出当前进度。 -->
|
||||
<enum-tag
|
||||
class="proposal-seconded-status"
|
||||
v-if="row.instanceState"
|
||||
:value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum"
|
||||
label_key="message"
|
||||
size="small"
|
||||
></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案类别">{{row.typeName || '--'}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName || '--'}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName || '--'}}</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName || '--'}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<van-icon name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="showSecondAction(row)" @click="onApproval(row)">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>附议</span>
|
||||
</div>
|
||||
<!-- <div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">-->
|
||||
<!-- <span>撤回</span>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
<div v-else style="display: flex; justify-content: space-between; column-gap: 10px; padding: 10px">
|
||||
<van-button type="primary" block @click="updateSecond(1)">同意</van-button>
|
||||
<van-button type="danger" block @click="updateSecond(2)">不同意</van-button>
|
||||
</main>
|
||||
|
||||
<van-popup
|
||||
v-model="detailVisible"
|
||||
class="proposal-seconded-popup"
|
||||
position="right"
|
||||
:close-on-click-overlay="false"
|
||||
safe-area-inset-bottom>
|
||||
<div class="proposal-seconded-popup-page">
|
||||
<van-nav-bar
|
||||
:title="popupTitle"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
fixed
|
||||
@click-left="closeHistoryLayer('detail')">
|
||||
</van-nav-bar>
|
||||
<div class="proposal-seconded-popup-scroll">
|
||||
<proposal-info v-if="detailVisible && detailBizId" :biz-id="detailBizId" :visible="detailVisible">
|
||||
<div v-if="isApproval">
|
||||
<section class="proposal-view-card proposal-seconded-opinion-card">
|
||||
<h2 class="proposal-view-card__title">
|
||||
提案附议
|
||||
<span class="proposal-audit-card__required">*</span>
|
||||
</h2>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.tf_opinion"
|
||||
class="proposal-audit-field"
|
||||
name="tf_opinion"
|
||||
type="textarea"
|
||||
rows="6"
|
||||
label=""
|
||||
placeholder="请输入附议意见"
|
||||
:rules="[{ required: true, message: '请填写附议意见' }]"
|
||||
required
|
||||
maxlength="200"
|
||||
show-word-limit>
|
||||
</van-field>
|
||||
</van-form>
|
||||
</section>
|
||||
<div class="proposal-seconded-form-actions">
|
||||
<van-button type="danger" block :loading="formLoading" @click="submitSeconded(false)">不同意</van-button>
|
||||
<van-button type="primary" block :loading="formLoading" @click="submitSeconded(true)">同意</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
</van-popup>
|
||||
|
||||
<van-dialog
|
||||
:value="submitConfirmVisible"
|
||||
title="提示"
|
||||
message="您确定要提交吗？"
|
||||
show-cancel-button
|
||||
@confirm="confirmSubmitSeconded"
|
||||
@cancel="closeHistoryLayer('submit-confirm')">
|
||||
</van-dialog>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
|
||||
const vue = new Vue({
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
// 排序字段和方向为空时，后端使用任务创建时间倒序返回分页数据。
|
||||
pageOrderName: "",
|
||||
pageOrderBy: "",
|
||||
name: null,
|
||||
sessionId: null,
|
||||
approvalText: "0",
|
||||
@@ -100,18 +456,76 @@ layout("/layouts/platform_h5.html"){
|
||||
},
|
||||
|
||||
sessionOptions: [],
|
||||
row: null,
|
||||
// 任一筛选项展开时，将筛选栏切换为与下拉面板衔接的上圆角样式。
|
||||
filterOpened: false,
|
||||
approvalOptions: [
|
||||
{text: "未附议", value: "0"},
|
||||
{text: "已附议", value: "1"}
|
||||
],
|
||||
detailVisible: false,
|
||||
detailBizId: "",
|
||||
popupAction: "view",
|
||||
curTaskCode: "",
|
||||
formData: {},
|
||||
showApprovalForm: false,
|
||||
rules: {
|
||||
approvalSignature: [{required: true, message: "请签字"}]
|
||||
}
|
||||
formLoading: false,
|
||||
submitConfirmVisible: false,
|
||||
pendingSubmitAgree: true,
|
||||
historyLayerPageKey: "proposal-seconded-h5"
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
computed: {
|
||||
isApproval() {
|
||||
return this.popupAction === "approval"
|
||||
},
|
||||
popupTitle() {
|
||||
return this.isApproval ? "提案附议" : "提案详情"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 注册附议提案页面弹层历史。
|
||||
* pageKey 使用固定页面标识；回调参数 stack 为当前弹层名称数组，无返回值。
|
||||
*/
|
||||
registerHistoryLayers() {
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => {
|
||||
this.syncHistoryLayerStack(stack)
|
||||
})
|
||||
},
|
||||
|
||||
// 根据浏览器历史栈同步详情 Popup 和提交确认 Dialog 的显示状态。
|
||||
syncHistoryLayerStack(stack) {
|
||||
this.$set(this, "detailVisible", stack.includes("detail"))
|
||||
this.$set(this, "submitConfirmVisible", stack.includes("submit-confirm"))
|
||||
},
|
||||
|
||||
// 打开弹层时同步增加当前地址的浏览器历史记录。
|
||||
openHistoryLayer(layerName) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open(layerName)) return
|
||||
this.setHistoryLayerVisible(layerName, true)
|
||||
},
|
||||
|
||||
// 主动关闭弹层时回退对应历史记录，afterClose 在历史状态同步后执行。
|
||||
closeHistoryLayer(layerName, afterClose = null) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close(layerName, afterClose)) return
|
||||
this.setHistoryLayerVisible(layerName, false)
|
||||
if (typeof afterClose === "function") afterClose()
|
||||
},
|
||||
|
||||
setHistoryLayerVisible(layerName, visible) {
|
||||
if (layerName === "detail") this.$set(this, "detailVisible", visible)
|
||||
if (layerName === "submit-confirm") this.$set(this, "submitConfirmVisible", visible)
|
||||
},
|
||||
|
||||
// 页面返回时优先关闭最上层弹框，没有弹框时再返回上一业务页面。
|
||||
handlePageBack() {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
|
||||
window.h5HistoryLayerManager.close()
|
||||
return
|
||||
}
|
||||
this.historyBack()
|
||||
},
|
||||
|
||||
// 附议按钮显示规则：
|
||||
// 1. 当前任务进行中(taskState=10)时显示
|
||||
// 2. 当前任务已废弃(taskState=99)时，仅 invite、second、delegation、committee 节点显示
|
||||
@@ -119,102 +533,118 @@ layout("/layouts/platform_h5.html"){
|
||||
return row.taskState === 10 || (row.taskState === 99 && ["invite", "second", "preAudit", "delegation", "committee"].includes(row.taskKey))
|
||||
},
|
||||
onReady() {
|
||||
this.listSession()
|
||||
this.listSession(false)
|
||||
},
|
||||
listSession() {
|
||||
// 附议状态下拉框使用字符串值展示，查询接口使用布尔值区分已附议和未附议。
|
||||
approvalChange(value) {
|
||||
this.$set(this.pageForm, "approval", value === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
listSession(skipDefaultSearch) {
|
||||
this.$axios.post("/platform/proposal/common/listSession").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.sessionOptions = [
|
||||
{
|
||||
text: "全部届次",
|
||||
value: null
|
||||
}
|
||||
].concat(res.data.map((v) => ({text: v.fullName, value: v.id})))
|
||||
// 届次接口按开始时间倒序返回，首条即最新届次；无届次时继续按全部届次查询。
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "sessionId", res.data[0].id)
|
||||
}
|
||||
this.sessionOptions = [{text: "全部届次", value: null}]
|
||||
.concat(res.data.map((v) => ({text: v.fullName, value: v.id})))
|
||||
if (skipDefaultSearch) return
|
||||
// “全部届次”固定展示在首位，但首次查询仍默认使用接口倒序返回的最新届次。
|
||||
this.$set(this.pageForm, "sessionId", res.data.length > 0 ? res.data[0].id : null)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onView(row) {
|
||||
this.showApprovalForm = false
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.$set(this, "detailBizId", row.id)
|
||||
this.$set(this, "popupAction", "view")
|
||||
this.$set(this, "curTaskCode", "")
|
||||
this.$set(this, "formData", {})
|
||||
this.openHistoryLayer("detail")
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开提案附议 Popup。
|
||||
* row 包含提案、任务和附议人信息；这些字段用于详情查询、任务定位、附议人校验和提交链路选择。
|
||||
*/
|
||||
onApproval(row) {
|
||||
this.row = row
|
||||
this.showApprovalForm = true
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.formData = {
|
||||
this.$set(this, "detailBizId", row.id)
|
||||
this.$set(this, "popupAction", "approval")
|
||||
this.$set(this, "curTaskCode", row.curTaskCode || "")
|
||||
this.$set(this, "formData", {
|
||||
processTaskId: row.taskId,
|
||||
taskId: row.taskId,
|
||||
proposalId: row.id,
|
||||
taskActorUserId: row.taskActorUserId,
|
||||
taskName: row.curTaskName,
|
||||
taskName: row.curTaskName || "提案附议",
|
||||
tf_opinion: "同意该提案"
|
||||
}
|
||||
})
|
||||
this.openHistoryLayer("detail")
|
||||
},
|
||||
|
||||
async handleTaskAction(val) {
|
||||
try {
|
||||
await this.$refs.formRef.validate();
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "提案一旦提交，后续将无法自行修改或撤回。请您在提交前仔细确认。"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/proposal/seconded/executeTask", {
|
||||
data: JSON.stringify({
|
||||
...this.formData,
|
||||
submitType: val
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.proposalInfoRef.onClose()
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
// 表单校验通过后打开提交确认 Dialog，并记录本次附议结果。
|
||||
submitSeconded(isAgree) {
|
||||
this.$refs.formRef.validate()
|
||||
.then(() => {
|
||||
this.$set(this, "pendingSubmitAgree", isAgree)
|
||||
this.openHistoryLayer("submit-confirm")
|
||||
})
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
.catch(() => {})
|
||||
},
|
||||
|
||||
updateSecond(submitType) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "提案一旦提交，后续将无法自行修改或撤回。请您在提交前仔细确认。"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/proposal/seconded/updateInfo", {
|
||||
// 确认提交时先关闭 Dialog 历史层，再调用附议接口。
|
||||
confirmSubmitSeconded() {
|
||||
this.closeHistoryLayer("submit-confirm", () => {
|
||||
this.doSubmitSeconded()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交附议结果。
|
||||
* second 节点向 executeTask 提交完整 WF 数据，其他关联节点向 updateInfo 提交提案、任务、附议人和意见；接口返回 Result。
|
||||
*/
|
||||
doSubmitSeconded() {
|
||||
const isAgree = this.pendingSubmitAgree
|
||||
this.$set(this, "formLoading", true)
|
||||
const request = this.curTaskCode === "second"
|
||||
? this.$axios.post("/platform/proposal/seconded/executeTask", {
|
||||
data: JSON.stringify({
|
||||
...this.formData,
|
||||
submitType: isAgree ? 1 : 20
|
||||
})
|
||||
})
|
||||
: this.$axios.post("/platform/proposal/seconded/updateInfo", {
|
||||
proposalId: this.formData.proposalId,
|
||||
taskId: this.formData.taskId,
|
||||
taskActorUserId: this.formData.taskActorUserId,
|
||||
opinion: this.formData.tf_opinion,
|
||||
submitType: submitType,
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.proposalInfoRef.onClose()
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
submitType: isAgree ? 1 : 2
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
request.then((res) => {
|
||||
if (res && res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.closeHistoryLayer("detail", () => {
|
||||
this.doSearch()
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.$set(this, "formLoading", false)
|
||||
})
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$set(this.pageForm, "pageNumber", 1)
|
||||
this.$set(this.pageForm, "totalCount", 0)
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.registerHistoryLayers()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (window.h5HistoryLayerManager) {
|
||||
window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
+33
-89
@@ -7,9 +7,12 @@ layout("/layouts/platform_h5.html"){
|
||||
height: 26px;
|
||||
}
|
||||
</style>
|
||||
<style id="style-proposal-task-popup-h5">
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
|
||||
<div id="app">
|
||||
<van-nav-bar title="承办单位意见" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
|
||||
<van-nav-bar title="承办单位意见" left-text="返回" left-arrow @click-left="handlePageBack" fixed placeholder></van-nav-bar>
|
||||
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
@@ -43,67 +46,30 @@ layout("/layouts/platform_h5.html"){
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="openSuggestion(row)" v-if="pageForm.approval === true">
|
||||
<i class="fa fa-eye"></i>
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>
|
||||
<span>查看意见</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onAudit(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<van-icon class="proposal-action-icon" name="edit"></van-icon>
|
||||
<span>反馈意见</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<proposal-info ref="proposalInfoRef">
|
||||
<div v-if="showApprovalForm">
|
||||
<div class="process-title">承办单位意见</div>
|
||||
<van-form ref="formRef">
|
||||
<van-field
|
||||
v-model="formData.result"
|
||||
name="result"
|
||||
label="承办意向"
|
||||
placeholder="请选择承办意向"
|
||||
:rules="[{ required: true, message: '必填' }]"
|
||||
required
|
||||
is-link
|
||||
@click="showPicker = true"
|
||||
></van-field>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="dict.type.UNDERTAKE_SUGGESTION.map(item => item.code)"
|
||||
@confirm="(val) => {formData.result = val; showPicker = false}"
|
||||
@cancel="showPicker = false"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
<van-field
|
||||
v-model="formData.opinion"
|
||||
name="opinion"
|
||||
label="反馈意见"
|
||||
placeholder="请输入反馈意见"
|
||||
:rules="[{ required: true, message: '必填' }]"
|
||||
required
|
||||
show-word-limit
|
||||
></van-field>
|
||||
</van-form>
|
||||
<div style="display: flex; justify-content: space-between; column-gap: 10px; padding: 10px">
|
||||
<van-button type="primary" block @click="doSubmit">提交</van-button>
|
||||
<van-button block @click="">取消</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
|
||||
<van-action-sheet v-model="visible" title="意见信息">
|
||||
<div class="detail-container">
|
||||
<van-popup v-model="visible" position="right" class="proposal-full-popup" :close-on-click-overlay="false" get-container="#app">
|
||||
<div class="proposal-full-popup__page">
|
||||
<van-nav-bar @click-left="closeSuggestion" left-arrow left-text="返回" title="意见信息" placeholder fixed></van-nav-bar>
|
||||
<div class="proposal-full-popup__scroll detail-container">
|
||||
<van-cell-group :key="index" v-for="item,index in suggestionList">
|
||||
<template #title>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div>{{ '意见' + (index + 1) }}</div>
|
||||
<div>
|
||||
<van-button type="danger" @click="onDelete(item)" size="small">删除</van-button>
|
||||
<van-button type="danger" @click="onDelete(item)" size="small"><van-icon name="delete-o"></van-icon> 删除</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -115,19 +81,19 @@ layout("/layouts/platform_h5.html"){
|
||||
<span v-html="item.opinion"></span>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
</van-popup>
|
||||
<proposal-task-popup ref="taskPopup" kind="suggestion" page-key="proposal-suggestion-task" @success="doSearch"></proposal-task-popup>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
<!--#include("../../common/task-popup.js"){}#-->
|
||||
new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
dicts: ["UNDERTAKE_SUGGESTION"],
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
},
|
||||
components: {"proposal-task-popup": PROPOSAL_TASK_POPUP},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
@@ -141,15 +107,15 @@ layout("/layouts/platform_h5.html"){
|
||||
},
|
||||
|
||||
sessionOptions: [],
|
||||
formData: {},
|
||||
showApprovalForm: false,
|
||||
|
||||
showPicker: false,
|
||||
suggestionList: [],
|
||||
visible: false,
|
||||
historyLayerPageKey: "proposal-suggestion-list"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
registerHistoryLayers() { window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => this.$set(this, "visible", stack.includes("opinions"))) },
|
||||
handlePageBack() { if (window.h5HistoryLayerManager.stack.length) { window.h5HistoryLayerManager.close(); return } historyBack() },
|
||||
closeSuggestion() { window.h5HistoryLayerManager.close("opinions") },
|
||||
onDelete(row) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
@@ -159,7 +125,7 @@ layout("/layouts/platform_h5.html"){
|
||||
.then(res => {
|
||||
if(res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.visible = false
|
||||
this.closeSuggestion()
|
||||
this.doSearch()
|
||||
} else {
|
||||
this.$message.fail(res.msg)
|
||||
@@ -172,12 +138,12 @@ layout("/layouts/platform_h5.html"){
|
||||
proposalId: row.id,
|
||||
}).then(res => {
|
||||
if(res.code === 0) {
|
||||
this.suggestionList = res.data
|
||||
this.$set(this, "suggestionList", res.data)
|
||||
if(this.suggestionList.length === 0) {
|
||||
this.$toast('暂无意见数')
|
||||
return
|
||||
}
|
||||
this.visible = true
|
||||
window.h5HistoryLayerManager.open("opinions")
|
||||
} else {
|
||||
this.$toast.fail(res.msg)
|
||||
}
|
||||
@@ -195,51 +161,29 @@ layout("/layouts/platform_h5.html"){
|
||||
value: null
|
||||
}
|
||||
].concat(res.data.map((v) => ({text: v.fullName, value: v.id})))
|
||||
// 届次接口按开始时间倒序返回，首条即最新届次；无届次时继续按全部届次查询。
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "sessionId", res.data[0].id)
|
||||
if (this.sessionOptions.length > 0) {
|
||||
this.pageForm.sessionId = this.sessionOptions[0].value
|
||||
this.doSearch()
|
||||
}
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
onAudit(row) {
|
||||
this.showApprovalForm = true
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.formData = {
|
||||
proposalId: row.id,
|
||||
}
|
||||
},
|
||||
async doSubmit() {
|
||||
try {
|
||||
await this.$refs.formRef.validate()
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/proposal/suggestion/suggest", this.formData)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.proposalInfoRef.onClose()
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
}).catch(() => {})
|
||||
} catch (error) {}
|
||||
this.$refs.taskPopup.open(row, "approval")
|
||||
},
|
||||
onView(row) {
|
||||
this.showApprovalForm = false
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.$refs.taskPopup.open(row, "view")
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$set(this.pageForm, "pageNumber", 1)
|
||||
this.$set(this.pageForm, "totalCount", 0)
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
}
|
||||
},
|
||||
created() { this.registerHistoryLayers() },
|
||||
beforeDestroy() { window.h5HistoryLayerManager.unregister(this.historyLayerPageKey) }
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
+373
-232
@@ -1,272 +1,403 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-page .van-nav-bar__title {
|
||||
color: #172033;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-page .van-nav-bar .van-icon,
|
||||
.proposal-unit-reply-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-sticky {
|
||||
padding: 22px 12px 1px;
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-search {
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .1);
|
||||
}
|
||||
|
||||
.proposal-unit-reply-search .van-search__content {
|
||||
height: 42px;
|
||||
padding-left: 12px;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-search .van-field__control {
|
||||
color: #263548;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-search .van-field__control::placeholder {
|
||||
color: #a7b0bf;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
transition: border-radius .18s ease;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter.is-open {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__bar,
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__item,
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__title {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__item,
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__title {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__item {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__title {
|
||||
display: inline-flex;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__title--active,
|
||||
.proposal-unit-reply-filter .van-dropdown-item__option--active,
|
||||
.proposal-unit-reply-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-dropdown-menu__title--down::after {
|
||||
border-color: transparent transparent #1989fa #1989fa;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-dropdown-item__option {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-filter .van-cell::after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-list .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-empty {
|
||||
display: flex;
|
||||
min-height: 280px;
|
||||
padding: 46px 18px 36px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-empty__title {
|
||||
margin-top: 14px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-empty__hint {
|
||||
margin-top: 5px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-card-header {
|
||||
display: flex;
|
||||
margin-bottom: 7px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-card-heading {
|
||||
min-width: 0;
|
||||
padding-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-card-title {
|
||||
overflow: hidden;
|
||||
color: #253247;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-card-code {
|
||||
margin-top: 1px;
|
||||
color: #9ba6b6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-status {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.proposal-unit-reply-status .van-tag {
|
||||
display: inline-flex;
|
||||
min-height: 24px;
|
||||
padding: 3px 9px;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.proposal-unit-reply-content,
|
||||
.proposal-unit-reply-sticky {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style id="style-proposal-task-popup-h5">
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="承办单位答复" placeholder
|
||||
fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
:show-action="false"
|
||||
:reverse-color="false"
|
||||
input-align="left"
|
||||
placeholder="请输入提案名称搜索"
|
||||
@search="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<van-dropdown-item v-model="pageForm.sessionId" :options="sessionOptions" :multiple="false"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
<van-tabs v-model="pageForm.approvalText"
|
||||
@change="(val)=>{this.pageForm.approval = val==='1';this.doSearch();}">
|
||||
<van-tab title="已答复" name="1"></van-tab>
|
||||
<van-tab title="未答复" name="0"></van-tab>
|
||||
</van-tabs>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/proposal/unitReply/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案编号">{{row.code}}</table-column>
|
||||
<table-column label="提案类别">{{row.typeName}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName}}</table-column>
|
||||
<!-- 工作建议的办理单位均按“承办”展示，其他提案保留主办、协办区分。 -->
|
||||
<table-column label="承办单位">{{row.underTakeName}}（{{row.caseFilingResult === 'SUGGESTION' ? '承办' : (row.underTakeIsMaster ? '主办' : '协办')}}）
|
||||
</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看</span>
|
||||
<div class="proposal-unit-reply-page">
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="承办单位答复" placeholder fixed></van-nav-bar>
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="proposal-unit-reply-sticky">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
class="proposal-unit-reply-search"
|
||||
placeholder="请输入提案名称搜索"
|
||||
shape="round"
|
||||
clearable
|
||||
@search="doSearch"
|
||||
@clear="doSearch"
|
||||
></van-search>
|
||||
<van-dropdown-menu
|
||||
class="proposal-unit-reply-filter"
|
||||
:class="{'is-open': filterOpened}"
|
||||
active-color="#1989fa"
|
||||
>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.sessionId"
|
||||
:options="sessionOptions"
|
||||
:multiple="false"
|
||||
@change="doSearch"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
<van-dropdown-item
|
||||
v-model="pageForm.approvalText"
|
||||
:options="approvalOptions"
|
||||
:multiple="false"
|
||||
@change="approvalChange"
|
||||
@open="filterOpened = true"
|
||||
@close="filterOpened = false"
|
||||
></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>答复</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<i class="fa fa-reply"></i>
|
||||
<span>撤回</span>
|
||||
</van-sticky>
|
||||
|
||||
<main class="proposal-unit-reply-content">
|
||||
<div class="proposal-unit-reply-list">
|
||||
<!-- 列表无记录时使用与团长审核一致的提案专用空状态。 -->
|
||||
<div v-if="pageForm.totalCount === 0" class="proposal-unit-reply-empty">
|
||||
<img src="/assets/mobile/img/proposal/proposal-empty.png" alt="暂无提案记录插画">
|
||||
<div class="proposal-unit-reply-empty__title">暂无提案记录</div>
|
||||
<div class="proposal-unit-reply-empty__hint">当前筛选条件下暂时没有提案</div>
|
||||
</div>
|
||||
<table-list api="/platform/proposal/unitReply/pageData" :page_form.sync="pageForm" @ready="onReady"
|
||||
ref="tableListRef"
|
||||
title="name">
|
||||
<template #header="{index,row}">
|
||||
<div class="proposal-unit-reply-card-header">
|
||||
<div class="proposal-unit-reply-card-heading">
|
||||
<div class="proposal-unit-reply-card-title">{{row.name}}</div>
|
||||
<div class="proposal-unit-reply-card-code">编号：{{row.code || '--'}}</div>
|
||||
</div>
|
||||
<enum-tag
|
||||
class="proposal-unit-reply-status"
|
||||
v-if="row.instanceState"
|
||||
:value="row.instanceState"
|
||||
name="ProcessInstanceStateEnum"
|
||||
label_key="message"
|
||||
size="small"
|
||||
></enum-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="提案类别">{{row.typeName || '--'}}</table-column>
|
||||
<table-column label="提案人">{{row.createUserName || '--'}}</table-column>
|
||||
<table-column label="代表团">{{row.delegationName || '--'}}</table-column>
|
||||
<table-column label="承办单位">{{row.underTakeName || '--'}}（{{row.underTakeIsMaster ? '主办' : '协办'}}）</table-column>
|
||||
<table-column label="当前节点">{{row.curTaskName || '--'}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" v-if="row.taskState === 10" @click="onApproval(row,index)">
|
||||
<van-icon class="proposal-action-icon" name="edit"></van-icon>
|
||||
<span>答复</span>
|
||||
</div>
|
||||
<div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)">
|
||||
<van-icon class="proposal-action-icon" name="revoke"></van-icon>
|
||||
<span>撤回</span>
|
||||
</div>
|
||||
|
||||
<!-- 承办单位领导、超级管理员才能转办。 -->
|
||||
<div class="action-btn" v-if="!pageForm.approval && $auth.hasRoleOr('SYSADMIN,PROPOSAL_UNIT_LEADER')"
|
||||
@click="openTransfer(row)">
|
||||
<van-icon class="proposal-action-icon" name="exchange"></van-icon>
|
||||
<span>转交</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!--承办单位领导、超级管理员才能转办-->
|
||||
<div class="action-btn" v-if="!pageForm.approval && $auth.hasRoleOr('SYSADMIN,PROPOSAL_UNIT_LEADER')"
|
||||
@click="openTransfer(row)">
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
<span>转交</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<proposal-info ref="proposalInfoRef">
|
||||
<div v-if="showApprovalForm">
|
||||
<div class="process-title">{{formData.taskName}}</div>
|
||||
<van-form ref="formRef">
|
||||
<van-field :value="formData.underTakeName"
|
||||
label="承办单位"
|
||||
readonly></van-field>
|
||||
|
||||
<van-field
|
||||
v-model="formData.tf_implementStateName"
|
||||
name="tf_implementStateName"
|
||||
label="落实情况"
|
||||
placeholder="请选择落实情况"
|
||||
:rules="[{ required: true, message: '请选择落实情况' }]"
|
||||
required
|
||||
is-link
|
||||
@click="showImplementPicker = true"
|
||||
></van-field>
|
||||
<van-popup v-model="showImplementPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="dict.type.PROPOSAL_REPLY_IMPLEMENT.map(item => ({text: item.label, value: item.code}))"
|
||||
@confirm="onImplementConfirm"
|
||||
@cancel="showImplementPicker = false"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
|
||||
<van-field
|
||||
v-model="formData.tf_opinion"
|
||||
name="tf_opinion"
|
||||
label="答复内容"
|
||||
placeholder="请输入答复内容"
|
||||
:rules="[{ required: true, message: '请填写答复内容' }]"
|
||||
required
|
||||
maxlength="100"
|
||||
show-word-limit
|
||||
></van-field>
|
||||
|
||||
<van-field
|
||||
v-if="supportCandidate && formData.underTakeIsMaster"
|
||||
v-model="formData.tf_nextNodeOperatorName"
|
||||
name="tf_nextNodeOperatorName"
|
||||
label="校领导"
|
||||
placeholder="校领导"
|
||||
:rules="[{ required: true, message: '请选择校领导' }]"
|
||||
required
|
||||
is-link
|
||||
@click="showCandidatesPicker = true"
|
||||
></van-field>
|
||||
<van-popup v-model="showCandidatesPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="candidates.map(item => ({text: item.userName, value: item.userId}))"
|
||||
@confirm="onCandidatesConfirm"
|
||||
@cancel="showCandidatesPicker = false"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
|
||||
</van-form>
|
||||
<div style="display: flex; justify-content: space-between; column-gap: 10px; padding: 10px">
|
||||
<van-button type="primary" block @click="handleTaskAction(1)">提交</van-button>
|
||||
<van-button block @click="$refs.proposalInfoRef.onClose()">取消</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</proposal-info>
|
||||
|
||||
<transfer ref="transferRef"></transfer>
|
||||
<transfer ref="transferRef" @success="doSearch"></transfer>
|
||||
<proposal-task-popup ref="taskPopup" kind="unitReply" page-key="proposal-unit-reply-task" @success="doSearch"></proposal-task-popup>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
<!--#include("transfer.js"){}#-->
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
<!--#include("../../common/task-popup.js"){}#-->
|
||||
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
dicts: ['PROPOSAL_REPLY_IMPLEMENT'],
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
pageOrderName: "",
|
||||
pageOrderBy: "",
|
||||
name: null,
|
||||
sessionId: null,
|
||||
approvalText: "0",
|
||||
approval: false
|
||||
},
|
||||
|
||||
sessionOptions: [],
|
||||
formData: {},
|
||||
showApprovalForm: false,
|
||||
|
||||
showImplementPicker: false,
|
||||
|
||||
supportCandidate: false,
|
||||
candidates: [],
|
||||
showCandidatesPicker: false,
|
||||
|
||||
filterOpened: false,
|
||||
approvalOptions: [
|
||||
{text: "未审核", value: "0"},
|
||||
{text: "已审核", value: "1"}
|
||||
],
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO,
|
||||
"transfer": transfer
|
||||
"transfer": transfer,
|
||||
"proposal-task-popup": PROPOSAL_TASK_POPUP
|
||||
},
|
||||
methods: {
|
||||
onReady() {
|
||||
this.listSession()
|
||||
this.listSession(false)
|
||||
},
|
||||
listSession() {
|
||||
|
||||
// 审核状态下拉框使用字符串值展示，查询接口使用布尔值区分已审核和未审核。
|
||||
approvalChange(value) {
|
||||
this.$set(this.pageForm, "approval", value === "1")
|
||||
this.doSearch()
|
||||
},
|
||||
|
||||
// 缓存恢复时只加载届次选项，不覆盖离开列表前的筛选条件和列表快照。
|
||||
listSession(skipDefaultSearch) {
|
||||
this.$axios.post("/platform/proposal/common/listSession").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.sessionOptions = [
|
||||
{
|
||||
text: "全部届次",
|
||||
value: null
|
||||
}
|
||||
].concat(res.data.map((v) => ({text: v.fullName, value: v.id})))
|
||||
// 届次接口按开始时间倒序返回，首条即最新届次；无届次时继续按全部届次查询。
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.$set(this.pageForm, "sessionId", res.data[0].id)
|
||||
}
|
||||
this.sessionOptions = [{text: "全部届次", value: null}]
|
||||
.concat(res.data.map((item) => ({text: item.fullName, value: item.id})))
|
||||
if (skipDefaultSearch) return
|
||||
// 保留承办单位答复原有默认口径：首次进入查询全部届次。
|
||||
this.$set(this.pageForm, "sessionId", null)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onView(row) {
|
||||
this.showApprovalForm = false
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
onView(row, index) {
|
||||
this.$refs.taskPopup.open(row, "view")
|
||||
},
|
||||
|
||||
async onApproval(row) {
|
||||
// 与 PC 端答复入口保持一致，确认已沟通后才允许进入答复表单。
|
||||
try {
|
||||
await this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "是否已与提案代表进行充分沟通？",
|
||||
confirmButtonText: "是",
|
||||
cancelButtonText: "否"
|
||||
})
|
||||
} catch (error) {
|
||||
return
|
||||
}
|
||||
|
||||
this.loadCandidates(row.taskId)
|
||||
|
||||
this.showApprovalForm = true
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.formData = {
|
||||
processTaskId: row.taskId,
|
||||
taskKey: row.taskKey,
|
||||
taskName: row.taskName,
|
||||
proposalId: row.id,
|
||||
underTakeName: row.underTakeName,
|
||||
underTakeIsMaster: row.underTakeIsMaster
|
||||
}
|
||||
},
|
||||
|
||||
// 加载候选人列表
|
||||
loadCandidates(taskId) {
|
||||
$.get("/flow/common/candidate", {taskId}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.candidates = res.data.candidates
|
||||
this.supportCandidate = res.data.support
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onImplementConfirm(value) {
|
||||
this.$set(this.formData, "tf_implementStateName", value.text)
|
||||
this.$set(this.formData, "tf_implementState", value.value)
|
||||
this.showImplementPicker = false
|
||||
},
|
||||
|
||||
onCandidatesConfirm(value) {
|
||||
this.$set(this.formData, "tf_nextNodeOperatorName", value.text)
|
||||
this.$set(this.formData, "tf_nextNodeOperator", value.value)
|
||||
this.showCandidatesPicker = false
|
||||
},
|
||||
|
||||
async handleTaskAction(val) {
|
||||
try {
|
||||
await this.$refs.formRef.validate();
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交吗？"
|
||||
}).then(() => {
|
||||
delete this.formData.underTakeIsMaster
|
||||
delete this.formData.underTakeName
|
||||
this.$axios.post("/flow/common/executeTask", {
|
||||
data: JSON.stringify({
|
||||
...this.formData,
|
||||
submitType: val
|
||||
})
|
||||
}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$refs.proposalInfoRef.onClose()
|
||||
this.$toast.success(res.msg)
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
onApproval(row, index) {
|
||||
this.$refs.taskPopup.open(row, "approval")
|
||||
},
|
||||
|
||||
onRevoke(row) {
|
||||
@@ -283,18 +414,28 @@ layout("/layouts/platform_h5.html"){
|
||||
})
|
||||
},
|
||||
|
||||
// 打开转办
|
||||
openTransfer(row){
|
||||
// 打开转办。
|
||||
openTransfer(row) {
|
||||
this.$refs.transferRef.openTransfer(row)
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$set(this.pageForm, "pageNumber", 1)
|
||||
this.$set(this.pageForm, "totalCount", 0)
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const tab = new URLSearchParams(window.location.search).get("tab")
|
||||
if (tab === "done") {
|
||||
this.$set(this.pageForm, "approval", true)
|
||||
this.$set(this.pageForm, "approvalText", "1")
|
||||
} else if (tab === "todo") {
|
||||
this.$set(this.pageForm, "approval", false)
|
||||
this.$set(this.pageForm, "approvalText", "0")
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
+38
-136
@@ -1,147 +1,49 @@
|
||||
const transfer = {
|
||||
template: /*language=HTML*/ `
|
||||
<van-action-sheet v-model="showTransferDialog" title="提案转办">
|
||||
<div class="transfer-dialog">
|
||||
<!-- 提案信息 -->
|
||||
<div class="proposal-info-card">
|
||||
<div class="info-item"><label>提案编号：</label><span>{{transferForm.code}}</span></div>
|
||||
<div class="info-item"><label>提案名称：</label><span>{{transferForm.name}}</span></div>
|
||||
<div class="info-item"><label>代表团：</label><span>{{transferForm.delegationName}}</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 用户选择 -->
|
||||
<van-field v-model="searchKeyword" label="转交给" placeholder="搜索用户" required readonly @click="showUserList=true"></van-field>
|
||||
<van-popup v-model="showUserList" position="bottom">
|
||||
<van-search v-model="keyword" placeholder="搜索用户" @search="selectTransferUser(keyword)" @cancel="showUserList=false"></van-search>
|
||||
<van-empty v-if="transferUserOptions.length === 0" class="empty-tip">请搜索需要转办的用户</van-empty>
|
||||
<van-cell v-for="item in transferUserOptions" :key="item.id" :title="item.username" @click="selectUser(item)"></van-cell>
|
||||
</van-popup>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="button-group">
|
||||
<van-button block plain @click="showTransferDialog = false" class="cancel-btn">取消</van-button>
|
||||
<van-button block type="info" @click="handleTransfer" class="submit-btn">提交</van-button>
|
||||
<van-popup v-model="showTransferDialog" position="right" class="proposal-full-popup" :close-on-click-overlay="false" get-container="#app">
|
||||
<div class="proposal-full-popup__page">
|
||||
<van-nav-bar @click-left="closeTransfer" left-arrow left-text="返回" title="提案转办" placeholder fixed></van-nav-bar>
|
||||
<div class="proposal-full-popup__scroll transfer-dialog">
|
||||
<div class="proposal-info-card">
|
||||
<div class="info-item"><label>提案编号：</label><span>{{transferForm.code}}</span></div>
|
||||
<div class="info-item"><label>提案名称：</label><span>{{transferForm.name}}</span></div>
|
||||
<div class="info-item"><label>代表团：</label><span>{{transferForm.delegationName}}</span></div>
|
||||
</div>
|
||||
<van-field v-model="searchKeyword" label="转交给" placeholder="搜索用户" required readonly is-link @click="openUserList"></van-field>
|
||||
</div>
|
||||
<div class="button-group"><van-button block plain @click="closeTransfer">取消</van-button><van-button block type="info" @click="handleTransfer">提交</van-button></div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
<van-popup v-model="showUserList" position="bottom" :close-on-click-overlay="false">
|
||||
<van-search v-model="keyword" placeholder="搜索用户" @search="selectTransferUser(keyword)" @cancel="closeUserList"></van-search>
|
||||
<van-empty v-if="transferUserOptions.length === 0" class="empty-tip">请搜索需要转办的用户</van-empty>
|
||||
<van-cell v-for="item in transferUserOptions" :key="item.id" :title="item.username" @click="selectUser(item)"></van-cell>
|
||||
</van-popup>
|
||||
<van-dialog :value="confirmVisible" title="提示" :message="confirmMessage" show-cancel-button @confirm="confirmTransfer" @cancel="closeConfirm"></van-dialog>
|
||||
</van-popup>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
showTransferDialog: false,
|
||||
transferForm: {},
|
||||
transferUserOptions: [],
|
||||
searchKeyword: '',
|
||||
showUserList: false,
|
||||
keyword: ''
|
||||
return {showTransferDialog:false,transferForm:{},transferUserOptions:[],searchKeyword:"",showUserList:false,keyword:"",confirmVisible:false,historyLayerPageKey:"proposal-unit-reply-transfer",unsubscribeHistoryLayer:null}
|
||||
},
|
||||
computed: {
|
||||
confirmMessage() {
|
||||
const item=this.transferUserOptions.find((option) => option.id === this.transferForm.userId)
|
||||
return "您确定要将" + (this.transferForm.name || "") + "提案转交给" + (item ? item.username : "") + "办理吗？"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openTransfer(row) {
|
||||
this.showTransferDialog = true
|
||||
this.transferForm = { taskId: row.taskId, name: row.name, code: row.code, delegationName: row.delegationName }
|
||||
this.searchKeyword = ''
|
||||
},
|
||||
selectUser(item) {
|
||||
this.transferForm.userId = item.id
|
||||
this.searchKeyword = item.username
|
||||
this.showUserList = false
|
||||
},
|
||||
selectTransferUser(keyword) {
|
||||
this.$axios.post("/platform/proposal/unitReply/selectViceUser", {keyword}).then(res => {
|
||||
if (res.code === 0) this.transferUserOptions = res.data
|
||||
})
|
||||
},
|
||||
|
||||
// 转办
|
||||
handleTransfer() {
|
||||
if (!this.transferForm.userId) {
|
||||
this.$toast('请选择转交用户')
|
||||
return
|
||||
}
|
||||
|
||||
const transferUserName = this.transferUserOptions.find(item => item.id === this.transferForm.userId)?.username
|
||||
const name = this.transferForm.name
|
||||
|
||||
this.$dialog.confirm({
|
||||
title: '提示',
|
||||
message: `您确定要将` + name + `提案转交给` + transferUserName + `办理吗？`,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(() => {
|
||||
this.$axios.post('/platform/proposal/unitReply/transfer', this.transferForm).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast.success(res.msg)
|
||||
this.showTransferDialog = false
|
||||
this.doSearch()
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
// 取消操作
|
||||
})
|
||||
}
|
||||
syncLayers(stack) { this.$set(this,"showTransferDialog",stack.includes("transfer")); this.$set(this,"showUserList",stack.includes("user-list")); this.$set(this,"confirmVisible",stack.includes("confirm")) },
|
||||
openTransfer(row) { this.$set(this,"transferForm",{taskId:row.taskId,name:row.name,code:row.code,delegationName:row.delegationName}); this.$set(this,"searchKeyword",""); window.h5HistoryLayerManager.open("transfer") },
|
||||
closeTransfer() { window.h5HistoryLayerManager.close("transfer") },
|
||||
openUserList() { window.h5HistoryLayerManager.open("user-list") },
|
||||
closeUserList() { window.h5HistoryLayerManager.close("user-list") },
|
||||
closeConfirm() { window.h5HistoryLayerManager.close("confirm") },
|
||||
selectUser(item) { this.$set(this.transferForm,"userId",item.id); this.$set(this,"searchKeyword",item.username); this.closeUserList() },
|
||||
/** keyword 为姓名关键字，接口返回可转交用户数组。 */
|
||||
selectTransferUser(keyword) { this.$axios.post("/platform/proposal/unitReply/selectViceUser",{keyword:keyword}).then((res) => { if (res.code === 0) this.$set(this,"transferUserOptions",res.data || []) }) },
|
||||
handleTransfer() { if (!this.transferForm.userId) { this.$toast("请选择转交用户"); return } window.h5HistoryLayerManager.open("confirm") },
|
||||
/** 提交 taskId 和 userId 完成转办，成功后清理弹层并通知父列表刷新。 */
|
||||
confirmTransfer() { this.$axios.post("/platform/proposal/unitReply/transfer",this.transferForm).then((res) => { if (res.code === 0) { this.$toast.success(res.msg); window.h5HistoryLayerManager.closeAll(() => this.$emit("success")) } }) }
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.transfer-dialog {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding: 16px 16px 65px;
|
||||
}
|
||||
|
||||
.proposal-info-card {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.proposal-info-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.info-item label {
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.info-item span {
|
||||
font-size: 14px;
|
||||
color: #323233;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #ebedf0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
column-gap: 10px;
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.cancel-btn,
|
||||
.submit-btn {
|
||||
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 50px 16px;
|
||||
color: #969799;
|
||||
font-size: 14px;
|
||||
}
|
||||
`
|
||||
created() { window.h5HistoryLayerManager.ensureRegistered(this.historyLayerPageKey); this.$set(this,"unsubscribeHistoryLayer",window.h5HistoryLayerManager.subscribe((stack) => this.syncLayers(stack))) },
|
||||
beforeDestroy() { if (this.unsubscribeHistoryLayer) this.unsubscribeHistoryLayer(); if (window.h5HistoryLayerManager.pageKey === this.historyLayerPageKey) window.h5HistoryLayerManager.unregister(this.historyLayerPageKey) }
|
||||
}
|
||||
|
||||
+53
-10
@@ -1,8 +1,11 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
<!--#include("../../common/info.css"){}#-->
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar @click-left="historyBack" left-arrow left-text="返回" title="团长审核" placeholder fixed></van-nav-bar>
|
||||
<van-nav-bar @click-left="handlePageBack" left-arrow left-text="返回" title="团长审核" placeholder fixed></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
v-model="pageForm.name"
|
||||
@@ -35,21 +38,32 @@ layout("/layouts/platform_h5.html"){
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<van-icon class="proposal-action-icon" name="eye-o"></van-icon>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<proposal-info ref="proposalInfoRef"></proposal-info>
|
||||
<van-popup v-model="detailVisible" class="proposal-full-popup" position="right"
|
||||
:close-on-click-overlay="false" safe-area-inset-bottom>
|
||||
<div class="proposal-full-popup__page">
|
||||
<van-nav-bar title="提案详情" left-arrow left-text="返回" fixed
|
||||
@click-left="closeHistoryLayer('detail')"></van-nav-bar>
|
||||
<div class="proposal-full-popup__scroll">
|
||||
<proposal-info v-if="detailVisible && detailBizId" :biz-id="detailBizId" :visible="detailVisible"></proposal-info>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("../../common/info.js"){}#-->
|
||||
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
@@ -64,13 +78,34 @@ layout("/layouts/platform_h5.html"){
|
||||
|
||||
sessionOptions: [],
|
||||
formData: {},
|
||||
showApprovalForm: false
|
||||
showApprovalForm: false,
|
||||
detailVisible: false,
|
||||
detailBizId: "",
|
||||
historyLayerPageKey: "proposal-vice-delegation-h5"
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"proposal-info": PROPOSAL_INFO
|
||||
},
|
||||
methods: {
|
||||
registerHistoryLayers() {
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => {
|
||||
this.$set(this, "detailVisible", stack.includes("detail"))
|
||||
})
|
||||
},
|
||||
openHistoryLayer(layerName) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.open(layerName)) return
|
||||
if (layerName === "detail") this.$set(this, "detailVisible", true)
|
||||
},
|
||||
closeHistoryLayer(layerName) {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.close(layerName)) return
|
||||
if (layerName === "detail") this.$set(this, "detailVisible", false)
|
||||
},
|
||||
handlePageBack() {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
|
||||
window.h5HistoryLayerManager.close()
|
||||
return
|
||||
}
|
||||
this.historyBack()
|
||||
},
|
||||
onReady() {
|
||||
this.listSession()
|
||||
},
|
||||
@@ -93,8 +128,8 @@ layout("/layouts/platform_h5.html"){
|
||||
},
|
||||
|
||||
onView(row) {
|
||||
this.showApprovalForm = false
|
||||
this.$refs.proposalInfoRef.onOpen(row)
|
||||
this.$set(this, "detailBizId", row.id)
|
||||
this.openHistoryLayer("detail")
|
||||
},
|
||||
|
||||
doSearch() {
|
||||
@@ -104,6 +139,14 @@ layout("/layouts/platform_h5.html"){
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.registerHistoryLayers()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (window.h5HistoryLayerManager) {
|
||||
window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
+542
-196
@@ -2,7 +2,251 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
<style id="style-proposal-write-h5">
|
||||
.proposal-write-page {
|
||||
--proposal-primary: #1677ee;
|
||||
--proposal-text: #263548;
|
||||
--proposal-muted: #8995a5;
|
||||
min-height: 100%;
|
||||
padding-bottom: calc(84px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background: #f3f7fc;
|
||||
color: var(--proposal-text);
|
||||
}
|
||||
|
||||
.proposal-hero {
|
||||
position: relative;
|
||||
height: 116px;
|
||||
padding: 18px 18px 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background-color: #edf5ff;
|
||||
background-image: url("/assets/mobile/img/home/v4/hero-campus.png");
|
||||
background-position: 66% 46%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.proposal-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(242, 247, 255, 0.76);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.proposal-hero__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.proposal-hero__title {
|
||||
margin: 0;
|
||||
color: var(--proposal-primary);
|
||||
font-size: 23px;
|
||||
line-height: 30px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.proposal-hero__subtitle {
|
||||
margin-top: 2px;
|
||||
color: #718096;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.proposal-main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: -43px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.proposal-notice {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 62px;
|
||||
margin-bottom: 11px;
|
||||
padding: 12px 11px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #dfeafb;
|
||||
border-radius: 9px;
|
||||
background: rgba(246, 250, 255, 0.97);
|
||||
box-shadow: 0 3px 10px rgba(53, 98, 154, 0.08);
|
||||
}
|
||||
|
||||
.proposal-notice__icon {
|
||||
flex: none;
|
||||
margin: 1px 9px 0 0;
|
||||
color: var(--proposal-primary);
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.proposal-notice__body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.proposal-notice__title {
|
||||
color: #3673bd;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-notice__text {
|
||||
margin-top: 2px;
|
||||
color: #8a97a8;
|
||||
font-size: 10px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.proposal-notice__link {
|
||||
align-self: center;
|
||||
flex: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
padding: 4px 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--proposal-primary);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.proposal-card {
|
||||
margin-bottom: 11px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e9eff7;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 11px rgba(51, 87, 126, 0.08);
|
||||
}
|
||||
|
||||
.proposal-card__title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 12px 14px 8px 21px;
|
||||
color: #354255;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.proposal-card__title::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
bottom: 11px;
|
||||
left: 12px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--proposal-primary);
|
||||
}
|
||||
|
||||
.proposal-card .van-cell-group {
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.proposal-card .van-cell {
|
||||
min-height: 44px;
|
||||
padding: 10px 14px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.proposal-card .van-cell:not(:last-child)::after {
|
||||
right: 14px;
|
||||
left: 14px;
|
||||
border-color: #eef2f7;
|
||||
}
|
||||
|
||||
.proposal-card .van-field__label {
|
||||
width: 84px;
|
||||
color: #596779;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.proposal-card .van-field__value,
|
||||
.proposal-card .van-field__control {
|
||||
color: #4f5d70;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.proposal-card .van-field__control::placeholder {
|
||||
color: #b1bac6;
|
||||
}
|
||||
|
||||
.proposal-card .van-field__word-limit {
|
||||
margin-top: 2px;
|
||||
color: #b5bdc8;
|
||||
font-size: 9px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.proposal-card .van-cell--required::before {
|
||||
left: 6px;
|
||||
color: #f06464;
|
||||
}
|
||||
|
||||
.proposal-textarea-field {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.proposal-textarea-field .van-field__label {
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.proposal-textarea-field .van-field__control {
|
||||
min-height: 66px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.proposal-actions {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid #edf1f6;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 -4px 14px rgba(50, 78, 112, 0.06);
|
||||
}
|
||||
|
||||
.proposal-actions .van-button {
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.proposal-actions .van-button:first-child {
|
||||
flex: 1;
|
||||
color: var(--proposal-primary);
|
||||
border-color: var(--proposal-primary);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.proposal-actions .van-button:last-child {
|
||||
flex: 1.08;
|
||||
border-color: var(--proposal-primary);
|
||||
background: var(--proposal-primary);
|
||||
box-shadow: 0 4px 10px rgba(22, 119, 238, 0.18);
|
||||
}
|
||||
|
||||
.proposal-actions .van-icon {
|
||||
margin-right: 5px;
|
||||
font-size: 15px;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
.suggestion-unit-picker {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -85,16 +329,62 @@ layout("/layouts/platform_h5.html"){
|
||||
max-width: 100% !important;
|
||||
text-indent: 2em; /* 中文首行缩进更规范 */
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.proposal-hero__content,
|
||||
.proposal-main {
|
||||
max-width: 520px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.proposal-main {
|
||||
margin-top: -43px;
|
||||
}
|
||||
|
||||
.proposal-actions {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
width: 520px;
|
||||
box-sizing: border-box;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="撰写提案" left-text="返回" left-arrow @click-left="historyBack" placeholder fixed z-index="999"
|
||||
<van-nav-bar title="撰写提案" left-text="返回" left-arrow @click-left="handlePageBack" placeholder fixed z-index="999"
|
||||
class="custom-nav"></van-nav-bar>
|
||||
|
||||
<div class="form-container">
|
||||
<van-form ref="formRef">
|
||||
<!-- 基本信息 -->
|
||||
<van-cell-group title="基本信息">
|
||||
<div class="proposal-write-page">
|
||||
<header class="proposal-hero">
|
||||
<div class="proposal-hero__content">
|
||||
<div>
|
||||
<h1 class="proposal-hero__title">撰写提案</h1>
|
||||
<div class="proposal-hero__subtitle">情系职工 · 真诚服务</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="proposal-main">
|
||||
<!-- 撰写须知保留原配置内容，通过轻量提示卡片进入详情。 -->
|
||||
<div class="proposal-notice">
|
||||
<van-icon class="proposal-notice__icon" name="info-o"></van-icon>
|
||||
<div class="proposal-notice__body">
|
||||
<div class="proposal-notice__title">提案撰写须知</div>
|
||||
<div class="proposal-notice__text">请围绕学校改革发展、内部管理、职工需求等方面，一事一案，提出可行性建议。</div>
|
||||
</div>
|
||||
<button type="button" class="proposal-notice__link" @click="setVisibleState('noticeDialogVisible', true)">
|
||||
查看详情
|
||||
<van-icon name="arrow"></van-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<van-form ref="formRef">
|
||||
<!-- 基本信息：保留当前教代会、代表身份及联系方式等业务字段。 -->
|
||||
<section class="proposal-card">
|
||||
<h2 class="proposal-card__title">一、基本信息</h2>
|
||||
<van-cell-group :border="false">
|
||||
<van-field
|
||||
v-model="formData.createUserName"
|
||||
label="代表姓名"
|
||||
@@ -116,15 +406,15 @@ layout("/layouts/platform_h5.html"){
|
||||
name="sessionName"
|
||||
label="所属教代会"
|
||||
placeholder="请选择所属教代会"
|
||||
@click="showSessionPicker = true"
|
||||
@click="setVisibleState('showSessionPicker', true)"
|
||||
:rules="[{ required: true, message: '请选择所属教代会' }]"
|
||||
></van-field>
|
||||
<van-popup v-model="showSessionPicker" position="bottom">
|
||||
<van-popup v-model="showSessionPicker" position="bottom" round :close-on-click-overlay="false" get-container="#app">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="sessionOptions.map(item => ({text: item.fullName, value: item.id}))"
|
||||
@confirm="onSessionConfirm"
|
||||
@cancel="showSessionPicker = false"
|
||||
@cancel="setVisibleState('showSessionPicker', false)"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
|
||||
@@ -143,15 +433,15 @@ layout("/layouts/platform_h5.html"){
|
||||
name="committeeName"
|
||||
label="所属委员会"
|
||||
placeholder="请选择所属委员会"
|
||||
@click="showCommitteePicker = true"
|
||||
@click="setVisibleState('showCommitteePicker', true)"
|
||||
:rules="[{ required: true, message: '请选择所属委员会' }]"
|
||||
></van-field>
|
||||
<van-popup v-model="showCommitteePicker" position="bottom">
|
||||
<van-popup v-model="showCommitteePicker" position="bottom" round :close-on-click-overlay="false" get-container="#app">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="committeeOptions.map(item => ({text: item.name, value: item.id}))"
|
||||
@confirm="onCommitteeConfirm"
|
||||
@cancel="showCommitteePicker = false"
|
||||
@cancel="setVisibleState('showCommitteePicker', false)"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
|
||||
@@ -170,10 +460,13 @@ layout("/layouts/platform_h5.html"){
|
||||
placeholder="请输入联系电话"
|
||||
:rules="[{ required: true, message: '请填写联系电话' }]"
|
||||
></van-field>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group title="提案信息" class="form-group">
|
||||
<!-- 提案内容：字段和校验继续以现有接口及实体定义为准。 -->
|
||||
<section class="proposal-card">
|
||||
<h2 class="proposal-card__title">二、提案内容</h2>
|
||||
<van-cell-group :border="false">
|
||||
<van-field
|
||||
v-model="formData.name"
|
||||
name="name"
|
||||
@@ -192,16 +485,16 @@ layout("/layouts/platform_h5.html"){
|
||||
name="提案方式"
|
||||
label="提案方式"
|
||||
placeholder="请选择提案方式"
|
||||
@click="showSourcePicker = true"
|
||||
@click="setVisibleState('showSourcePicker', true)"
|
||||
:rules="[{ required: true, message: '请选择提案方式' }]"
|
||||
required
|
||||
></van-field>
|
||||
<van-popup v-model="showSourcePicker" position="bottom">
|
||||
<van-popup v-model="showSourcePicker" position="bottom" round :close-on-click-overlay="false" get-container="#app">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="sourceOptions.map(item => ({text: item.name, value: item.code}))"
|
||||
@confirm="onSourceConfirm"
|
||||
@cancel="showSourcePicker = false"
|
||||
@cancel="setVisibleState('showSourcePicker', false)"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
|
||||
@@ -212,97 +505,20 @@ layout("/layouts/platform_h5.html"){
|
||||
name="typeName"
|
||||
label="提案类型"
|
||||
placeholder="请选择提案类型"
|
||||
@click="showTypePicker = true"
|
||||
@click="setVisibleState('showTypePicker', true)"
|
||||
:rules="[{ required: true, message: '请选择提案类型' }]"
|
||||
required
|
||||
></van-field>
|
||||
<van-popup v-model="showTypePicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="typeOptions.map(item => ({text: item.name, value: item.id}))"
|
||||
@confirm="onTypeConfirm"
|
||||
@cancel="showTypePicker = false"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
|
||||
<!-- <van-field
|
||||
:value="formData.suggestUnits.length > 0 ? formData.suggestUnits.join(', ') : ''"
|
||||
is-link
|
||||
readonly
|
||||
name="suggestUnits"
|
||||
label="建议承办单位"
|
||||
placeholder="请选择建议承办单位"
|
||||
@click="showSuggestionUnitPicker = true"
|
||||
:rules="[{ required: true, message: '请选择建议承办单位' }]"
|
||||
required
|
||||
></van-field>-->
|
||||
<van-popup v-model="showSuggestionUnitPicker" position="bottom" :style="{ height: '70%' }">
|
||||
<div class="suggestion-unit-picker">
|
||||
<!-- 头部工具栏 -->
|
||||
<div class="picker-toolbar">
|
||||
<button class="picker-cancel" @click="onSuggestionUnitCancel">取消</button>
|
||||
<div class="picker-title">选择建议承办单位</div>
|
||||
<button class="picker-confirm" @click="onSuggestionUnitConfirm">确认</button>
|
||||
</div>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div class="search-container">
|
||||
<van-search
|
||||
v-model="suggestionUnitSearchText"
|
||||
placeholder="搜索承办单位"
|
||||
@input="onSuggestionUnitSearch"
|
||||
></van-search>
|
||||
</div>
|
||||
|
||||
<!-- 选项列表 -->
|
||||
<div class="options-container">
|
||||
<van-checkbox-group v-model="selectedSuggestionUnits">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
v-for="item in filteredSuggestionUnits"
|
||||
:key="item.id"
|
||||
clickable
|
||||
@click="toggleSuggestionUnit(item)"
|
||||
>
|
||||
<template #title>
|
||||
<div class="option-item">
|
||||
<van-checkbox
|
||||
:name="item.name"
|
||||
:checked="selectedSuggestionUnits.includes(item.name)"
|
||||
@click.stop
|
||||
/>
|
||||
<span class="option-text">{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group title="提案内容" class="form-group">
|
||||
<!--<van-field
|
||||
v-model="formData.researchFindings"
|
||||
name="researchFindings"
|
||||
label="调研情况"
|
||||
type="textarea"
|
||||
rows="4"
|
||||
autosize
|
||||
placeholder="请输入调研情况"
|
||||
:rules="[{ required: true, message: '请填写调研情况' }]"
|
||||
required
|
||||
></van-field>-->
|
||||
|
||||
<van-field
|
||||
v-model="formData.brief"
|
||||
label="提案案由"
|
||||
type="textarea"
|
||||
rows="6"
|
||||
rows="3"
|
||||
autosize
|
||||
placeholder="请输入案由"
|
||||
placeholder="请简要说明需要解决的问题和背景"
|
||||
:rules="[{ required: true, message: '请填写案由' }]"
|
||||
class="proposal-textarea-field"
|
||||
required
|
||||
></van-field>
|
||||
|
||||
@@ -310,17 +526,20 @@ layout("/layouts/platform_h5.html"){
|
||||
v-model="formData.measures"
|
||||
label="建议措施"
|
||||
type="textarea"
|
||||
rows="6"
|
||||
rows="3"
|
||||
autosize
|
||||
placeholder="请输入建议措施"
|
||||
placeholder="请提出具体、可行的建议措施"
|
||||
:rules="[{ required: true, message: '请填写建议措施' }]"
|
||||
class="proposal-textarea-field"
|
||||
required
|
||||
></van-field>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 附件上传 -->
|
||||
<van-cell-group title="附件上传" class="form-group">
|
||||
<!-- 附件材料仅使用卡片分组，上传控件保持项目原有样式和结果结构。 -->
|
||||
<section class="proposal-card">
|
||||
<h2 class="proposal-card__title">三、附件材料</h2>
|
||||
<van-cell-group :border="false">
|
||||
<van-field label="附件" name="files" class="direction-column-field">
|
||||
<h5-file-upload
|
||||
slot="input"
|
||||
@@ -332,22 +551,84 @@ layout("/layouts/platform_h5.html"){
|
||||
complete_result
|
||||
></h5-file-upload>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</van-cell-group>
|
||||
</section>
|
||||
|
||||
<!-- 按钮区域 -->
|
||||
<div class="form-actions" v-if="isWriteTime">
|
||||
<van-button plain type="info" @click="onSave">保存</van-button>
|
||||
<van-button type="primary" @click="onSubmit" v-if="!taskId">提交</van-button>
|
||||
<van-button type="primary" @click="onSubmitAgain" v-else>提交</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
<!-- 各选择器沿用原始数据源与回显逻辑。 -->
|
||||
<van-popup v-model="showTypePicker" position="bottom" round :close-on-click-overlay="false" get-container="#app">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="typeOptions.map(item => ({text: item.name, value: item.id}))"
|
||||
@confirm="onTypeConfirm"
|
||||
@cancel="setVisibleState('showTypePicker', false)"
|
||||
></van-picker>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="showSuggestionUnitPicker" position="bottom" :style="{ height: '70%' }" round :close-on-click-overlay="false" get-container="#app">
|
||||
<div class="suggestion-unit-picker">
|
||||
<div class="picker-toolbar">
|
||||
<button type="button" class="picker-cancel" @click="onSuggestionUnitCancel">取消</button>
|
||||
<div class="picker-title">选择建议承办单位</div>
|
||||
<button type="button" class="picker-confirm" @click="onSuggestionUnitConfirm">确认</button>
|
||||
</div>
|
||||
|
||||
<div class="search-container">
|
||||
<van-search
|
||||
v-model="suggestionUnitSearchText"
|
||||
placeholder="搜索承办单位"
|
||||
@input="onSuggestionUnitSearch"
|
||||
></van-search>
|
||||
</div>
|
||||
|
||||
<div class="options-container">
|
||||
<van-checkbox-group v-model="selectedSuggestionUnits">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
v-for="item in filteredSuggestionUnits"
|
||||
:key="item.id"
|
||||
clickable
|
||||
@click="toggleSuggestionUnit(item)"
|
||||
>
|
||||
<template #title>
|
||||
<div class="option-item">
|
||||
<van-checkbox
|
||||
:name="item.name"
|
||||
:checked="selectedSuggestionUnits.includes(item.name)"
|
||||
@click.stop
|
||||
></van-checkbox>
|
||||
<span class="option-text">{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</van-form>
|
||||
</main>
|
||||
|
||||
<!-- 保存、首次提交和重新提交继续共用原业务入口。 -->
|
||||
<div class="proposal-actions" v-if="isWriteTime">
|
||||
<van-button plain type="info" :loading="formLoading && loadingAction === 'save'" :disabled="formLoading" @click="onSave">
|
||||
<van-icon name="records"></van-icon>保存草稿
|
||||
</van-button>
|
||||
<van-button type="primary" :loading="formLoading && loadingAction === 'submit'" :disabled="formLoading" @click="onSubmit" v-if="!taskId">
|
||||
<van-icon name="guide-o"></van-icon>提交提案
|
||||
</van-button>
|
||||
<van-button type="primary" :loading="formLoading && loadingAction === 'submitAgain'" :disabled="formLoading" @click="onSubmitAgain" v-else>
|
||||
<van-icon name="guide-o"></van-icon>重新提交
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提案撰写须知弹窗 -->
|
||||
<van-action-sheet v-model="noticeDialogVisible"
|
||||
title="提案撰写须知"
|
||||
cancel-text="我已知晓"
|
||||
close-on-click-action>
|
||||
close-on-click-action
|
||||
:close-on-click-overlay="false"
|
||||
@cancel="setVisibleState('noticeDialogVisible', false)">
|
||||
<div class="notice-dialog-content" v-html="proposalConfig.writeRemind"></div>
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
@@ -383,16 +664,59 @@ layout("/layouts/platform_h5.html"){
|
||||
noticeDialogVisible: false,
|
||||
|
||||
isWriteTime: true,
|
||||
formLoading: false,
|
||||
loadingAction: '',
|
||||
|
||||
// 建议承办单位
|
||||
suggestUnitOptions: [],
|
||||
showSuggestionUnitPicker: false,
|
||||
selectedSuggestionUnits: [], // 当前选中的承办单位
|
||||
suggestionUnitSearchText: '', // 搜索文本
|
||||
filteredSuggestionUnits: [] // 过滤后的承办单位列表
|
||||
filteredSuggestionUnits: [], // 过滤后的承办单位列表
|
||||
historyLayerPageKey: "proposal-write"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePageBack() {
|
||||
if (window.h5HistoryLayerManager.stack.length) {
|
||||
window.h5HistoryLayerManager.close();
|
||||
return;
|
||||
}
|
||||
historyBack();
|
||||
},
|
||||
/**
|
||||
* 更新页面弹层显示状态，避免在模板事件中直接为 Vue 数据赋值。
|
||||
* @param {String} stateName showSessionPicker、showSourcePicker 等弹层状态字段名。
|
||||
* @param {Boolean} visible true 表示打开，false 表示关闭。
|
||||
* @return {void} 无返回值，仅更新当前页面状态。
|
||||
*/
|
||||
setVisibleState(stateName, visible) {
|
||||
const layerName = {
|
||||
showSessionPicker: "session-picker",
|
||||
showSourcePicker: "source-picker",
|
||||
showTypePicker: "type-picker",
|
||||
showCommitteePicker: "committee-picker",
|
||||
showSuggestionUnitPicker: "suggestion-unit-picker",
|
||||
noticeDialogVisible: "notice"
|
||||
}[stateName];
|
||||
if (visible) {
|
||||
window.h5HistoryLayerManager.open(layerName);
|
||||
return;
|
||||
}
|
||||
window.h5HistoryLayerManager.close(layerName);
|
||||
},
|
||||
|
||||
registerHistoryLayers() {
|
||||
window.h5HistoryLayerManager.register(this.historyLayerPageKey, (stack) => {
|
||||
this.$set(this, "showSessionPicker", stack.includes("session-picker"));
|
||||
this.$set(this, "showSourcePicker", stack.includes("source-picker"));
|
||||
this.$set(this, "showTypePicker", stack.includes("type-picker"));
|
||||
this.$set(this, "showCommitteePicker", stack.includes("committee-picker"));
|
||||
this.$set(this, "showSuggestionUnitPicker", stack.includes("suggestion-unit-picker"));
|
||||
this.$set(this, "noticeDialogVisible", stack.includes("notice"));
|
||||
});
|
||||
},
|
||||
|
||||
// 选择器确认事件
|
||||
onSessionConfirm(value) {
|
||||
this.formData.sessionId = value.value;
|
||||
@@ -400,33 +724,33 @@ layout("/layouts/platform_h5.html"){
|
||||
if (selectedOption) {
|
||||
this.$set(this.formData, 'sessionName', selectedOption.fullName);
|
||||
}
|
||||
this.showSessionPicker = false;
|
||||
this.setVisibleState("showSessionPicker", false);
|
||||
this.meetingChange(value.value);
|
||||
},
|
||||
|
||||
onSourceConfirm(value) {
|
||||
this.formData.source = value.value;
|
||||
this.$set(this.formData, 'sourceName', value.text);
|
||||
this.showSourcePicker = false;
|
||||
this.setVisibleState("showSourcePicker", false);
|
||||
},
|
||||
|
||||
onTypeConfirm(value) {
|
||||
this.$set(this.formData, 'typeId', value.value);
|
||||
this.$set(this.formData, 'typeName', value.text);
|
||||
this.showTypePicker = false;
|
||||
this.setVisibleState("showTypePicker", false);
|
||||
},
|
||||
|
||||
onSuggestionUnitConfirm() {
|
||||
// 将选中的承办单位保存到表单数据中
|
||||
this.formData.suggestUnits = [...this.selectedSuggestionUnits];
|
||||
this.showSuggestionUnitPicker = false;
|
||||
this.setVisibleState("showSuggestionUnitPicker", false);
|
||||
},
|
||||
|
||||
onSuggestionUnitCancel() {
|
||||
// 取消时恢复到之前的选择状态
|
||||
this.selectedSuggestionUnits = [...this.formData.suggestUnits];
|
||||
this.suggestionUnitSearchText = '';
|
||||
this.showSuggestionUnitPicker = false;
|
||||
this.setVisibleState("showSuggestionUnitPicker", false);
|
||||
},
|
||||
|
||||
// 切换承办单位选择状态
|
||||
@@ -459,20 +783,23 @@ layout("/layouts/platform_h5.html"){
|
||||
onCommitteeConfirm(value) {
|
||||
this.formData.committeeId = value.value;
|
||||
this.$set(this.formData, 'committeeName', value.text);
|
||||
this.showCommitteePicker = false;
|
||||
this.setVisibleState("showCommitteePicker", false);
|
||||
},
|
||||
|
||||
async onSave() {
|
||||
// 表单验证
|
||||
try {
|
||||
await this.$refs.formRef.validate();
|
||||
|
||||
// 保存草稿：校验当前表单后保存 ProposalInfo，接口成功时返回提案数据并回到我的提案。
|
||||
onSave() {
|
||||
if (this.formLoading) {
|
||||
return;
|
||||
}
|
||||
this.$refs.formRef.validate().then(() => {
|
||||
this.formLoading = true;
|
||||
this.loadingAction = 'save';
|
||||
this.$toast.loading({
|
||||
message: '保存中...',
|
||||
forbidClick: true,
|
||||
});
|
||||
|
||||
this.$axios.post("/platform/proposal/write/save", {info: JSON.stringify(this.formData)})
|
||||
return this.$axios.post("/platform/proposal/write/save", {info: JSON.stringify(this.formData)})
|
||||
.then((res) => {
|
||||
this.$toast.clear();
|
||||
if (res.code === 0) {
|
||||
@@ -485,29 +812,46 @@ layout("/layouts/platform_h5.html"){
|
||||
.catch(err => {
|
||||
this.$toast.clear();
|
||||
this.$toast.fail('网络错误，请稍后重试');
|
||||
})
|
||||
.finally(() => {
|
||||
this.formLoading = false;
|
||||
this.loadingAction = '';
|
||||
});
|
||||
} catch (error) {
|
||||
// 表单验证失败
|
||||
}).catch((error) => {
|
||||
console.log('表单验证失败', error);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 提交
|
||||
async onSubmit() {
|
||||
try {
|
||||
await this.$refs.formRef.validate();
|
||||
/**
|
||||
* 提交前补充业务校验。
|
||||
* @param {String} briefMessage 案由不足配置字数时展示的完整提示前缀。
|
||||
* @return {Boolean} true 表示可以继续提交，false 表示已经提示并终止提交。
|
||||
*/
|
||||
validateBeforeSubmit(briefMessage) {
|
||||
if (!this.formData.name || this.formData.name.trim().length < 1) {
|
||||
this.$toast("请填写提案名称");
|
||||
return false;
|
||||
}
|
||||
const briefMinLength = Number(this.proposalConfig.briefMinLength || 0);
|
||||
if ((this.formData.brief || '').length < briefMinLength) {
|
||||
this.$toast(briefMessage + briefMinLength + "字");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
if (!this.formData.name || this.formData.name.trim().length < 1) {
|
||||
this.$toast("请填写提案名称");
|
||||
// 首次提交：info 为完整提案 JSON，成功后进入提案流程并返回我的提案。
|
||||
onSubmit() {
|
||||
if (this.formLoading) {
|
||||
return;
|
||||
}
|
||||
this.$refs.formRef.validate().then(() => {
|
||||
if (!this.validateBeforeSubmit("案由最少为")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.formData.brief.length < this.proposalConfig.briefMinLength) {
|
||||
this.$toast("案由" + this.proposalConfig.briefMinLength + "字");
|
||||
return;
|
||||
}
|
||||
|
||||
this.$dialog.confirm({
|
||||
this.formLoading = true;
|
||||
this.loadingAction = 'submit';
|
||||
return this.$dialog.confirm({
|
||||
title: '提示',
|
||||
message: '您确定要提交吗？',
|
||||
}).then(() => {
|
||||
@@ -516,7 +860,7 @@ layout("/layouts/platform_h5.html"){
|
||||
forbidClick: true,
|
||||
});
|
||||
|
||||
this.$axios.post('/platform/proposal/write/submit', {info: JSON.stringify(this.formData)})
|
||||
return this.$axios.post('/platform/proposal/write/submit', {info: JSON.stringify(this.formData)})
|
||||
.then(res => {
|
||||
this.$toast.clear();
|
||||
if (res.code === 0) {
|
||||
@@ -532,29 +876,27 @@ layout("/layouts/platform_h5.html"){
|
||||
});
|
||||
}).catch(() => {
|
||||
// 取消提交
|
||||
}).finally(() => {
|
||||
this.formLoading = false;
|
||||
this.loadingAction = '';
|
||||
});
|
||||
} catch (error) {
|
||||
// 表单验证失败
|
||||
}).catch((error) => {
|
||||
console.log('表单验证失败', error);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 重新提交
|
||||
async onSubmitAgain() {
|
||||
try {
|
||||
await this.$refs.formRef.validate();
|
||||
|
||||
if (!this.formData.name || this.formData.name.trim().length < 1) {
|
||||
this.$toast("请填写提案名称");
|
||||
// 重新提交：除完整提案 JSON 外携带 taskId，用于继续当前退回任务。
|
||||
onSubmitAgain() {
|
||||
if (this.formLoading) {
|
||||
return;
|
||||
}
|
||||
this.$refs.formRef.validate().then(() => {
|
||||
if (!this.validateBeforeSubmit("提案内容和依据最少为")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.formData.brief.length < this.proposalConfig.briefMinLength) {
|
||||
this.$toast("提案内容和依据最少为" + this.proposalConfig.briefMinLength + "字");
|
||||
return;
|
||||
}
|
||||
|
||||
this.$dialog.confirm({
|
||||
this.formLoading = true;
|
||||
this.loadingAction = 'submitAgain';
|
||||
return this.$dialog.confirm({
|
||||
title: '提示',
|
||||
message: '您确定要提交吗？',
|
||||
}).then(() => {
|
||||
@@ -563,7 +905,7 @@ layout("/layouts/platform_h5.html"){
|
||||
forbidClick: true,
|
||||
});
|
||||
|
||||
this.$axios.post('/platform/proposal/write/submitAgain', {
|
||||
return this.$axios.post('/platform/proposal/write/submitAgain', {
|
||||
info: JSON.stringify(this.formData),
|
||||
taskId: this.taskId
|
||||
}).then(res => {
|
||||
@@ -582,11 +924,13 @@ layout("/layouts/platform_h5.html"){
|
||||
});
|
||||
}).catch(() => {
|
||||
// 取消提交
|
||||
}).finally(() => {
|
||||
this.formLoading = false;
|
||||
this.loadingAction = '';
|
||||
});
|
||||
} catch (error) {
|
||||
// 表单验证失败
|
||||
}).catch((error) => {
|
||||
console.log('表单验证失败', error);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 根据当前教代会届次获取允许撰写的提案类型
|
||||
@@ -613,22 +957,20 @@ layout("/layouts/platform_h5.html"){
|
||||
});
|
||||
},
|
||||
|
||||
//教代会change
|
||||
async meetingChange(val) {
|
||||
// 切换届次后清空旧值，并加载新届次允许选择的提案类型
|
||||
// 切换教代会后清空跨届次数据，并按类型、代表团、提案方式、撰写时间的顺序重新加载。
|
||||
meetingChange(val) {
|
||||
this.$set(this.formData, "typeId", null);
|
||||
this.$set(this.formData, "typeName", "");
|
||||
this.typeOptions = [];
|
||||
this.listProposalType();
|
||||
this.formData.delegationId = null;
|
||||
this.formData.committeeId = null;
|
||||
this.formData.delegationName = '';
|
||||
this.formData.committeeName = '';
|
||||
await this.listDelegation();
|
||||
await this.searchMineDelegation();
|
||||
await this.listSource();
|
||||
// 检查是否在撰写时间内
|
||||
this.checkWriteTime();
|
||||
this.$set(this.formData, "delegationId", null);
|
||||
this.$set(this.formData, "committeeId", null);
|
||||
this.$set(this.formData, "delegationName", '');
|
||||
this.$set(this.formData, "committeeName", '');
|
||||
return this.listProposalType()
|
||||
.then(() => this.listDelegation())
|
||||
.then(() => this.searchMineDelegation())
|
||||
.then(() => this.listSource())
|
||||
.then(() => this.checkWriteTime());
|
||||
},
|
||||
|
||||
// 获取代表团
|
||||
@@ -642,7 +984,7 @@ layout("/layouts/platform_h5.html"){
|
||||
|
||||
// 建议承办单位
|
||||
listSuggestUnit() {
|
||||
this.$axios.post("/platform/proposal/common/listUnderTake").then((res) => {
|
||||
return this.$axios.post("/platform/proposal/common/listUnderTake").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.suggestUnitOptions = res.data
|
||||
}
|
||||
@@ -651,26 +993,26 @@ layout("/layouts/platform_h5.html"){
|
||||
|
||||
// 查询开启的教代会
|
||||
listOpenSession(isModify = false) {
|
||||
this.$axios.post("/platform/proposal/common/listOpenSession").then(async (res) => {
|
||||
return this.$axios.post("/platform/proposal/common/listOpenSession").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.sessionOptions = res.data;
|
||||
if (!isModify && this.sessionOptions && this.sessionOptions.length > 0) {
|
||||
this.$set(this.formData, "sessionId", this.sessionOptions[0].id);
|
||||
this.$set(this.formData, "sessionName", this.sessionOptions[0].fullName);
|
||||
this.listProposalType();
|
||||
await this.listDelegation();
|
||||
await this.listSource();
|
||||
// 获取代表团
|
||||
await this.searchMineDelegation();
|
||||
// 检查是否在撰写时间内
|
||||
this.checkWriteTime();
|
||||
} else {
|
||||
await this.listDelegation();
|
||||
await this.listSource();
|
||||
this.listProposalType().then(() => {
|
||||
this.echoPicker();
|
||||
});
|
||||
return this.listProposalType()
|
||||
.then(() => this.listDelegation())
|
||||
.then(() => this.listSource())
|
||||
.then(() => this.searchMineDelegation())
|
||||
.then(() => this.checkWriteTime());
|
||||
}
|
||||
// 没有开启的教代会时不继续请求依赖 sessionId 的接口。
|
||||
if (!this.formData.sessionId) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return this.listDelegation()
|
||||
.then(() => this.listSource())
|
||||
.then(() => this.listProposalType())
|
||||
.then(() => this.echoPicker());
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -700,7 +1042,7 @@ layout("/layouts/platform_h5.html"){
|
||||
|
||||
// 检查是否在撰写时间内
|
||||
checkWriteTime() {
|
||||
this.$axios.post("/platform/proposal/write/checkWriteTime", {sessionId: this.formData.sessionId}).then((res) => {
|
||||
return this.$axios.post("/platform/proposal/write/checkWriteTime", {sessionId: this.formData.sessionId}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
if (!res.data) {
|
||||
this.$toast("当前时间不在撰写时间段内");
|
||||
@@ -735,12 +1077,12 @@ layout("/layouts/platform_h5.html"){
|
||||
if (res.code === 0) {
|
||||
res.data.brief=removeHTMLTag(res.data.brief)
|
||||
res.data.measures=removeHTMLTag(res.data.measures)
|
||||
this.formData = res.data;
|
||||
this.$set(this, "formData", res.data);
|
||||
this.listOpenSession(true);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.noticeDialogVisible = true;
|
||||
this.setVisibleState("noticeDialogVisible", true);
|
||||
this.listOpenSession(false);
|
||||
|
||||
// 设置用户信息
|
||||
@@ -754,10 +1096,14 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.registerHistoryLayers();
|
||||
this.init();
|
||||
this.listSuggestUnit();
|
||||
this.getProposalConfig();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.h5HistoryLayerManager.unregister(this.historyLayerPageKey);
|
||||
},
|
||||
watch: {
|
||||
// 监听suggestUnitOptions变化，初始化过滤列表
|
||||
suggestUnitOptions: {
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
body { background: #f5f7fa; }
|
||||
.spread-detail-h5 { min-height: 100vh; color: #202124; background: #f5f7fa; }
|
||||
.spread-h5__detail { margin: 10px 12px 24px; padding: 18px 15px 24px; border-radius: 10px; background: #fff; }
|
||||
.spread-h5__detail-title { margin: 0; color: #202124; font-size: 20px; line-height: 29px; text-align: center; word-break: break-word; }
|
||||
.spread-h5__detail-meta { margin-top: 10px; padding-bottom: 14px; color: #9aa2af; font-size: 11px; line-height: 17px; text-align: center; border-bottom: 1px solid #edf1f6; }
|
||||
.spread-h5__detail-summary { margin: 15px 0 0; padding: 10px 12px; color: #697386; font-size: 14px; line-height: 22px; border-radius: 6px; background: #f7f9fc; }
|
||||
.spread-h5__detail-cover { width: 100%; max-height: 240px; margin: 16px 0 0; display: block; border-radius: 6px; object-fit: contain; }
|
||||
.spread-h5__slider { height: 220px; margin-top: 16px; overflow: hidden; border-radius: 6px; background: #eef2f7; }
|
||||
.spread-h5__slide { position: relative; height: 220px; }
|
||||
.spread-h5__slide img { width: 100%; height: 100%; display: block; object-fit: contain; }
|
||||
.spread-h5__slide-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; overflow: hidden; color: #fff; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; background: linear-gradient(to top, rgba(15,23,42,.72), transparent); box-sizing: border-box; }
|
||||
.spread-h5__detail-body { margin-top: 16px; overflow: hidden; color: #323233; font-size: 15px; line-height: 1.8; word-break: break-word; }
|
||||
.spread-h5__detail-body img, .spread-h5__detail-body video { max-width: 100% !important; height: auto !important; }
|
||||
.spread-h5__detail-body table { max-width: 100% !important; }
|
||||
.spread-h5__detail--skeleton .van-skeleton { padding: 0; }
|
||||
.spread-h5__detail-skeleton-cover { margin-top: 18px; }
|
||||
.spread-h5__detail-skeleton-cover .van-skeleton__row { height: 180px; border-radius: 6px; }
|
||||
.spread-h5__detail-skeleton-body { margin-top: 18px; }
|
||||
.spread-h5__detail-empty { padding: 80px 20px; color: #9aa2af; font-size: 14px; text-align: center; }
|
||||
</style>
|
||||
|
||||
<div id="app" class="spread-detail-h5" v-cloak>
|
||||
<van-nav-bar title="动态详情" left-arrow left-text="返回" fixed placeholder :z-index="20" @click-left="handleBack"></van-nav-bar>
|
||||
|
||||
<article v-if="detailLoading" class="spread-h5__detail spread-h5__detail--skeleton">
|
||||
<van-skeleton title :row="2"></van-skeleton>
|
||||
<van-skeleton class="spread-h5__detail-skeleton-cover" :row="1"></van-skeleton>
|
||||
<van-skeleton class="spread-h5__detail-skeleton-body" title :row="6"></van-skeleton>
|
||||
</article>
|
||||
|
||||
<article v-else-if="detail" class="spread-h5__detail">
|
||||
<h1 class="spread-h5__detail-title">{{detail.title}}</h1>
|
||||
<div class="spread-h5__detail-meta">
|
||||
{{formatDate(detail.publishedAt || detail.createdAt)}} {{detail.categoryName}}
|
||||
<van-icon name="eye-o"></van-icon> {{detail.viewCount || 0}}
|
||||
</div>
|
||||
<img v-if="getCoverUrl(detail.thumbUrl)" class="spread-h5__detail-cover" :src="getCoverUrl(detail.thumbUrl)" :alt="detail.title">
|
||||
<div v-if="detail.summary" class="spread-h5__detail-summary">{{detail.summary}}</div>
|
||||
<van-swipe v-if="detailSlides.length"
|
||||
class="spread-h5__slider"
|
||||
:autoplay="3000"
|
||||
:show-indicators="detailSlides.length > 1"
|
||||
indicator-color="#1989fa">
|
||||
<van-swipe-item v-for="(slide, index) in detailSlides" :key="slide.src + '-' + index">
|
||||
<div class="spread-h5__slide">
|
||||
<img :src="slide.src" :alt="slide.title || detail.title">
|
||||
<div v-if="slide.title" class="spread-h5__slide-caption">{{slide.title}}</div>
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
<div class="spread-h5__detail-body" v-html="detail.contentBody"></div>
|
||||
</article>
|
||||
|
||||
<div v-else class="spread-h5__detail-empty">动态不存在或已下架</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
apiBase: "/platform/h5/spread",
|
||||
detailLoading: true,
|
||||
detail: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
detailSlides() {
|
||||
return this.getSliderEntries(this.detail && this.detail.sliderImages)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadDetail() {
|
||||
const id = new URLSearchParams(window.location.search).get("id")
|
||||
if (!id) {
|
||||
this.detailLoading = false
|
||||
return
|
||||
}
|
||||
this.detailLoading = true
|
||||
Promise.all([
|
||||
this.$axios.post(this.apiBase + "/detailData", {id: id}),
|
||||
this.$axios.post(this.apiBase + "/addView", {id: id})
|
||||
]).then(values => {
|
||||
if (values[0].code === 0) {
|
||||
this.detail = values[0].data
|
||||
this.detail.viewCount = Number(this.detail.viewCount || 0) + 1
|
||||
}
|
||||
}).finally(() => {
|
||||
this.detailLoading = false
|
||||
})
|
||||
},
|
||||
handleBack() {
|
||||
const source = new URLSearchParams(window.location.search).get("from")
|
||||
this.$pjaxReplace(source === "home" ? "/platform/h5/home" : "/platform/h5/spread")
|
||||
},
|
||||
getCoverUrl(value) {
|
||||
if (!value) return ""
|
||||
let files = value
|
||||
if (typeof value === "string" && value.trim().startsWith("[")) {
|
||||
try {
|
||||
files = JSON.parse(value)
|
||||
} catch (e) {
|
||||
files = []
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(files)) files = String(files).split(",")
|
||||
const first = files[0]
|
||||
if (typeof first === "string") return first.trim()
|
||||
return first && (first.src || first.url || first.data || (first.response && first.response.data)) || ""
|
||||
},
|
||||
getSliderEntries(value) {
|
||||
if (!value) return []
|
||||
let items = value
|
||||
if (!Array.isArray(items)) {
|
||||
try {
|
||||
items = JSON.parse(value)
|
||||
} catch (e) {
|
||||
items = String(value).split(",").filter(Boolean)
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(items)) return []
|
||||
return items.map(item => {
|
||||
if (typeof item === "string") return {src: item.trim(), title: ""}
|
||||
return {
|
||||
src: item.src || item.url || item.data || (item.response && item.response.data) || "",
|
||||
title: item.title || item.description || ""
|
||||
}
|
||||
}).filter(item => item.src)
|
||||
},
|
||||
formatDate(value) {
|
||||
return value ? this.$moment(Number(value)).format("YYYY-MM-DD") : ""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,296 @@
|
||||
<!--#
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
body { background: #f5f7fa; }
|
||||
.spread-h5 { min-height: 100vh; color: #202124; background: #f5f7fa; }
|
||||
.spread-h5__toolbar { position: sticky; top: 46px; z-index: 15; background: #fff; box-shadow: 0 3px 10px rgba(31,72,122,.06); }
|
||||
.spread-h5__search { padding: 8px 12px 2px; background: #fff; }
|
||||
.spread-h5__search .van-search { padding: 0; }
|
||||
.spread-h5__categories { padding: 2px 12px 8px; background: #fff; }
|
||||
.spread-h5__tabs-nav { display: flex; align-items: center; border-bottom: 1px solid #edf1f6; }
|
||||
.spread-h5__tabs { height: 36px; padding: 0; display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #edf1f6; border-radius: 0; background: transparent; box-sizing: border-box; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
|
||||
.spread-h5__tabs-nav .spread-h5__tabs { min-width: 0; flex: 1; border-bottom: 0; }
|
||||
.spread-h5__tabs-arrow { width: 26px; height: 30px; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #8d98a8; font-size: 14px; line-height: 1; border: 0; background: transparent; }
|
||||
.spread-h5__tabs-arrow .van-icon { display: block; line-height: 1; }
|
||||
.spread-h5__tabs-arrow:active { color: #087af4; background: #f3f8ff; }
|
||||
.spread-h5__tabs::-webkit-scrollbar { display: none; }
|
||||
.spread-h5__tab { position: relative; min-width: 92px; height: 30px; padding: 0 8px; flex: 1 0 calc((100% - 8px) / 3); display: flex; align-items: center; justify-content: center; color: #7d8797; font-size: 13px; white-space: nowrap; border-radius: 6px; box-sizing: border-box; }
|
||||
.spread-h5__tab--active { color: #087af4; font-weight: 600; background: transparent; box-shadow: none; }
|
||||
.spread-h5__tabs:not(.spread-h5__tabs--secondary) .spread-h5__tab--active::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 26px; height: 2px; border-radius: 2px; background: #087af4; transform: translateX(-50%); }
|
||||
.spread-h5__filters { height: 42px; margin-top: 8px; display: flex; overflow: hidden; border-radius: 10px; box-sizing: border-box; }
|
||||
.spread-h5__filter-menu { min-width: 0; flex: 1; background: transparent; }
|
||||
.spread-h5__filter-menu .van-dropdown-menu__bar { height: 40px; background: transparent; box-shadow: none; }
|
||||
.spread-h5__filter-menu .van-dropdown-menu__item { position: relative; min-width: 0; }
|
||||
.spread-h5__filter-menu .van-dropdown-menu__title { max-width: 100%; padding: 0 16px 0 8px; color: #5f6978; font-size: 12px; line-height: 28px; box-sizing: border-box; }
|
||||
.spread-h5__filter-menu .van-dropdown-menu__title::after { right: 6px; border-color: transparent transparent #8d98a8 #8d98a8; }
|
||||
.spread-h5__filter-menu .van-dropdown-menu__title--active::after { border-color: transparent transparent currentColor currentColor; }
|
||||
.spread-h5__list { margin: 10px 12px 20px; padding: 0 12px; border-radius: 10px; background: #fff; }
|
||||
.spread-h5__item { min-height: 82px; padding: 11px 0; display: flex; align-items: center; box-sizing: border-box; }
|
||||
.spread-h5__item + .spread-h5__item { border-top: 1px solid #f0f2f5; }
|
||||
.spread-h5__cover { width: 96px; height: 60px; margin-right: 11px; flex-shrink: 0; border-radius: 5px; object-fit: cover; }
|
||||
.spread-h5__item-content { min-width: 0; flex: 1; }
|
||||
.spread-h5__item-title { overflow: hidden; color: #202124; font-size: 14px; line-height: 20px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.spread-h5__item-summary { margin-top: 4px; overflow: hidden; color: #7d8797; font-size: 11px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.spread-h5__item-meta { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; color: #9aa2af; font-size: 10px; line-height: 14px; }
|
||||
.spread-h5__views { display: inline-flex; align-items: center; }
|
||||
.spread-h5__views .van-icon { margin-right: 3px; }
|
||||
.spread-h5__skeleton-list { margin: 10px 12px 20px; padding: 0 12px; border-radius: 10px; background: #fff; }
|
||||
.spread-h5__skeleton-item { min-height: 82px; padding: 11px 0; box-sizing: border-box; }
|
||||
.spread-h5__skeleton-item + .spread-h5__skeleton-item { border-top: 1px solid #f0f2f5; }
|
||||
.spread-h5__skeleton-item .van-skeleton { padding: 0; }
|
||||
.spread-h5__skeleton-item .van-skeleton__avatar { width: 96px; height: 60px; margin-right: 11px; border-radius: 5px; }
|
||||
.spread-h5__loading { padding: 35px 0; text-align: center; }
|
||||
.spread-h5__finished { padding: 10px 0 18px; color: #b0b6c0; font-size: 11px; line-height: 16px; text-align: center; }
|
||||
.spread-h5__empty { min-height: 250px; padding: 28px 18px 36px; display: flex; align-items: center; justify-content: center; flex-direction: column; box-sizing: border-box; text-align: center; }
|
||||
.spread-h5__empty-image { display: block; width: 82%; max-width: 280px; height: auto; object-fit: contain; }
|
||||
.spread-h5__empty-title { margin-top: 8px; color: #50627a; font-size: 15px; line-height: 22px; font-weight: 500; }
|
||||
.spread-h5__empty-hint { margin-top: 5px; color: #9aa7b8; font-size: 12px; line-height: 18px; }
|
||||
</style>
|
||||
|
||||
<div id="app" class="spread-h5" v-cloak>
|
||||
<van-nav-bar title="工会动态" left-arrow left-text="返回" fixed placeholder :z-index="20" @click-left="handleBack"></van-nav-bar>
|
||||
|
||||
<template>
|
||||
<div class="spread-h5__toolbar">
|
||||
<div class="spread-h5__search">
|
||||
<van-search v-model.trim="keyword"
|
||||
shape="round"
|
||||
placeholder="搜索动态标题"
|
||||
@search="doSearch"
|
||||
@clear="doSearch"></van-search>
|
||||
</div>
|
||||
<div class="spread-h5__categories" v-if="categories.length">
|
||||
<div class="spread-h5__tabs-nav">
|
||||
<button type="button" class="spread-h5__tabs-arrow" @click="scrollTabs(-1)">
|
||||
<van-icon name="arrow-left"></van-icon>
|
||||
</button>
|
||||
<div ref="spreadTabs" class="spread-h5__tabs">
|
||||
<div class="spread-h5__tab"
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
:class="{'spread-h5__tab--active': parentId === category.id}"
|
||||
@click="selectParent(category)">{{category.name}}</div>
|
||||
</div>
|
||||
<button type="button" class="spread-h5__tabs-arrow" @click="scrollTabs(1)">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="spread-h5__filters">
|
||||
<van-dropdown-menu class="spread-h5__filter-menu" active-color="#087af4">
|
||||
<van-dropdown-item v-model="categoryId"
|
||||
:options="typeOptions"
|
||||
@change="handleFilterChange"></van-dropdown-item>
|
||||
<van-dropdown-item v-model="sortType"
|
||||
:options="sortOptions"
|
||||
@change="handleFilterChange"></van-dropdown-item>
|
||||
<van-dropdown-item v-model="publishDays"
|
||||
:options="publishTimeOptions"
|
||||
@change="handleFilterChange"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="listSkeletonLoading" class="spread-h5__skeleton-list">
|
||||
<div class="spread-h5__skeleton-item" v-for="index in 4" :key="'spread-list-skeleton-' + index">
|
||||
<van-skeleton title avatar :row="2"></van-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!listSkeletonLoading && pageData.list.length" class="spread-h5__list">
|
||||
<div class="spread-h5__item" v-for="item in pageData.list" :key="item.id" @click="enterDetail(item)">
|
||||
<img v-if="getCoverUrl(item.thumbUrl)" class="spread-h5__cover" :src="getCoverUrl(item.thumbUrl)" :alt="item.title">
|
||||
<div class="spread-h5__item-content">
|
||||
<div class="spread-h5__item-title">{{item.title}}</div>
|
||||
<div v-if="item.summary || item.subTitle" class="spread-h5__item-summary">{{item.summary || item.subTitle}}</div>
|
||||
<div class="spread-h5__item-meta">
|
||||
<span>{{formatDate(item.publishedAt || item.createdAt)}}</span>
|
||||
<span class="spread-h5__views"><van-icon name="eye-o"></van-icon>{{item.viewCount || 0}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading && !listSkeletonLoading" class="spread-h5__loading"><van-loading size="22px">加载中...</van-loading></div>
|
||||
<div v-if="!loading && finished && pageData.list.length" class="spread-h5__finished">没有更多了</div>
|
||||
<div v-if="!loading && finished && !pageData.list.length" class="spread-h5__empty">
|
||||
<img class="spread-h5__empty-image"
|
||||
src="/assets/mobile/img/home/v4/union-news-empty-v4.png"
|
||||
alt="暂无工会动态">
|
||||
<div class="spread-h5__empty-title">暂无工会动态</div>
|
||||
<div class="spread-h5__empty-hint">当前筛选条件下暂无可展示的动态</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
apiBase: "/platform/h5/spread",
|
||||
categories: [],
|
||||
parentId: "",
|
||||
categoryId: "",
|
||||
keyword: "",
|
||||
sortType: "comprehensive",
|
||||
publishDays: 0,
|
||||
sortOptions: [
|
||||
{text: "综合排序", value: "comprehensive"},
|
||||
{text: "最新发布", value: "latest"},
|
||||
{text: "浏览最多", value: "views"}
|
||||
],
|
||||
publishTimeOptions: [
|
||||
{text: "发布时间", value: 0},
|
||||
{text: "近7天", value: 7},
|
||||
{text: "近30天", value: 30},
|
||||
{text: "近半年", value: 180},
|
||||
{text: "近一年", value: 365}
|
||||
],
|
||||
loading: false,
|
||||
listSkeletonLoading: true,
|
||||
finished: false,
|
||||
scrollContainer: null,
|
||||
requestSeq: 0,
|
||||
pageData: {pageNumber: 1, pageSize: 10, totalCount: 0, list: []}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentChildren() {
|
||||
const parent = this.categories.find(item => item.id === this.parentId)
|
||||
return parent && parent.children ? parent.children : []
|
||||
},
|
||||
typeOptions() {
|
||||
return [{text: "全部类型", value: this.parentId}].concat(
|
||||
this.currentChildren.map(item => ({text: item.name, value: item.id}))
|
||||
)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadCategories() {
|
||||
return this.$axios.post(this.apiBase + "/categoryTree").then(resp => {
|
||||
if (resp.code !== 0) return
|
||||
this.categories = resp.data || []
|
||||
const firstParent = this.categories[0]
|
||||
if (!firstParent) return
|
||||
this.parentId = firstParent.id
|
||||
this.categoryId = firstParent.id
|
||||
})
|
||||
},
|
||||
loadPage() {
|
||||
if (!this.categoryId) {
|
||||
this.listSkeletonLoading = false
|
||||
return
|
||||
}
|
||||
if (this.loading || this.finished) {
|
||||
return
|
||||
}
|
||||
const showSkeleton = this.pageData.pageNumber === 1 && !this.pageData.list.length
|
||||
if (showSkeleton) this.listSkeletonLoading = true
|
||||
this.loading = true
|
||||
const requestSeq = ++this.requestSeq
|
||||
this.$axios.post(this.apiBase + "/pageData", {
|
||||
categoryId: this.categoryId,
|
||||
title: this.keyword,
|
||||
sortType: this.sortType,
|
||||
publishDays: this.publishDays,
|
||||
pageNumber: this.pageData.pageNumber,
|
||||
pageSize: this.pageData.pageSize
|
||||
}).then(resp => {
|
||||
if (requestSeq !== this.requestSeq) return
|
||||
if (resp.code === 0) {
|
||||
const data = resp.data || {}
|
||||
const rows = data.list || []
|
||||
this.pageData.list = this.pageData.list.concat(rows)
|
||||
this.pageData.totalCount = data.totalCount || 0
|
||||
this.pageData.pageNumber += 1
|
||||
this.finished = this.pageData.list.length >= this.pageData.totalCount || rows.length < this.pageData.pageSize
|
||||
} else {
|
||||
this.finished = true
|
||||
}
|
||||
}).finally(() => {
|
||||
if (requestSeq === this.requestSeq) {
|
||||
this.loading = false
|
||||
if (showSkeleton) this.listSkeletonLoading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetPage() {
|
||||
this.requestSeq += 1
|
||||
this.loading = false
|
||||
this.listSkeletonLoading = true
|
||||
this.finished = false
|
||||
this.pageData = {pageNumber: 1, pageSize: 10, totalCount: 0, list: []}
|
||||
this.$nextTick(() => this.loadPage())
|
||||
},
|
||||
handlePageScroll() {
|
||||
if (!this.scrollContainer || this.loading || this.finished) return
|
||||
const remaining = this.scrollContainer.scrollHeight
|
||||
- this.scrollContainer.scrollTop
|
||||
- this.scrollContainer.clientHeight
|
||||
if (remaining <= 80) this.loadPage()
|
||||
},
|
||||
doSearch() {
|
||||
this.resetPage()
|
||||
},
|
||||
scrollTabs(direction) {
|
||||
const tabs = this.$refs.spreadTabs
|
||||
if (!tabs) return
|
||||
tabs.scrollTo({
|
||||
left: tabs.scrollLeft + direction * tabs.clientWidth * 0.75,
|
||||
behavior: "smooth"
|
||||
})
|
||||
},
|
||||
selectParent(category) {
|
||||
if (this.parentId === category.id) return
|
||||
this.parentId = category.id
|
||||
this.categoryId = category.id
|
||||
this.resetPage()
|
||||
},
|
||||
handleFilterChange() {
|
||||
this.resetPage()
|
||||
},
|
||||
enterDetail(item) {
|
||||
this.$pjaxReplace(this.apiBase + "/detail?id=" + encodeURIComponent(item.id) + "&from=list")
|
||||
},
|
||||
handleBack() {
|
||||
this.$pjaxReplace("/platform/h5/home")
|
||||
},
|
||||
getCoverUrl(value) {
|
||||
if (!value) return ""
|
||||
let files = value
|
||||
if (typeof value === "string" && value.trim().startsWith("[")) {
|
||||
try {
|
||||
files = JSON.parse(value)
|
||||
} catch (e) {
|
||||
files = []
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(files)) files = String(files).split(",")
|
||||
const first = files[0]
|
||||
if (typeof first === "string") return first.trim()
|
||||
return first && (first.src || first.url || first.data || (first.response && first.response.data)) || ""
|
||||
},
|
||||
formatDate(value) {
|
||||
return value ? this.$moment(Number(value)).format("YYYY-MM-DD") : ""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCategories().then(() => this.resetPage())
|
||||
},
|
||||
mounted() {
|
||||
this.scrollContainer = document.querySelector("body > .main-page .page-wrapper")
|
||||
if (this.scrollContainer) {
|
||||
this.scrollContainer.addEventListener("scroll", this.handlePageScroll, {passive: true})
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.scrollContainer) {
|
||||
this.scrollContainer.removeEventListener("scroll", this.handlePageScroll)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
+38
-2
@@ -1,6 +1,29 @@
|
||||
const MOBILE_MEMBER_INFO = {
|
||||
template: /*language=HTML*/ `
|
||||
<div class="detail-container">
|
||||
<div v-if="profileMode" class="mine-profile-details">
|
||||
<section class="mine-detail-card">
|
||||
<h2>基本信息</h2>
|
||||
<div class="mine-detail-row"><span>姓名</span><strong>{{ viewData.username || '-' }}</strong></div>
|
||||
<div class="mine-detail-row"><span>性别</span><strong>{{ viewData.sex || '-' }}</strong></div>
|
||||
<div class="mine-detail-row"><span>民族</span><strong>{{ viewData.nation || '-' }}</strong></div>
|
||||
<div class="mine-detail-row"><span>出生日期</span><strong>{{ formatBirthday(viewData.birthday) }}</strong></div>
|
||||
<div class="mine-detail-row"><span>政治面貌</span><strong>{{ viewData.political || '-' }}</strong></div>
|
||||
</section>
|
||||
|
||||
<section class="mine-detail-card">
|
||||
<h2>组织信息</h2>
|
||||
<div class="mine-detail-row"><span>工作单位</span><strong>{{ viewData.unitName || '-' }}</strong></div>
|
||||
<div class="mine-detail-row"><span>所属工会</span><strong>{{ viewData.unionName || '-' }}</strong></div>
|
||||
<div class="mine-detail-row"><span>人员类型</span><strong>{{ viewData.personType || '-' }}</strong></div>
|
||||
</section>
|
||||
|
||||
<section class="mine-detail-card">
|
||||
<h2>联系方式</h2>
|
||||
<div class="mine-detail-row"><span>联系电话</span><strong>{{ maskMobile(viewData.mobile) }}</strong></div>
|
||||
<div class="mine-detail-row"><span>电子邮箱</span><strong>{{ viewData.email || '-' }}</strong></div>
|
||||
</section>
|
||||
</div>
|
||||
<div v-else class="detail-container">
|
||||
<van-cell-group title="基本信息">
|
||||
<van-cell title="工号">{{ viewData.loginname }}</van-cell>
|
||||
<van-cell title="姓名">{{ viewData.username }}</van-cell>
|
||||
@@ -61,7 +84,8 @@
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
userId: { type: String, required: true }
|
||||
userId: { type: String, required: true },
|
||||
profileMode: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -77,6 +101,18 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatBirthday(birthday) {
|
||||
if (!birthday) {
|
||||
return "-"
|
||||
}
|
||||
return this.$moment(birthday).format("YYYY-MM-DD")
|
||||
},
|
||||
maskMobile(mobile) {
|
||||
if (!mobile) {
|
||||
return "-"
|
||||
}
|
||||
return mobile.replace(/^(\d{3})\d+(\d{4})$/, "$1****$2")
|
||||
},
|
||||
findUserInfoByUserId() {
|
||||
if (!this.userId) {
|
||||
return
|
||||
|
||||
@@ -6,62 +6,83 @@ const apps = {
|
||||
<van-sticky offset-top="46px">
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索应用"
|
||||
show-action
|
||||
placeholder="搜索应用或服务名称"
|
||||
@search="onSearch"
|
||||
@cancel="onCancel"
|
||||
></van-search>
|
||||
</van-sticky>
|
||||
|
||||
<div class="apps-guide-banner">
|
||||
<div class="apps-guide-copy">
|
||||
<div class="apps-guide-title">工会服务，一站直达</div>
|
||||
<div class="apps-guide-desc">常用应用与业务办理便捷入口</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-tree-select">
|
||||
<!-- 左侧导航 -->
|
||||
<div class="tree-nav">
|
||||
<div
|
||||
v-for="(category, index) in allCategories"
|
||||
:key="category.id"
|
||||
:class="['nav-item', { active: activeTab === index }]"
|
||||
@click="onClickNav(index)"
|
||||
>
|
||||
<div class="nav-icon">
|
||||
<!--<i v-if="category.icon" :class="category.icon"></i>
|
||||
<i v-else class="fa fa-book"></i>-->
|
||||
<img v-if="category.picIcon" :src="category.picIcon" :alt="category.name || ''" style="width: 18px"/>
|
||||
<i v-else :class="category.icon || 'fa fa-th-large'"></i>
|
||||
<div v-if="categoryLoading" class="tree-nav-skeleton">
|
||||
<div v-for="index in 9" :key="'nav-skeleton-' + index" class="tree-nav-skeleton__item">
|
||||
<div class="tree-nav-skeleton__line app-skeleton__block"></div>
|
||||
</div>
|
||||
<div class="nav-text">{{ category.name }}</div>
|
||||
<div class="nav-indicator" v-if="activeTab === index"></div>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="(category, index) in allCategories"
|
||||
:key="category.id"
|
||||
:class="['nav-item', { active: activeTab === index }]"
|
||||
@click="onClickNav(index)"
|
||||
>
|
||||
<div class="nav-text">{{ category.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容 -->
|
||||
<div class="tree-content">
|
||||
<div v-if="loading" class="module-loading">
|
||||
<van-loading size="24px">加载中...</van-loading>
|
||||
<div class="tree-content-title">
|
||||
{{ allCategories[activeTab] ? allCategories[activeTab].name : '全部应用' }}
|
||||
</div>
|
||||
<div v-if="loading" class="app-skeleton">
|
||||
<div v-for="index in 9" :key="'app-skeleton-' + index" class="app-skeleton__item">
|
||||
<div class="app-skeleton__icon app-skeleton__block"></div>
|
||||
<div class="app-skeleton__info">
|
||||
<div class="app-skeleton__title app-skeleton__block"></div>
|
||||
<div class="app-skeleton__desc app-skeleton__block"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="['app-grid', { 'app-grid-single': applications.length === 1 }]"
|
||||
<div class="app-grid"
|
||||
v-else-if="isFixedCategory && applications.length > 0">
|
||||
<div v-for="app in applications"
|
||||
:key="app.id"
|
||||
class="app-grid-item"
|
||||
:class="{ 'is-favorite': app.isFavorite }"
|
||||
@click="openApp(app)"
|
||||
@touchstart="onTouchStart(app)"
|
||||
@click="onAppClick(app)"
|
||||
@touchstart.passive="onTouchStart(app, $event)"
|
||||
@touchmove.passive="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
@touchmove="onTouchMove">
|
||||
@touchcancel="onTouchCancel">
|
||||
<div class="app-grid-icon">
|
||||
<van-icon v-if="app.picIcon" :name="app.picIcon" size="45"></van-icon>
|
||||
<img v-if="app.picIcon" :src="app.picIcon" :alt="app.name || ''"/>
|
||||
<van-icon v-else-if="app.icon" :name="app.icon" size="28"></van-icon>
|
||||
<van-icon v-else name="apps-o" size="28"></van-icon>
|
||||
</div>
|
||||
<div class="app-grid-name">{{ app.name }}</div>
|
||||
<div class="app-grid-info">
|
||||
<div class="app-grid-name">{{ app.name }}</div>
|
||||
<div v-if="app.aliasName || app.note" class="app-grid-desc">{{ app.aliasName || app.note }}</div>
|
||||
</div>
|
||||
<van-icon v-if="app.isFavorite" name="star" class="app-grid-favorite"></van-icon>
|
||||
<van-icon name="arrow" class="app-grid-arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!isFixedCategory && moduleSections.length > 0" class="module-sections">
|
||||
<div v-for="section in moduleSections" :key="section.id" class="module-section">
|
||||
<div class="module-title">{{ section.name }}</div>
|
||||
<div :class="['module-grid', { 'module-grid-single': section.menus.length === 1 }]">
|
||||
<div class="module-grid">
|
||||
<div
|
||||
v-for="menu in section.menus"
|
||||
:key="menu.id"
|
||||
@@ -72,20 +93,30 @@ const apps = {
|
||||
<div v-else class="module-feature-icon">
|
||||
<van-icon :name="menu.icon || 'apps-o'" size="24"></van-icon>
|
||||
</div>
|
||||
<div class="module-feature-name">{{ menu.name }}</div>
|
||||
<div class="module-feature-info">
|
||||
<div class="module-feature-name">{{ menu.name }}</div>
|
||||
<div v-if="menu.aliasName || menu.note" class="module-feature-desc">{{ menu.aliasName || menu.note }}</div>
|
||||
</div>
|
||||
<van-icon name="arrow" class="module-feature-arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<van-empty v-else description="暂无应用"></van-empty>
|
||||
<div v-else class="app-empty">
|
||||
<img class="app-empty__image"
|
||||
src="/assets/mobile/img/home/v4/app-center-empty-v4.png"
|
||||
alt="暂无应用">
|
||||
<div class="app-empty__title">暂无应用</div>
|
||||
<div class="app-empty__hint">当前分类下暂时没有可用应用</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 应用菜单弹框 -->
|
||||
<van-popup v-model="showMenuPopup" position="bottom" :style="{ width: '100%', maxHeight: '60%' }" round>
|
||||
<van-popup v-model="showMenuPopup" position="bottom" :style="{ width: '100%', height: '62%' }" round>
|
||||
<div class="menu-popup">
|
||||
<div class="popup-header">
|
||||
<div class="popup-title">{{ currentApp.name }}</div>
|
||||
@@ -98,12 +129,17 @@ const apps = {
|
||||
class="grid-item"
|
||||
@click="navigateToMenu(menu)"
|
||||
>
|
||||
<img v-if="menu.picIcon" :src="menu.picIcon" :alt="menu.name || ''" style="width: 48px" class="grid-img"/>
|
||||
<div v-if="menu.picIcon" class="grid-img-wrap">
|
||||
<img :src="menu.picIcon" :alt="menu.name || ''" class="grid-img"/>
|
||||
</div>
|
||||
<div v-else class="grid-icon">
|
||||
<van-icon :name="menu.icon || 'apps-o'" size="24"></van-icon>
|
||||
</div>
|
||||
<div class="grid-name">{{ menu.name }}</div>
|
||||
<div class="grid-desc" v-if="menu.aliasName">{{ menu.aliasName }}</div>
|
||||
<div class="grid-info">
|
||||
<div class="grid-name">{{ menu.name }}</div>
|
||||
<div class="grid-desc" v-if="menu.aliasName || menu.note">{{ menu.aliasName || menu.note }}</div>
|
||||
</div>
|
||||
<van-icon name="arrow" class="grid-arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -129,6 +165,7 @@ const apps = {
|
||||
searchKeyword: "",
|
||||
// 列表相关
|
||||
loading: true,
|
||||
categoryLoading: true,
|
||||
// 弹框相关
|
||||
showMenuPopup: false,
|
||||
currentApp: {},
|
||||
@@ -137,6 +174,16 @@ const apps = {
|
||||
|
||||
touchTimer: null,
|
||||
isTouchMoved: false,
|
||||
isLongPressTriggered: false,
|
||||
touchStartX: 0,
|
||||
touchStartY: 0,
|
||||
appsStateCacheKey: "zhgh:h5:apps:center-state",
|
||||
cachedCategoryId: "all",
|
||||
cachedNavScrollTop: 0,
|
||||
cachedContentScrollTop: 0,
|
||||
cachedMenuScrollTop: 0,
|
||||
cachedPopupVisible: false,
|
||||
shouldRestoreAppsState: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -153,19 +200,96 @@ const apps = {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载时获取分类和应用数据
|
||||
this.loadCategories()
|
||||
this.loadApps()
|
||||
// 动态分类加载完成后再恢复分类，避免把缓存的动态分类误判为“全部应用”
|
||||
this.restoreAppsState()
|
||||
this.loadCategories().finally(() => {
|
||||
this.restoreActiveCategory()
|
||||
this.loadApps()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 缓存分类、搜索、左右滚动位置及子菜单弹层，供业务页面返回时恢复
|
||||
cacheAppsState() {
|
||||
const nav = this.$el && this.$el.querySelector(".tree-nav")
|
||||
const content = this.$el && this.$el.querySelector(".tree-content")
|
||||
const menu = (this.$el && this.$el.querySelector(".menu-grid")) || document.querySelector(".menu-grid")
|
||||
const state = {
|
||||
categoryId: this.currentCategoryId,
|
||||
searchKeyword: this.searchKeyword,
|
||||
navScrollTop: nav ? nav.scrollTop : 0,
|
||||
contentScrollTop: content ? content.scrollTop : 0,
|
||||
menuScrollTop: menu ? menu.scrollTop : 0,
|
||||
popupVisible: this.showMenuPopup,
|
||||
currentApp: this.currentApp,
|
||||
currentMenus: this.currentMenus
|
||||
}
|
||||
try {
|
||||
sessionStorage.setItem(this.appsStateCacheKey, JSON.stringify(state))
|
||||
} catch (e) {
|
||||
console.warn("缓存应用中心状态失败:", e)
|
||||
}
|
||||
},
|
||||
|
||||
restoreAppsState() {
|
||||
try {
|
||||
const state = JSON.parse(sessionStorage.getItem(this.appsStateCacheKey) || "null")
|
||||
if (!state) return
|
||||
this.cachedCategoryId = state.categoryId || "all"
|
||||
this.searchKeyword = state.searchKeyword || ""
|
||||
this.cachedNavScrollTop = Number(state.navScrollTop) || 0
|
||||
this.cachedContentScrollTop = Number(state.contentScrollTop) || 0
|
||||
this.cachedMenuScrollTop = Number(state.menuScrollTop) || 0
|
||||
this.cachedPopupVisible = !!state.popupVisible
|
||||
this.currentApp = state.currentApp || {}
|
||||
this.currentMenus = state.currentMenus || []
|
||||
this.shouldRestoreAppsState = true
|
||||
} catch (e) {
|
||||
sessionStorage.removeItem(this.appsStateCacheKey)
|
||||
}
|
||||
},
|
||||
|
||||
restoreActiveCategory() {
|
||||
const index = this.allCategories.findIndex(item => String(item.id) === String(this.cachedCategoryId))
|
||||
this.activeTab = index >= 0 ? index : 0
|
||||
},
|
||||
|
||||
restoreScrollPosition() {
|
||||
if (!this.shouldRestoreAppsState) return
|
||||
this.$nextTick(() => {
|
||||
const nav = this.$el && this.$el.querySelector(".tree-nav")
|
||||
const content = this.$el && this.$el.querySelector(".tree-content")
|
||||
if (nav) nav.scrollTop = this.cachedNavScrollTop
|
||||
if (content) content.scrollTop = this.cachedContentScrollTop
|
||||
this.showMenuPopup = this.cachedPopupVisible && this.currentMenus.length > 0
|
||||
this.$nextTick(() => {
|
||||
const menu = (this.$el && this.$el.querySelector(".menu-grid")) || document.querySelector(".menu-grid")
|
||||
if (menu) menu.scrollTop = this.cachedMenuScrollTop
|
||||
})
|
||||
this.shouldRestoreAppsState = false
|
||||
})
|
||||
},
|
||||
|
||||
resetContentScroll() {
|
||||
this.shouldRestoreAppsState = false
|
||||
this.cachedPopupVisible = false
|
||||
this.showMenuPopup = false
|
||||
this.$nextTick(() => {
|
||||
const content = this.$el && this.$el.querySelector(".tree-content")
|
||||
if (content) content.scrollTop = 0
|
||||
})
|
||||
},
|
||||
|
||||
// 加载分类数据
|
||||
loadCategories() {
|
||||
this.$axios.post("/platform/v4/apps/categories", {platform: "H5"}).then((res) => {
|
||||
this.categoryLoading = true
|
||||
return this.$axios.post("/platform/v4/apps/categories", {platform: "H5"}).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.dynamicCategories = res.data || []
|
||||
} else {
|
||||
console.error("获取应用分类失败:", res.msg)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.categoryLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
@@ -247,6 +371,7 @@ const apps = {
|
||||
if (this.isFixedCategory) {
|
||||
this.moduleSections = []
|
||||
this.loading = false
|
||||
this.restoreScrollPosition()
|
||||
return
|
||||
}
|
||||
this.loadModuleSections(this.applications, requestSeq)
|
||||
@@ -258,6 +383,7 @@ const apps = {
|
||||
if (!list.length) {
|
||||
this.moduleSections = []
|
||||
this.loading = false
|
||||
this.restoreScrollPosition()
|
||||
return
|
||||
}
|
||||
Promise.all(list.map(app => {
|
||||
@@ -281,6 +407,7 @@ const apps = {
|
||||
if (requestSeq !== this.requestSeq) return
|
||||
this.moduleSections = sections.filter(section => section.menus.length > 0)
|
||||
this.loading = false
|
||||
this.restoreScrollPosition()
|
||||
})
|
||||
},
|
||||
|
||||
@@ -336,30 +463,63 @@ const apps = {
|
||||
})
|
||||
},
|
||||
|
||||
// 长按开始
|
||||
onTouchStart(app) {
|
||||
// 记录起始坐标，只有手指保持静止时才允许触发长按收藏
|
||||
onTouchStart(app, event) {
|
||||
this.clearTouchTimer()
|
||||
this.isTouchMoved = false
|
||||
this.isLongPressTriggered = false
|
||||
const touch = event.touches && event.touches[0]
|
||||
this.touchStartX = touch ? touch.clientX : 0
|
||||
this.touchStartY = touch ? touch.clientY : 0
|
||||
this.touchTimer = setTimeout(() => {
|
||||
this.touchTimer = null
|
||||
this.isLongPressTriggered = true
|
||||
this.toggleFavorite(app.id)
|
||||
}, 800) // 长按 800ms 触发
|
||||
},
|
||||
|
||||
// 触摸移动（判断是否滑动，避免误触长按）
|
||||
onTouchMove() {
|
||||
this.isTouchMoved = true
|
||||
// 超过移动阈值即视为滚动，立即取消长按，避免列表重绘打断手势
|
||||
onTouchMove(event) {
|
||||
const touch = event.touches && event.touches[0]
|
||||
if (!touch) return
|
||||
const moveX = Math.abs(touch.clientX - this.touchStartX)
|
||||
const moveY = Math.abs(touch.clientY - this.touchStartY)
|
||||
if (moveX > 8 || moveY > 8) {
|
||||
this.isTouchMoved = true
|
||||
this.clearTouchTimer()
|
||||
}
|
||||
},
|
||||
|
||||
// 触摸结束（清除计时器）
|
||||
// 触摸结束或被系统中断时统一清理长按状态
|
||||
onTouchEnd() {
|
||||
if (this.touchTimer) {
|
||||
clearTimeout(this.touchTimer)
|
||||
this.touchTimer = null
|
||||
this.clearTouchTimer()
|
||||
},
|
||||
|
||||
onTouchCancel() {
|
||||
this.isTouchMoved = true
|
||||
this.clearTouchTimer()
|
||||
},
|
||||
|
||||
clearTouchTimer() {
|
||||
if (!this.touchTimer) return
|
||||
clearTimeout(this.touchTimer)
|
||||
this.touchTimer = null
|
||||
},
|
||||
|
||||
// 滑动或长按结束后不再执行合成 click，防止误开应用或弹框
|
||||
onAppClick(app) {
|
||||
if (this.isTouchMoved || this.isLongPressTriggered) {
|
||||
this.isTouchMoved = false
|
||||
this.isLongPressTriggered = false
|
||||
return
|
||||
}
|
||||
this.openApp(app)
|
||||
},
|
||||
|
||||
|
||||
// 搜索
|
||||
onSearch() {
|
||||
this.resetContentScroll()
|
||||
this.applications = []
|
||||
this.moduleSections = []
|
||||
this.loadApps()
|
||||
@@ -374,6 +534,7 @@ const apps = {
|
||||
// 切换标签页 - TreeSelect导航点击事件
|
||||
onClickNav(index) {
|
||||
this.activeTab = index
|
||||
this.resetContentScroll()
|
||||
this.applications = []
|
||||
this.moduleSections = []
|
||||
this.loadApps()
|
||||
@@ -391,6 +552,7 @@ const apps = {
|
||||
// 显示应用菜单弹框
|
||||
showAppMenus(app, menus) {
|
||||
if(app.href && menus.length === 0){
|
||||
this.cacheAppsState()
|
||||
this.$pjaxReplace(app.href)
|
||||
return;
|
||||
}
|
||||
@@ -410,6 +572,7 @@ const apps = {
|
||||
// 关闭弹框
|
||||
// this.showMenuPopup = false
|
||||
if (menu.href) {
|
||||
this.cacheAppsState()
|
||||
if(menu.href.startsWith('http://') || menu.href.startsWith('https://')){
|
||||
window.open(menu.href, '_blank')
|
||||
}else{
|
||||
@@ -422,16 +585,74 @@ const apps = {
|
||||
},
|
||||
// 初始加载消除长按收藏
|
||||
beforeDestroy() {
|
||||
if (this.touchTimer) {
|
||||
clearTimeout(this.touchTimer)
|
||||
}
|
||||
this.cacheAppsState()
|
||||
this.clearTouchTimer()
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.apps-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 50px);
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.apps-container .van-search {
|
||||
padding: 8px 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.apps-container .van-search__content {
|
||||
border-radius: 18px;
|
||||
background: #f3f5f8;
|
||||
}
|
||||
|
||||
.apps-guide-banner {
|
||||
position: relative;
|
||||
flex: 0 0 132px;
|
||||
margin: 0 12px 10px;
|
||||
border-radius: 9px;
|
||||
overflow: hidden;
|
||||
background: #168cff url('/assets/mobile/img/home/v4/apps-guide-banner.png') right top / cover no-repeat;
|
||||
}
|
||||
|
||||
.apps-guide-copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 58%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 0 0 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apps-guide-title {
|
||||
font-size: 20px;
|
||||
line-height: 1.35;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.apps-guide-desc {
|
||||
margin-top: 7px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
opacity: 0.94;
|
||||
}
|
||||
|
||||
.tree-content-title {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 38px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 16px;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
color: #1677ff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 自定义树形选择组件样式 */
|
||||
@@ -439,7 +660,6 @@ const apps = {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
height: calc(100vh - 150px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -450,20 +670,33 @@ const apps = {
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.tree-nav::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
.tree-nav-skeleton__item {
|
||||
min-height: 54px;
|
||||
padding: 20px 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tree-nav-skeleton__line {
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
padding: 12px 8px;
|
||||
min-height: 54px;
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -487,30 +720,17 @@ const apps = {
|
||||
background: #1989fa;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
word-break: break-all;
|
||||
line-height: 1.35;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.nav-indicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid #1989fa;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
.nav-item.active .nav-text {
|
||||
color: #1677ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tree-content {
|
||||
@@ -521,66 +741,144 @@ const apps = {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.module-loading {
|
||||
min-height: 180px;
|
||||
.app-skeleton {
|
||||
min-height: calc(100% - 38px);
|
||||
padding: 0 12px 80px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.app-skeleton__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #8a94a6;
|
||||
min-height: 68px;
|
||||
padding: 9px 2px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #edf1f5;
|
||||
}
|
||||
|
||||
.app-skeleton__block {
|
||||
background: linear-gradient(90deg, #f1f3f6 25%, #fafbfc 37%, #f1f3f6 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: app-skeleton-loading 1.4s ease infinite;
|
||||
}
|
||||
|
||||
.app-skeleton__icon {
|
||||
flex: 0 0 45px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.app-skeleton__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-skeleton__title {
|
||||
width: 54%;
|
||||
height: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.app-skeleton__desc {
|
||||
width: 78%;
|
||||
height: 10px;
|
||||
margin-top: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.app-skeleton__arrow {
|
||||
flex: 0 0 7px;
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin-left: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes app-skeleton-loading {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.app-empty {
|
||||
min-height: 280px;
|
||||
padding: 28px 12px 80px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-empty__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.app-empty__title {
|
||||
margin-top: -6px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.app-empty__hint {
|
||||
margin-top: 6px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.module-sections {
|
||||
padding: 12px 12px 18px;
|
||||
padding: 0 12px 18px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.module-section {
|
||||
padding: 0 0 18px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.module-section + .module-section {
|
||||
border-top: 1px solid #f1f3f6;
|
||||
padding-top: 14px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.module-title {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 12px 0 8px;
|
||||
color: #202733;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.module-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: #1989fa;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.module-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px 8px;
|
||||
}
|
||||
|
||||
.module-grid-single {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
display: block;
|
||||
}
|
||||
|
||||
.module-feature {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 8px 2px;
|
||||
border-radius: 8px;
|
||||
min-height: 68px;
|
||||
padding: 9px 2px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #edf1f5;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -589,67 +887,73 @@ const apps = {
|
||||
}
|
||||
|
||||
.module-feature-img {
|
||||
flex: 0 0 42px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.module-feature-icon {
|
||||
flex: 0 0 42px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 6px;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #2f8af5 0%, #49c3dc 100%);
|
||||
margin-right: 10px;
|
||||
color: #168cff;
|
||||
background: #eef6ff;
|
||||
}
|
||||
|
||||
.module-feature-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.module-feature-name {
|
||||
width: 100%;
|
||||
color: #323233;
|
||||
font-size: 13px;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
color: #172033;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.module-feature-desc {
|
||||
margin-top: 3px;
|
||||
color: #8a94a6;
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.module-feature-arrow,
|
||||
.app-grid-arrow {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 8px;
|
||||
color: #9eb0c8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.app-grid {
|
||||
display: grid;
|
||||
/* 改为自适应列数：每格最小 80px，自动换行 */
|
||||
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
|
||||
|
||||
justify-items: center; /* 子项内容居中（图标和文字） */
|
||||
justify-content: start; /* 整体网格靠左对齐，避免居中 */
|
||||
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
display: block;
|
||||
padding: 0 12px 80px;
|
||||
background: #fff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.app-grid-single {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.app-grid-single .app-grid-item {
|
||||
max-width: 80px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.app-grid-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 4px;
|
||||
border-radius: 8px;
|
||||
min-height: 68px;
|
||||
padding: 9px 2px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #edf1f5;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -665,27 +969,49 @@ const apps = {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 6px;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
/*border: 2px solid transparent;*/
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.app-grid-icon img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.app-grid-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-grid-name {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #323233;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
color: #172033;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-grid-item.is-favorite .app-grid-icon,
|
||||
.app-grid-icon.is-favorite {
|
||||
border-color: #ff9800;
|
||||
box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
|
||||
.app-grid-desc {
|
||||
margin-top: 3px;
|
||||
color: #8a94a6;
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-grid-favorite {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 8px;
|
||||
color: #ffb020;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
@@ -722,15 +1048,17 @@ const apps = {
|
||||
/deep/ .menu-grid {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
display: block;
|
||||
padding: 0 16px 12px;
|
||||
}
|
||||
|
||||
/deep/ .grid-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 12px;
|
||||
min-height: 70px;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #edf1f5;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@@ -738,7 +1066,6 @@ const apps = {
|
||||
}
|
||||
|
||||
/deep/ .grid-item:active {
|
||||
transform: scale(0.95);
|
||||
background: #f2f3f5;
|
||||
}
|
||||
|
||||
@@ -750,28 +1077,40 @@ const apps = {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
margin-right: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .grid-img-wrap {
|
||||
flex: 0 0 56px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/deep/ .grid-img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/deep/ .grid-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/deep/ .grid-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
text-align: center;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
color: #172033;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -780,10 +1119,20 @@ const apps = {
|
||||
}
|
||||
|
||||
/deep/ .grid-desc {
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
line-height: 1.35;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/deep/ .grid-arrow {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 8px;
|
||||
color: #9eb0c8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/deep/ .menu-name {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -7,26 +7,83 @@ layout("/layouts/platform_h5.html"){
|
||||
background: #0a84ff;
|
||||
color: #0b5a2c;
|
||||
}
|
||||
|
||||
.page-showtabbar .page-wrapper {
|
||||
height: 100%;
|
||||
padding-bottom: calc(78px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-tarbar .van-tabbar {
|
||||
left: 12px;
|
||||
bottom: calc(10px + env(safe-area-inset-bottom));
|
||||
width: calc(100% - 24px);
|
||||
height: 58px;
|
||||
padding: 4px 6px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255, 255, 255, .72);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, .66);
|
||||
-webkit-backdrop-filter: blur(5px) saturate(20%);
|
||||
backdrop-filter: blur(5px) saturate(20%);
|
||||
box-shadow: 0 10px 30px rgba(38, 66, 105, .18), 0 2px 8px rgba(38, 66, 105, .08);
|
||||
}
|
||||
|
||||
.page-tarbar .van-tabbar::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-tarbar .van-tabbar-item {
|
||||
border-radius: 999px;
|
||||
color: #718096;
|
||||
background-color: transparent;
|
||||
font-size: 11px;
|
||||
transition: color .2s ease, background-color .2s ease;
|
||||
}
|
||||
|
||||
.page-tarbar .van-tabbar-item--active {
|
||||
color: #1677ff;
|
||||
background-color: rgba(22, 119, 255, .1);
|
||||
}
|
||||
|
||||
.page-tarbar .van-tabbar-item__icon {
|
||||
margin-bottom: 2px;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.page-tarbar .van-info--dot {
|
||||
width: 8px;
|
||||
min-width: 8px;
|
||||
max-width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
line-height: 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background-color: #ff3b30;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div>
|
||||
<div>
|
||||
<home v-if="homeTabbarActive === 'home'" @module-click="moduleClick"></home>
|
||||
<todo v-if="homeTabbarActive === 'todo'"></todo>
|
||||
<todo v-if="homeTabbarActive === 'todo'" @todo-count-change="updateTodoCount"></todo>
|
||||
<work v-if="homeTabbarActive === 'work'"></work>
|
||||
<mine v-if="homeTabbarActive === 'mine'"></mine>
|
||||
<mine v-if="homeTabbarActive === 'mine'" @switch-tab="switchHomeTab"></mine>
|
||||
<apps v-if="homeTabbarActive === 'apps'"></apps>
|
||||
<msg v-if="homeTabbarActive === 'msg'"></msg>
|
||||
<msg v-if="homeTabbarActive === 'msg'" @unread-count-change="updateUnreadMessageCount"></msg>
|
||||
</div>
|
||||
|
||||
<div id="page-tarbar" class="page-tarbar">
|
||||
<van-tabbar v-model="homeTabbarActive" @change="homeTabbarChange">
|
||||
<van-tabbar v-model="homeTabbarActive" :safe-area-inset-bottom="false" @change="homeTabbarChange">
|
||||
<van-tabbar-item name="apps" icon="apps-o">应用</van-tabbar-item>
|
||||
<!-- <van-tabbar-item name="work" icon="gem">工作台</van-tabbar-item>-->
|
||||
<van-tabbar-item name="todo" icon="records-o">待办</van-tabbar-item>
|
||||
<van-tabbar-item name="todo" icon="records-o" :dot="todoCount > 0">待办</van-tabbar-item>
|
||||
<van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
|
||||
<van-tabbar-item name="msg" icon="envelop-o">消息</van-tabbar-item>
|
||||
<van-tabbar-item name="msg" icon="envelop-o" :dot="unreadMessageCount > 0">消息</van-tabbar-item>
|
||||
<van-tabbar-item name="mine" icon="user-o">我的</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</div>
|
||||
@@ -53,16 +110,40 @@ layout("/layouts/platform_h5.html"){
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
homeTabbarActive: "home"
|
||||
homeTabbarActive: "home",
|
||||
todoCount: 0,
|
||||
unreadMessageCount: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
homeTabbarChange(val) {
|
||||
this.$store.commit("setActiveTarBar", val)
|
||||
},
|
||||
switchHomeTab(val) {
|
||||
this.homeTabbarActive = val
|
||||
this.$store.commit("setActiveTarBar", val)
|
||||
},
|
||||
moduleClick(val) {
|
||||
console.log(val)
|
||||
this.homeTabbarActive = "work"
|
||||
this.homeTabbarActive = "apps"
|
||||
this.$store.commit("setActiveTarBar", "apps")
|
||||
},
|
||||
updateTodoCount(count) {
|
||||
this.todoCount = Number(count) || 0
|
||||
},
|
||||
updateUnreadMessageCount(count) {
|
||||
this.unreadMessageCount = Number(count) || 0
|
||||
},
|
||||
async loadTabbarBadges() {
|
||||
try {
|
||||
const [todoResp, messageResp] = await Promise.all([
|
||||
this.$axios.post("/flow/todoCenter/statistics"),
|
||||
this.$axios.get("/platform/v4/msg/stats")
|
||||
])
|
||||
if (todoResp.code === 0) this.updateTodoCount(todoResp.data.todoCount)
|
||||
if (messageResp.code === 0) this.updateUnreadMessageCount(messageResp.data.unread)
|
||||
} catch (error) {
|
||||
console.error("加载金刚区角标失败:", error)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -71,6 +152,7 @@ layout("/layouts/platform_h5.html"){
|
||||
} else {
|
||||
this.homeTabbarActive = this.$store.state.activeTarBar
|
||||
}
|
||||
this.loadTabbarBadges()
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
|
||||
|
||||
@@ -1,102 +1,159 @@
|
||||
const mine = {
|
||||
template: /*language=HTML*/ `
|
||||
<div class="home-mine">
|
||||
<van-nav-bar title="个人中心" class="nav-bar"></van-nav-bar>
|
||||
|
||||
<div class="profile-card">
|
||||
<div class="profile-header">
|
||||
<div class="avatar-section">
|
||||
<div class="avatar-wrapper">
|
||||
<van-image :src="avatar" round width="80" height="80" class="avatar">
|
||||
<van-loading slot="loading" type="spinner" size="20"></van-loading>
|
||||
</van-image>
|
||||
<div class="status-badge">
|
||||
<div class="status-dot"></div>
|
||||
<span>{{ $store.state.user.userState }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-mine" v-show="styleReady">
|
||||
<van-nav-bar title="我的" class="mine-nav" placeholder fixed :border="false"></van-nav-bar>
|
||||
<section class="mine-hero">
|
||||
<div class="mine-user-summary">
|
||||
<div class="mine-avatar-wrap">
|
||||
<van-image :src="avatar" round width="58" height="58" class="mine-avatar">
|
||||
<van-loading slot="loading" type="spinner" size="18"></van-loading>
|
||||
</van-image>
|
||||
<i class="mine-online-dot"></i>
|
||||
</div>
|
||||
|
||||
<div class="basic-info">
|
||||
<div class="name-row">
|
||||
<h2 class="username">{{ $store.state.user.username }}</h2>
|
||||
<div class="gender-tag">
|
||||
<van-icon name="friends-o" class="gender-icon"></van-icon>
|
||||
<span>{{ $store.state.user.sex }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="employee-id">
|
||||
工号：
|
||||
<span class="id-value">{{ $store.state.user.loginname }}</span>
|
||||
</div>
|
||||
<div class="mine-user-text">
|
||||
<strong>{{ user.username || '-' }}</strong>
|
||||
<span>工号：{{ user.loginname || '-' }}</span>
|
||||
<span>性别：{{ user.sex || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-list">
|
||||
<!-- <div class="info-item">
|
||||
<van-icon name="user-o"></van-icon>
|
||||
<span class="item-label">人员类型</span>
|
||||
<span class="info-value">{{ $store.state.user.personType }}</span>
|
||||
</div>-->
|
||||
<div class="info-item">
|
||||
<van-icon name="user-o"></van-icon>
|
||||
<span class="item-label">在职状态</span>
|
||||
<span class="info-value">{{ $store.state.user.userState }}</span>
|
||||
<div class="mine-status-card">
|
||||
<div class="mine-status-item">
|
||||
<span>在职状态</span>
|
||||
<strong :class="employmentStatusClass">{{ user.userState || '-' }}</strong>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<van-icon name="wap-home-o"></van-icon>
|
||||
<span class="item-label">所属单位</span>
|
||||
<span class="info-value">{{ $store.state.user.unit.name }}</span>
|
||||
<div class="mine-status-item">
|
||||
<span>所属单位</span>
|
||||
<strong>{{ unitName }}</strong>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<van-icon name="wap-home-o"></van-icon>
|
||||
<span class="item-label">所属工会</span>
|
||||
<span class="info-value">{{ $store.state.user.union.name }}</span>
|
||||
<div class="mine-status-item">
|
||||
<span>所属工会</span>
|
||||
<strong>{{ unionName }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="action-cards">
|
||||
<van-cell-group>
|
||||
<van-cell is-link @click="$pjaxReplace('/platform/h5/indexMine/userInfo')" class="action-cell">
|
||||
<span class="cell-title" slot="title">
|
||||
<van-icon name="user-o" class="cell-icon"></van-icon>
|
||||
个人信息
|
||||
</span>
|
||||
</van-cell>
|
||||
<main class="mine-content">
|
||||
<section class="mine-panel mine-business-panel">
|
||||
<div class="mine-panel-heading">
|
||||
<h2>我的业务</h2>
|
||||
<button type="button" class="mine-panel-link" @click="switchTab('apps')">
|
||||
全部业务 <van-icon name="arrow"></van-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mine-grid mine-business-grid">
|
||||
<button type="button" class="mine-grid-item" @click="switchTab('todo')">
|
||||
<van-icon name="orders-o"></van-icon>
|
||||
<span>待办事项</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="switchTab('apps')">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>我的申请</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="$pjaxReplace('/platform/learning/course/h5')">
|
||||
<van-icon name="notes-o"></van-icon>
|
||||
<span>我的课程</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="switchTab('msg')">
|
||||
<van-icon name="envelop-o"></van-icon>
|
||||
<span>我的消息</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<van-cell is-link @click="$pjaxReplace('/platform/signature/h5')" class="action-cell">
|
||||
<span class="cell-title" slot="title">
|
||||
<van-icon name="edit" class="cell-icon"></van-icon>
|
||||
我的签名
|
||||
</span>
|
||||
</van-cell>
|
||||
<section class="mine-panel mine-tools-panel">
|
||||
<div class="mine-panel-heading">
|
||||
<h2>我的工具</h2>
|
||||
</div>
|
||||
<div class="mine-grid mine-tools-grid">
|
||||
<button type="button" class="mine-grid-item" @click="$pjaxReplace('/platform/h5/indexMine/userInfo')">
|
||||
<van-icon name="user-circle-o"></van-icon>
|
||||
<span>个人信息</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="$pjaxReplace('/platform/signature/h5')">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>我的签名</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="switchTab('apps')">
|
||||
<van-icon name="star-o"></van-icon>
|
||||
<span>我的收藏</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="switchTab('apps')">
|
||||
<van-icon name="gift-o"></van-icon>
|
||||
<span>福利中心</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="switchTab('apps')">
|
||||
<van-icon name="calendar-o"></van-icon>
|
||||
<span>活动报名</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="switchTab('apps')">
|
||||
<van-icon name="completed-o"></van-icon>
|
||||
<span>问卷调查</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="switchTab('apps')">
|
||||
<van-icon name="setting-o"></van-icon>
|
||||
<span>设置中心</span>
|
||||
</button>
|
||||
<button type="button" class="mine-grid-item" @click="switchTab('apps')">
|
||||
<van-icon name="question-o"></van-icon>
|
||||
<span>帮助中心</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <van-cell :value="$store.state.user.totalIntegral" is-link @click="$pjaxReplace('/platform/integral/records/h5')" class="action-cell">-->
|
||||
<!-- <span class="cell-title" slot="title">-->
|
||||
<!-- <van-icon name="points" class="cell-icon"></van-icon>-->
|
||||
<!-- 我的积分-->
|
||||
<!-- </span>-->
|
||||
<!-- </van-cell>-->
|
||||
</van-cell-group>
|
||||
</div>
|
||||
|
||||
<div class="logout-wrapper">
|
||||
<van-button round block color="#ee0a24" @click="logout" class="logout-btn">退出登录</van-button>
|
||||
</div>
|
||||
<div class="mine-logout-wrap">
|
||||
<van-button round block plain color="#bdcbe0" @click="logout" class="mine-logout-btn">退出登录</van-button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
styleReady: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 等全局 styleMixin 完成作用域样式注入后再显示页面，避免刷新首帧闪现无样式内容。
|
||||
this.$nextTick(() => {
|
||||
this.styleReady = true
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user || {}
|
||||
},
|
||||
unitName() {
|
||||
return (this.user.unit && this.user.unit.name) || "-"
|
||||
},
|
||||
unionName() {
|
||||
return (this.user.union && this.user.union.name) || "-"
|
||||
},
|
||||
employmentStatusClass() {
|
||||
const status = this.user.userState || ""
|
||||
if (/离职|不在职|停职|辞退/.test(status)) {
|
||||
return "mine-employment-status--inactive"
|
||||
}
|
||||
if (/退休|离休/.test(status)) {
|
||||
return "mine-employment-status--retired"
|
||||
}
|
||||
if (/在职/.test(status)) {
|
||||
return "mine-employment-status--active"
|
||||
}
|
||||
return "mine-employment-status--default"
|
||||
},
|
||||
avatar() {
|
||||
const sex = this.$store.state.user.sex
|
||||
const sex = this.user.sex
|
||||
if (sex === "男" || !sex) {
|
||||
return "/assets/platform/img/home/avatar_boy.png"
|
||||
} else {
|
||||
return "/assets/platform/img/home/avatar_girl.png"
|
||||
}
|
||||
return "/assets/platform/img/home/avatar_girl.png"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(tab) {
|
||||
this.$store.commit("setActiveTarBar", tab)
|
||||
this.$emit("switch-tab", tab)
|
||||
},
|
||||
logout() {
|
||||
this.$dialog
|
||||
.confirm({
|
||||
@@ -112,261 +169,258 @@ const mine = {
|
||||
style() {
|
||||
return /*language=CSS*/ `
|
||||
.home-mine {
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 76px;
|
||||
box-sizing: border-box;
|
||||
background: #f3f6fa;
|
||||
color: #15243a;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20px;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
flex-shrink: 0;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
.mine-hero {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
height: 154px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 26px;
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border: 2px solid #f5f5f5;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s;
|
||||
/deep/ .mine-nav,
|
||||
/deep/ .mine-nav .van-nav-bar {
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%) !important;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
/deep/ .mine-nav .van-nav-bar__title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mine-user-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.mine-avatar-wrap {
|
||||
position: relative;
|
||||
flex: 0 0 58px;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.mine-avatar {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgba(255, 255, 255, 0.96);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.mine-online-dot {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #34c759;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
animation: fadeInScale 0.3s ease-out 0.2s backwards;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #34c759;
|
||||
right: -1px;
|
||||
bottom: 2px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #3dd0a0;
|
||||
}
|
||||
|
||||
.basic-info {
|
||||
flex: 1;
|
||||
padding-top: 4px;
|
||||
.mine-user-text {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
color: #fff;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
animation: slideLeft 0.3s ease-out;
|
||||
}
|
||||
|
||||
.username {
|
||||
margin: 0;
|
||||
.mine-user-text strong {
|
||||
overflow: hidden;
|
||||
max-width: 240px;
|
||||
margin-bottom: 1px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gender-tag {
|
||||
.mine-user-text span {
|
||||
font-size: 14px;
|
||||
opacity: 0.96;
|
||||
}
|
||||
|
||||
.mine-status-card {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 12px;
|
||||
bottom: -102px;
|
||||
left: 12px;
|
||||
display: grid;
|
||||
min-height: 112px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.82);
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 30px rgba(35, 82, 130, 0.13);
|
||||
}
|
||||
|
||||
.mine-status-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mine-status-item + .mine-status-item::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
background: #e3ebf5;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.mine-status-item strong {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
color: #18263a;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mine-status-item span {
|
||||
color: #75849b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mine-status-item .mine-employment-status--active {
|
||||
color: #28b985;
|
||||
}
|
||||
|
||||
.mine-status-item .mine-employment-status--retired {
|
||||
color: #f2a33a;
|
||||
}
|
||||
|
||||
.mine-status-item .mine-employment-status--inactive {
|
||||
color: #e46a6a;
|
||||
}
|
||||
|
||||
.mine-status-item .mine-employment-status--default {
|
||||
color: #718198;
|
||||
}
|
||||
|
||||
.mine-content {
|
||||
padding: 124px 12px 22px;
|
||||
}
|
||||
|
||||
.mine-panel {
|
||||
margin-bottom: 13px;
|
||||
padding: 14px 10px 13px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.82);
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 30px rgba(35, 82, 130, 0.13);
|
||||
}
|
||||
|
||||
.mine-panel-heading {
|
||||
display: flex;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e3ebf5;
|
||||
}
|
||||
|
||||
.mine-panel-heading h2 {
|
||||
margin: 0;
|
||||
color: #18263a;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mine-panel-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: #f5f5f5;
|
||||
padding: 2px 10px;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: #75849b;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.employee-id {
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
animation: slideLeft 0.3s ease-out 0.1s backwards;
|
||||
.mine-panel-link .van-icon {
|
||||
margin-left: 5px;
|
||||
color: #a8b6c8;
|
||||
}
|
||||
|
||||
.id-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
.mine-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.info-list {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
.mine-business-grid {
|
||||
padding-top: 19px;
|
||||
}
|
||||
|
||||
.mine-tools-grid {
|
||||
padding-top: 18px;
|
||||
row-gap: 22px;
|
||||
}
|
||||
|
||||
.mine-grid-item {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
animation: slideLeft 0.3s ease-out;
|
||||
transition: background-color 0.3s;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
padding: 0 2px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: #173d68;
|
||||
}
|
||||
|
||||
.info-item:active {
|
||||
background-color: #f5f5f5;
|
||||
.mine-grid-item:active {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
color: #999;
|
||||
width: 70px;
|
||||
.mine-grid-item .van-icon {
|
||||
height: 26px;
|
||||
font-size: 25px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
flex: 1;
|
||||
.mine-grid-item span {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
margin-top: 9px;
|
||||
color: #1c2b41;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-item .van-icon {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
width: 20px;
|
||||
.mine-logout-wrap {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.action-cards {
|
||||
margin: 10px;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.action-cell {
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.cell-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cell-icon {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.logout-wrapper {
|
||||
padding: 16px;
|
||||
margin-top: 20px;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
.mine-logout-btn {
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.logout-btn:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 动画定义 */
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInScale {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* 为每个列表项添加延迟动画 */
|
||||
.info-item:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.info-item:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.info-item:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.info-item:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
border-color: #bdcbe0 !important;
|
||||
background: rgba(255, 255, 255, 0.82) !important;
|
||||
color: #718198 !important;
|
||||
font-size: 15px;
|
||||
}
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,19 +1,48 @@
|
||||
const todo = {
|
||||
template: /*language=HTML*/ `
|
||||
<div class="task-center">
|
||||
<van-nav-bar title="待办中心" placeholder fixed></van-nav-bar>
|
||||
<van-nav-bar class="task-nav" placeholder fixed :border="false" style="background-color: #0879f9;">
|
||||
<template #title><span class="task-nav-title">待办中心</span></template>
|
||||
</van-nav-bar>
|
||||
<div class="task-hero" ref="taskHero">
|
||||
<div class="task-statistics">
|
||||
<button type="button" class="statistic-item" @click="switchTab('todo')">
|
||||
<div class="statistic-icon statistic-icon-todo">
|
||||
<van-icon name="description-o"></van-icon>
|
||||
</div>
|
||||
<div class="statistic-count">{{ todoCount }}</div>
|
||||
<div class="statistic-label">待办事项</div>
|
||||
</button>
|
||||
<button type="button" class="statistic-item" @click="switchTab('done')">
|
||||
<div class="statistic-icon statistic-icon-done">
|
||||
<van-icon name="underway-o"></van-icon>
|
||||
</div>
|
||||
<div class="statistic-count">{{ doneCount }}</div>
|
||||
<div class="statistic-label">已办事项</div>
|
||||
</button>
|
||||
<button type="button" class="statistic-item" @click="switchTab('started')">
|
||||
<div class="statistic-icon statistic-icon-started">
|
||||
<van-icon name="guide-o"></van-icon>
|
||||
</div>
|
||||
<div class="statistic-count">{{ startedCount }}</div>
|
||||
<div class="statistic-label">我发起的</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 标签页 -->
|
||||
<van-sticky offset-top="46px">
|
||||
<van-tabs v-model="activeTab" @change="handleTabChange" animated swipeable>
|
||||
<van-tab :title="'待办(' + todoCount + ')'" name="todo"></van-tab>
|
||||
<van-tab :title="'已办(' + doneCount + ')'" name="done"></van-tab>
|
||||
<van-tab :title="'发起(' + startedCount + ')'" name="started"></van-tab>
|
||||
</van-tabs>
|
||||
<van-tabs v-model="activeTab" class="task-tabs task-tabs--hero-replacement"
|
||||
:style="{opacity: tabRevealProgress, pointerEvents: tabRevealProgress > 0.8 ? 'auto' : 'none'}"
|
||||
@change="handleTabChange" animated swipeable>
|
||||
<van-tab :title="'待办(' + todoCount + ')'" name="todo"></van-tab>
|
||||
<van-tab :title="'已办(' + doneCount + ')'" name="done"></van-tab>
|
||||
<van-tab :title="'发起(' + startedCount + ')'" name="started"></van-tab>
|
||||
</van-tabs>
|
||||
<van-sticky :offset-top="46 + 44 * tabRevealProgress">
|
||||
<!-- 搜索筛选区域 -->
|
||||
<div class="filter-section">
|
||||
<div>
|
||||
<div class="search-form">
|
||||
<van-search v-model="pageForm.searchKeyword" placeholder="请输入搜索关键词"
|
||||
<van-search v-model="pageForm.searchKeyword" shape="round" placeholder="请输入搜索关键词"
|
||||
@search="doSearch"></van-search>
|
||||
</div>
|
||||
|
||||
@@ -40,25 +69,43 @@ const todo = {
|
||||
</van-sticky>
|
||||
|
||||
<!-- 任务列表区域 -->
|
||||
<table-list :api="'/flow/todoCenter/'+ activeTab" :page_form.sync="pageForm"
|
||||
ref="tableListRef"
|
||||
@ready="doSearch"
|
||||
title="variable.instanceName">
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="任务节点">{{row.taskName}}</table-column>
|
||||
<table-column label="流程分类">{{row.categoryName}}</table-column>
|
||||
<table-column label="申请人">{{row.variable?.initiatorName || '未知'}}</table-column>
|
||||
<table-column label="状态" v-if="activeTab === 'started'">{{processStatusMap[row.state]?.text ||
|
||||
'未知状态'}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看</span>
|
||||
<div class="task-list-offset" :style="{paddingTop: 44 * tabRevealProgress + 'px'}">
|
||||
<div v-if="skeletonLoading" class="task-skeleton-list">
|
||||
<div v-for="index in 4" :key="index" class="task-skeleton-card">
|
||||
<van-skeleton title :row="3"></van-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
<table-list :api="'/flow/todoCenter/'+ activeTab" :page_form.sync="pageForm"
|
||||
v-show="!skeletonLoading"
|
||||
ref="tableListRef"
|
||||
@ready="doSearch"
|
||||
@loading-change="handleListLoadingChange"
|
||||
title="variable.instanceName">
|
||||
<template #header="{row}">
|
||||
<div class="todo-item-header">
|
||||
<div class="todo-item-title">
|
||||
<span class="todo-title-icon"><van-icon name="description-o"></van-icon></span>
|
||||
<span class="todo-title-text">{{ row.variable?.instanceName || '' }}</span>
|
||||
</div>
|
||||
<span class="todo-status">{{ getTaskStatus(row) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="任务节点">{{row.taskName}}</table-column>
|
||||
<table-column label="流程分类">{{row.categoryName}}</table-column>
|
||||
<table-column label="申请人">{{row.variable?.initiatorName || '未知'}}</table-column>
|
||||
<table-column label="状态" v-if="activeTab === 'started'">{{processStatusMap[row.state]?.text ||
|
||||
'未知状态'}}
|
||||
</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<span>查看详情</span>
|
||||
<van-icon name="arrow"></van-icon>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
@@ -85,11 +132,15 @@ const todo = {
|
||||
// 任务列表
|
||||
tasks: [],
|
||||
loading: false,
|
||||
skeletonLoading: true,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
|
||||
// 标签页
|
||||
activeTab: "todo",
|
||||
heroVisible: true,
|
||||
tabRevealProgress: 0,
|
||||
scrollContainer: null,
|
||||
|
||||
processStatusMap: {
|
||||
10: {text: "进行中", class: "doing"},
|
||||
@@ -106,7 +157,32 @@ const todo = {
|
||||
this.initData();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => this.initHeroObserver())
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.scrollContainer) this.scrollContainer.removeEventListener("scroll", this.updateHeroVisibility)
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Hero 接近顶部导航栏时按剩余高度渐显分类标签。
|
||||
initHeroObserver() {
|
||||
this.scrollContainer = this.$el.closest(".page-wrapper") || document.scrollingElement
|
||||
this.scrollContainer.addEventListener("scroll", this.updateHeroVisibility, {passive: true})
|
||||
this.updateHeroVisibility()
|
||||
},
|
||||
|
||||
updateHeroVisibility() {
|
||||
const hero = this.$refs.taskHero
|
||||
const containerTop = this.scrollContainer ? this.scrollContainer.getBoundingClientRect().top : 0
|
||||
if (!hero) return
|
||||
const heroBottom = hero.getBoundingClientRect().bottom
|
||||
const revealProgress = (containerTop + 90 - heroBottom) / 44
|
||||
this.tabRevealProgress = Math.max(0, Math.min(1, revealProgress))
|
||||
this.heroVisible = this.tabRevealProgress < 1
|
||||
},
|
||||
|
||||
// 初始化数据
|
||||
async initData() {
|
||||
await Promise.all([this.getStatistics(), this.listCategory()]);
|
||||
@@ -121,6 +197,7 @@ const todo = {
|
||||
this.todoCount = todoCount;
|
||||
this.doneCount = doneCount;
|
||||
this.startedCount = startedCount;
|
||||
this.$emit("todo-count-change", this.todoCount)
|
||||
}
|
||||
} catch (error) {
|
||||
this.$toast("获取统计数据失败");
|
||||
@@ -147,6 +224,30 @@ const todo = {
|
||||
this.activeTab = name;
|
||||
this.doSearch()
|
||||
this.getStatistics();
|
||||
this.keepTabsVisible()
|
||||
},
|
||||
|
||||
// 顶部统计按钮直接切换对应任务分类并刷新列表。
|
||||
switchTab(tabValue) {
|
||||
this.activeTab = tabValue
|
||||
this.doSearch()
|
||||
this.getStatistics()
|
||||
},
|
||||
|
||||
// 切换分类后停留在 Hero 刚好收起的位置，避免列表清空时页面回到顶部。
|
||||
keepTabsVisible() {
|
||||
this.heroVisible = false
|
||||
this.tabRevealProgress = 1
|
||||
this.$nextTick(() => {
|
||||
window.requestAnimationFrame(() => {
|
||||
const hero = this.$refs.taskHero
|
||||
const container = this.scrollContainer
|
||||
if (!hero || !container) return
|
||||
const containerTop = container.getBoundingClientRect().top
|
||||
const targetTop = container.scrollTop + hero.getBoundingClientRect().bottom - containerTop - 45
|
||||
container.scrollTop = Math.max(0, targetTop)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 搜索
|
||||
@@ -158,6 +259,10 @@ const todo = {
|
||||
})
|
||||
},
|
||||
|
||||
handleListLoadingChange(state) {
|
||||
if (state.initial) this.skeletonLoading = state.loading
|
||||
},
|
||||
|
||||
// 重置搜索
|
||||
reset() {
|
||||
this.pageForm.searchKeyword = "";
|
||||
@@ -183,6 +288,13 @@ const todo = {
|
||||
this.$pjaxReplace(h5FormKey + "?taskId=" + taskId + "bizId=" + businessNo + "taskKey=" + taskKey+ "&tab=" + this.activeTab)
|
||||
},
|
||||
|
||||
// 根据当前列表类型统一展示流程状态，发起列表保留流程实例的实际状态。
|
||||
getTaskStatus(task) {
|
||||
if (this.activeTab === "todo") return "进行中";
|
||||
if (this.activeTab === "done") return "已完成";
|
||||
return this.processStatusMap[task.state]?.text || "未知状态";
|
||||
},
|
||||
|
||||
// 获取空状态文本
|
||||
getEmptyText() {
|
||||
switch (this.activeTab) {
|
||||
@@ -198,23 +310,155 @@ const todo = {
|
||||
}
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
/* 标签页样式优化 */
|
||||
/deep/ .van-tabs__nav {
|
||||
background-color: #fff;
|
||||
.task-center {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 72px;
|
||||
box-sizing: border-box;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
/deep/ .van-tab {
|
||||
font-size: 14px;
|
||||
/deep/ .task-nav .van-nav-bar {
|
||||
background-color: #0879f9 !important;
|
||||
}
|
||||
|
||||
/deep/ .van-tab--active {
|
||||
color: var(--color-primary, #1989fa);
|
||||
/deep/ .task-nav .van-nav-bar::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/deep/ .task-nav .van-nav-bar__title {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/deep/ .van-tabs__line {
|
||||
.task-nav-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.task-hero {
|
||||
position: relative;
|
||||
height: 92px;
|
||||
background-color: #0879f9;
|
||||
}
|
||||
|
||||
.task-statistics {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 12px;
|
||||
left: 12px;
|
||||
display: flex;
|
||||
height: 78px;
|
||||
padding: 10px 6px 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 6px 18px rgba(45, 91, 145, 0.14);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.statistic-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.statistic-item:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.statistic-icon {
|
||||
display: flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.statistic-icon-todo {
|
||||
background: #4d8ff7;
|
||||
}
|
||||
|
||||
.statistic-icon-done {
|
||||
background: #ffad3d;
|
||||
}
|
||||
|
||||
.statistic-icon-started {
|
||||
background: #5dce91;
|
||||
}
|
||||
|
||||
.statistic-count {
|
||||
margin-top: 3px;
|
||||
color: #26364d;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.statistic-label {
|
||||
color: #8d97a7;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
/* 标签页样式优化 */
|
||||
/deep/ .task-tabs .van-tabs__wrap {
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
/deep/ .task-tabs .van-tabs__nav {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .task-tabs .van-tab {
|
||||
position: relative;
|
||||
color: #7f8998;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s, font-size 0.2s;
|
||||
}
|
||||
|
||||
/deep/ .task-tabs .van-tab:not(:last-child)::after {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 0;
|
||||
bottom: 13px;
|
||||
width: 1px;
|
||||
background: #edf1f6;
|
||||
content: "";
|
||||
transform: skewX(-18deg);
|
||||
}
|
||||
|
||||
/deep/ .task-tabs .van-tab--active {
|
||||
color: var(--color-primary, #1989fa);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/deep/ .task-tabs .van-tabs__line {
|
||||
bottom: 7px;
|
||||
width: 24px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-primary, #1989fa);
|
||||
}
|
||||
|
||||
/deep/ .task-tabs--hero-replacement {
|
||||
position: fixed;
|
||||
top: 46px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
transition: opacity 0.12s linear;
|
||||
}
|
||||
|
||||
/deep/ .filter-section {
|
||||
/*margin-bottom: 16px;*/
|
||||
@@ -222,14 +466,30 @@ const todo = {
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
align-items: center;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.search-form .van-search{
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/deep/ .search-form .van-search__content {
|
||||
border-radius: 18px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/deep/ .search-form .van-field__control {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/deep/ .van-sticky--fixed {
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
@@ -289,5 +549,121 @@ const todo = {
|
||||
.category-select {
|
||||
margin: 0 12px 12px 0;
|
||||
}
|
||||
|
||||
.task-list-offset {
|
||||
min-height: calc(100vh - 140px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.task-skeleton-list {
|
||||
padding: 10px 12px 0;
|
||||
}
|
||||
|
||||
.task-skeleton-card {
|
||||
margin-bottom: 10px;
|
||||
padding: 18px 4px;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 10px rgba(31, 68, 113, .07);
|
||||
}
|
||||
|
||||
/deep/ .table-list-container {
|
||||
min-height: calc(100vh - 140px);
|
||||
margin-top: 8px !important;
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
|
||||
/deep/ .table-list-container .table-list-item {
|
||||
margin-bottom: 10px !important;
|
||||
padding: 12px !important;
|
||||
border: 0 !important;
|
||||
border-radius: 9px !important;
|
||||
box-shadow: 0 2px 10px rgba(31, 68, 113, 0.07) !important;
|
||||
}
|
||||
|
||||
/deep/ .todo-item-header {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/deep/ .todo-item-title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/deep/ .todo-title-icon {
|
||||
display: flex;
|
||||
flex: 0 0 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
color: #438df5;
|
||||
font-size: 15px;
|
||||
background: #edf5ff;
|
||||
}
|
||||
|
||||
/deep/ .todo-title-text {
|
||||
overflow: hidden;
|
||||
color: #26364d;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 22px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/deep/ .todo-status {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 8px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 4px;
|
||||
color: #4b92f2;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
background: #edf5ff;
|
||||
}
|
||||
|
||||
/deep/ .table-column {
|
||||
padding: 3px 0 !important;
|
||||
}
|
||||
|
||||
/deep/ .table-column .label,
|
||||
/deep/ .table-column .value {
|
||||
color: #637083 !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 19px !important;
|
||||
}
|
||||
|
||||
/deep/ .table-list-container .table-list-item .item-actions {
|
||||
margin-top: 8px !important;
|
||||
padding-top: 7px !important;
|
||||
border-top-color: #edf1f6 !important;
|
||||
}
|
||||
|
||||
/deep/ .table-list-container .table-list-item .action-btn {
|
||||
padding: 0 !important;
|
||||
color: #2783ef !important;
|
||||
background: transparent !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/deep/ .table-list-container .table-list-item .action-btn .van-icon {
|
||||
margin-left: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/deep/ .van-list__finished-text {
|
||||
padding: 12px 0 16px;
|
||||
color: #a1a9b5;
|
||||
font-size: 13px;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
@@ -3,39 +3,301 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.bgcolor-white {
|
||||
background: #ffffff;
|
||||
body {
|
||||
background: #f3f6fa;
|
||||
}
|
||||
.van-status__figure {
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
|
||||
.signature-page {
|
||||
min-height: 100vh;
|
||||
background: #f3f6fa;
|
||||
color: #15243a;
|
||||
}
|
||||
.van-status__figure img {
|
||||
width: 130px;
|
||||
|
||||
.signature-hero {
|
||||
position: relative;
|
||||
height: 154px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 26px;
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%);
|
||||
}
|
||||
|
||||
.signature-nav,
|
||||
.signature-nav .van-nav-bar {
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%) !important;
|
||||
}
|
||||
|
||||
.signature-nav .van-nav-bar__title,
|
||||
.signature-nav .van-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.signature-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.signature-avatar-wrap {
|
||||
position: relative;
|
||||
flex: 0 0 58px;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.signature-avatar {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgba(255, 255, 255, 0.96);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.signature-online {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: 2px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #3dd0a0;
|
||||
}
|
||||
|
||||
.signature-user-text {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.signature-user-text strong {
|
||||
overflow: hidden;
|
||||
max-width: 240px;
|
||||
margin-bottom: 1px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.signature-body {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 184px);
|
||||
box-sizing: border-box;
|
||||
margin-top: -16px;
|
||||
padding: 24px 16px 40px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
background: #f3f6fa;
|
||||
}
|
||||
|
||||
.signature-card {
|
||||
margin-bottom: 18px;
|
||||
padding: 17px 16px 19px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 22px rgba(31, 72, 113, 0.06);
|
||||
}
|
||||
|
||||
.signature-card-heading {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e3ebf5;
|
||||
}
|
||||
|
||||
.signature-card-heading h2 {
|
||||
margin: 0;
|
||||
color: #18263a;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.signature-state-tag {
|
||||
padding: 3px 10px;
|
||||
border-radius: 14px;
|
||||
background: #eaf8f3;
|
||||
color: #30bc8c;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.signature-state-tag.unset {
|
||||
background: #eef3f9;
|
||||
color: #8292a8;
|
||||
}
|
||||
|
||||
.signature-description {
|
||||
margin: 20px 0 12px;
|
||||
color: #718198;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.signature-preview {
|
||||
display: flex;
|
||||
height: 130px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #bdcbe0;
|
||||
border-radius: 10px;
|
||||
background: #f7f9fc;
|
||||
}
|
||||
|
||||
.signature-preview .van-image,
|
||||
.signature-preview .van-image__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.signature-empty {
|
||||
color: #95a4b8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.signature-meta {
|
||||
margin-top: 20px;
|
||||
color: #718198;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.signature-health {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signature-health .van-icon {
|
||||
margin-right: 8px;
|
||||
color: #42ca99;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.signature-action {
|
||||
height: 42px;
|
||||
margin-top: 15px;
|
||||
border: 0;
|
||||
background: #087cf4;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.signature-instructions {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.signature-steps {
|
||||
margin: 17px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.signature-steps li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
color: #718198;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.signature-steps li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.signature-step-number {
|
||||
display: inline-flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
background: #e7f1ff;
|
||||
color: #087cf4;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.signature-editor-card {
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 22px rgba(31, 72, 113, 0.06);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="我的签名" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
|
||||
<div class="bgcolor-white">
|
||||
<div v-if="!showSignature" class="p10">
|
||||
<van-image width="100%" height="200" :src="userSignatureUrl" v-if="userSignatureUrl" style="border: 1px dashed #000">
|
||||
<template slot="error">获取签名失败</template>
|
||||
</van-image>
|
||||
<div v-else class="van-status__figure">
|
||||
<img src="/assets/platform/plugins/vant-green/images/figure/fail.png" class="" />
|
||||
<div class="text-center pt10 pb10">暂无签名</div>
|
||||
<div class="signature-page">
|
||||
<van-nav-bar title="我的签名" class="signature-nav" left-arrow @click-left="historyBack"
|
||||
placeholder fixed :border="false"></van-nav-bar>
|
||||
<header class="signature-hero">
|
||||
<div class="signature-user">
|
||||
<div class="signature-avatar-wrap">
|
||||
<van-image :src="avatar" round width="58" height="58" class="signature-avatar">
|
||||
<van-loading slot="loading" type="spinner" size="18"></van-loading>
|
||||
</van-image>
|
||||
<i class="signature-online"></i>
|
||||
</div>
|
||||
<div class="signature-user-text">
|
||||
<strong>{{ user.username || '-' }}</strong>
|
||||
<span>工号：{{ user.loginname || '-' }}</span>
|
||||
<span>性别：{{ user.sex || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <van-status orient="vertical" :figure="14" title="暂无签名" v-else></van-status>-->
|
||||
</header>
|
||||
|
||||
<div class="margin-top10">
|
||||
<van-button v-if="!userSignatureUrl" block type="primary" @click="openSignature">去签名</van-button>
|
||||
<van-button v-else block type="primary" @click="openSignature">修改签名</van-button>
|
||||
<main class="signature-body">
|
||||
<template v-if="!showSignature">
|
||||
<section class="signature-card">
|
||||
<div class="signature-card-heading">
|
||||
<h2>当前签名</h2>
|
||||
<span class="signature-state-tag" :class="{ unset: !userSignatureUrl }">
|
||||
{{ userSignatureUrl ? '已设置' : '未设置' }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="signature-description">用于工会业务审批和材料签署</p>
|
||||
<div class="signature-preview">
|
||||
<van-image v-if="userSignatureUrl" :src="userSignatureUrl">
|
||||
<template slot="error">获取签名失败</template>
|
||||
</van-image>
|
||||
<span v-else class="signature-empty">暂无签名</span>
|
||||
</div>
|
||||
<div class="signature-meta">
|
||||
<div>最近更新：{{ signatureUpdatedAt }}</div>
|
||||
<div class="signature-health">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>{{ userSignatureUrl ? '签名状态正常，可用于业务办理' : '请先设置签名后办理相关业务' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<van-button round block type="primary" class="signature-action" @click="openSignature">
|
||||
{{ userSignatureUrl ? '重新签名' : '立即签名' }}
|
||||
</van-button>
|
||||
</section>
|
||||
|
||||
<section class="signature-card signature-instructions">
|
||||
<div class="signature-card-heading">
|
||||
<h2>使用说明</h2>
|
||||
</div>
|
||||
<ol class="signature-steps">
|
||||
<li><span class="signature-step-number">1</span><span>在签名区域内完成本人签名</span></li>
|
||||
<li><span class="signature-step-number">2</span><span>确认清晰完整后保存</span></li>
|
||||
<li><span class="signature-step-number">3</span><span>签名变更后自动更新业务调用</span></li>
|
||||
</ol>
|
||||
</section>
|
||||
</template>
|
||||
<div v-else class="signature-editor-card">
|
||||
<signature @save="saveSignature"></signature>
|
||||
</div>
|
||||
</div>
|
||||
<signature v-if="showSignature" @save="saveSignature"></signature>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,14 +311,34 @@ layout("/layouts/platform_h5.html"){
|
||||
data() {
|
||||
return {
|
||||
showSignature: false,
|
||||
userSignatureUrl: null
|
||||
userSignatureUrl: null,
|
||||
signatureUpdatedTime: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user || {}
|
||||
},
|
||||
avatar() {
|
||||
if (this.user.sex === "男" || !this.user.sex) {
|
||||
return "/assets/platform/img/home/avatar_boy.png"
|
||||
}
|
||||
return "/assets/platform/img/home/avatar_girl.png"
|
||||
},
|
||||
signatureUpdatedAt() {
|
||||
if (!this.signatureUpdatedTime) {
|
||||
return "--"
|
||||
}
|
||||
return this.$moment(this.signatureUpdatedTime).format("YYYY-MM-DD HH:mm")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserSignature() {
|
||||
this.$axios.post("/platform/signature/get").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.userSignatureUrl = res.data.signature
|
||||
const signatureData = res.data || {}
|
||||
this.userSignatureUrl = signatureData.signature || null
|
||||
this.signatureUpdatedTime = signatureData.updatedAt || signatureData.createdAt || null
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -64,7 +346,6 @@ layout("/layouts/platform_h5.html"){
|
||||
this.showSignature = true
|
||||
},
|
||||
saveSignature(signature) {
|
||||
console.log(signature)
|
||||
const file = base64ToFile(signature, "signature.png")
|
||||
const formData = new FormData()
|
||||
formData.append("file", file)
|
||||
|
||||
@@ -2,9 +2,169 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #f3f6fa;
|
||||
}
|
||||
|
||||
.profile-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f3f6fa;
|
||||
color: #15243a;
|
||||
}
|
||||
|
||||
.profile-detail-hero {
|
||||
position: relative;
|
||||
height: 154px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 26px;
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%);
|
||||
}
|
||||
|
||||
.profile-detail-nav,
|
||||
.profile-detail-nav .van-nav-bar {
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%) !important;
|
||||
}
|
||||
|
||||
.profile-detail-nav .van-nav-bar__title,
|
||||
.profile-detail-nav .van-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.profile-detail-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.profile-detail-avatar-wrap {
|
||||
position: relative;
|
||||
flex: 0 0 58px;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.profile-detail-avatar {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgba(255, 255, 255, 0.96);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.profile-detail-online {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: 2px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #3dd0a0;
|
||||
}
|
||||
|
||||
.profile-detail-user-text {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.profile-detail-user-text strong {
|
||||
overflow: hidden;
|
||||
max-width: 240px;
|
||||
margin-bottom: 1px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-detail-body {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 184px);
|
||||
box-sizing: border-box;
|
||||
margin-top: -16px;
|
||||
padding: 24px 16px 40px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
background: #f3f6fa;
|
||||
}
|
||||
|
||||
.mine-profile-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.mine-detail-card {
|
||||
padding: 15px 16px 3px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 22px rgba(31, 72, 113, 0.06);
|
||||
}
|
||||
|
||||
.mine-detail-card h2 {
|
||||
height: 29px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #e3ebf5;
|
||||
color: #18263a;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.mine-detail-row {
|
||||
display: flex;
|
||||
min-height: 42px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e3ebf5;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.mine-detail-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.mine-detail-row span {
|
||||
flex: 0 0 82px;
|
||||
color: #718198;
|
||||
}
|
||||
|
||||
.mine-detail-row strong {
|
||||
overflow-wrap: anywhere;
|
||||
color: #1c2b41;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="个人信息" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
<member-info :user-id="userId" ref="memberInfoRef"></member-info>
|
||||
<div class="profile-detail-page">
|
||||
<van-nav-bar title="个人信息" class="profile-detail-nav" left-arrow @click-left="historyBack"
|
||||
placeholder fixed :border="false"></van-nav-bar>
|
||||
<header class="profile-detail-hero">
|
||||
<div class="profile-detail-user">
|
||||
<div class="profile-detail-avatar-wrap">
|
||||
<van-image :src="avatar" round width="58" height="58" class="profile-detail-avatar">
|
||||
<van-loading slot="loading" type="spinner" size="18"></van-loading>
|
||||
</van-image>
|
||||
<i class="profile-detail-online"></i>
|
||||
</div>
|
||||
<div class="profile-detail-user-text">
|
||||
<strong>{{ user.username || '-' }}</strong>
|
||||
<span>工号：{{ user.loginname || '-' }}</span>
|
||||
<span>性别：{{ user.sex || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="profile-detail-body">
|
||||
<member-info :user-id="userId" :profile-mode="true" ref="memberInfoRef"></member-info>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("/platform/zhghh5/staffmanage/member/common/mobileMemberInfo.js"){}#-->
|
||||
@@ -16,12 +176,23 @@ layout("/layouts/platform_h5.html"){
|
||||
userId: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user || {}
|
||||
},
|
||||
avatar() {
|
||||
if (this.user.sex === "男" || !this.user.sex) {
|
||||
return "/assets/platform/img/home/avatar_boy.png"
|
||||
}
|
||||
return "/assets/platform/img/home/avatar_girl.png"
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"member-info": MOBILE_MEMBER_INFO
|
||||
},
|
||||
methods: {
|
||||
viewInfo() {
|
||||
this.userId = this.$store.state.user.id
|
||||
this.userId = this.user.id
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,131 +2,73 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #f3f7fc;
|
||||
}
|
||||
|
||||
#app {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 地址列表视觉样式由公共地址组件统一提供，页面仅保留自身容器样式。 */
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="back" left-arrow left-text="返回" placeholder title="地址管理"></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<van-address-list
|
||||
:list="addressList"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
add-button-text="新增地址"
|
||||
default-tag-text="默认"
|
||||
v-if="addressList && addressList.length>0"
|
||||
v-model="chosenAddressId"
|
||||
></van-address-list>
|
||||
|
||||
<van-empty image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据" v-else>
|
||||
<van-button @click="onAdd" class="mt10" round type="primary">新增地址</van-button>
|
||||
</van-empty>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" :title="title" v-model="editActionSheet">
|
||||
<van-address-edit
|
||||
:address-info="addressInfo"
|
||||
:area-columns-placeholder="['请选择', '请选择', '请选择']"
|
||||
:area-list="areaList"
|
||||
:show-delete="showDelete"
|
||||
@delete="onDelete"
|
||||
@save="onSave"
|
||||
ref="address"
|
||||
show-search-result
|
||||
show-set-default
|
||||
tel-maxlengtfals
|
||||
></van-address-edit>
|
||||
</van-action-sheet>
|
||||
<welfare-address-manager class="address-size-compact" page-title="地址管理"
|
||||
flat-list :area-list="areaList" @back="handlePageBack">
|
||||
</welfare-address-manager>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
<!--#include("/platform/zhghh5/welfare/include/areaList.js"){}#-->
|
||||
<!--#include("/platform/zhghh5/welfare/address/addressManager.js"){}#-->
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
store,
|
||||
components: {
|
||||
"welfare-address-manager": WELFARE_ADDRESS_MANAGER_COMPONENT
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
areaList: areaList,
|
||||
addressInfo: {},
|
||||
addressList: [],
|
||||
editActionSheet: false,
|
||||
showDelete: "",
|
||||
title: "",
|
||||
chosenAddressId: "",
|
||||
projectId: ""
|
||||
projectId: "",
|
||||
historyLayerPageKey: "",
|
||||
areaList: areaList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async selectUserAddress() {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/selectUserAddress", { userId: this.$store.state.user.id })
|
||||
resp.data.map((r) => {
|
||||
r.name = r.userName
|
||||
r.default = r.isDefault
|
||||
r.address = "收货地址:" + r.province + r.city + r.county + r.addressDetail
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.addressList = resp.data
|
||||
loading.close()
|
||||
}, 500)
|
||||
/**
|
||||
* 注册地址管理页面历史。
|
||||
* 页面标识由项目 ID 组成，公共地址组件通过 subscribe 接收栈变化；无返回值。
|
||||
*/
|
||||
registerHistoryLayers() {
|
||||
this.historyLayerPageKey = "welfare-address-manage-" + (this.projectId || "default")
|
||||
if (!window.h5HistoryLayerManager) return
|
||||
window.h5HistoryLayerManager.register(this.historyLayerPageKey, null)
|
||||
},
|
||||
back() {
|
||||
|
||||
// 有子弹框时关闭最上层弹框，没有弹框时返回上一个业务页面。
|
||||
handlePageBack() {
|
||||
if (window.h5HistoryLayerManager && window.h5HistoryLayerManager.stack.length) {
|
||||
window.h5HistoryLayerManager.close()
|
||||
return
|
||||
}
|
||||
this.historyBack()
|
||||
},
|
||||
onEdit(row) {
|
||||
this.title = "编辑地址"
|
||||
const data = JSON.parse(JSON.stringify(row))
|
||||
this.showDelete = !!data.id
|
||||
this.addressInfo = data
|
||||
this.editActionSheet = true
|
||||
},
|
||||
onAdd() {
|
||||
this.title = "新增地址"
|
||||
this.addressInfo = {}
|
||||
this.editActionSheet = true
|
||||
},
|
||||
async onSave(row) {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
row.userName = row.name
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/doSaveUserAddress", { data: JSON.stringify(row) })
|
||||
if (resp.code === 0) {
|
||||
this.$toast.success(resp.msg)
|
||||
await this.selectUserAddress()
|
||||
loading.close()
|
||||
this.editActionSheet = false
|
||||
} else {
|
||||
this.$toast.fail(resp.msg)
|
||||
}
|
||||
},
|
||||
async onDelete(row) {
|
||||
const loading = this.$toast.loading({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
overlay: true,
|
||||
duration: 0
|
||||
})
|
||||
const resp = await this.$axios.post("/platform/welfare/addressManage/deleteAddress", { id: row.id })
|
||||
if (resp.code === 0) {
|
||||
this.$toast.success(resp.msg)
|
||||
await this.selectUserAddress()
|
||||
loading.close()
|
||||
this.editActionSheet = false
|
||||
} else {
|
||||
this.$toast.fail(resp.msg)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.projectId = GetQueryString("projectId")
|
||||
this.selectUserAddress()
|
||||
this.projectId = GetQueryString("projectId") || ""
|
||||
this.registerHistoryLayers()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (window.h5HistoryLayerManager) {
|
||||
window.h5HistoryLayerManager.unregister(this.historyLayerPageKey)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -2,101 +2,416 @@
|
||||
layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
<style>
|
||||
/* 列表卡片样式 */
|
||||
.wf-welfare-list {
|
||||
padding: 10px;
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.wf-welfare-card {
|
||||
|
||||
.welfare-list-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.welfare-list-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.welfare-list-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.welfare-list-page .van-nav-bar .van-icon,
|
||||
.welfare-list-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.welfare-list-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.welfare-list-hero {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff0f1;
|
||||
box-shadow: 0 8px 20px rgba(190, 89, 98, .12);
|
||||
}
|
||||
/* 左右布局容器 */
|
||||
.wf-card-layout {
|
||||
|
||||
.welfare-list-hero__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.welfare-list-hero__copy {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
padding-left: 18px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 2px 8px rgba(190, 74, 84, .55);
|
||||
}
|
||||
/* 左侧图片容器 */
|
||||
.wf-card-img-container {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 15px;
|
||||
|
||||
.welfare-list-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
/* 右侧信息容器 */
|
||||
.wf-card-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.welfare-list-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.welfare-list-filter-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .welfare-list-filter-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welfare-list-filter {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__title {
|
||||
color: #263548;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__title--active,
|
||||
.welfare-list-filter .van-dropdown-item__option--active,
|
||||
.welfare-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.welfare-list-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
/* 标题样式 */
|
||||
.wf-card-heading {
|
||||
|
||||
.welfare-list-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.welfare-list-card__cover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: #f7f9fc;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* 福利封面统一高度并从中心覆盖显示，保证卡片整齐且不产生两侧留白。 */
|
||||
.welfare-list-card__cover .van-image__img {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
object-position: center;
|
||||
background-color: #f7f9fc;
|
||||
}
|
||||
|
||||
.welfare-list-card__cover .van-image__loading,
|
||||
.welfare-list-card__cover .van-image__error {
|
||||
color: #9ba9bc;
|
||||
background-color: #edf4fc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 空图外层复用 welfare-list-card__cover 的固定高度，避免占位高度被 100% 覆盖。 */
|
||||
.welfare-list-card__cover--empty {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.welfare-list-card__image-empty {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #edf4fc;
|
||||
color: #9ba9bc;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welfare-list-card__image-empty .van-icon {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.welfare-list-card__image-empty span {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.welfare-list-card__body {
|
||||
position: relative;
|
||||
padding: 12px 42px 14px 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welfare-list-card__head {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
.welfare-list-card__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
color: #202938;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 23px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
/* 时间信息样式 */
|
||||
.wf-time-row {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
.wf-time-label {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
|
||||
.welfare-list-card__status {
|
||||
display: inline-flex;
|
||||
min-width: 54px;
|
||||
height: 25px;
|
||||
padding: 0 10px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 13px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.welfare-list-card__status.is-available {
|
||||
color: #1989fa;
|
||||
background-color: #eaf3ff;
|
||||
}
|
||||
|
||||
.welfare-list-card__status.is-selected {
|
||||
color: #2da66f;
|
||||
background-color: #e9f8f0;
|
||||
}
|
||||
|
||||
.welfare-list-card__status.is-upcoming {
|
||||
color: #d78b20;
|
||||
background-color: #fff5e4;
|
||||
}
|
||||
|
||||
.welfare-list-card__status.is-ended {
|
||||
color: #8793a5;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.welfare-list-card__time {
|
||||
margin-top: 6px;
|
||||
overflow: hidden;
|
||||
color: #8491a6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.welfare-list-card__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 14px;
|
||||
color: #adb7c6;
|
||||
font-size: 17px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.welfare-list-page .van-list__finished-text,
|
||||
.welfare-list-page .van-list__loading {
|
||||
color: #9aa7b8;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.welfare-list-empty {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
padding: 28px 18px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 空状态插画按原始宽高比缩放，避免被 Vant 默认方形图片容器挤压变形。 */
|
||||
.welfare-list-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.welfare-list-empty__title {
|
||||
margin-top: -8px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.welfare-list-empty__hint {
|
||||
margin-top: 6px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="我的福利"></van-nav-bar>
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="5" @change="doSearch" v-model="pageForm.year"></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<div class="welfare-list-page">
|
||||
<van-nav-bar
|
||||
title="我的福利"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
fixed
|
||||
placeholder
|
||||
@click-left="goBack"
|
||||
></van-nav-bar>
|
||||
|
||||
<div>
|
||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
|
||||
<div class="wf-welfare-list">
|
||||
<div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openView(row)">
|
||||
<van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
|
||||
{{row.isChoose?'已选择':'未选择'}}
|
||||
</van-tag>
|
||||
<div class="wf-card-layout">
|
||||
<div class="wf-card-img-container">
|
||||
<van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
|
||||
</div>
|
||||
<div class="wf-card-content">
|
||||
<div class="wf-card-heading">{{row.name}}</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">开始时间:</span>
|
||||
{{$moment(row.choiceTimeStart).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">结束时间:</span>
|
||||
{{$moment(row.choiceTimeEnd).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="welfare-list-content">
|
||||
<section class="welfare-list-hero">
|
||||
<img
|
||||
class="welfare-list-hero__image"
|
||||
src="/assets/mobile/img/home/v4/feature-benefit.png"
|
||||
alt="暖心福利插画"
|
||||
>
|
||||
<div class="welfare-list-hero__copy">
|
||||
<div class="welfare-list-hero__title">暖心福利</div>
|
||||
<div class="welfare-list-hero__subtitle">精选好礼 · 乐享生活</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="welfare-list-filter-sticky">
|
||||
<van-dropdown-menu class="welfare-list-filter" active-color="#1989fa">
|
||||
<year-van-dropdown-item
|
||||
:num="5"
|
||||
v-model="pageForm.year"
|
||||
@change="doSearch"
|
||||
></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-list
|
||||
v-if="tableData.length > 0"
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="pageData"
|
||||
>
|
||||
<div class="welfare-list-cards">
|
||||
<article
|
||||
v-for="row in tableData"
|
||||
:key="row.id"
|
||||
class="welfare-list-card"
|
||||
@click="openView(row)"
|
||||
>
|
||||
<van-image
|
||||
v-if="hasCoverImage(row.cover)"
|
||||
class="welfare-list-card__cover"
|
||||
:src="row.cover"
|
||||
:alt="row.name"
|
||||
width="100%"
|
||||
>
|
||||
<template #loading>
|
||||
<van-loading type="spinner" size="22"></van-loading>
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="welfare-list-card__image-empty">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>暂无图片</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-image>
|
||||
<div v-else class="welfare-list-card__cover welfare-list-card__cover--empty">
|
||||
<div class="welfare-list-card__image-empty">
|
||||
<van-icon name="photo-o"></van-icon>
|
||||
<span>暂无图片</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welfare-list-card__body">
|
||||
<div class="welfare-list-card__head">
|
||||
<div class="welfare-list-card__title">{{ row.name }}</div>
|
||||
<span
|
||||
class="welfare-list-card__status"
|
||||
:class="row.isChoose ? 'is-selected' : 'is-available'"
|
||||
>{{ row.isChoose ? '已选择' : '未选择' }}</span>
|
||||
</div>
|
||||
<div class="welfare-list-card__time" v-if="row.choiceTimeStart && row.choiceTimeEnd">
|
||||
选择时间：{{ $moment(row.choiceTimeStart).format('MM/DD HH:mm') }} - {{ $moment(row.choiceTimeEnd).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="welfare-list-card__time" v-else>选择时间：未设置</div>
|
||||
<van-icon class="welfare-list-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</van-list>
|
||||
|
||||
<div class="welfare-list-empty" v-else-if="!loading">
|
||||
<img src="/assets/mobile/img/benefit/welfare-empty.png" alt="福利项目空状态插画">
|
||||
<div class="welfare-list-empty__title">暂无福利项目</div>
|
||||
<div class="welfare-list-empty__hint">当前年度暂未发布福利项目</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
<select-view ref="selectViewRef"></select-view>
|
||||
</div>
|
||||
@@ -125,34 +440,59 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$pjaxReplace("/platform/h5/home")
|
||||
},
|
||||
doSearch() {
|
||||
this.tableKey = new Date().getTime()
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.pageData()
|
||||
},
|
||||
|
||||
/**
|
||||
* 我的福利分页接口参数：pageNumber 为页码、pageSize 为每页条数、year 为查询年度。
|
||||
* 接口返回 Result<Pagination>，data.list 为福利项目数组，data.totalCount 为项目总数。
|
||||
*/
|
||||
pageData() {
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/welfare/mine/pageData", this.pageForm).then((res) => {
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
if (this.tableData.length === res.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
this.loading = false
|
||||
})
|
||||
this.$axios.post("/platform/welfare/mine/pageData", this.pageForm)
|
||||
.then((res) => {
|
||||
if (res.code !== 0 || !res.data) return
|
||||
const list = res.data.list || []
|
||||
this.tableData = this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data.totalCount || 0
|
||||
if (this.tableData.length >= this.pageForm.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
async getUserSelection(projectId) {
|
||||
const resp = await this.$axios.post("/platform/welfare/mine/getUserSelection", {
|
||||
|
||||
/**
|
||||
* 查询福利选择详情，projectId 为福利项目 ID，userId 使用当前登录用户 ID。
|
||||
* 返回值为 Axios Promise，响应 data 为用户已选择的福利明细数组。
|
||||
*/
|
||||
getUserSelection(projectId) {
|
||||
return this.$axios.post("/platform/welfare/mine/getUserSelection", {
|
||||
projectId: projectId,
|
||||
userId: this.$store.state.user.id
|
||||
})
|
||||
return resp
|
||||
},
|
||||
async openView(item) {
|
||||
|
||||
/**
|
||||
* 判断福利封面地址是否有效。cover 应为非空图片 URL 字符串；返回 Boolean，true 时渲染图片组件，false 时展示“暂无图片”占位。
|
||||
*/
|
||||
hasCoverImage(cover) {
|
||||
return typeof cover === "string" && !!cover.trim()
|
||||
},
|
||||
|
||||
openView(item) {
|
||||
this.$refs.selectViewRef.onOpen(item.id)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -324,7 +324,7 @@ const selectView = {
|
||||
/deep/ .welfare-card__header i {
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
color: var(--color-primary);
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
/deep/ .welfare-card__header span {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -3,101 +3,379 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
/* 列表卡片样式 */
|
||||
.wf-welfare-list {
|
||||
padding: 10px;
|
||||
body {
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
.wf-welfare-card {
|
||||
|
||||
.welfare-list-page {
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.welfare-list-page .van-nav-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.welfare-list-page .van-nav-bar__title {
|
||||
color: #1f2937;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.welfare-list-page .van-nav-bar .van-icon,
|
||||
.welfare-list-page .van-nav-bar__text {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.welfare-list-content {
|
||||
padding: 12px 12px 0;
|
||||
}
|
||||
|
||||
.welfare-list-hero {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
height: 134px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff0f1;
|
||||
box-shadow: 0 8px 20px rgba(190, 89, 98, .12);
|
||||
}
|
||||
/* 左右布局容器 */
|
||||
.wf-card-layout {
|
||||
|
||||
.welfare-list-hero__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.welfare-list-hero__copy {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
padding-left: 18px;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
text-shadow: 0 2px 8px rgba(190, 74, 84, .55);
|
||||
}
|
||||
/* 左侧图片容器 */
|
||||
.wf-card-img-container {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 15px;
|
||||
|
||||
.welfare-list-hero__title {
|
||||
font-size: 25px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
/* 右侧信息容器 */
|
||||
.wf-card-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.welfare-list-hero__subtitle {
|
||||
margin-top: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.welfare-list-filter-sticky {
|
||||
padding: 10px 0 1px;
|
||||
background-color: #f3f7fd;
|
||||
}
|
||||
|
||||
.van-sticky--fixed .welfare-list-filter-sticky {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welfare-list-filter {
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 16px rgba(43, 73, 112, .08);
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__bar {
|
||||
height: 44px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__title {
|
||||
color: #263548;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-menu__title--active,
|
||||
.welfare-list-filter .van-dropdown-item__option--active,
|
||||
.welfare-list-filter .van-dropdown-item__option--active .van-dropdown-item__icon {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-item__content {
|
||||
width: calc(100% - 24px);
|
||||
margin: 0 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
box-shadow: 0 10px 24px rgba(31, 65, 108, .14);
|
||||
}
|
||||
|
||||
.welfare-list-filter .van-dropdown-item__option {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
color: #46566c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.welfare-list-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
/* 标题样式 */
|
||||
.wf-card-heading {
|
||||
|
||||
.welfare-list-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.welfare-list-card__cover {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: #f7f9fc;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* 福利封面统一高度并从中心覆盖显示，保证卡片整齐且不产生两侧留白。 */
|
||||
.welfare-list-card__cover .van-image__img {
|
||||
width: 100%;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
object-position: center;
|
||||
background-color: #f7f9fc;
|
||||
}
|
||||
|
||||
.welfare-list-card__cover .van-image__loading,
|
||||
.welfare-list-card__cover .van-image__error {
|
||||
color: #9ba9bc;
|
||||
background-color: #edf4fc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.welfare-list-card__body {
|
||||
position: relative;
|
||||
padding: 12px 42px 14px 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.welfare-list-card__head {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
}
|
||||
|
||||
.welfare-list-card__title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
color: #202938;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
line-height: 23px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
/* 时间信息样式 */
|
||||
.wf-time-row {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
.wf-time-label {
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
|
||||
.welfare-list-card__status {
|
||||
display: inline-flex;
|
||||
min-width: 54px;
|
||||
height: 25px;
|
||||
padding: 0 10px;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 13px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.welfare-list-card__status.is-available {
|
||||
color: #1989fa;
|
||||
background-color: #eaf3ff;
|
||||
}
|
||||
|
||||
.welfare-list-card__status.is-selected {
|
||||
color: #2da66f;
|
||||
background-color: #e9f8f0;
|
||||
}
|
||||
|
||||
.welfare-list-card__status.is-upcoming {
|
||||
color: #d78b20;
|
||||
background-color: #fff5e4;
|
||||
}
|
||||
|
||||
.welfare-list-card__status.is-ended {
|
||||
color: #8793a5;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.welfare-list-card__time {
|
||||
margin-top: 6px;
|
||||
overflow: hidden;
|
||||
color: #8491a6;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.welfare-list-card__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 14px;
|
||||
color: #adb7c6;
|
||||
font-size: 17px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.welfare-list-page .van-list__finished-text,
|
||||
.welfare-list-page .van-list__loading {
|
||||
color: #9aa7b8;
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.welfare-list-empty {
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
padding: 28px 18px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 空状态插画按原始宽高比缩放，避免被 Vant 默认方形图片容器挤压变形。 */
|
||||
.welfare-list-empty img {
|
||||
display: block;
|
||||
width: 86%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.welfare-list-empty__title {
|
||||
margin-top: -8px;
|
||||
color: #50627a;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.welfare-list-empty__hint {
|
||||
margin-top: 6px;
|
||||
color: #9aa7b8;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-sticky>
|
||||
<van-nav-bar @click-left="()=>this.$pjaxReplace('/platform/h5/home')" left-arrow left-text="返回" placeholder title="福利列表"></van-nav-bar>
|
||||
<van-dropdown-menu>
|
||||
<year-van-dropdown-item :num="10" v-model="pageForm.year" @change="doSearch"></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
<div class="welfare-list-page">
|
||||
<van-nav-bar
|
||||
title="福利列表"
|
||||
left-arrow
|
||||
left-text="返回"
|
||||
fixed
|
||||
placeholder
|
||||
@click-left="goBack"
|
||||
></van-nav-bar>
|
||||
|
||||
<div>
|
||||
<van-list :finished="finished" @load="pageData" finished-text="没有更多了" v-if="tableData.length>0" v-model="loading">
|
||||
<div class="wf-welfare-list">
|
||||
<div class="wf-welfare-card" v-for="row in tableData" :key="row.id" @click="openChoose(row)">
|
||||
<van-tag mark :type="row.isChoose?'success':''" style="position: absolute; left: 5px; top: 5px; z-index: 1">
|
||||
{{row.isChoose?'已选择':'未选择'}}
|
||||
</van-tag>
|
||||
<div class="wf-card-layout">
|
||||
<div class="wf-card-img-container">
|
||||
<van-image :src="row.cover" fit="cover" width="100%" height="100%" radius="4"></van-image>
|
||||
</div>
|
||||
<div class="wf-card-content">
|
||||
<div class="wf-card-heading">{{row.name}}</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">开始时间:</span>
|
||||
{{$moment(row.choiceTimeStart).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
<div class="wf-time-row">
|
||||
<span class="wf-time-label">结束时间:</span>
|
||||
{{$moment(row.choiceTimeEnd).format('YYYY-MM-DD HH:mm')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="welfare-list-content">
|
||||
<section class="welfare-list-hero">
|
||||
<img
|
||||
class="welfare-list-hero__image"
|
||||
src="/assets/mobile/img/home/v4/feature-benefit.png"
|
||||
alt="暖心福利插画"
|
||||
>
|
||||
<div class="welfare-list-hero__copy">
|
||||
<div class="welfare-list-hero__title">暖心福利</div>
|
||||
<div class="welfare-list-hero__subtitle">精选好礼 · 乐享生活</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<van-sticky :offset-top="46">
|
||||
<div class="welfare-list-filter-sticky">
|
||||
<van-dropdown-menu class="welfare-list-filter" active-color="#1989fa">
|
||||
<year-van-dropdown-item
|
||||
:num="10"
|
||||
v-model="pageForm.year"
|
||||
@change="doSearch"
|
||||
></year-van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
</van-sticky>
|
||||
|
||||
<van-list
|
||||
v-if="tableData.length > 0"
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="pageData"
|
||||
>
|
||||
<div class="welfare-list-cards">
|
||||
<article
|
||||
v-for="row in tableData"
|
||||
:key="row.id"
|
||||
class="welfare-list-card"
|
||||
@click="openChoose(row)"
|
||||
>
|
||||
<van-image
|
||||
class="welfare-list-card__cover"
|
||||
:src="row.cover"
|
||||
:alt="row.name"
|
||||
width="100%"
|
||||
>
|
||||
<template #loading>
|
||||
<van-loading type="spinner" size="22"></van-loading>
|
||||
</template>
|
||||
<template #error>
|
||||
<van-icon name="photo-o" size="34"></van-icon>
|
||||
</template>
|
||||
</van-image>
|
||||
|
||||
<div class="welfare-list-card__body">
|
||||
<div class="welfare-list-card__head">
|
||||
<div class="welfare-list-card__title">{{ row.name }}</div>
|
||||
<span
|
||||
class="welfare-list-card__status"
|
||||
:class="'is-' + getWelfareStatus(row).type"
|
||||
>{{ getWelfareStatus(row).text }}</span>
|
||||
</div>
|
||||
<div class="welfare-list-card__time" v-if="row.choiceTimeStart && row.choiceTimeEnd">
|
||||
选择时间：{{ $moment(row.choiceTimeStart).format('MM/DD HH:mm') }} - {{ $moment(row.choiceTimeEnd).format('MM/DD HH:mm') }}
|
||||
</div>
|
||||
<div class="welfare-list-card__time" v-else>选择时间：未设置</div>
|
||||
<van-icon class="welfare-list-card__arrow" name="arrow"></van-icon>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</van-list>
|
||||
|
||||
<div class="welfare-list-empty" v-else-if="!loading">
|
||||
<img src="/assets/mobile/img/benefit/welfare-empty.png" alt="福利项目空状态插画">
|
||||
<div class="welfare-list-empty__title">暂无福利项目</div>
|
||||
<div class="welfare-list-empty__hint">当前年度暂未发布可选择的福利项目</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<van-empty v-else image="/assets/platform/plugins/vant-green/images/nodata/nodata.png" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -118,28 +396,63 @@ layout("/layouts/platform_h5.html"){
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
this.$pjaxReplace("/platform/h5/home")
|
||||
},
|
||||
doSearch() {
|
||||
this.tableKey = new Date().getTime()
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.pageData()
|
||||
},
|
||||
|
||||
/**
|
||||
* 福利列表分页接口参数：pageNumber 为页码、pageSize 为每页条数、year 为查询年度。
|
||||
* 接口返回 Result<Pagination>，data.list 为福利项目数组，data.totalCount 为项目总数。
|
||||
*/
|
||||
pageData() {
|
||||
this.loading = true
|
||||
this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm).then((res) => {
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
if (this.tableData.length === res.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
this.loading = false
|
||||
})
|
||||
this.$axios.post("/platform/welfare/userSelect/pageData", this.pageForm)
|
||||
.then((res) => {
|
||||
if (res.code !== 0 || !res.data) return
|
||||
const list = res.data.list || []
|
||||
this.tableData = this.tableData.concat(list)
|
||||
this.pageForm.totalCount = res.data.totalCount || 0
|
||||
if (this.tableData.length >= this.pageForm.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
async openChoose(row) {
|
||||
/**
|
||||
* 福利状态优先展示用户选择结果，其次根据选择起止时间区分未开始、可选择和已结束。
|
||||
* @param row 福利项目，需包含 isChoose、choiceTimeStart、choiceTimeEnd
|
||||
* @return {{type: string, text: string}} type 用于状态样式，text 为页面展示文案
|
||||
*/
|
||||
getWelfareStatus(row) {
|
||||
if (Number(row.isChoose) === 1) {
|
||||
return {type: "selected", text: "已选择"}
|
||||
}
|
||||
|
||||
const now = new Date().getTime()
|
||||
const startTime = row.choiceTimeStart ? new Date(row.choiceTimeStart).getTime() : null
|
||||
const endTime = row.choiceTimeEnd ? new Date(row.choiceTimeEnd).getTime() : null
|
||||
if (startTime && now < startTime) {
|
||||
return {type: "upcoming", text: "未开始"}
|
||||
}
|
||||
if (endTime && now > endTime) {
|
||||
return {type: "ended", text: "已结束"}
|
||||
}
|
||||
return {type: "available", text: "可选择"}
|
||||
},
|
||||
|
||||
openChoose(row) {
|
||||
this.$pjaxReplace("/platform/h5/welfare/userSelect/index?id=" + row.id)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
/* 当前福利成功页覆盖全局 H5 的 Vant 主色。 */
|
||||
--color-primary: #1989fa;
|
||||
}
|
||||
|
||||
.success-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
|
||||
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
/* 当前福利选择页覆盖全局 H5 的 Vant 主色。 */
|
||||
--color-primary: #1989fa;
|
||||
}
|
||||
|
||||
.selection:not(:last-child) {
|
||||
border-bottom: 1px dashed lightgrey;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,11 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
/* 当前福利列表覆盖全局 H5 的 Vant 主色。 */
|
||||
--color-primary: #1989fa;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
|
||||
Reference in New Issue
Block a user