feat : 增加购票功能

package.json

@@ -22,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "6",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

src-tauri/tauri.conf.json

@@ -63,8 +63,8 @@
         "fullscreen": false,
         "height": 600,
         "resizable": true,
-        "title": "秀动",
-        "width": 800
+        "title": "秀动辅助",
+        "width": 1000
       }
     ]
   }

src/App.tsx

@@ -1,7 +1,6 @@
-import {Outlet, Route, Routes} from "react-router-dom";
+import {Navigate, Outlet, Route, Routes} from "react-router-dom";
 import {DefaultFooter, ProLayout} from "@ant-design/pro-layout";
 import route from "./configs/route";
-import Home from "./pages/home";
 
 export default () => {
 
@@ -12,15 +11,15 @@ export default () => {
             }}
         >
             <ProLayout
+                headerHeight={0}
                 menuItemRender={(item, dom) => <div> {dom}</div>}
                 subMenuItemRender={(_, dom) => <div> {dom}</div>}
                 title="秀动辅助"
-                logo="https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*1NHAQYduQiQAAAAAAAAAAABkARQnAQ"
+                siderWidth={120}
                 menuHeaderRender={(logo, title) => (
                     <div
                         id="customize_menu_header"
                     >
-                        {logo}
                         {title}
                     </div>
                 )}
@@ -45,19 +44,18 @@ export default () => {
                 }}
             >
                 <Routes>
-                    <Route path="/" element={<Home/>}>
-
-                        {route.routes!.map((route, index) => {
-                                return (
-                                    <Route
-                                        key={index}
-                                        path={route.path!}
-                                        element={route.component!}
-                                    />
-                                );
-                            }
-                        )}
+                    <Route path="/" element={<Navigate replace to="/home" />}>
                     </Route>
+                    {route.routes!.map((route, index) => {
+                            return (
+                                <Route
+                                    key={index}
+                                    path={route.path!}
+                                    element={route.component!}
+                                />
+                            );
+                        }
+                    )}
                 </Routes>
                 <Outlet/>
             </ProLayout>

src/component/buttons.tsx

@@ -1,19 +1,24 @@
-
 import React from "react";
-import {Button, Form, Select, Space} from "antd";
+import {Button, Space} from "antd";
+
+export type ButtonsProps = {
+    buyNow: () => void
+    buyPickup: () => void
+    buyTicket: () => void
+    pickEnable : boolean
+    ticketEnable : boolean
+}
 
