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

This commit is contained in:
2026-09-01 10:40:36 +08:00
parent 4db67dfccf
commit 458aeeb6c8
6 changed files with 128 additions and 69 deletions
@@ -430,17 +430,17 @@ layout("/layouts/platform_h5.html"){
// 查看详情
onView(row) {
this.showApprovalForm = false
this.$refs.infoRef.onOpen(row)
this.$set(this, "showApprovalForm", false)
this.$refs.infoRef.onOpen(row, "入会申请详情")
},
onApproval(row) {
this.showApprovalForm = true
this.$refs.infoRef.onOpen(row)
this.formData = {
this.$set(this, "showApprovalForm", true)
this.$refs.infoRef.onOpen(row, "分工会审核")
this.$set(this, "formData", {
processTaskId: row.taskId,
taskName: row.curTaskName
}
})
},
handleTaskAction(val) {
@@ -1,7 +1,10 @@
const INFO = {
template: /*language=HTML*/ `
<van-action-sheet v-model="visible" class="member-info-sheet" title="入会申请详情"
:close-on-click-overlay="false" @close="handleComponentClose">
<van-popup v-model="visible" class="member-full-popup" position="right"
: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-list-skeleton" v-if="detailLoading">
<div class="member-list-skeleton__card" v-for="index in 3" :key="'detail-skeleton-' + index">
@@ -115,14 +118,16 @@ const INFO = {
</section>
</template>
</template>
<slot></slot>
</div>
<slot></slot>
</van-action-sheet>
</div>
</van-popup>
`,
dicts: ["PROCESS_TASK_SUBMIT_TYPE"],
data() {
return {
visible: false,
popupTitle: "入会申请详情",
row: {},
viewData: {},
doneTasks: [],
@@ -134,10 +139,11 @@ const INFO = {
methods: {
/**
* 打开入会申请详情。
* row 传列表当前申请记录,至少包含申请 id;无返回值,详情和已办任务并行加载
* row 传列表当前申请记录,至少包含申请 id;popupTitle 传右侧抽屉导航标题;无返回值。
*/
onOpen(row) {
onOpen(row, popupTitle = "入会申请详情") {
this.$set(this, "row", row)
this.$set(this, "popupTitle", popupTitle)
window.h5HistoryLayerManager.ensureRegistered("member-apply-detail")
window.h5HistoryLayerManager.open(this.historyLayerName)
this.detailLoading = true
@@ -430,17 +430,17 @@ layout("/layouts/platform_h5.html"){
// 查看详情
onView(row) {
this.showApprovalForm = false
this.$refs.infoRef.onOpen(row)
this.$set(this, "showApprovalForm", false)
this.$refs.infoRef.onOpen(row, "入会申请详情")
},
onApproval(row) {
this.showApprovalForm = true
this.$refs.infoRef.onOpen(row)
this.formData = {
this.$set(this, "showApprovalForm", true)
this.$refs.infoRef.onOpen(row, "校工会审核")
this.$set(this, "formData", {
processTaskId: row.taskId,
taskName: row.curTaskName
}
})
},
handleTaskAction(val) {
@@ -4,11 +4,11 @@ layout("/layouts/platform_h5.html"){
<style id="style-member-apply-submit-h5">
<!--#include("../../theme.css"){}#-->
.up_down > .van-cell {
.up_down > .van-cell-group > .van-cell {
flex-flow: column;
}
.up_down > .van-cell > .van-field__label {
.up_down > .van-cell-group > .van-cell > .van-field__label {
width: 100%;
}
@@ -85,7 +85,9 @@ layout("/layouts/platform_h5.html"){
</div>
<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.username" label="姓名" readonly></van-field>
<van-field v-model="formData.sex" label="性别" readonly></van-field>
@@ -278,10 +280,13 @@ layout("/layouts/platform_h5.html"){
clearable
maxlength="25"
></van-field>-->
</van-cell-group>
</van-cell-group>
</section>
<van-cell-group title="家庭信息" class="form-section up_down">
<div class="van-cell">
<section class="form-section up_down">
<h2 class="member-form-section__title">家庭信息</h2>
<van-cell-group :border="false">
<div class="van-cell">
<div class="member-family-heading">
<span>家庭主要成员及联系方式</span>
<van-button v-if="formData.families && formData.families.length>0 && formData.families.length<5"
@@ -318,32 +323,42 @@ layout("/layouts/platform_h5.html"){
native-type="button"></van-button>
</div>
</template>
</div>
</van-cell-group>
<van-cell-group title="个人学习及工作经历" class="form-section">
<text-editor v-model="formData.personalData"></text-editor>
</van-cell-group>
<van-cell-group title="特长及获奖情况" class="form-section">
<text-editor v-model="formData.specialty"></text-editor>
</van-cell-group>
<van-cell-group title="入会意愿" class="form-section">
<van-checkbox class="member-voluntary" icon-size="22px"
v-model="formData.isVoluntary" shape="square">
<div class="member-voluntary__paragraph">
<span :style="'color:' + (formData.isVoluntary ? '#1989fa' : '#F56C6C') ">
我自愿申请加入学校工会,并委托学校按规定代为扣缴工会会员会费。
</span>
</div>
<div class="member-voluntary__paragraph">
<span :style="'color:' + (formData.isVoluntary ? '#1989fa' : '#F56C6C') ">
我将严格遵守工会章程,认真执行工会决议,积极参与工会活动,主动融入“学校健康幸福家”建设,为营造温暖、和谐、奋进的校园氛围贡献力量,以实际行动助力学校各项事业发展。
</span>
</div>
</van-checkbox>
</van-cell-group>
</van-cell-group>
</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>
</van-cell-group>
</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>
</van-cell-group>
</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"
v-model="formData.isVoluntary" shape="square">
<div class="member-voluntary__paragraph">
<span :style="'color:' + (formData.isVoluntary ? '#1989fa' : '#F56C6C') ">
我自愿申请加入学校工会,并委托学校按规定代为扣缴工会会员会费。
</span>
</div>
<div class="member-voluntary__paragraph">
<span :style="'color:' + (formData.isVoluntary ? '#1989fa' : '#F56C6C') ">
我将严格遵守工会章程,认真执行工会决议,积极参与工会活动,主动融入“学校健康幸福家”建设,为营造温暖、和谐、奋进的校园氛围贡献力量,以实际行动助力学校各项事业发展。
</span>
</div>
</van-checkbox>
</van-cell-group>
</section>
<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 v-if="!taskId" block type="primary" class="member-submit-button" :loading="formLoading && loadingAction === 'submit'" :disabled="formLoading" @click.submit="onSubmit">提交申请</van-button>
@@ -322,9 +322,14 @@ layout("/layouts/platform_h5.html"){
</div>
</main>
<van-action-sheet v-model="infoShow" class="member-info-sheet" title="会员详细信息" :close-on-click-overlay="false" @close="handleInfoSheetClose">
<member-info ref="memberInfoRef" :user-id="userId"></member-info>
</van-action-sheet>
<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>
</div>
</van-popup>
</div>
</div>
</div>
@@ -396,6 +401,10 @@ layout("/layouts/platform_h5.html"){
this.$set(this, "userId", row.id)
window.h5HistoryLayerManager.open("member-info")
},
// 顶部返回按钮只关闭当前会员详情抽屉,不离开会员档案列表。
closeMemberInfo() {
window.h5HistoryLayerManager.close("member-info")
},
handleInfoSheetClose() {
if (window.h5HistoryLayerManager.stack.includes("member-info")) {
window.h5HistoryLayerManager.close("member-info")
@@ -309,28 +309,39 @@ body {
}
.member-application-form .form-section {
margin-bottom: 10px;
margin-bottom: 11px;
overflow: hidden;
border: 1px solid var(--member-border);
border-radius: 12px;
border: 1px solid #e9eff7;
border-radius: 10px;
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;
color: #354255;
background: #fff;
font-size: 13px;
line-height: 20px;
font-weight: 600;
}
.member-application-form .van-cell-group__title::before {
.member-form-section__title::before {
position: absolute;
top: 15px;
bottom: 11px;
left: 12px;
width: 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 {
@@ -413,36 +424,54 @@ body {
padding: 0;
}
.member-info-sheet {
height: 88%;
.member-full-popup {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 16px 16px 0 0;
background: var(--member-page-bg);
}
.member-info-sheet .van-action-sheet__header {
height: 48px;
color: #1f2937;
.member-full-popup__page {
display: flex;
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;
}
.member-full-popup__page > .van-nav-bar .van-nav-bar__title {
color: #172033;
font-size: 16px;
line-height: 48px;
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 {
height: calc(100% - 48px);
min-height: 0;
padding: 12px 12px calc(82px + env(safe-area-inset-bottom));
overflow-y: auto;
flex: 1;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.member-detail-card {
margin-bottom: 10px;
margin-bottom: 11px;
overflow: hidden;
border-radius: 12px;
border: 1px solid #e9eff7;
border-radius: 10px;
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 {