's''

2026-01-29 10:15:29 -06:00
parent bb62328048
commit b6dd66574d
5 changed files with 521 additions and 181 deletions
--- a/config/index.js
+++ b/config/index.js
@@ -96,7 +96,9 @@ const config = {
        // '/pages/detail/index': ['/detail'], // 可以通过数组为页面配置多个自定义路由
        "pages/my/index": "/my",
        "pages/meetup/index": "/meetup",
+        "pages/salon/index": "/salon",
        "pages/meetup/Detail/index": "/detail",
+        
      },
    },
    // defineConstants: {
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -306,7 +306,15 @@ const Index = () => {
                type="primary"
                size="small"
                onClick={() => {
-                  setqrOpen(true);
+                  // setqrOpen(true);
+                  // 在手机/微信
+                  Taro.navigateTo({
+                    url: "/pages/salon/index",
+                    // url: "/pages/meetup/index",
+                    // url: "pages/meetup/Detail/index",
+                    // url: "/pages/my/index",
+
+                  });
                }}
              >{`加入社群💬`}</AtButton>
            </View>
@@ -333,7 +341,12 @@ const Index = () => {
              type="primary"
              size="small"
              onClick={() => {
-                setqrOpen(true);
+                // 如果在PC浏览器
+                // setqrOpen(true);
+                // 在手机/微信
+                Taro.navigateTo({
+                  url: "/pages/salon/index",
+                });
              }}
            >{`加入社群💬`}</AtButton>
          </View>
@@ -410,7 +423,7 @@ const Index = () => {
        {/* <AtModalHeader>标题</AtModalHeader> */}
        <AtModalContent>
          <View className="qrcode">
-          {/* ,加入💬微信群 */}
+            {/* ,加入💬微信群 */}
            <View>扫码关注公众号</View>
            <Image
              style="width: 200px;height: 200px;"
--- a/src/pages/meetup/Detail/index.jsx
+++ b/src/pages/meetup/Detail/index.jsx
@@ -27,7 +27,7 @@ const Detail = () => {
    if (newId) {
      setid(newId);
    }
-    let newjoinMeetup=window.localStorage.getItem('joinMeetup')
+    let newjoinMeetup = window.localStorage.getItem('joinMeetup')
    setjoinMeetup(newjoinMeetup)
  }, []);

@@ -71,13 +71,13 @@ const Detail = () => {
  const joinmeet = () => {
    // console.log("111");
    Taro.request({
-      method:'POST',
+      method: 'POST',
      url: "/api/payh5", //仅为示例，并非真实的接口地址
      // url: "https://pay.hackrobot.cn/api/payh5", //仅为示例，并非真实的接口地址

      data: {
-        callback_url:window.location.href,
-        openid:window.localStorage.getItem('openid')
+        callback_url: window.location.href,
+        openid: window.localStorage.getItem('openid')
      },
      header: {
        "content-type": "application/json", // 默认值
@@ -95,12 +95,12 @@ const Detail = () => {
            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
            // signType: "MD5",
            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
-            ...res?.data?.jsapi??{},
+            ...res?.data?.jsapi ?? {},
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              setjoinMeetup(true)
-              window.localStorage.setItem('joinMeetup',true)
+              window.localStorage.setItem('joinMeetup', true)
              WeixinJSBridge.call("closeWindow");
            }
          }
@@ -121,7 +121,7 @@ const Detail = () => {
        />
      </View>
      <AtList>
-        <AtListItem title="[副业交流] 沙龙茶话会" onClick={() => {}} />
+        <AtListItem title="[副业交流] 沙龙茶话会" onClick={() => { }} />
        <AtListItem title="日期" extraText="2023/12/06" arrow="" />
        <AtListItem title="报名人数" extraText="4/10" arrow="" />
        <AtListItem
@@ -132,21 +132,7 @@ const Detail = () => {
        {/* <AtListItem title='禁用状态' disabled extraText='详细信息' /> */}
      </AtList>

-      {/* <AtList>
-        <AtListItem
-          title="联系我们"
-          note=""
-          arrow="right"
-          iconInfo={{ size: 25, color: "#78A4FA", value: "calendar" }}
-        />
-        <AtListItem
-          title="版本日志"
-          note=""
-          extraText=""
-          arrow="right"
-          iconInfo={{ size: 25, color: "#FF4949", value: "bookmark" }}
-        />
-      </AtList> */}
+

      <View>
        <AtButton
@@ -155,21 +141,11 @@ const Detail = () => {
          onClick={() => joinmeet()}
          disabled={joinMeetup}
        >
-          {!!joinMeetup?'已报名':'立即报名'}
+          {!!joinMeetup ? '已报名' : '立即报名'}
        </AtButton>
      </View>

-      {/* <View className="indexTablebar">
-        <AtTabBar
-          tabList={[
-            { title: "首页", text: "" },
-            { title: "活动" },
-            { title: "我的" },
-          ]}
-          onClick={(value) => handleClick(value)}
-          current={current}
-        />
-      </View> */}
+
    </View>
  );
 };
--- a/src/pages/salon/backup
+++ b/src/pages/salon/backup
@@ -0,0 +1,108 @@
+  <View className="at-article">
+        <View className="at-article__h1">技术交流群</View>
+        <View className="at-article__info">
+          {/* 2017-05-07&nbsp;&nbsp;&nbsp; */}
+          异度星球
+        </View>
+        <View className="at-article__content">
+          <View className="at-article__section">
+            <View className="at-article__h2">群简介</View>
+            <View className="at-article__h3">| 📣技术爱好者</View>
+            <View className="at-article__p">
+              社群是一个交流技术的平台,不限软件/硬件
+            </View>
+            <br />
+            <View className="at-article__h3">| 📋入群须知</View>
+            <View className="at-article__p">
+              社群只是一个沟通平台,与其他伙伴搭桥
+              <br />
+              可以讨论但不限于:
+              <br />
+              1️⃣云手机
+              <br />
+              2️⃣机器人
+              <br />
+              3️⃣AIGC /边缘计算
+            </View>
+            <br />
+            <View className="at-article__h3">| ❌禁止以下行为</View>
+            <View className="at-article__p">
+              🚫营销推广
+              <br />
+              🚫恶意捣乱
+              <br />
+              <br />
+              ❗群主没有解答义务,勿随意@
+              {/* <br />
+              💰价格29元/人 (场地成本) */}
+            </View>
+            <br />
+            {meetup == 1 ? (
+              <View className="at-article__h3">| ☕入群口令:3399</View>
+            ) : null}
+            {meetup == 1 ? (
+              <View className="at-article__p">
+                {`ID:${window.localStorage.getItem("openid")}`}
+              </View>
+            ) : null}
+            {/* 已报名 */}
+            {meetup == 1 ? (
+              <View className="model-emoji">
+                <Image
+                  style="width: 240px;height: 240px;background: #fff;"
+                  // src={qrcode}
+                  src={joinGroup}
+                />
+              </View>
+            ) : null}
+          </View>
+        </View>
+      </View>
+
+
+            {/* 立即加入按钮 */}
+      <View className="bottomDiv"></View>
+      {/* 判断有没有wxid,是否女性 */}
+      <AtButton
+        type="primary"
+        size="normal"
+        className="joinSalon"
+        onClick={() => {
+          if (meetup == 1) {
+            return false;
+          } else {
+            if (!!isWeChat) {
+              payh5("meetup", 2900);
+            } else {
+              setmeetupQR(true);
+            }
+          }
+        }}
+      >
+        {meetup == 1 ? "入群口令: 3399" : `立即加入`}
+      </AtButton>
+
+
+            <View className="meetupQR">
+        {/* 软件下载模态窗 */}
+        <AtModal isOpened={meetupQR}>
+          <AtModalHeader>咨询沙龙</AtModalHeader>
+          <AtModalContent>
+            <View className="model-emoji">
+              <Image
+                // style="width: 100%;height: 240px;background: #fff;"
+                src={qrcode}
+              />
+            </View>
+          </AtModalContent>
+          <AtModalAction>
+            <Button
+              onClick={() => {
+                setmeetupQR(false);
+              }}
+            >
+              知道了
+            </Button>
+          </AtModalAction>
+        </AtModal>
+      </View>
--- a/src/pages/salon/index.tsx
+++ b/src/pages/salon/index.tsx
@@ -1,17 +1,23 @@
 // @ts-nocheck
 import { Component } from "react";
-import { View, Text, Image, Button } from "@tarojs/components";
+import { View, Text, Image, Button, Picker } from "@tarojs/components";
 import "./index.scss";
-import { AtButton, AtInput, AtTabBar } from "taro-ui";
+import {
+  AtButton,
+  AtInput,
+  AtTabBar,
+  AtForm,
+  AtMessage,
+  AtList,
+  AtListItem,
+  AtTag,
+  AtTextarea,
+} from "taro-ui";
 import React, { useCallback, useEffect, useState } from "react";
 import { AtGrid } from "taro-ui";
 import { Swiper, SwiperItem } from "@tarojs/components";
 import { AtCard } from "taro-ui";
-import { AtImagePicker } from "taro-ui";
 import Taro from "@tarojs/taro";
-import { AtTag } from "taro-ui";
-import { AtList, AtListItem } from "taro-ui";
-import { AtForm, AtMessage } from "taro-ui";
 import loft from "../../images/loft.png";
 import nomadvloglife from "../../images/nomadvloglife.png";

@@ -27,24 +33,33 @@ import {
 import qrcode from "../../images/qrcode.png";
 import joinGroup from "../../images/joinGroup.png";

-// export default class Index extends Component {
+const PB_URL = 'https://pocketbase.hackrobot.cn';
+const COLLECTION = 'solan'; // 你建立的表名
+const PAY_API_URL = 'https://api.hackrobot.cn/payh5'; // 你的支付接口地址（根据实际调整）
+
 const Salon = () => {
  const [meetupQR, setmeetupQR] = useState(false);
  const [isWeChat, setisWeChat] = useState(false);
-  const [meetup, setmeetup] = useState(window.localStorage.getItem("meetup"));

  useEffect(() => {
    isWeChatFun();
+    checkIfJoined();
+    checkPendingAndPaid();
  }, []);

+  // 检查是否已加入（本地标记）
+  const checkIfJoined = () => {
+    if (Taro.getStorageSync('salonJoined')) {
+      setmeetupQR(true);
+    }
+  };
+
  const handleClick = (value) => {
-    // 跳转到目的页面，在当前页面打开
    Taro.navigateTo({
      url: "/pages/index/index",
    });
  };

-  // 是否在微信客户端
  const isWeChatFun = () => {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("micromessenger") != -1) {
@@ -56,162 +71,388 @@ const Salon = () => {
    }
  };

-  const payh5 = (type, total_fee = 1000) => {
-    // console.log("111");
-    Taro.request({
-      method: "POST",
-      url: "/api/payh5", //仅为示例，并非真实的接口地址
-      // url: "https://pay.hackrobot.cn/api/payh5", //仅为示例，并非真实的接口地址
+  // 生成或获取 userId（无下划线，干净格式）
+  const getOrCreateUserId = () => {
+    let userId = Taro.getStorageSync('userId');
+    if (!userId) {
+      userId = `user${Date.now()}`;
+      Taro.setStorageSync('userId', userId);
+    }
+    return userId;
+  };

+  // 检查是否已支付（查询 payments 表）
+  const checkIfPaid = async (userId) => {
+    return new Promise((resolve) => {
+      Taro.request({
+        url: `${PB_URL}/api/collections/payments/records`,
+        method: 'GET',
+        data: {
+          filter: `(user_id="${userId}" && type="meetup")`,
+          sort: '-created',
+          perPage: 1,
+        },
+        success: (res) => {
+          resolve(res.data?.items?.length > 0);
+        },
+        fail: () => resolve(false),
+      });
+    });
+  };
+
+  // 支付函数（XorPay H5）
+  const payh5 = (type, total_fee = 9900) => { // 99元
+    const userId = getOrCreateUserId();
+    Taro.request({
+      url: PAY_API_URL,
+      method: 'POST',
      data: {
-        callback_url: window.location.href,
-        openid: window.localStorage.getItem("openid"),
-        total_fee: total_fee, // 金额,单位:分
-        type: type, //订单类型 book/meetup/video/vip
+        total_fee,
+        type,
+        user_id: userId,
+        // return_url: window.location.href, // 如果后端支持，取消注释并在后端加上, 支付成功自动返回
      },
      header: {
-        "content-type": "application/json", // 默认值
+        'content-type': 'application/json',
      },
-      success: function (res) {
-        console.log(res.data);
-        // window.alert(res.data.jsapi);
-        WeixinJSBridge.invoke(
-          "getBrandWCPayRequest",
-          {
-            // 以下6个支付参数通过payjs的jsapi接口获取
-            // appId: "wxc5205a653b0259bf",
-            // timeStamp: "1701401644",
-            // nonceStr: "KhOYB0wFV6j9qyQK",
-            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
-            // signType: "MD5",
-            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
-            ...(res?.data?.jsapi ?? {}),
-          },
-          function (res) {
-            // 支付成功
-            if (res.err_msg == "get_brand_wcpay_request:ok") {
-              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
-              WeixinJSBridge.call("closeWindow");
-            }
+      success: (res) => {
+        if (res.data?.status === 'ok' && res.data?.xorpay_params) {
+          const params = res.data.xorpay_params;
+          const form = document.createElement('form');
+          form.method = 'POST';
+          form.action = res.data.xorpay_url;
+          form.style.display = 'none';
+
+          for (const key in params) {
+            const input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = key;
+            input.value = params[key];
+            form.appendChild(input);
          }
-        );
+
+          // 如果你希望支付成功自动返回，取消注释以下（需后端支持 return_url）
+          // const returnInput = document.createElement('input');
+          // returnInput.type = 'hidden';
+          // returnInput.name = 'return_url';
+          // returnInput.value = window.location.href;
+          // form.appendChild(returnInput);
+
+          document.body.appendChild(form);
+          form.submit();
+        } else {
+          Taro.showToast({ title: '支付发起失败', icon: 'none' });
+        }
+      },
+      fail: () => {
+        Taro.showToast({ title: '网络错误', icon: 'none' });
      },
    });
  };

+  // 表单状态统一管理
+  const [form, setForm] = useState({
+    nickname: '',
+    occupation: '',
+    reason: '',
+    wechatId: '',
+    gender: '',
+    education: '',
+    gradYear: '',
+    phone: '',
+  });
+
+  // 性别下拉选项（保持原样，实现隐形限制）
+  const genderOptions = ['男', '女'];
+  const [genderIndex, setGenderIndex] = useState(null);
+
+  // 学历下拉选项（保持原样）
+  const educationOptions = ['高中及以下', '大专', '本科', '硕士'];
+  const [educationIndex, setEducationIndex] = useState(null);
+
+  // 毕业年份下拉选项
+  const currentYear = new Date().getFullYear();
+  const yearOptions = [];
+  for (let i = 0; i <= 60; i++) {
+    yearOptions.push((currentYear - i).toString());
+  }
+  const [gradYearIndex, setGradYearIndex] = useState(0);
+
+  // 通用字段更新函数
+  const updateField = (field) => (value) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  };
+
+  // 性别选择变更（保持原逻辑，实现隐形性别限制）
+  const handleGenderChange = (e) => {
+    const idx = e.detail.value;
+    setGenderIndex(idx);
+    updateField('gender')(idx === 0 ? '' : genderOptions[idx]);
+  };
+
+  // 学历选择变更
+  const handleEducationChange = (e) => {
+    const idx = e.detail.value;
+    setEducationIndex(idx);
+    updateField('education')(idx === 0 ? '' : educationOptions[idx]);
+  };
+
+  // 毕业年份选择变更
+  const handleGradYearChange = (e) => {
+
+    const idx = e.detail.value;
+    setGradYearIndex(idx);
+    updateField('gradYear')(idx === 0 ? '' : yearOptions[idx]);
+  };
+
+  // 提交申请到 PocketBase
+  const submitApplication = (submitData) => {
+    const uploadUrl = `${PB_URL}/api/collections/${COLLECTION}/records`;
+
+    Taro.request({
+      url: uploadUrl,
+      method: 'POST',
+      header: { 'Content-Type': 'application/json' },
+      data: {
+        nickname: submitData.nickname,
+        occupation: submitData.occupation,
+        reason: submitData.reason,
+        wechatId: submitData.wechatId,
+        gender: submitData.gender,
+        education: submitData.education,
+        gradYear: submitData.gradYear,
+        phone: submitData.phone,
+        calculated_age: submitData.calculatedAge,
+        user_id: submitData.userId || getOrCreateUserId(),
+      },
+      success: (res) => {
+        if (res.statusCode === 200 || res.statusCode === 201) {
+          Taro.showToast({ title: '申请提交成功，欢迎加入！', icon: 'success' });
+          Taro.setStorageSync('salonJoined', true);
+          setmeetupQR(true);
+          localStorage.removeItem('pendingSalonApplication');
+        } else {
+          Taro.showToast({ title: '提交失败', icon: 'none' });
+        }
+      },
+      fail: () => {
+        Taro.showToast({ title: '提交失败，请检查网络', icon: 'none' });
+      },
+    });
+  };
+
+  // 检查本地是否有 pending 申请且已支付 → 自动提交
+  const checkPendingAndPaid = async () => {
+    const pending = localStorage.getItem('pendingSalonApplication');
+    if (!pending) return;
+
+    const pendingData = JSON.parse(pending);
+    const userId = getOrCreateUserId();
+
+    if (pendingData.userId !== userId) return;
+
+    const paid = await checkIfPaid(userId);
+    if (paid) {
+      submitApplication({
+        ...pendingData.form,
+        calculatedAge: pendingData.calculatedAge,
+        userId,
+      });
+    }
+  };
+
+  const handleSubmit = async () => {
+    // 原有必填校验（包含性别隐形限制）
+    if (
+      !form.nickname ||
+      !form.occupation ||
+      !form.reason ||
+      !form.wechatId ||
+      !form.gender
+    ) {
+      Taro.atMessage({
+        message: '请填写所有必填项',
+        type: 'warning',
+      });
+      return;
+    }
+
+    // 隐形校验学历和毕业年份（必须有效）
+    if (
+      !form.education ||
+      !form.gradYear ||
+      form.gradYear === '请选择毕业年份'
+    ) {
+      Taro.atMessage({
+        message: '请填写所有必填项',
+        type: 'warning',
+      });
+      return;
+    }
+
+    // 计算估算年龄
+    const gradAgeMap = {
+      '高中及以下': 18,
+      '大专': 21,
+      '本科': 22,
+      '硕士': 25,
+    };
+    const baseAge = gradAgeMap[form.education] || 22;
+    const gradYearNum = parseInt(form.gradYear, 10);
+    
+    if (isNaN(gradYearNum)) {
+      Taro.atMessage({
+        message: '请填写所有必填项',
+        type: 'warning',
+      });
+      return;
+    }
+
+    const calculatedAge = currentYear - gradYearNum + baseAge;
+
+    const userId = getOrCreateUserId();
+
+    // 保存 pending 申请（用于支付后自动提交）
+    localStorage.setItem('pendingSalonApplication', JSON.stringify({
+      form,
+      calculatedAge,
+      userId,
+    }));
+
+    // 检查是否已支付
+    const paid = await checkIfPaid(userId);
+    if (paid) {
+      // 已支付，直接提交
+      submitApplication({ ...form, calculatedAge, userId });
+    } else {
+      // 未支付，发起支付（99元，类型 meetup）
+      payh5('meetup', 9900);
+      Taro.showToast({ title: '正在跳转支付，请完成支付后返回', icon: 'loading', duration: 3000 });
+    }
+  };
+
+  // 如果已加入（支付+提交成功），显示成功页面
+  if (meetupQR) {
+    return (
+      <View className="Model" style={{ padding: '20px', textAlign: 'center' }}>
+        <Image style="width: 100%;height: 100px;background: #fff;" src={loft} />
+        <View style={{ marginTop: '40px' }}>
+          <Text style={{ fontSize: '20px', fontWeight: 'bold' }}>欢迎加入数字游民社区！</Text>
+        </View>
+        <View style={{ margin: '30px 0' }}>
+          {isWeChat ? (
+            <Image src={qrcode} mode="widthFix" style="width: 80%;" />
+          ) : (
+            <View>
+              <Text>请在微信中打开本页面以查看社群二维码</Text>
+              <Image src={joinGroup} mode="widthFix" style="width: 80%; marginTop: 20px;" />
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  }
+
+  // 默认显示表单
  return (
    <View className="Model">
      <View className="meetup-left">
        <Image style="width: 100%;height: 100px;background: #fff;" src={loft} />
      </View>

-      <View className="at-article">
-        <View className="at-article__h1">技术交流群</View>
-        <View className="at-article__info">
-          {/* 2017-05-07&nbsp;&nbsp;&nbsp; */}
-          异度星球
-        </View>
-        <View className="at-article__content">
-          <View className="at-article__section">
-            <View className="at-article__h2">群简介</View>
-            <View className="at-article__h3">| 📣技术爱好者</View>
-            <View className="at-article__p">
-              社群是一个交流技术的平台,不限软件/硬件
-            </View>
-            <br />
-            <View className="at-article__h3">| 📋入群须知</View>
-            <View className="at-article__p">
-              社群只是一个沟通平台,与其他伙伴搭桥
-              <br />
-              可以讨论但不限于:
-              <br />
-              1️⃣云手机
-              <br />
-              2️⃣机器人
-              <br />
-              3️⃣AIGC /边缘计算
-            </View>
-            <br />
-            <View className="at-article__h3">| ❌禁止以下行为</View>
-            <View className="at-article__p">
-              🚫营销推广
-              <br />
-              🚫恶意捣乱
-              <br />
-              <br />
-              ❗群主没有解答义务,勿随意@
-              {/* <br />
-              💰价格29元/人 (场地成本) */}
-            </View>
-            <br />
-            {meetup == 1 ? (
-              <View className="at-article__h3">| ☕入群口令:3399</View>
-            ) : null}
-            {meetup == 1 ? (
-              <View className="at-article__p">
-                {`ID:${window.localStorage.getItem("openid")}`}
-              </View>
-            ) : null}
-            {/* 已报名 */}
-            {meetup == 1 ? (
-              <View className="model-emoji">
-                <Image
-                  style="width: 240px;height: 240px;background: #fff;"
-                  // src={qrcode}
-                  src={joinGroup}
-                />
-              </View>
-            ) : null}
-          </View>
-        </View>
-      </View>
+      <View className="index-page" style={{ padding: "20px" }}>
+        <AtMessage />

-      <View className="bottomDiv"></View>
-      {/* 判断有没有wxid,是否女性 */}
-      <AtButton
-        type="primary"
-        size="normal"
-        className="joinSalon"
-        onClick={() => {
-          if (meetup == 1) {
-            return false;
-          } else {
-            if (!!isWeChat) {
-              payh5("meetup", 2900);
-            } else {
-              setmeetupQR(true);
-            }
-          }
-        }}
-      >
-        {meetup == 1 ? "入群口令: 3399" : `立即加入`}
-      </AtButton>
+        <AtForm onSubmit={handleSubmit}>
+          <AtInput
+            title='昵称'
+            type='text'
+            placeholder='请输入您的昵称（必填）'
+            value={form.nickname}
+            onChange={updateField('nickname')}
+          />

-      <View className="meetupQR">
-        {/* 软件下载模态窗 */}
-        <AtModal isOpened={meetupQR}>
-          <AtModalHeader>咨询沙龙</AtModalHeader>
-          <AtModalContent>
-            <View className="model-emoji">
-              <Image
-                // style="width: 100%;height: 240px;background: #fff;"
-                src={qrcode}
+          {/* 性别下拉（保持原样） */}
+          <Picker mode="selector" range={genderOptions} value={genderIndex} onChange={handleGenderChange}>
+            <View className="picker-item">
+              <AtListItem
+                title="性别"
+                extraText={genderOptions[genderIndex]}
+                arrow="right"
              />
            </View>
-          </AtModalContent>
-          <AtModalAction>
-            <Button
-              onClick={() => {
-                setmeetupQR(false);
-              }}
-            >
-              知道了
-            </Button>
-          </AtModalAction>
-        </AtModal>
+          </Picker>
+
+          <AtInput
+            title='职业/专业'
+            type='text'
+            placeholder='您的职业'
+            value={form.occupation}
+            onChange={updateField('occupation')}
+          />
+
+          <View style={{ margin: '30px 0' }}>
+            <Text style={{ fontWeight: 'bold', marginBottom: '10px', display: 'block' }}>
+              自我介绍
+            </Text>
+            <AtTextarea
+              value={form.reason}
+              onChange={updateField('reason')}
+              maxLength={500}
+              height={150}
+              placeholder='越详细越有助于审核'
+            />
+          </View>
+
+          <AtInput
+            title='微信号'
+            type='text'
+            placeholder='必填'
+            value={form.wechatId}
+            onChange={updateField('wechatId')}
+          />
+
+          {/* 学历下拉 */}
+          <Picker mode="selector" range={educationOptions} value={educationIndex} onChange={handleEducationChange}>
+            <View className="picker-item">
+              <AtListItem
+                title="学历"
+                extraText={educationOptions[educationIndex]}
+                arrow="right"
+              />
+            </View>
+          </Picker>
+
+          {/* 毕业年份下拉 */}
+          <Picker mode="selector" range={yearOptions} value={gradYearIndex} onChange={handleGradYearChange}>
+            <View className="picker-item">
+              <AtListItem
+                title="毕业时间"
+                extraText={yearOptions[gradYearIndex]}
+                arrow="right"
+              />
+            </View>
+          </Picker>
+
+          <AtInput
+            title='手机号'
+            type='phone'
+            placeholder='用于紧急联系'
+            value={form.phone}
+            onChange={updateField('phone')}
+          />
+
+          <AtButton formType='submit' type='primary' style={{ marginTop: '40px' }}>
+            提交申请
+          </AtButton>
+        </AtForm>
+
+        <View style={{ marginTop: '20px', color: '#666', fontSize: '12px' }}>
+          {/* <Text>支付后申请将自动提交，支付成功请返回本页面（或刷新）</Text> */}
+        </View>
      </View>
    </View>
  );
 };

-export default Salon;
+export default Salon;