个人资料

src/pages/user/components/UserCard.tsx

@@ -1,6 +1,6 @@
 import {Button} from '@nutui/nutui-react-taro'
 import {Avatar, Tag} from '@nutui/nutui-react-taro'
-import {View, Text} from '@tarojs/components'
+import {View, Text, Image} from '@tarojs/components'
 import {Scan} from '@nutui/icons-react-taro';
 import {getUserInfo, getWxOpenId} from '@/api/layout';
 import Taro from '@tarojs/taro';
@@ -16,7 +16,7 @@ const UserCard = forwardRef<any, any>((_, ref) => {
   const {
     isAdmin
   } = useUser();
-  const { data, refresh } = useUserData()
+  const {data, refresh} = useUserData()
   const {getDisplayName, getRoleName} = useUser();
   const [IsLogin, setIsLogin] = useState<boolean>(false)
   const [userInfo, setUserInfo] = useState<User>()
@@ -119,7 +119,7 @@ const UserCard = forwardRef<any, any>((_, ref) => {
   };
 
   /* 获取用户手机号 */
-  const handleGetPhoneNumber = ({detail}: {detail: {code?: string, encryptedData?: string, iv?: string}}) => {
+  const handleGetPhoneNumber = ({detail}: { detail: { code?: string, encryptedData?: string, iv?: string } }) => {
     const {code, encryptedData, iv} = detail
 
     // 获取存储的邀请参数
@@ -171,71 +171,85 @@ const UserCard = forwardRef<any, any>((_, ref) => {
   return (
     <View className={'header-bg pt-20'}>
       <View className={'p-4'}>
-        <View
+        {/* 使用相对定位容器，让个人资料图片可以绝对定位在右上角 */}
-          className={'user-card w-full flex flex-col justify-around rounded-xl shadow-sm'}
+        <View className="relative">
-          style={{
+          <View
-            background: 'linear-gradient(to bottom, #ffffff, #ffffff)', // 这种情况建议使用类名来控制样式（引入外联样式）
+            className={'user-card w-full flex flex-col justify-around rounded-xl'}
-            // width: '720rpx',
+            style={{
-            // margin: '10px auto 0px auto',
+              background: 'linear-gradient(to bottom, #ffffff, #ffffff)',
-            height: '170px',
+              height: '170px',
-            // borderRadius: '22px 22px 0 0',
+            }}
-          }}
+          >
-        >
+            <View className={'user-card-header flex w-full justify-between items-center pt-4'}>
-          <View className={'user-card-header flex w-full justify-between items-center pt-4'}>
+              <View className={'flex items-center mx-4'}>
-            <View className={'flex items-center mx-4'}>
+                {
-              {
+                  IsLogin ? (
-                IsLogin ? (
-                  <Avatar size="large" src={userInfo?.avatar} shape="round"/>
-                ) : (
-                  <Button className={'text-black'} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
                     <Avatar size="large" src={userInfo?.avatar} shape="round"/>
-                  </Button>
+                  ) : (
-                )
+                    <Button className={'text-black'} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
-              }
+                      <Avatar size="large" src={userInfo?.avatar} shape="round"/>
-              <View className={'user-info flex flex-col px-2'}>
+                    </Button>
-                <View className={'py-1 text-black font-bold'}>{getDisplayName()}</View>
+                  )
-                {IsLogin ? (
+                }
-                  <View className={'grade text-xs py-1'}>
+                <View className={'user-info flex flex-col px-2'}>
-                    <Tag type="success" round>
+                  <View className={'py-1 text-black font-bold'}>{getDisplayName()}</View>
-                      <Text className={'p-1'}>
+                  {IsLogin ? (
-                        {getRoleName()}
+                    <View className={'grade text-xs py-1'}>
-                      </Text>
+                      <Tag type="success" round>
-                    </Tag>
+                        <Text className={'p-1'}>
-                  </View>
+                          {getRoleName()}
-                ) : ''}
+                        </Text>
+                      </Tag>
+                    </View>
+                  ) : ''}
+                </View>
+              </View>
+              {isAdmin() &&
+              <Scan className={'text-gray-900'} size={24} onClick={() => navTo('/user/store/verification', true)}/>}
+            </View>
+            <View className={'flex justify-around mt-1'}>
+              <View className={'item flex justify-center flex-col items-center'}
+                    onClick={() => navTo('/user/wallet/wallet', true)}>
+                <Text className={'text-sm text-gray-500'}>余额</Text>
+                <Text className={'text-xl'}>{data?.balance || '0.00'}</Text>
+              </View>
+              <View className={'item flex justify-center flex-col items-center'}>
+                <Text className={'text-sm text-gray-500'}>积分</Text>
+                <Text className={'text-xl'}>{data?.points || 0}</Text>
+              </View>
+              <View className={'item flex justify-center flex-col items-center'}
+                    onClick={() => navTo('/user/coupon/index', true)}>
+                <Text className={'text-sm text-gray-500'}>优惠券</Text>
+                <Text className={'text-xl'}>{data?.coupons || 0}</Text>
+              </View>
+              <View className={'item flex justify-center flex-col items-center'}
+                    onClick={() => navTo('/user/gift/index', true)}>
+                <Text className={'text-sm text-gray-500'}>礼品卡</Text>
+                <Text className={'text-xl'}>{data?.giftCards || 0}</Text>
               </View>
             </View>
-            {isAdmin() && <Scan className={'text-gray-900'} size={24} onClick={() => navTo('/user/store/verification', true)} />}
-            <View className={'mr-4 text-sm px-3 py-1 text-black border-gray-400 border-solid border-2 rounded-3xl'}
-                 onClick={() => navTo('/user/profile/profile', true)}>
-              {'个人资料'}
-            </View>
           </View>
-          <View className={'flex justify-around mt-1'}>
+
-            <View className={'item flex justify-center flex-col items-center'}
+          {/* 个人资料图片，定位在右上角 */}
-                 onClick={() => navTo('/user/wallet/wallet', true)}>
+          <View
-              <Text className={'text-sm text-gray-500'}>余额</Text>
+            className="absolute top-0 right-0 overflow-hidden"
-              <Text className={'text-xl'}>{data?.balance || '0.00'}</Text>
+            style={{
-            </View>
+             borderRadius:"0 0.75rem 0 0"
-            <View className={'item flex justify-center flex-col items-center'}>
+            }}
-              <Text className={'text-sm text-gray-500'}>积分</Text>
+            onClick={() => navTo('/user/profile/profile', true)}
-              <Text className={'text-xl'}>{data?.points || 0}</Text>
+          >
-            </View>
+            <Image
-            <View className={'item flex justify-center flex-col items-center'}
+              src="https://oss.wsdns.cn/20250913/7c3de38b377344b89131aba40214f63f.png"
-                 onClick={() => navTo('/user/coupon/index', true)}>
+              alt="个人资料"
-              <Text className={'text-sm text-gray-500'}>优惠券</Text>
+              style={{
-              <Text className={'text-xl'}>{data?.coupons || 0}</Text>
+                width:"200rpx"
-            </View>
+              }}
-            <View className={'item flex justify-center flex-col items-center'}
+              mode="widthFix"
-                 onClick={() => navTo('/user/gift/index', true)}>
+            />
-              <Text className={'text-sm text-gray-500'}>礼品卡</Text>
-              <Text className={'text-xl'}>{data?.giftCards || 0}</Text>
-            </View>
           </View>
         </View>
       </View>
     </View>
-
   )
 })
 

src/pages/user/user.scss

@@ -3,3 +3,7 @@
   background: linear-gradient(to bottom, #03605c, #18ae4f);
   background-size: 100%;
 }
+
+.my-bg{
+  background: url('https://oss.wsdns.cn/20250913/5ae575a50dbb4ccaab086c3679c5e2c3.png') no-repeat top center;
+}