no message

skyouc

2025-06-22 fee38f39e36bcda9924f5b26dca609dda6b331e0

 zy-asrs-flow/src/pages/account/setting/components/base.jsx

@@ -1,155 +1,204 @@
import { UploadOutlined } from '@ant-design/icons';
import {
  ProForm,
  ProFormDependency,
  ProFormFieldSet,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Button, Input, message, Upload } from 'antd';
import React from 'react';
import useStyles from './index.style';

const queryCurrent = () => {

}

const validatorPhone = (rule, value, callback) => {
  if (!value[0]) {
    callback('Please input your area code!');
  }
  if (!value[1]) {
    callback('Please input your phone number!');
  }
  callback();
};

const BaseView = () => {
  const { styles } = useStyles();
  // 头像组件 方便以后独立，增加裁剪之类的功能
  const AvatarView = ({ avatar }) => (
    <>
      <div className={styles.avatar_title}>头像</div>
      <div className={styles.avatar}>
        <img src={avatar} alt="avatar" />
      </div>
      <Upload showUploadList={false}>
        <div className={styles.button_view}>
          <Button>
            <UploadOutlined />
            更换头像
          </Button>
        </div>
      </Upload>
    </>
  );
  const { data: currentUser, loading } = useRequest(() => {
    return queryCurrent();
  });
  const getAvatarURL = () => {
    if (currentUser) {
      if (currentUser.avatar) {
        return currentUser.avatar;
      }
      const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
      return url;
    }
    return '';
  };
  const handleFinish = async () => {
    message.success('更新基本信息成功');
  };
  return (
    <div className={styles.baseView}>
      {loading ? null : (
        <>
          <div className={styles.left}>
            <ProForm
              layout="vertical"
              onFinish={handleFinish}
              submitter={{
                searchConfig: {
                  submitText: '更新基本信息',
                },
                render: (_, dom) => dom[1],
              }}
              initialValues={{
                ...currentUser,
                phone: currentUser?.phone.split('-'),
              }}
              hideRequiredMark
            >
              <ProFormText
                width="md"
                name="email"
                label="邮箱"
                rules={[
                  {
                    required: true,
                    message: '请输入您的邮箱!',
                  },
                ]}
              />
              <ProFormText
                width="md"
                name="name"
                label="昵称"
                rules={[
                  {
                    required: true,
                    message: '请输入您的昵称!',
                  },
                ]}
              />
              <ProFormTextArea
                name="profile"
                label="个人简介"
                rules={[
                  {
                    required: true,
                    message: '请输入个人简介!',
                  },
                ]}
                placeholder="个人简介"
              />

              <ProFormText
                width="md"
                name="address"
                label="地址"
                rules={[
                  {
                    required: true,
                    message: '请输入您的地址!',
                  },
                ]}
              />
              <ProFormFieldSet
                name="phone"
                label="联系电话"
                rules={[
                  {
                    required: true,
                    message: '请输入您的联系电话!',
                  },
                  {
                    validator: validatorPhone,
                  },
                ]}
              >
                <Input className={styles.area_code} />
                <Input className={styles.phone_number} />
              </ProFormFieldSet>
            </ProForm>
          </div>
          <div className={styles.right}>
            <AvatarView avatar={getAvatarURL()} />
          </div>
        </>
      )}
    </div>
  );
};
export default BaseView;
import {

  ProForm,

  ProFormText,

  ProFormTextArea,

  ProFormSelect,

  ProFormDigit

} from '@ant-design/pro-components';

import { Button, Input, message, Upload, Form } from 'antd';

import { FormattedMessage, useIntl } from '@umijs/max';

import React from 'react';

import useStyles from './index.style';

import Http from '@/utils/http';



import defaultAvat from '/public/img/defaultAva.jpg'



const handleUpdate = async (val, intl) => {

  const hide = message.loading(intl.formatMessage({ id: 'page.updating', defaultMessage: '正在更新' }));

  try {

    const resp = await Http.doPost('api/user/update', val);

    if (resp.code === 200) {

      message.success(intl.formatMessage({ id: 'page.update.success', defaultMessage: '更新成功' }));

      return true;

    } else {

      message.error(resp.msg);

      return false;

    }

  } catch (error) {

    message.error(intl.formatMessage({ id: 'page.update.fail', defaultMessage: '更新失败请重试！' }));

    return false;

  } finally {

    hide();

  }

};



