Merge branch 'master' into feature/chuck

components/NavHeader/index.tsx

@@ -4,7 +4,6 @@ import type { TabsProps } from "antd";
 import styles from "./index.module.scss";
 import { useRouter } from "next/router";
 import LoginModal from "~/components/loginModal";
-import { useUser } from "~/lib/hooks";
 import PublishModal from "./publishModal";
 import JoinModal from "./joinModal";
 import { UserContext } from "~/lib/userProvider";
@@ -43,7 +42,8 @@ const items: TabsProps["items"] = [
 export default function NavHeader() {
   const router = useRouter();
   const [currentPath, setCurrentPath] = useState("");
-  const { userInfo, testLogin, logout } = useContext(UserContext);
+  const { userInfo, testLogin, logout, setNeedLogin, needLogin } =
+    useContext(UserContext);
 
   useEffect(() => {
     setCurrentPath(router.route);
@@ -92,6 +92,13 @@ export default function NavHeader() {
     }
   }
 
+  //从其它组件通知需要登录
+  useEffect(() => {
+    if (needLogin) {
+      setOpenLoginModal(true);
+    }
+  }, [needLogin]);
+
   return (
     <div className={styles.navHeader}>
       <div className={styles.nav}>
@@ -138,7 +145,10 @@ export default function NavHeader() {
       </div>
       <LoginModal
         open={openLoginModal}
-        onCancel={() => setOpenLoginModal(false)}
+        onCancel={() => {
+          setOpenLoginModal(false);
+          setNeedLogin(false);
+        }}
       ></LoginModal>
       <PublishModal
         open={openPublishModal}

components/NavHeader/joinModal/index.module.scss

 .identityBtn {
   box-sizing: border-box;
   padding: 0 5px;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform:translate(-50%, 0);
   min-width: 100%;
-  height: 24px;
-  background: #e26329;
   border-radius: 6px;
-  opacity: 0.95;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #fff;
-  white-space: nowrap;
+  text-align: center;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+  flex-wrap: nowrap;
 }
 
 .modal {
   :global .ant-modal-content {
     border-radius: 6px;
 
-    .ant-modal-title{
+    .ant-modal-title {
       text-align: center;
     }
   }

components/NavHeader/joinModal/index.tsx

@@ -6,6 +6,18 @@ import { useEffect, useState } from "react";
 import api, { ListTagResp } from "./api";
 import { useRouter } from "next/router";
 
+const imgs = [
+  require("./assets/生产制造商.png"),
+  require("./assets/品牌企业.png"),
+  require("./assets/商务公关机构.png"),
+  require("./assets/无人机自媒体.png"),
+  require("./assets/投资机构.png"),
+  require("./assets/飞手团队.png"),
+  require("./assets/二手服务商.png"),
+  require("./assets/飞手培训机构.png"),
+  require("./assets/推广合作商.png"),
+];
+
 type Props = {
   open?: boolean;
   onOk?: () => void;
@@ -16,10 +28,10 @@ export default function JoinModal(props: Props) {
   const [tagList, setTagList] = useState<ListTagResp[]>([]);
 
   useEffect(() => {
-    api.listTag().then(res => {
+    api.listTag().then((res) => {
       setTagList(res.result || []);
-    })
-  }, [])
+    });
+  }, []);
 
   const onClickTag = (item: ListTagResp) => {
     router.replace("/JoinPolicy?tagId=" + item.id);
@@ -35,15 +47,20 @@ export default function JoinModal(props: Props) {
       width={460}
       footer={null}
     >
-      <Row style={{ padding: "22px 16px 20px 16px", gap: "16px 40px" }}>
-        {tagList.map((item) => {
+      <Row style={{rowGap: 29, paddingTop: 21, paddingBottom: 21}}>
+        {tagList.map((item, i) => {
           return (
             <Col
               key={item.id}
-              style={{ cursor: "pointer", height: 100, padding: 0 }}
+              span={8}
+              style={{
+                cursor: "pointer",
+                padding: 0,
+                textAlign: "center",
+              }}
               onClick={() => onClickTag(item)}
             >
-              <Image src={img} width={100} height={100} alt=""></Image>
+              <Image src={imgs[i]} width={64} height={64} alt=""></Image>
               <div className={styles.identityBtn}>
                 {item.tagName}
                 {">"}

components/layout/index.tsx

@@ -6,6 +6,8 @@ import {useRouter} from 'next/router'
 import styles from './index.module.scss';
 
 const { Header, Footer, Content } = Layout;
+//底部栏固定定位
+const includesPage = ["/home","/flyingHandService/detail/[id]"]
 
 const homeStyle: React.CSSProperties = {
   position:'fixed',
@@ -61,13 +63,7 @@ export default function LayoutView(props: Props) {
         </Header>
         <Content className={styles.content}>{props.children}</Content>
         {!props.hideFooter && (
-          <Footer
-            style={
-              router.pathname.includes("home")
-                ? { ...footerStyle, ...homeStyle }
-                : footerStyle
-            }
-          >
+          <Footer style={ includesPage.includes(router.pathname) ? {...footerStyle,...homeStyle} : footerStyle}>
             <FooterView></FooterView>
           </Footer>
         )}

components/loginModal/index.tsx

@@ -33,20 +33,24 @@ export default function LoginModal(props: Props) {
     }
 
     setRandomLoginCode(String(Date.now()));
-    api
-      .getAppletQRCode({
-        randomLoginCode,
-      })
-      .then((res) => {
-        if (res.code == "200") {
-          setQrCode("data:image/png;base64," + res.result || "");
-        } else {
-          window.messageApi.error("获取登录二维码失败");
-        }
-      });
   }, [props.open]);
 
   useEffect(() => {
+    if (randomLoginCode) {
+      //获取登录码
+      api
+        .getAppletQRCode({
+          randomLoginCode,
+        })
+        .then((res) => {
+          if (res.code == "200") {
+            setQrCode("data:image/png;base64," + res.result || "");
+          } else {
+            window.messageApi.error("获取登录二维码失败");
+          }
+        });
+    }
+
     if (randomLoginCode && !userInfo) {
       if (timeHandle) {
         clearTimeout(timeHandle);

lib/userProvider.tsx

-import React, { createContext, Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, {
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
 import api, { UserInfoResp } from "~/api";
 
 export const UserContext = createContext<{
   testLogin: () => void;
   logout: () => void;
-  userInfo: UserInfoResp | null;
-  setUserInfo: Dispatch<SetStateAction<UserInfoResp | null>>;
+  userInfo: UserInfoResp | null | "";
+  setUserInfo: Dispatch<SetStateAction<UserInfoResp | null | "">>;
+  needLogin: Boolean;
+  setNeedLogin: Dispatch<SetStateAction<Boolean>>;
 }>({
   testLogin() {},
   logout() {},
   userInfo: null,
   setUserInfo() {},
+  needLogin: false,
+  setNeedLogin() {},
 });
 
 type Props = {
   children: React.ReactNode;
 };
 const UserProvider = ({ children }: Props) => {
-  const [userInfo, setUserInfo] = useState<UserInfoResp | null>(null);
+  const [userInfo, setUserInfo] = useState<UserInfoResp | null | ''>(null);
+  const [needLogin, setNeedLogin] = useState<Boolean>(false); //用于通知登录modal需要打开
 
   useEffect(() => {
     try {
@@ -26,7 +37,9 @@ const UserProvider = ({ children }: Props) => {
   }, []);
 
   useEffect(() => {
-    localStorage.setItem("userInfo", JSON.stringify(userInfo || ""));
+    if (userInfo !== null) {
+      localStorage.setItem("userInfo", JSON.stringify(userInfo || ""));
+    }
   }, [userInfo]);
 
   //测试登录
@@ -35,7 +48,7 @@ const UserProvider = ({ children }: Props) => {
       if (res.code == "200") {
         window.localStorage.setItem("token", res.result?.token || "");
         api.userInfo().then((res) => {
-          setUserInfo(res.result || null);
+          setUserInfo(res.result || '');
         });
       }
     });
@@ -44,11 +57,20 @@ const UserProvider = ({ children }: Props) => {
   //登出
   function logout() {
     localStorage.setItem("token", "");
-    setUserInfo(null);
+    setUserInfo('');
   }
 
   return (
-    <UserContext.Provider value={{ userInfo, setUserInfo, testLogin, logout }}>
+    <UserContext.Provider
+      value={{
+        userInfo,
+        setUserInfo,
+        testLogin,
+        logout,
+        needLogin,
+        setNeedLogin,
+      }}
+    >
       {children}
     </UserContext.Provider>
   );

pages/certification/index.page.tsx

@@ -2,13 +2,14 @@ import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
 import { Col, Form, Input, Row, Upload, message, Button, Image } from "antd";
 import type { UploadChangeParam } from "antd/es/upload";
 import type { RcFile, UploadFile, UploadProps } from "antd/es/upload/interface";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import config from "~/api/config";
 import Layout from "~/components/layout";
 import api from "./api";
 import styles from "./index.module.scss";
-import gApi from '~/api';
+import gApi from "~/api";
 import Router from "next/router";
+import { UserContext } from "~/lib/userProvider";
 
 const beforeUpload = (file: RcFile) => {
   const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
@@ -34,6 +35,7 @@ const normFile = (e: any) => {
 export default function Certification() {
   const [loading, setLoading] = useState(false);
   const [imageUrl, setImageUrl] = useState<string>();
+  const { userInfo, setUserInfo } = useContext(UserContext);
 
   //上传change事件
   const handleChange: UploadProps["onChange"] = (
@@ -60,12 +62,18 @@ export default function Certification() {
         licenseImg: imageUrl,
       })
       .then((res) => {
-        console.log('提交结果', res);
-        if(res.code === '200'){
-          window.messageApi.success(res.result);
+        console.log("提交结果", res);
+        if (res.code === "200") {
+          window.messageApi.success("提交成功,请等待审核");
+          if (userInfo) {
+            setUserInfo({
+              ...userInfo,
+              companyAuthStatus: 1,
+            });
+          }
           setTimeout(() => {
-            Router.push('/');
-          }, 1000)
+            Router.push("/");
+          }, 1000);
         }
       });
   };

pages/equipmentLeasing/index.page.tsx

@@ -129,6 +129,13 @@ export default function EquipmentLeasing(props: Props) {
   useEffect(() => {
     if (router.query) {
       setFilterResult({ ...router.query });
+      console.log(router.query,{brandId:1});
+      onFilterChange({
+        categoryId: {
+            id: 2,
+            name: "类目：航测"
+        }
+      },{categoryId:2});
     }
   }, [router]);
   return (

pages/flyingHandService/detail/styled.tsx

@@ -11,7 +11,6 @@ export const Box = styled.div`
     justify-content: space-between;
     align-items: center;
     .left {
-      width: 190px;
       height: 25px;
       font-size: 20px;
       font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;

pages/flyingHandService/index.page.tsx

@@ -17,8 +17,8 @@ export default function FlyingHandService() {
   const {Option} = Select
   const router = useRouter();
   const [list, setList] = useState([
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg",
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/12d624b0-1250-44a6-9a3f-9025725a2adc.jpg",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg",
   ]);
   const [productList, setProductList] = useState(
     Array<{ element: JSX.Element }>
@@ -32,8 +32,9 @@ export default function FlyingHandService() {
   const [skills, setSkills] = useState(
     Array<RegionResp>
   );
+  const [skillsDefault, setSkillsDefault] = useState<Array<number>>();
   const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>);
-
+  const [flightDefault, setFlightDefault] = useState<number | null>();
   const leftDom = (item: Flying) => {
     return (
       <div
@@ -113,6 +114,8 @@ export default function FlyingHandService() {
 
   //端口列表请求
   useEffect(() => {
+    console.log(router);
+    
     let queryVal = JSON.parse(JSON.stringify(router.query));
     for (const key in queryVal) {
       queryVal[key] = Number(queryVal[key]);
@@ -133,25 +136,26 @@ export default function FlyingHandService() {
       });
   }, [abort]);
 
-  const onProvinceChange = (value: string, type: string) => {
-    if (type === "考证") {
+  const onProvinceChange = (value: number) => {
+    if (value) {
+      setFlightDefault(value)
+    }else{
+      setFlightDefault(null)
+    }
       setFilterParams((props) => {
         return {
           ...props,
           licenseId: Number(value),
         };
       });
-    } else {
-      setFilterParams((props) => {
-        return {
-          ...props,
-          flightSkillsId: Number(value),
-        };
-      });
-    }
   };
 
   const onChange = (value: any) => {
+    if (value) {
+      setSkillsDefault([value])
+    }else{
+      setSkillsDefault([])
+    }
     setFilterParams((props) => {
       return {
         ...props,
@@ -199,6 +203,11 @@ export default function FlyingHandService() {
       for (const key in queryVal) {
         queryVal[key] = Number(queryVal[key]);
       }
+      if (queryVal.flightSkillsId) {
+        setSkillsDefault([queryVal.flightSkillsId])
+      }else{
+        setFlightDefault(queryVal.licenseId)
+      }
       setFilterParams((props) => {
         return {
           ...props,
@@ -284,29 +293,21 @@ export default function FlyingHandService() {
                   children: "childLicenses",
                 }}
                 options={skills}
-                onChange={onChange}
+                onChange={(value)=>onChange(value)}
                 changeOnSelect
+                value={skillsDefault}
               />
-              {/* <Select
-                className="selectItem"
-                bordered={false}
-                popupMatchSelectWidth={false}
-                placeholder="考证"
-                size="large"
-                onChange={(value) => onProvinceChange(value, "考证")}
-                options={skills}
-                allowClear
-              /> */}
               <Select
                 className="selectItem"
                 bordered={false}
                 popupMatchSelectWidth={false}
                 placeholder="技能"
                 size="large"
-                onChange={(value) => onProvinceChange(value, "技能")}
+                onChange={(value) => onProvinceChange(value)}
                 options={flightSkillsList}
                 fieldNames={{ value: "id", label: "skillsName" }}
                 allowClear
+                value={flightDefault}
               />
             </Space>
           </div>

pages/forum/components/publishMessage/index.tsx

@@ -2,11 +2,12 @@ import { PlusOutlined } from "@ant-design/icons";
 import { Form, Input, Modal, Upload, Image, Button, Row, Col } from "antd";
 import type { RcFile, UploadProps } from "antd/es/upload";
 import type { UploadFile } from "antd/es/upload/interface";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import gApi from "~/api";
 import NImage from "next/image";
 import api from "./api";
-import { useGeolocation, useUser } from "~/lib/hooks";
+import { useGeolocation } from "~/lib/hooks";
+import { UserContext } from "~/lib/userProvider";
 
 type Props = {
   open: boolean;
@@ -30,7 +31,7 @@ export default function PublishMessage(props: Props) {
   const [fileList, setFileList] = useState<UploadFile[]>([]);
   const [showLoading, setShowLoad] = useState(false);
   const [form] = Form.useForm();
-  const user = useUser();
+  const { userInfo, setNeedLogin } = useContext(UserContext);
   const position = useGeolocation();
 
   //预览关闭
@@ -84,33 +85,38 @@ export default function PublishMessage(props: Props) {
   const onFinish = (values: any) => {
     console.log(values);
     setShowLoad(true);
-    api
-      .publish({
-        lat: position?.position?.lat, //纬度
-        lon: position?.position?.lng, //经度
-        title: '', //标题
-        description: values.description, //描述
-        userId: user!.id, //用户id
-        mediaVO: {
-          //发布图片
-          //@ts-ignore
-          picture: fileList.filter((item) => item.url).map((item) => item.url),
-        },
-      })
-      .then((res) => {
-        console.log("提交结果", res);
-        setShowLoad(false);
-        if (res.code === "200") {
-          window.messageApi.success("发布成功");
-          props.onCancel();
-          props.onOk && props.onOk();
 
-          setTimeout(() => {
-            form.resetFields(["title", "description"]);
-            setFileList([]);
-          }, 500);
-        }
-      });
+    if (userInfo) {
+      api
+        .publish({
+          lat: position?.position?.lat, //纬度
+          lon: position?.position?.lng, //经度
+          title: "", //标题
+          description: values.description, //描述
+          userId: userInfo.id, //用户id
+          mediaVO: {
+            //发布图片
+            //@ts-ignore
+            picture: fileList
+              .filter((item) => item.url)
+              .map((item) => item.url),
+          },
+        })
+        .then((res) => {
+          console.log("提交结果", res);
+          setShowLoad(false);
+          if (res.code === "200") {
+            window.messageApi.success("发布成功");
+            props.onCancel();
+            props.onOk && props.onOk();
+
+            setTimeout(() => {
+              form.resetFields(["title", "description"]);
+              setFileList([]);
+            }, 500);
+          }
+        });
+    }
   };
 
   return (

pages/forum/index.page.tsx

@@ -13,11 +13,11 @@ import Layout from "~/components/layout";
 import styles from "./index.module.scss";
 import errImg from "~/assets/errImg";
 import { RightOutlined } from "@ant-design/icons";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import PublishMessage from "./components/publishMessage";
 import api, { ByDynamicParams, Dynamic } from "./api";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { useUser } from "~/lib/hooks";
+import { UserContext } from "~/lib/userProvider";
 
 interface Item extends Dynamic {
   openComment?: boolean; //是否开启评论
@@ -32,8 +32,8 @@ export default function Forum() {
     pageNo: 1,
     pageSize: 16,
   });
-  const [count, setCount] = useState(0);  //动态总数
-  const userInfo = useUser();   //获取信息
+  const [count, setCount] = useState(0); //动态总数
+  const { userInfo, setNeedLogin } = useContext(UserContext);
 
   useEffect(() => {
     api
@@ -56,7 +56,11 @@ export default function Forum() {
    * 展示发布模态框
    */
   const showModal = () => {
-    setIsModalOpen(true);
+    if (userInfo) {
+      setIsModalOpen(true);
+    } else {
+      setNeedLogin(true);
+    }
   };
 
   /**
@@ -78,15 +82,26 @@ export default function Forum() {
 
   //评论内容
   const onComment = (values: any, id: number, i: number) => {
-    api.comment({
-      content: values.content,
-      dynamicId: id,
-      userId: userInfo!.id,
-    }).then(res => {
-      if(res.code === '200'){
+    if (userInfo) {
+      api
+        .comment({
+          content: values.content,
+          dynamicId: id,
+          userId: userInfo.id,
+        })
+        .then((res) => {
+          if (res.code === "200") {
+          }
+        });
+    }
+  };
 
-      }
-    });
+  //评论内容
+  const onCommentContent = () => {
+    if (userInfo) {
+    } else {
+      setNeedLogin(true);
+    }
   };
   return (
     <Layout>
@@ -165,8 +180,17 @@ export default function Forum() {
                   </Space>
                   {item.openComment && (
                     <div className={styles.commentWrap}>
-                      <Form onFinish={(values) => {onComment(values, item.id, i)}}>
-                        <Form.Item name="content" rules={[{ required: true }]} help="" style={{marginBottom: 0}}>
+                      <Form
+                        onFinish={(values) => {
+                          onComment(values, item.id, i);
+                        }}
+                      >
+                        <Form.Item
+                          name="content"
+                          rules={[{ required: true }]}
+                          help=""
+                          style={{ marginBottom: 0 }}
+                        >
                           <div className={styles.draftWrap}>
                             <div className={styles.commentHeadImg}>自已</div>
                             <Input
@@ -176,7 +200,12 @@ export default function Forum() {
                           </div>
                         </Form.Item>
                         <div className={styles.btnCommentWrap}>
-                          <Button type="primary" htmlType="submit" className="btnComment">
+                          <Button
+                            type="primary"
+                            htmlType="submit"
+                            className="btnComment"
+                            onClick={onCommentContent}
+                          >
                             评论
                           </Button>
                         </div>

pages/home/waterfallFlowBody/components/rotationChart/index.tsx

@@ -5,11 +5,11 @@ import Image from "next/image";
 
 export default function RotationChart() {
   const list = [
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/pc%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE1.png",
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/ebf4fd5d-f8da-45b7-b0b3-282a31e43929.png",
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/6b62ee5b-d929-4dee-b441-258c81c14403.png",
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/0dd9e0f6-c1cd-485a-bdf4-8aeb84b1c67a.png",
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/bcdabab5-f2f8-4c6d-85c6-4d304d8bfe4c.png",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/1(1).jpg",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/2(1).jpg",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/3(1).jpg",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/4(1).jpg",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/5(1).jpg"
   ];
   return (
     <Box>

pages/home/waterfallFlowBody/index.tsx

@@ -294,7 +294,7 @@ export default function WaterfallFlowBody() {
     option: []
   ) => {
     return (
-      <div key={item.title} className={`item ${index>=3?'right-box':''}`}>
+      <div key={item.title} className="item" style={{ marginRight: index >= 3 ? 0 : 10 }}>
         <div className="item-title">
           <div className="item-left">
             <div className="item-left-label" onClick={() => routerPath(index)}>

pages/jobServices/detail/[id].page.tsx

@@ -76,8 +76,8 @@ export default function JobServicesDetail() {
               </div>
               <div className='right-bottom'>
                 <div className='bottom-btn'>
-                  <Button className='btn-left' size='small' type="primary">马上预约</Button>
-                  <Button className='btn-right' size='small' type="primary">电话沟通</Button>
+                  <Button className='btn-left' size='small' type="primary">电话沟通</Button>
+                  <Button className='btn-right' size='small' type="primary">立即预约</Button>
                 </div>
               </div>
           </div>

pages/jobServices/index.page.tsx

@@ -19,7 +19,7 @@ interface ImageListType {}
 export default function JobServices() {
   const router = useRouter();
   const [list, setList] = useState([
-    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/90a52d3e-1ffa-4347-886e-a1c4535cf8b3.jpg",
+    "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-2(1).jpg",
     // "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/665512fd-12e6-49a9-93c1-f9dcd0e82083.jpg",
   ]);
   const [productList, setProductList] = useState(

pages/mall/detail/[id].page.tsx

 import styles from "./index.module.scss";
 import Layout from "~/components/layout";
 import { Space, Image as AImage, Row, Col, Button, Divider, Badge } from "antd";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { DownOutlined, RightOutlined } from "@ant-design/icons";
 import Image from "next/image";
 import errImg from "~/assets/errImg";
@@ -15,16 +15,28 @@ import "swiper/css";
 import "swiper/css/navigation";
 import api, { GetAppGoodsInfoDetailResult } from "./api";
 import IntentionModal from "./components/intentionModal";
+import { UserContext } from "~/lib/userProvider";
 
 export default function MallDetail() {
-  const [visible, setVisible] = useState(false);
+  const { userInfo, setNeedLogin } = useContext(UserContext);
+  const [visible, setVisible] = useState(false); //商品图预览
   const router = useRouter();
-  const [id, setId] = useState<number | null>(null);  
+  const [id, setId] = useState<number | null>(null);
   const [detail, setDetail] = useState<GetAppGoodsInfoDetailResult | null>(
     null
-  );    //详情数据
-  const [intentionModalOpen, setIntentionModalOpen] = useState(false);      //意向弹窗
+  ); //详情数据
+  const [intentionModalOpen, setIntentionModalOpen] = useState(false); //意向弹窗
 
+  //打开意向modal
+  const openIntentionModal = () => {
+    if (userInfo) {
+      setIntentionModalOpen(true);
+    } else {
+      setNeedLogin(true);
+    }
+  };
+
+  //提交意向
   const handleIntentionOk = () => {
     setIntentionModalOpen(false);
   };
@@ -52,7 +64,12 @@ export default function MallDetail() {
   return (
     <Layout>
       {/* 意向弹窗 */}
-      <IntentionModal open={intentionModalOpen} onOk={handleIntentionOk} onCancel={handleIntentionCancel}></IntentionModal>
+      <IntentionModal
+        open={intentionModalOpen}
+        detail={detail}
+        onOk={handleIntentionOk}
+        onCancel={handleIntentionCancel}
+      ></IntentionModal>
       <div className="page" style={{ marginTop: 20, backgroundColor: "#fff" }}>
         <div style={{ display: "none" }}>
           <AImage.PreviewGroup
@@ -134,7 +151,9 @@ export default function MallDetail() {
                 </Col>
                 <Col>
                   <Row align="middle" style={{ cursor: "pointer" }}>
-                    <Col className={styles.font4} onClick={() => setIntentionModalOpen(true)}>共3种可选</Col>
+                    <Col className={styles.font4} onClick={openIntentionModal}>
+                      共3种可选
+                    </Col>
                     <Col style={{ marginLeft: 9 }}>
                       <DownOutlined
                         style={{
@@ -169,8 +188,14 @@ export default function MallDetail() {
               </Row>
             </Space>
             <Space size={12} style={{ marginTop: 123 }}>
-              <Button className={styles.btn1}>加入购物车</Button>
-              <Button className={styles.btn2} type="primary" onClick={() => setIntentionModalOpen(true)}>
+              <Button className={styles.btn1} onClick={openIntentionModal}>
+                加入购物车
+              </Button>
+              <Button
+                className={styles.btn2}
+                type="primary"
+                onClick={openIntentionModal}
+              >
                 提交意向
               </Button>
               <Space size={20} style={{ marginLeft: 19 }}>

pages/mall/detail/api/index.ts

@@ -46,7 +46,7 @@ export interface GoodsSpec {
   skuId: number;
   brandInfoId: number;
   skuName: string;
-  productSpecList: ProductSpecList[];
+  productSpecList: ProductSpec[];
   industrySpecList?: any;
   chooseType: number;
   skuUnitId: number;
@@ -55,7 +55,7 @@ export interface GoodsSpec {
   flag?: any;
 }
 
-export interface ProductSpecList {
+export interface ProductSpec {
   id: number;
   productSpec: number;
   productSkuId: number;

pages/mall/detail/components/intentionModal/index.tsx

 import { Button, Col, Image, Modal, Row, Space } from "antd";
 import { useState } from "react";
 import errImg from "~/assets/errImg";
+import { GetAppGoodsInfoDetailResult } from "../../api";
 import styles from "./index.module.scss";
 
 type Props = {
   open?: boolean;
   onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  onCancel: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  detail: GetAppGoodsInfoDetailResult | null;
 };
 export default function IntentionModal(props: Props) {
-  const list = [1, 1, 1, 1, 1, 1, 1, 1, 1];
+  const [checkedMap, setCheckedMap] = useState<{ string?: boolean }>({}); //通过索引记录选中的产品规格 例: {'1,1': true|false}
+
+  //添加规格到购物车
+  function addProductSpec(goodsSpecIndex: number, productSpecIndex: number) {
+    let temp = {};
+    //@ts-ignore
+    temp[`${goodsSpecIndex},${productSpecIndex}`] =
+      //@ts-ignore
+      !checkedMap[`${goodsSpecIndex},${productSpecIndex}`];
+
+    setCheckedMap({
+      ...checkedMap,
+      ...temp,
+    });
+  }
 
   return (
     <Modal
@@ -21,7 +37,13 @@ export default function IntentionModal(props: Props) {
       className={styles.model}
       footer={
         <div style={{ padding: "13px 36px" }}>
-          <Button type="primary" className={styles.font5} style={{width: '100%', height: 44}}>提交意向</Button>
+          <Button
+            type="primary"
+            className={styles.font5}
+            style={{ width: "100%", height: 44 }}
+          >
+            提交意向
+          </Button>
         </div>
       }
     >
@@ -32,6 +54,7 @@ export default function IntentionModal(props: Props) {
             height={100}
             fallback={errImg}
             style={{ borderRadius: 8 }}
+            src={props.detail?.images?.[0]?.imgUrl}
           ></Image>
         </Col>
         <Col flex="auto" style={{ marginLeft: 13, width: 230 }}>
@@ -39,13 +62,13 @@ export default function IntentionModal(props: Props) {
             className={`${styles.font1} ${styles.ellipsis1}`}
             style={{ marginTop: 28 }}
           >
-            垂直起降固定翼 插翅虎M9
+            {props.detail?.goodsName}
           </div>
           <div
             className={`${styles.font2} ${styles.ellipsis2}`}
             style={{ marginTop: 7 }}
           >
-            已选:入云龙【机壳喷绘】+金眼彪Z40【222222222222222222222222233333555555555555555
+            已选:
           </div>
         </Col>
       </Row>
@@ -54,40 +77,59 @@ export default function IntentionModal(props: Props) {
           <div className={styles.font3} style={{}}>
             无人机
           </div>
-          <div>
-            <div
-              className={styles.font2}
-              style={{ marginBottom: 5, marginTop: 11 }}
-            >
-              入云龙
-            </div>
-            <Space size={10} direction="vertical" style={{ width: "100%" }}>
-              {list.map((item, i) => {
-                return (
-                  <Row
-                    key={i}
-                    align="middle"
-                    wrap={false}
-                    style={{
-                      borderRadius: 5,
-                      border: "1px solid #d6d6d6",
-                      height: 50,
-                    }}
-                  >
-                    <Col style={{ marginLeft: 7 }}>
-                      <Image width={52} height={36} src="" fallback={errImg} preview={false}></Image>
-                    </Col>
-                    <Col
-                      className={`${styles.ellipsis1} ${styles.font4}`}
-                      style={{ width: 238, marginLeft: 18 }}
-                    >
-                      入云龙1-机壳喷绘
-                    </Col>
-                  </Row>
-                );
-              })}
-            </Space>
-          </div>
+          {props.detail?.goodsSpec?.map((item, goodsSpecIndex) => {
+            return (
+              <div key={item.id}>
+                <div
+                  className={styles.font2}
+                  style={{ marginBottom: 5, marginTop: 11 }}
+                >
+                  {item.goodsSpecName}
+                </div>
+                <Space size={10} direction="vertical" style={{ width: "100%" }}>
+                  {item.productSpecList?.map((product, productSpecIndex) => {
+                    return (
+                      <Row
+                        key={product.id}
+                        align="middle"
+                        wrap={false}
+                        style={{
+                          borderRadius: 5,
+                          //@ts-ignore
+                          border: checkedMap[
+                            `${goodsSpecIndex},${productSpecIndex}`
+                          ]
+                            ? "1px solid #FF552D"
+                            : "1px solid #d6d6d6",
+                          height: 50,
+                          cursor: "pointer",
+                        }}
+                        onClick={() =>
+                          addProductSpec(goodsSpecIndex, productSpecIndex)
+                        }
+                      >
+                        <Col style={{ marginLeft: 7 }}>
+                          <Image
+                            width={52}
+                            height={36}
+                            src={product.specImage}
+                            fallback={errImg}
+                            preview={false}
+                          ></Image>
+                        </Col>
+                        <Col
+                          className={`${styles.ellipsis1} ${styles.font4}`}
+                          style={{ width: 238, marginLeft: 18 }}
+                        >
+                          {product.specName}
+                        </Col>
+                      </Row>
+                    );
+                  })}
+                </Space>
+              </div>
+            );
+          })}
         </div>
       </div>
     </Modal>