feat: 奖品页接口

mock/home.js

@@ -71,5 +71,59 @@ export const homeJs = [
         }
       }
     },
+  },
+  {
+    url: '/activity/tabQuery', //请求地址
+    response: () => {
+      return {
+        "ok": true,
+        "code": 200,
+        "msg": 'nodano',
+        "timestamp": +new Date(),
+        "data": {
+          "tabList": [
+            {
+              "id": 1,
+              "name": "财神红包雨星",
+            },
+            {
+              "id": 2,
+              "name": "tab1",
+            },
+            {
+              "id": 3,
+              "name": "tab2",
+            },
+            {
+              "id": 4,
+              "name": "tab3",
+            },
+            {
+              "id": 5,
+              "name": "tab4",
+            }
+          ]
+        }
+      }
+    }
+  },
+  {
+    url: '/activity/prizeRecords', //请求地址
+    response: () => {
+      return {
+        "ok": true,
+        "code": 200,
+        "msg": 'nodano',
+        "timestamp": +new Date(),
+        "data": {
+          "prizeRecords": new Array(20).fill(0).map((item, index) => ({
+            "id": index + 1,
+            "prizeName": `奖品名称${index + 1}`,
+            "prizeImage": index == 0 ? `https://yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png` : `https://yun.duiba.com.cn/spark/assets/f77861647e7b55e9c95e9c49d891a21526157a76.jpg`,
+            "prizeType": 1,
+          }))
+        }
+      }
+    }
   }
 ]
\ No newline at end of file

src/api/api.js

@@ -9,6 +9,7 @@ export const login = (data) => {
   })
 }
 
