优化礼包领取界面

src/config/index.ts

@@ -1,7 +1,7 @@
 // 环境配置
 const config = {
   development: {
-    TARO_ACT_HOST: "http://192.168.10.5:3001",
+    TARO_ACT_HOST: "http://192.168.10.5:3000",
     API_BASE_URL: "/api",
   },
   production: {

src/pages/gift/index.tsx

@@ -1,7 +1,7 @@
 import { NavBar, Picker, Popup } from "@nutui/nutui-react-taro";
-import { View } from "@tarojs/components";
+import { Text, View } from "@tarojs/components";
 import { ArrowLeft } from "@nutui/icons-react-taro";
-import { getStorageSync, navigateBack } from "@tarojs/taro";
+import { getStorageSync, navigateBack, showToast } from "@tarojs/taro";
 import {
   getVipCustomersGiftListApi,
   receiveVipCustomersGiftApi,
@@ -45,6 +45,10 @@ const Gift = () => {
         }
       });
       setGiftList(data);
+      showToast({
+        title: "领取成功",
+        icon: "success",
+      });
     }
   };
 
@@ -59,7 +63,6 @@ const Gift = () => {
         });
         setRoleList(res.data);
       }
-
       setRoleInfo(res.data[0]);
     }
   };
@@ -89,46 +92,84 @@ const Gift = () => {
       >
         礼包中心
       </NavBar>
-      <View className="pt-[40px]">
-        <View className="cursor-pointer bg-[#5d66a7] h-[40px] line-height-[40px] text-[#fff] flex items-center justify-between px-[10px] border-b-[1px] border-[#f2f2f2] text-[14px]">
-          <View>{roleInfo?.role_name}</View>
-          <View
-            onClick={() => {
-              setShowRolePopup(true);
-            }}
-          >
-            切换角色
+      <View className="pt-[40px] bg-[#181f36] h-[100vh]">
+        <View className="text-center pt-[10px]">
+          <View className="text-[20px] text-[#f8cf6a] font-[800]">
+            豪华游戏礼包
+          </View>
+          <View className="text-[#a5b1c2] text-[14px]">
+            选择角色并领取您的专属礼包
           </View>
         </View>
-        {giftList.map((item: any) => (
-          <View className="flex items-center justify-between px-[10px] border-b-[1px] border-[#f2f2f2] pb-[10px]">
-            <View className="text-[14px]">
-              <View>{item.gift_name}</View>
-              <View className="text-[12px] text-[#999]">{item.gift_desc}</View>
+        <View className="mt-[10px] bg-[#303549] rounded-[10px] p-[10px] w-[90%] mx-auto">
+          <View className="cursor-pointer  h-[40px] line-height-[40px] text-[#fff] flex items-center justify-between text-[14px]">
+            <View>
+              当前角色：
+              <Text className="text-[#ffce54] font-[800]">
+                {roleInfo?.role_name}
+              </Text>
             </View>
-
             <View
-              className={`font-[800] text-center py-[4px] w-[60px] rounded-[10px] text-[14px] ${
-                item.is_received
-                  ? "text-[#999] bg-[#f2f2f2]"
-                  : "text-[#fff] bg-[#5c64ac]"
-              }`}
               onClick={() => {
-                if (item.is_received) {
-                  return;
-                }
-                getGift(item);
+                setShowRolePopup(true);
               }}
             >
-              {item.is_received ? "已领取" : "领取"}
+              切换角色
             </View>
           </View>
-        ))}
+        </View>
+
+        {giftList.length === 0 && (
+          <View className="text-[#999] text-[14px] text-center mt-[20px]">
+            暂无礼包
+          </View>
+        )}
+        {giftList.length > 0 &&
+          giftList.map((item: any) => (
+            <View className="bg-linear-to-r from-[#4a00e0] to-[#8e2de2] rounded-[10px] p-[20px] mt-[20px] w-[90%] mx-auto">
+              <View className="text-[14px]">
+                <View className="text-[#ffce54] font-[800] text-[20px] mt-[10px] text-center">
+                  {item.gift_name}
+                </View>
+                <View className="text-[16px] text-[#999] bg-[#00000030] rounded-[10px] p-[20px] my-[20px]">
+                  {item.gift_desc.split("、").map((item: any) => (
+                    <View className="flex items-center justify-between py-[15px] border-b-[1px] border-[#ffffff30] last:border-b-0">
+                      <View className="text-[16px] text-[#fff] font-[800]">
+                        {item.split("*")[0]}
+                      </View>
+                      <View className="text-[16px] text-[#ffce54] font-[800]">
+                        x {item.split("*")[1]}
+                      </View>
+                    </View>
+                  ))}
+                </View>
+                <View
+                  className={`font-[800] text-center py-[15px] px-[40px] rounded-[50px] text-[18px] w-[200px] mx-auto ${
+                    item.is_received
+                      ? "text-[#999] bg-[#f2f2f2]"
+                      : "text-[#2c3e50] bg-linear-to-r from-[#ffce54] to-[#ff9f43] "
+                  }`}
+                  onClick={() => {
+                    if (item.is_received) {
+                      return;
+                    }
+                    getGift(item);
+                  }}
+                >
+                  {item.is_received ? "已领取" : "领取"}
+                </View>
+              </View>
+            </View>
+          ))}
       </View>
       <Picker
         title="请选择角色"
         visible={showRolePopup}
         options={roleList}
+        onConfirm={(data) => {
+          setRoleInfo(data[0]);
+          setShowRolePopup(false);
+        }}
         onClose={() => {
           setShowRolePopup(false);
         }}