feat: first commit

src/pages/user/index.config.ts

@@ -0,0 +1,6 @@
+export default definePageConfig({
+  navigationStyle: 'custom',
+  navigationBarTitleText: '',
+  enableShareAppMessage: true,
+  usingComponents: {},
+});

src/pages/user/index.less

@@ -0,0 +1,87 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.page-user {
+  padding: 0 24px;
+  margin-top: 40px;
+
+  &__navigation-bar {
+    padding: 0 24px;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 38px;
+  }
+
+  &__header__avatar {
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+  }
+
+  &__header__material {
+    // 头像 96 + 客服按钮 72px + 左右边距 64px + 页面内边距 48px
+    max-width: calc(100% - 96px - 72px - 64px - 48px);
+    margin: 0 32px;
+    flex: 1;
+  }
+
+  &__header__user-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  &__header__nickname {
+    font-size: 34px;
+    line-height:34px;
+    font-weight: 600;
+    color: @blColor;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__header__edit-user-info {
+    min-width: fit-content;
+    height: 36px;
+    font-size: 28px;
+    line-height: 32px;
+    color: #6D3DF5;
+    background: transparent;
+    border: none;
+    margin-left: 16px;
+
+    &::after {
+      border-color: transparent
+    }
+  }
+
+  &__header__welcome {
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 400;
+    color: @blColorG1;
+    margin-top: 14px;
+  }
+
+  &__header__contact {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: #0000004D;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__header__contact-icon {
+    width: 36px;
+    height: 36px;
+  }
+}

src/pages/user/index.tsx

@@ -0,0 +1,77 @@
+import { Button, Image } from '@tarojs/components';
+import { useShareAppMessage } from '@tarojs/taro';
+
+import { useCallback } from 'react';
+
+import CustomNavigationBar from '@/components/custom-navigation-bar';
+import HomePage from '@/components/home-page';
+import LoginButton from '@/components/login-button';
+import Slogan from '@/components/slogan';
+import SwitchBar from '@/components/switch-bar';
+import { RoleType, PageUrl } from '@/constants/app';
+import AnchorFragment from '@/fragments/user/anchor';
+import CompanyFragment from '@/fragments/user/company';
+import useUserInfo from '@/hooks/use-user-info';
+import useRoleType from '@/hooks/user-role-type';
+import { switchRoleType } from '@/utils/app';
+import { logWithPrefix, openCustomerServiceChat } from '@/utils/common';
+import { navigateTo } from '@/utils/route';
+import { getCommonShareMessage } from '@/utils/share';
+
+import './index.less';
+
+const PREFIX = 'page-user';
+const log = logWithPrefix(PREFIX);
+
+export default function User() {
+  const roleType = useRoleType();
+  const userInfo = useUserInfo();
+  log('roleType', roleType);
+
+  const handleSwitchRoleType = useCallback(() => switchRoleType(), []);
+
+  const handleClickEdit = useCallback(() => navigateTo(PageUrl.UserInfo), []);
+
+  const handleContact = useCallback(
+    () => openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfcd60708731367168d'),
+    []
+  );
+
+  useShareAppMessage(() => getCommonShareMessage(false));
+
+  return (
+    <HomePage>
+      <CustomNavigationBar className={`${PREFIX}__navigation-bar`}>
+        <SwitchBar title={roleType === RoleType.Anchor ? '切换为企业' : '切换为主播'} onClick={handleSwitchRoleType} />
+      </CustomNavigationBar>
+      <div className={PREFIX}>
+        <div className={`${PREFIX}__header`}>
+          <Image
+            mode="aspectFit"
+            className={`${PREFIX}__header__avatar`}
+            src={userInfo.avatarUrl || require('@/statics/png/default_avatar.png')}
+          />
+          <div className={`${PREFIX}__header__material`}>
+            <div className={`${PREFIX}__header__user-info`}>
+              <div className={`${PREFIX}__header__nickname`}>{userInfo.nickName}</div>
+              <LoginButton className={`${PREFIX}__header__edit-user-info`} onClick={handleClickEdit}>
+                编辑
+              </LoginButton>
+            </div>
+            <div className={`${PREFIX}__header__welcome`}>播络 | 汇聚全网好通告</div>
+          </div>
+          <Button className={`${PREFIX}__header__contact`} onClick={handleContact}>
+            <Image
+              mode="aspectFit"
+              className={`${PREFIX}__header__contact-icon`}
+              src={require('@/statics/svg/contact.svg')}
+            />
+          </Button>
+        </div>
+        {roleType === RoleType.Anchor && <AnchorFragment />}
+        {roleType === RoleType.Company && <CompanyFragment />}
+      </div>
+      <Slogan />
+    </HomePage>
+  );
+}