fix_会员模块UI测试整改:页面卡片标题栏优化,查看、审核按钮需要从右向左抽屉式打开
This commit is contained in:
+6
-6
@@ -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
|
||||
|
||||
+6
-6
@@ -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) {
|
||||
|
||||
+46
-31
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user