验收完成40%

pages/genealogy/g09-my-applications.vue

@@ -1,8 +1,7 @@
 <!-- 页面编号：G-09；用途：我的家谱申请列表与空/失败状态。 -->
 <template>
   <view class="application-page">
-    <image class="application-page__paper" src="/static/assets/foundation/opaque/page-paper.jpg" mode="aspectFill" />
-    <image class="application-page__footer" src="/static/assets/foundation/transparent/footer-mountain-bamboo.png" mode="widthFix" />
+    <GenealogyPageBackground />
     <view class="application-page__header"><PageHeader title="我的申请" /></view>
 
     <view class="application-content" :class="{
@@ -35,30 +34,30 @@
         </view>
       </view>
       <view v-if="applicationState !== 'list'" class="application-page__action" @click="applicationState === 'error' ? loadApplications({}) : toSearch()">
-        <image src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
+        <image src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
         <text>{{ applicationState === 'error' ? '重新查看' : '查找公开家谱' }}</text>
       </view>
     </view>
 
-    <view v-if="withdrawTarget" class="withdraw-layer" @click="cancelWithdraw">
-      <view class="withdraw-dialog" @click.stop>
-        <image class="withdraw-dialog__skin" src="/static/assets/modules/genealogy/opaque/application-status-card.png" mode="scaleToFill" />
-        <view class="withdraw-dialog__content">
-          <text class="withdraw-dialog__title">撤回加入申请</text>
-          <text class="withdraw-dialog__copy">确认撤回对“{{ withdrawTarget.genealogyName }}”的申请？撤回后如需加入，可重新提交。</text>
-          <view class="withdraw-dialog__actions">
-            <view class="withdraw-action" @click="cancelWithdraw">暂不撤回</view>
-            <view class="withdraw-action withdraw-action--danger" @click="confirmWithdraw">确认撤回</view>
-          </view>
-        </view>
-      </view>
-    </view>
+    <AppDialog
+      :visible="!!withdrawTarget"
+      title="撤回加入申请"
+      :message="withdrawTarget ? `确认撤回对“${withdrawTarget.genealogyName}”的申请？撤回后如需加入，可重新提交。` : ''"
+      confirm-text="确认撤回"
+      cancel-text="暂不撤回"
+      show-cancel
+      @confirm="confirmWithdraw"
+      @cancel="cancelWithdraw"
+      @close="cancelWithdraw"
+    />
   </view>
 </template>
 
 <script setup>
 import { computed, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import AppDialog from '@/components/AppDialog.vue'
+import GenealogyPageBackground from '@/components/GenealogyPageBackground.vue'
 import PageHeader from '@/components/PageHeader.vue'
 
 const applications = ref([])
@@ -116,8 +115,6 @@ const toSearch = () => uni.navigateTo({ url: '/pages/genealogy/g06-search-geneal
 
 <style scoped lang="scss">
 .application-page { position: relative; min-height: 100vh; overflow-x: hidden; background: $paper; }
-.application-page__paper { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .98; pointer-events: none; }
-.application-page__footer { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; opacity: .13; pointer-events: none; }
 .application-page__header { position: relative; z-index: 3; }
 .application-content { position: relative; z-index: 2; padding: 28rpx 24rpx 60rpx; }
 .application-intro { display: flex; align-items: baseline; justify-content: space-between; margin: 0 8rpx 20rpx; }
@@ -142,13 +139,4 @@ const toSearch = () => uni.navigateTo({ url: '/pages/genealogy/g06-search-geneal
 .application-page__action { position: relative; width: 420rpx; height: 82rpx; margin: 34rpx auto 0; }
 .application-page__action image { position: absolute; inset: 0; width: 100%; height: 100%; }
 .application-page__action text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #fff9ed; font-size: 26rpx; font-weight: 700; }
-.withdraw-layer { position: fixed; z-index: 30; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 42rpx; background: rgba(34, 20, 12, .58); }
-.withdraw-dialog { position: relative; width: 100%; max-width: 660rpx; min-height: 390rpx; }
-.withdraw-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
-.withdraw-dialog__content { position: relative; z-index: 1; display: flex; min-height: 390rpx; flex-direction: column; align-items: center; box-sizing: border-box; padding: 74rpx 60rpx 46rpx; text-align: center; }
-.withdraw-dialog__title { color: $ink; font-family: 'STKaiti', 'KaiTi', serif; font-size: 36rpx; font-weight: 700; }
-.withdraw-dialog__copy { margin-top: 24rpx; color: $ink-muted; font-size: 23rpx; line-height: 38rpx; }
-.withdraw-dialog__actions { display: flex; width: 100%; margin-top: auto; border-top: 1rpx solid rgba(181, 138, 75, .42); }
-.withdraw-action { display: flex; flex: 1; min-height: 76rpx; align-items: center; justify-content: center; color: $ink-muted; font-size: 23rpx; }
-.withdraw-action--danger { border-left: 1rpx solid rgba(181, 138, 75, .42); color: $brand-red; }
 </style>