Skip to content

W
web
提交 dc108972 作者: 龚洪江
操作

修复：作业服务问题

上级 44ca5201
正在显示 包含 1396 行增加 和 1641 行删除
components/NavHeader/index.tsx
import React, { useContext, useEffect, useState } from "react"; import React, { useContext, useEffect, useState } from 'react';
import { Avatar, Button, Dropdown, Space, Tabs } from "antd"; import { Avatar, Button, Dropdown, Space, Tabs } from 'antd';
import type { TabsProps } from "antd"; import type { TabsProps } from 'antd';
import styles from "./index.module.scss"; import styles from './index.module.scss';
import { Router, useRouter } from "next/router"; import { Router, useRouter } from 'next/router';
import LoginModal from "~/components/loginModal"; import LoginModal from '~/components/loginModal';
import PublishModal from "./publishModal"; import PublishModal from './publishModal';
import JoinModal from "./joinModal"; import JoinModal from './joinModal';
import { UserContext } from "~/lib/userProvider"; import { UserContext } from '~/lib/userProvider';
const items: TabsProps["items"] = [ const items: TabsProps['items'] = [
{ {
key: "/home", key: '/home',
label: ` 首页 `, label: ` 首页 `,
}, },
{ {
key: "/jobServices", key: '/jobServices',
label: `作业服务`, label: `作业服务`,
}, },
{ {
key: "/equipmentLeasing", key: '/equipmentLeasing',
label: `设备租赁`, label: `设备租赁`,
}, },
{ {
key: "/flyingHandService", key: '/flyingHandService',
label: `飞手培训`, label: `飞手培训`,
}, },
{ {
key: "/mall", key: '/mall',
label: `产品商城`, label: `产品商城`,
}, },
{ {
key: "/projectInfo", key: '/projectInfo',
label: `项目资讯`, label: `项目资讯`,
}, },
{ {
key: "/forum", key: '/forum',
label: `社区论坛`, label: `社区论坛`,
}, },
]; ];
...@@ -45,9 +45,8 @@ type Props = { ...@@ -45,9 +45,8 @@ type Props = {
export default function NavHeader(props: Props) { export default function NavHeader(props: Props) {
const router = useRouter(); const router = useRouter();
const [currentPath, setCurrentPath] = useState(""); const [currentPath, setCurrentPath] = useState('');
const { userInfo, testLogin, logout, setNeedLogin, needLogin } = const { userInfo, testLogin, logout, setNeedLogin, needLogin } = useContext(UserContext);
useContext(UserContext);
useEffect(() => { useEffect(() => {
const routerTo = items?.filter((item) => router.route == item.key)[0]; const routerTo = items?.filter((item) => router.route == item.key)[0];
...@@ -56,7 +55,7 @@ export default function NavHeader(props: Props) { ...@@ -56,7 +55,7 @@ export default function NavHeader(props: Props) {
} else { } else {
setCurrentPath(router.route); setCurrentPath(router.route);
} }
console.log("currentHash", currentPath); console.log('currentHash', currentPath);
}, [router.route]); }, [router.route]);
//导航更改 //导航更改
...@@ -112,7 +111,7 @@ export default function NavHeader(props: Props) { ...@@ -112,7 +111,7 @@ export default function NavHeader(props: Props) {
onTabClick={onChange} onTabClick={onChange}
/> />
<Space size={16} className={styles.btns}> <Space size={16} className={styles.btns}>
<Button type="primary" className={styles.btn1} onClick={onPublish}> <Button type='primary' className={styles.btn1} onClick={onPublish}>
+ 发布需求 + 发布需求
</Button> </Button>
<Button className={styles.btn2} onClick={onJoin}> <Button className={styles.btn2} onClick={onJoin}>
...@@ -125,33 +124,25 @@ export default function NavHeader(props: Props) { ...@@ -125,33 +124,25 @@ export default function NavHeader(props: Props) {
menu={{ menu={{
items: [ items: [
{ {
key: "2", key: '2',
label: ( label: (
<div <div onClick={() => router.push('/personalCenter/servicesOrders')}>
onClick={() =>
router.push("/personalCenter/servicesOrders")
}
>
我的订单 我的订单
</div> </div>
), ),
}, },
{ key: "1", label: <div onClick={onLogout}>退出登录</div> }, { key: '1', label: <div onClick={onLogout}>退出登录</div> },
], ],
}} }}
> >
<Avatar <Avatar size={36} style={{ background: '#bdbdbd' }} src={userInfo.userImg}></Avatar>
size={36}
style={{ background: "#bdbdbd" }}
src={userInfo.userImg}
></Avatar>
</Dropdown> </Dropdown>
</div> </div>
) : ( ) : (
<Button <Button
type="text" type='text'
onClick={() => setOpenLoginModal(true)} onClick={() => setOpenLoginModal(true)}
style={{ fontWeight: "bold", fontSize: 16 }} style={{ fontWeight: 'bold', fontSize: 16 }}
> >
登录 登录
</Button> </Button>
......
components/NavHeader/joinModal/api/index.ts
import request, { Response } from "~/api/request" import request, { Response } from '~/api/request';
export interface ListTagResp { export interface ListTagResp {
id: number; id: number;
...@@ -11,6 +11,6 @@ export interface ListTagResp { ...@@ -11,6 +11,6 @@ export interface ListTagResp {
export default { export default {
//加盟标签列表 //加盟标签列表
listTag: (): Promise<Response<Array<ListTagResp>>> => { listTag: (): Promise<Response<Array<ListTagResp>>> => {
return request('/userapp/cooperation/listTag') return request('/userapp/cooperation/listTag');
} },
} };
\ No newline at end of file
components/NavHeader/joinModal/index.tsx
import { Col, Modal, Row } from "antd"; import { Col, Modal, Row } from 'antd';
import Image from "next/image"; import Image from 'next/image';
import styles from "./index.module.scss"; import styles from './index.module.scss';
import img from "./assets/img.png"; import img from './assets/img.png';
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from 'react';
import api, { ListTagResp } from "./api"; import api, { ListTagResp } from './api';
import { useRouter } from "next/router"; import { useRouter } from 'next/router';
import { UserContext } from "~/lib/userProvider"; import { UserContext } from '~/lib/userProvider';
const imgs = [ 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"), 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 = { type Props = {
...@@ -37,15 +37,15 @@ export default function JoinModal(props: Props) { ...@@ -37,15 +37,15 @@ export default function JoinModal(props: Props) {
const onClickTag = (item: ListTagResp) => { const onClickTag = (item: ListTagResp) => {
if (userInfo!.companyAuthStatus) { if (userInfo!.companyAuthStatus) {
router.replace("/JoinPolicy?tagId=" + item.id); router.replace('/JoinPolicy?tagId=' + item.id);
props.onCancel && props.onCancel(); props.onCancel && props.onCancel();
} else { } else {
router.push("/certification"); router.push('/certification');
} }
}; };
return ( return (
<Modal <Modal
title="申请合作加盟" title='申请合作加盟'
open={props.open} open={props.open}
onOk={props.onOk} onOk={props.onOk}
onCancel={props.onCancel} onCancel={props.onCancel}
...@@ -53,23 +53,23 @@ export default function JoinModal(props: Props) { ...@@ -53,23 +53,23 @@ export default function JoinModal(props: Props) {
width={460} width={460}
footer={null} footer={null}
> >
<Row style={{rowGap: 29, paddingTop: 21, paddingBottom: 21}}> <Row style={{ rowGap: 29, paddingTop: 21, paddingBottom: 21 }}>
{tagList.map((item, i) => { {tagList.map((item, i) => {
return ( return (
<Col <Col
key={item.id} key={item.id}
span={8} span={8}
style={{ style={{
cursor: "pointer", cursor: 'pointer',
padding: 0, padding: 0,
textAlign: "center", textAlign: 'center',
}} }}
onClick={() => onClickTag(item)} onClick={() => onClickTag(item)}
> >
<Image src={imgs[i]} width={64} height={64} alt=""></Image> <Image src={imgs[i]} width={64} height={64} alt=''></Image>
<div className={styles.identityBtn}> <div className={styles.identityBtn}>
{item.tagName} {item.tagName}
{">"} {'>'}
</div> </div>
</Col> </Col>
); );
......
components/NavHeader/publishModal/api/index.ts
import request, { Response } from "~/api/request" import request, { Response } from '~/api/request';
export interface TypeResp { export interface TypeResp {
id: number; id: number;
...@@ -18,15 +18,15 @@ export default { ...@@ -18,15 +18,15 @@ export default {
* 需求类型 * 需求类型
* @returns * @returns
*/ */
listType(): Promise<Response<Array<TypeResp>>>{ listType(): Promise<Response<Array<TypeResp>>> {
return request('/release/requirements/listType') return request('/release/requirements/listType');
}, },
/** /**
* 需求发布 * 需求发布
* @param params * @param params
* @returns * @returns
*/ */
publish(params: PublishParams): Promise<Response<any>>{ publish(params: PublishParams): Promise<Response<any>> {
return request('/release/requirements/publish', 'post', params); return request('/release/requirements/publish', 'post', params);
} },
} };
\ No newline at end of file
components/NavHeader/publishModal/index.tsx
import { Button, Form, Input, Modal, Select } from "antd"; import { Button, Form, Input, Modal, Select } from 'antd';
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from 'react';
import { CommonContext } from "~/lib/commonProvider"; import { CommonContext } from '~/lib/commonProvider';
import { useGeolocation } from "~/lib/hooks"; import { useGeolocation } from '~/lib/hooks';
import api, { PublishParams, TypeResp } from "./api"; import api, { PublishParams, TypeResp } from './api';
import styles from "./index.module.scss"; import styles from './index.module.scss';
import {phoneNumber} from '~/lib/validateUtils' import { phoneNumber } from '~/lib/validateUtils';
type Props = { type Props = {
open?: boolean; open?: boolean;
...@@ -14,15 +14,14 @@ type Props = { ...@@ -14,15 +14,14 @@ type Props = {
export default function PublishModal(props: Props) { export default function PublishModal(props: Props) {
const [types, setTypes] = useState<Array<TypeResp>>([]); //需求类型 const [types, setTypes] = useState<Array<TypeResp>>([]); //需求类型
const [params, setParams] = useState<PublishParams>({ const [params, setParams] = useState<PublishParams>({
publishName: "", publishName: '',
publishPhone: -1, publishPhone: -1,
requireDescription: "", requireDescription: '',
requirementTypeId: -1, requirementTypeId: -1,
}); });
const [form] = Form.useForm(); const [form] = Form.useForm();
const position = useGeolocation(); const position = useGeolocation();
const { reloadRequirements, setReloadRequirements } = const { reloadRequirements, setReloadRequirements } = useContext(CommonContext);
useContext(CommonContext);
useEffect(() => { useEffect(() => {
api.listType().then((res) => { api.listType().then((res) => {
...@@ -31,18 +30,18 @@ export default function PublishModal(props: Props) { ...@@ -31,18 +30,18 @@ export default function PublishModal(props: Props) {
}, []); }, []);
const onFinish = (values: any) => { const onFinish = (values: any) => {
console.log("Success:", values); console.log('Success:', values);
values.publishPhone = Number(values.publishPhone); values.publishPhone = Number(values.publishPhone);
api api
.publish({ .publish({
...params, ...params,
...values, ...values,
provinceCode: position?.address?.addressComponent?.adcode provinceCode: position?.address?.addressComponent?.adcode,
}) })
.then((res) => { .then((res) => {
if (res.code === "200") { if (res.code === '200') {
props.onCancel && props.onCancel(); props.onCancel && props.onCancel();
window.messageApi.success("发布成功"); window.messageApi.success('发布成功');
setReloadRequirements(!reloadRequirements); setReloadRequirements(!reloadRequirements);
setTimeout(() => { setTimeout(() => {
form.resetFields(); form.resetFields();
...@@ -52,7 +51,7 @@ export default function PublishModal(props: Props) { ...@@ -52,7 +51,7 @@ export default function PublishModal(props: Props) {
}; };
const onFinishFailed = (errorInfo: any) => { const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo); console.log('Failed:', errorInfo);
}; };
return ( return (
...@@ -60,68 +59,60 @@ export default function PublishModal(props: Props) { ...@@ -60,68 +59,60 @@ export default function PublishModal(props: Props) {
open={props.open} open={props.open}
onOk={props.onOk} onOk={props.onOk}
onCancel={props.onCancel} onCancel={props.onCancel}
title="需求发布" title='需求发布'
className={styles.modal} className={styles.modal}
width={460} width={460}
footer={null} footer={null}
> >
<Form <Form
labelCol={{ span: 5 }} labelCol={{ span: 5 }}
labelAlign="left" labelAlign='left'
onFinish={onFinish} onFinish={onFinish}
onFinishFailed={onFinishFailed} onFinishFailed={onFinishFailed}
form={form} form={form}
> >
<Form.Item <Form.Item
label="姓名" label='姓名'
name="publishName" name='publishName'
rules={[{ required: true, message: "请输入姓名！" }]} rules={[{ required: true, message: '请输入姓名！' }]}
> >
<Input placeholder="输入姓名"></Input> <Input placeholder='输入姓名'></Input>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="手机号" label='手机号'
name="publishPhone" name='publishPhone'
rules={[ rules={[
{ required: true, message: "请输入手机号！" }, { required: true, message: '请输入手机号！' },
{ {
pattern: /^1\d{10}$/, pattern: /^1\d{10}$/,
message: "很输入11位手机号", message: '很输入11位手机号',
}, },
]} ]}
> >
<Input <Input onInput={phoneNumber} maxLength={11} allowClear placeholder='输入手机号'></Input>
onInput={phoneNumber}
maxLength={11}
allowClear
placeholder="输入手机号"
></Input>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="需求类型" label='需求类型'
name="requirementTypeId" name='requirementTypeId'
rules={[{ required: true, message: "请选择需求类型！" }]} rules={[{ required: true, message: '请选择需求类型！' }]}
> >
<Select <Select
placeholder="选择需求类型" placeholder='选择需求类型'
options={types} options={types}
fieldNames={{ label: "typeName", value: "id" }} fieldNames={{ label: 'typeName', value: 'id' }}
></Select> ></Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="requireDescription" name='requireDescription'
rules={[{ required: true, message: "请输入需求描述！" }]} rules={[{ required: true, message: '请输入需求描述！' }]}
> >
<Input.TextArea <Input.TextArea placeholder='项目需求描述' style={{ height: 162 }}></Input.TextArea>
placeholder="项目需求描述"
style={{ height: 162 }}
></Input.TextArea>
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button <Button
type="primary" type='primary'
htmlType="submit" htmlType='submit'
style={{ width: "100%", height: 40, borderRadius: 0 }} style={{ width: '100%', height: 40, borderRadius: 0 }}
> >
立即发布 立即发布
</Button> </Button>
......
components/brandSelectSearch/index.tsx
...@@ -56,17 +56,16 @@ const BrandSelectSearch: React.FC<propType> = (props) => { ...@@ -56,17 +56,16 @@ const BrandSelectSearch: React.FC<propType> = (props) => {
: _options.map(function (i) { : _options.map(function (i) {
var _pinyin, _pinyin$at, _pinyin$at$at; var _pinyin, _pinyin$at, _pinyin$at$at;
return (_pinyin = pinyin(i.label, { return (_pinyin = pinyin(i.label, {
toneType: "none", toneType: 'none',
type: "array", type: 'array',
})) === null || _pinyin === void 0 })) === null || _pinyin === void 0
? void 0 ? void 0
: (_pinyin$at = _pinyin.at(0)) === null || _pinyin$at === void 0 : (_pinyin$at = _pinyin.at(0)) === null || _pinyin$at === void 0
? void 0 ? void 0
: (_pinyin$at$at = _pinyin$at.at(0)) === null || : (_pinyin$at$at = _pinyin$at.at(0)) === null || _pinyin$at$at === void 0
_pinyin$at$at === void 0
? void 0 ? void 0
: _pinyin$at$at.toUpperCase(); : _pinyin$at$at.toUpperCase();
}) }),
); );
// 获取开头字母列表（去重） // 获取开头字母列表（去重）
const arr = [ const arr = [
......
components/contentBox/index.tsx
import React from "react"; import React from 'react';
import { Box } from "./styled"; import { Box } from './styled';
import Left from "./left"; import Left from './left';
import Right from "./right"; import Right from './right';
import { BoxProps } from "./interface"; import { BoxProps } from './interface';
export default function ContentBox(props: BoxProps) { export default function ContentBox(props: BoxProps) {
return ( return (
<Box> <Box>
......
components/contentBox/interface.ts
...@@ -8,7 +8,7 @@ export interface DomType { ...@@ -8,7 +8,7 @@ export interface DomType {
export interface WaterfallType { export interface WaterfallType {
columns: { columns: {
noFor?: boolean; noFor?: boolean;
type?: string, type?: string;
element: JSX.Element; element: JSX.Element;
}[]; }[];
pagination?: JSX.Element; pagination?: JSX.Element;
......
components/contentBox/left/index.tsx
import React, { useEffect } from "react"; import React, { useEffect } from 'react';
import { Empty } from "antd"; import { Empty } from 'antd';
import { LeftBox , Box , WaterfallBox } from "./styled"; import { LeftBox, Box, WaterfallBox } from './styled';
import { leftBoxProps } from "../interface"; import { leftBoxProps } from '../interface';
export default function Left(props: leftBoxProps) { export default function Left(props: leftBoxProps) {
const { boxIndex, leftRenderDom, leftcontentstyle, leftWaterfallDom } = props; const { boxIndex, leftRenderDom, leftcontentstyle, leftWaterfallDom } = props;
...@@ -29,29 +29,33 @@ export default function Left(props: leftBoxProps) { ...@@ -29,29 +29,33 @@ export default function Left(props: leftBoxProps) {
} }
return null; return null;
})} })}
{leftWaterfallDom?.columns.length ? (
<WaterfallBox index={boxIndex} leftcontentstyle={leftcontentstyle}>
{ {
leftWaterfallDom?.columns.length ? <WaterfallBox index={boxIndex} leftcontentstyle={leftcontentstyle}> <div className='left-columns'>
{ <div className="left-columns">
{leftWaterfallDom?.columns.map((item) => { {leftWaterfallDom?.columns.map((item) => {
if (!item.noFor && item.type === "left") { if (!item.noFor && item.type === 'left') {
return item.element return item.element;
} }
return null return null;
})} })}
</div>} </div>
{ <div className="right-columns"> }
{
<div className='right-columns'>
{leftWaterfallDom?.columns.map((item) => { {leftWaterfallDom?.columns.map((item) => {
if (!item.noFor && item.type === "right") { if (!item.noFor && item.type === 'right') {
return item.element return item.element;
} }
return null return null;
})} })}
</div>} </div>
</WaterfallBox> : null
} }
</WaterfallBox>
) : null}
{leftRenderDom?.pagination ? leftRenderDom?.pagination : null} {leftRenderDom?.pagination ? leftRenderDom?.pagination : null}
{!leftRenderDom?.columns.length && !leftWaterfallDom?.columns.length? ( {!leftRenderDom?.columns.length && !leftWaterfallDom?.columns.length ? (
<Empty description={"暂无数据"} /> <Empty description={'暂无数据'} />
) : null} ) : null}
</LeftBox> </LeftBox>
); );
......
components/contentBox/left/styled.tsx
import styled from "styled-components" import styled from 'styled-components';
export interface BoxProps { export interface BoxProps {
index:number, index: number;
leftcontentstyle?:{ leftcontentstyle?: {
width?:string, width?: string;
margin?:{ margin?: {
top:number | string, top: number | string;
right:number | string, right: number | string;
bottom:number | string, bottom: number | string;
left:number | string left: number | string;
} };
} };
} }
export const LeftBox = styled.div` export const LeftBox = styled.div`
box-sizing: border-box; box-sizing: border-box;
` `;
export const Box = styled.div<BoxProps>` export const Box = styled.div<BoxProps>`
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: ${props => props.leftcontentstyle?.width ? props.leftcontentstyle?.width : "790px"}; width: ${(props) => (props.leftcontentstyle?.width ? props.leftcontentstyle?.width : '790px')};
.item{ .item {
// 每个元素都要设置右边距margin-right（每个元素的左右间隙） // 每个元素都要设置右边距margin-right（每个元素的左右间隙）
// 同时设置下边距margin-bottom（每个元素的上下间隙） // 同时设置下边距margin-bottom（每个元素的上下间隙）
/* margin: 0 24px 15px 0; */ /* margin: 0 24px 15px 0; */
margin: ${props => props.leftcontentstyle?.margin ? (`${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`) : "0 24px 15px 0"};; margin: ${(props) =>
width: calc((100% - ${props => props.index - 1} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index}); props.leftcontentstyle?.margin
? `${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`
: '0 24px 15px 0'};
width: calc(
(
100% - ${(props) => props.index - 1} *
${(props) =>
props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}
) / ${(props) => props.index}
);
// 这里一行显示index个，所以是/index，一行显示几个就除以几 // 这里一行显示index个，所以是/index，一行显示几个就除以几
// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整 // 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
min-width: calc((100% - ${props => props.index - 1} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index}); min-width: calc(
max-width: calc((100% - ${props => props.index - 1} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index}); (
100% - ${(props) => props.index - 1} *
${(props) =>
props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}
) / ${(props) => props.index}
);
max-width: calc(
(
100% - ${(props) => props.index - 1} *
${(props) =>
props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}
) / ${(props) => props.index}
);
// 每行最右侧的那个不设置右外边距 // 每行最右侧的那个不设置右外边距
&:nth-child(${props => props.index}n + ${props => props.index}) { &:nth-child(${(props) => props.index}n + ${(props) => props.index}) {
margin-right: 0; margin-right: 0;
} }
} }
` `;
export const WaterfallBox = styled.div<BoxProps>` export const WaterfallBox = styled.div<BoxProps>`
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
width: ${props => props.leftcontentstyle?.width ? props.leftcontentstyle?.width : "790px"}; width: ${(props) => (props.leftcontentstyle?.width ? props.leftcontentstyle?.width : '790px')};
.item{ .item {
// 每个元素都要设置右边距margin-right（每个元素的左右间隙） // 每个元素都要设置右边距margin-right（每个元素的左右间隙）
// 同时设置下边距margin-bottom（每个元素的上下间隙） // 同时设置下边距margin-bottom（每个元素的上下间隙）
/* margin: 0 24px 15px 0; */ /* margin: 0 24px 15px 0; */
margin: ${props => props.leftcontentstyle?.margin ? (`${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`) : "0 24px 15px 0"};; margin: ${(props) =>
/* width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index}); props.leftcontentstyle?.margin
? `${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`
: '0 24px 15px 0'};
/* width: calc(( 100% - ${(props) => props.index} * ${(props) =>
props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}) / ${(
props,
) => props.index});
// 这里一行显示index个，所以是/index，一行显示几个就除以几 // 这里一行显示index个，所以是/index，一行显示几个就除以几
// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整 // 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
min-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index}); min-width: calc(( 100% - ${(props) => props.index} * ${(props) =>
max-width: calc(( 100% - ${props => props.index} * ${props => props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : "24px" }) / ${props => props.index}); */ props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}) / ${(
props,
) => props.index});
max-width: calc(( 100% - ${(props) => props.index} * ${(props) =>
props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}) / ${(
props,
) => props.index}); */
} }
.left-columns{ .left-columns {
} }
.right-columns{ .right-columns {
.item{ .item {
margin-right: 0; margin-right: 0;
} }
} }
` `;
components/contentBox/right/index.tsx
import React from 'react'; import React from 'react';
import { Box } from './styled'; import { Box } from './styled';
import {rightBoxProps} from '../interface'; import { rightBoxProps } from '../interface';
export default function Right(props:rightBoxProps) { export default function Right(props: rightBoxProps) {
const { rightRenderDom } = props const { rightRenderDom } = props;
return ( return <Box>{rightRenderDom.columns.map((item) => item.element)}</Box>;
<Box>
{
rightRenderDom.columns.map((item)=>item.element)
}
</Box>
)
} }
components/contentBox/right/styled.tsx
import styled from "styled-components"; import styled from 'styled-components';
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
......
components/contentBox/styled.tsx
import styled from "styled-components" import styled from 'styled-components';
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
display:flex; display: flex;
justify-content: space-between; justify-content: space-between;
width:100%; width: 100%;
` `;
\ No newline at end of file
components/filter/api/index.ts
import request, { Response } from '~/api/request' import request, { Response } from '~/api/request';
export interface FilterOptionResp { export interface FilterOptionResp {
id: number id: number;
name?: string name?: string;
appName?: string appName?: string;
} }
export interface RegionResp { export interface RegionResp {
childInfo: RegionResp[] | null childInfo: RegionResp[] | null;
id: number id: number;
level: number level: number;
name: string name: string;
pid: number pid: number;
} }
export interface InfoList { export interface InfoList {
id: number id: number;
directoryId: number directoryId: number;
name: string name: string;
icon: string icon: string;
} }
export interface TypesResp { export interface TypesResp {
directoryId: number directoryId: number;
name: string name: string;
categoriesInfoListDTO: InfoList[] categoriesInfoListDTO: InfoList[];
} }
export default { export default {
category: (): Promise<Response<Array<FilterOptionResp>>> => { category: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/category') return request('/pms/webProductMall/category');
}, },
categoryId: (): Promise<Response<Array<FilterOptionResp>>> => { categoryId: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/category') return request('/pms/webDevice/category');
}, },
brand: (): Promise<Response<Array<FilterOptionResp>>> => { brand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/brand') return request('/pms/webDevice/brand');
}, },
model: (): Promise<Response<Array<FilterOptionResp>>> => { model: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/model') return request('/pms/webDevice/model');
}, },
part: (): Promise<Response<Array<FilterOptionResp>>> => { part: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/parts') return request('/pms/webProductMall/parts');
}, },
quality: (): Promise<Response<Array<FilterOptionResp>>> => { quality: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/quality') return request('/pms/webProductMall/quality');
}, },
region: (): Promise<Response<Array<RegionResp>>> => { region: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/getSecondDistrictInfo') return request('/pms/webDevice/getSecondDistrictInfo');
}, },
industry: (): Promise<Response<Array<RegionResp>>> => { industry: (): Promise<Response<Array<RegionResp>>> => {
return request('/release/work/listAllIndustry') return request('/release/work/listAllIndustry');
}, },
appType: (): Promise<Response<Array<RegionResp>>> => { appType: (): Promise<Response<Array<RegionResp>>> => {
return request('/release/work/listAllAppType') return request('/release/work/listAllAppType');
}, },
deviceBrand: (): Promise<Response<Array<RegionResp>>> => { deviceBrand: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/deviceBrand') return request('/pms/webDevice/deviceBrand');
}, },
deviceModel: (): Promise<Response<Array<RegionResp>>> => { deviceModel: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/deviceModel') return request('/pms/webDevice/deviceModel');
}, },
infoByType: (params: { infoByType: (params: { type: number }): Promise<Response<Array<TypesResp>>> => {
type: number return request('/pms/classify/queryCategoryInfoByType', 'get', params);
}): Promise<Response<Array<TypesResp>>> => {
return request('/pms/classify/queryCategoryInfoByType', 'get', params)
}, },
} };
components/filter/compoents/regionItem/index.tsx
import { Space, Select } from 'antd' import { Space, Select } from 'antd';
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react';
import styles from '../../index.module.scss' import styles from '../../index.module.scss';
import api, { RegionResp } from '../../api' import api, { RegionResp } from '../../api';
type Props = { type Props = {
onChange: (item: RegionResp) => void onChange: (item: RegionResp) => void;
} };
export default function RegionItem(props: Props) { export default function RegionItem(props: Props) {
const [provinceList, setProvinceList] = useState<RegionResp[]>([]) const [provinceList, setProvinceList] = useState<RegionResp[]>([]);
const [cityList, setCityList] = useState<RegionResp[]>([]) const [cityList, setCityList] = useState<RegionResp[]>([]);
const [selectCity, setSelectCity] = useState<number>() const [selectCity, setSelectCity] = useState<number>();
useEffect(() => { useEffect(() => {
api.region().then((res) => { api.region().then((res) => {
setProvinceList(res?.result || []) setProvinceList(res?.result || []);
}) });
}, []) }, []);
const onProvinceChange = (value: number, item: any) => { const onProvinceChange = (value: number, item: any) => {
console.log('省', value, item) console.log('省', value, item);
setCityList(item.childInfo || []) setCityList(item.childInfo || []);
setSelectCity(undefined) setSelectCity(undefined);
props.onChange(item) props.onChange(item);
} };
const onCityChange = (value: number, item: any) => { const onCityChange = (value: number, item: any) => {
console.log('市', value) console.log('市', value);
setSelectCity(value) setSelectCity(value);
props.onChange(item) props.onChange(item);
} };
return ( return (
<div className={styles.filterItem}> <div className={styles.filterItem}>
<div className={styles.filterItemTitle}>地域：</div> <div className={styles.filterItemTitle}>地域：</div>
...@@ -37,14 +37,14 @@ export default function RegionItem(props: Props) { ...@@ -37,14 +37,14 @@ export default function RegionItem(props: Props) {
<Select <Select
bordered={false} bordered={false}
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
placeholder="选择省" placeholder='选择省'
onChange={onProvinceChange} onChange={onProvinceChange}
options={provinceList.map((item) => { options={provinceList.map((item) => {
return { return {
...item, ...item,
value: item.id, value: item.id,
label: item.name, label: item.name,
} };
})} })}
/> />
{/* <Select {/* <Select
...@@ -64,5 +64,5 @@ export default function RegionItem(props: Props) { ...@@ -64,5 +64,5 @@ export default function RegionItem(props: Props) {
</Space> </Space>
</div> </div>
</div> </div>
) );
} }
components/filter/compoents/resultItem/index.tsx
import { Space, Tag } from 'antd' import { Space, Tag } from 'antd';
import { FilterResult } from '../..' import { FilterResult } from '../..';
import styles from '../../index.module.scss' import styles from '../../index.module.scss';
import { InfoList } from '../../api' import { InfoList } from '../../api';
type Props = { type Props = {
data: FilterResult data: FilterResult;
onDel: (key: string | number) => void onDel: (key: string | number) => void;
} };
export default function ResultItem({ data, onDel }: Props) { export default function ResultItem({ data, onDel }: Props) {
return ( return (
<div className={styles.filterItem}> <div className={styles.filterItem}>
...@@ -31,7 +31,7 @@ export default function ResultItem({ data, onDel }: Props) { ...@@ -31,7 +31,7 @@ export default function ResultItem({ data, onDel }: Props) {
<Tag <Tag
closable closable
onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => { onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
onDel('provinceId') onDel('provinceId');
}} }}
key={data.provinceId.id} key={data.provinceId.id}
> >
...@@ -44,16 +44,16 @@ export default function ResultItem({ data, onDel }: Props) { ...@@ -44,16 +44,16 @@ export default function ResultItem({ data, onDel }: Props) {
<Tag <Tag
closable closable
onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => { onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
onDel(item.id) onDel(item.id);
}} }}
key={item.name} key={item.name}
> >
{item?.name} {item?.name}
</Tag> </Tag>
) );
})} })}
</Space> </Space>
</div> </div>
</div> </div>
) );
} }
components/filter/compoents/typeInfo/index.tsx
import { Space, Button, Select, Collapse } from 'antd' import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss' import styles from '../../index.module.scss';
import api, { FilterOptionResp, InfoList } from '../../api' import api, { FilterOptionResp, InfoList } from '../../api';
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react';
type Props = { type Props = {
onChange: (id: FilterOptionResp) => void onChange: (id: FilterOptionResp) => void;
typeName: string typeName: string;
dataValue: InfoList[] dataValue: InfoList[];
} };
export default function CategoryItem(props: Props) { export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]) const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => { useEffect(() => {
setData(props.dataValue || []) setData(props.dataValue || []);
}, []) }, []);
const onClick = (item: FilterOptionResp) => { const onClick = (item: FilterOptionResp) => {
props.onChange({ props.onChange({
id: item.id, id: item.id,
name: `${props.typeName}：` + item.name, name: `${props.typeName}：` + item.name,
}) });
} };
const showCount = 9 //展示数量 const showCount = 9; //展示数量
return ( return (
<div className={styles.filterItem}> <div className={styles.filterItem}>
<div className={styles.filterItemTitle}>{props.typeName}：</div> <div className={styles.filterItemTitle}>{props.typeName}：</div>
<div <div className={`${styles.filterItemMain} ${data.length <= showCount && styles.disabled}`}>
className={`${styles.filterItemMain} ${ <Collapse ghost collapsible='icon' expandIconPosition='end' style={{ width: '100%' }}>
data.length <= showCount && styles.disabled
}`}
>
<Collapse
ghost
collapsible="icon"
expandIconPosition="end"
style={{ width: '100%' }}
>
<Collapse.Panel <Collapse.Panel
header={ header={
<Space size={[40, 0]}> <Space size={[40, 0]}>
{data.slice(0, showCount).map((item) => { {data.slice(0, showCount).map((item) => {
return ( return (
<Button <Button type='link' key={item.id} onClick={(e) => onClick(item)}>
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name} {item.name}
</Button> </Button>
) );
})} })}
</Space> </Space>
} }
key="1" key='1'
> >
<Space size={40}> <Space size={40}>
{data.slice(showCount).map((item) => { {data.slice(showCount).map((item) => {
return ( return (
<Button <Button type='link' key={item.id} onClick={(e) => onClick(item)}>
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name} {item.name}
</Button> </Button>
) );
})} })}
</Space> </Space>
</Collapse.Panel> </Collapse.Panel>
</Collapse> </Collapse>
</div> </div>
</div> </div>
) );
} }
components/filter/index.tsx
import { FilterOptionResp, RegionResp } from './api';
import { FilterOptionResp, RegionResp } from './api' import ResultItem from './compoents/resultItem';
import ResultItem from './compoents/resultItem' import RegionItem from './compoents/regionItem';
import RegionItem from './compoents/regionItem' import styles from './index.module.scss';
import styles from './index.module.scss' import React, { useEffect, useState, forwardRef, useImperativeHandle, Ref } from 'react';
import React, { import { useRouter } from 'next/router';
useEffect, import TypeInfo from './compoents/typeInfo';
useState, import api, { TypesResp, InfoList } from './api';
forwardRef,
useImperativeHandle,
Ref,
} from 'react'
import { useRouter } from 'next/router'
import TypeInfo from './compoents/typeInfo'
import api, { TypesResp, InfoList } from './api'
export type AdapterResult = { export type AdapterResult = {
categoryId?: any[] categoryId?: any[];
provinceId?: number provinceId?: number;
} };
export type FilterResult = { export type FilterResult = {
categoryId?: InfoList[] categoryId?: InfoList[];
provinceId?: FilterOptionResp provinceId?: FilterOptionResp;
} };
type Props = { type Props = {
types: string[] //需要包含的筛选条件项 types: string[]; //需要包含的筛选条件项
showResultItem: Boolean //显示结果栏 showResultItem: Boolean; //显示结果栏
onChange: ( onChange: (
filterResult: FilterResult, filterResult: FilterResult,
adapterFilterResult: AdapterResult //适配器,直接用于接口请求 adapterFilterResult: AdapterResult, //适配器,直接用于接口请求
) => void //筛选条件更改事件 ) => void; //筛选条件更改事件
} };
const Filter = (props: Props, ref: Ref<any>) => { const Filter = (props: Props, ref: Ref<any>) => {
const router = useRouter() const router = useRouter();
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
clearRouter: clearRouter, clearRouter: clearRouter,
})) }));
const [result, setResult] = useState<FilterResult>({}) const [result, setResult] = useState<FilterResult>({});
const onChange = (item: FilterOptionResp, type: string) => { const onChange = (item: FilterOptionResp, type: string) => {
clearRouter() clearRouter();
let data: { [key: string]: FilterOptionResp[] | FilterOptionResp } = {} let data: { [key: string]: FilterOptionResp[] | FilterOptionResp } = {};
if (type === 'categoryId') { if (type === 'categoryId') {
if (result.categoryId) { if (result.categoryId) {
data[type] = [...result.categoryId, item] data[type] = [...result.categoryId, item];
const map = new Map() const map = new Map();
//去重 //去重
data[type] = (data[type] as InfoList[]).filter( data[type] = (data[type] as InfoList[]).filter((v) => !map.has(v.id) && map.set(v.id, 1));
(v) => !map.has(v.id) && map.set(v.id, 1)
)
} else { } else {
data[type] = [item] data[type] = [item];
} }
} else { } else {
data[type] = item data[type] = item;
}
setResult({ ...result, ...data })
} }
setResult({ ...result, ...data });
};
useEffect(() => { useEffect(() => {
props.onChange(result, { props.onChange(result, {
categoryId: result.categoryId, categoryId: result.categoryId,
provinceId: result.provinceId?.id, provinceId: result.provinceId?.id,
}) });
}, [result]) }, [result]);
const clearRouter = () => { const clearRouter = () => {
if (Object.keys(router.query).length) { if (Object.keys(router.query).length) {
router.query = {} router.query = {};
router.replace(router.pathname) router.replace(router.pathname);
}
} }
};
const onDel = (key: string | number) => { const onDel = (key: string | number) => {
clearRouter() clearRouter();
console.log(key) console.log(key);
if (Object.prototype.toString.call(key) === '[object String]') { if (Object.prototype.toString.call(key) === '[object String]') {
//@ts-ignore //@ts-ignore
delete result[key] delete result[key];
} else { } else {
if (result.categoryId?.length! === 1) { if (result.categoryId?.length! === 1) {
result.categoryId = undefined result.categoryId = undefined;
} else if (result.categoryId?.length! >= 2) { } else if (result.categoryId?.length! >= 2) {
result.categoryId?.map((item, index) => { result.categoryId?.map((item, index) => {
if (item.id === key) { if (item.id === key) {
result.categoryId?.splice(index, 1) result.categoryId?.splice(index, 1);
} }
}) });
} }
} }
setResult({ setResult({
...result, ...result,
}) });
} };
const routerList = [ const routerList = ['/jobServices', '/equipmentLeasing', '/flyingHandService', '/mall'];
'/jobServices', const [typeInfo, setTypeInfo] = useState<Array<TypesResp> | null>();
'/equipmentLeasing',
'/flyingHandService',
'/mall',
]
const [typeInfo, setTypeInfo] = useState<Array<TypesResp> | null>()
useEffect(() => { useEffect(() => {
if (routerList.indexOf(router.pathname) > -1) { if (routerList.indexOf(router.pathname) > -1) {
;(async () => { (async () => {
const res = await api.infoByType({ const res = await api.infoByType({
type: routerList.indexOf(router.pathname) + 1, type: routerList.indexOf(router.pathname) + 1,
}) });
setTypeInfo(res.result) setTypeInfo(res.result);
//首页跳转自定筛选选中 //首页跳转自定筛选选中
let queryVal = JSON.parse(JSON.stringify(router.query)) let queryVal = JSON.parse(JSON.stringify(router.query));
if (Object.keys(router.query).length) { if (Object.keys(router.query).length) {
//获取类型的id //获取类型的id
const idOfType = res.result const idOfType = res.result
?.map((item) => item.categoriesInfoListDTO) ?.map((item) => item.categoriesInfoListDTO)
.flat() .flat()
.filter( .filter((item) => item && item.id === Number(queryVal['categoryId']))[0]?.directoryId;
(item) => item && item.id === Number(queryVal['categoryId'])
)[0]?.directoryId
//获取类型的名称然后拼接 //获取类型的名称然后拼接
const TypeName = res.result?.filter( const TypeName = res.result?.filter((item) => item.directoryId === idOfType)[0]?.name;
(item) => item.directoryId === idOfType
)[0]?.name
onChange( onChange(
{ {
id: Number(queryVal['categoryId']), id: Number(queryVal['categoryId']),
name: `${ name: `${TypeName ? TypeName + '：' + queryVal.name : queryVal.name}`,
TypeName ? TypeName + '：' + queryVal.name : queryVal.name
}`,
}, },
'categoryId' 'categoryId',
) );
} }
})() })();
} }
}, [router]) }, [router]);
return ( return (
<> <>
...@@ -160,17 +139,13 @@ const Filter = (props: Props, ref: Ref<any>) => { ...@@ -160,17 +139,13 @@ const Filter = (props: Props, ref: Ref<any>) => {
key={item.directoryId} key={item.directoryId}
typeName={item.name} typeName={item.name}
dataValue={item.categoriesInfoListDTO} dataValue={item.categoriesInfoListDTO}
onChange={(item: FilterOptionResp) => onChange={(item: FilterOptionResp) => onChange(item, 'categoryId')}
onChange(item, 'categoryId')
}
></TypeInfo> ></TypeInfo>
))} ))}
{props.showResultItem && ( {props.showResultItem && <ResultItem data={result} onDel={onDel}></ResultItem>}
<ResultItem data={result} onDel={onDel}></ResultItem>
)}
</div> </div>
</> </>
) );
} };
export default forwardRef(Filter) export default forwardRef(Filter);
components/footer/index.tsx
import styles from "./index.module.scss"; import styles from './index.module.scss';
import { Image } from "antd"; import { Image } from 'antd';
import errImg from "~/assets/errImg"; import errImg from '~/assets/errImg';
import img_mmc from './assets/mmc.png'; import img_mmc from './assets/mmc.png';
const qrcodeList = [ const qrcodeList = [
{ {
img: "/assets/mmc.png", img: '/assets/mmc.png',
title: "科比特官网", title: '科比特官网',
url: "http://www.mmcuav.cn/", url: 'http://www.mmcuav.cn/',
}, },
{ {
img: "/assets/fuwuhao.png", img: '/assets/fuwuhao.png',
title: "云享飞服务号", title: '云享飞服务号',
}, },
{ {
img: "/assets/xiaochengxu.png", img: '/assets/xiaochengxu.png',
title: "云享飞小程序", title: '云享飞小程序',
}, },
{ {
img: "/assets/shequn.png", img: '/assets/shequn.png',
title: "官方社群", title: '官方社群',
}, },
]; ];
...@@ -34,17 +34,16 @@ export default function Footer() { ...@@ -34,17 +34,16 @@ export default function Footer() {
<div className={styles.qrcodeItem} key={i}> <div className={styles.qrcodeItem} key={i}>
<Image <Image
style={{ style={{
cursor: item.title === "科比特官网" ? "pointer" : "", cursor: item.title === '科比特官网' ? 'pointer' : '',
}} }}
onClick={() => { onClick={() => {
if (item.title === "科比特官网") if (item.title === '科比特官网') window.location.href = item.url!;
window.location.href = item.url!;
}} }}
alt="" alt=''
className={styles.qrcodeImg} className={styles.qrcodeImg}
src={item.img} src={item.img}
fallback={errImg} fallback={errImg}
preview={item.title !== "科比特官网"} preview={item.title !== '科比特官网'}
></Image> ></Image>
<div className={styles.qrcodeTitle}>{item.title}</div> <div className={styles.qrcodeTitle}>{item.title}</div>
</div> </div>
......
components/layout/index.tsx
import React, { Suspense } from "react"; import React, { Suspense } from 'react';
import { Layout, Space } from "antd"; import { Layout, Space } from 'antd';
import NavHeader from "~/components/NavHeader"; import NavHeader from '~/components/NavHeader';
import FooterView from "~/components/footer"; import FooterView from '~/components/footer';
import {useRouter} from 'next/router' import { useRouter } from 'next/router';
import styles from './index.module.scss'; import styles from './index.module.scss';
const { Header, Footer, Content } = Layout; const { Header, Footer, Content } = Layout;
//底部栏固定定位 //底部栏固定定位
const includesPage = ["/home","/flyingHandService/detail/[id]"] const includesPage = ['/home', '/flyingHandService/detail/[id]'];
const homeStyle: React.CSSProperties = { const homeStyle: React.CSSProperties = {
marginTop:10 marginTop: 10,
} };
const headerStyle: React.CSSProperties = { const headerStyle: React.CSSProperties = {
height: "auto", height: 'auto',
background: "none", background: 'none',
padding: 0, padding: 0,
lineHeight: "1", lineHeight: '1',
position: "relative", position: 'relative',
}; };
const contentStyle: React.CSSProperties = { const contentStyle: React.CSSProperties = {
minHeight: 120, minHeight: 120,
lineHeight: "1", lineHeight: '1',
color: "", color: '',
backgroundColor: "", backgroundColor: '',
width: 1200, width: 1200,
position: "relative", position: 'relative',
margin: "0 auto", margin: '0 auto',
}; };
const footerStyle: React.CSSProperties = { const footerStyle: React.CSSProperties = {
lineHeight: "1", lineHeight: '1',
padding: 0, padding: 0,
position: "relative", position: 'relative',
marginTop: 60, marginTop: 60,
}; };
...@@ -43,18 +43,15 @@ type Props = { ...@@ -43,18 +43,15 @@ type Props = {
layoutStyle?: React.CSSProperties; layoutStyle?: React.CSSProperties;
contentStyle?: React.CSSProperties; contentStyle?: React.CSSProperties;
hideFooter?: boolean; hideFooter?: boolean;
headerStyle?: React.CSSProperties headerStyle?: React.CSSProperties;
}; };
export default function LayoutView(props: Props) { export default function LayoutView(props: Props) {
const router = useRouter() const router = useRouter();
return ( return (
<Space direction="vertical" style={{ minWidth: "100%" }} size={[0, 48]}> <Space direction='vertical' style={{ minWidth: '100%' }} size={[0, 48]}>
<Layout <Layout
style={Object.assign( style={Object.assign({ minHeight: '100vh', backgroundColor: '#F8F8F8' }, props.layoutStyle)}
{ minHeight: "100vh", backgroundColor: "#F8F8F8" },
props.layoutStyle
)}
> >
<Header style={headerStyle}> <Header style={headerStyle}>
<NavHeader style={props.headerStyle} /> <NavHeader style={props.headerStyle} />
......
components/loginModal/index.tsx
import React, { useContext, useEffect, useState } from "react"; import React, { useContext, useEffect, useState } from 'react';
import { Modal, Image } from "antd"; import { Modal, Image } from 'antd';
import api from "~/api"; import api from '~/api';
import { UserContext } from "~/lib/userProvider"; import { UserContext } from '~/lib/userProvider';
import errImg from "~/assets/errImg"; import errImg from '~/assets/errImg';
type Props = { type Props = {
open: boolean; open: boolean;
...@@ -10,8 +10,8 @@ type Props = { ...@@ -10,8 +10,8 @@ type Props = {
}; };
export default function LoginModal(props: Props) { export default function LoginModal(props: Props) {
const [qrCode, setQrCode] = useState(""); const [qrCode, setQrCode] = useState('');
const [randomLoginCode, setRandomLoginCode] = useState(""); const [randomLoginCode, setRandomLoginCode] = useState('');
const { userInfo, setUserInfo } = useContext(UserContext); const { userInfo, setUserInfo } = useContext(UserContext);
const [timeHandle, setTimeHandle] = useState<NodeJS.Timer | null>(null); const [timeHandle, setTimeHandle] = useState<NodeJS.Timer | null>(null);
useEffect(() => { useEffect(() => {
...@@ -28,7 +28,7 @@ export default function LoginModal(props: Props) { ...@@ -28,7 +28,7 @@ export default function LoginModal(props: Props) {
}); });
} */ } */
if (!props.open) { if (!props.open) {
setQrCode(""); setQrCode('');
return; return;
} }
...@@ -43,10 +43,10 @@ export default function LoginModal(props: Props) { ...@@ -43,10 +43,10 @@ export default function LoginModal(props: Props) {
randomLoginCode, randomLoginCode,
}) })
.then((res) => { .then((res) => {
if (res.code == "200") { if (res.code == '200') {
setQrCode("data:image/png;base64," + res.result || ""); setQrCode('data:image/png;base64,' + res.result || '');
} else { } else {
window.messageApi.error("获取登录二维码失败"); window.messageApi.error('获取登录二维码失败');
} }
}); });
} }
...@@ -61,14 +61,14 @@ export default function LoginModal(props: Props) { ...@@ -61,14 +61,14 @@ export default function LoginModal(props: Props) {
randomLoginCode: randomLoginCode, randomLoginCode: randomLoginCode,
}) })
.then((res) => { .then((res) => {
if (res.code === "200") { if (res.code === '200') {
clearInterval(handle); clearInterval(handle);
setTimeHandle(null); setTimeHandle(null);
window.localStorage.setItem("token", res.result.token); window.localStorage.setItem('token', res.result.token);
api.userInfo().then((res) => { api.userInfo().then((res) => {
setUserInfo(res.result); setUserInfo(res.result);
window.messageApi.success("登录成功"); window.messageApi.success('登录成功');
props.onCancel(); props.onCancel();
window.location.reload(); window.location.reload();
}); });
...@@ -87,41 +87,31 @@ export default function LoginModal(props: Props) { ...@@ -87,41 +87,31 @@ export default function LoginModal(props: Props) {
return ( return (
<> <>
<Modal <Modal open={props.open} onCancel={props.onCancel} width={400} footer={null}>
open={props.open}
onCancel={props.onCancel}
width={400}
footer={null}
>
<div <div
style={{ style={{
fontSize: 20, fontSize: 20,
fontFamily: "MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI", fontFamily: 'MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI',
fontWeight: "bold", fontWeight: 'bold',
color: "#000", color: '#000',
marginTop: 17, marginTop: 17,
marginBottom: 48, marginBottom: 48,
textAlign: "center", textAlign: 'center',
}} }}
> >
欢迎来到云享飞 欢迎来到云享飞
</div> </div>
<div id="login_container" style={{ margin: "auto", display: "table" }}> <div id='login_container' style={{ margin: 'auto', display: 'table' }}>
<Image <Image src={qrCode} width={150} height={150} fallback={errImg}></Image>
src={qrCode}
width={150}
height={150}
fallback={errImg}
></Image>
</div> </div>
<div <div
style={{ style={{
// marginTop: -120, // marginTop: -120,
marginBottom: 52, marginBottom: 52,
fontSize: 14, fontSize: 14,
fontFamily: "MicrosoftYaHei", fontFamily: 'MicrosoftYaHei',
color: "#3E454D", color: '#3E454D',
textAlign: "center", textAlign: 'center',
}} }}
> >
打开微信扫一扫 打开微信扫一扫
......
lib/commonProvider.tsx
import React, { createContext, Dispatch, SetStateAction, useState } from "react"; import React, { createContext, Dispatch, SetStateAction, useState } from 'react';
export const CommonContext = createContext<{ export const CommonContext = createContext<{
reloadRequirements: boolean; //更新项目需求列表 reloadRequirements: boolean; //更新项目需求列表
setReloadRequirements: Dispatch<SetStateAction<boolean>>; setReloadRequirements: Dispatch<SetStateAction<boolean>>;
}>({ }>({
reloadRequirements: false, reloadRequirements: false,
setReloadRequirements: () => {} setReloadRequirements: () => {},
}); });
type Props = { type Props = {
......
lib/hooks.ts
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react';
export function useGeolocation() { export function useGeolocation() {
const [position, setPosition] = useState<{ const [position, setPosition] = useState<{
position?: any, position?: any;
address?: any address?: any;
} | null>(null); } | null>(null);
useEffect(() => { useEffect(() => {
const AMapLoader = require("@amap/amap-jsapi-loader"); const AMapLoader = require('@amap/amap-jsapi-loader');
window._AMapSecurityConfig = { window._AMapSecurityConfig = {
securityJsCode: 'd7492300c43c8d3737909b77f2b2c387', securityJsCode: 'd7492300c43c8d3737909b77f2b2c387',
} };
AMapLoader.load({ AMapLoader.load({
key: "87b424e68754efc3ba9d11ae07475091", // 申请好的Web端开发者Key，首次调用 load 时必填 key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ['AMap.Geolocation', "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 plugins: ['AMap.Geolocation', 'AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}) })
.then(async (AMap: any) => { .then(async (AMap: any) => {
//用户定位 //用户定位
const geolocation = new AMap.Geolocation({ const geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s timeout: 10000, //超过10秒后停止定位，默认：5s
position: 'RB', //定位按钮的停靠位置 position: 'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20] offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
}); });
geolocation.getCurrentPosition(function (status: string, result: any) { geolocation.getCurrentPosition(function (status: string, result: any) {
if (status == 'complete') { if (status == 'complete') {
onComplete(result) onComplete(result);
} else { } else {
onError(result) onError(result);
} }
}); });
//解析定位结果 //解析定位结果
...@@ -38,33 +37,42 @@ export function useGeolocation() { ...@@ -38,33 +37,42 @@ export function useGeolocation() {
console.log('定位成功', data.position); console.log('定位成功', data.position);
setPosition({ setPosition({
position: data.position, position: data.position,
address: null address: null,
}) });
var geocoder = new AMap.Geocoder({ var geocoder = new AMap.Geocoder({
city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode city: '全国', // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
}) });
geocoder.getAddress([data.position.lng, data.position.lat], function (status: string, result: {info: string, regeocode?: { geocoder.getAddress(
formattedAddress: string, [data.position.lng, data.position.lat],
function (
status: string,
result: {
info: string;
regeocode?: {
formattedAddress: string;
addressComponent: { addressComponent: {
adcode: string adcode: string;
} };
}}) { };
console.log('获取地址结果', result) },
) {
console.log('获取地址结果', result);
if (status === 'complete' && result.info === 'OK') { if (status === 'complete' && result.info === 'OK') {
// result为对应的地理位置详细信息 // result为对应的地理位置详细信息
setPosition({ setPosition({
...position, ...position,
address: result.regeocode address: result.regeocode,
}) });
}else{ } else {
setPosition({ setPosition({
...position, ...position,
address: null address: null,
}) });
} }
}) },
);
} }
//解析定位错误信息 //解析定位错误信息
async function onError(data: any) { async function onError(data: any) {
...@@ -77,7 +85,7 @@ export function useGeolocation() { ...@@ -77,7 +85,7 @@ export function useGeolocation() {
.catch((e: any) => { .catch((e: any) => {
console.log(e); console.log(e);
}); });
}, []) }, []);
return position return position;
} }
lib/userProvider.tsx
import React, { import React, { createContext, Dispatch, SetStateAction, useEffect, useState } from 'react';
createContext, import api, { UserInfoResp } from '~/api';
Dispatch,
SetStateAction,
useEffect,
useState,
} from "react";
import api, { UserInfoResp } from "~/api";
export const UserContext = createContext<{ export const UserContext = createContext<{
testLogin: () => void; testLogin: () => void;
...@@ -32,9 +26,7 @@ const UserProvider = ({ children }: Props) => { ...@@ -32,9 +26,7 @@ const UserProvider = ({ children }: Props) => {
useEffect(() => { useEffect(() => {
try { try {
setUserInfo( setUserInfo(JSON.parse(window.localStorage.getItem('userInfo') || '') || undefined);
JSON.parse(window.localStorage.getItem("userInfo") || "") || undefined
);
window.setUserInfo = setUserInfo; window.setUserInfo = setUserInfo;
window.setNeedLogin = setNeedLogin; window.setNeedLogin = setNeedLogin;
...@@ -44,15 +36,15 @@ const UserProvider = ({ children }: Props) => { ...@@ -44,15 +36,15 @@ const UserProvider = ({ children }: Props) => {
useEffect(() => { useEffect(() => {
if (userInfo !== null) { if (userInfo !== null) {
localStorage.setItem("userInfo", JSON.stringify(userInfo || "")); localStorage.setItem('userInfo', JSON.stringify(userInfo || ''));
} }
}, [userInfo]); }, [userInfo]);
//测试登录 //测试登录
function testLogin() { function testLogin() {
api.testAppletLogin().then((res) => { api.testAppletLogin().then((res) => {
if (res.code == "200") { if (res.code == '200') {
window.localStorage.setItem("token", res.result?.token || ""); window.localStorage.setItem('token', res.result?.token || '');
api.userInfo().then((res) => { api.userInfo().then((res) => {
setUserInfo(res.result || undefined); setUserInfo(res.result || undefined);
}); });
...@@ -62,7 +54,7 @@ const UserProvider = ({ children }: Props) => { ...@@ -62,7 +54,7 @@ const UserProvider = ({ children }: Props) => {
//登出 //登出
function logout() { function logout() {
localStorage.setItem("token", ""); localStorage.setItem('token', '');
setUserInfo(undefined); setUserInfo(undefined);
} }
......
lib/validateUtils.ts
// 不能输入数字，其他可惜输入 // 不能输入数字，其他可惜输入
export const exceptNumber = (val: any) => { export const exceptNumber = (val: any) => {
val.target.value = val.target.value val.target.value = val.target.value.replace(/1?(\d|([1-9]\d+))(.\d+)?$/g, '').replace(/\s/g, '');
.replace(/1?(\d|([1-9]\d+))(.\d+)?$/g, "")
.replace(/\s/g, "");
}; };
// 只能输入正整数 // 只能输入正整数
export const onlyNumberPositive = (val: any) => { export const onlyNumberPositive = (val: any) => {
// eslint-disable-next-line eqeqeq // eslint-disable-next-line eqeqeq
if (val.target.value == 0) { if (val.target.value == 0) {
val.target.value = val.target.value.replace(/0/g, ""); val.target.value = val.target.value.replace(/0/g, '');
} }
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
}; };
// 不能输入汉字，其他可输入 // 不能输入汉字，其他可输入
export const exceptChinese = (val: any) => { export const exceptChinese = (val: any) => {
val.target.value = val.target.value val.target.value = val.target.value
.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, "") .replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, '')
.replace(/\s/g, ""); .replace(/\s/g, '');
}; };
// 只能输入字母和中文，不能输入数字和符号 // 只能输入字母和中文，不能输入数字和符号
export const onlyCharacter = (val: any) => { export const onlyCharacter = (val: any) => {
val.target.value = val.target.value val.target.value = val.target.value.replace(/[^a-zA-Z\u4E00-\u9FA5]/g, '').replace(/\s/g, '');
.replace(/[^a-zA-Z\u4E00-\u9FA5]/g, "")
.replace(/\s/g, "");
}; };
// 手机号输入，限制11位 // 手机号输入，限制11位
...@@ -33,11 +29,11 @@ export const phoneNumber = (val: any) => { ...@@ -33,11 +29,11 @@ export const phoneNumber = (val: any) => {
if (val.target.value.length > 11) { if (val.target.value.length > 11) {
val.target.value = val.target.value.slice(0, 11); val.target.value = val.target.value.slice(0, 11);
} else { } else {
val.target.value = val.target.value.replace(/\D/g, ""); val.target.value = val.target.value.replace(/\D/g, '');
} }
}; };
// 开头不能输入空格 // 开头不能输入空格
export const noSpaceFront = (val: any) => { export const noSpaceFront = (val: any) => {
val.target.value = val.target.value.replace(/^\s/g, ""); val.target.value = val.target.value.replace(/^\s/g, '');
}; };
package.json
...@@ -9,9 +9,9 @@ ...@@ -9,9 +9,9 @@
"lint:next": "next lint", "lint:next": "next lint",
"predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx", "predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx",
"prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx", "prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx",
"lint": "npx eslint src", "lint": "npx eslint pages",
"lint:fix": "npm run lint -- --fix", "lint:fix": "npm run lint -- --fix",
"prettier": "npx prettier src --check", "prettier": "npx prettier pages --check",
"prettier:fix": "npm run prettier -- --write", "prettier:fix": "npm run prettier -- --write",
"format": "npm run prettier:fix && npm run lint:fix" "format": "npm run prettier:fix && npm run lint:fix"
}, },
......
pages/JoinPolicy/api/index.ts
import request, { Response } from "~/api/request" import request, { Response } from '~/api/request';
export interface CooperationApplyParams { export interface CooperationApplyParams {
applyName: string, applyName: string;
applyPhone: string, applyPhone: string;
remark?: string, remark?: string;
userAccountId: number, userAccountId: number;
cooperationTagId: number cooperationTagId: number;
} }
export interface GetTagIdResp { export interface GetTagIdResp {
id: number, id: number;
tagName: string, tagName: string;
tagImg: string, tagImg: string;
tagDescription: string, tagDescription: string;
createTime: string createTime: string;
} }
export default { export default {
//申请加盟 //申请加盟
cooperationApply(params: CooperationApplyParams): Promise<Response<string>> { cooperationApply(params: CooperationApplyParams): Promise<Response<string>> {
return request('/userapp/cooperation/apply', 'post', params) return request('/userapp/cooperation/apply', 'post', params);
}, },
//加盟标签相关内容 //加盟标签相关内容
getTagById(params: { id: number }): Promise<Response<GetTagIdResp>> { getTagById(params: { id: number }): Promise<Response<GetTagIdResp>> {
return request('/userapp/cooperation/getTagById', 'get', params) return request('/userapp/cooperation/getTagById', 'get', params);
} },
} };
\ No newline at end of file
pages/JoinPolicy/index.page.tsx
import { Button, Col, Divider, Form, Input, Row } from "antd"; import { Button, Col, Divider, Form, Input, Row } from 'antd';
import { useRouter } from "next/router"; import { useRouter } from 'next/router';
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react';
import LayoutView from "~/components/layout"; import LayoutView from '~/components/layout';
import api from "./api"; import api from './api';
import styles from "./index.module.scss"; import styles from './index.module.scss';
import { phoneNumber } from "~/lib/validateUtils"; import { phoneNumber } from '~/lib/validateUtils';
export default function JoinPolicy() { export default function JoinPolicy() {
const router = useRouter(); const router = useRouter();
const [content, setContent] = useState(""); //福利内容 const [content, setContent] = useState(''); //福利内容
const tagId = Number(router.query.tagId); const tagId = Number(router.query.tagId);
useEffect(() => { useEffect(() => {
...@@ -18,7 +18,7 @@ export default function JoinPolicy() { ...@@ -18,7 +18,7 @@ export default function JoinPolicy() {
id: tagId, id: tagId,
}) })
.then((res) => { .then((res) => {
setContent(res.result?.tagDescription.replaceAll("\n", "<br/>") || ""); setContent(res.result?.tagDescription.replaceAll('\n', '<br/>') || '');
}); });
} }
}, []); }, []);
...@@ -31,11 +31,11 @@ export default function JoinPolicy() { ...@@ -31,11 +31,11 @@ export default function JoinPolicy() {
cooperationTagId: tagId, cooperationTagId: tagId,
}) })
.then((res) => { .then((res) => {
console.log("提交结果", res); console.log('提交结果', res);
if (res.code === "200") { if (res.code === '200') {
window.messageApi.success('提交成功'); window.messageApi.success('提交成功');
setTimeout(() => { setTimeout(() => {
router.push("/"); router.push('/');
}, 1500); }, 1500);
} }
}); });
...@@ -45,10 +45,10 @@ export default function JoinPolicy() { ...@@ -45,10 +45,10 @@ export default function JoinPolicy() {
<LayoutView> <LayoutView>
<div className={styles.banner}></div> <div className={styles.banner}></div>
<div <div
className="page" className='page'
style={{ style={{
background: "#fff", background: '#fff',
position: "relative", position: 'relative',
zIndex: 1, zIndex: 1,
marginTop: 60, marginTop: 60,
paddingBottom: 63, paddingBottom: 63,
...@@ -56,7 +56,7 @@ export default function JoinPolicy() { ...@@ -56,7 +56,7 @@ export default function JoinPolicy() {
> >
<div <div
className={styles.font1} className={styles.font1}
style={{ textAlign: "center", paddingTop: 40, paddingBottom: 30 }} style={{ textAlign: 'center', paddingTop: 40, paddingBottom: 30 }}
> >
加盟入驻福利 加盟入驻福利
</div> </div>
...@@ -66,48 +66,37 @@ export default function JoinPolicy() { ...@@ -66,48 +66,37 @@ export default function JoinPolicy() {
dangerouslySetInnerHTML={{ __html: content }} dangerouslySetInnerHTML={{ __html: content }}
></div> ></div>
<Divider /> <Divider />
<div <div className={styles.font1} style={{ textAlign: 'center', marginBottom: 28 }}>
className={styles.font1}
style={{ textAlign: "center", marginBottom: 28 }}
>
申请加盟入驻 申请加盟入驻
</div> </div>
<Row justify={"center"}> <Row justify={'center'}>
<Col style={{ width: 400 }}> <Col style={{ width: 400 }}>
<Form labelAlign="left" labelCol={{ span: 5 }} onFinish={onFinish}> <Form labelAlign='left' labelCol={{ span: 5 }} onFinish={onFinish}>
<Form.Item <Form.Item label='姓名' name='applyName' rules={[{ required: true }]}>
label="姓名" <Input placeholder='请输入姓名'></Input>
name="applyName"
rules={[{ required: true }]}
>
<Input placeholder="请输入姓名"></Input>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="联系方式" label='联系方式'
name="applyPhone" name='applyPhone'
rules={[ rules={[
{ required: true }, { required: true },
{ {
pattern: /^1\d{10}$/, pattern: /^1\d{10}$/,
message: "很输入11位手机号", message: '很输入11位手机号',
}, },
]} ]}
> >
<Input <Input placeholder='请输入手机号' maxLength={11} onInput={phoneNumber}></Input>
placeholder="请输入手机号"
maxLength={11}
onInput={phoneNumber}
></Input>
</Form.Item> </Form.Item>
<Form.Item name="remark"> <Form.Item name='remark'>
<Input.TextArea placeholder="其它信息"></Input.TextArea> <Input.TextArea placeholder='其它信息'></Input.TextArea>
</Form.Item> </Form.Item>
<Row justify={"center"}> <Row justify={'center'}>
<Button <Button
type="primary" type='primary'
htmlType="submit" htmlType='submit'
style={{ marginTop: 11, width: 200 }} style={{ marginTop: 11, width: 200 }}
size="large" size='large'
> >
提交申请 提交申请
</Button> </Button>
......
pages/_app.page.tsx
import "../public/antd.min.css"; import '../public/antd.min.css';
import "../styles/index.scss"; import '../styles/index.scss';
import type { AppProps } from "next/app"; import type { AppProps } from 'next/app';
import withTheme from "../theme"; import withTheme from '../theme';
import { message } from "antd"; import { message } from 'antd';
import { useEffect } from "react"; import { useEffect } from 'react';
import Head from "next/head"; import Head from 'next/head';
import Script from "next/script"; import Script from 'next/script';
import UserProvider from "~/lib/userProvider"; import UserProvider from '~/lib/userProvider';
import CommonProvider from "~/lib/commonProvider"; import CommonProvider from '~/lib/commonProvider';
export default function App({ Component, pageProps }: AppProps) { export default function App({ Component, pageProps }: AppProps) {
const [messageApi, contextHolder] = message.useMessage(); const [messageApi, contextHolder] = message.useMessage();
...@@ -15,9 +15,9 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -15,9 +15,9 @@ export default function App({ Component, pageProps }: AppProps) {
//全局消息提示 //全局消息提示
window.messageApi = messageApi; window.messageApi = messageApi;
//@ts-ignore //@ts-ignore
window.onresize = function(){ window.onresize = function () {
// window.document.querySelector('html')!.style.fontSize = (window.innerWidth / 1920) + 'PX'; // window.document.querySelector('html')!.style.fontSize = (window.innerWidth / 1920) + 'PX';
} };
}, []); }, []);
return withTheme( return withTheme(
...@@ -25,17 +25,17 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -25,17 +25,17 @@ export default function App({ Component, pageProps }: AppProps) {
<Head> <Head>
<title>云享飞</title> <title>云享飞</title>
<meta <meta
name="viewport" name='viewport'
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'
></meta> ></meta>
</Head> </Head>
<Script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></Script> <Script src='https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'></Script>
{contextHolder} {contextHolder}
<CommonProvider> <CommonProvider>
<UserProvider> <UserProvider>
<Component {...pageProps} /> <Component {...pageProps} />
</UserProvider> </UserProvider>
</CommonProvider> </CommonProvider>
</> </>,
); );
} }
pages/_document.page.tsx
import Document, { import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
Html,
Head,
Main,
NextScript,
DocumentContext,
} from 'next/document';
import { ServerStyleSheet } from 'styled-components'; import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document { export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) { static async getInitialProps(ctx: DocumentContext) {
...@@ -24,7 +18,7 @@ export default class MyDocument extends Document { ...@@ -24,7 +18,7 @@ export default class MyDocument extends Document {
render() { render() {
return ( return (
<Html lang='en' style={{fontSize: 1}}> <Html lang='en' style={{ fontSize: 1 }}>
<Head /> <Head />
<body> <body>
<Main /> <Main />
......
pages/api/hello.ts
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next' import type { NextApiRequest, NextApiResponse } from 'next';
type Data = { type Data = {
name: string name: string;
} };
export default function handler( export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
req: NextApiRequest, res.status(200).json({ name: 'John Doe' });
res: NextApiResponse<Data>
) {
res.status(200).json({ name: 'John Doe' })
} }
pages/certification/api/index.ts
import request, { Response } from "~/api/request" import request, { Response } from '~/api/request';
export interface CompanyAuthParams { export interface CompanyAuthParams {
companyName: string; companyName: string;
creditCode: string; creditCode: string;
licenseImg: string; licenseImg: string;
userAccountId: number; userAccountId: number;
authStatus: 1 | 0 authStatus: 1 | 0;
} }
export interface FuzzyQueryCompanyResp { export interface FuzzyQueryCompanyResp {
...@@ -38,11 +38,11 @@ export interface Paging { ...@@ -38,11 +38,11 @@ export interface Paging {
export default { export default {
//提交企业认证 //提交企业认证
companyAuth(params: CompanyAuthParams): Promise<Response<string>> { companyAuth(params: CompanyAuthParams): Promise<Response<string>> {
return request('/userapp/company-auth/add', 'post', params) return request('/userapp/company-auth/add', 'post', params);
}, },
//企业工商模糊搜索 //企业工商模糊搜索
fuzzyQueryCompany(params: { searchKey: string }): Promise<Response<FuzzyQueryCompanyResp>> { fuzzyQueryCompany(params: { searchKey: string }): Promise<Response<FuzzyQueryCompanyResp>> {
return request('/userapp/company-auth/fuzzyQueryCompany', 'get', params); return request('/userapp/company-auth/fuzzyQueryCompany', 'get', params);
} },
} };
\ No newline at end of file
pages/certification/index.page.tsx
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons"; import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { import { Col, Form, Input, Row, Upload, message, Button, Image, AutoComplete } from 'antd';
Col, import type { UploadChangeParam } from 'antd/es/upload';
Form, import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
Input, import { useContext, useEffect, useState } from 'react';
Row, import Layout from '~/components/layout';
Upload, import api from './api';
message, import styles from './index.module.scss';
Button, import gApi from '~/api';
Image, import Router from 'next/router';
AutoComplete, import { UserContext } from '~/lib/userProvider';
} from "antd";
import type { UploadChangeParam } from "antd/es/upload";
import type { RcFile, UploadFile, UploadProps } from "antd/es/upload/interface";
import { useContext, useEffect, useState } from "react";
import Layout from "~/components/layout";
import api from "./api";
import styles from "./index.module.scss";
import gApi from "~/api";
import Router from "next/router";
import { UserContext } from "~/lib/userProvider";
const beforeUpload = (file: RcFile) => { const beforeUpload = (file: RcFile) => {
const isJpgOrPng = const isJpgOrPng =
file.type === "image/jpeg" || file.type === 'image/jpeg' ||
file.type === "image/png" || file.type === 'image/png' ||
file.type === "image/bmp" || file.type === 'image/bmp' ||
file.type === "image/gif" file.type === 'image/gif';
if (!isJpgOrPng) { if (!isJpgOrPng) {
message.error("请上传10M以内的JPG、JPEG、BMP、GIF、PNG格式图片"); message.error('请上传10M以内的JPG、JPEG、BMP、GIF、PNG格式图片');
} }
//限制上传10M //限制上传10M
const isLt2M = file.size / 1024 / 1024 < 10; const isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) { if (!isLt2M) {
message.error("请上传10M以内的JPG、JPEG、BMP、GIF、PNG格式图片"); message.error('请上传10M以内的JPG、JPEG、BMP、GIF、PNG格式图片');
} }
return isJpgOrPng && isLt2M; return isJpgOrPng && isLt2M;
}; };
const normFile = (e: any) => { const normFile = (e: any) => {
console.log("Upload event:", e); console.log('Upload event:', e);
if (Array.isArray(e)) { if (Array.isArray(e)) {
return e; return e;
} }
...@@ -55,26 +45,22 @@ export default function Certification() { ...@@ -55,26 +45,22 @@ export default function Certification() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [imageUrl, setImageUrl] = useState<string>(); const [imageUrl, setImageUrl] = useState<string>();
const { userInfo, setUserInfo } = useContext(UserContext); const { userInfo, setUserInfo } = useContext(UserContext);
const [enterpriseOptions, setEnterpriseOptions] = useState< const [enterpriseOptions, setEnterpriseOptions] = useState<Array<EnterpriseOption>>([]);
Array<EnterpriseOption>
>([]);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [token, setToken] = useState(""); const [token, setToken] = useState('');
useEffect(() => { useEffect(() => {
setToken(window.localStorage.getItem("token") || ""); setToken(window.localStorage.getItem('token') || '');
}, []); }, []);
//上传change事件 //上传change事件
const handleChange: UploadProps["onChange"] = ( const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
info: UploadChangeParam<UploadFile> console.log('uploadChange', info);
) => { if (info.file.status === 'uploading') {
console.log("uploadChange", info);
if (info.file.status === "uploading") {
setLoading(true); setLoading(true);
return; return;
} }
if (info.file.status === "done") { if (info.file.status === 'done') {
// Get this url from response in real world. // Get this url from response in real world.
setLoading(false); setLoading(false);
setImageUrl(info.file.response.result?.[0]); setImageUrl(info.file.response.result?.[0]);
...@@ -90,9 +76,9 @@ export default function Certification() { ...@@ -90,9 +76,9 @@ export default function Certification() {
licenseImg: imageUrl, licenseImg: imageUrl,
}) })
.then((res) => { .then((res) => {
console.log("提交结果", res); console.log('提交结果', res);
if (res.code === "200") { if (res.code === '200') {
window.messageApi.success("提交成功,请等待审核"); window.messageApi.success('提交成功,请等待审核');
if (userInfo) { if (userInfo) {
setUserInfo({ setUserInfo({
...userInfo, ...userInfo,
...@@ -100,10 +86,10 @@ export default function Certification() { ...@@ -100,10 +86,10 @@ export default function Certification() {
}); });
} }
setTimeout(() => { setTimeout(() => {
if (Router.query.type == "back") { if (Router.query.type == 'back') {
Router.back(); Router.back();
} else { } else {
Router.push("/"); Router.push('/');
} }
}, 1000); }, 1000);
} }
...@@ -122,7 +108,7 @@ export default function Certification() { ...@@ -122,7 +108,7 @@ export default function Certification() {
searchKey: text, searchKey: text,
}) })
.then((res) => { .then((res) => {
if (res.code === "200") { if (res.code === '200') {
setEnterpriseOptions( setEnterpriseOptions(
res.result?.Result?.map((item) => { res.result?.Result?.map((item) => {
return { return {
...@@ -130,7 +116,7 @@ export default function Certification() { ...@@ -130,7 +116,7 @@ export default function Certification() {
value: item.Name, value: item.Name,
creditCode: item.CreditCode, creditCode: item.CreditCode,
}; };
}) || [] }) || [],
); );
} else { } else {
setEnterpriseOptions([]); setEnterpriseOptions([]);
...@@ -141,17 +127,17 @@ export default function Certification() { ...@@ -141,17 +127,17 @@ export default function Certification() {
//选择的企业 //选择的企业
const onSelectEnterprise = (value: string, option: EnterpriseOption) => { const onSelectEnterprise = (value: string, option: EnterpriseOption) => {
form.setFieldValue("creditCode", option.creditCode); form.setFieldValue('creditCode', option.creditCode);
}; };
return ( return (
<Layout> <Layout>
<div className={styles.banner}></div> <div className={styles.banner}></div>
<div <div
className="page" className='page'
style={{ style={{
background: "#fff", background: '#fff',
position: "relative", position: 'relative',
zIndex: 1, zIndex: 1,
marginTop: 60, marginTop: 60,
}} }}
...@@ -159,63 +145,56 @@ export default function Certification() { ...@@ -159,63 +145,56 @@ export default function Certification() {
<div <div
className={styles.font1} className={styles.font1}
style={{ style={{
padding: "30px 0 23px 31px", padding: '30px 0 23px 31px',
borderBottom: "1px solid RGBA(231, 231, 231, 1)", borderBottom: '1px solid RGBA(231, 231, 231, 1)',
}} }}
> >
企业认证{" "} 企业认证{' '}
<span className={styles.font2} style={{ marginLeft: 28 }}> <span className={styles.font2} style={{ marginLeft: 28 }}>
发布信息需完成以下认证 发布信息需完成以下认证
</span> </span>
</div> </div>
<div> <div>
<Form <Form form={form} style={{ padding: '70px 170px 162px 170px' }} onFinish={onFinish}>
form={form} <Row justify='space-between'>
style={{ padding: "70px 170px 162px 170px" }}
onFinish={onFinish}
>
<Row justify="space-between">
<Col span={11}> <Col span={11}>
<Form.Item <Form.Item
label="企业名称" label='企业名称'
name="companyName" name='companyName'
rules={[{ required: true }]} rules={[{ required: true }]}
style={{ borderBottom: "1px solid RGBA(243, 243, 243, 1)" }} style={{ borderBottom: '1px solid RGBA(243, 243, 243, 1)' }}
> >
<AutoComplete <AutoComplete
options={enterpriseOptions} options={enterpriseOptions}
style={{ width: 200 }} style={{ width: 200 }}
onSelect={onSelectEnterprise} onSelect={onSelectEnterprise}
onSearch={onSearchEnterprise} onSearch={onSearchEnterprise}
placeholder="请输入企业名称" placeholder='请输入企业名称'
bordered={false} bordered={false}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={11}> <Col span={11}>
<Form.Item <Form.Item
label="企业信用代码" label='企业信用代码'
name="creditCode" name='creditCode'
rules={[{ required: true }]} rules={[{ required: true }]}
style={{ borderBottom: "1px solid RGBA(243, 243, 243, 1)" }} style={{ borderBottom: '1px solid RGBA(243, 243, 243, 1)' }}
> >
<Input <Input bordered={false} placeholder='请输入企业信用代码'></Input>
bordered={false}
placeholder="请输入企业信用代码"
></Input>
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Form.Item <Form.Item
name="licenseImg" name='licenseImg'
rules={[{ required: true }]} rules={[{ required: true }]}
valuePropName="fileList" valuePropName='fileList'
getValueFromEvent={normFile} getValueFromEvent={normFile}
help={<div style={{ textAlign: "center" }}>请上传营业执照</div>} help={<div style={{ textAlign: 'center' }}>请上传营业执照</div>}
> >
<Upload <Upload
name="uploadFile" name='uploadFile'
listType="picture-card" listType='picture-card'
className={styles.upload} className={styles.upload}
showUploadList={false} showUploadList={false}
action={gApi.imgOss} action={gApi.imgOss}
...@@ -227,8 +206,8 @@ export default function Certification() { ...@@ -227,8 +206,8 @@ export default function Certification() {
{imageUrl ? ( {imageUrl ? (
<Image <Image
src={imageUrl} src={imageUrl}
alt="uploadFile" alt='uploadFile'
style={{ width: "100%" }} style={{ width: '100%' }}
preview={false} preview={false}
/> />
) : ( ) : (
...@@ -244,12 +223,12 @@ export default function Certification() { ...@@ -244,12 +223,12 @@ export default function Certification() {
2.加盖公章的扫描件或复印件支持jpg.jpeg.bmp.gif.png格式图片，大小不超10M。 2.加盖公章的扫描件或复印件支持jpg.jpeg.bmp.gif.png格式图片，大小不超10M。
</div> </div>
<Row justify="center"> <Row justify='center'>
<Button <Button
type="primary" type='primary'
htmlType="submit" htmlType='submit'
style={{ marginTop: 20, padding: "0 129px" }} style={{ marginTop: 20, padding: '0 129px' }}
size="large" size='large'
> >
提交认证 提交认证
</Button> </Button>
......
pages/equipmentLeasing/api/index.tsx
import request, { Response } from '~/api/request' import request, { Response } from '~/api/request';
export interface ListPageDeviceInfoParams { export interface ListPageDeviceInfoParams {
brandId?: number brandId?: number;
districtId?: number districtId?: number;
modelId?: number modelId?: number;
pageNo: number pageNo: number;
pageSize: number pageSize: number;
partsId?: number partsId?: number;
productCategoryId?: number productCategoryId?: number;
qualityId?: number qualityId?: number;
} }
export interface Device { export interface Device {
id: number id: number;
goodsName: string goodsName: string;
images: string images: string;
price: number | null price: number | null;
} }
export interface Advertisement { export interface Advertisement {
id: number id: number;
imageUrl: string imageUrl: string;
} }
export interface ListPageDeviceInfoResp { export interface ListPageDeviceInfoResp {
pageNo: 1 pageNo: 1;
pageSize: 10 pageSize: 10;
list: Array<Device> list: Array<Device>;
totalCount: 0 totalCount: 0;
totalPage: 0 totalPage: 0;
} }
export default { export default {
//web-设备租赁-分页 //web-设备租赁-分页
listPageDeviceInfo: ( listPageDeviceInfo: (
params: ListPageDeviceInfoParams, params: ListPageDeviceInfoParams,
options = {} options = {},
): Promise<Response<ListPageDeviceInfoResp>> => { ): Promise<Response<ListPageDeviceInfoResp>> => {
return request('/pms/product/mall/deviceList', 'post', params, options) return request('/pms/product/mall/deviceList', 'post', params, options);
}, },
//web-设备租赁-广告 //web-设备租赁-广告
listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => { listAdvertisementInfo: (): Promise<Response<Array<Advertisement>>> => {
return request('/pms/webDevice/ad', 'get') return request('/pms/webDevice/ad', 'get');
}, },
} };
pages/equipmentLeasing/detail/api/index.tsx
import request, { Response } from '~/api/request' import request, { Response } from '~/api/request';
export interface GetWebDeviceDetailParams { export interface GetWebDeviceDetailParams {
goodsId: number goodsId: number;
type: 1 type: 1;
} }
export interface GetLeaseGoodsParams { export interface GetLeaseGoodsParams {
leaseTerm: number //租赁时限：（输入0：1-7天、输入1：8-15天、输入2：16-30天、输入3：30天以上） leaseTerm: number; //租赁时限：（输入0：1-7天、输入1：8-15天、输入2：16-30天、输入3：30天以上）
productSpecId: number productSpecId: number;
} }
export interface WareImgsType { export interface WareImgsType {
id: number id: number;
imgUrl: string imgUrl: string;
imgType: number imgType: number;
} }
export interface PriceType { export interface PriceType {
id: number id: number;
cooperationTag: number cooperationTag: number;
price: number price: number;
productSpecId: number productSpecId: number;
leaseTerm: number leaseTerm: number;
} }
export interface GetLeaseGoodsResult { export interface GetLeaseGoodsResult {
productSpecId: number productSpecId: number;
type: number | null type: number | null;
leaseTerm: number leaseTerm: number;
specPrice: PriceType[] specPrice: PriceType[];
} }
export interface GetWebDeviceDetailResult { export interface GetWebDeviceDetailResult {
id: number id: number;
images: { images: {
id: number id: number;
imgUrl: string imgUrl: string;
imgType: number imgType: number;
}[] }[];
goodsVideo: string goodsVideo: string;
goodsVideoId: number goodsVideoId: number;
goodsName: string goodsName: string;
goodsDetail: { goodsDetail: {
id: number id: number;
goodsDesc: string goodsDesc: string;
content: string | null content: string | null;
remark: string | null remark: string | null;
} };
directoryId: number directoryId: number;
categoryByOne: number categoryByOne: number;
categoryByTwo: null categoryByTwo: null;
tag: null tag: null;
shelfStatus: number shelfStatus: number;
goodsSpec: { goodsSpec: {
productSpecList: GetWebDeviceWareSkuById[] productSpecList: GetWebDeviceWareSkuById[];
}[] }[];
otherService?: { otherService?: {
id: number id: number;
saleServiceId: string saleServiceId: string;
serviceName: string serviceName: string;
}[] }[];
price: number | null price: number | null;
goodsNo: string goodsNo: string;
} }
export interface PriceList { export interface PriceList {
id: number id: number;
wareInfoId: number wareInfoId: number;
skuInfoId: number skuInfoId: number;
rentPrice: number rentPrice: number;
minDay: number minDay: number;
maxDay: number maxDay: number;
createTime: null createTime: null;
} }
export interface GetWebDeviceWareSkuById { export interface GetWebDeviceWareSkuById {
id: number id: number;
productSpec: number productSpec: number;
productSkuId: number productSkuId: number;
specName: string specName: string;
specImage: string specImage: string;
partNo: string partNo: string;
versionDesc: string versionDesc: string;
createTime: string | null createTime: string | null;
productSpecCPQVO: string | null productSpecCPQVO: string | null;
} }
export interface WebDeviceUpdateParams { export interface WebDeviceUpdateParams {
id?: number id?: number;
inventoryId?: number inventoryId?: number;
inventoryUsage?: string inventoryUsage?: string;
startDay?: string startDay?: string;
endDay?: string endDay?: string;
} }
export default { export default {
//web-设备租赁-详情 //web-设备租赁-详情
listDetailDeviceInfo: ( listDetailDeviceInfo: (
params: GetWebDeviceDetailParams params: GetWebDeviceDetailParams,
): Promise<Response<GetWebDeviceDetailResult>> => { ): Promise<Response<GetWebDeviceDetailResult>> => {
return request('/pms/product/mall/getLeaseGoodsDetail', 'get', params) return request('/pms/product/mall/getLeaseGoodsDetail', 'get', params);
}, },
//web-设备租赁-立即租赁 //web-设备租赁-立即租赁
listWareSkuUpdate: ( listWareSkuUpdate: (params: WebDeviceUpdateParams): Promise<Response<number>> => {
params: WebDeviceUpdateParams return request('/pms/appDevice/update', 'post', params);
): Promise<Response<number>> => {
return request('/pms/appDevice/update', 'post', params)
}, },
//web-设备租赁-详情-获取设备商品规格价格详情 //web-设备租赁-详情-获取设备商品规格价格详情
GoodsPriceDetail: ( GoodsPriceDetail: (params: GetLeaseGoodsParams): Promise<Response<GetLeaseGoodsResult>> => {
params: GetLeaseGoodsParams return request('/pms/product/mall/getLeaseGoodsPriceDetail', 'get', params);
): Promise<Response<GetLeaseGoodsResult>> => {
return request('/pms/product/mall/getLeaseGoodsPriceDetail', 'get', params)
}, },
} };
pages/equipmentLeasing/detail/components/orderForGoods/api/index.tsx
import request, { Response } from '~/api/request' import request, { Response } from '~/api/request';
export interface GetWebDeviceDetailParams { export interface GetWebDeviceDetailParams {
actualPay: number actualPay: number;
deposit: number deposit: number;
endDate: string endDate: string;
orderReceipt: { orderReceipt: {
detailAddress: string detailAddress: string;
receiptMethod: number receiptMethod: number;
region: string region: string;
takeName: string takeName: string;
takePhone: number takePhone: number;
} };
rentPrice: number rentPrice: number;
returnDate: string returnDate: string;
shouldPay: number shouldPay: number;
specsId: number specsId: number;
startDate: string startDate: string;
wareDescription: string wareDescription: string;
wareImg: string wareImg: string;
wareInfoId: number wareInfoId: number;
wareNo: string wareNo: string;
wareNum: number wareNum: number;
wareTitle: string wareTitle: string;
remark?: string remark?: string;
} }
export interface WareImgsType { export interface WareImgsType {
id: number id: number;
imgUrl: string imgUrl: string;
imgType: number imgType: number;
} }
export interface UserAddress { export interface UserAddress {
id: number id: number;
takeName: string takeName: string;
takePhone: string takePhone: string;
takeRegion: string takeRegion: string;
takeAddress: string takeAddress: string;
type: number type: number;
} }
export interface GetOrderForGoods { export interface GetOrderForGoods {
balance: number balance: number;
nickName: string nickName: string;
orderNo: string orderNo: string;
} }
export default { export default {
//web-地址管理-查询用户地址列表-条件查询 //web-地址管理-查询用户地址列表-条件查询
listUserAddress: (params: {}): Promise<Response<UserAddress[]>> => { listUserAddress: (params: {}): Promise<Response<UserAddress[]>> => {
return request('/oms/user-address/selectList', 'POST', params) return request('/oms/user-address/selectList', 'POST', params);
}, },
//web-设备租赁-下单 //web-设备租赁-下单
FeignAddLease: ( FeignAddLease: (params: GetWebDeviceDetailParams): Promise<Response<GetOrderForGoods>> => {
params: GetWebDeviceDetailParams return request('/oms/RentalOrders/feignAddLease', 'post', params);
): Promise<Response<GetOrderForGoods>> => {
return request('/oms/RentalOrders/feignAddLease', 'post', params)
}, },
//web-设备租赁-订单支付 //web-设备租赁-订单支付
OrderPayment: (params: { OrderPayment: (params: { orderNo: string }): Promise<Response<GetOrderForGoods>> => {
orderNo: string return request(`/payment/repocash/orderPayment`, 'get', params);
}): Promise<Response<GetOrderForGoods>> => {
return request(`/payment/repocash/orderPayment`, 'get', params)
}, },
} };
pages/equipmentLeasing/detail/components/orderForGoods/styled.tsx
import styled from 'styled-components' import styled from 'styled-components';
export const OrderForGoodsBox = styled.div` export const OrderForGoodsBox = styled.div`
box-sizing: border-box; box-sizing: border-box;
...@@ -340,4 +340,4 @@ export const OrderForGoodsBox = styled.div` ...@@ -340,4 +340,4 @@ export const OrderForGoodsBox = styled.div`
line-height: 19px; line-height: 19px;
} }
} }
` `;
pages/equipmentLeasing/detail/components/picture-preview/index.tsx
import React, { useState, useRef } from 'react' import React, { useState, useRef } from 'react';
import { Box } from './styled' import { Box } from './styled';
import { LeftOutlined, RightOutlined } from '@ant-design/icons' import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { WareImgsType } from '../../api' import { WareImgsType } from '../../api';
interface ImagesType { interface ImagesType {
imgList: Array<WareImgsType> imgList: Array<WareImgsType>;
} }
export default function PicturePreview(props: ImagesType) { export default function PicturePreview(props: ImagesType) {
const { imgList } = props const { imgList } = props;
const mask = useRef<HTMLDivElement>(null!) const mask = useRef<HTMLDivElement>(null!);
const moveBox = useRef<HTMLDivElement>(null!) const moveBox = useRef<HTMLDivElement>(null!);
const big = useRef<HTMLImageElement>(null!) const big = useRef<HTMLImageElement>(null!);
const [moveLeft, setMoveLeft] = useState(0) // 根据这个值设置图片列表向左偏移 const [moveLeft, setMoveLeft] = useState(0); // 根据这个值设置图片列表向左偏移
// const imgList = [ // const imgList = [
// 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', // 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
// 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', // 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
...@@ -23,106 +23,83 @@ export default function PicturePreview(props: ImagesType) { ...@@ -23,106 +23,83 @@ export default function PicturePreview(props: ImagesType) {
// 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg' // 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
// ] // ]
const [activeImgIndex, setActiveImgIndex] = useState(0) const [activeImgIndex, setActiveImgIndex] = useState(0);
// 改变预览图 // 改变预览图
const handleChangeImg = (index: number) => { const handleChangeImg = (index: number) => {
if (index <= moveLeft + 3) setActiveImgIndex(index) if (index <= moveLeft + 3) setActiveImgIndex(index);
} };
// 移动缩略图 // 移动缩略图
const handleSlide = (direction: string) => { const handleSlide = (direction: string) => {
//左侧按钮 //左侧按钮
if (direction == 'left') { if (direction == 'left') {
moveLeft == 0 ? setMoveLeft(0) : setMoveLeft((props) => props - 1) moveLeft == 0 ? setMoveLeft(0) : setMoveLeft((props) => props - 1);
} else { } else {
// 右侧按钮 // 右侧按钮
if (imgList.length > 4) { if (imgList.length > 4) {
moveLeft >= imgList.length - 4 moveLeft >= imgList.length - 4
? setMoveLeft(imgList.length - 4) ? setMoveLeft(imgList.length - 4)
: setMoveLeft((props) => props + 1) : setMoveLeft((props) => props + 1);
}
} }
} }
};
// 图片放大镜 // 图片放大镜
const handleMouseMove = ( const handleMouseMove = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event: React.MouseEvent<HTMLDivElement, MouseEvent> let left = event.nativeEvent.offsetX - mask.current.offsetWidth / 2;
) => { let top = event.nativeEvent.offsetY - mask.current.offsetHeight / 2;
let left = event.nativeEvent.offsetX - mask.current.offsetWidth / 2
let top = event.nativeEvent.offsetY - mask.current.offsetHeight / 2
// 最右侧和最下侧的临界值 // 最右侧和最下侧的临界值
const maxLeft = moveBox.current.offsetWidth - mask.current.offsetWidth const maxLeft = moveBox.current.offsetWidth - mask.current.offsetWidth;
const maxTop = moveBox.current.offsetHeight - mask.current.offsetHeight const maxTop = moveBox.current.offsetHeight - mask.current.offsetHeight;
//约束范围 //约束范围
if (left <= 0) left = 0 if (left <= 0) left = 0;
if (left >= maxLeft) left = maxLeft if (left >= maxLeft) left = maxLeft;
if (top <= 0) top = 0 if (top <= 0) top = 0;
if (top >= maxTop) top = maxTop if (top >= maxTop) top = maxTop;
// 设置放大范围遮罩层位置 // 设置放大范围遮罩层位置
mask.current.style.left = left + 'px' mask.current.style.left = left + 'px';
mask.current.style.top = top + 'px' mask.current.style.top = top + 'px';
// 设置大图图片位置，可以用background代替这个方案，有兴趣可以尝试 // 设置大图图片位置，可以用background代替这个方案，有兴趣可以尝试
big.current.style.left = -3 * left + 'px' // 3这个值是 大图除以小图算出来的比例 这里大图是900px 小图是300px big.current.style.left = -3 * left + 'px'; // 3这个值是 大图除以小图算出来的比例 这里大图是900px 小图是300px
big.current.style.top = -3 * top + 'px' big.current.style.top = -3 * top + 'px';
} };
return ( return (
<Box> <Box>
<div className="img_wrapper"> <div className='img_wrapper'>
<div className="img_content"> <div className='img_content'>
{/* <!-- 蒙层，绑定鼠标事件 --> */} {/* <!-- 蒙层，绑定鼠标事件 --> */}
<div <div className='movebox' onMouseMove={(e) => handleMouseMove(e)} ref={moveBox}></div>
className="movebox"
onMouseMove={(e) => handleMouseMove(e)}
ref={moveBox}
></div>
{/* <!-- 主图 --> */} {/* <!-- 主图 --> */}
<img <img src={imgList && imgList[activeImgIndex].imgUrl} className='img_small' alt='' />
src={imgList && imgList[activeImgIndex].imgUrl}
className="img_small"
alt=""
/>
{/* <!-- 放大区域 --> */} {/* <!-- 放大区域 --> */}
<div className="mask" ref={mask}></div> <div className='mask' ref={mask}></div>
{/* <!-- 大图预览图 --> */} {/* <!-- 大图预览图 --> */}
<div className="img_big"> <div className='img_big'>
<img <img src={imgList && imgList[activeImgIndex].imgUrl} ref={big} alt='' />
src={imgList && imgList[activeImgIndex].imgUrl}
ref={big}
alt=""
/>
</div> </div>
</div> </div>
{/* <!-- 缩略图列表 --> */} {/* <!-- 缩略图列表 --> */}
<div className="img_list_wrapper"> <div className='img_list_wrapper'>
{imgList?.length > 4 && ( {imgList?.length > 4 && (
<LeftOutlined <LeftOutlined className='el-icon-arrow-left' onClick={() => handleSlide('left')} />
className="el-icon-arrow-left"
onClick={() => handleSlide('left')}
/>
)} )}
<div className="img_list_content"> <div className='img_list_content'>
<div <div className='img_list' style={{ marginLeft: -moveLeft * 25 + '%' }}>
className="img_list"
style={{ marginLeft: -moveLeft * 25 + '%' }}
>
{imgList?.map((item, index) => ( {imgList?.map((item, index) => (
<img <img
onMouseOver={() => handleChangeImg(index)} onMouseOver={() => handleChangeImg(index)}
key={index} key={index}
className={`${activeImgIndex === index ? 'activeImg' : ''}`} className={`${activeImgIndex === index ? 'activeImg' : ''}`}
src={item.imgUrl} src={item.imgUrl}
alt="" alt=''
/> />
))} ))}
</div> </div>
</div> </div>
{imgList?.length > 4 && ( {imgList?.length > 4 && (
<RightOutlined <RightOutlined className='el-icon-arrow-right' onClick={() => handleSlide('right')} />
className="el-icon-arrow-right"
onClick={() => handleSlide('right')}
/>
)} )}
</div> </div>
</div> </div>
</Box> </Box>
) );
} }
pages/equipmentLeasing/detail/components/picture-preview/styled.tsx
import styled from "styled-components" import styled from 'styled-components';
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
...@@ -10,7 +10,7 @@ export const Box = styled.div` ...@@ -10,7 +10,7 @@ export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
width: 300px; width: 300px;
height: 300px; height: 300px;
&:hover{ &:hover {
cursor: move; cursor: move;
} }
.movebox { .movebox {
...@@ -106,5 +106,5 @@ export const Box = styled.div` ...@@ -106,5 +106,5 @@ export const Box = styled.div`
line-height: 70px; line-height: 70px;
} }
} }
} }
` `;
\ No newline at end of file
pages/equipmentLeasing/detail/styled.tsx
import styled from 'styled-components' import styled from 'styled-components';
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
...@@ -282,4 +282,4 @@ export const Box = styled.div` ...@@ -282,4 +282,4 @@ export const Box = styled.div`
} }
} }
} }
` `;
pages/equipmentLeasing/index.page.tsx
import { Pagination } from 'antd' import { Pagination } from 'antd';
import Image from 'next/image' import Image from 'next/image';
import { useRouter } from 'next/router' import { useRouter } from 'next/router';
import { useContext, useEffect, useRef, useState } from 'react' import { useContext, useEffect, useRef, useState } from 'react';
import ContentBox from '~/components/contentBox' import ContentBox from '~/components/contentBox';
import Filter, { AdapterResult, FilterResult } from '~/components/filter' import Filter, { AdapterResult, FilterResult } from '~/components/filter';
import Layout from '~/components/layout' import Layout from '~/components/layout';
import api, { Advertisement, Device } from './api' import api, { Advertisement, Device } from './api';
import { Box } from './styled' import { Box } from './styled';
import { UserContext } from '~/lib/userProvider' import { UserContext } from '~/lib/userProvider';
// 此函数在构建时被调用 // 此函数在构建时被调用
export async function getStaticProps() { export async function getStaticProps() {
//获取筛选数据，进行静态渲染 //获取筛选数据，进行静态渲染
return { return {
props: {}, props: {},
} };
} }
type Props = {} type Props = {};
export default function EquipmentLeasing(props: Props) { export default function EquipmentLeasing(props: Props) {
const { userInfo } = useContext(UserContext) const { userInfo } = useContext(UserContext);
const router = useRouter() const router = useRouter();
const [productList, setProductList] = useState( const [productList, setProductList] = useState(Array<{ element: JSX.Element }>);
Array<{ element: JSX.Element }> const [rightProductList, setRightProductList] = useState(Array<{ element: JSX.Element }>);
)
const [rightProductList, setRightProductList] = useState(
Array<{ element: JSX.Element }>
)
const leftDom = (item: Device) => { const leftDom = (item: Device) => {
return ( return (
<div <div
key={item.id} key={item.id}
className="item" className='item'
onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)} onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}
> >
<div className="item-top"> <div className='item-top'>
<div className="item-top-image"> <div className='item-top-image'>
<Image src={item.images} alt="error" fill /> <Image src={item.images} alt='error' fill />
</div> </div>
</div> </div>
<div className="item-bottom"> <div className='item-bottom'>
<div className="item-bottom-title" title={item.goodsName}> <div className='item-bottom-title' title={item.goodsName}>
{item.goodsName} {item.goodsName}
</div> </div>
{userInfo?.cooperationTagId ? ( {userInfo?.cooperationTagId ? (
<div className="item-bottom-price"> <div className='item-bottom-price'>
<span className="money">¥{item.price}</span> <span className='money'>¥{item.price}</span>
<span className="unit">/天起</span> <span className='unit'>/天起</span>
</div> </div>
) : ( ) : (
<div className="unit">暂无报价</div> <div className='unit'>暂无报价</div>
)} )}
</div> </div>
</div> </div>
) );
} };
const rightDom = (item: Advertisement) => { const rightDom = (item: Advertisement) => {
return ( return (
<div key={item.id} className="right-box-item right-item"> <div key={item.id} className='right-box-item right-item'>
<Image src={item.imageUrl} alt="error" fill /> <Image src={item.imageUrl} alt='error' fill />
</div> </div>
) );
} };
const [filterResult, setFilterResult] = useState<AdapterResult>({}) //筛选结果 const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果
const [count, setCount] = useState(0) //商品总数 const [count, setCount] = useState(0); //商品总数
const [abort, setAbort] = useState<AbortController | null>(null) //请求中断 const [abort, setAbort] = useState<AbortController | null>(null); //请求中断
const [pageParams, setPageParams] = useState({ const [pageParams, setPageParams] = useState({
type: 1, type: 1,
pageNo: 1, pageNo: 1,
pageSize: 15, pageSize: 15,
}) //分页器对象 }); //分页器对象
const onPageChange = (page: number, pageSize: number) => { const onPageChange = (page: number, pageSize: number) => {
setPageParams({ setPageParams({
...pageParams, ...pageParams,
pageNo: page, pageNo: page,
}) });
} };
useEffect(() => { useEffect(() => {
//中断前一次列表请求 //中断前一次列表请求
abort?.abort() abort?.abort();
setAbort(new AbortController()) setAbort(new AbortController());
}, [filterResult, pageParams]) }, [filterResult, pageParams]);
//端口列表请求 //端口列表请求
useEffect(() => { useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query)) let queryVal = JSON.parse(JSON.stringify(router.query));
let rs let rs;
if (Object.keys(queryVal).length) { if (Object.keys(queryVal).length) {
rs = { categoryId: [Number(queryVal['categoryId'])] } rs = { categoryId: [Number(queryVal['categoryId'])] };
} }
api api
.listPageDeviceInfo( .listPageDeviceInfo(
...@@ -103,45 +99,40 @@ export default function EquipmentLeasing(props: Props) { ...@@ -103,45 +99,40 @@ export default function EquipmentLeasing(props: Props) {
}, },
{ {
signal: abort?.signal, signal: abort?.signal,
} },
) )
.then((res) => { .then((res) => {
setProductList( setProductList(
res.result?.list?.map((item) => { res.result?.list?.map((item) => {
return { element: leftDom(item) } return { element: leftDom(item) };
}) || [] }) || [],
) );
setCount(res.result?.totalCount || 0) setCount(res.result?.totalCount || 0);
}) });
}, [abort]) }, [abort]);
const onFilterChange = ( const onFilterChange = (filterResult: FilterResult, adapterFilterResult: AdapterResult) => {
filterResult: FilterResult, console.log('filterResult', filterResult, adapterFilterResult);
adapterFilterResult: AdapterResult adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map((item) => item.id);
) => { setFilterResult(adapterFilterResult);
console.log('filterResult', filterResult, adapterFilterResult) };
adapterFilterResult.categoryId = adapterFilterResult.categoryId?.map(
(item) => item.id
)
setFilterResult(adapterFilterResult)
}
useEffect(() => { useEffect(() => {
api.listAdvertisementInfo().then((res) => { api.listAdvertisementInfo().then((res) => {
setRightProductList( setRightProductList(
res.result?.map((item) => { res.result?.map((item) => {
return { element: rightDom(item) } return { element: rightDom(item) };
}) || [] }) || [],
) );
}) });
}, []) }, []);
useEffect(() => { useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query)) let queryVal = JSON.parse(JSON.stringify(router.query));
if (Object.keys(router.query).length) { if (Object.keys(router.query).length) {
setFilterResult({ categoryId: [Number(queryVal['categoryId'])] }) setFilterResult({ categoryId: [Number(queryVal['categoryId'])] });
} }
}, [router]) }, [router]);
return ( return (
<Layout> <Layout>
...@@ -161,7 +152,7 @@ export default function EquipmentLeasing(props: Props) { ...@@ -161,7 +152,7 @@ export default function EquipmentLeasing(props: Props) {
leftRenderDom={{ leftRenderDom={{
columns: productList, columns: productList,
pagination: ( pagination: (
<div className="pagination-page"> <div className='pagination-page'>
<Pagination <Pagination
current={pageParams.pageNo} current={pageParams.pageNo}
pageSize={pageParams.pageSize} pageSize={pageParams.pageSize}
...@@ -180,5 +171,5 @@ export default function EquipmentLeasing(props: Props) { ...@@ -180,5 +171,5 @@ export default function EquipmentLeasing(props: Props) {
</div> </div>
</Box> </Box>
</Layout> </Layout>
) );
} }
pages/equipmentLeasing/styled.tsx
import styled from 'styled-components' import styled from 'styled-components';
export default function Style() { export default function Style() {
return <></> return <></>;
} }
export const Box = styled.div` export const Box = styled.div`
...@@ -76,4 +76,4 @@ export const Box = styled.div` ...@@ -76,4 +76,4 @@ export const Box = styled.div`
.pagination-page { .pagination-page {
text-align: right; text-align: right;
} }
` `;
pages/flyingHandService/api/index.tsx
import request, { Response } from '~/api/request' import request, { Response } from '~/api/request';
import { TypesResp } from '~/components/filter/api' import { TypesResp } from '~/components/filter/api';
export interface ListPageFlyingInfoParams { export interface ListPageFlyingInfoParams {
pageNo: number pageNo: number;
pageSize: number pageSize: number;
flightSkillsId?: number flightSkillsId?: number;
licenseId?: number licenseId?: number;
regionId?: number regionId?: number;
} }
export interface Flying { export interface Flying {
id: number id: number;
price: number price: number;
supplierName: string supplierName: string;
curriculumName: string curriculumName: string;
free: 0 | 1 free: 0 | 1;
curriculumDesc: string curriculumDesc: string;
videoUrl: string videoUrl: string;
surfaceUrl: string surfaceUrl: string;
} }
export interface ListPageFlyingInfoResp { export interface ListPageFlyingInfoResp {
pageNo: 1 pageNo: 1;
pageSize: 10 pageSize: 10;
list: Array<Flying> list: Array<Flying>;
totalCount: 0 totalCount: 0;
totalPage: 0 totalPage: 0;
} }
export interface SkillsType { export interface SkillsType {
type: string type: string;
id: number id: number;
skillsName: string skillsName: string;
label: string | number label: string | number;
value: string | number value: string | number;
} }
export interface RegionResp { export interface RegionResp {
childInfo: RegionResp[] | null childInfo: RegionResp[] | null;
id: number id: number;
level: number level: number;
name: string name: string;
pid: number pid: number;
} }
export interface PilotRegistrationParams { export interface PilotRegistrationParams {
city?: number city?: number;
drivingLicense?: number drivingLicense?: number;
industryAppAuth?: Array<number> industryAppAuth?: Array<number>;
province?: number province?: number;
remark?: string remark?: string;
telephone?: string telephone?: string;
uavLicenseLevelOne?: number uavLicenseLevelOne?: number;
uavLicenseLevelTwo?: number uavLicenseLevelTwo?: number;
} }
export default { export default {
//web-飞手培训-分页 //web-飞手培训-分页
listPageJobServicesInfo: ( listPageJobServicesInfo: (
params: ListPageFlyingInfoParams params: ListPageFlyingInfoParams,
): Promise<Response<ListPageFlyingInfoResp>> => { ): Promise<Response<ListPageFlyingInfoResp>> => {
return request( return request('/release/curriculum/queryCurriculumInfoList', 'post', params);
'/release/curriculum/queryCurriculumInfoList',
'post',
params
)
}, },
region: (): Promise<Response<Array<RegionResp>>> => { region: (): Promise<Response<Array<RegionResp>>> => {
return request('/pms/webDevice/getSecondDistrictInfo') return request('/pms/webDevice/getSecondDistrictInfo');
}, },
PilotLicense: (): Promise<Response<Array<RegionResp>>> => { PilotLicense: (): Promise<Response<Array<RegionResp>>> => {
return request('/release/curriculum/getDronePilotLicense') return request('/release/curriculum/getDronePilotLicense');
}, },
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => { IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getIndustryFlightSkills') return request('/release/curriculum/getIndustryFlightSkills');
}, },
PilotRegistrations: ( PilotRegistrations: (params: PilotRegistrationParams): Promise<Response<Array<SkillsType>>> => {
params: PilotRegistrationParams return request('/release/curriculum/pilotRegistration', 'post', params);
): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/pilotRegistration', 'post', params)
}, },
FlightSkills: (params: { type: 3 }): Promise<Response<Array<TypesResp>>> => { FlightSkills: (params: { type: 3 }): Promise<Response<Array<TypesResp>>> => {
return request('/pms/classify/queryCategoryInfoByType', 'get', params) return request('/pms/classify/queryCategoryInfoByType', 'get', params);
}, },
} };
pages/flyingHandService/detail/[id].page.tsx
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react';
import Layout from '~/components/layout' import Layout from '~/components/layout';
import { Box } from './styled' import { Box } from './styled';
import { Button, Tabs } from 'antd' import { Button, Tabs } from 'antd';
import { useRouter } from 'next/router' import { useRouter } from 'next/router';
import { ParsedUrlQuery } from 'querystring' import { ParsedUrlQuery } from 'querystring';
import type { TabsProps } from 'antd' import type { TabsProps } from 'antd';
import api, { ListPageFlyingInfoResp } from './api' import api, { ListPageFlyingInfoResp } from './api';
const contentStyle: React.CSSProperties = { const contentStyle: React.CSSProperties = {
width: '100%', width: '100%',
} };
export default function FlyingDetail() { export default function FlyingDetail() {
const router = useRouter() const router = useRouter();
const [detail, setDetail] = useState<ListPageFlyingInfoResp | null>() const [detail, setDetail] = useState<ListPageFlyingInfoResp | null>();
const onChange = (key: string) => { const onChange = (key: string) => {
console.log(key) console.log(key);
} };
const items: TabsProps['items'] = [ const items: TabsProps['items'] = [
{ {
key: '1', key: '1',
label: `介绍`, label: `介绍`,
children: ( children: (
<div className="body"> <div className='body'>
<div className="top"> <div className='top'>
<div className="title">课程简介</div> <div className='title'>课程简介</div>
<div className="content">{detail?.curriculumDesc}</div> <div className='content'>{detail?.curriculumDesc}</div>
</div> </div>
{/* <div className="bottom">详情</div> */} {/* <div className="bottom">详情</div> */}
{detail?.detailContent && ( {detail?.detailContent && (
<div <div dangerouslySetInnerHTML={{ __html: detail?.detailContent }}></div>
dangerouslySetInnerHTML={{ __html: detail?.detailContent }}
></div>
)} )}
</div> </div>
), ),
}, },
] ];
useEffect(() => { useEffect(() => {
if (Object.keys(router.query).length) { if (Object.keys(router.query).length) {
api api.listPageJobServicesInfo({ id: Number(router.query.id) }).then((res) => {
.listPageJobServicesInfo({ id: Number(router.query.id) }) console.log(res);
.then((res) => { setDetail(res.result);
console.log(res) });
setDetail(res.result)
})
} }
}, [router]) }, [router]);
return ( return (
<Layout contentStyle={contentStyle}> <Layout contentStyle={contentStyle}>
<Box> <Box>
<div className="box"> <div className='box'>
<div className="box-body"> <div className='box-body'>
<video <video className='body-video' controls src={detail?.videoUrl as string} />
className="body-video"
controls
src={detail?.videoUrl as string}
/>
</div> </div>
<div className="box-bottom"> <div className='box-bottom'>
<div className="left"> <div className='left'>
<div className="top">{detail?.curriculumName}</div> <div className='top'>{detail?.curriculumName}</div>
<div className="bottom">免费</div> <div className='bottom'>免费</div>
</div> </div>
<div className="right"> <div className='right'>
{/* <Button {/* <Button
type="primary" type="primary"
className="btn" className="btn"
...@@ -78,15 +70,10 @@ export default function FlyingDetail() { ...@@ -78,15 +70,10 @@ export default function FlyingDetail() {
</div> </div>
</div> </div>
</div> </div>
<div className="detail"> <div className='detail'>
<Tabs <Tabs className='tabs' defaultActiveKey='1' items={items} onChange={onChange} />
className="tabs"
defaultActiveKey="1"
items={items}
onChange={onChange}
/>
</div> </div>
</Box> </Box>
</Layout> </Layout>
) );
} }
pages/flyingHandService/detail/api/index.tsx
import request, { Response } from '~/api/request' import request, { Response } from '~/api/request';
export interface ListPageFlyingInfoParams { export interface ListPageFlyingInfoParams {
id: number id: number;
} }
export interface Flying { export interface Flying {
id: number id: number;
price: number price: number;
supplierName: string supplierName: string;
curriculumName: string curriculumName: string;
free: 0 | 1 free: 0 | 1;
curriculumDesc: string curriculumDesc: string;
videoUrl: string videoUrl: string;
} }
export interface ListPageFlyingInfoResp { export interface ListPageFlyingInfoResp {
id: number id: number;
price: number | null price: number | null;
supplierName: string supplierName: string;
curriculumName: string curriculumName: string;
free: number free: number;
flightSkills: number flightSkills: number;
flightSkillsName1: string flightSkillsName1: string;
flightSkillsName2: string flightSkillsName2: string;
curriculumDesc: string curriculumDesc: string;
surfaceUrl: string | null surfaceUrl: string | null;
videoUrl: string videoUrl: string;
detailContent: null detailContent: null;
} }
export default { export default {
//web-飞手培训-详情 //web-飞手培训-详情
listPageJobServicesInfo: ( listPageJobServicesInfo: (
params: ListPageFlyingInfoParams params: ListPageFlyingInfoParams,
): Promise<Response<ListPageFlyingInfoResp>> => { ): Promise<Response<ListPageFlyingInfoResp>> => {
return request('/release/curriculum/curriculumDetails', 'get', params) return request('/release/curriculum/curriculumDetails', 'get', params);
}, },
} };
pages/flyingHandService/detail/styled.tsx
import styled from 'styled-components' import styled from 'styled-components';
export default function Style() { export default function Style() {
return <></> return <></>;
} }
export const Box = styled.div` export const Box = styled.div`
...@@ -104,4 +104,4 @@ export const Box = styled.div` ...@@ -104,4 +104,4 @@ export const Box = styled.div`
} }
} }
} }
` `;
pages/flyingHandService/examination/[id].page.tsx
import React from "react"; import React from 'react';
import Layout from "~/components/layout"; import Layout from '~/components/layout';
import { Box } from "./styled"; import { Box } from './styled';
import BrushQuestionZone from './components/brushQuestionZone' import BrushQuestionZone from './components/brushQuestionZone';
import MockExam from './components/mockExam' import MockExam from './components/mockExam';
import { Tabs } from "antd"; import { Tabs } from 'antd';
import type { TabsProps } from "antd"; import type { TabsProps } from 'antd';
export default function ExaminationDateil() { export default function ExaminationDateil() {
const onChange = (key: string) => { const onChange = (key: string) => {
console.log(key); console.log(key);
}; };
const items: TabsProps["items"] = [ const items: TabsProps['items'] = [
{ {
key: "1", key: '1',
label: `刷题专区`, label: `刷题专区`,
children: <BrushQuestionZone />, children: <BrushQuestionZone />,
}, },
{ {
key: "2", key: '2',
label: `模拟考试`, label: `模拟考试`,
children: <MockExam />, children: <MockExam />,
}, },
...@@ -26,12 +26,7 @@ export default function ExaminationDateil() { ...@@ -26,12 +26,7 @@ export default function ExaminationDateil() {
return ( return (
<Layout> <Layout>
<Box> <Box>
<Tabs <Tabs defaultActiveKey='1' items={items} onChange={onChange} centered size='large' />
defaultActiveKey="1"
items={items} onChange={onChange}
centered
size="large"
/>
</Box> </Box>
</Layout> </Layout>
); );
......
pages/flyingHandService/examination/components/brushQuestionZone/index.tsx
import React,{ useEffect ,useState} from 'react' import React, { useEffect, useState } from 'react';
import {Box} from './styled' import { Box } from './styled';
import {Cascader,Select} from 'antd' import { Cascader, Select } from 'antd';
import api, { Flying, SkillsType, RegionResp } from "../../../api"; import api, { Flying, SkillsType, RegionResp } from '../../../api';
import Image from 'next/image' import Image from 'next/image';
import xt from './assets/xt.png' import xt from './assets/xt.png';
interface BrushQuestionZoneType { interface BrushQuestionZoneType {}
}
export default function BrushQuestionZone() { export default function BrushQuestionZone() {
const [secondDistrictInfo, setSecondDistrictInfo] = useState( const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp>);
Array<RegionResp>
);
const [skills, setSkills] = useState(Array<RegionResp>); const [skills, setSkills] = useState(Array<RegionResp>);
const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>); const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>);
...@@ -38,16 +34,16 @@ export default function BrushQuestionZone() { ...@@ -38,16 +34,16 @@ export default function BrushQuestionZone() {
}, []); }, []);
return ( return (
<Box> <Box>
<div className="title"> <div className='title'>
<Cascader <Cascader
allowClear allowClear
placeholder="地域" placeholder='地域'
className="selectItem" className='selectItem'
size="large" size='large'
fieldNames={{ fieldNames={{
label: "name", label: 'name',
value: "id", value: 'id',
children: "childInfo", children: 'childInfo',
}} }}
options={secondDistrictInfo} options={secondDistrictInfo}
// onChange={onChange} // onChange={onChange}
...@@ -55,51 +51,51 @@ export default function BrushQuestionZone() { ...@@ -55,51 +51,51 @@ export default function BrushQuestionZone() {
/> />
<Cascader <Cascader
allowClear allowClear
placeholder="考证" placeholder='考证'
className="selectItem" className='selectItem'
size="large" size='large'
fieldNames={{ fieldNames={{
label: "licenseType", label: 'licenseType',
value: "id", value: 'id',
children: "childLicenses", children: 'childLicenses',
}} }}
options={skills} options={skills}
// onChange={onChange} // onChange={onChange}
changeOnSelect changeOnSelect
/> />
<Select <Select
className="selectItem" className='selectItem'
popupMatchSelectWidth={false} popupMatchSelectWidth={false}
placeholder="技能" placeholder='技能'
size="large" size='large'
// onChange={(value) => onProvinceChange(value, "技能")} // onChange={(value) => onProvinceChange(value, "技能")}
options={flightSkillsList} options={flightSkillsList}
fieldNames={{ value: "id", label: "skillsName" }} fieldNames={{ value: 'id', label: 'skillsName' }}
allowClear allowClear
/> />
<Cascader <Cascader
allowClear allowClear
placeholder="选择课程" placeholder='选择课程'
className="selectItem" className='selectItem'
style={{ width: 200 }} style={{ width: 200 }}
size="large" size='large'
fieldNames={{ fieldNames={{
label: "name", label: 'name',
value: "id", value: 'id',
children: "childInfo", children: 'childInfo',
}} }}
options={secondDistrictInfo} options={secondDistrictInfo}
// onChange={onChange} // onChange={onChange}
changeOnSelect changeOnSelect
/> />
</div> </div>
<div className="content"> <div className='content'>
{list?.map((item, i) => ( {list?.map((item, i) => (
<div key={i} className="item"> <div key={i} className='item'>
<div className="img-box"><Image src={xt.src} fill alt='#'></Image> </div> <div className='img-box'>
<div className="item-content"> <Image src={xt.src} fill alt='#'></Image>{' '}
第一章 第1节 习题练习习题练习习题练习
</div> </div>
<div className='item-content'>第一章 第1节 习题练习习题练习习题练习</div>
</div> </div>
))} ))}
</div> </div>
......
pages/flyingHandService/examination/components/brushQuestionZone/styled.tsx
import styled from "styled-components"; import styled from 'styled-components';
export default function Style() { export default function Style() {
return <></>; return <></>;
...@@ -8,10 +8,10 @@ export const Box = styled.div` ...@@ -8,10 +8,10 @@ export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
width: 1200px; width: 1200px;
height: 859px; height: 859px;
background: #FFFFFF; background: #ffffff;
border-radius: 6px; border-radius: 6px;
padding: 32px 26px 32px 24px; padding: 32px 26px 32px 24px;
.title{ .title {
display: flex; display: flex;
align-items: center; align-items: center;
height: 60px; height: 60px;
...@@ -27,16 +27,16 @@ export const Box = styled.div` ...@@ -27,16 +27,16 @@ export const Box = styled.div`
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
} }
.ant-select-selection-item{ .ant-select-selection-item {
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
} }
.ant-select-selector{ .ant-select-selector {
height: 60px; height: 60px;
} }
} }
} }
.content{ .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 32px; margin-top: 32px;
...@@ -44,19 +44,19 @@ export const Box = styled.div` ...@@ -44,19 +44,19 @@ export const Box = styled.div`
display: flex; display: flex;
width: 360px; width: 360px;
height: 100px; height: 100px;
background: #FFFFFF; background: #ffffff;
border: 1px solid #F0F0F0; border: 1px solid #f0f0f0;
margin: 0 16px 20px 0; margin: 0 16px 20px 0;
&:nth-child(3n){ &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
.img-box{ .img-box {
width: 120px; width: 120px;
height: 100px; height: 100px;
background: #E6E6E6; background: #e6e6e6;
position: relative; position: relative;
} }
.item-content{ .item-content {
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
...@@ -64,4 +64,4 @@ export const Box = styled.div` ...@@ -64,4 +64,4 @@ export const Box = styled.div`
} }
} }
} }
` `;
\ No newline at end of file
pages/flyingHandService/examination/components/mockExam/index.tsx
import React , {useEffect,useState} from 'react' import React, { useEffect, useState } from 'react';
import {Box} from './styled' import { Box } from './styled';
import Image from 'next/image' import Image from 'next/image';
import kh from './assets/kh.jpg' import kh from './assets/kh.jpg';
interface MockExamType { interface MockExamType {}
}
export default function MockExam() { export default function MockExam() {
const [list, setList] = useState<Array<MockExamType>>(); const [list, setList] = useState<Array<MockExamType>>();
...@@ -14,15 +12,17 @@ export default function MockExam() { ...@@ -14,15 +12,17 @@ export default function MockExam() {
}, []); }, []);
return ( return (
<Box> <Box>
<div className="content"> <div className='content'>
{list?.map((item, i) => ( {list?.map((item, i) => (
<div key={i} className="item"> <div key={i} className='item'>
<div className="img-box"><Image src={kh.src} fill alt='#'></Image></div> <div className='img-box'>
<div className="item-content"> <Image src={kh.src} fill alt='#'></Image>
<div className="top">云飞手行业认证考核</div> </div>
<div className="bottom"> <div className='item-content'>
<div className="user-img"></div> <div className='top'>云飞手行业认证考核</div>
<div className="application">77人报名</div> <div className='bottom'>
<div className='user-img'></div>
<div className='application'>77人报名</div>
</div> </div>
</div> </div>
</div> </div>
......
pages/flyingHandService/examination/components/mockExam/styled.tsx
import styled from "styled-components"; import styled from 'styled-components';
export default function Style() { export default function Style() {
return <></>; return <></>;
...@@ -10,57 +10,57 @@ export const Box = styled.div` ...@@ -10,57 +10,57 @@ export const Box = styled.div`
background-color: #fff; background-color: #fff;
min-height: 845px; min-height: 845px;
border-radius: 6px; border-radius: 6px;
.content{ .content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.item { .item {
display: flex; display: flex;
width: 360px; width: 360px;
height: 100px; height: 100px;
background: #FFFFFF; background: #ffffff;
border: 1px solid #F0F0F0; border: 1px solid #f0f0f0;
margin: 0 16px 20px 0; margin: 0 16px 20px 0;
&:nth-child(3n){ &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
.img-box{ .img-box {
width: 120px; width: 120px;
height: 100px; height: 100px;
background: #E6E6E6; background: #e6e6e6;
position: relative; position: relative;
} }
.item-content{ .item-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
flex: 1; flex: 1;
padding: 12px 14px 11px 16px; padding: 12px 14px 11px 16px;
.top{ .top {
width: 200px; width: 200px;
height: 20px; height: 20px;
font-size: 16px; font-size: 16px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #34383F; color: #34383f;
line-height: 20px; line-height: 20px;
letter-spacing: 1px; letter-spacing: 1px;
-webkit-background-clip: text; -webkit-background-clip: text;
} }
.bottom{ .bottom {
display: flex; display: flex;
align-items: center; align-items: center;
.user-img{ .user-img {
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background-color: pink; background-color: pink;
} }
.application{ .application {
margin-left: 6px; margin-left: 6px;
height: 16px; height: 16px;
font-size: 11px; font-size: 11px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #FE6000; color: #fe6000;
line-height: 16px; line-height: 16px;
} }
} }
......
pages/flyingHandService/examination/styled.tsx
import styled from "styled-components"; import styled from 'styled-components';
export default function Style() { export default function Style() {
return <></>; return <></>;
......
pages/flyingHandService/styled.tsx
import styled from "styled-components"; import styled from 'styled-components';
export default function Style() { export default function Style() {
return <></>; return <></>;
......
pages/forum/api/index.tsx
import request, { Response } from "~/api/request"; import request, { Response } from '~/api/request';
export interface DynamicListParams { export interface DynamicListParams {
pageNo: number; pageNo: number;
...@@ -22,10 +22,10 @@ export interface Dynamic { ...@@ -22,10 +22,10 @@ export interface Dynamic {
commentCount: number; commentCount: number;
likes: boolean; likes: boolean;
userBaseInfo: { userBaseInfo: {
id: number, id: number;
nickName: string, nickName: string;
userImg: string userImg: string;
} };
} }
export interface DynamicListResp { export interface DynamicListResp {
...@@ -52,10 +52,10 @@ export interface ByDynamicResp { ...@@ -52,10 +52,10 @@ export interface ByDynamicResp {
createTime: string; createTime: string;
children: ByDynamicResp[]; children: ByDynamicResp[];
userBaseInfoVO: { userBaseInfoVO: {
id: number, id: number;
nickName: string, nickName: string;
userImg: string userImg: string;
} };
} }
export default { export default {
...@@ -65,23 +65,21 @@ export default { ...@@ -65,23 +65,21 @@ export default {
* @returns * @returns
*/ */
dynamicList(params: DynamicListParams): Promise<Response<DynamicListResp>> { dynamicList(params: DynamicListParams): Promise<Response<DynamicListResp>> {
return request("/release/dynamic/dynamicList", "get", params); return request('/release/dynamic/dynamicList', 'get', params);
}, },
//评论 //评论
comment(params: CommentParams): Promise<Response<null>> { comment(params: CommentParams): Promise<Response<null>> {
return request("/release/dynamic/comment", "post", params); return request('/release/dynamic/comment', 'post', params);
}, },
//根据动态查看评论 //根据动态查看评论
byDynamic(params: { byDynamic(params: { dynamicId: number }): Promise<Response<Array<ByDynamicResp>>> {
dynamicId: number; return request('/release/dynamic/byDynamic', 'get', params);
}): Promise<Response<Array<ByDynamicResp>>> {
return request("/release/dynamic/byDynamic", "get", params);
}, },
//点赞或取消点赞 //点赞或取消点赞
likeOrCancel(params: { dynamicId: number }) { likeOrCancel(params: { dynamicId: number }) {
return request("/release/dynamic/likeOrCancel", "get", params); return request('/release/dynamic/likeOrCancel', 'get', params);
}, },
}; };
pages/forum/components/publishMessage/api/index.tsx
import request, { Response } from "~/api/request"; import request, { Response } from '~/api/request';
export interface PublishParams { export interface PublishParams {
lat?: number; //纬度 lat?: number; //纬度
...@@ -14,6 +14,6 @@ export interface PublishParams { ...@@ -14,6 +14,6 @@ export interface PublishParams {
export default { export default {
//动态发布 //动态发布
publish(params: PublishParams): Promise<Response<null>> { publish(params: PublishParams): Promise<Response<null>> {
return request("/release/dynamic/publish", "post", params); return request('/release/dynamic/publish', 'post', params);
}, },
}; };
pages/forum/components/publishMessage/index.tsx
import { PlusOutlined } from "@ant-design/icons"; import { PlusOutlined } from '@ant-design/icons';
import { Form, Input, Modal, Upload, Image, Button, Row, Col } from "antd"; import { Form, Input, Modal, Upload, Image, Button, Row, Col } from 'antd';
import type { RcFile, UploadProps } from "antd/es/upload"; import type { RcFile, UploadProps } from 'antd/es/upload';
import type { UploadFile } from "antd/es/upload/interface"; import type { UploadFile } from 'antd/es/upload/interface';
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from 'react';
import gApi from "~/api"; import gApi from '~/api';
import NImage from "next/image"; import NImage from 'next/image';
import api from "./api"; import api from './api';
import { useGeolocation } from "~/lib/hooks"; import { useGeolocation } from '~/lib/hooks';
import { UserContext } from "~/lib/userProvider"; import { UserContext } from '~/lib/userProvider';
import { useToken } from "antd/es/theme/internal"; import { useToken } from 'antd/es/theme/internal';
type Props = { type Props = {
open: boolean; open: boolean;
...@@ -17,7 +17,7 @@ type Props = { ...@@ -17,7 +17,7 @@ type Props = {
}; };
const normFile = (e: any) => { const normFile = (e: any) => {
console.log("Upload event:", e); console.log('Upload event:', e);
if (Array.isArray(e)) { if (Array.isArray(e)) {
return e; return e;
} }
...@@ -27,8 +27,8 @@ const normFile = (e: any) => { ...@@ -27,8 +27,8 @@ const normFile = (e: any) => {
export default function PublishMessage(props: Props) { export default function PublishMessage(props: Props) {
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [previewOpen, setPreviewOpen] = useState(false); const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState(""); const [previewImage, setPreviewImage] = useState('');
const [previewTitle, setPreviewTitle] = useState(""); const [previewTitle, setPreviewTitle] = useState('');
const [fileList, setFileList] = useState<UploadFile[]>([]); const [fileList, setFileList] = useState<UploadFile[]>([]);
const [showLoading, setShowLoad] = useState(false); const [showLoading, setShowLoad] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
...@@ -38,7 +38,7 @@ export default function PublishMessage(props: Props) { ...@@ -38,7 +38,7 @@ export default function PublishMessage(props: Props) {
useEffect(() => { useEffect(() => {
setToken(window.localStorage.getItem('token') || ''); setToken(window.localStorage.getItem('token') || '');
}, []) }, []);
//预览关闭 //预览关闭
const handlePreviewCancel = () => setPreviewOpen(false); const handlePreviewCancel = () => setPreviewOpen(false);
...@@ -48,16 +48,14 @@ export default function PublishMessage(props: Props) { ...@@ -48,16 +48,14 @@ export default function PublishMessage(props: Props) {
if (file.url) { if (file.url) {
setPreviewImage(file.url); setPreviewImage(file.url);
setPreviewOpen(true); setPreviewOpen(true);
setPreviewTitle( setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
file.name || file.url!.substring(file.url!.lastIndexOf("/") + 1)
);
} }
}; };
//图片上传 //图片上传
const handleChange: UploadProps["onChange"] = (info) => { const handleChange: UploadProps['onChange'] = (info) => {
console.log("uploadChange", info); console.log('uploadChange', info);
if (info.file.status === "uploading") { if (info.file.status === 'uploading') {
let find = fileList.find((item) => { let find = fileList.find((item) => {
return item.uid === info.file.uid; return item.uid === info.file.uid;
}); });
...@@ -65,9 +63,9 @@ export default function PublishMessage(props: Props) { ...@@ -65,9 +63,9 @@ export default function PublishMessage(props: Props) {
setFileList([...fileList, info.file]); setFileList([...fileList, info.file]);
} }
return; return;
} else if (info.file.status === "done") { } else if (info.file.status === 'done') {
// Get this url from response in real world. // Get this url from response in real world.
if (info.file.response.code === "200" && info.file.response.result) { if (info.file.response.code === '200' && info.file.response.result) {
let fileList1 = fileList.map((item) => { let fileList1 = fileList.map((item) => {
if (item.uid === info.file.uid) { if (item.uid === info.file.uid) {
info.file.url = info.file.response.result?.[0]; info.file.url = info.file.response.result?.[0];
...@@ -77,7 +75,7 @@ export default function PublishMessage(props: Props) { ...@@ -77,7 +75,7 @@ export default function PublishMessage(props: Props) {
}); });
setFileList([...fileList1]); setFileList([...fileList1]);
} else { } else {
window.messageApi.error(info.file.response?.message || "上传失败"); window.messageApi.error(info.file.response?.message || '上传失败');
info.fileList = fileList.filter((item) => { info.fileList = fileList.filter((item) => {
return item.uid !== info.file.uid; return item.uid !== info.file.uid;
}); });
...@@ -98,27 +96,25 @@ export default function PublishMessage(props: Props) { ...@@ -98,27 +96,25 @@ export default function PublishMessage(props: Props) {
.publish({ .publish({
lat: position?.position?.lat, //纬度 lat: position?.position?.lat, //纬度
lon: position?.position?.lng, //经度 lon: position?.position?.lng, //经度
title: "", //标题 title: '', //标题
description: values.description, //描述 description: values.description, //描述
userId: userInfo.id, //用户id userId: userInfo.id, //用户id
mediaVO: { mediaVO: {
//发布图片 //发布图片
//@ts-ignore //@ts-ignore
picture: fileList picture: fileList.filter((item) => item.url).map((item) => item.url),
.filter((item) => item.url)
.map((item) => item.url),
}, },
}) })
.then((res) => { .then((res) => {
console.log("提交结果", res); console.log('提交结果', res);
setShowLoad(false); setShowLoad(false);
if (res.code === "200") { if (res.code === '200') {
window.messageApi.success("发布成功"); window.messageApi.success('发布成功');
props.onCancel(); props.onCancel();
props.onOk && props.onOk(); props.onOk && props.onOk();
setTimeout(() => { setTimeout(() => {
form.resetFields(["title", "description"]); form.resetFields(['title', 'description']);
setFileList([]); setFileList([]);
}, 500); }, 500);
} }
...@@ -128,35 +124,31 @@ export default function PublishMessage(props: Props) { ...@@ -128,35 +124,31 @@ export default function PublishMessage(props: Props) {
return ( return (
<Modal <Modal
title="" title=''
open={props.open} open={props.open}
onCancel={props.onCancel} onCancel={props.onCancel}
width={500} width={500}
confirmLoading={confirmLoading} confirmLoading={confirmLoading}
footer={null} footer={null}
okButtonProps={{ style: { height: 37, padding: "0 32px", fontSize: 16 } }} okButtonProps={{ style: { height: 37, padding: '0 32px', fontSize: 16 } }}
cancelButtonProps={{ style: { display: "none" } }} cancelButtonProps={{ style: { display: 'none' } }}
maskClosable={false} maskClosable={false}
> >
<Form style={{ paddingTop: 32 }} onFinish={onFinish} form={form}> <Form style={{ paddingTop: 32 }} onFinish={onFinish} form={form}>
<Form.Item <Form.Item name='description' rules={[{ required: true }]} help='请输入内容'>
name="description"
rules={[{ required: true }]}
help="请输入内容"
>
<Input.TextArea <Input.TextArea
allowClear allowClear
showCount showCount
placeholder="输入内容" placeholder='输入内容'
maxLength={100} maxLength={100}
style={{ height: 120, resize: "none" }} style={{ height: 120, resize: 'none' }}
></Input.TextArea> ></Input.TextArea>
</Form.Item> </Form.Item>
<Form.Item valuePropName="picture" getValueFromEvent={normFile}> <Form.Item valuePropName='picture' getValueFromEvent={normFile}>
<Upload <Upload
name="uploadFile" name='uploadFile'
action={gApi.imgOss} action={gApi.imgOss}
listType="picture-card" listType='picture-card'
fileList={fileList} fileList={fileList}
onPreview={handlePreview} onPreview={handlePreview}
onChange={handleChange} onChange={handleChange}
...@@ -175,27 +167,27 @@ export default function PublishMessage(props: Props) { ...@@ -175,27 +167,27 @@ export default function PublishMessage(props: Props) {
title={previewTitle} title={previewTitle}
footer={null} footer={null}
onCancel={handlePreviewCancel} onCancel={handlePreviewCancel}
bodyStyle={{ textAlign: "center" }} bodyStyle={{ textAlign: 'center' }}
> >
<Image alt="example" src={previewImage} preview={false} /> <Image alt='example' src={previewImage} preview={false} />
</Modal> </Modal>
</Form.Item> </Form.Item>
<Row justify="space-between" align="middle"> <Row justify='space-between' align='middle'>
<Col> <Col>
<NImage <NImage
style={{ verticalAlign: "text-top", marginRight: 7 }} style={{ verticalAlign: 'text-top', marginRight: 7 }}
alt="" alt=''
src={require("./assets/position.png")} src={require('./assets/position.png')}
width={14} width={14}
height={17} height={17}
/> />
{position?.address?.formattedAddress || "位置"} {position?.address?.formattedAddress || '位置'}
</Col> </Col>
<Col> <Col>
<Button <Button
type="primary" type='primary'
htmlType="submit" htmlType='submit'
size="large" size='large'
style={{ width: 95 }} style={{ width: 95 }}
loading={showLoading} loading={showLoading}
> >
......
pages/home/styled.tsx
import styled from "styled-components" import styled from 'styled-components';
export default function Style() { export default function Style() {
return <></>; return <></>;
...@@ -6,4 +6,4 @@ export default function Style() { ...@@ -6,4 +6,4 @@ export default function Style() {
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
` `;
\ No newline at end of file
pages/home/waterfallFlowBody/api/index.ts
import request, { Response } from '~/api/request' import request, { Response } from '~/api/request';
export interface AllType { export interface AllType {
categoryName: string categoryName: string;
id: number id: number;
} }
export interface FilterOptionResp { export interface FilterOptionResp {
type: string type: string;
id: number id: number;
name: string name: string;
} }
export interface RegionResp { export interface RegionResp {
childInfo: RegionResp[] | null childInfo: RegionResp[] | null;
id: number id: number;
level: number level: number;
name: string name: string;
pid: number pid: number;
} }
export const equipmentLeasingApi = { export const equipmentLeasingApi = {
deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => { deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/deviceBrand') return request('/pms/webDevice/deviceBrand');
}, },
// deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => { // deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
// return request("/pms/webDevice/category"); // return request("/pms/webDevice/category");
// }, // },
deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => { deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/deviceModel') return request('/pms/webDevice/deviceModel');
}, },
} };
export interface AppType { export interface AppType {
id: number id: number;
name: string name: string;
appName: string appName: string;
createTime: string createTime: string;
type: string type: string;
} }
export interface IndustryType { export interface IndustryType {
id: number id: number;
industryIcon: string industryIcon: string;
name: string name: string;
shortName: string shortName: string;
industryType: string industryType: string;
propagate1: string propagate1: string;
propagate2: string propagate2: string;
image: string image: string;
video: string video: string;
type: string type: string;
appName: string appName: string;
} }
export const jobServicesApi = { export const jobServicesApi = {
listAllAppType: (): Promise<Response<Array<AppType>>> => { listAllAppType: (): Promise<Response<Array<AppType>>> => {
return request('/release/work/listAllAppType') return request('/release/work/listAllAppType');
}, },
listAllIndustry: (): Promise<Response<Array<IndustryType>>> => { listAllIndustry: (): Promise<Response<Array<IndustryType>>> => {
return request('/release/work/listAllIndustry') return request('/release/work/listAllIndustry');
}, },
} };
export const mallApi = { export const mallApi = {
listAllBrand: (): Promise<Response<Array<FilterOptionResp>>> => { listAllBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/brand') return request('/pms/webDevice/brand');
}, },
listAllCategory: (): Promise<Response<Array<FilterOptionResp>>> => { listAllCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/category') return request('/pms/webProductMall/category');
}, },
listAllParts: (): Promise<Response<Array<FilterOptionResp>>> => { listAllParts: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/parts') return request('/pms/webProductMall/parts');
}, },
listAllModel: (): Promise<Response<Array<FilterOptionResp>>> => { listAllModel: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webDevice/model') return request('/pms/webDevice/model');
}, },
listAllQuality: (): Promise<Response<Array<FilterOptionResp>>> => { listAllQuality: (): Promise<Response<Array<FilterOptionResp>>> => {
return request('/pms/webProductMall/quality') return request('/pms/webProductMall/quality');
}, },
} };
export interface SkillsType { export interface SkillsType {
name: string name: string;
type: string type: string;
id: number id: number;
skillsName: string skillsName: string;
licenseType: string licenseType: string;
} }
export const flightSkillsApi = { export const flightSkillsApi = {
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => { IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getIndustryFlightSkills') return request('/release/curriculum/getIndustryFlightSkills');
}, },
InDronePilotLicense: (): Promise<Response<Array<SkillsType>>> => { InDronePilotLicense: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getDronePilotLicense') return request('/release/curriculum/getDronePilotLicense');
}, },
} };
export interface NewsPageType { export interface NewsPageType {
id: number id: number;
newsTitle: string newsTitle: string;
newsAuthor: string newsAuthor: string;
userAccountId: number userAccountId: number;
surfaceImg: string surfaceImg: string;
newsContents: string newsContents: string;
createTime: string createTime: string;
updateTime: string | null updateTime: string | null;
} }
export interface NewsTenderType { export interface NewsTenderType {
id: number id: number;
tenderNewsId: number tenderNewsId: number;
tenderInfoNo: string tenderInfoNo: string;
tenderContent: string tenderContent: string;
tenderPrice: number tenderPrice: number;
createTime: string createTime: string;
apply: number apply: number;
} }
export interface ListPageNewsInfoResp { export interface ListPageNewsInfoResp {
pageNo: number pageNo: number;
pageSize: number pageSize: number;
list: Array<NewsPageType> list: Array<NewsPageType>;
totalCount: number totalCount: number;
totalPage: number totalPage: number;
} }
export interface ListTenderNewsInfoResp { export interface ListTenderNewsInfoResp {
pageNo: number pageNo: number;
pageSize: number pageSize: number;
list: Array<NewsTenderType> list: Array<NewsTenderType>;
totalCount: number totalCount: number;
totalPage: number totalPage: number;
} }
interface ListPageNewsInfoParams { interface ListPageNewsInfoParams {
pageNo: number pageNo: number;
pageSize: number pageSize: number;
cityCode?: number cityCode?: number;
date?: string date?: string;
districtCode?: number districtCode?: number;
provinceCode?: number provinceCode?: number;
} }
interface ListTenderNewsInfoParams { interface ListTenderNewsInfoParams {
pageNo: number pageNo: number;
pageSize: number pageSize: number;
cityCode?: number cityCode?: number;
date?: string date?: string;
districtCode?: number districtCode?: number;
provinceCode?: number provinceCode?: number;
} }
export interface TenderApplyType { export interface TenderApplyType {
tenderInfoId: number tenderInfoId: number;
tenderNewsId: number tenderNewsId: number;
userAccountId: number userAccountId: number;
} }
export const listNewsApi = { export const listNewsApi = {
//新闻列表 //新闻列表
listNewsPage: ( listNewsPage: (params: ListPageNewsInfoParams): Promise<Response<ListPageNewsInfoResp>> => {
params: ListPageNewsInfoParams return request('/release/industry-news/listNewsPage', 'post', params);
): Promise<Response<ListPageNewsInfoResp>> => {
return request('/release/industry-news/listNewsPage', 'post', params)
}, },
//招标列表 //招标列表
listNewTenderInfo: ( listNewTenderInfo: (
params: ListTenderNewsInfoParams params: ListTenderNewsInfoParams,
): Promise<Response<ListTenderNewsInfoResp>> => { ): Promise<Response<ListTenderNewsInfoResp>> => {
return request('/release/tender/listNewTenderInfo', 'post', params) return request('/release/tender/listNewTenderInfo', 'post', params);
}, },
//web-招标-合作申请提交 //web-招标-合作申请提交
tenderApply: (params: TenderApplyType): Promise<Response<number>> => { tenderApply: (params: TenderApplyType): Promise<Response<number>> => {
return request('/release/tender/apply', 'post', params) return request('/release/tender/apply', 'post', params);
}, },
} };
export interface HomeCategoriesType { export interface HomeCategoriesType {
type: 1 | 2 | 3 | 4 type: 1 | 2 | 3 | 4;
} }
export interface ResHomeCategoriesType { export interface ResHomeCategoriesType {
id: number id: number;
categoryName: string categoryName: string;
} }
export default { export default {
//新闻列表 //新闻列表
HomeCategories: ( HomeCategories: (params: HomeCategoriesType): Promise<Response<ResHomeCategoriesType>> => {
params: HomeCategoriesType return request('/pms/product/mall/getPageHomeCategories', 'get', params);
): Promise<Response<ResHomeCategoriesType>> => {
return request('/pms/product/mall/getPageHomeCategories', 'get', params)
}, },
} };
pages/home/waterfallFlowBody/components/map/api/index.tsx
import request, { Response } from '~/api/request' import request, { Response } from '~/api/request';
export interface PositioningInfoParams { export interface PositioningInfoParams {
lat: number lat: number;
lon: number lon: number;
pageNo: number pageNo: number;
pageSize: number pageSize: number;
} }
export interface Entiy { export interface Entiy {
dizhi: string dizhi: string;
jd: number jd: number;
wd: number wd: number;
range: number range: number;
} }
export interface ListPageJobInfoType { export interface ListPageJobInfoType {
address: string address: string;
name: string name: string;
lon: number lon: number;
lat: number lat: number;
distance: number distance: number;
} }
export interface FlyerBitmapEntiy { export interface FlyerBitmapEntiy {
flyerName: string flyerName: string;
phoneNum: string phoneNum: string;
lon: number lon: number;
lat: number lat: number;
distance: number distance: number;
} }
export interface UavBitmapEntiy { export interface UavBitmapEntiy {
uavName: string uavName: string;
online: number online: number;
lon: number lon: number;
lat: number lat: number;
distance: number distance: number;
id: string id: string;
} }
export interface BitmapInfo<T> { export interface BitmapInfo<T> {
pageNo: number pageNo: number;
pageSize: number pageSize: number;
list: T[] list: T[];
totalCount: number totalCount: number;
totalPage: number totalPage: number;
} }
export default { export default {
//web-首页-地图-全国点位 //web-首页-地图-全国点位
listPositioningInfo: ( listPositioningInfo: (
params: PositioningInfoParams params: PositioningInfoParams,
): Promise<Response<BitmapInfo<ListPageJobInfoType>>> => { ): Promise<Response<BitmapInfo<ListPageJobInfoType>>> => {
return request('/release/website/getWebsiteList', 'get', params) return request('/release/website/getWebsiteList', 'get', params);
}, },
//web-首页-地图-全国飞手 //web-首页-地图-全国飞手
listFlyerBitmap: ( listFlyerBitmap: (
params: PositioningInfoParams params: PositioningInfoParams,
): Promise<Response<BitmapInfo<FlyerBitmapEntiy>>> => { ): Promise<Response<BitmapInfo<FlyerBitmapEntiy>>> => {
return request('/release/website/flyer/bitmap', 'get', params) return request('/release/website/flyer/bitmap', 'get', params);
}, },
//web-首页-地图-全国无人机 //web-首页-地图-全国无人机
listUavBitmap: ( listUavBitmap: (params: PositioningInfoParams): Promise<Response<BitmapInfo<UavBitmapEntiy>>> => {
params: PositioningInfoParams return request('/release/website/uav/bitmap', 'get', params);
): Promise<Response<BitmapInfo<UavBitmapEntiy>>> => {
return request('/release/website/uav/bitmap', 'get', params)
}, },
//web-首页-地图-全国维修-海点数据 //web-首页-地图-全国维修-海点数据
listMaintainBitmap: ( listMaintainBitmap: (
params: PositioningInfoParams params: PositioningInfoParams,
): Promise<Response<BitmapInfo<ListPageJobInfoType>>> => { ): Promise<Response<BitmapInfo<ListPageJobInfoType>>> => {
return request('/release/website/maintain/bitmap', 'get', params) return request('/release/website/maintain/bitmap', 'get', params);
}, },
} };
pages/home/waterfallFlowBody/components/map/index.tsx
import React, { Component, useEffect, useState } from 'react' import React, { Component, useEffect, useState } from 'react';
import { message } from 'antd' import { message } from 'antd';
import { Box } from './styled' import { Box } from './styled';
import api from './api' import api from './api';
import icon from './assets/img.png' import icon from './assets/img.png';
import { useRouter } from 'next/router' import { useRouter } from 'next/router';
let MAP: any let MAP: any;
let Amap: any let Amap: any;
interface UserInfoType { interface UserInfoType {
lat: number lat: number;
lon: number lon: number;
pageNo?: number pageNo?: number;
pageSize?: number pageSize?: number;
} }
export default function MapComponent() { export default function MapComponent() {
const router = useRouter() const router = useRouter();
const [mapItem, setMapItem] = useState(0) const [mapItem, setMapItem] = useState(0);
const [userPositioning, setUserPositioning] = useState<UserInfoType>() const [userPositioning, setUserPositioning] = useState<UserInfoType>();
const [markerCol, setMarkerCol] = useState<any>([]) const [markerCol, setMarkerCol] = useState<any>([]);
//初始化地图 //初始化地图
const init = async () => { const init = async () => {
try { try {
const AMapLoader = await import( const AMapLoader = await import(/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader');
/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader'
)
await AMapLoader.load({ await AMapLoader.load({
key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key，首次调用 load 时必填 key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}) })
.then(async (AMap) => { .then(async (AMap) => {
Amap = AMap Amap = AMap;
MAP = new AMap.Map('container', { MAP = new AMap.Map('container', {
// 设置地图容器id // 设置地图容器id
viewMode: '3D', // 是否为3D地图模式 viewMode: '3D', // 是否为3D地图模式
zoom: 9, // 初始化地图级别 zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291], // 初始化地图中心点位置 center: [113.93029, 22.53291], // 初始化地图中心点位置
}) });
//用户定位 //用户定位
AMap.plugin('AMap.Geolocation', function () { AMap.plugin('AMap.Geolocation', function () {
const geolocation = new AMap.Geolocation({ const geolocation = new AMap.Geolocation({
...@@ -46,23 +44,20 @@ export default function MapComponent() { ...@@ -46,23 +44,20 @@ export default function MapComponent() {
position: 'RB', //定位按钮的停靠位置 position: 'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20] offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点 zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
}) });
MAP.addControl(geolocation) MAP.addControl(geolocation);
geolocation.getCurrentPosition(function ( geolocation.getCurrentPosition(function (status: string, result: any) {
status: string,
result: any
) {
if (status == 'complete') { if (status == 'complete') {
onComplete(result) onComplete(result);
} else { } else {
onError(result) onError(result);
} }
}) });
}) });
//解析定位结果 //解析定位结果
async function onComplete(data: any) { async function onComplete(data: any) {
console.log('定位成功') console.log('定位成功');
setUserPositioning(data.position) setUserPositioning(data.position);
// return await mapEntiy(0,data.position); // return await mapEntiy(0,data.position);
} }
//解析定位错误信息 //解析定位错误信息
...@@ -72,147 +67,131 @@ export default function MapComponent() { ...@@ -72,147 +67,131 @@ export default function MapComponent() {
// 浏览器返回信息：${data.originMessage} // 浏览器返回信息：${data.originMessage}
// `) // `)
} }
await mapEntiy(0) await mapEntiy(0);
}) })
.catch((e) => { .catch((e) => {
console.log(e) console.log(e);
}) });
} catch (error) { } catch (error) {
console.log(error) console.log(error);
}
} }
};
const showPositioningInfo = async (index: number, data?: UserInfoType) => { const showPositioningInfo = async (index: number, data?: UserInfoType) => {
const res = await api.listPositioningInfo({ const res = await api.listPositioningInfo({
lon: userPositioning?.lon || data?.lon || 113.93029, lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291, lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
}) });
const list = res.result?.list const list = res.result?.list;
const markerList: any = [] const markerList: any = [];
if (list?.length) { if (list?.length) {
list?.map((item) => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.name) const EntiyValue = addEntiy(item.lon, item.lat, item.name);
markerList.push(EntiyValue) markerList.push(EntiyValue);
}) });
if (markerList.length) MAP?.add(markerList) if (markerList.length) MAP?.add(markerList);
setMarkerCol([...markerList]) setMarkerCol([...markerList]);
} }
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView() MAP?.setFitView();
} };
const showFlyerBitmap = async ( const showFlyerBitmap = async (index: number, data?: UserInfoType, pageSize?: number) => {
index: number,
data?: UserInfoType,
pageSize?: number
) => {
const res = await api.listFlyerBitmap({ const res = await api.listFlyerBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029, lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291, lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1, pageNo: 1,
pageSize: pageSize || 40, pageSize: pageSize || 40,
}) });
const list = res.result?.list const list = res.result?.list;
const markerList: any = [] const markerList: any = [];
if (list?.length) { if (list?.length) {
list?.map((item) => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName) const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName);
markerList.push(EntiyValue) markerList.push(EntiyValue);
}) });
if (markerList.length) MAP?.add(markerList) if (markerList.length) MAP?.add(markerList);
setMarkerCol(markerList) setMarkerCol(markerList);
} }
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView() MAP?.setFitView();
} };
const showUavBitmap = async (index: number, data?: UserInfoType) => { const showUavBitmap = async (index: number, data?: UserInfoType) => {
const res = await api.listUavBitmap({ const res = await api.listUavBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029, lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291, lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1, pageNo: 1,
pageSize: 40, pageSize: 40,
}) });
const list = res.result?.list const list = res.result?.list;
const markerList: any = [] const markerList: any = [];
if (list?.length) { if (list?.length) {
list?.map((item) => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.uavName) const EntiyValue = addEntiy(item.lon, item.lat, item.uavName);
markerList.push(EntiyValue) markerList.push(EntiyValue);
}) });
if (markerList.length) MAP?.add(markerList) if (markerList.length) MAP?.add(markerList);
setMarkerCol(markerList) setMarkerCol(markerList);
} }
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView() MAP?.setFitView();
} };
//添加点位 //添加点位
const mapEntiy = async (index: number, data?: UserInfoType) => { const mapEntiy = async (index: number, data?: UserInfoType) => {
MAP?.remove(markerCol) MAP?.remove(markerCol);
if (index === 0) { if (index === 0) {
showPositioningInfo(index, data) showPositioningInfo(index, data);
} else if (index === 1) { } else if (index === 1) {
showFlyerBitmap(index, data, 30) showFlyerBitmap(index, data, 30);
} else if (index === 2) { } else if (index === 2) {
showUavBitmap(index, data) showUavBitmap(index, data);
} else { } else {
router.push('/home/waterfallFlowBody/components/map/moreServicePoints') router.push('/home/waterfallFlowBody/components/map/moreServicePoints');
}
setMapItem(index)
} }
setMapItem(index);
};
const addEntiy = (lon: any, lat: any, name: string) => { const addEntiy = (lon: any, lat: any, name: string) => {
if (!Amap) return if (!Amap) return;
const icons = new Amap.Icon({ const icons = new Amap.Icon({
size: new Amap.Size(60, 60), // 图标尺寸 size: new Amap.Size(60, 60), // 图标尺寸
image: icon.src, // Icon的图像 image: icon.src, // Icon的图像
imageSize: new Amap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片 imageSize: new Amap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
}) });
const marker = new Amap.Marker({ const marker = new Amap.Marker({
position: new Amap.LngLat(lon, lat), position: new Amap.LngLat(lon, lat),
offset: new Amap.Pixel(-10, -10), offset: new Amap.Pixel(-10, -10),
icon: icons, // 添加 Icon 实例 icon: icons, // 添加 Icon 实例
title: name, title: name,
zoom: 13, zoom: 13,
}) });
return marker return marker;
} };
useEffect(() => { useEffect(() => {
;(async () => { (async () => {
await init() await init();
})() })();
return MAP && MAP.destroy() return MAP && MAP.destroy();
}, []) }, []);
return ( return (
<Box className="right-box-item"> <Box className='right-box-item'>
<div id="container" className="map"></div> <div id='container' className='map'></div>
<div className="map-dosome"> <div className='map-dosome'>
<div <div className={`itemBox ${mapItem === 0 ? 'active' : ''}`} onClick={() => mapEntiy(0)}>
className={`itemBox ${mapItem === 0 ? 'active' : ''}`}
onClick={() => mapEntiy(0)}
>
服务网点 服务网点
</div> </div>
<div <div className={`itemBox ${mapItem === 1 ? 'active' : ''}`} onClick={() => mapEntiy(1)}>
className={`itemBox ${mapItem === 1 ? 'active' : ''}`}
onClick={() => mapEntiy(1)}
>
租赁网点 租赁网点
</div> </div>
<div <div className={`itemBox ${mapItem === 2 ? 'active' : ''}`} onClick={() => mapEntiy(2)}>
className={`itemBox ${mapItem === 2 ? 'active' : ''}`}
onClick={() => mapEntiy(2)}
>
培训网点 培训网点
</div> </div>
<div <div className={`${mapItem === 3 ? 'active' : ''}`} onClick={() => mapEntiy(3)}>
className={`${mapItem === 3 ? 'active' : ''}`}
onClick={() => mapEntiy(3)}
>
更多网点 更多网点
</div> </div>
</div> </div>
</Box> </Box>
) );
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论