const BaseView = () => {

  const intl = useIntl();

  const { styles } = useStyles();

  const [loading, setLoading] = React.useState(false);

  const [currentUser, setCurrentUser] = React.useState({});

  const [form] = Form.useForm();



  const AvatarView = ({ avatar }) => (

    <>

      <div className={styles.avatar_title}>头像</div>

      <div className={styles.avatar}>

        <img src={avatar} alt="avatar" />

      </div>

      <Upload showUploadList={false}>

        <div className={styles.button_view}>

          {/* <Button>

            <UploadOutlined />

            更换头像

          </Button> */}

        </div>

      </Upload>

    </>

  );



  const queryCurrent = () => {

    setLoading(true);

    Http.doGetPromise('api/auth/user', {}, (res) => {

      setLoading(false);

      setCurrentUser(res.data);

    }).catch((err) => {

      console.error(err);

      setLoading(false);

    })

  }



  React.useEffect(() => {

    queryCurrent();

  }, []);



  const getAvatarURL = () => {

    if (currentUser) {

      if (currentUser.avatar) {

        return currentUser.avatar;

      }

    }

    return defaultAvat;

  };



  const handleFinish = async (values) => {

    handleUpdate(values, intl);

  };



  return (

    <div className={styles.baseView}>

      {loading ? null : (

        <>

          <div className={styles.left}>

            <ProForm

              form={form}

              layout="vertical"

              onFinish={handleFinish}

              submitter={{

                searchConfig: {

                  submitText: intl.formatMessage({ id: 'personal.base.button.name', defaultMessage: '更新基本信息' }),

                },

                render: (_, dom) => dom[1],

              }}

              initialValues={{

                ...currentUser,

              }}

              hideRequiredMark

            >

              <ProFormDigit

                name="id"

                disabled

                hidden={true}

              />

              <ProFormText

                width="md"

                name="username"

                label={intl.formatMessage({ id: 'common.username', defaultMessage: "账号" })}

                disabled

                rules={[

                  {

                    required: true,

                  },

                ]}

              />

              <ProFormText

                width="md"

                name="nickname"

                label={intl.formatMessage({ id: 'common.nickname', defaultMessage: "名称" })}

                rules={[

                  {

                    required: true,

                  },

                ]}

              />

              <ProFormSelect

                width="md"

                name="sex"

                label={intl.formatMessage({ id: 'common.sex', defaultMessage: "性别" })}

                colProps={{ md: 12, xl: 12 }}

                options={[

                  { label: intl.formatMessage({ id: 'common.undefined', defaultMessage: "未知" }), value: 0 },

                  { label: intl.formatMessage({ id: 'common.male', defaultMessage: '男' }), value: 1 },

                  { label: intl.formatMessage({ id: 'common.female', defaultMessage: '女' }), value: 2 },

                ]}

              />

              <ProFormText

                width="md"

                name="phone"

                label={intl.formatMessage({ id: 'common.phone', defaultMessage: "手机号" })}

                rules={[

                  {

                    required: false,

                  },

                ]}

              />

              <ProFormText

                width="md"

                name="email"

                label={intl.formatMessage({ id: 'common.email', defaultMessage: "邮箱" })}

                rules={[

                  {

                    required: false,

                  },

                ]}

              />

              <ProFormText

                width="md"

                name="realName"

                label={intl.formatMessage({ id: 'common.realname', defaultMessage: "真实姓名" })}

                rules={[

                  {

                    required: false,

                  },

                ]}

              />

              <ProFormText

                width="md"

                name="idCard"

                label={intl.formatMessage({ id: 'common.idcard', defaultMessage: "身份证号" })}

                rules={[

                  {

                    required: false,

                  },

                ]}

              />

              <ProFormTextArea

                name="introduction"

                label={intl.formatMessage({ id: 'common.introduction', defaultMessage: "个人简介" })}

                rules={[

                  {

                    required: false,

                  },

                ]}

              />

            </ProForm>

          </div>

          <div className={styles.right}>

            <AvatarView avatar={getAvatarURL()} />

          </div>

        </>

      )}

    </div>

  );

};



export default BaseView;