+// 首页
 export const indexApi = (data) => {
   return request({
     method: 'get',
@@ -17,6 +18,7 @@ export const indexApi = (data) => {
   })
 }
 
+// 未来展品
 export const futureActivityApi = (data) => {
   return request({
     method: 'post',
@@ -24,3 +26,21 @@ export const futureActivityApi = (data) => {
     data
   })
 }
+
+// 奖品tab列表
+export const tabQueryApi = (data) => {
+  return request({
+    method: 'get',
+    url: '/activity/tabQuery',
+    data
+  })
+}
+
+// 奖品列表
+export const prizeRecordsApi = (data) => {
+  return request({
+    method: 'get',
+    url: '/activity/prizeRecords',
+    data
+  })
+}
\ No newline at end of file

src/pages/futurePage/futurePage.jsx

@@ -21,7 +21,9 @@ class FuturePage extends Component {
 
   async componentDidMount() {
     sensorMdExpouse("xcxPage", { pageName: `未来展品` })
-    const res = await futureActivityApi();
+    const res = await futureActivityApi({
+      channel: CFG.channel
+    });
     if (res.ok) {
       this.setState({ activityList: res.data?.activityInfoList || [] })
     }

src/pages/futurePage/futurePage.less

@@ -69,8 +69,12 @@
       }
 
       .prize_img {
-        width: 100%;
-        height: 100%;
+        position: absolute;
+        left: 2px;
+        top: 0px;
+        width: 112px;
+        height: 112px;
+        border-radius: 16px;
         object-fit: contain;
       }
 

src/pages/prizePage/prizePage.jsx

@@ -6,23 +6,54 @@ import store from '../../store';
 import { PAGE_MAP } from '../../utils/constants';
 import { observer } from 'mobx-react';
 import { sensorMdClick, sensorMdExpouse } from '../../utils/sensorMd';
+import { prizeRecordsApi, tabQueryApi } from '../../api/api';
+import Toast from '../../components/toast';
 @observer
 class PrizePage extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
+      tabList: [],
       curTab: 0,
+      prizeList: [],
     }
   }
 
   async componentDidMount() {
     sensorMdExpouse("xcxPage", { pageName: `奖品页` })
+
+    const res = await tabQueryApi({
+      channel: CFG.channel
+    });
+    if (res.ok) {
+      const { tabList } = res.data || {};
+      this.setState({ tabList: tabList || [] }, () => {
+        if (tabList.length > 0) {
+          this.toggleTab(0)
+        }
+      })
+    }
   }
 
   // 切换tab
-  toggleTab = _asyncThrottle((index) => {
-    this.setState({ curTab: index })
+  toggleTab = _asyncThrottle(async (index) => {
+    this.setState({ curTab: index, prizeList: [] })
+
+    const { tabList } = this.state;
+    const res = await prizeRecordsApi({
+      channel: CFG.channel,
+      id: tabList[index].id
+    });
+    if (res.ok) {
+      this.setState({ prizeList: res.data?.prizeRecords || [] })
+    }
+  })
+
+  // 奖品详情
+  prizeDetail = _asyncThrottle((item) => {
+    const { curTab, tabList } = this.state;
+    Toast(`前往${tabList[curTab].name}活动查看`)
   })
 
   // 返回
@@ -32,7 +63,7 @@ class PrizePage extends Component {
   })
 
   render() {
-    const { curTab } = this.state;
+    const { curTab, tabList, prizeList } = this.state;
     const { prize_img_bg, tab_active_bg, title, item_bg } = skinStore.prizePage;
     const { back, sub_page_bg_cover, sub_page_bg } = skinStore.common;
     return (
@@ -46,25 +77,26 @@ class PrizePage extends Component {
         <div className="title" style={{ 'backgroundImage': `url(${title})` }}></div>
         {/* tab */}
         <div className="tab_list">
-          {new Array(10).fill(0).map((item, index) => (
+          {tabList?.map((item, index) => (
             <div
               className={`tab_item ${curTab === index ? 'active' : ''}`}
+              key={`tab_item_${item.id}`}
               onClick={() => this.toggleTab(index)}
               style={{ 'backgroundImage': `url(${curTab === index ? tab_active_bg : ''})` }}
-            >财神红包雨星{index + 1}
+            >
+              {item.name}
             </div>
           ))}
         </div>
         {/* 奖品列表 */}
         <div className="prize_list">
-          {new Array(20).fill(0).map((item, index) => (
-            <div className="prize_item" style={{ 'backgroundImage': `url(${item_bg})` }}>
+          {prizeList?.map((item, index) => (
+            <div className="prize_item" style={{ 'backgroundImage': `url(${item_bg})` }} key={index} onClick={() => this.prizeDetail(item)}>
               <div className="prize_img_box" style={{ 'backgroundImage': `url(${prize_img_bg})` }}>
-                <img className="prize_img" src="//yun.duiba.com.cn/polaris/medal4.3c2dd506dd8ee372e3e523e4990254b8f3cfcbf2.png" alt="" />
+                <img className="prize_img" src={item.prizeImage} alt="" />
               </div>
               <div className="prize_info">
-                <div className="prize_name">奖品名称奖品名称奖品名称奖品名称${index + 1}</div>
-                <div className="prize_desc">奖品描述奖品描述奖品描述奖品描述奖品描述奖品描述奖品描述</div>
+                <div className="prize_name">{item.prizeName}</div>
               </div>
             </div>
           ))}

src/pages/prizePage/prizePage.less

@@ -100,8 +100,12 @@
       }
 
       .prize_img {
-        width: 100%;
-        height: 100%;
+        position: absolute;
+        left: 2px;
+        top: 0px;
+        width: 112px;
+        height: 112px;
+        border-radius: 16px;
         object-fit: contain;
       }
 

src/store/index.js

@@ -33,7 +33,9 @@ const store = makeAutoObservable({
 
   indexInfo: {},
   async getIndexInfo() {
-    const res = await indexApi()
+    const res = await indexApi({
+      channel: CFG.channel
+    })
     console.log(res)
     if (res.ok) {
       store.indexInfo = res.data || {}