手机端社团UI优化

2026-08-30 11:11:29 +08:00
parent 37f874f31d
commit bc8f23a61d
11 changed files with 1085 additions and 695 deletions
@@ -57,8 +57,14 @@ public class ClubUserJoinMineController {

    @At
 	@SaCheckPermission(value = {"club.join.mine", "h5.club.join.mine"}, mode = SaMode.OR)
+    /**
+     * 我的申请分页查询。
+     * pageForm 为分页参数，year 为申请年度，clubName 为可选的社团名称关键字；
+     * 返回分页后的当前用户社团申请记录。
+     */
    public Result pageData(@Valid PageForm pageForm,
-						   @Param("year") Integer year){
+						   @Param("year") Integer year,
+                           @Param("clubName") String clubName){
        Sql sql = Sqls.create("""
                SELECT
                	info.*,
@@ -94,6 +100,9 @@ public class ClubUserJoinMineController {
        Cnd cnd = Cnd.NEW();
        cnd.and("info.userId", "=", SecurityUtil.getUserId());
 		cnd.andEX("year(info.applyDate)", "=", year);
+        if (clubName != null && !clubName.trim().isEmpty()) {
+            cnd.and("club.clubName", "like", "%" + clubName.trim() + "%");
+        }
        cnd.groupBy("info.id");
        cnd.desc("info.applyDate");
        sql.setCondition(cnd);
@@ -18,6 +18,7 @@ import org.nutz.dao.sql.Sql;
 import org.nutz.ioc.loader.annotation.Inject;
 import org.nutz.ioc.loader.annotation.IocBean;
 import org.nutz.lang.Lang;
+import org.nutz.lang.Strings;
 import org.nutz.lang.util.NutMap;
 import org.nutz.mvc.annotation.At;
 import org.nutz.mvc.annotation.Ok;
@@ -49,6 +50,11 @@ public class ClubUserMineClubController {

    @At
 	@SaCheckPermission(value = {"club.join.mine.club", "h5.club.join.mine.club"}, mode = SaMode.OR)
+    /**
+     * 我的社团分页查询。
+     * pageForm 传入分页参数及可选社团名称；返回当前登录人已完成入会流程的社团列表，
+     * 每条记录同时包含当前成员姓名、工号和最近一次入会申请 ID，供 H5 卡片及详情页展示。
+     */
    public Result pageData(@Valid ClubUserPageForm pageForm) {
        List<ClubUser> query = dao.query(ClubUser.class, Cnd.where("userId", "=", SecurityUtil.getUserId()).groupBy("clubId"));
        if (Lang.isEmpty(query)) {
@@ -64,20 +70,37 @@ public class ClubUserMineClubController {
                SELECT
                  club.*,
                  club.id as clubId,
+                  currentUser.username AS userName,
+                  currentUser.loginname AS loginName,
+                  currentApply.id AS applyId,
                  COUNT(DISTINCT ( uc.userId )) AS currentPeopleNum,
                  presidentUser.username AS clubLeader,
                  secretaryUser.username AS clubSecretary
                FROM
                  sys_club club
                  LEFT JOIN club_user uc ON club.id = uc.clubId
+                  -- 查询当前登录人的成员资料及最近一次入会申请，避免卡片标题错误显示为社团名称。
+                  LEFT JOIN club_user currentClubUser ON currentClubUser.clubId = club.id AND currentClubUser.userId = @currentUserId
+                  LEFT JOIN sys_user currentUser ON currentUser.id = currentClubUser.userId
+                  LEFT JOIN (
+                    SELECT clubId, MAX(applyDate) AS applyDate
+                    FROM club_user_apply
+                    WHERE userId = @currentUserId AND mode = 1
+                    GROUP BY clubId
+                  ) lastApply ON lastApply.clubId = club.id
+                  LEFT JOIN club_user_apply currentApply ON currentApply.clubId = lastApply.clubId AND currentApply.userId = @currentUserId AND currentApply.applyDate = lastApply.applyDate AND currentApply.mode = 1
                  LEFT JOIN club_user presidentCu ON presidentCu.clubId = club.id AND JSON_CONTAINS(presidentCu.roleCode, '"CLUB_PRESIDENT"')
                  LEFT JOIN sys_user presidentUser ON presidentUser.id = presidentCu.userId
                  LEFT JOIN club_user secretaryCu ON secretaryCu.clubId = club.id AND JSON_CONTAINS(secretaryCu.roleCode, '"CLUB_SECRETARY"')
                  LEFT JOIN sys_user secretaryUser ON secretaryUser.id = secretaryCu.userId
                $condition
                """);
+        sql.setParam("currentUserId", SecurityUtil.getUserId());
        Cnd cnd = Cnd.NEW();
-        cnd.andEX("club.clubName", "=", pageForm.getClubName());
+        // 社团名称为可选搜索参数，输入关键字时按名称模糊匹配。
+        if (Strings.isNotBlank(pageForm.getClubName())) {
+            cnd.and("club.clubName", "like", "%" + pageForm.getClubName().trim() + "%");
+        }
        cnd.and("club.id", "in", list);
        cnd.groupBy("club.id");
        cnd.asc("club.clubCode");
@@ -155,7 +155,9 @@ module.exports = {
          {h5SkeletonLoading: !this.show_loading_overlay}
      ).then((res) => {
        if (res.code === 0) {
-          this.tableData = this.tableData.concat(res.data.list)
+          // 接口异常返回 null 行时不渲染该行，避免业务插槽读取行字段产生渲染异常。
+          const responseList = Array.isArray(res.data.list) ? res.data.list.filter((item) => item) : []
+          this.tableData = this.tableData.concat(responseList)
          this.localPageForm.totalCount = res.data.totalCount
          if (this.tableData.length >= this.localPageForm.totalCount) {
            this.tableFinished = true
@@ -139,6 +139,14 @@ module.exports = {
  methods: {
    beforeDelete(file) {
      this.fileList = this.fileList.filter((f) => f.url !== file.url)
+      if (this.upload_result_category === "interval") {
+        const resultIntervalValue = this.fileList
+            .map((item) => item.response && item.response.data ? item.response.data : item.url)
+            .filter((item) => item)
+            .join(",")
+        this.$emit("update:value", resultIntervalValue)
+        return
+      }
      this.$emit("update:value", this.fileList)
    },
    beforeRead(file) {
@@ -174,6 +182,13 @@ module.exports = {
      Promise.all(uploadPromises)
          .then(() => {
            if (this.upload_result_category === "interval") {
+              // interval 模式用于后端 String 字段，上传完成后回传逗号分隔的文件 URL。
+              const resultIntervalValue = this.fileList
+                  .filter((data) => data.status !== "fail")
+                  .map((data) => data.response && data.response.data ? data.response.data : data.url)
+                  .filter((data) => data)
+                  .join(",")
+              this.$emit("update:value", resultIntervalValue)
            } else if (this.upload_result_category === "array") {
              if (this.complete_result) {
                this.$emit("update:value", this.fileList)
@@ -3,140 +3,106 @@ layout("/layouts/platform_h5.html"){
 #-->

 <style scoped>
-    /* 同意条款样式 */
-    .agree-section {
-        padding: 16px;
-        background-color: #fff;
-        border-radius: 12px;
-        margin-top: 16px;
-    }
-
-    .agree-section .van-checkbox__label {
-        font-size: 13px;
-        line-height: 1.5;
-        color: #666;
-    }
+    #app { --club-primary: #1989fa; background: #f3f7fd; }
+    .club-apply-page { min-height: 100vh; background: #f3f7fd; }
+    .club-apply-page .van-nav-bar { background: #fff; box-shadow: 0 1px 8px rgba(28, 69, 120, .06); }
+    .club-apply-page .van-nav-bar__title { color: #1f2d3d; font-size: 16px; font-weight: 600; }
+    .club-apply-page .van-nav-bar__left { color: var(--club-primary); }
+    .club-apply-page .van-nav-bar .van-icon { color: var(--club-primary); }
+    .club-apply-form { padding: 12px 15px calc(132px + env(safe-area-inset-bottom)); background: #f3f7fd; }
+    .club-apply-section { overflow: hidden; margin-bottom: 12px; background: #fff; border: 1px solid #e9eff7; border-radius: 10px; box-shadow: 0 4px 12px rgba(36, 77, 122, .04); }
+    .club-apply-section__title { position: relative; margin: 0; padding: 13px 15px 8px 24px; color: #1f2d3d; font-size: 14px; font-weight: 600; line-height: 20px; }
+    .club-apply-section__title::before { position: absolute; top: 16px; left: 15px; width: 3px; height: 14px; border-radius: 2px; background: var(--club-primary); content: ''; }
+    .club-apply-section .van-cell-group { margin: 0; }
+    .club-apply-section .van-cell { min-height: 46px; padding: 11px 15px; color: #40526a; font-size: 14px; }
+    .club-apply-section .van-cell::after { right: 15px; left: 15px; border-color: #edf2f8; }
+    .club-apply-section .van-field__label { width: 105px; color: #65778e; }
+    .club-apply-section .van-field__control { color: #40526a; font-size: 14px; }
+    .club-apply-section .van-field__control::placeholder { color: #b4c0cf; }
+    .club-apply-section .van-field--disabled .van-field__control { color: #8b9bb0; }
+    .club-apply-section .direction-column-field .van-field__label { width: 100%; margin-bottom: 8px; }
+    .club-apply-section .direction-column-field .van-field__value { width: 100%; }
+    .club-apply-section .van-field__word-limit { color: #b4c0cf; font-size: 11px; }
+    .club-apply-actions { position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; padding: 10px 15px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .98); border-top: 1px solid #edf2f8; }
+    .club-apply-actions__agree { padding-bottom: 9px; }
+    .club-apply-actions__agree .van-checkbox { align-items: flex-start; }
+    .club-apply-actions__agree .van-checkbox__icon { margin-top: 2px; }
+    .club-apply-actions__agree .van-checkbox__label { color: #65778e; font-size: 12px; line-height: 18px; }
+    .club-apply-actions__buttons { display: flex; gap: 10px; }
+    .club-apply-actions .van-button { flex: 1; height: 40px; border-radius: 8px; font-size: 14px; font-weight: 500; }
+    .club-apply-actions .van-button--info { background: var(--club-primary); border-color: var(--club-primary); }
+    .club-apply-actions .van-button--info.van-button--plain { color: var(--club-primary); background: #fff; }
 </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 class="club-apply-page">
+    <van-nav-bar title="文体社团会员申请" left-arrow @click-left="onNavBack" fixed placeholder></van-nav-bar>

-    <!-- 表单容器 -->
-    <van-form ref="formRef" class="form-container">
-        <!-- 社团信息 -->
-        <van-cell-group title="社团信息" class="form-section">
-            <van-field
-                :rules="[{ required: true }]"
-                v-model="formData.clubName"
-                label="社团"
-                placeholder="请选择社团"
-                required
-                is-link
-                readonly
-                name="clubName"
-                @click="showClubPopup = true"
-            ></van-field>
-            <van-popup v-model:show="showClubPopup" position="bottom">
-                <van-picker
-                    show-toolbar
-                    :columns="clubOptions.map(i => i.clubName)"
-                    @confirm="onClubConfirm"
-                    @cancel="showClubPopup = false"
-                    class="picker-style"
-                ></van-picker>
-            </van-popup>
-        </van-cell-group>
+    <van-form ref="formRef" class="club-apply-form">
+        <section class="club-apply-section">
+            <h2 class="club-apply-section__title">基本信息</h2>
+            <van-cell-group :border="false">
+                <van-field :rules="[{ required: true, message: '请选择社团' }]" v-model="formData.clubName" label="社团" placeholder="请选择社团" required is-link readonly name="clubName" @click="openClubPopup"></van-field>
+                <van-field label="姓名" :rules="[{ required: true }]" v-model="formData.userName" readonly required name="userName"></van-field>
+                <van-field label="工号" :rules="[{ required: true }]" v-model="formData.loginName" readonly required name="loginName"></van-field>
+                <van-field label="性别" :rules="[{ required: true }]" v-model="formData.sex" readonly required></van-field>
+                <van-field label="出生年月" v-model="formData.birthday" readonly placeholder="读取信息中心数据"></van-field>
+                <van-field label="联系电话" v-model="formData.mobile" placeholder="请输入联系电话"></van-field>
+                <van-field label="电子信箱" v-model="formData.email" placeholder="请输入电子信箱"></van-field>
+                <van-field label="分工会" v-model="formData.unionName" readonly></van-field>
+                <van-field label="部门" v-model="formData.unitName" readonly></van-field>
+                <van-field label="职务" v-model="formData.position" readonly placeholder="读取信息中心数据"></van-field>
+                <van-field label="职称" v-model="formData.technicalTitle" readonly placeholder="读取信息中心数据"></van-field>
+                <van-field label="学历" v-model="formData.education" readonly placeholder="读取信息中心数据"></van-field>
+                <van-field label="学位" v-model="formData.academicDegree" readonly placeholder="读取信息中心数据"></van-field>
+            </van-cell-group>
+        </section>

-        <!-- 基本信息 -->
-        <van-cell-group title="基本信息" class="form-section">
-            <van-field label="姓名" :rules="[{ required: true }]" v-model="formData.userName" readonly
-                       required name="userName"></van-field>
-            <van-field label="工号" :rules="[{ required: true }]" v-model="formData.loginName" readonly
-                       required name="loginName"></van-field>
-            <van-field label="性别" :rules="[{ required: true }]" v-model="formData.sex" readonly required></van-field>
-            <van-field label="出生年月" v-model="formData.birthday" readonly placeholder="读取信息中心数据"></van-field>
-            <van-field label="联系电话" v-model="formData.mobile" placeholder="请输入联系电话"></van-field>
-            <van-field label="电子信箱" v-model="formData.email" placeholder="请输入电子信箱"></van-field>
-        </van-cell-group>
+        <section class="club-apply-section">
+            <h2 class="club-apply-section__title">其他信息</h2>
+            <van-cell-group :border="false">
+                <van-field class="direction-column-field" v-model="formData.sameTimeJoinOtherClubSituation" label="同时参加其他社团情况" type="textarea" rows="4" autosize maxlength="500" show-word-limit placeholder="请填写同时参加其他社团情况"></van-field>
+                <van-field class="direction-column-field" v-model="formData.awardsExperience" label="文化、体育方面的活动经历、获奖情况" type="textarea" rows="4" autosize maxlength="500" show-word-limit placeholder="请填写相关经历及获奖情况"></van-field>
+            </van-cell-group>
+        </section>

-        <!-- 工作信息 -->
-        <van-cell-group title="工作信息" class="form-section">
-            <van-field label="分工会" v-model="formData.unionName" readonly></van-field>
-            <van-field label="部门" v-model="formData.unitName" readonly></van-field>
-            <van-field label="职务" v-model="formData.governmentPosition" readonly
-                       placeholder="读取信息中心数据"></van-field>
-            <van-field label="职称" v-model="formData.technicalTitle" readonly
-                       placeholder="读取信息中心数据"></van-field>
-            <van-field label="学历" v-model="formData.education" readonly placeholder="读取信息中心数据"></van-field>
-            <van-field label="学位" v-model="formData.academicDegree" readonly
-                       placeholder="读取信息中心数据"></van-field>
-        </van-cell-group>
+        <section class="club-apply-section">
+            <h2 class="club-apply-section__title">照片</h2>
+            <van-cell-group :border="false">
+                <van-field class="direction-column-field" name="avatar" label="上传本人照片">
+                    <template #input>
+                        <h5-file-upload slot="input" :value.sync="formData.avatar" :upload_number="1" upload_mode="image" upload_result_category="interval" upload_result_type="url"></h5-file-upload>
+                    </template>
+                </van-field>
+            </van-cell-group>
+        </section>

-        <!-- 其他信息 -->
-        <van-cell-group title="其他信息" class="form-section">
-            <van-field
-                class="direction-column-field"
-                v-model="formData.sameTimeJoinOtherClubSituation"
-                label="同时参加其他社团情况"
-                type="textarea"
-                rows="4"
-                autosize
-                maxlength="500"
-                placeholder="请填写同时参加其他社团情况"
-            ></van-field>
-            <van-field
-                class="direction-column-field"
-                v-model="formData.awardsExperience"
-                label="文化、体育方面的活动经历、获奖情况"
-                type="textarea"
-                rows="4"
-                autosize
-                maxlength="500"
-                placeholder="请填写相关经历及获奖情况"
-            ></van-field>
-        </van-cell-group>
+        <section class="club-apply-section">
+            <h2 class="club-apply-section__title">电子签名</h2>
+            <van-cell-group :border="false">
+                <van-field class="direction-column-field" name="signature" label="请确认签名">
+                    <template #input>
+                        <h5-signature v-model="formData.signature" slot="input"></h5-signature>
+                    </template>
+                </van-field>
+            </van-cell-group>
+        </section>

-        <!-- 照片上传 -->
-        <van-cell-group title="照片" class="form-section">
-            <van-field class="direction-column-field" name="avatar" label="">
-                <template #input>
-                    <h5-file-upload
-                        slot="input"
-                        :value.sync="formData.avatar"
-                        :upload_number="1"
-                        upload_mode="image"
-                        upload_result_category="interval"
-                        upload_result_type="url"
-                        complete_result
-                    ></h5-file-upload>
-                </template>
-            </van-field>
-        </van-cell-group>
-
-        <!-- 电子签名 -->
-        <van-cell-group title="电子签名" class="form-section">
-            <van-field class="direction-column-field" name="signature" label="">
-                <template #input>
-                    <h5-signature v-model="formData.signature" slot="input"></h5-signature>
-                </template>
-            </van-field>
-        </van-cell-group>
-
-        <!-- 同意条款 -->
-        <van-cell-group class="agree-section form-section">
-            <van-checkbox v-model="isAgree" shape="square">
-                注：本人已仔细阅读并愿意遵守所参加本校教职工文体社团的章程和规定，自愿加入所报名社团。
-            </van-checkbox>
-        </van-cell-group>
-
-        <!-- 提交按钮 -->
-        <div class="form-actions">
-            <van-button native-type="button" @click="onSave" round type="info" plain>保存申请</van-button>
-            <van-button @click="onSubmit" round type="info" v-if="!taskId">提交申请</van-button>
-            <van-button @click="onFinishTask" round type="info" v-else>提交申请</van-button>
-        </div>
    </van-form>
+
+    <div class="club-apply-actions">
+        <div class="club-apply-actions__agree"><van-checkbox v-model="isAgree" shape="square">注：本人已仔细阅读并愿意遵守所参加本校教职工文体社团的章程和规定，自愿加入所报名社团。</van-checkbox></div>
+        <div class="club-apply-actions__buttons">
+            <van-button native-type="button" :loading="formLoading" @click="onSave" type="info" plain>保存申请</van-button>
+            <van-button :loading="formLoading" @click="onSubmit" type="info" v-if="!taskId">提交申请</van-button>
+            <van-button :loading="formLoading" @click="onFinishTask" type="info" v-else>提交申请</van-button>
+        </div>
+    </div>
+
+    <van-popup v-model="showClubPopup" position="bottom" get-container="#app">
+        <van-picker show-toolbar :columns="clubOptions.map((item) => item.clubName)" @confirm="onClubConfirm" @cancel="closeClubPopup"></van-picker>
+    </van-popup>
+
+    <van-dialog :value="confirmVisible" title="提示" :message="confirmMessage" show-cancel-button @confirm="confirmPendingAction" @cancel="closeConfirm"></van-dialog>
 </div>

 <script nonce="${cspNonce!}">
@@ -149,145 +115,211 @@ layout("/layouts/platform_h5.html"){
                bizId: GetQueryString("bizId"),
                taskId: GetQueryString("taskId"),
                formData: {
-                    clubId: "",
-                    clubName: "",
-                    userName: "",
-                    loginName: "",
-                    sex: "",
-                    birthday: "",
-                    mobile: "",
-                    email: "",
-                    unionName: "",
-                    unitName: "",
-                    governmentPosition: "",
-                    technicalTitle: "",
-                    education: "",
-                    academicDegree: "",
-                    sameTimeJoinOtherClubSituation: "",
-                    awardsExperience: "",
-                    avatar: [],
-                    signature: ""
+                    clubId: "", clubName: "", userName: "", loginName: "", sex: "", birthday: "", mobile: "", email: "", unionName: "", unitName: "", position: "", technicalTitle: "", education: "", academicDegree: "", sameTimeJoinOtherClubSituation: "", awardsExperience: "", avatar: "", signature: ""
                },
                clubOptions: [],
                showClubPopup: false,
-                isAgree: false
+                isAgree: false,
+                formLoading: false,
+                confirmVisible: false,
+                pendingAction: "",
+                historyLayerUnsubscribe: null
            }
        },
-        methods: {
-            onSave() {
-                this.$dialog.confirm({
-                    title: "提示",
-                    message: "您确定保存吗？"
-                }).then(() => {
-                    this.$axios.post("/platform/club/join/apply/save", { data: JSON.stringify(this.formData) }).then(res => {
-                        if (res.code === 0) {
-                            this.$toast(res.msg)
-                            this.$pjaxReplace("/platform/club/join/mine/h5")
-                        }
-                    })
-                })
-            },
-            async onSubmit() {
-                this.$refs.formRef.validate().then(() => {
-                    if (!this.isAgree) {
-                        this.$toast('请先阅读并同意协议')
-                        return
-                    }
-                    this.$dialog.confirm({
-                        title: "提示",
-                        message: "您确定要提交申请吗？"
-                    }).then(() => {
-                        this.$axios.post("/platform/club/join/apply/submit", {
-                            data: JSON.stringify(this.formData),
-                            mode: true
-                        }).then(res => {
-                            if (res.code === 0) {
-                                this.$toast(res.msg)
-                                this.$pjaxReplace("/platform/club/join/mine/h5")
-                            }
-                        })
-                    })
-                })
-            },
-            async onFinishTask() {
-                this.$refs.formRef.validate().then(() => {
-                    if (!this.isAgree) {
-                        this.$toast('请先阅读并同意协议')
-                        return
-                    }
-                    this.$dialog.confirm({
-                        title: "提示",
-                        message: "您确定要提交申请吗？"
-                    }).then(() => {
-                        this.$axios.post("/platform/club/join/apply/submitAgain", {
-                            data: JSON.stringify(this.formData),
-                            taskId: GetQueryString("taskId")
-                        }).then(res => {
-                            if (res.code === 0) {
-                                this.$toast(res.msg)
-                                this.$pjaxReplace("/platform/club/join/mine/h5")
-                            }
-                        })
-                    })
-                })
-            },
-            checkApplyClub(clubId) {
-                this.$axios.post("/platform/club/join/apply/checkApplyClub", { clubId }).then(res => {
-                    if (res.code !== 0) {
-                        this.$toast(res.msg)
-                        this.formData.clubId = ""
-                        this.formData.clubName = ""
-                    }
-                })
-            },
-            onClubConfirm(value, index) {
-                this.formData.clubId = this.clubOptions[index].id
-                this.formData.clubName = value
-                this.showClubPopup = false
-
-                // 检查是否已申请该社团
-                this.checkApplyClub(this.formData.clubId)
-            },
-            listClub() {
-                this.$axios.post("/platform/club/common/listClub").then(res => {
-                    if (res.code === 0) {
-                        this.clubOptions = res.data
-                    }
-                })
-            },
-            init() {
-                this.bizId = GetQueryString("bizId")
-                if (this.bizId) {
-                    this.$axios.post("/platform/club/join/apply/info", { id: this.bizId }).then((res) => {
-                        if (res.code === 0) {
-                            this.formData = res.data
-                            this.isAgree = true
-                        }
-                    })
-                } else {
-                    const user = this.$store.state.user
-                    this.$set(this.formData, "userId", user.id)
-                    this.$set(this.formData, "userName", user.username)
-                    this.$set(this.formData, "loginName", user.loginname)
-                    this.$set(this.formData, "unitId", user.unit ? user.unit.id : null)
-                    this.$set(this.formData, "unitName", user.unit ? user.unit.name : null)
-                    this.$set(this.formData, "unionId", user.union ? user.union.id : null)
-                    this.$set(this.formData, "unionName", user.union ? user.union.name : null)
-                    this.$set(this.formData, "sex", user.sex)
-                    this.$set(this.formData, "birthday", user.birthday ? this.$moment(user.birthday).format('YYYY-MM-DD') : '')
-                    this.$set(this.formData, "nation", user.nation)
-                    this.$set(this.formData, "mobile", user.mobile)
-                    this.$set(this.formData, "political", user.political)
-                    this.$set(this.formData, "education", user.education)
-                    this.$set(this.formData, "technicalTitle", user.technicalTitle)
-                    this.$set(this.formData, "position", user.position)
-                    this.$set(this.formData, "academicDegree", user.academicDegree)
-                }
+        computed: {
+            confirmMessage() {
+                return this.pendingAction === 'save' ? '您确定保存当前申请吗？' : '您确定提交申请吗？';
            }
        },
        created() {
-            this.listClub()
-            this.init()
+            const manager = window.h5HistoryLayerManager;
+            if (manager) {
+                manager.ensureRegistered('club-apply');
+                this.historyLayerUnsubscribe = manager.subscribe((layers) => {
+                    this.$set(this, 'showClubPopup', layers.includes('club-apply-club-picker'));
+                    this.$set(this, 'confirmVisible', layers.includes('club-apply-confirm'));
+                });
+            }
+            this.listClub();
+            this.init();
+        },
+        beforeDestroy() {
+            if (this.historyLayerUnsubscribe) {
+                this.historyLayerUnsubscribe();
+            }
+            const manager = window.h5HistoryLayerManager;
+            if (manager) {
+                manager.unregister('club-apply');
+            }
+        },
+        methods: {
+            onNavBack() {
+                const manager = window.h5HistoryLayerManager;
+                if (manager && manager.stack.length) {
+                    manager.close();
+                    return;
+                }
+                historyBack();
+            },
+            openClubPopup() {
+                const manager = window.h5HistoryLayerManager;
+                if (manager) {
+                    manager.open('club-apply-club-picker');
+                    return;
+                }
+                this.$set(this, 'showClubPopup', true);
+            },
+            closeClubPopup(afterClose) {
+                const manager = window.h5HistoryLayerManager;
+                if (manager) {
+                    manager.close('club-apply-club-picker', afterClose);
+                    return;
+                }
+                this.$set(this, 'showClubPopup', false);
+                if (afterClose) {
+                    afterClose();
+                }
+            },
+            openConfirm(action) {
+                this.$set(this, 'pendingAction', action);
+                const manager = window.h5HistoryLayerManager;
+                if (manager) {
+                    manager.open('club-apply-confirm');
+                    return;
+                }
+                this.$set(this, 'confirmVisible', true);
+            },
+            closeConfirm(afterClose) {
+                const manager = window.h5HistoryLayerManager;
+                if (manager) {
+                    manager.close('club-apply-confirm', afterClose);
+                    return;
+                }
+                this.$set(this, 'confirmVisible', false);
+                if (afterClose) {
+                    afterClose();
+                }
+            },
+            onSave() {
+                this.openConfirm('save');
+            },
+            onSubmit() {
+                this.validateAndConfirm('submit');
+            },
+            onFinishTask() {
+                this.validateAndConfirm('submitAgain');
+            },
+            validateAndConfirm(action) {
+                this.$refs.formRef.validate().then(() => {
+                    if (!this.isAgree) {
+                        this.$toast('请先阅读并同意协议');
+                        return;
+                    }
+                    this.openConfirm(action);
+                });
+            },
+            confirmPendingAction() {
+                const action = this.pendingAction;
+                this.closeConfirm(() => {
+                    if (action === 'save') {
+                        this.saveApplication();
+                    } else if (action === 'submitAgain') {
+                        this.submitApplication('/platform/club/join/apply/submitAgain', {data: JSON.stringify(this.formData), taskId: this.taskId});
+                    } else {
+                        this.submitApplication('/platform/club/join/apply/submit', {data: JSON.stringify(this.formData), mode: true});
+                    }
+                });
+            },
+            saveApplication() {
+                this.$set(this, 'formLoading', true);
+                this.$axios.post('/platform/club/join/apply/save', {data: JSON.stringify(this.formData)}).then((res) => {
+                    if (res.code === 0) {
+                        this.$toast(res.msg);
+                        this.clearLayersAndGoMine();
+                    }
+                }).finally(() => {
+                    this.$set(this, 'formLoading', false);
+                });
+            },
+            submitApplication(url, params) {
+                this.$set(this, 'formLoading', true);
+                this.$axios.post(url, params).then((res) => {
+                    if (res.code === 0) {
+                        this.$toast(res.msg);
+                        this.clearLayersAndGoMine();
+                    }
+                }).finally(() => {
+                    this.$set(this, 'formLoading', false);
+                });
+            },
+            clearLayersAndGoMine() {
+                const manager = window.h5HistoryLayerManager;
+                if (manager) {
+                    manager.closeAll(() => {
+                        this.$pjaxReplace('/platform/club/join/mine/h5');
+                    });
+                    return;
+                }
+                this.$pjaxReplace('/platform/club/join/mine/h5');
+            },
+            checkApplyClub(clubId) {
+                this.$axios.post('/platform/club/join/apply/checkApplyClub', {clubId: clubId}).then((res) => {
+                    if (res.code !== 0) {
+                        this.$toast(res.msg);
+                        this.$set(this.formData, 'clubId', '');
+                        this.$set(this.formData, 'clubName', '');
+                    }
+                });
+            },
+            onClubConfirm(value, index) {
+                const club = this.clubOptions[index];
+                if (club) {
+                    this.$set(this.formData, 'clubId', club.id);
+                    this.$set(this.formData, 'clubName', value);
+                    this.checkApplyClub(club.id);
+                }
+                this.closeClubPopup();
+            },
+            listClub() {
+                this.$axios.post('/platform/club/common/listClub').then((res) => {
+                    if (res.code === 0) {
+                        this.$set(this, 'clubOptions', res.data || []);
+                    }
+                });
+            },
+            init() {
+                if (this.bizId) {
+                    this.$axios.post('/platform/club/join/apply/info', {id: this.bizId}).then((res) => {
+                        if (res.code === 0) {
+                            const formData = Object.assign({}, res.data || {});
+                            // 兼容历史空数组字符串，避免编辑页把 "[]" 当作图片地址回显。
+                            if (formData.avatar === '[]') {
+                                formData.avatar = '';
+                            }
+                            this.$set(this, 'formData', formData);
+                            this.$set(this, 'isAgree', true);
+                        }
+                    });
+                    return;
+                }
+                const user = this.$store.state.user;
+                this.$set(this.formData, 'userId', user.id);
+                this.$set(this.formData, 'userName', user.username);
+                this.$set(this.formData, 'loginName', user.loginname);
+                this.$set(this.formData, 'unitId', user.unit ? user.unit.id : null);
+                this.$set(this.formData, 'unitName', user.unit ? user.unit.name : null);
+                this.$set(this.formData, 'unionId', user.union ? user.union.id : null);
+                this.$set(this.formData, 'unionName', user.union ? user.union.name : null);
+                this.$set(this.formData, 'sex', user.sex);
+                this.$set(this.formData, 'birthday', user.birthday ? this.$moment(user.birthday).format('YYYY-MM-DD') : '');
+                this.$set(this.formData, 'nation', user.nation);
+                this.$set(this.formData, 'mobile', user.mobile);
+                this.$set(this.formData, 'political', user.political);
+                this.$set(this.formData, 'education', user.education);
+                this.$set(this.formData, 'technicalTitle', user.technicalTitle);
+                this.$set(this.formData, 'position', user.position);
+                this.$set(this.formData, 'academicDegree', user.academicDegree);
+            }
        }
    })
 </script>
@@ -2,108 +2,136 @@
 layout("/layouts/platform_h5.html"){
 #-->

-<style scoped>
-.payed-field .van-field__control--custom {
-    display: block;
-}
-.payed-field .label{
-    color: rgb(153, 153, 153);
-    font-size: 13px;
-}
+<style id="style-club-user-join-h5">
+    <!--#include('../common/clubUserJoin.css'){}#-->
 </style>

-<div id="app">
-    <van-nav-bar title="社团审核" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
+<style>
+    #app { --club-primary: #1989fa; }
+    .club-approval-page { min-height: 100vh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; background: #f3f7fd; }
+    .club-approval-page .van-nav-bar, .club-approval-page .van-sticky--fixed { background: #fff; }
+    .club-approval-page .van-nav-bar__title { color: #172033; font-size: 16px; font-weight: 600; }
+    .club-approval-page .van-nav-bar .van-icon, .club-approval-page .van-nav-bar__text { color: #1989fa; }
+    .club-approval-sticky { padding: 22px 12px 1px; box-sizing: border-box; background: #f3f7fd; }
+    .club-approval-search { margin: 0 0 8px; padding: 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(43, 73, 112, .1); }
+    .club-approval-search .van-search__content { height: 42px; padding-left: 12px; align-items: center; border-radius: 12px; background: #fff; }
+    .club-approval-search .van-field__control { color: #263548; font-size: 14px; }
+    .club-approval-search .van-field__control::placeholder { color: #a7b0bf; }
+    .club-approval-filter { margin-bottom: 8px; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
+    .club-approval-filter .van-dropdown-menu__bar { height: 44px; box-shadow: none; }
+    .club-approval-filter .van-dropdown-menu__item, .club-approval-filter .van-dropdown-menu__title { height: 44px; }
+    .club-approval-filter .van-dropdown-menu__item { align-items: center; justify-content: center; }
+    .club-approval-filter .van-dropdown-menu__title { display: inline-flex; align-items: center; color: #66758a; font-size: 14px; line-height: 20px; }
+    .club-approval-filter .van-dropdown-menu__title--active, .club-approval-filter .van-dropdown-item__option--active, .club-approval-filter .van-dropdown-item__option--active .van-dropdown-item__icon { color: #1989fa; }
+    .club-approval-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); }
+    .club-approval-filter .van-dropdown-item__option { display: flex; min-height: 48px; padding: 0 16px; align-items: center; color: #46566c; font-size: 14px; }
+    .club-approval-list-content { padding: 0 12px; }
+    .club-approval-page .table-list-container { margin-top: 0; padding-bottom: 2px; }
+    .club-approval-page .table-list-container .table-list-item { margin-bottom: 12px; padding: 14px; border: 1px solid #e9eff7; border-radius: 12px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
+    .club-card-header { display: flex; margin-bottom: 8px; align-items: flex-start; justify-content: space-between; }
+    .club-card-header__heading { min-width: 0; padding-right: 10px; flex: 1; }
+    .club-card-header__title { overflow: hidden; color: #253247; font-size: 15px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
+    .club-card-header__sub { margin-top: 1px; color: #9ba6b6; font-size: 12px; line-height: 18px; }
+    .club-card-header__status { display: inline-flex; flex: none; }
+    .club-card-header__status .van-tag { min-height: 24px; padding: 3px 9px; border: 0; border-radius: 12px; box-sizing: border-box; font-size: 12px; line-height: 18px; }
+    .club-approval-page .table-list-container .table-list-item .item-actions { margin-top: 10px; padding-top: 10px; border-top-color: #edf1f6; }
+    .club-approval-page .table-list-container .table-list-item .action-btn { min-height: 28px; padding: 4px 11px; border-radius: 14px; color: #1989fa; background: #eaf4ff; font-size: 12px; line-height: 18px; }
+    .club-approval-page .table-list-container .table-list-item .action-btn.delete { color: #f04444; background: #fff0f0; }
+    .club-approval-page .table-list-container .table-list-item .action-btn .van-icon { margin-right: 5px; font-size: 13px; }
+    .club-approval-page .empty-state { padding: 0; }
+    .club-audit-card { margin: 0 0 11px; overflow: hidden; border: 1px solid #e9eff7; border-radius: 10px; background: #fff; box-shadow: 0 3px 11px rgba(51, 87, 126, .08); }
+    .club-audit-card__title { position: relative; margin: 0; padding: 12px 14px 8px 21px; color: #354255; font-size: 15px; font-weight: 600; line-height: 22px; }
+    .club-audit-card__title::before { position: absolute; top: 15px; bottom: 11px; left: 12px; width: 2px; border-radius: 2px; background: var(--club-primary); content: ''; }
+    .club-audit-card__required { position: absolute; left: 6px; color: #ee0a24; font-size: 12px; }
+    .club-audit-card .club-audit-payment-field { min-height: 44px; padding: 10px 14px; background: transparent; }
+    .club-audit-card .club-audit-payment-field::after { right: 14px; left: 14px; border-color: #eef2f7; }
+    .club-audit-card .club-audit-payment-field .van-field__label { width: 102px; color: #596779; font-size: 12px; line-height: 24px; }
+    .club-audit-card .club-audit-payment-field .van-field__control { color: #4f5d70; font-size: 12px; line-height: 24px; }
+    .club-audit-card .van-radio-group { display: flex; align-items: center; min-height: 24px; white-space: nowrap; }
+    .club-audit-card .van-radio { margin-right: 12px; }
+    .club-audit-card .van-radio__label { color: #4f5d70; font-size: 12px; line-height: 24px; }
+    .club-audit-field-label { position: relative; margin: 0; padding: 10px 14px 6px; color: #596779; font-size: 12px; line-height: 24px; }
+    .club-audit-card .van-field.club-audit-field { width: calc(100% - 28px); margin: 0 14px 14px; padding: 12px; box-sizing: border-box; border: 1px solid #c9d5e5; border-radius: 10px; background: #f7f9fd; }
+    .club-audit-card .van-field.club-audit-field .van-field__control { min-height: 150px; color: #253247; font-size: 12px; line-height: 22px; }
+    .club-audit-card .van-field.club-audit-field .van-field__control::placeholder { color: #9aa7b8; }
+    .club-audit-card .van-field.club-audit-field .van-field__word-limit { color: #718096; font-size: 12px; }
+    .club-audit-card .van-field.club-audit-field::after { display: none; }
+    .club-audit-actions { display: flex; column-gap: 10px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
+    .club-audit-actions .van-button { height: 40px; border-radius: 14px; font-size: 14px; }
+    .club-audit-actions .van-button--primary { border-color: var(--club-primary); background: var(--club-primary); }
+    .club-audit-actions .van-button--danger { border-color: #ff4d4f; background: #ff4d4f; }
+    .club-list-skeleton { padding: 0; }
+    .club-skeleton-card { margin-bottom: 12px; padding: 14px; background: #fff; border: 1px solid #e9eff7; border-radius: 12px; }
+    .club-skeleton-line { height: 13px; margin-bottom: 12px; border-radius: 7px; background: linear-gradient(90deg, #f2f3f5 25%, #e6e8eb 37%, #f2f3f5 63%); background-size: 400% 100%; animation: club-skeleton-loading 1.4s ease infinite; }
+    .club-skeleton-line--title { width: 46%; height: 16px; }
+    .club-skeleton-line--short { width: 60%; }
+    .club-empty { display: flex; min-height: 280px; padding: 46px 18px 36px; align-items: center; justify-content: center; box-sizing: border-box; flex-direction: column; text-align: center; }
+    .club-empty img { display: block; width: 86%; max-width: 290px; height: auto; object-fit: contain; }
+    .club-empty__title { margin-top: 14px; color: #50627a; font-size: 15px; font-weight: 600; line-height: 22px; }
+    .club-empty__hint { margin-top: 5px; color: #9aa7b8; font-size: 12px; line-height: 18px; }
+    @keyframes club-skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
+</style>

+<div id="app" v-cloak class="club-approval-page">
+    <van-nav-bar title="社团审核" left-arrow @click-left="onNavBack" fixed placeholder></van-nav-bar>
    <van-sticky offset-top="46px">
-        <van-search
-            v-model="pageForm.searchKeyword"
-            :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">
+        <div class="club-approval-sticky">
+        <van-search v-model="pageForm.searchKeyword" class="club-approval-search" placeholder="请输入姓名或者工号搜索" shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
+        <van-dropdown-menu class="club-approval-filter" :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.mode" :options="modeOptions" :multiple="false"
-                               @change="doSearch"></van-dropdown-item>
-            <van-dropdown-item v-model="pageForm.unionId" :options="unionOptions" :multiple="false"
-                               @change="doSearch"></van-dropdown-item>
+            <van-dropdown-item v-model="pageForm.mode" :options="modeOptions" :multiple="false" @change="doSearch"></van-dropdown-item>
+            <!-- 全部工会筛选已按移动端审核页面要求隐藏，接口不再传 unionId。 -->
+            <van-dropdown-item v-model="pageForm.approvalText" :options="approvalOptions" :multiple="false" @change="onApprovalFilterChange"></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>
+        </div>
    </van-sticky>

-    <table-list api="/platform/club/join/clubApproval/pageData" :page_form.sync="pageForm" ref="tableListRef" title="clubName" @ready="onReady">
-        <template v-slot="{index,row}">
-            <table-column label="姓名">{{row.userName}}</table-column>
-            <table-column label="工号">{{row.loginName}}</table-column>
-            <table-column label="申请模式">{{row.mode ? '加入' : '退出'}}</table-column>
-            <table-column label="申请时间">{{row.applyDate}}</table-column>
-            <table-column label="当前节点">{{row.curTaskName}}</table-column>
+    <main class="club-approval-list-content">
+    <table-list api="/platform/club/join/clubApproval/pageData" :page_form.sync="pageForm" ref="tableListRef" title="clubName" :show_loading_overlay="false" @ready="onReady" @loading-change="onLoadingChange">
+        <template #header="{row}">
+            <div class="club-card-header">
+                <div class="club-card-header__heading"><div class="club-card-header__title">{{ row.userName || '--' }}</div><div class="club-card-header__sub">工号：{{ row.loginName || '--' }}</div></div>
+                <enum-tag class="club-card-header__status" v-if="row.instanceState" :value="row.instanceState" name="ProcessInstanceStateEnum" label_key="message" size="small"></enum-tag>
+            </div>
        </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>
+        <template v-slot="{row}">
+            <table-column label="社团名称">{{ row.clubName || '--' }}</table-column>
+            <table-column label="所属工会">{{ row.unionName || '--' }}</table-column>
+            <table-column label="申请类型">{{ row.mode ? '加入社团' : '退出社团' }}</table-column>
+            <table-column label="申请时间">{{ row.applyDate || '--' }}</table-column>
+            <table-column label="所属单位">{{ row.unitName || '--' }}</table-column>
+            <table-column label="当前节点">{{ row.curTaskName || '--' }}</table-column>
+        </template>
+        <template #actions="{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.taskState === 10" @click="onApproval(row)"><van-icon name="edit"></van-icon><span>审核</span></div>
+            <div class="action-btn delete" v-if="row.canRevoke" @click="onRevoke(row)"><van-icon name="revoke"></van-icon><span>撤回</span></div>
+        </template>
+        <template #empty>
+            <div v-if="listLoading" class="club-list-skeleton"><div v-for="item in 2" :key="item" class="club-skeleton-card"><div class="club-skeleton-line club-skeleton-line--title"></div><div class="club-skeleton-line"></div><div class="club-skeleton-line club-skeleton-line--short"></div></div></div>
+            <div v-else class="club-empty"><img src="/assets/mobile/img/club/club-approval-empty.png" alt="暂无社团审核记录插画"><div class="club-empty__title">暂无社团审核记录</div><div class="club-empty__hint">当前筛选条件下暂时没有社团申请</div></div>
        </template>
    </table-list>
+    </main>

-    <info ref="infoRef">
-        <div v-if="showApprovalForm">
-            <div class="process-title">{{formData.taskName}}</div>
+    <info ref="infoRef" page-key="club-approval" :merge-apply-info="true">
+        <template v-if="showApprovalForm">
+        <section class="club-audit-card">
+            <h2 class="club-audit-card__title">{{ formData.taskName || '社团审核' }}</h2>
            <van-form ref="formRef">
-                <van-field
-                        v-if="formData.mode === true"
-                        v-model="formData.tf_payed"
-                        name="tf_payed"
-                        label="缴费状态"
-                        placeholder="请选择缴费状态"
-                        :rules="[{ required: true, message: '请选择缴费状态' }]"
-                        required
-                        class="payed-field"
-                >
+                <van-field v-if="formData.mode === true" v-model="formData.tf_payed" class="club-audit-payment-field" name="tf_payed" label="缴费状态" :rules="[{ required: true, message: '请选择缴费状态' }]" required>
                    <template #input>
-                        <div class="label">(说明：请确认{{ formData.userName }}当年是否缴费)</div>
-                        <div>
-                            <van-radio-group v-model="formData.tf_payed" direction="horizontal">
-                                <van-radio name="0">未缴费</van-radio>
-                                <van-radio name="1">已缴费</van-radio>
-                            </van-radio-group>
-                        </div>
+                        <van-radio-group v-model="formData.tf_payed" direction="horizontal"><van-radio name="0">未缴费</van-radio><van-radio name="1">已缴费</van-radio></van-radio-group>
                    </template>
                </van-field>
-                <van-field
-                    v-model="formData.tf_opinion"
-                    name="tf_opinion"
-                    label="审批意见"
-                    placeholder="请输入审批意见"
-                    :rules="[{ required: true, message: '请填写审批意见' }]"
-                    required
-                    maxlength="100"
-                    show-word-limit
-                ></van-field>
+                <p class="club-audit-field-label"><span class="club-audit-card__required">*</span>审批意见</p>
+                <van-field v-model="formData.tf_opinion" class="club-audit-field" name="tf_opinion" type="textarea" rows="6" label="" placeholder="请输入审批意见" :rules="[{ required: true, message: '请填写审批意见' }]" 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>
+        </section>
+        <div class="club-audit-actions"><van-button :loading="formLoading" type="danger" block @click="handleTaskAction(6)">退回</van-button><van-button :loading="formLoading" type="danger" block @click="handleTaskAction(2)">不同意</van-button><van-button :loading="formLoading" type="primary" block @click="handleTaskAction(1)">同意</van-button></div>
+        </template>
    </info>
+    <van-dialog :value="confirmVisible" title="提示" :message="confirmMessage" show-cancel-button :confirm-button-loading="formLoading" @confirm="confirmPendingAction" @cancel="closeConfirm"></van-dialog>
 </div>

 <script nonce="${cspNonce!}">
@@ -111,105 +139,124 @@ layout("/layouts/platform_h5.html"){
    new Vue({
        el: "#app",
        store,
-        components: {
-            info: clubUserJoin
-        },
+        dicts: ['PROCESS_INSTANCE_STATE'],
+        components: {info: clubUserJoin},
        data() {
            return {
-                pageForm: {
-                    pageNumber: 1,
-                    pageSize: 10,
-                    totalCount: 0,
-                    searchKeyword: '',
-                    name: null,
-                    approvalText: "0",
-                    approval: false,
-                    year: new Date().getFullYear(),
-                    unionId: null,
-                    mode: null,
-                },
-                unionOptions: [],
+                pageForm: {pageNumber: 1, pageSize: 10, totalCount: 0, searchKeyword: '', name: null, approvalText: '0', approval: false, year: new Date().getFullYear(), mode: null},
                formData: {},
                showApprovalForm: false,
-                modeOptions: [{text: "全部类型", value: null}, {text: "申请加入", value: true}, {text: "申请退出", value: false}],
+                modeOptions: [{text: '全部类型', value: null}, {text: '申请加入', value: true}, {text: '申请退出', value: false}],
+                approvalOptions: [{text: '未审核', value: '0'}, {text: '已审核', value: '1'}],
+                listLoading: true,
+                formLoading: false,
+                confirmVisible: false,
+                pendingAction: '',
+                pendingSubmitType: null,
+                pendingRevokeRow: null,
+                historyLayerUnsubscribe: null
            }
        },
+        computed: {
+            confirmMessage() { return this.pendingAction === 'revoke' ? '您确定要撤回吗？' : '您确定要提交审核结果吗？'; }
+        },
+        created() {
+            const manager = window.h5HistoryLayerManager;
+            if (manager) {
+                manager.ensureRegistered('club-approval');
+                this.historyLayerUnsubscribe = manager.subscribe((layers) => {
+                    this.$set(this, 'confirmVisible', layers.includes('club-approval-confirm'));
+                });
+            }
+        },
+        beforeDestroy() {
+            if (this.historyLayerUnsubscribe) { this.historyLayerUnsubscribe(); }
+            const manager = window.h5HistoryLayerManager;
+            if (manager) { manager.unregister('club-approval'); }
+        },
        methods: {
-            async onReady() {
-                const unionList = await this.$businessTool.listUnion()
-                this.unionOptions = [
-                    {
-                        text: "全部工会",
-                        value: null
-                    }
-                ].concat(unionList.map((v) => ({ text: v.name, value: v.id })))
-                if (this.unionOptions.length > 0) {
-                    this.pageForm.unionId = this.unionOptions[0].value
-                    this.doSearch()
-                }
+            onNavBack() {
+                const manager = window.h5HistoryLayerManager;
+                if (manager && manager.stack.length) { manager.close(); return; }
+                historyBack();
            },
+            onReady() {
+                this.doSearch();
+            },
+            onApprovalFilterChange(value) {
+                // 下拉组件使用字符串，查询接口 approval 参数需转换为布尔值；默认 false 查询未审核记录。
+                this.$set(this.pageForm, 'approval', value === '1');
+                this.doSearch();
+            },
+            onLoadingChange(state) { this.$set(this, 'listLoading', state.loading); },
            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 = {
-                    processTaskId: row.taskId,
-                    taskName: row.curTaskName,
-                    tf_payed: 0,
-                    userName: row.userName,
-                    mode: row.mode
-                }
+                this.$set(this, 'formData', {processTaskId: row.taskId, taskName: row.curTaskName, tf_payed: '0', userName: row.userName, mode: row.mode, tf_opinion: ''});
+                this.$set(this, 'showApprovalForm', true);
+                this.$refs.infoRef.onOpen(row, 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.infoRef.onClose()
-                                this.$toast.success(res.msg)
-                                this.doSearch()
-                            }
-                        })
-                    }).catch(() => {
-
-                    })
-                } catch (error) {
-
-                }
+            openConfirm(action, submitType, row) {
+                this.$set(this, 'pendingAction', action);
+                this.$set(this, 'pendingSubmitType', submitType);
+                this.$set(this, 'pendingRevokeRow', row);
+                const manager = window.h5HistoryLayerManager;
+                if (manager) { manager.open('club-approval-confirm'); return; }
+                this.$set(this, 'confirmVisible', true);
            },
-            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()
-                        }
-                    })
-                })
+            closeConfirm(afterClose) {
+                const manager = window.h5HistoryLayerManager;
+                if (manager) { manager.close('club-approval-confirm', afterClose); return; }
+                this.$set(this, 'confirmVisible', false);
+                if (afterClose) { afterClose(); }
+            },
+            // 审批意见为空时先提示并触发字段校验，校验通过后才允许打开审核确认框。
+            handleTaskAction(submitType) {
+                const opinion = (this.formData.tf_opinion || '').trim();
+                if (!opinion) {
+                    this.$toast('请填写审批意见');
+                    this.$refs.formRef.validate('tf_opinion').catch(() => {});
+                    return;
+                }
+                this.$set(this.formData, 'tf_opinion', opinion);
+                this.$refs.formRef.validate().then(() => { this.openConfirm('submit', submitType, null); }).catch(() => {});
+            },
+            confirmPendingAction() {
+                const action = this.pendingAction;
+                const submitType = this.pendingSubmitType;
+                const row = this.pendingRevokeRow;
+                this.closeConfirm(() => {
+                    if (action === 'revoke') { this.revoke(row); } else { this.submitTaskAction(submitType); }
+                });
+            },
+            submitTaskAction(submitType) {
+                this.$set(this, 'formLoading', true);
+                const taskData = Object.assign({}, this.formData, {submitType: submitType});
+                this.$axios.post('/flow/common/executeTask', {data: JSON.stringify(taskData)}).then((res) => {
+                    if (res.code === 0) {
+                        const afterClose = () => { this.$toast.success(res.msg); this.doSearch(); };
+                        const manager = window.h5HistoryLayerManager;
+                        if (manager) { manager.closeAll(afterClose); } else { this.$refs.infoRef.onClose(afterClose); }
+                    }
+                }).finally(() => { this.$set(this, 'formLoading', false); });
+            },
+            onRevoke(row) { this.openConfirm('revoke', null, row); },
+            revoke(row) {
+                this.$set(this, 'formLoading', true);
+                this.$axios.post('/flow/common/revokeTask', {taskId: row.taskId}).then((res) => {
+                    if (res.code === 0) { this.$toast.success(res.msg); this.doSearch(); }
+                }).finally(() => { this.$set(this, 'formLoading', false); });
            },
            doSearch() {
                this.$nextTick(() => {
-                    this.pageForm.pageNumber = 1
-                    this.pageForm.totalCount = 0
-                    this.$refs.tableListRef.doSearch()
-                })
+                    this.pageForm.pageNumber = 1;
+                    this.pageForm.totalCount = 0;
+                    this.$refs.tableListRef.doSearch();
+                });
            }
-        },
+        }
    })
 </script>

@@ -0,0 +1,221 @@
+.club-user-join-popup {
+    overflow: hidden;
+    background: #f3f7fc;
+}
+
+.club-user-join-detail {
+    display: flex;
+    height: 100%;
+    padding-top: 46px;
+    overflow: hidden;
+    box-sizing: border-box;
+    background: #f3f7fc;
+    color: #1f2d3d;
+    flex-direction: column;
+}
+
+.club-user-join-detail > .van-nav-bar {
+    z-index: 20;
+    background: #fff;
+}
+
+.club-user-join-detail > .van-nav-bar .van-icon,
+.club-user-join-detail > .van-nav-bar .van-nav-bar__text {
+    color: #1989fa;
+}
+
+.club-user-join-detail__scroll {
+    min-height: 0;
+    overflow-y: auto;
+    flex: 1;
+    -webkit-overflow-scrolling: touch;
+}
+
+.club-user-join-detail__content {
+    padding: 12px 15px calc(18px + env(safe-area-inset-bottom));
+}
+
+.club-user-join-card {
+    margin-bottom: 11px;
+    overflow: hidden;
+    border: 1px solid #e9eff7;
+    border-radius: 10px;
+    background: #fff;
+    box-shadow: 0 3px 11px rgba(51, 87, 126, .08);
+}
+
+.club-user-join-card__title {
+    position: relative;
+    margin: 0;
+    padding: 12px 14px 8px 21px;
+    color: #354255;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22px;
+}
+
+.club-user-join-card__title::before {
+    position: absolute;
+    top: 15px;
+    bottom: 11px;
+    left: 12px;
+    width: 2px;
+    border-radius: 2px;
+    background: #1989fa;
+    content: '';
+}
+
+.club-user-join-card__grid {
+    display: grid;
+    padding: 0 14px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.club-user-join-card__item {
+    min-width: 0;
+    padding: 0 10px 13px 0;
+}
+
+.club-user-join-card__item--full {
+    grid-column: span 2;
+}
+
+.club-user-join-card__item span,
+.club-user-join-material > span {
+    display: block;
+    margin-bottom: 4px;
+    color: #8b9bb0;
+    font-size: 12px;
+}
+
+.club-user-join-card__item strong {
+    display: block;
+    overflow: hidden;
+    color: #40526a;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 19px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.club-user-join-card__item--full strong {
+    white-space: normal;
+}
+
+.club-user-join-material {
+    display: flex;
+    padding: 0 14px;
+    align-items: center;
+    min-height: 40px;
+    margin-bottom: 12px;
+}
+
+.club-user-join-material > span {
+    flex: 0 0 82px;
+    margin: 0;
+}
+
+.club-user-join-material strong {
+    color: #40526a;
+    font-size: 13px;
+    font-weight: 400;
+}
+
+.club-user-join-material .van-image {
+    width: 56px;
+    height: 40px;
+    overflow: hidden;
+    border: 1px solid #edf2f8;
+    border-radius: 6px;
+}
+
+.club-user-join-info-card .van-cell-group {
+    margin: 0;
+    background: transparent;
+}
+
+.club-user-join-info-card .van-cell {
+    min-height: 44px;
+    padding: 10px 14px;
+    background: transparent;
+}
+
+.club-user-join-info-card .van-cell:not(:last-child)::after {
+    right: 14px;
+    left: 14px;
+    border-color: #eef2f7;
+}
+
+.club-user-join-info-card .van-cell__title {
+    width: 102px;
+    color: #596779;
+    font-size: 12px;
+    line-height: 24px;
+    flex: 0 0 102px;
+}
+
+.club-user-join-info-card .van-cell__value {
+    min-width: 0;
+    color: #4f5d70;
+    font-size: 12px;
+    line-height: 24px;
+    text-align: left;
+    overflow-wrap: anywhere;
+}
+
+.club-user-join-info-card .club-user-join-info-long-cell {
+    display: block;
+}
+
+.club-user-join-info-card .club-user-join-info-long-cell .van-cell__title {
+    width: auto;
+    max-width: 100%;
+}
+
+.club-user-join-info-card .club-user-join-info-long-cell .van-cell__value {
+    margin-top: 7px;
+}
+
+.club-user-join-info-image {
+    display: block;
+    width: 56px;
+    height: 40px;
+    overflow: hidden;
+    border: 1px solid #edf2f8;
+    border-radius: 6px;
+}
+
+.club-user-join-task-card .van-cell-group {
+    margin: 0;
+    background: transparent;
+}
+
+.club-user-join-task-card .van-cell {
+    min-height: 44px;
+    padding: 10px 14px;
+    background: transparent;
+}
+
+.club-user-join-task-card .van-cell:not(:last-child)::after {
+    right: 14px;
+    left: 14px;
+    border-color: #eef2f7;
+}
+
+.club-user-join-task-card .van-cell__title {
+    width: 102px;
+    color: #596779;
+    font-size: 12px;
+    line-height: 24px;
+    flex: 0 0 102px;
+}
+
+.club-user-join-task-card .van-cell__value {
+    min-width: 0;
+    color: #4f5d70;
+    font-size: 12px;
+    line-height: 24px;
+    text-align: left;
+    overflow-wrap: anywhere;
+}
@@ -2,103 +2,177 @@ const clubUserJoin = {
    template:
    /*language=HTML*/
        `
-            <van-action-sheet v-model="visible" title="查看详情">
-                <div class="detail-container">
-                    <van-cell-group title="基本信息">
-                        <van-cell title="社团名称">{{ viewData.clubName }}</van-cell>
-                        <van-cell title="姓名">{{ viewData.userName }}</van-cell>
-                        <van-cell title="工号">{{ viewData.loginName }}</van-cell>
-                        <van-cell title="性别">{{ viewData.sex }}</van-cell>
-                        <van-cell title="出生年月">{{ $moment(viewData.birthday).format('YYYY-MM-DD') }}</van-cell>
-                        <van-cell title="联系电话">{{ viewData.mobile }}</van-cell>
-                        <van-cell title="电子信箱">{{ viewData.email }}</van-cell>
-                        <van-cell title="分工会">{{ viewData.unionName }}</van-cell>
-                        <van-cell title="部门">{{ viewData.unitName }}</van-cell>
-                        <van-cell title="职务">{{ viewData.governmentPosition }}</van-cell>
-                        <van-cell title="职称">{{ viewData.technicalTitle }}</van-cell>
-                        <van-cell title="学历">{{ viewData.education }}</van-cell>
-                        <van-cell title="学位">{{ viewData.academicDegree }}</van-cell>
-                        <van-cell class="direction-column-cell" title="同时参加其他社团情况">
-                            {{ viewData.sameTimeJoinOtherClubSituation || '暂无' }}
-                        </van-cell>
-                        <van-cell class="direction-column-cell" title="文化、体育方面的活动经历、获奖情况">
-                            {{ viewData.awardsExperience || '暂无' }}
-                        </van-cell>
-                        <van-cell class="direction-column-cell" title="照片">
-                            <template slot="default">
-                                <van-image v-if="viewData.avatar && viewData.avatar !== '[]'" :src="viewData.avatar"></van-image>
-                                <span v-else>暂无</span>
-                            </template>
-                        </van-cell>
-                        <van-cell title="签字" >
-                            <van-image :src="viewData.signature"
-                                       v-if="viewData.signature"
-                                       class="signature-image"></van-image>
-                            <span v-else>暂无</span>
-                        </van-cell>
-                    </van-cell-group>
-                    <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>
-                        <van-cell-group :title="task.displayName" v-else>
-                            <van-cell title="办理用户">{{ task.taskFormData.userName }}({{task.taskFormData.loginName}})
-                            </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 title="办理意见" v-if="!task.ext.isFirstTaskNode" class="direction-column-cell">
-                                <div v-html="task.taskFormData.tf_opinion"></div>
-                            </van-cell>
-                        </van-cell-group>
-                    </template>
+            <van-popup v-model="visible" position="right" :style="{ width: '100%', height: '100%' }" get-container="#app" class="club-user-join-popup" :close-on-click-overlay="false">
+                <div class="club-user-join-detail">
+                    <van-nav-bar :title="detailTitle" left-arrow fixed @click-left="onBack"></van-nav-bar>
+                    <div class="club-user-join-detail__scroll">
+                    <main class="club-user-join-detail__content">
+                        <section class="club-user-join-card club-user-join-info-card">
+                            <h3 class="club-user-join-card__title">申请信息</h3>
+                            <van-cell-group :border="false" v-if="mergeApplyInfo">
+                                <van-cell title="社团名称">{{ viewData.clubName || '--' }}</van-cell>
+                                <van-cell title="姓名">{{ viewData.userName || '--' }}</van-cell>
+                                <van-cell title="工号">{{ viewData.loginName || '--' }}</van-cell>
+                                <van-cell title="联系电话">{{ viewData.mobile || '--' }}</van-cell>
+                                <van-cell title="分工会">{{ viewData.unionName || '--' }}</van-cell>
+                                <van-cell title="部门">{{ viewData.unitName || '--' }}</van-cell>
+                                <van-cell title="性别">{{ viewData.sex || '--' }}</van-cell>
+                                <van-cell title="出生年月">{{ formatDate(viewData.birthday) }}</van-cell>
+                                <van-cell title="电子信箱">{{ viewData.email || '--' }}</van-cell>
+                                <van-cell title="职务">{{ viewData.position || viewData.governmentPosition || '--' }}</van-cell>
+                                <van-cell title="职称">{{ viewData.technicalTitle || viewData.jobTitle || '--' }}</van-cell>
+                                <van-cell title="学历 / 学位">{{ educationText }}</van-cell>
+                                <van-cell title="同时参加其他社团情况" class="club-user-join-info-long-cell"><div>{{ viewData.sameTimeJoinOtherClubSituation || '暂无' }}</div></van-cell>
+                                <van-cell title="文化、体育活动经历及获奖情况" class="club-user-join-info-long-cell"><div>{{ viewData.awardsExperience || '暂无' }}</div></van-cell>
+                                <van-cell title="照片" class="club-user-join-info-long-cell"><van-image v-if="viewData.avatar && viewData.avatar !== '[]'" :src="viewData.avatar" class="club-user-join-info-image" fit="cover"></van-image><span v-else>暂无</span></van-cell>
+                                <van-cell title="签字" class="club-user-join-info-long-cell"><van-image v-if="viewData.signature" :src="viewData.signature" class="club-user-join-info-image" fit="contain"></van-image><span v-else>暂无</span></van-cell>
+                            </van-cell-group>
+                            <div v-else class="club-user-join-card__grid">
+                                <div class="club-user-join-card__item"><span>社团名称</span><strong>{{ viewData.clubName || '--' }}</strong></div>
+                                <div class="club-user-join-card__item"><span>姓名</span><strong>{{ viewData.userName || '--' }}</strong></div>
+                                <div class="club-user-join-card__item"><span>工号</span><strong>{{ viewData.loginName || '--' }}</strong></div>
+                                <div class="club-user-join-card__item"><span>联系电话</span><strong>{{ viewData.mobile || '--' }}</strong></div>
+                                <div class="club-user-join-card__item"><span>分工会</span><strong>{{ viewData.unionName || '--' }}</strong></div>
+                                <div class="club-user-join-card__item"><span>部门</span><strong>{{ viewData.unitName || '--' }}</strong></div>
+                            </div>
+                        </section>
+                        <section v-if="!mergeApplyInfo" class="club-user-join-card">
+                            <h3 class="club-user-join-card__title">个人信息</h3>
+                            <div class="club-user-join-card__grid">
+                                <div class="club-user-join-card__item"><span>性别</span><strong>{{ viewData.sex || '--' }}</strong></div>
+                                <div class="club-user-join-card__item"><span>出生年月</span><strong>{{ formatDate(viewData.birthday) }}</strong></div>
+                                <div class="club-user-join-card__item"><span>电子信箱</span><strong>{{ viewData.email || '--' }}</strong></div>
+                                <div class="club-user-join-card__item"><span>职务</span><strong>{{ viewData.position || viewData.governmentPosition || '--' }}</strong></div>
+                                <div class="club-user-join-card__item"><span>职称</span><strong>{{ viewData.technicalTitle || viewData.jobTitle || '--' }}</strong></div>
+                                <div class="club-user-join-card__item"><span>学历 / 学位</span><strong>{{ educationText }}</strong></div>
+                                <div class="club-user-join-card__item club-user-join-card__item--full"><span>同时参加其他社团情况</span><strong>{{ viewData.sameTimeJoinOtherClubSituation || '暂无' }}</strong></div>
+                                <div class="club-user-join-card__item club-user-join-card__item--full"><span>文化、体育活动经历及获奖情况</span><strong>{{ viewData.awardsExperience || '暂无' }}</strong></div>
+                            </div>
+                        </section>
+                        <section v-if="!mergeApplyInfo" class="club-user-join-card">
+                            <h3 class="club-user-join-card__title">申请材料</h3>
+                            <div class="club-user-join-material">
+                                <span>照片</span>
+                                <van-image v-if="viewData.avatar && viewData.avatar !== '[]'" :src="viewData.avatar" fit="cover"></van-image>
+                                <strong v-else>暂无</strong>
+                            </div>
+                            <div class="club-user-join-material">
+                                <span>签字</span>
+                                <van-image v-if="viewData.signature" :src="viewData.signature" fit="contain"></van-image>
+                                <strong v-else>暂无</strong>
+                            </div>
+                        </section>
+                        <section v-for="(task, index) in doneTasks" :key="task.id || index" class="club-user-join-card club-user-join-task-card">
+                            <h3 class="club-user-join-card__title">{{ task.displayName || '审核节点' }}</h3>
+                            <van-cell-group :border="false" v-if="task.ext && 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>
+                            <van-cell-group :border="false" v-else>
+                                <van-cell title="办理用户">{{ task.taskFormData && task.taskFormData.userName || '--' }}（{{ task.taskFormData && task.taskFormData.loginName || '--' }}）</van-cell>
+                                <van-cell title="办理时间">{{ task.finishTime || '--' }}</van-cell>
+                                <van-cell title="办理结果"><dict-tag :options="dict.type.PROCESS_TASK_SUBMIT_TYPE" :value="task.ext && task.ext.submitType"></dict-tag></van-cell>
+                                <van-cell title="办理意见"><div v-html="task.taskFormData && task.taskFormData.tf_opinion || '暂无'"></div></van-cell>
+                            </van-cell-group>
+                        </section>
+                        <slot></slot>
+                    </main>
+                    </div>
                </div>
-                <slot></slot>
-            </van-action-sheet>
+            </van-popup>
        `,
-    dicts: ["PROCESS_TASK_SUBMIT_TYPE"],
+    dicts: ['PROCESS_TASK_SUBMIT_TYPE'],
    data() {
        return {
-            visible:false,
+            visible: false,
+            detailTitle: '社团申请详情',
            viewData: {},
            doneTasks: [],
            row: null,
+            historyLayerUnsubscribe: null
+        }
+    },
+    props: {
+        pageKey: {
+            type: String,
+            default: 'club-user-join-detail'
+        },
+        // 三个社团查看页启用后，将申请、个人及材料信息合并为同一张申请信息卡片。
+        mergeApplyInfo: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        educationText() {
+            const education = this.viewData.education || '';
+            const degree = this.viewData.academicDegree || '';
+            return education || degree ? education + (education && degree ? ' / ' : '') + degree : '--';
+        }
+    },
+    created() {
+        const manager = window.h5HistoryLayerManager;
+        if (manager) {
+            manager.ensureRegistered(this.pageKey);
+            this.historyLayerUnsubscribe = manager.subscribe((layers) => {
+                this.$set(this, 'visible', layers.includes('club-user-join-detail'));
+            });
+        }
+    },
+    beforeDestroy() {
+        if (this.historyLayerUnsubscribe) {
+            this.historyLayerUnsubscribe();
        }
    },
    methods: {
-        onOpen(row) {
-            this.row = row
-            this.visible = true
-            this.getInfo()
-            this.getDoneTasks()
+        onOpen(row, title) {
+            this.$set(this, 'row', row);
+            this.$set(this, 'detailTitle', title || '社团申请详情');
+            this.$set(this, 'viewData', Object.assign({}, row || {}));
+            this.$set(this, 'doneTasks', []);
+            const manager = window.h5HistoryLayerManager;
+            if (manager) {
+                manager.open('club-user-join-detail');
+            } else {
+                this.$set(this, 'visible', true);
+            }
+            if (!this.row || !this.row.id) {
+                return;
+            }
+            this.getInfo();
+            this.getDoneTasks();
        },
-        onClose(){
-            this.visible = false
+        onClose(afterClose) {
+            const manager = window.h5HistoryLayerManager;
+            if (manager) {
+                manager.close('club-user-join-detail', afterClose);
+                return;
+            }
+            this.$set(this, 'visible', false);
+            if (afterClose) {
+                afterClose();
+            }
+        },
+        onBack() {
+            this.onClose();
+        },
+        formatDate(date) {
+            return date ? this.$moment(date).format('YYYY-MM-DD') : '--';
        },
        getInfo() {
-            this.$axios.post("/platform/club/join/mine/info", { id: this.row.id }).then((res) => {
+            this.$axios.post('/platform/club/join/mine/info', {id: this.row.id}).then((res) => {
                if (res.code === 0) {
-                    this.viewData = res.data
+                    this.$set(this, 'viewData', Object.assign({}, this.viewData, res.data || {}));
                }
            })
        },
        getDoneTasks() {
-            this.$axios.post("/flow/common/doneTasks", {bizId: this.row.id}).then((res) => {
+            this.$axios.post('/flow/common/doneTasks', {bizId: this.row.id}).then((res) => {
                if (res.code === 0) {
-                    this.doneTasks = res.data
+                    this.$set(this, 'doneTasks', res.data || []);
                }
            })
-        },
-    },
-    style: /*language=CSS*/ `
-           
-    `
+        }
+    }
 }
@@ -2,140 +2,111 @@
 layout("/layouts/platform_h5.html"){
 #-->

-<style scoped>
-    .van-cell__value {
-        min-width: 70%;
-    }
+<style id="style-club-user-join-h5">
+    <!--#include('../common/clubUserJoin.css'){}#-->
 </style>

-<div id="app">
-    <van-nav-bar title="我的申请" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
+<style>
+    #app { --club-primary: #1989fa; }
+    .club-mine-page { min-height: 100vh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; background: #f3f7fd; }
+    .club-mine-page .van-nav-bar, .club-mine-page .van-sticky--fixed { background: #fff; }
+    .club-mine-page .van-nav-bar__title { color: #172033; font-size: 16px; font-weight: 600; }
+    .club-mine-page .van-nav-bar .van-icon, .club-mine-page .van-nav-bar__text { color: #1989fa; }
+    .club-mine-sticky { padding: 22px 12px 1px; box-sizing: border-box; background: #f3f7fd; }
+    .club-mine-search { margin: 0 0 8px; padding: 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(43, 73, 112, .1); }
+    .club-mine-search .van-search__content { height: 42px; padding-left: 12px; align-items: center; border-radius: 12px; background: #fff; }
+    .club-mine-search .van-field__control { color: #263548; font-size: 14px; }
+    .club-mine-search .van-field__control::placeholder { color: #a7b0bf; }
+    .club-mine-filter { margin-bottom: 8px; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
+    .club-mine-filter .van-dropdown-menu__bar, .club-mine-filter .van-dropdown-menu__item, .club-mine-filter .van-dropdown-menu__title { height: 44px; box-shadow: none; }
+    .club-mine-filter .van-dropdown-menu__item { align-items: center; justify-content: center; }
+    .club-mine-filter .van-dropdown-menu__title { display: inline-flex; align-items: center; color: #66758a; font-size: 14px; line-height: 20px; }
+    .club-mine-filter .van-dropdown-menu__title--active, .club-mine-filter .van-dropdown-item__option--active, .club-mine-filter .van-dropdown-item__option--active .van-dropdown-item__icon { color: #1989fa; }
+    .club-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); }
+    .club-mine-filter .van-dropdown-item__option { display: flex; min-height: 48px; padding: 0 16px; align-items: center; color: #46566c; font-size: 14px; }
+    .club-mine-list-content { padding: 0 12px; }
+    .club-mine-page .table-list-container { margin-top: 0; padding-bottom: 2px; }
+    .club-mine-page .table-list-container .table-list-item { margin-bottom: 12px; padding: 14px; border: 1px solid #e9eff7; border-radius: 12px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
+    .club-mine-page .empty-state { padding: 0; }
+    .club-card-header { display: flex; margin-bottom: 8px; align-items: flex-start; justify-content: space-between; }
+    .club-card-header__heading { min-width: 0; padding-right: 10px; flex: 1; }
+    .club-card-header__title { overflow: hidden; color: #253247; font-size: 15px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
+    .club-card-header__sub { margin-top: 1px; color: #9ba6b6; font-size: 12px; line-height: 18px; }
+    .club-card-header__status { display: inline-flex; flex: none; }
+    .club-card-header__status .van-tag { min-height: 24px; padding: 3px 9px; border: 0; border-radius: 12px; box-sizing: border-box; font-size: 12px; line-height: 18px; }
+    .club-mine-page .table-list-container .table-list-item .item-actions { margin-top: 10px; padding-top: 10px; border-top-color: #edf1f6; }
+    .club-mine-page .table-list-container .table-list-item .action-btn { min-height: 28px; padding: 4px 11px; border-radius: 14px; color: #1989fa; background: #eaf4ff; font-size: 12px; line-height: 18px; }
+    .club-mine-page .table-list-container .table-list-item .action-btn.delete { color: #f04444; background: #fff0f0; }
+    .club-mine-page .table-list-container .table-list-item .action-btn .van-icon { margin-right: 5px; font-size: 13px; }
+    .club-list-skeleton { padding: 0; }
+    .club-skeleton-card { margin-bottom: 12px; padding: 14px; background: #fff; border: 1px solid #e9eff7; border-radius: 12px; }
+    .club-skeleton-line { height: 13px; margin-bottom: 12px; border-radius: 7px; background: linear-gradient(90deg, #f2f3f5 25%, #e6e8eb 37%, #f2f3f5 63%); background-size: 400% 100%; animation: club-skeleton-loading 1.4s ease infinite; }
+    .club-skeleton-line--title { width: 46%; height: 16px; }
+    .club-skeleton-line--short { width: 60%; }
+    .club-empty { display: flex; min-height: 280px; padding: 46px 18px 36px; align-items: center; justify-content: center; box-sizing: border-box; flex-direction: column; text-align: center; }
+    .club-empty img { display: block; width: 86%; max-width: 290px; height: auto; object-fit: contain; }
+    .club-empty__title { margin-top: 14px; color: #50627a; font-size: 15px; font-weight: 600; line-height: 22px; }
+    .club-empty__hint { margin-top: 5px; color: #9aa7b8; font-size: 12px; line-height: 18px; }
+    @keyframes club-skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
+</style>

+<div id="app" v-cloak class="club-mine-page">
+    <van-nav-bar title="我的申请" left-arrow @click-left="onNavBack" 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-menu>
+        <div class="club-mine-sticky">
+            <van-search v-model="pageForm.clubName" class="club-mine-search" placeholder="请输入社团名称搜索" shape="round" clearable @search="doSearch" @clear="doSearch"></van-search>
+            <van-dropdown-menu class="club-mine-filter" :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-menu>
+        </div>
    </van-sticky>

-    <table-list api="/platform/club/join/mine/pageData" :page_form.sync="pageForm" ref="tableListRef" title="clubName" @ready="doSearch">
-        <template v-slot="{index,row}">
-            <table-column label="姓名">{{row.userName}}</table-column>
-            <table-column label="工号">{{row.loginName}}</table-column>
-            <table-column label="申请模式">{{row.mode ? '加入' : '退出'}}</table-column>
-            <table-column label="申请时间">{{row.applyDate}}</table-column>
-            <table-column label="当前节点">{{row.taskName}}</table-column>
+    <main class="club-mine-list-content">
+    <table-list api="/platform/club/join/mine/pageData" :page_form.sync="pageForm" ref="tableListRef" title="clubName" :show_loading_overlay="false" @ready="doSearch" @loading-change="onLoadingChange">
+        <template #header="{row}">
+            <div v-if="row" class="club-card-header"><div class="club-card-header__heading"><div class="club-card-header__title">{{ row.userName || '--' }}</div><div class="club-card-header__sub">工号：{{ row.loginName || '--' }}</div></div><enum-tag class="club-card-header__status" v-if="row.instanceState" :value="row.instanceState" name="ProcessInstanceStateEnum" label_key="message" size="small"></enum-tag></div>
        </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="onEdit(row)"
-                 v-if="(row.taskKey === 'startTask' || !row.instanceId) && row.mode === true">
-                <i class="fa fa-edit"></i>
-                <span>编辑</span>
-            </div>
-            <div class="action-btn" @click="exitSubmitAgain(row)"
-                 v-if="(row.taskKey === 'startTask' || !row.instanceId) && row.mode === false">
-                <i class="fa fa-edit"></i>
-                <span>提交</span>
-            </div>
-            <div class="action-btn delete" @click="onRevoke(row)"
-                 v-if="row.canRevoke">
-                <i class="fa fa-undo"></i>
-                <span>撤回</span>
-            </div>
-            <div class="action-btn delete" @click="onDelete(row)"
-                 v-if="row.taskKey === 'startTask' || !row.instanceId">
-                <i class="fa fa-trash"></i>
-                <span>删除</span>
-            </div>
+        <template v-slot="{row}">
+            <template v-if="row"><table-column label="社团名称">{{ row.clubName || '--' }}</table-column><table-column label="申请类型">{{ row.mode ? '加入社团' : '退出社团' }}</table-column><table-column label="申请时间">{{ row.applyDate || '--' }}</table-column><table-column label="当前节点">{{ row.taskName || '--' }}</table-column></template>
+        </template>
+        <template #actions="{row}">
+            <template v-if="row"><div class="action-btn" @click="onView(row)"><van-icon name="eye-o"></van-icon><span>查看</span></div><div class="action-btn" @click="onEdit(row)" v-if="(row.taskKey === 'startTask' || !row.instanceId) && row.mode === true"><van-icon name="edit"></van-icon><span>编辑</span></div><div class="action-btn" @click="exitSubmitAgain(row)" v-if="(row.taskKey === 'startTask' || !row.instanceId) && row.mode === false"><van-icon name="passed"></van-icon><span>提交</span></div><div class="action-btn delete" @click="onRevoke(row)" v-if="row.canRevoke"><van-icon name="revoke"></van-icon><span>撤回</span></div><div class="action-btn delete" @click="onDelete(row)" v-if="row.taskKey === 'startTask' || !row.instanceId"><van-icon name="delete-o"></van-icon><span>删除</span></div></template>
+        </template>
+        <template #empty>
+            <div v-if="listLoading" class="club-list-skeleton"><div v-for="item in 2" :key="item" class="club-skeleton-card"><div class="club-skeleton-line club-skeleton-line--title"></div><div class="club-skeleton-line"></div><div class="club-skeleton-line club-skeleton-line--short"></div></div></div>
+            <div v-else class="club-empty"><img src="/assets/mobile/img/club/club-approval-empty.png" alt="暂无社团申请记录插画"><div class="club-empty__title">暂无社团申请记录</div><div class="club-empty__hint">当前筛选条件下暂时没有社团申请</div></div>
        </template>
    </table-list>
+    </main>

-    <info ref="infoRef"></info>
+    <info ref="infoRef" page-key="club-mine" :merge-apply-info="true"></info>
+    <van-dialog :value="confirmVisible" title="提示" :message="confirmMessage" show-cancel-button :confirm-button-loading="formLoading" @confirm="confirmPendingAction" @cancel="closeConfirm"></van-dialog>
 </div>

 <script nonce="${cspNonce!}">
    <!--#include('../common/clubUserJoin.js'){}#-->
    new Vue({
-        el: "#app",
-        store,
-        components: {
-            info: clubUserJoin
-        },
-        data() {
-            return {
-                pageForm: {
-                    pageNumber: 1,
-                    pageSize: 10,
-                    totalCount: 0,
-                    year: new Date().getFullYear()
-                },
-            }
-        },
+        el: "#app", store, dicts: ['PROCESS_INSTANCE_STATE'], components: {info: clubUserJoin},
+        data() { return {pageForm: {pageNumber: 1, pageSize: 10, totalCount: 0, year: new Date().getFullYear(), clubName: ''}, listLoading: true, formLoading: false, confirmVisible: false, pendingAction: '', pendingRow: null, historyLayerUnsubscribe: null} },
+        computed: { confirmMessage() { if (this.pendingAction === 'revoke') { return '您确定要撤回吗？'; } if (this.pendingAction === 'delete') { return '确定要删除此申请吗？'; } return '您确定要提交申请吗？'; } },
+        created() { const manager = window.h5HistoryLayerManager; if (manager) { manager.ensureRegistered('club-mine'); this.historyLayerUnsubscribe = manager.subscribe((layers) => { this.$set(this, 'confirmVisible', layers.includes('club-mine-confirm')); }); } },
+        beforeDestroy() { if (this.historyLayerUnsubscribe) { this.historyLayerUnsubscribe(); } const manager = window.h5HistoryLayerManager; if (manager) { manager.unregister('club-mine'); } },
        methods: {
-            exitSubmitAgain(row) {
-                this.$dialog.confirm({
-                    title: "提示",
-                    message: "您确定要提交申请吗？"
-                }).then(async () => {
-                    const res = await this.$axios.post("/platform/club/join/apply/info", {id: row.id})
-                    this.$axios.post('/platform/club/join/apply/submitAgain', {
-                        data: JSON.stringify(res.data),
-                        taskId: row.startTaskId,
-                    }).then(res => {
-                        if (res.code === 0) {
-                            this.$toast(res.msg)
-                            this.doSearch()
-                        }
-                    })
-                })
-            },
-            onRevoke(row) {
-                this.$dialog.confirm({
-                    title: "提示",
-                    message: "您确定要撤回吗？"
-                }).then(() => {
-                    this.$axios.post("/flow/common/revokeTask", { taskId: row.startTaskId }).then((res) => {
-                        if (res.code === 0) {
-                            this.$toast(res.msg)
-                            this.doSearch()
-                        }
-                    })
-                })
-            },
-            onView(row) {
-                this.$refs.infoRef.onOpen(row)
-            },
-            onEdit(row) {
-                this.$pjaxReplace("/platform/club/join/apply/h5?taskId=" + (row.startTaskId || "") + "&bizId=" + row.id)
-            },
-            onDelete(row) {
-                this.$dialog.confirm({
-                    title: "提示",
-                    message: "确定要删除此申请吗？"
-                })
-                    .then(() => {
-                        this.$axios.post("/platform/club/join/mine/delete", { id: row.id }).then((res) => {
-                            if (res.code === 0) {
-                                this.$toast.success(res.msg)
-                                this.doSearch()
-                            } else {
-                                this.$toast.fail(res.msg)
-                            }
-                        })
-                    })
-                    .catch(() => {})
-            },
-            doSearch() {
-                this.$nextTick(() => {
-                    this.pageForm.pageNumber = 1
-                    this.pageForm.totalCount = 0
-                    this.$refs.tableListRef.doSearch()
-                })
-            }
-        },
+            onNavBack() { const manager = window.h5HistoryLayerManager; if (manager && manager.stack.length) { manager.close(); return; } historyBack(); },
+            onLoadingChange(state) { this.$set(this, 'listLoading', state.loading); },
+            openConfirm(action, row) { this.$set(this, 'pendingAction', action); this.$set(this, 'pendingRow', row); const manager = window.h5HistoryLayerManager; if (manager) { manager.open('club-mine-confirm'); return; } this.$set(this, 'confirmVisible', true); },
+            closeConfirm(afterClose) { const manager = window.h5HistoryLayerManager; if (manager) { manager.close('club-mine-confirm', afterClose); return; } this.$set(this, 'confirmVisible', false); if (afterClose) { afterClose(); } },
+            confirmPendingAction() { const action = this.pendingAction; const row = this.pendingRow; this.closeConfirm(() => { if (action === 'revoke') { this.revoke(row); } else if (action === 'delete') { this.deleteApplication(row); } else { this.submitAgain(row); } }); },
+            exitSubmitAgain(row) { this.openConfirm('submitAgain', row); },
+            submitAgain(row) { this.$set(this, 'formLoading', true); this.$axios.post('/platform/club/join/apply/info', {id: row.id}).then((res) => { if (res.code === 0) { return this.$axios.post('/platform/club/join/apply/submitAgain', {data: JSON.stringify(res.data), taskId: row.startTaskId}); } this.$toast.fail(res.msg); return null; }).then((res) => { if (res && res.code === 0) { this.$toast(res.msg); this.doSearch(); } }).finally(() => { this.$set(this, 'formLoading', false); }); },
+            onRevoke(row) { this.openConfirm('revoke', row); },
+            revoke(row) { this.$set(this, 'formLoading', true); this.$axios.post('/flow/common/revokeTask', {taskId: row.startTaskId}).then((res) => { if (res.code === 0) { this.$toast(res.msg); this.doSearch(); } }).finally(() => { this.$set(this, 'formLoading', false); }); },
+            onView(row) { this.$refs.infoRef.onOpen(row, '社团申请详情'); },
+            onEdit(row) { this.$pjaxReplace('/platform/club/join/apply/h5?taskId=' + (row.startTaskId || '') + '&bizId=' + row.id); },
+            onDelete(row) { this.openConfirm('delete', row); },
+            deleteApplication(row) { this.$set(this, 'formLoading', true); this.$axios.post('/platform/club/join/mine/delete', {id: row.id}).then((res) => { if (res.code === 0) { this.$toast.success(res.msg); this.doSearch(); } else { this.$toast.fail(res.msg); } }).finally(() => { this.$set(this, 'formLoading', false); }); },
+            doSearch() { this.$nextTick(() => { this.$set(this.pageForm, 'pageNumber', 1); this.$set(this.pageForm, 'totalCount', 0); this.$refs.tableListRef.doSearch(); }); }
+        }
    })
 </script>

@@ -2,91 +2,87 @@
 layout("/layouts/platform_h5.html"){
 #-->

-<style scoped>
-    .van-cell__value {
-        min-width: 70%;
-    }
+<style id="style-club-user-join-h5">
+    <!--#include('../common/clubUserJoin.css'){}#-->
 </style>

-<div id="app">
-    <van-nav-bar title="我的社团" left-text="返回" left-arrow @click-left="historyBack" fixed placeholder></van-nav-bar>
+<style>
+    #app { --club-primary: #1989fa; }
+    .club-member-page { min-height: 100vh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; background: #f3f7fd; }
+    .club-member-page .van-nav-bar, .club-member-page .van-sticky--fixed { background: #fff; }
+    .club-member-page .van-nav-bar__title { color: #172033; font-size: 16px; font-weight: 600; }
+    .club-member-page .van-nav-bar .van-icon, .club-member-page .van-nav-bar__text { color: #1989fa; }
+    .club-member-sticky { padding: 22px 12px 1px; box-sizing: border-box; background: #f3f7fd; }
+    .club-member-search { margin: 0 0 8px; padding: 0; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(43, 73, 112, .1); }
+    .club-member-search .van-search__content { height: 42px; padding-left: 12px; align-items: center; border-radius: 12px; background: #fff; }
+    .club-member-search .van-field__control { color: #263548; font-size: 14px; }
+    .club-member-search .van-field__control::placeholder { color: #a7b0bf; }
+    .club-member-list-content { padding: 0 12px; }
+    .club-member-page .table-list-container { margin-top: 0; padding-bottom: 2px; }
+    .club-member-page .table-list-container .table-list-item { margin-bottom: 12px; padding: 14px; border: 1px solid #e9eff7; border-radius: 12px; box-shadow: 0 5px 16px rgba(43, 73, 112, .08); }
+    .club-member-page .empty-state { padding: 0; }
+    .club-card-header { display: flex; margin-bottom: 8px; align-items: flex-start; justify-content: space-between; }
+    .club-card-header__heading { min-width: 0; padding-right: 10px; flex: 1; }
+    .club-card-header__title { overflow: hidden; color: #253247; font-size: 15px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
+    .club-card-header__sub { margin-top: 1px; color: #9ba6b6; font-size: 12px; line-height: 18px; }
+    .club-card-header__status { display: inline-flex; flex: none; }
+    .club-card-header__status.van-tag, .club-card-header__status .van-tag { min-height: 24px; padding: 3px 9px; border: 0; border-radius: 12px; box-sizing: border-box; font-size: 12px; line-height: 18px; }
+    .club-member-page .table-list-container .table-list-item .item-actions { margin-top: 10px; padding-top: 10px; border-top-color: #edf1f6; }
+    .club-member-page .table-list-container .table-list-item .action-btn { min-height: 28px; padding: 4px 11px; border-radius: 14px; color: #1989fa; background: #eaf4ff; font-size: 12px; line-height: 18px; }
+    .club-member-page .table-list-container .table-list-item .action-btn.delete { color: #f04444; background: #fff0f0; }
+    .club-member-page .table-list-container .table-list-item .action-btn .van-icon { margin-right: 5px; font-size: 13px; }
+    .club-list-skeleton { padding: 0; }
+    .club-skeleton-card { margin-bottom: 12px; padding: 14px; background: #fff; border: 1px solid #e9eff7; border-radius: 12px; }
+    .club-skeleton-line { height: 13px; margin-bottom: 12px; border-radius: 7px; background: linear-gradient(90deg, #f2f3f5 25%, #e6e8eb 37%, #f2f3f5 63%); background-size: 400% 100%; animation: club-skeleton-loading 1.4s ease infinite; }
+    .club-skeleton-line--title { width: 46%; height: 16px; }
+    .club-skeleton-line--short { width: 60%; }
+    .club-empty { display: flex; min-height: 280px; padding: 46px 18px 36px; align-items: center; justify-content: center; box-sizing: border-box; flex-direction: column; text-align: center; }
+    .club-empty img { display: block; width: 86%; max-width: 290px; height: auto; object-fit: contain; }
+    .club-empty__title { margin-top: 14px; color: #50627a; font-size: 15px; font-weight: 600; line-height: 22px; }
+    .club-empty__hint { margin-top: 5px; color: #9aa7b8; font-size: 12px; line-height: 18px; }
+    @keyframes club-skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
+</style>

-    <van-sticky offset-top="46px">
-        <van-search
-                v-model="pageForm.clubName"
-                :show-action="false"
-                :reverse-color="false"
-                input-align="left"
-                placeholder="请输入社团名称"
-                @search="doSearch"
-        ></van-search>
-    </van-sticky>
+<div id="app" v-cloak class="club-member-page">
+    <van-nav-bar title="我的社团" left-arrow @click-left="onNavBack" fixed placeholder></van-nav-bar>
+    <van-sticky offset-top="46px"><div class="club-member-sticky"><van-search v-model="pageForm.clubName" class="club-member-search" placeholder="请输入社团名称搜索" shape="round" clearable @search="doSearch" @clear="doSearch"></van-search></div></van-sticky>

-    <table-list api="/platform/club/join/mine/club/pageData" :page_form.sync="pageForm" ref="tableListRef" title="clubName" @ready="doSearch">
-        <template v-slot="{index,row}">
-            <table-column label="社团编码">{{row.clubCode}}</table-column>
-            <table-column label="成立时间">{{row.foundTime}}</table-column>
-            <table-column label="会长">{{row.clubLeader}}</table-column>
-            <table-column label="秘书长">{{row.clubSecretary}}</table-column>
-            <table-column label="当前人数">{{row.currentPeopleNum}}</table-column>
+    <main class="club-member-list-content">
+    <table-list api="/platform/club/join/mine/club/pageData" :page_form.sync="pageForm" ref="tableListRef" title="userName" :show_loading_overlay="false" @ready="doSearch" @loading-change="onLoadingChange">
+        <template #header="{row}">
+            <div v-if="row" class="club-card-header"><div class="club-card-header__heading"><div class="club-card-header__title">{{ row.userName || '--' }}</div><div class="club-card-header__sub">工号：{{ row.loginName || '--' }}</div></div><van-tag class="club-card-header__status" type="success" size="small">已完成</van-tag></div>
        </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 delete" @click="onExit(row)">
-                <i class="fa fa-undo"></i>
-                <span>申请退会</span>
-            </div>
+        <template v-slot="{row}">
+            <template v-if="row"><table-column label="社团名称">{{ row.clubName || '--' }}</table-column><table-column label="会长">{{ row.clubLeader || '--' }}</table-column><table-column label="秘书长">{{ row.clubSecretary || '--' }}</table-column><table-column label="当前人数">{{ row.currentPeopleNum || 0 }} 人</table-column></template>
+        </template>
+        <template #actions="{row}"><template v-if="row"><div class="action-btn" @click="onView(row)"><van-icon name="eye-o"></van-icon><span>查看</span></div><div class="action-btn delete" @click="onExit(row)"><van-icon name="revoke"></van-icon><span>申请退会</span></div></template></template>
+        <template #empty>
+            <div v-if="listLoading" class="club-list-skeleton"><div v-for="item in 2" :key="item" class="club-skeleton-card"><div class="club-skeleton-line club-skeleton-line--title"></div><div class="club-skeleton-line"></div><div class="club-skeleton-line club-skeleton-line--short"></div></div></div>
+            <div v-else class="club-empty"><img src="/assets/mobile/img/club/club-approval-empty.png" alt="暂无社团记录插画"><div class="club-empty__title">暂无社团记录</div><div class="club-empty__hint">当前筛选条件下暂时没有加入的社团</div></div>
        </template>
    </table-list>
+    </main>
+    <info ref="infoRef" page-key="club-mineclub" :merge-apply-info="true"></info>
+    <van-dialog :value="confirmVisible" title="提示" :message="confirmMessage" show-cancel-button :confirm-button-loading="formLoading" @confirm="confirmExit" @cancel="closeConfirm"></van-dialog>
 </div>

 <script nonce="${cspNonce!}">
+    <!--#include('../common/clubUserJoin.js'){}#-->
    new Vue({
-        el: "#app",
-        store,
-        components: {
-
-        },
-        data() {
-            return {
-                pageForm: {
-                    pageNumber: 1,
-                    pageSize: 10,
-                    totalCount: 0,
-                },
-            }
-        },
+        el: "#app", store, components: {info: clubUserJoin},
+        data() { return {pageForm: {pageNumber: 1, pageSize: 10, totalCount: 0, clubName: ''}, listLoading: true, formLoading: false, confirmVisible: false, currentRow: null, historyLayerUnsubscribe: null} },
+        computed: { confirmMessage() { return this.currentRow ? '您确定要申请退出“' + this.currentRow.clubName + '”吗？' : '您确定要申请退出该社团吗？'; } },
+        created() { const manager = window.h5HistoryLayerManager; if (manager) { manager.ensureRegistered('club-mineclub'); this.historyLayerUnsubscribe = manager.subscribe((layers) => { this.$set(this, 'confirmVisible', layers.includes('club-mineclub-confirm')); }); } },
+        beforeDestroy() { if (this.historyLayerUnsubscribe) { this.historyLayerUnsubscribe(); } const manager = window.h5HistoryLayerManager; if (manager) { manager.unregister('club-mineclub'); } },
        methods: {
-            onExit(row) {
-                this.$dialog.confirm({
-                    title: "提示",
-                    message: "您确定要申请退出" + row.clubName + "吗？"
-                }).then(() => {
-                    this.$axios.post('/platform/club/join/apply/submit', {
-                        data: JSON.stringify(row),
-                        mode: false,
-                    }).then(res => {
-                        if (res.code === 0) {
-                            this.$toast(res.msg)
-                            this.$pjaxReplace("/platform/club/join/mine/h5")
-                        }
-                    })
-                })
-            },
-            onView(row) {
-                this.$refs.infoRef.onOpen(row)
-            },
-            doSearch() {
-                this.$nextTick(() => {
-                    this.pageForm.pageNumber = 1
-                    this.pageForm.totalCount = 0
-                    this.$refs.tableListRef.doSearch()
-                })
-            }
-        },
+            onNavBack() { const manager = window.h5HistoryLayerManager; if (manager && manager.stack.length) { manager.close(); return; } historyBack(); },
+            onLoadingChange(state) { this.$set(this, 'listLoading', state.loading); },
+            onView(row) { this.$refs.infoRef.onOpen(Object.assign({}, row, {id: row.applyId}), '社团申请详情'); },
+            onExit(row) { this.$set(this, 'currentRow', row); const manager = window.h5HistoryLayerManager; if (manager) { manager.open('club-mineclub-confirm'); return; } this.$set(this, 'confirmVisible', true); },
+            closeConfirm(afterClose) { const manager = window.h5HistoryLayerManager; if (manager) { manager.close('club-mineclub-confirm', afterClose); return; } this.$set(this, 'confirmVisible', false); if (afterClose) { afterClose(); } },
+            confirmExit() { const row = this.currentRow; this.closeConfirm(() => { this.$set(this, 'formLoading', true); this.$axios.post('/platform/club/join/apply/submit', {data: JSON.stringify(row), mode: false}).then((res) => { if (res.code === 0) { this.$toast(res.msg); const manager = window.h5HistoryLayerManager; if (manager) { manager.closeAll(() => { this.$pjaxReplace('/platform/club/join/mine/h5'); }); } else { this.$pjaxReplace('/platform/club/join/mine/h5'); } } }).finally(() => { this.$set(this, 'formLoading', false); }); }); },
+            doSearch() { this.$nextTick(() => { this.$set(this.pageForm, 'pageNumber', 1); this.$set(this.pageForm, 'totalCount', 0); this.$refs.tableListRef.doSearch(); }); }
+        }
    })
 </script>