-const Buttons: React.FC = () => {
+const Buttons: React.FC<ButtonsProps> = (props) => {
 
 
     return (
         <>
             <Space>
-
-            <Button type="primary">立即购票</Button>
-            <Button type="primary">开始捡漏</Button>
-            <Button type="primary">定时购票</Button>
+                <Button type="primary" htmlType="submit" onClick={props.buyNow}>立即购票</Button>
+                <Button type="primary" htmlType="submit" onClick={props.buyPickup}>{props.pickEnable? "取消捡漏" :"开始捡漏"}</Button>
+                <Button type="primary" htmlType="submit" onClick={props.buyTicket}>{props.ticketEnable ? "取消定时" : "定时购票"}</Button>
             </Space>
-
         </>
     );
 }

src/component/chooseUser.tsx

@@ -1,79 +1,113 @@
 import React, {useEffect, useState} from 'react';
 import {Button, Select, Space} from 'antd';
+import {post} from "../util/http";
+import {ADDRESS_LIST, AddressInfo, COMMON_PERFORMER, performerInfo} from "../network/api/userInfo";
+import {ApiParams} from "../network/apiParams";
 
-const {Option} = Select;
-
-
-export type UserInfo = {
-    id: string;
-    name: string;
-    address: string;
-}
 
 export type UserInfoProps = {
-    onChange: (value: string) => void;
+    onPerformerChange: (value: performerInfo[]) => void;
+    onAddressChange: (value: AddressInfo) => void;
 }
 
+
+
 const ChooseUser: React.FC<UserInfoProps> = (props) => {
 
-    const [userInfoList, setUserInfoList] = useState<UserInfo[]>([]);
-    const [selectKey, setSelectKey] = useState<number>(-1)
+    // 观影人信息
+    const [performerList, setPerformerList] = useState<PerformerOption[]>([]);
+    const [defaultPerformerId, setDefaultPerformerId] = useState<number[]>([]);
+
+    // 收货地址
+    const [addressList, setAddressList] = useState<AddressOption[]>([]);
+    const [defaultAddressId, setDefaultAddressId] = useState<number>();
+
+
+    interface PerformerOption {
+        label: string,
+        value: number,
+        performer : performerInfo
+    }
+
+    interface AddressOption {
+        label: string,
+        value: number,
+        address : AddressInfo
+    }
+
 
+    // 初始化
     useEffect(() => {
-        setUserInfoList([
-            {
-                id: "1",
-                name: "marun",
-                address: "杭州"
-            },
-            {
-                id: "2",
-                name: "marin",
-                address: "江苏"
-            },
-        ])
+        fetchInfo()
     }, [])
 
 
-    const handleOnChange = function (val: string, option: any) {
-        props.onChange(val);
-        setSelectKey(option.key)
+    // 观影人信息更新
+    const handlePerformerChange = function (val: number[],options :PerformerOption[]) {
+        props.onPerformerChange(options.map((option: any) => { return option.performer}));
+        setDefaultPerformerId(val);
     }
 
+
+    // 收货地址更新
+    function handleAddressChange(val: any,option :AddressOption) {
+
+        props.onAddressChange(option.address);
+        setDefaultAddressId(val);
+    }
+
+    // 获取用户信息
     const fetchInfo = function () {
-        setUserInfoList([
-            {
-                id: "3",
-                name: "marun3",
-                address: "杭州3"
-            },
-            {
-                id: "4",
-                name: "marin4",
-                address: "江苏4"
-            },
-        ])
+        post(COMMON_PERFORMER, new ApiParams(), (res) => {
+            setPerformerList(res.map((item: performerInfo) => {
+                    return {
+                        label:item.name,
+                        value: item.id,
+                        performer : item
+                    }
+            }));
+            props.onPerformerChange([res[0]]);
+            setDefaultPerformerId([res.length > 0 && res[0].id])
+        })
+
+        post(ADDRESS_LIST, new ApiParams(), (res) => {
+            setAddressList(res.map((item: AddressInfo) => {
+                return {
+                    label:item.address,
+                    value: item.id,
+                    address : item
+                }
+            }));
+            setDefaultAddressId(res.length > 0 && res[0].id)
+        })
     }
 
+
     return (
         <Space direction="vertical" size="small">
 
             <div>
-                观影人：
+                观影人&nbsp;&nbsp;&nbsp;&nbsp;：
                 <Select
                     placeholder="请选择常用观影人"
-                    onChange={handleOnChange}
-                    // style={{width: 200}}
+                    // @ts-ignore
+                    onChange={handlePerformerChange}
+                    mode="multiple"
+                    style={{width: '200px'}}
+                    value={defaultPerformerId}
+                    options={performerList}
                 >
-                    {userInfoList.map((info, key) => {
-                        return <Option value={info.id} key={key}>{info.name}</Option>
-                    })}
                 </Select>
             </div>
             <div>
                 收货地址：
                 <Select
                     placeholder="请选择收货地址"
+                    style={{width: '200px'}}
+                    value={defaultAddressId}
+                    // @ts-ignore
+                    onChange={handleAddressChange}
+                    options={addressList}
                 >
                 </Select>
             </div>

src/component/login.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import {Button, Form, Input, message} from "antd";
 import {post} from "../util/http";
-import {LOGIN_PWD} from "../network/request";
 import {ApiParams} from "../network/apiParams";
 import {store} from "../constant/store";
+import {LOGIN_PWD} from "../network/api/login";
 
 class LoginForm extends React.Component<any, any> {
 

src/component/search.tsx

@@ -1,60 +1,53 @@
 import React, {useState} from "react";
-import {Button, Card, Input, Select, Form} from "antd";
-// import jsonp from 'reques';
-import qs from 'qs';
+import {Select, Form} from "antd";
+import {post} from "../util/http";
+import {ACTIVITY_DETAIL, ActivityDetail, SEARCH, SearchResult} from "../network/api/search";
+import {ApiParams} from "../network/apiParams";
 
-const Search: React.FC = () => {
 
-    const {Option} = Select;
+export type SearchProps = {
+    activityChange : (value: number) => void
+}
 
-    let timeout: ReturnType<typeof setTimeout> | null;
-    let currentValue: string;
+const Search: React.FC<SearchProps> = (props) => {
 
-    const fetchData = (value: string, callback: (data: { value: string; text: string }[]) => void) => {
-        if (timeout) {
-            clearTimeout(timeout);
-            timeout = null;
-        }
-        currentValue = value;
-
-        const fake = () => {
-            const str = qs.stringify({
-                code: 'utf-8',
-                q: value,
-            });
-            fetch(`https://suggest.taobao.com/sug?${str}`)
-                .then((response: any) => response.json())
-                .then((d: any) => {
-                    if (currentValue === value) {
-                        const {result} = d;
-                        const data = result.map((item: any) => ({
-                            value: item[0],
-                            text: item[0],
-                        }));
-                        callback(data);
-                    }
-                });
-        };
+    const {Option} = Select;
 
-        timeout = setTimeout(fake, 300);
+    // 演出搜索
+    const fetchData = (value: string, callback: (data: any[]) => void) => {
+        // 判断value 是否是纯数字，纯数字调用activity_detail接口，否则调用activity_search接口
+        if (/^\d+$/.test(value)) {
+            let apiParams = new ApiParams();
+            apiParams.set("activityId", value);
+            post(ACTIVITY_DETAIL, apiParams, (data: ActivityDetail) => {
+                callback([data])
+            })
+        } else {
+            let apiParams = new ApiParams();
+            apiParams.set("keyword", value);
+            apiParams.set("pageNo", 1);
+            apiParams.set("pageSize", 20);
+            post(SEARCH, apiParams, (data: SearchResult) => {
+                callback(data.activityInfo)
+            })
+        }
     };
 
     const [data, setData] = useState<any[]>([]);
-    const [value, setValue] = useState<string>();
+    const [value, setValue] = useState<number>();
 
     const handleSearch = (newValue: string) => {
         if (newValue) {
             fetchData(newValue, setData);
-        } else {
-            setData([]);
         }
     };
 
-    const handleChange = (newValue: string) => {
+    const handleChange = (newValue: number) => {
         setValue(newValue);
+        props.activityChange(newValue)
     };
 
-    const options = data.map(d => <Option key={d.value}>{d.text}</Option>);
+    const options = data.map(d => <Option key={d.activityId}>{d.title}</Option>);
 
     return (
         <>
@@ -66,7 +59,6 @@ const Search: React.FC = () => {
                     showSearch
                     value={value}
                     placeholder="搜索"
-                    // style={props.style}
                     defaultActiveFirstOption={false}
                     showArrow={false}
                     filterOption={false}
@@ -77,7 +69,6 @@ const Search: React.FC = () => {
                     {options}
                 </Select>
             </Form.Item>
-
         </>
     );
 }