c-zhouhf1/zhgh_cug
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix_会员模块UI测试整改：页面卡片标题栏优化，查看、审核按钮需要从右向左抽屉式打开

Browse Source
This commit is contained in:
c-zhangr1
2026-09-01 10:40:36 +08:00
parent 4db67dfccf
commit 458aeeb6c8
6 changed files with 128 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/platform/zhghh5/staffmanage/member/apply/branchunionapproval/index.html
+6 -6
View File
@@ -430,17 +430,17 @@ layout("/layouts/platform_h5.html"){
// 查看详情 // 查看详情
onView(row) { onView(row) {
this.showApprovalForm = false this.$set(this, "showApprovalForm", false)
this.$refs.infoRef.onOpen(row) this.$refs.infoRef.onOpen(row, "入会申请详情")
}, },
onApproval(row) { onApproval(row) {
this.showApprovalForm = true this.$set(this, "showApprovalForm", true)
this.$refs.infoRef.onOpen(row) this.$refs.infoRef.onOpen(row, "分工会审核")
this.formData = { this.$set(this, "formData", {
processTaskId: row.taskId, processTaskId: row.taskId,
taskName: row.curTaskName taskName: row.curTaskName
} })
}, },
handleTaskAction(val) { handleTaskAction(val) {
src/main/resources/views/platform/zhghh5/staffmanage/member/apply/common/info.js
+12 -6
View File
@@ -1,7 +1,10 @@
const INFO = { const INFO = {
template: /*language=HTML*/ ` template: /*language=HTML*/ `
<van-action-sheet v-model="visible" class="member-info-sheet" title="入会申请详情" <van-popup v-model="visible" class="member-full-popup" position="right"
:close-on-click-overlay="false" @close="handleComponentClose"> :close-on-click-overlay="false" get-container="#app" @close="handleComponentClose">
<div class="member-full-popup__page">
<van-nav-bar :title="popupTitle" left-text="返回" left-arrow fixed
@click-left="onClose()"></van-nav-bar>
<div class="member-info-scroll"> <div class="member-info-scroll">
<div class="member-list-skeleton" v-if="detailLoading"> <div class="member-list-skeleton" v-if="detailLoading">
<div class="member-list-skeleton__card" v-for="index in 3" :key="'detail-skeleton-' + index"> <div class="member-list-skeleton__card" v-for="index in 3" :key="'detail-skeleton-' + index">
@@ -115,14 +118,16 @@ const INFO = {
</section> </section>
</template> </template>
</template> </template>
</div>
<slot></slot> <slot></slot>
</van-action-sheet> </div>
</div>
</van-popup>
`, `,
dicts: ["PROCESS_TASK_SUBMIT_TYPE"], dicts: ["PROCESS_TASK_SUBMIT_TYPE"],
data() { data() {
return { return {
visible: false, visible: false,
popupTitle: "入会申请详情",
row: {}, row: {},
viewData: {}, viewData: {},
doneTasks: [], doneTasks: [],
@@ -134,10 +139,11 @@ const INFO = {
methods: { methods: {
/** /**
* 打开入会申请详情。 * 打开入会申请详情。
* row 传列表当前申请记录，至少包含申请 id；无返回值，详情和已办任务并行加载。 * row 传列表当前申请记录，至少包含申请 id；popupTitle 传右侧抽屉导航标题；无返回值。
*/ */
onOpen(row) { onOpen(row, popupTitle = "入会申请详情") {
this.$set(this, "row", row) this.$set(this, "row", row)
this.$set(this, "popupTitle", popupTitle)
window.h5HistoryLayerManager.ensureRegistered("member-apply-detail") window.h5HistoryLayerManager.ensureRegistered("member-apply-detail")
window.h5HistoryLayerManager.open(this.historyLayerName) window.h5HistoryLayerManager.open(this.historyLayerName)
this.detailLoading = true this.detailLoading = true
src/main/resources/views/platform/zhghh5/staffmanage/member/apply/schoolunionapproval/index.html
+6 -6
View File
@@ -430,17 +430,17 @@ layout("/layouts/platform_h5.html"){
// 查看详情 // 查看详情
onView(row) { onView(row) {
this.showApprovalForm = false this.$set(this, "showApprovalForm", false)
this.$refs.infoRef.onOpen(row) this.$refs.infoRef.onOpen(row, "入会申请详情")
}, },
onApproval(row) { onApproval(row) {
this.showApprovalForm = true this.$set(this, "showApprovalForm", true)
this.$refs.infoRef.onOpen(row) this.$refs.infoRef.onOpen(row, "校工会审核")
this.formData = { this.$set(this, "formData", {
processTaskId: row.taskId, processTaskId: row.taskId,
taskName: row.curTaskName taskName: row.curTaskName
} })
}, },
handleTaskAction(val) { handleTaskAction(val) {
src/main/resources/views/platform/zhghh5/staffmanage/member/apply/submit/index.html
+22 -7
View File
@@ -4,11 +4,11 @@ layout("/layouts/platform_h5.html"){
<style id="style-member-apply-submit-h5"> <style id="style-member-apply-submit-h5">
<!--#include("../../theme.css"){}#--> <!--#include("../../theme.css"){}#-->
.up_down > .van-cell { .up_down > .van-cell-group > .van-cell {
flex-flow: column; flex-flow: column;
} }
.up_down > .van-cell > .van-field__label { .up_down > .van-cell-group > .van-cell > .van-field__label {
width: 100%; width: 100%;
} }
@@ -85,7 +85,9 @@ layout("/layouts/platform_h5.html"){
</div> </div>
<van-form ref="formRef" class="form-container member-application-form" :show-error-message="false"> <van-form ref="formRef" class="form-container member-application-form" :show-error-message="false">
<van-cell-group title="基础信息" class="form-section"> <section class="form-section">
<h2 class="member-form-section__title">基础信息</h2>
<van-cell-group :border="false">
<van-field v-model="formData.loginname" label="工号" readonly></van-field> <van-field v-model="formData.loginname" label="工号" readonly></van-field>
<van-field v-model="formData.username" label="姓名" readonly></van-field> <van-field v-model="formData.username" label="姓名" readonly></van-field>
<van-field v-model="formData.sex" label="性别" readonly></van-field> <van-field v-model="formData.sex" label="性别" readonly></van-field>
@@ -279,8 +281,11 @@ layout("/layouts/platform_h5.html"){
maxlength="25" maxlength="25"
></van-field>--> ></van-field>-->
</van-cell-group> </van-cell-group>
</section>
<van-cell-group title="家庭信息" class="form-section up_down"> <section class="form-section up_down">
<h2 class="member-form-section__title">家庭信息</h2>
<van-cell-group :border="false">
<div class="van-cell"> <div class="van-cell">
<div class="member-family-heading"> <div class="member-family-heading">
<span>家庭主要成员及联系方式</span> <span>家庭主要成员及联系方式</span>
@@ -320,16 +325,25 @@ layout("/layouts/platform_h5.html"){
</template> </template>
</div> </div>
</van-cell-group> </van-cell-group>
</section>
<van-cell-group title="个人学习及工作经历" class="form-section"> <section class="form-section">
<h2 class="member-form-section__title">个人学习及工作经历</h2>
<van-cell-group :border="false">
<text-editor v-model="formData.personalData"></text-editor> <text-editor v-model="formData.personalData"></text-editor>
</van-cell-group> </van-cell-group>
</section>
<van-cell-group title="特长及获奖情况" class="form-section"> <section class="form-section">
<h2 class="member-form-section__title">特长及获奖情况</h2>
<van-cell-group :border="false">
<text-editor v-model="formData.specialty"></text-editor> <text-editor v-model="formData.specialty"></text-editor>
</van-cell-group> </van-cell-group>
</section>
<van-cell-group title="入会意愿" class="form-section"> <section class="form-section">
<h2 class="member-form-section__title">入会意愿</h2>
<van-cell-group :border="false">
<van-checkbox class="member-voluntary" icon-size="22px" <van-checkbox class="member-voluntary" icon-size="22px"
v-model="formData.isVoluntary" shape="square"> v-model="formData.isVoluntary" shape="square">
<div class="member-voluntary__paragraph"> <div class="member-voluntary__paragraph">
@@ -344,6 +358,7 @@ layout("/layouts/platform_h5.html"){
</div> </div>
</van-checkbox> </van-checkbox>
</van-cell-group> </van-cell-group>
</section>
<div v-if="showActionButtons" class="member-form-actions"> <div v-if="showActionButtons" class="member-form-actions">
<van-button block plain class="member-save-button" :loading="formLoading && loadingAction === 'save'" :disabled="formLoading" @click.submit="onSave">保存草稿</van-button> <van-button block plain class="member-save-button" :loading="formLoading && loadingAction === 'save'" :disabled="formLoading" @click.submit="onSave">保存草稿</van-button>
<van-button v-if="!taskId" block type="primary" class="member-submit-button" :loading="formLoading && loadingAction === 'submit'" :disabled="formLoading" @click.submit="onSubmit">提交申请</van-button> <van-button v-if="!taskId" block type="primary" class="member-submit-button" :loading="formLoading && loadingAction === 'submit'" :disabled="formLoading" @click.submit="onSubmit">提交申请</van-button>
src/main/resources/views/platform/zhghh5/staffmanage/member/info/group/index.html
+11 -2
View File
@@ -322,9 +322,14 @@ layout("/layouts/platform_h5.html"){
</div> </div>
</main> </main>
<van-action-sheet v-model="infoShow" class="member-info-sheet" title="会员详细信息" :close-on-click-overlay="false" @close="handleInfoSheetClose"> <van-popup v-model="infoShow" class="member-full-popup" position="right"
:close-on-click-overlay="false" get-container="#app" @close="handleInfoSheetClose">
<div class="member-full-popup__page">
<van-nav-bar title="会员详细信息" left-text="返回" left-arrow fixed
@click-left="closeMemberInfo"></van-nav-bar>
<member-info ref="memberInfoRef" :user-id="userId"></member-info> <member-info ref="memberInfoRef" :user-id="userId"></member-info>
</van-action-sheet> </div>
</van-popup>
</div> </div>
</div> </div>
</div> </div>
@@ -396,6 +401,10 @@ layout("/layouts/platform_h5.html"){
this.$set(this, "userId", row.id) this.$set(this, "userId", row.id)
window.h5HistoryLayerManager.open("member-info") window.h5HistoryLayerManager.open("member-info")
}, },
// 顶部返回按钮只关闭当前会员详情抽屉，不离开会员档案列表。
closeMemberInfo() {
window.h5HistoryLayerManager.close("member-info")
},
handleInfoSheetClose() { handleInfoSheetClose() {
if (window.h5HistoryLayerManager.stack.includes("member-info")) { if (window.h5HistoryLayerManager.stack.includes("member-info")) {
window.h5HistoryLayerManager.close("member-info") window.h5HistoryLayerManager.close("member-info")
src/main/resources/views/platform/zhghh5/staffmanage/member/theme.css
+46 -17
View File
@@ -309,28 +309,39 @@ body {
} }
.member-application-form .form-section { .member-application-form .form-section {
margin-bottom: 10px; margin-bottom: 11px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--member-border); border: 1px solid #e9eff7;
border-radius: 12px; border-radius: 10px;
background: #fff; background: #fff;
box-shadow: 0 5px 16px rgba(55, 85, 126, .07); box-shadow: 0 3px 11px rgba(51, 87, 126, .08);
} }
.member-application-form .van-cell-group__title { .member-form-section__title {
position: relative;
margin: 0;
padding: 12px 14px 8px 21px; padding: 12px 14px 8px 21px;
color: #354255; color: #354255;
background: #fff; background: #fff;
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
font-weight: 600;
} }
.member-application-form .van-cell-group__title::before { .member-form-section__title::before {
position: absolute;
top: 15px; top: 15px;
bottom: 11px; bottom: 11px;
left: 12px; left: 12px;
width: 2px; width: 2px;
border-radius: 2px; border-radius: 2px;
background: var(--member-primary);
content: "";
}
.member-application-form .form-section > .van-cell-group {
margin: 0;
background: transparent;
} }
.member-application-form .van-cell { .member-application-form .van-cell {
@@ -413,36 +424,54 @@ body {
padding: 0; padding: 0;
} }
.member-info-sheet { .member-full-popup {
height: 88%; width: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
border-radius: 16px 16px 0 0;
background: var(--member-page-bg); background: var(--member-page-bg);
} }
.member-info-sheet .van-action-sheet__header { .member-full-popup__page {
height: 48px; display: flex;
color: #1f2937; height: 100%;
padding-top: 46px;
overflow: hidden;
box-sizing: border-box;
flex-direction: column;
}
.member-full-popup__page > .van-nav-bar {
z-index: 20;
background: #fff; background: #fff;
}
.member-full-popup__page > .van-nav-bar .van-nav-bar__title {
color: #172033;
font-size: 16px; font-size: 16px;
line-height: 48px;
font-weight: 600; font-weight: 600;
} }
.member-full-popup__page > .van-nav-bar .van-icon,
.member-full-popup__page > .van-nav-bar .van-nav-bar__text {
color: var(--member-primary);
}
.member-info-scroll { .member-info-scroll {
height: calc(100% - 48px); min-height: 0;
padding: 12px 12px calc(82px + env(safe-area-inset-bottom)); padding: 12px 12px calc(82px + env(safe-area-inset-bottom));
overflow-y: auto; overflow-y: auto;
flex: 1;
box-sizing: border-box; box-sizing: border-box;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.member-detail-card { .member-detail-card {
margin-bottom: 10px; margin-bottom: 11px;
overflow: hidden; overflow: hidden;
border-radius: 12px; border: 1px solid #e9eff7;
border-radius: 10px;
background: #fff; background: #fff;
box-shadow: 0 5px 16px rgba(55, 85, 126, .07); box-shadow: 0 3px 11px rgba(51, 87, 126, .08);
} }
.member-detail-card__title { .member-detail-card__title {