🎨 优化点亮提交页样式

src/api/BaseAppServerRequestModule.ts

@@ -212,6 +212,42 @@ export class BaseAppServerRequestModule<T extends DataModel> extends RequestCore
         });
       }
     };
+    //响应错误处理函数
+    this.config.responseErrorHandler = (err: any, instance: RequestCoreInstance<T>, apiInfo: RequestApiInfoStruct) => {
+      if (err instanceof RequestApiError) {
+        return err;
+      }
+
+      function createNetworkError(errMsg: string): RequestApiError {
+        return new RequestApiError(
+          'networkError',
+          errMsg,
+          '',
+          0,
+          null,
+          null,
+          apiInfo.apiRawReq?.headers as any,
+          apiInfo
+        );
+      }
+      if (err.errMsg) {
+        if (err.errMsg.includes('timeout'))
+          return createNetworkError('网络请求超时，请稍后重试');
+        if (err.errMsg.includes('fail'))
+          return createNetworkError('网络连接失败，请检查网络设置');
+        return createNetworkError(err.errMsg);
+      }
+      return new RequestApiError(
+        'scriptError',
+        '服务器返回错误',
+        '',
+        0,
+        null,
+        null,
+        apiInfo.apiRawReq?.headers as any,
+        apiInfo
+      );
+    };
     //错误报告处理
     this.config.responseErrorReportInterceptor = (instance, response) => {
       return (

src/common/components/PrimaryButton.vue

@@ -4,7 +4,8 @@
     :backgroundCutBorder="20"
     :backgroundCutBorderSize="20"
     :padding="[22, 40]"
-    :width="width"
+    :width="block ? undefined : width"
+    :flex="block ? '1 1 100%' : undefined"
     :innerStyle="innerStyle"
     center
     @click="emit('click')"
@@ -24,6 +25,7 @@ const props = withDefaults(defineProps<{
   width?: string|number;
   innerStyle?: object;
   loading?: boolean;
+  block?: boolean;
 }>(), {
   text: '去发布',
 }); 

src/components/basic/BackgroundImageButton.vue

@@ -1,21 +1,33 @@
 <template>
-  <Touchable :activeOpacity="activeOpacity" @click="emit('click')">
-    <BackgroundBox v-bind="props">
+  <Touchable 
+    v-bind="props"
+    :innerStyle="style"
+    @click="emit('click')"
+  >
+    <BackgroundBox >
       <slot />
     </BackgroundBox>
   </Touchable>
 </template>
 
 <script setup lang="ts">
-import BackgroundBox, { type BackgroundBoxProps } from '../display/block/BackgroundBox.vue';
 import Touchable from '../feedback/Touchable.vue';
+import { useBackgroundBoxStyleMaker, type BackgroundBoxProps } from '../display/block/BackgroundBox';
+import { computed } from 'vue';
+import type { TouchableFlexProps } from '../feedback/Touchable';
 
-const props = withDefaults(defineProps<BackgroundBoxProps & {
-  activeOpacity?: number;
-}>(), {
+const props = withDefaults(defineProps<BackgroundBoxProps & TouchableFlexProps>(), {
   activeOpacity: 0.7,
 });
 
+const { makeStyle } = useBackgroundBoxStyleMaker(props);
+const style = computed(() => {
+  return {
+    ...props.innerStyle,
+    ...makeStyle(),
+  }
+});
+
 const emit = defineEmits(['click']);
 
 </script>

src/components/display/block/BackgroundBox.ts

@@ -0,0 +1,148 @@
+import { resolveSize, useTheme, type ViewStyle } from "@/components/theme/ThemeDefine";
+import { solveUrl } from "@/components/theme/ThemeTools";
+
+export interface BackgroundBoxProps {
+  /**
+   * 背景颜色（1）。
+   * 
+   * 格式：字符串格式或主题中定义的颜色预设。
+   */
+  color1?: string;
+  /**
+   * 背景颜色（2）。
+   * 
+   * 格式：字符串格式或主题中定义的颜色预设。
+   */
+  color2?: string;
+  /**
+   * 背景颜色（3）。
+   * 
+   * 格式：字符串格式或主题中定义的颜色预设。
+   */
+  color3?: string;
+  /**
+   * 背景颜色（2）位置。
+   * 
+   * 格式：50% 表示颜色（2）位置为50%，即颜色（2）在背景中间。
+   */
+  color2Position?: string;
+  /**
+   * 圆角。
+   */
+  radius?: string | number;
+  /**
+   * 背景渐变角度。
+   * 只有 color1 和 color2 都定义时有效。
+   *
+   * 格式：角度（0-360）。
+   */
+  gradientAngle?: number;
+  /**
+   * 背景图片。
+   */
+  backgroundImage?: string;
+  /**
+   * 背景填充方式。
+   *
+   * 格式：
+   * - fillW：横向填充，高度变化。
+   * - fillH：纵向填充，宽度变化。
+   * - none：不填充。
+   */
+  backgroundFillType?: 'none'|'fillH'|'fillW';
+  /**
+   * 背景填充大小。
+   */
+  backgroundSize?: string;
+  /**
+   * 背景填充位置。
+   */
+  backgroundPosition?: string;
+  /**
+   * 背景图片九宫格裁剪大小。
+   *
+   * 格式：
+   * - 数组：[ top, right, bottom, left ]
+   */
+  backgroundCutBorder?: Array<number|string> | string | number;
+  /**
+   * 背景图片九宫格渲染大小。
+   *
+   * 格式：
+   * - 数组：[ top, right, bottom, left ]
+   */
+  backgroundCutBorderSize?: Array<number|string> | string | number;
+}
+
+export function useBackgroundBoxStyleMaker(props: BackgroundBoxProps) {
+
+  const theme = useTheme();
+  
+  function makeStyle() {
+    const o : ViewStyle = {}
+    if (props.radius) {
+      o.borderRadius = theme.resolveThemeSize(props.radius);
+    }
+    if (props.color1 !== undefined && (props.color2 !== undefined || props.color3 !== undefined)) {
+      // 支持 color2Position, color3
+      if (props.color3 !== undefined) {
+        // 当有 color3 时，支持三色渐变
+        const colorStops = [
+          `${theme.resolveThemeColor(props.color1)} 0%`,
+          props.color2Position !== undefined
+            ? `${theme.resolveThemeColor(props.color2)} ${props.color2Position}`
+            : `${theme.resolveThemeColor(props.color2)} 50%`,
+          `${theme.resolveThemeColor(props.color3)} 100%`
+        ];
+        o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${colorStops.join(', ')})`;
+      } else {
+        // 仅 color1/color2 时，支持 color2Position
+        if (props.color2Position !== undefined) {
+          o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${theme.resolveThemeColor(props.color1)} 0%, ${theme.resolveThemeColor(props.color2)} ${props.color2Position})`;
+        } else {
+          o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${theme.resolveThemeColor(props.color1)}, ${theme.resolveThemeColor(props.color2)})`;
+        }
+      }
+  
+    } else if (props.backgroundImage) {
+      const b = props.backgroundCutBorder;
+      let s = props.backgroundCutBorderSize;
+      if (!s) {
+        if (Array.isArray(b)) {
+          s = b.map((i) => resolveSize(i) as any);
+        } else {
+          s = resolveSize(b) as any;
+        }
+      }
+      if (b) {
+        o.borderImageSource = solveUrl(props.backgroundImage);
+        o.borderImageSlice =  Array.isArray(b) ? `${b[0]} ${b[1]} ${b[2]} ${b[3]} fill` : `${b} fill`;
+        o.borderImageWidth = Array.isArray(s) ? `${theme.resolveSize(s[0])} ${theme.resolveSize(s[1])} ${theme.resolveSize(s[2])} ${theme.resolveSize(s[3])}` : `${theme.resolveSize(s)}`;
+        o.borderImageRepeat = 'stretch';
+      } else {
+        o.backgroundImage = solveUrl(props.backgroundImage);
+        o.backgroundPosition = props.backgroundPosition;
+        o.backgroundRepeat = "no-repeat";
+        switch (props.backgroundFillType) {
+          case 'fillW':
+            o.backgroundSize = `${props.backgroundSize} auto`;
+            break;
+          case 'fillH':
+            o.backgroundSize = `auto ${props.backgroundSize}`;
+            break;
+          case 'none':
+            o.backgroundSize = `${props.backgroundSize}`;
+            break;
+        }
+      }
+    } else if (props.color1) {
+      o.backgroundColor = theme.resolveThemeColor(props.color1);
+    } else if (props.color2) {
+      o.backgroundColor = theme.resolveThemeColor(props.color2);
+    }
+    return o;
+  }
+  return {
+    makeStyle,
+  }
+}

src/components/display/block/BackgroundBox.vue

@@ -38,82 +38,9 @@ export default {}
 
 <script setup lang="ts">
 import FlexView, { type FlexProps } from '@/components/layout/FlexView.vue';
-import { resolveSize, useTheme, type ViewStyle } from '@/components/theme/ThemeDefine';
-import { solveUrl } from '@/components/theme/ThemeTools';
-import { computed, type PropType } from 'vue';
-
-export interface BackgroundBoxProps extends FlexProps {
-  /**
-   * 背景颜色（1）。
-   * 
-   * 格式：字符串格式或主题中定义的颜色预设。
-   */
-  color1?: string;
-  /**
-   * 背景颜色（2）。
-   * 
-   * 格式：字符串格式或主题中定义的颜色预设。
-   */
-  color2?: string;
-  /**
-   * 背景颜色（3）。
-   * 
-   * 格式：字符串格式或主题中定义的颜色预设。
-   */
-  color3?: string;
-  /**
-   * 背景颜色（2）位置。
-   * 
-   * 格式：50% 表示颜色（2）位置为50%，即颜色（2）在背景中间。
-   */
-  color2Position?: string;
-  /**
-   * 圆角。
-   */
-  radius?: string | number;
-  /**
-   * 背景渐变角度。
-   * 只有 color1 和 color2 都定义时有效。
-   *
-   * 格式：角度（0-360）。
-   */
-  gradientAngle?: number;
-  /**
-   * 背景图片。
-   */
-  backgroundImage?: string;
-  /**
-   * 背景填充方式。
-   *
-   * 格式：
-   * - fillW：横向填充，高度变化。
-   * - fillH：纵向填充，宽度变化。
-   * - none：不填充。
-   */
-  backgroundFillType?: 'none'|'fillH'|'fillW';
-  /**
-   * 背景填充大小。
-   */
-  backgroundSize?: string;
-  /**
-   * 背景填充位置。
-   */
-  backgroundPosition?: string;
-  /**
-   * 背景图片九宫格裁剪大小。
-   *
-   * 格式：
-   * - 数组：[ top, right, bottom, left ]
-   */
-  backgroundCutBorder?: Array<number|string> | string | number;
-  /**
-   * 背景图片九宫格渲染大小。
-   *
-   * 格式：
-   * - 数组：[ top, right, bottom, left ]
-   */
-  backgroundCutBorderSize?: Array<number|string> | string | number;
-}
+import { type ViewStyle } from '@/components/theme/ThemeDefine';
+import { computed } from 'vue';
+import { useBackgroundBoxStyleMaker } from './BackgroundBox';
 
 defineOptions({
   options: {
@@ -125,7 +52,7 @@ defineOptions({
 /**
  * 内容积木组件：背景盒子，
  */
-const props = withDefaults(defineProps<BackgroundBoxProps>(), {
+const props = withDefaults(defineProps<import('./BackgroundBox').BackgroundBoxProps & FlexProps>(), {
   color1: undefined,
   color2: undefined,
   radius: undefined,
@@ -138,71 +65,12 @@ const props = withDefaults(defineProps<BackgroundBoxProps>(), {
   backgroundCutBorderSize: () => ([ 'auto' ]),
 });
 
-const theme = useTheme();
+const { makeStyle } = useBackgroundBoxStyleMaker(props);
 
 const style = computed(() => {
   const o : ViewStyle = {
     ...props.innerStyle,
-  }
-  if (props.radius) {
-    o.borderRadius = theme.resolveThemeSize(props.radius);
-  }
-  if (props.color1 !== undefined && (props.color2 !== undefined || props.color3 !== undefined)) {
-    // 支持 color2Position, color3
-    if (props.color3 !== undefined) {
-      // 当有 color3 时，支持三色渐变
-      const colorStops = [
-        `${theme.resolveThemeColor(props.color1)} 0%`,
-        props.color2Position !== undefined
-          ? `${theme.resolveThemeColor(props.color2)} ${props.color2Position}`
-          : `${theme.resolveThemeColor(props.color2)} 50%`,
-        `${theme.resolveThemeColor(props.color3)} 100%`
-      ];
-      o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${colorStops.join(', ')})`;
-    } else {
-      // 仅 color1/color2 时，支持 color2Position
-      if (props.color2Position !== undefined) {
-        o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${theme.resolveThemeColor(props.color1)} 0%, ${theme.resolveThemeColor(props.color2)} ${props.color2Position})`;
-      } else {
-        o.background = `linear-gradient(${props.gradientAngle || 180}deg, ${theme.resolveThemeColor(props.color1)}, ${theme.resolveThemeColor(props.color2)})`;
-      }
-    }
-
-  } else if (props.backgroundImage) {
-    const b = props.backgroundCutBorder;
-    let s = props.backgroundCutBorderSize;
-    if (!s) {
-      if (Array.isArray(b)) {
-        s = b.map((i) => resolveSize(i) as any);
-      } else {
-        s = resolveSize(b) as any;
-      }
-    }
-    if (b) {
-      o.borderImageSource = solveUrl(props.backgroundImage);
-      o.borderImageSlice =  Array.isArray(b) ? `${b[0]} ${b[1]} ${b[2]} ${b[3]} fill` : `${b} fill`;
-      o.borderImageWidth = Array.isArray(s) ? `${theme.resolveSize(s[0])} ${theme.resolveSize(s[1])} ${theme.resolveSize(s[2])} ${theme.resolveSize(s[3])}` : `${theme.resolveSize(s)}`;
-      o.borderImageRepeat = 'stretch';
-    } else {
-      o.backgroundImage = solveUrl(props.backgroundImage);
-      o.backgroundPosition = props.backgroundPosition;
-      o.backgroundRepeat = "no-repeat";
-      switch (props.backgroundFillType) {
-        case 'fillW':
-          o.backgroundSize = `${props.backgroundSize} auto`;
-          break;
-        case 'fillH':
-          o.backgroundSize = `auto ${props.backgroundSize}`;
-          break;
-        case 'none':
-          o.backgroundSize = `${props.backgroundSize}`;
-          break;
-      }
-    }
-  } else if (props.color1) {
-    o.backgroundColor = theme.resolveThemeColor(props.color1);
-  } else if (props.color2) {
-    o.backgroundColor = theme.resolveThemeColor(props.color2);
+    ...makeStyle(),
   }
   return o;
 })

src/components/feedback/Touchable.vue

@@ -46,7 +46,7 @@ const finalStyle = computed(() => {
       obj.backgroundColor = themeContext.resolveThemeColor(props.pressedColor);
   } else if (props.activeOpacity != undefined) 
     obj.opacity = isPressed.value ? props.activeOpacity : 1;
-  if (props.disabledOpacity != undefined && !props.touchable)
+  if (props.disabledOpacity != undefined && props.touchable === false)
     obj.opacity = props.disabledOpacity;
   const o : Record<string, any> = {
     ...commonStyle.value,

src/components/form/Field.vue

@@ -11,6 +11,7 @@
       ...(error || finalErrorMessage ? errorFieldStyle : {})
     }"
     :setCursor="false"
+    :disabledOpacity="1"
     :direction="labelPosition === 'top' ? 'column' : 'row'"
     :justify="labelPosition === 'top' ? 'flex-start' : 'center'"
     @click="onClick"

src/pages.json

@@ -56,6 +56,7 @@
       "path": "pages/home/light/submit",
       "style": {
         "navigationBarTitleText": "点亮村社",
+        "navigationStyle": "custom",
         "enablePullDownRefresh": false
       }
     },
@@ -63,6 +64,7 @@
       "path": "pages/home/light/submit-map",
       "style": {
         "navigationBarTitleText": "选择点亮村社",
+        "navigationStyle": "custom",
         "enablePullDownRefresh": false
       }
     },

src/pages/home/components/LightMap.vue

@@ -22,37 +22,35 @@
       gap="gap.xl" 
       position="absolute" 
       inset="0" 
-      padding="space.xl"
       center 
-      backgroundColor="mask.default"
     > 
-      <Text fontConfig="importantTitle" textAlign="center">您选择的地区还未开通亮乡源数据，可联系客服开通</Text>
-      <button open-type="contact" class="remove-button-style">
-        <FlexCol padding="space.md" radius="radius.lg" center backgroundColor="white">
-          <Text fontConfig="primaryTitle">联系客服</Text>
-        </FlexCol>
-      </button>
+      <FlexCol center gap="gap.md" padding="padding.md" backgroundColor="white" radius="radius.md">
+        <Text fontConfig="importantTitle" textAlign="center">您选择的地区还未开通亮乡源数据，可联系客服开通</Text>
+        <button open-type="contact" class="remove-button-style">
+          <FlexCol padding="space.md" radius="radius.lg" center backgroundColor="white">
+            <Text fontConfig="primaryTitle">联系客服</Text>
+          </FlexCol>
+        </button>
+      </FlexCol>
     </FlexCol>
     <FlexCol v-if="mapLoader.error.value" 
       gap="gap.md" 
       position="absolute" 
-      inset="0" 
-      padding="space.xl"
+      inset="0"
       center 
-      backgroundColor="mask.default"
     > 
-      <Icon name="warning" size="44" color="red" />
-      <Text textAlign="center" :text="mapLoader.error.value" />
+      <FlexCol center gap="gap.md" padding="padding.md" backgroundColor="white" radius="radius.md">
+        <Icon name="warning" size="44" color="red" />
+        <Text textAlign="center" :text="mapLoader.error.value" />
+      </FlexCol>
     </FlexCol>
     <FlexCol v-else-if="mapLoader.status.value === 'loading'" 
       gap="gap.md" 
       position="absolute" 
       inset="0" 
-      padding="space.xl"
-      center 
-      backgroundColor="mask.default"
+      center
     > 
-      <ActivityIndicator :size="44" />
+      <ActivityIndicator :size="64" />
     </FlexCol>
 
     <SimpleDropDownPicker 
@@ -97,7 +95,6 @@ import { navTo } from '@/components/utils/PageAction';
 import { waitTimeOut } from '@imengyu/imengyu-utils';
 import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
 import LightVillageApi, { VillageListItem } from '@/api/light/LightVillageApi';
-import type { MapMarker } from '@/types/Map';
 import AppCofig, { isDev } from '@/common/config/AppCofig';
 import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
 import NButton from '@/components/basic/Button.vue';
@@ -106,6 +103,7 @@ import Text from '@/components/basic/Text.vue';
 import CommonContent from '@/api/CommonContent';
 import Icon from '@/components/basic/Icon.vue';
 import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
+import type { MapMarker } from '@/types/Map';
 
 const instance = getCurrentInstance();
 const mapCtx = uni.createMapContext('prevMap', instance);
@@ -248,8 +246,11 @@ function onSelectedRegion(regionId: number) {
   emit('regionChanged', regionId);
 }
 function setCurrentRegion(regionName: string) {
-  selectedRegion.value = regionLoader.content.value?.find(p => p.name == regionName)?.id || 
-    regionLoader.content.value?.[0]?.id || undefined;
+  const region = regionLoader.content.value?.find(p => p.name == regionName)?.id || 
+  regionLoader.content.value?.[0]?.id || undefined;
+  if (region === selectedRegion.value)
+    return;
+  selectedRegion.value = region;
   emit('regionChanged', selectedRegion.value);
   mapLoader.reload();
 }
@@ -257,7 +258,6 @@ function setCurrentRegion(regionName: string) {
 watch(() => props.city, async (newVal) => {
   await regionLoader.reload();
   setCurrentRegion(newVal || '');
-  await mapLoader.reload();
 }, { immediate: true });
 
 onMounted(async () => {
@@ -293,7 +293,6 @@ onMounted(async () => {
       clear: false,
     });
   });
-  await regionLoader.reload();
 });
 </script>
 

src/pages/home/light/form/claim.ts

@@ -120,9 +120,6 @@ export function getClaimVillageForm(options: {
     ],
     formAdditionaProps: {
       labelPosition: 'top',
-      innerStyle: {
-        radius: '10rpx',
-      },
     } as Omit<FormProps, 'model'>,
   };
 }

src/pages/home/light/submit-map.vue

@@ -3,6 +3,13 @@ import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
 import { useGetCurrentLocation } from '../composeabe/GetCurrentLocation';
 import AppCofig from '@/common/config/AppCofig';
 import LightMap from '../components/LightMap.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
+import NavBar from '@/components/nav/NavBar.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import Text from '@/components/basic/Text.vue';
+import Image from '@/components/basic/Image.vue';
 
 const { querys } = useLoadQuerys({
   latitude: AppCofig.defaultLonLat[1],
@@ -19,6 +26,25 @@ const currentLocation = useGetCurrentLocation({
 </script>
 
 <template>
+  <FlexCol position="absolute" :top="0" :left="0" :right="0" :zIndex="1000">
+    <StatusBarSpace />
+    <NavBar leftButton="back" />
+    <FlexRow center>
+      <BackgroundBox 
+        backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
+        :backgroundCutBorder="32"
+        :backgroundCutBorderSize="36"
+        :padding="24"
+        :innerStyle="{
+          width: '500rpx',
+        }"
+        center
+      > 
+        <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="220" mode="widthFix" />
+        <Text text="请选择您要点亮的村社" fontConfig="primaryTitle" />
+      </BackgroundBox>
+    </FlexRow>
+  </FlexCol>
   <LightMap 
     full
     :city="querys.city"

src/pages/home/light/submit.vue

@@ -1,68 +1,86 @@
 <template>
-  <CommonRoot>
-    <FlexCol :gap="20" :padding="30">
-      <!--注册-->
-      <FlexCol v-if="step === 'register'">
-        <DynamicForm
-          ref="registerFormRef"
-          :model="registerFormModel"
-          :options="registerFormDefine"
+  <CommonTopBanner title="点亮村社">
+    <ProvideVar :vars="{
+      FieldBackgroundColor: 'transparent',
+    }">
+      <FlexCol :gap="20" :padding="30">
+        <!--注册-->
+        <FlexCol v-if="step === 'register'">
+          <BackgroundBox
+            backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
+            :backgroundCutBorder="32"
+            :backgroundCutBorderSize="36"
+            :padding="10"
+          >
+            <DynamicForm
+              ref="registerFormRef"
+              :model="registerFormModel"
+              :options="registerFormDefine"
+            />
+          </BackgroundBox>
+          <Height :height="20" />
+          <PrimaryButton text="提交" @click="registerSubmit" :loading="registerFormLoading" />
+        </FlexCol>
+        <!--认领-->
+        <FlexCol v-else-if="step === 'add'">
+          <Alert 
+            type="info"
+            message="您已经是志愿者，请完善以下信息认领当前村社"
+          />
+          <BackgroundBox
+            backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
+            :backgroundCutBorder="32"
+            :backgroundCutBorderSize="36"
+            :padding="10"
+          >
+            <DynamicForm
+              ref="addFormRef"
+              :model="addFormModel"
+              :options="addFormDefine"
+            />
+          </BackgroundBox>
+          <Height :height="20" />
+          <PrimaryButton block text="提交" @click="addSubmit" :loading="addFormLoading" />
+        </FlexCol>
+        <!--注册完成-->
+        <Result 
+          v-else-if="step === 'finished'" 
+          status="success"
+          :title="finishedMode === 'claim' ? '认领申请已提交' : '注册志愿者成功'"
+          :description="finishedMode === 'claim'
+            ? '请等待管理员审核认领申请，审核通过后即可采编该村社文化资源'
+            : '请等待管理员审核，在此期间，可以在社区中先逛逛，学习如何采编村社文化资源信息吧'"
+        >
+          <Height :size="20" />
+          <PrimaryButton block text="进入首页" @click="back()" />
+        </Result>
+        <!--错误-->
+        <Result 
+          v-else-if="step === 'error'" 
+          status="error"
+          title="分享链接参数有误"
+          description="请联系管理员，或稍后重试"
         />
-        <Height :height="20" />
-        <Button block type="primary" @click="registerSubmit" :loading="registerFormLoading">提交</Button>
-      </FlexCol>
-      <!--认领-->
-      <FlexCol v-else-if="step === 'add'">
-        <Alert 
-          type="info"
-          message="您已经是志愿者，请填写以下信息，认领当前村社"
-        />
-        <DynamicForm
-          ref="addFormRef"
-          :model="addFormModel"
-          :options="addFormDefine"
-        />
-        <Height :height="20" />
-        <Button block type="primary" @click="addSubmit" :loading="addFormLoading">提交</Button>
-      </FlexCol>
-      <!--注册完成-->
-      <Result 
-        v-else-if="step === 'finished'" 
-        status="success"
-        :title="finishedMode === 'claim' ? '认领申请已提交' : '注册志愿者成功'"
-        :description="finishedMode === 'claim'
-          ? '请等待管理员审核认领申请，审核通过后即可采编该村社文化资源'
-          : '请等待管理员审核，在此期间，可以在社区中先逛逛，学习如何采编村社文化资源信息吧'"
-      >
-        <Height :size="20" />
-        <Button type="primary" @click="back()">进入首页</Button>
-      </Result>
-      <!--错误-->
-      <Result 
-        v-else-if="step === 'error'" 
-        status="error"
-        title="分享链接参数有误"
-        description="请联系管理员，或稍后重试"
-      />
-      <!--登录-->
-      <FlexCol v-else center :height="400">
-        
-        <Icon icon="smile-filling" color="primary" :size="156" />
-        <Height :height="20" />
-        <Text :fontSize="26" color="primary" text="欢迎注册，加入志愿者队伍，点亮村社" />
-        <Height :size="40" />
-
-        <!-- #ifdef MP-WEIXIN -->
-        <Button type="primary" block text="微信登录" @click="loginWechat" />
-        <Height :size="20" />
-        <!-- #endif -->
-        <!-- #ifndef MP-WEIXIN -->
-        <Result status="warning" title="提示" desc="当前环境不支持微信登录" />
-        <!-- #endif -->
+        <!--登录-->
+        <FlexCol v-else center :height="400">
+          
+          <Icon icon="smile-filling" color="primary" :size="156" />
+          <Height :height="20" />
+          <Text :fontSize="26" color="primary" text="欢迎注册，加入志愿者队伍，点亮村社" />
+          <Height :size="40" />
+
+          <!-- #ifdef MP-WEIXIN -->
+          <PrimaryButton block text="微信登录" @click="loginWechat" />
+          <Height :size="20" />
+          <!-- #endif -->
+          <!-- #ifndef MP-WEIXIN -->
+          <Result status="warning" title="提示" desc="当前环境不支持微信登录" />
+          <!-- #endif -->
 
+        </FlexCol>
       </FlexCol>
-    </FlexCol>
-  </CommonRoot>
+    </ProvideVar>
+  </CommonTopBanner>
 </template>
 
 <script setup lang="ts">
@@ -89,6 +107,10 @@ import CommonRoot from '@/components/dialog/CommonRoot.vue';
 import DynamicForm from '@/components/dynamic/DynamicForm.vue';
 import Alert from '@/components/feedback/Alert.vue';
 import VillageApi, { VillageClaimInfo, VolunteerInfo } from '@/api/inhert/VillageApi';
+import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import PrimaryButton from '@/common/components/PrimaryButton.vue';
+import ProvideVar from '@/components/theme/ProvideVar.vue';
 
 /**
  * 点亮村社页面