Skip to content

W
web
提交 85d17ed1 作者: 余乾开
操作

Merge branch 'master' into feature/chuck

上级 2845349e 01f1d24c
正在显示 包含 346 行增加 和 189 行删除
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>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论