Skip to content

W
web
提交 98e8c48c 作者: ZhangLingKun
操作

功能：新版首页

上级 f0b8af8c
流水线 #8719 已失败 于阶段
in 1 分 5 秒
正在显示 包含 2897 行增加 和 81 行删除
src/api/interface/common.ts
......@@ -142,3 +142,25 @@ export type WebLoginType = InterFunction<
userAccountId: number;
}
>;
// 获取图片-小程序
export type ListBannerImg = InterFunction<
{ moduleCode: string },
{
bannerImg: string;
bannerName: string;
bannerPoster: null;
bannerType: number;
bannerUrl: string;
createTime: string;
deleted: number;
detailInfo: null;
endTime: null;
goodsId: null;
id: number;
moduleId: number;
sort: number;
startTime: null;
textContent: string;
using: number;
}[]
>;
src/api/interface/home.ts
......@@ -146,6 +146,11 @@ export type AppListPilotType = InterListFunction<
yearsOfWorking: number;
userImg: string;
status: boolean;
userStateVO?: {
icon?: string;
id?: number;
state?: string;
};
}
>;
// 话题列表
......
src/api/modules/common.ts
......@@ -4,6 +4,7 @@ import {
GetLoginInfo,
GetVerifyCodeAuthType,
GetVerifyCodeType,
ListBannerImg,
TestPhoneLogin,
WebLoginType,
WebRegisterType,
......@@ -50,4 +51,8 @@ export class CommonAPI {
// web端账号密码登录
static webLogin: WebLoginType = (params) =>
request.post('/userapp/auth/webLogin', params);
// 获取图片-小程序
static listBannerImg: ListBannerImg = (params) =>
request.get('/release/module/listBannerImg', { params });
}
src/components/forumItem/index.tsx
......@@ -87,13 +87,13 @@ const ForumItemView: React.FC<{
alt="头像"
/>
<div className="ml-2">
<div className="font-bold">
<div className="text-[13px] font-bold">
{detail?.userBaseInfo?.nickName || '微信用户'}
</div>
<div className="text-aaa">{detail?.dynamicPublishTime}</div>
</div>
</div>
<div className="mb-3 w-full leading-5 tracking-wide">
<div className="mb-3 w-full text-[13px] leading-5 tracking-wide">
{detail?.forumGambitDTOList?.map((i, j) => (
<span key={j} className="mr-1 cursor-pointer font-bold text-tag">
{i.gambitName}
......@@ -106,7 +106,7 @@ const ForumItemView: React.FC<{
{getForumMedia(0)?.length
? getForumMedia(0)?.map((i, j) => (
<Image
src={`${i?.url}?x-oss-process=image/quality,Q_50`}
src={`${i?.url}?x-oss-process=image/quality,q_50`}
alt="图片"
key={j}
fallback={
......@@ -163,8 +163,8 @@ const ForumItemWrap = styled.div`
margin-bottom: 1rem;
.forum-media {
.media-video {
width: 500px;
height: calc(500px / 16 * 9);
width: 386px;
height: calc(386px / 16 * 9);
margin-bottom: 1rem;
video {
width: 100%;
......
src/components/home-comp/home-product/index.tsx
......@@ -63,7 +63,7 @@ const HomeProductView = () => {
>
<img
className="item-image"
src={`${i.resourcesList[0].url}?x-oss-process=image/quality,Q_50`}
src={`${i.resourcesList[0].url}?x-oss-process=image/quality,q_50`}
alt={i.tradeName}
/>
<div className="item-title text-ellipsis">{i.tradeName}</div>
......
src/components/layout/header/index.tsx
......@@ -115,7 +115,7 @@ const HeaderView: React.FC<{
}, []);
// 顶部Tab列表
const tabList: { label: string; value: string; isQrcode?: boolean }[] = [
{ label: '个人中心', value: 'pages/mine/index', isQrcode: true },
{ label: '个人中心', value: '/mine', isQrcode: false },
{ label: '购物车', value: 'page-cart/cart-list/index', isQrcode: true },
{ label: '我的订单', value: '/order', isQrcode: false },
{ label: '消息', value: 'pages/message/index', isQrcode: true },
......
src/components/productList/index.tsx
......@@ -39,18 +39,32 @@ const ProductListView: React.FC<{
children: React.ReactNode;
pagination: PaginationProps;
onChange: (pageNo: number, pageSize: number) => void;
}> = ({ children, pagination, onChange }) => {
showSizeChanger?: boolean;
showTotal?: boolean;
position?: 'bottom-right' | 'bottom-left';
}> = ({
children,
pagination,
onChange,
showSizeChanger = true,
showTotal = true,
position = 'bottom-right',
}) => {
return (
<ProductListWrap>
<div className="mall-list flex-start">{children}</div>
<div className="mall-pagination flex-end">
<div
className={`mall-pagination ${
position === 'bottom-right' ? 'flex-end' : 'flex-start'
}`}
>
<Pagination
showSizeChanger
showSizeChanger={showSizeChanger}
onChange={onChange}
defaultPageSize={pagination.pageSize}
current={pagination.pageNo}
total={pagination.totalCount}
showTotal={(total) => `共 ${total} 条`}
showTotal={showTotal ? (total) => `共 ${total} 条` : undefined}
pageSizeOptions={['6', '12', '18', '36', '72']}
/>
</div>
......
src/components/serviceItem/item.tsx 0 → 100644
import React from 'react';
import { useRouter } from 'next/router';
import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import { InterListType } from '@/api/interface';
import { GetListAPPCompanyInspectionPageType } from '@/api/interface/service';
import { GlobalDataState, setGlobalData } from '@/store/module/globalData';
import { getSellNumberRandom } from '@/utils';
import { formatMoney } from '@/utils/money';
// 详情类型
type DetailType = InterListType<GetListAPPCompanyInspectionPageType>[0];
const ServiceListItem: React.FC<{ detail: DetailType }> = ({ detail }) => {
// store
const dispatch = useDispatch();
// 路由钩子
const router = useRouter();
// globalData
const globalData = useSelector(
(state: any) => state.globalData,
) as GlobalDataState;
// 跳转商品详情
const handleDetail = () => {
dispatch(setGlobalData({ loadingSpinnerVisible: true }));
router.push(`/service/detail/${detail?.id}`).then();
};
// 获取商品的单位
const getPriceUnit = () => {
const unit = globalData?.priceUnitList?.find(
(i) => i.id === detail?.inspectionPriceUnitId,
);
return unit?.unitName || '次';
};
return (
<ServiceListItemWrap>
<div
className="list-item cursor-pointer list-none"
onClick={handleDetail}
>
<img
className="image"
src={`${detail?.inspectionFirstImg}?x-oss-process=image/quality,q_10`}
alt={detail?.inspectionDTO?.inspectionName}
/>
<div className="content">
<div className="flex-between w-full">
<div className="title two-line-ellipsis">
{/* 【{i?.industryTypeDTO?.typeName}】 */}
{detail?.inspectionDTO?.inspectionName}
</div>
<div className="nums">
已接{getSellNumberRandom(detail?.id, 4)}单
</div>
</div>
<div className="money">
{detail?.price ? (
<>
<span className="label">￥</span>
<span
className="num"
title={`${formatMoney(detail?.price)}元起每${getPriceUnit()}`}
>
{formatMoney(detail?.price)}
</span>
<span
className="unit text-ellipsis"
title={`${formatMoney(detail?.price)}元起每${getPriceUnit()}`}
>
起/{getPriceUnit()}
</span>
</>
) : (
<span className="label">咨询报价</span>
)}
</div>
<div className="store flex-start">
<div className="icon">{detail?.companyName?.[0]}</div>
<div className="text text-ellipsis" title={detail?.companyName}>
{detail?.companyName}
</div>
</div>
</div>
</div>
</ServiceListItemWrap>
);
};
export default ServiceListItem;
const ServiceListItemWrap = styled.div`
position: relative;
width: calc((100% - 3.33rem) / 4);
box-sizing: border-box;
background: #ffffff;
box-shadow: 0 0.22rem 0.56rem 0 rgba(56, 116, 205, 0.04);
margin: 0 0 1.11rem 0;
&:not(:nth-child(4n)) {
margin-right: 1.11rem;
}
&:hover {
filter: brightness(0.96);
}
.image {
width: 100%;
height: 11.58rem;
object-fit: cover;
}
.content {
position: relative;
width: 100%;
box-sizing: border-box;
padding: 0 0.25rem 0.5rem 0.25rem;
.title {
font-weight: bold;
font-size: 13px;
color: #333333;
max-width: 7rem;
}
.nums {
font-weight: 400;
font-size: 0.67rem;
color: #999999;
}
.money {
font-size: 16px;
font-weight: 500;
color: #ff1b1b;
.label {
font-size: 12px;
font-weight: bold;
}
.num {
max-width: 60%;
}
.unit {
margin-left: 0.25rem;
font-size: 10px;
font-weight: 400;
}
}
.store {
.icon {
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #cbcbcb;
line-height: 1rem;
text-align: center;
color: #fff;
font-size: 10px;
margin-right: 0.25rem;
}
.text {
color: #838383;
}
}
}
`;
src/pages/course/detail/[id].tsx
......@@ -74,7 +74,7 @@ const CourseDetailView: React.FC<{
className="media"
src={
courseDetail.surfaceUrl
? `${courseDetail?.surfaceUrl}?x-oss-process=image/quality,Q_50`
? `${courseDetail?.surfaceUrl}?x-oss-process=image/quality,q_50`
: `${courseDetail?.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`
}
alt={courseDetail?.curriculumName}
......
src/pages/home/comp/home-banner/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { Carousel } from 'antd';
import styled from 'styled-components';
import { InterDataType } from '@/api/interface';
import { ListBannerImgType } from '@/api/interface/home';
import QrcodePopover from '@/components/qrcodePopover';
import { getBannerList } from '@/utils';
// 列表类型
type ListType = InterDataType<ListBannerImgType>;
const HomeBannerView: React.FC = () => {
// 轮播图数据
const [bannerList, setBannerList] = useState<ListType>();
// 获取轮播图数据
const getBannerImageList = async () => {
const res = await getBannerList('HOME_BANNER');
setBannerList(res || []);
// console.log('轮播图 --->', res);
};
// 转换轮播图链接
const getBannerUrl = (url: string) => {
// 判断是否有参数
const index = url.indexOf('?');
if (index !== -1) {
return {
url: url?.substring(1, index),
query: url?.substring(index + 1),
};
}
return {
url: url?.substring(1),
};
};
// 组件挂载
useEffect(() => {
getBannerImageList().then();
}, []);
return (
<HomeBannerWrap>
<Carousel autoplay autoplaySpeed={5000}>
{bannerList?.map((i, j) => (
<div className="swiper-item" key={j}>
<QrcodePopover
path={getBannerUrl(i?.bannerUrl)?.url}
scene={getBannerUrl(i?.bannerUrl)?.query}
>
<img className="image" src={i?.bannerImg} alt={i?.bannerName} />
</QrcodePopover>
</div>
))}
</Carousel>
</HomeBannerWrap>
);
};
export default HomeBannerView;
// 样式
const HomeBannerWrap = styled.div`
position: relative;
width: 98%;
box-sizing: border-box;
margin: 0 auto 1rem;
.swiper-item {
position: relative;
width: 100%;
height: 8.17rem;
cursor: pointer;
.image {
width: 100%;
height: 100%;
}
&:hover {
filter: brightness(0.96);
}
}
`;
src/pages/home/comp/home-brand/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterListType } from '@/api/interface';
import { ListCompanyInfoByCoopIdType } from '@/api/interface/home';
// 列表类型
type ListType = InterListType<ListCompanyInfoByCoopIdType>;
const HomeBrandView: React.FC = () => {
// 路由钩子
const router = useRouter();
// 店铺列表
const [companyList, setCompanyList] = useState<ListType>([]);
// 获取店铺列表
const getListCompanyInfo = async () => {
const res = await HomeAPI.listCompanyInfoByCoopId({
lat: 30.04885,
lon: 119.96043,
pageNo: 1,
pageSize: 999,
coopId: 5,
});
if (res && res.code === '200') {
const list = res.result?.list || [];
const kbt = list.filter((i) => i.companyName.includes('科比特'));
const other = list.filter((i) => !i.companyName.includes('科比特'));
setCompanyList([...kbt, ...other]?.slice(0, 7));
// console.log('获取网点数据 --->', companyList.value)
}
};
// 跳转列表
const handleList = async () => {
await router.push('/store/product');
};
// 跳转详情
const handleDetail = async (item: ListType[0]) => {
await router.push(`/store/product/${item?.backUserAccountId}`);
};
// 组件挂载
useEffect(() => {
getListCompanyInfo().then();
}, []);
return (
<HomeBrandWrap>
<div className="brand-label flex-center">
<div className="title select-none">优秀服务商</div>
<div className="action cursor-pointer" onClick={handleList}>
查看更多
</div>
</div>
<div className="brand-list flex-start">
{companyList?.map((i, j) => (
<div
className="flex-center list-item cursor-pointer list-none"
key={j}
onClick={() => handleDetail(i)}
>
<img
className="image"
src={`${
i?.brandLogo || i?.backImg
}?x-oss-process=image/quality,q_10`}
alt={i?.brandName || i?.companyName}
/>
</div>
))}
</div>
</HomeBrandWrap>
);
};
export default HomeBrandView;
const HomeBrandWrap = styled.div`
position: relative;
width: 100%;
height: 10.89rem;
background: linear-gradient(
180deg,
rgba(220, 234, 255, 1) 0%,
rgba(220, 234, 255, 0.3) 100%
);
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 0 0 1.5rem;
margin: 0.25rem 0 1rem 0;
.brand-label {
position: relative;
box-sizing: border-box;
flex-direction: column;
margin-right: 1.5rem;
.title {
font-weight: bold;
font-size: 1.5rem;
color: #333333;
line-height: 2.08rem;
text-align: center;
margin-bottom: 1.25rem;
}
.action {
width: 6.8rem;
height: 2.2rem;
background: #3d8bff;
text-align: center;
line-height: 2.2rem;
color: #fff;
&:hover {
filter: brightness(0.96);
}
}
}
.brand-list {
position: relative;
box-sizing: border-box;
.list-item {
position: relative;
width: 7.56rem;
height: 7.56rem;
background: #ffffff;
&:hover {
filter: brightness(0.96);
}
&:not(:last-child) {
margin-right: 1rem;
}
.image {
width: 86%;
height: 86%;
object-fit: cover;
}
}
}
`;
src/pages/home/comp/home-course/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { FlyerAPI } from '@/api';
import { InterListType } from '@/api/interface';
import { queryCurriculumInfoListType } from '@/api/interface/flyer';
// 列表类型
type ListType = InterListType<queryCurriculumInfoListType>;
const HomeCourseView: React.FC = () => {
// 路由钩子
const router = useRouter();
// 课程列表
const [courseList, setCourseList] = useState<ListType>([]);
// 获取热门课程
const getCurriculumInfoList = async () => {
const res = await FlyerAPI.queryCurriculumInfoList({
pageSize: 2,
pageNo: 1,
isHot: 1,
});
if (res && res.code === '200') {
const list = res.result?.list || [];
setCourseList(list);
}
};
// 跳转详情
const handleDetail = (detail: ListType[0]) => {
router.push(`/course/detail?id=${detail.id}`).then();
};
// 组件挂载
useEffect(() => {
getCurriculumInfoList().then();
}, []);
return (
<HomeCourseWrap>
<div className="course-head flex-between">
<div className="label flex-start select-none">
<img
className="icon"
src="https://file.iuav.com/file/sharefly-home-comp-icon-02.png"
alt="热门课程"
/>
<div className="text">热门课程</div>
</div>
<div className="more flex-end cursor-pointer">
<div className="text">更多</div>
<RightOutlined />
</div>
</div>
<div className="course-list flex-start">
{courseList?.map((i, j) => (
<div
key={j}
className="list-item cursor-pointer list-none"
onClick={() => handleDetail(i)}
>
<img
className="image"
src={`${i?.surfaceUrl}?x-oss-process=image/quality,q_10`}
alt={i?.curriculumName}
/>
</div>
))}
</div>
</HomeCourseWrap>
);
};
export default HomeCourseView;
// 样式
const HomeCourseWrap = styled.div`
position: relative;
width: 100%;
margin: 0 0 1rem 0;
box-sizing: border-box;
.course-head {
position: relative;
box-sizing: border-box;
width: 100%;
margin-bottom: 0.67rem;
.label {
.icon {
width: 2rem;
height: 2rem;
}
.text {
font-weight: 550;
font-size: 1rem;
color: #333333;
}
}
.more {
color: #ff552d;
}
}
.course-list {
position: relative;
width: 100%;
box-sizing: border-box;
.list-item {
position: relative;
box-sizing: border-box;
width: calc((100% - 1.11rem) / 2);
&:hover {
filter: brightness(0.96);
}
&:not(:nth-child(2n)) {
margin-right: 1.11rem;
}
.image {
width: 100%;
height: 6.67rem;
border-radius: 0.44rem;
object-fit: cover;
}
}
}
`;
src/pages/home/comp/home-flyer/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterListType } from '@/api/interface';
import { AppListPilotType } from '@/api/interface/home';
// 列表类型
type ListType = InterListType<AppListPilotType>;
const HomeFlyerView: React.FC = () => {
// 飞手列表
const [flyerList, setFlyerList] = useState<ListType>();
// 获取飞手列表
const getFlyerList = async () => {
const res = await HomeAPI.appListPilot({
// 审批通过
auditStatus: 1,
pageNo: 1,
pageSize: 20,
});
if (res && res.code === '200') {
const list = res.result?.list || [];
setFlyerList(
Array.from(
{ length: list.length < 2 ? list.length : 2 },
() => list.splice(Math.floor(Math.random() * list.length), 1)[0],
),
);
// console.log('获取飞手列表 --->', flyerList.value)
}
};
// 组件挂载
useEffect(() => {
getFlyerList().then();
}, []);
return (
<HomeFlyerWrap>
<div className="flyer-head flex-between">
<div className="label flex-start select-none">
<img
className="icon"
src="https://file.iuav.com/file/sharefly-home-comp-icon-01.png"
alt="本地飞手"
/>
<div className="text">本地飞手</div>
</div>
<div className="more flex-end cursor-pointer">
<div className="text">更多</div>
<RightOutlined />
</div>
</div>
<div className="flyer-list">
{flyerList?.map((i, j) => <FlyerItemView key={j} detail={i} />)}
</div>
</HomeFlyerWrap>
);
};
export default HomeFlyerView;
// 样式
const HomeFlyerWrap = styled.div`
position: relative;
width: 100%;
margin: 1rem 0 2rem 0;
box-sizing: border-box;
.flyer-head {
position: relative;
box-sizing: border-box;
width: 100%;
//margin-bottom: 0.67rem;
.label {
.icon {
width: 2rem;
height: 2rem;
}
.text {
font-weight: 550;
font-size: 1rem;
color: #333333;
}
}
.more {
color: #ff552d;
}
}
.flyer-list {
position: relative;
width: 100%;
box-sizing: border-box;
}
`;
// 子组件
const FlyerItemView: React.FC<{ detail: ListType[0] }> = ({ detail }) => {
return (
<FlyerItemWrap>
<div className="left">
<img
className="image"
src={`${detail?.userImg}?x-oss-process=image/quality,q_10`}
alt={detail?.userName}
/>
{!!detail?.userStateVO?.state && (
<div className="state">{detail?.userStateVO?.state}</div>
)}
</div>
<div className="right">
<div className="title">{detail?.userName}</div>
<div className="text">
<span className="city">{detail?.residentCity}</span>
<span>{detail?.yearsOfWorking}年经验</span>
</div>
<div className="tag flex-start">
{detail?.pilotAbility?.map((i, j) => (
<div className="item" key={j}>
{i?.abilityName}
</div>
))}
</div>
<div className="desc text-ellipsis" title={detail?.individualResume}>
{detail?.individualResume}
</div>
</div>
<div className="action">个人主页</div>
</FlyerItemWrap>
);
};
// 子组件样式
const FlyerItemWrap = styled.div`
position: relative;
width: 100%;
min-height: 6.2rem;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 0.67rem 0.67rem 0 0.67rem;
background: #fff;
cursor: pointer;
&:hover {
filter: brightness(0.96);
}
.left {
position: relative;
box-sizing: border-box;
margin-right: 0.56rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.image {
width: 3.78rem;
height: 3.78rem;
border-radius: 0.44rem;
}
.state {
font-weight: 400;
font-size: 13px;
color: #00b841;
margin-top: 0.25rem;
}
}
.right {
position: relative;
box-sizing: border-box;
width: 17rem;
.title {
font-weight: 550;
font-size: 13px;
color: #333333;
line-height: 1.04rem;
margin-bottom: 0.25rem;
}
.text {
font-weight: 400;
font-size: 12px;
color: #777777;
line-height: 0.78rem;
margin-bottom: 0.25rem;
.city {
margin-right: 5px;
}
}
.tag {
margin-bottom: 0.67rem;
.item {
font-weight: 400;
font-size: 12px;
color: #fe552e;
line-height: 0.72rem;
text-align: center;
margin-right: 0.25rem;
box-sizing: border-box;
padding: 0.12rem 0.22rem;
border-radius: 0.11rem;
border: 0.03rem solid #fe552e;
}
}
.desc {
font-weight: 400;
font-size: 0.67rem;
color: #777777;
line-height: 1.22rem;
text-align: left;
}
}
.action {
position: absolute;
top: 0.67rem;
right: 0.25rem;
height: 1.39rem;
line-height: 1.39rem;
background: #ff590e;
border-radius: 2.83rem;
box-sizing: border-box;
padding: 0 0.5rem;
font-weight: 500;
font-size: 12px;
color: #ffffff;
&:hover {
filter: brightness(0.96);
}
}
`;
src/pages/home/comp/home-forum/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterListType, InterReqType } from '@/api/interface';
import { ForumListType } from '@/api/interface/home';
import ForumItemView from '@/components/forumItem';
import ProductListView from '@/components/productList';
import HomeProductView from '@/pages/home/comp/home-product/_index';
import { RootState } from '@/store';
import { SystemState } from '@/store/module/system';
// 列表类型
type ListType = InterListType<ForumListType>;
// 请求类型
type ReqType = InterReqType<ForumListType>;
const HomeForumView = () => {
// system
const system = useSelector((state: RootState) => state.system) as SystemState;
// 论坛列表
const [forumList, setForumList] = useState<ListType>([]);
// 分页数据
const [pagination, setPagination] = useState({
pageNo: 1,
pageSize: 5,
totalCount: 0,
});
// 获取论坛列表
const getForumList = async (data: ReqType) => {
const res = await HomeAPI[system?.token ? 'getForumList' : 'getForumList1'](
{
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
...data,
},
);
if (res && res.code === '200') {
const { list, totalCount, pageNo, pageSize } = res.result || {};
setForumList(list || []);
setPagination({ pageNo, pageSize, totalCount });
}
};
// 翻页回调
const handlePageChange = async (pageNo: number, pageSize: number) => {
await getForumList({ pageNo, pageSize });
};
// 页面挂载
useEffect(() => {
getForumList({}).then();
}, []);
return (
<HomeForumWrap>
<div className="forum-head flex-between">
<div className="label">飞友圈</div>
<div className="action flex-end">
<div className="text">更多</div>
<RightOutlined />
</div>
</div>
<div className="forum-list">
{/* 论坛列表 */}
<ProductListView
pagination={pagination}
showSizeChanger={false}
showTotal={false}
position={'bottom-left'}
onChange={handlePageChange}
>
{pagination?.pageNo === 1 ? (
<>
{forumList
?.slice(0, 1)
?.map((i, j) => <ForumItemView key={j} detail={i} />)}
{/* 大家都在买 */}
<HomeProductView />
{forumList
?.slice(1)
?.map((i, j) => <ForumItemView key={j} detail={i} />)}
</>
) : (
forumList?.map((i, j) => <ForumItemView key={j} detail={i} />)
)}
</ProductListView>
</div>
</HomeForumWrap>
);
};
export default HomeForumView;
// 样式
const HomeForumWrap = styled.div`
position: relative;
width: 68%;
margin-bottom: 2rem;
//min-height: 10rem;
//background: lightblue;
.forum-head {
position: relative;
width: 100%;
box-sizing: border-box;
margin-bottom: 1rem;
.label {
font-weight: 550;
font-size: 1rem;
color: #333333;
user-select: none;
}
.action {
display: none;
color: #ff552d;
}
}
.forum-list {
position: relative;
width: 100%;
box-sizing: border-box;
}
`;
src/pages/home/comp/home-news/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
const HomeNewsView = () => {
// 路由钩子
const router = useRouter();
// tab栏索引
const [currentIndex, setCurrentIndex] = useState<number>(0);
// tab栏数据
const [tabList, setTabList] = useState<
{ label: string; value: any[]; api: any }[]
>([
{
label: '热点资讯',
value: [],
api: HomeAPI.getListNews,
},
{
label: '招标快讯',
value: [],
api: HomeAPI.getListTenderInfo,
},
// {
// label: '行业新闻',
// value: [],
// },
]);
// 跳转到更多了
const handleMore = async () => {
await router.push('/news');
};
// 选择tab栏
const handleSelect = async (index: number) => {
setCurrentIndex(index);
};
// 获取所有新闻数据
const getListNewsAll = async () => {
const res = await Promise.all(
tabList?.map(
(i) =>
i?.api?.({
pageNo: 1,
pageSize: 6,
}),
),
);
setTabList(
tabList?.map((i, j) => ({ ...i, value: res[j]?.result?.list ?? [] })),
);
};
// 跳转详情
const handleDetail = async (item: { id: number }, index: number) => {
await router.push(`/news/detail/${item.id}?type=${index + 1}`);
};
// 组件挂载
useEffect(() => {
getListNewsAll().then();
}, []);
return (
<HomeNewsWrap>
<div className="news-tab flex-between">
<div className="tab-list flex-start">
{tabList?.map((i, j) => (
<div
className={`tab-item ${currentIndex === j && 'tab-active'}`}
key={j}
onClick={() => handleSelect(j)}
>
{i?.label}
</div>
))}
</div>
<div className="tab-more flex-end" onClick={handleMore}>
<div className="text">更多</div>
<RightOutlined />
</div>
</div>
<div className="news-list">
{tabList?.[currentIndex]?.value?.map((i, j) => (
<div
className="list-item text-ellipsis"
key={j}
onClick={() => handleDetail(i, currentIndex)}
>
{i?.newsTitle || i?.tenderTitle}
</div>
))}
</div>
</HomeNewsWrap>
);
};
export default HomeNewsView;
// 样式
const HomeNewsWrap = styled.div`
position: relative;
width: 100%;
box-sizing: border-box;
margin-bottom: 5rem;
.news-tab {
position: relative;
width: 100%;
height: 2.33rem;
box-sizing: border-box;
border-bottom: 2px solid #ff552d;
margin-bottom: 0.5rem;
.tab-list {
position: relative;
box-sizing: border-box;
.tab-item {
font-weight: 550;
font-size: 15px;
color: #ff552d;
box-sizing: border-box;
padding: 0 1rem;
height: 2.33rem;
line-height: 2.33rem;
cursor: pointer;
}
.tab-active {
color: #fff;
background: #ff552d;
}
}
.tab-more {
color: #ff552d;
cursor: pointer;
}
}
.news-list {
position: relative;
width: 100%;
box-sizing: border-box;
.list-item {
position: relative;
width: 100%;
box-sizing: border-box;
height: 2rem;
line-height: 2rem;
cursor: pointer;
background: #fff;
padding: 0 0 0 1rem;
font-weight: 400;
font-size: 13px;
color: #333333;
&:hover {
filter: brightness(0.96);
color: #ff552d;
&:after {
background: #ff552d;
}
}
&:after {
position: absolute;
content: '';
left: 2px;
top: calc((2rem - 6px) / 2);
width: 6px;
height: 6px;
background: #333333;
border-radius: 50%;
}
}
}
`;
src/pages/home/comp/home-product/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterDataType } from '@/api/interface';
import { RecommendGoodsType } from '@/api/interface/home';
import { setGlobalData } from '@/store/module/globalData';
// 列表类型
type ListType = InterDataType<RecommendGoodsType>;
const HomeProductView: React.FC = () => {
// 路由钩子
const router = useRouter();
// store
const dispatch = useDispatch();
// 跳转商品列表
const handleMore = async () => {
await router.push('/mall');
};
// 推荐商品列表
const [recommendGoodsList, setRecommendGoodsList] = useState<
ListType[0]['mallGoodsList']
>([]);
// 获取推荐商品
const getRecommendGoodsList = async () => {
const res = await HomeAPI.getRecommendGoods();
if (res && res.code === '200') {
const list = res.result || [];
setRecommendGoodsList(
list
?.map((i) => i.mallGoodsList)
?.flat()
?.slice(0, 6),
);
}
};
// 获取最低价格
const getLowerPrice = (item: ListType[0]['mallGoodsList'][0]) => {
return (
item.priceStock?.reduce((a: any, b: any) =>
a.salePrice < b.salePrice ? a : b,
).salePrice || 0
);
};
// 跳转详情
const handleDetail = (item: ListType[0]['mallGoodsList'][0]) => {
dispatch(
setGlobalData({
loadingSpinnerVisible: true,
}),
);
router.push(`/mall/product/${item.id}`).then();
};
// 组件挂载
useEffect(() => {
getRecommendGoodsList().then();
}, []);
return (
<HomeProductWrap>
<div className="product-head flex-between">
<div className="label">大家都在买</div>
<div className="action flex-end" onClick={handleMore}>
<div className="text">更多</div>
<RightOutlined />
</div>
</div>
<div className="product-list flex-start">
{recommendGoodsList?.map((i, j) => (
<div
className="list-item list-none"
key={j}
onClick={() => handleDetail(i)}
>
<img
className="item-image"
src={`${i.resourcesList[0].url}?x-oss-process=image/quality,q_50`}
alt={i.tradeName}
/>
<div className="item-title text-ellipsis">{i.tradeName}</div>
<div className="item-price">
<span className="label">￥</span>
<span className="num">
{i.priceShow ? getLowerPrice(i).toLocaleString() : '咨询报价'}
</span>
</div>
</div>
))}
</div>
</HomeProductWrap>
);
};
export default HomeProductView;
// 样式
const HomeProductWrap = styled.div`
position: relative;
width: 100%;
box-sizing: border-box;
margin-bottom: 1.5rem;
.product-head {
position: relative;
width: 100%;
box-sizing: border-box;
margin-bottom: 1rem;
.label {
font-weight: 550;
font-size: 1rem;
color: #333333;
user-select: none;
}
.action {
color: #ff552d;
cursor: pointer;
}
}
.product-list {
position: relative;
width: 100%;
box-sizing: border-box;
.list-item {
position: relative;
width: calc((100% - 0.67rem * 5) / 6);
background: #ffffff;
border-radius: 0.44rem;
border: 0.06rem solid #e3e3e3;
overflow: hidden;
padding: 0.67rem 0.33rem;
box-sizing: border-box;
cursor: pointer;
&:not(:last-child) {
margin-right: 0.67rem;
}
&:hover {
filter: brightness(0.96);
}
.item-image {
width: 100%;
height: 7rem;
object-fit: cover;
margin-bottom: 0.33rem;
}
.item-title {
width: 100%;
font-weight: 550;
font-size: 13px;
color: #252525;
line-height: 1rem;
margin-bottom: 0.33rem;
}
.item-price {
font-weight: 550;
font-size: 13px;
color: #ff1b1b;
line-height: 1.04rem;
.label {
font-size: 12px;
}
}
}
}
`;
src/pages/home/comp/home-search/_index.tsx 0 → 100644
import React from 'react';
import { Input } from 'antd';
import styled from 'styled-components';
const HomeSearchView = () => {
return (
<HomeSearchWrap>
<div className="head-wrap">
<div className="head-logo">
<img
className="image"
src="/assets/image/home/sharefly-web-head-logo.png"
alt="云享飞官网"
/>
</div>
<div className="head-search">
<Input.Search
className="search-box"
placeholder="科比特航空"
enterButton="搜索"
size={'large'}
bordered={true}
/>
</div>
</div>
</HomeSearchWrap>
);
};
export default HomeSearchView;
export const HomeSearchWrap = styled.div`
position: relative;
width: 100%;
background-image: url('https://file.iuav.com/file/sharefly-web-headbg01.png');
//background-size: 100% 100%;
background-size: cover;
background-position: center;
.head-wrap {
position: relative;
max-width: 1190px;
height: 16.42rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
margin: 0 auto;
}
//padding: 0 12rem;
.head-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.head-logo {
position: relative;
//width: 11.33rem;
//height: 3.04rem;
width: 13.42rem;
height: 3.04rem;
//background-image: url('https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/sharefly-web-headlogo.png');
background-image: url('/assets/image/home/sharefly-web-head-logo.png');
background-size: cover;
margin-bottom: 1.88rem;
.image {
display: none;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.head-search {
width: 34rem;
height: 2.04rem;
//background: rgba(255, 255, 255, 0.68);
//-webkit-backdrop-filter: saturate(100%) blur(8px);
//backdrop-filter: saturate(100%) blur(8px);
//border-radius: 0.25rem;
//opacity: 1;
//border: 0.08rem solid #ff522f;
box-sizing: border-box;
margin-bottom: 2.83rem;
.search-box {
//border: 0.08rem solid #ff522f;
box-sizing: border-box;
}
}
// 媒体查询
@media screen and (min-width: 1600px) {
padding: 0 20rem;
}
`;
src/pages/home/comp/home-tab/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { Affix } from 'antd';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterDataType } from '@/api/interface';
import { ListBannerImgType } from '@/api/interface/home';
import HomeTabView01 from '@/pages/home/comp/home-tab/_tab01';
import HomeTabView02 from '@/pages/home/comp/home-tab/_tab02';
import HomeTabView03 from '@/pages/home/comp/home-tab/_tab03';
import HomeTabView04 from '@/pages/home/comp/home-tab/_tab04';
import HomeTabView05 from '@/pages/home/comp/home-tab/_tab05';
// 分类列表类型
type CategoryListType = InterDataType<ListBannerImgType>;
const HomeTabView = () => {
// 当前选中的项目
const [currentIndex, setCurrentIndex] = useState<number>(0);
// 一级分类列表
const [categoryList, setCategoryList] = useState<CategoryListType>([]);
// 获取一级分类列表
const getCategoryList = async () => {
const res = await HomeAPI.listBannerImg({
moduleCode: 'HOME_MENU_NEW',
});
if (res && res.code === '200') {
setCategoryList(res.result || []);
}
};
const handleScrollToTop = () => {
// 滚动到顶部
window.scrollTo({ top: 200, behavior: 'smooth' });
};
// 组件挂载
useEffect(() => {
// 获取分类数据
getCategoryList().then();
}, []);
return (
<HomeTabWrap>
<Affix offsetTop={58}>
<div className="tab-sub">
{categoryList?.map((i, j) => (
<div
className={`tab-item flex-center cursor-pointer ${
currentIndex === j && 'item-active'
}`}
key={j}
onClick={() => {
setCurrentIndex(j);
handleScrollToTop();
}}
>
<img className="image" src={i?.bannerImg} alt={i?.bannerName} />
<div className="title">{i?.bannerName}</div>
</div>
))}
</div>
</Affix>
<div className="tab-content">
{/* 行业服务 */}
{categoryList?.[currentIndex]?.bannerName?.includes('服务') && (
<HomeTabView01 />
)}
{/* 飞手约单 */}
{categoryList?.[currentIndex]?.bannerName?.includes('飞手') && (
<HomeTabView02 />
)}
{/* 技能课堂 */}
{categoryList?.[currentIndex]?.bannerName?.includes('课堂') && (
<HomeTabView03 />
)}
{/* 出口产品 */}
{categoryList?.[currentIndex]?.bannerName?.includes('产品') && (
<HomeTabView04 />
)}
{/* 设备租赁 */}
{categoryList?.[currentIndex]?.bannerName?.includes('租赁') && (
<HomeTabView05 />
)}
</div>
</HomeTabWrap>
);
};
export default HomeTabView;
export const HomeTabWrap = styled.div`
position: relative;
width: 68%;
min-height: 30rem;
//background: lightblue;
.tab-sub {
position: absolute;
top: 3.28rem;
left: -9rem;
//position: fixed;
//top: 20rem;
//left: 1.5rem;
width: 4.44rem;
min-height: 4.44rem;
background: rgba(203, 203, 203, 0.35);
z-index: 100;
.tab-item {
position: relative;
width: 4.44rem;
height: 4.44rem;
&:not(:last-child) {
margin-bottom: 0.52rem;
}
&:hover {
background: rgba(203, 203, 203, 0.35);
}
.image {
width: 3.33rem;
height: 2.08rem;
object-fit: cover;
}
.title {
font-weight: 400;
font-size: 0.78rem;
color: #333333;
line-height: 1.11rem;
}
}
.item-active {
background: rgba(203, 203, 203, 0.35);
}
}
`;
src/pages/home/comp/home-tab/_tab01.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { Empty, Pagination } from 'antd';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { ServiceAPI } from '@/api';
import { InterListType, InterReqType } from '@/api/interface';
import { GetListAPPCompanyInspectionPageType } from '@/api/interface/service';
import ServiceListItem from '@/components/serviceItem/item';
// 请求参数类型
type ReqType = InterReqType<GetListAPPCompanyInspectionPageType>;
// 服务列表
type ListType = InterListType<GetListAPPCompanyInspectionPageType>;
const HomeTabView01 = () => {
// 路由钩子
const router = useRouter();
// 分页数据
const [pagination, setPagination] = useState({
pageNo: 1,
pageSize: 8,
totalCount: 0,
});
// 服务列表
const [inspectionList, setInspectionList] = useState<ListType>([]);
// 获取服务列表
const getInspectionList = async ({ data }: { data?: ReqType }) => {
const res = await ServiceAPI.getListAPPCompanyInspectionPage({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
...data,
});
if (res && res.code === '200') {
const { list, pageNo, pageSize, totalCount } = res.result;
setPagination({
pageNo,
pageSize,
totalCount,
});
setInspectionList(list || []);
// console.log('获取服务列表 --->', res);
}
};
// 翻页回调
const handlePageChange = async (pageNo: number, pageSize: number) => {
await getInspectionList({ data: { pageNo, pageSize } });
};
// 跳转更多列表
const handleMore = async () => {
await router.push('./service');
};
// componentDidMount
useEffect(() => {
getInspectionList({}).then();
}, []);
return (
<HomeTabWrap01 className="animate__animated animate__fast animate__fadeIn">
<div className="tab-title flex-between w-full">
<div className="label flex-start ">
<div className="title select-none">推荐服务</div>
<div
className="action flex-end cursor-pointer text-primary"
onClick={handleMore}
>
<div className="text">更多</div>
<RightOutlined className="text-primary" style={{ fontSize: 10 }} />
</div>
</div>
<Pagination
showSizeChanger={false}
onChange={handlePageChange}
defaultPageSize={pagination.pageSize}
current={pagination.pageNo}
total={pagination.totalCount}
/>
</div>
<div className="tab-list flex-start w-full">
{inspectionList?.length ? (
inspectionList?.map((i, j) => <ServiceListItem key={j} detail={i} />)
) : (
<div className="list-empty flex-center h-24 w-full">
<Empty />
</div>
)}
</div>
</HomeTabWrap01>
);
};
export default HomeTabView01;
const HomeTabWrap01 = styled.div`
position: relative;
box-sizing: border-box;
padding-top: 1.58rem;
width: 100%;
.tab-title {
margin-bottom: 1.33rem;
.label {
align-items: center;
.title {
font-weight: 600;
font-size: 1.33rem;
color: #333333;
margin-right: 2rem;
}
.action {
font-weight: 500;
font-size: 0.78rem;
color: #ff552d;
margin-top: 0.15rem;
.text {
margin-right: 0.25rem;
}
}
}
}
`;
src/pages/home/comp/home-tab/_tab02.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { Pagination, Rate } from 'antd';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterListType, InterReqType } from '@/api/interface';
import { AppListPilotType } from '@/api/interface/home';
import { SearchColumns } from '@/components/SearchBox';
// 列表类型
type ListType = InterListType<AppListPilotType>;
// 参数类型
type ReqType = InterReqType<AppListPilotType>;
const HomeTabView02: React.FC = () => {
// 路由钩子
const router = useRouter();
// 飞手列表
const [flyerList, setFlyerList] = useState<ListType>([]);
// 分页数据
const [pagination, setPagination] = useState({
pageNo: 1,
pageSize: 8,
totalPage: 0,
totalCount: 0,
});
// 获取飞手列表
const getFlyerList = async (data?: ReqType) => {
const res = await HomeAPI.appListPilot({
// 审批通过
auditStatus: 1,
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
...data,
});
if (res && res.code === '200') {
const { list, pageNo, totalPage, totalCount } = res.result;
setFlyerList(list);
setPagination({
...pagination,
pageNo,
totalPage,
totalCount,
});
// console.log('列表数据 --->', list, pageNo, totalPage);
}
};
// 搜索事件
const handleSearch = async (value: ReqType) => {
await getFlyerList({
...value,
areaNumber: (value?.areaNumber as unknown as number[])?.at(-1),
pageNo: 1,
});
};
// 跳转列表
const handleMore = async () => {
await router.push('/flyer');
};
// 组件挂载
useEffect(() => {
getFlyerList().then();
}, []);
// 搜索列数据
const searchColumns: SearchColumns[] = [
{
type: 'Cascader',
// label: '飞手姓名',
name: 'areaNumber',
placeholder: '请选择飞手地区',
maxlength: 20,
width: 120,
api: HomeAPI.getSecondDistrictInfo(),
transform: (data) =>
data?.map((i: any) => ({
label: i.name,
value: i.id,
children: i.childInfo?.map((k: any) => ({
label: k.name,
value: k.id,
})),
})),
},
{
type: 'Select',
// label: '任务能力',
name: 'abilityId',
placeholder: '请选择任务能力',
width: 120,
api: HomeAPI.IndustryListPages({ pageNo: 1, pageSize: 999 }),
transform: (data) =>
data.list?.map((i: any) => ({ label: i.typeName, value: i.id })),
},
{
type: 'Select',
// label: '执照类型',
name: 'licenseType',
placeholder: '请选择执照类型',
width: 120,
options: [
{ label: 'CAAC', value: 'CAAC' },
{ label: 'UTC', value: 'UTC' },
{ label: '其他', value: 'OTHER' },
],
},
];
return (
<HomeTabWrap02>
<div className="tab-title flex-between w-full">
<div className="label flex-start ">
<div className="title select-none">飞手约单</div>
<div
className="action flex-end cursor-pointer text-primary"
onClick={handleMore}
>
<div className="text">更多</div>
<RightOutlined className="text-primary" style={{ fontSize: 10 }} />
</div>
</div>
<Pagination
showSizeChanger={false}
defaultPageSize={pagination.pageSize}
current={pagination.pageNo}
total={pagination.totalCount}
onChange={async (e) => {
await getFlyerList({ pageNo: e });
}}
/>
</div>
{/* 搜索组件 */}
{/* <SearchBoxView */}
{/* columns={searchColumns} */}
{/* sufFixChild={ */}
{/* <div className="flex" onClick={handleMore}> */}
{/* <Button type={'link'} className="px-0"> */}
{/* 更多 */}
{/* </Button> */}
{/* <RightOutlined className="text-primary" /> */}
{/* </div> */}
{/* } */}
{/* onSearch={handleSearch} */}
{/* /> */}
<div className="tab-list flex-start">
{flyerList?.map((i, j) => (
<div className="list-item list-none" key={j}>
<div className="item-arrow">
<RightOutlined style={{ fontSize: 10, color: '#A0A0A0' }} />
</div>
<div className="item-head flex-start">
<img className="head-image" src={i?.userImg} alt={i?.userName} />
<div className="head-content">
<div className="content-title flex-start">
<div className="title-name">{i?.userName}</div>
<Rate
allowHalf
disabled
defaultValue={4}
style={{ fontSize: '12px', color: '#FE562F' }}
/>
</div>
<div className="content-text flex-start">
<div className="text-item">{i?.residentCity}</div>
<div className="text-item">{i?.age}岁</div>
<div className="text-item">{i?.yearsOfWorking}年经验</div>
</div>
<div className="content-tag flex-start">
{i?.pilotAbility?.map((n, m) => (
<div className="tag-item" key={m}>
{n.abilityName}
</div>
))}
</div>
</div>
</div>
<div className="item-foot flex-start">
<div className="foot-state">空闲</div>
<div
className="foot-text text-ellipsis"
title={i?.individualResume}
>
{i?.individualResume}
</div>
</div>
</div>
))}
</div>
</HomeTabWrap02>
);
};
export default HomeTabView02;
// 样式
const HomeTabWrap02 = styled.div`
position: relative;
box-sizing: border-box;
padding-top: 1.58rem;
width: 100%;
.tab-title {
margin-bottom: 1.33rem;
.label {
align-items: center;
.title {
font-weight: 600;
font-size: 1.33rem;
color: #333333;
margin-right: 2rem;
}
.action {
font-weight: 500;
font-size: 0.78rem;
color: #ff552d;
margin-top: 0.15rem;
.text {
margin-right: 0.25rem;
}
}
}
}
.tab-list {
position: relative;
width: 100%;
flex-wrap: wrap;
margin-top: 0.5rem;
.list-item {
position: relative;
box-sizing: border-box;
width: calc(50% - 1rem);
//width: 14.13rem;
min-height: 5.54rem;
background: #ffffff;
border-radius: 0.25rem;
border: 0.04rem solid #e3e3e3;
margin: 0 0.85rem 0.85rem 0;
padding: 0.83rem 0 0 0.83rem;
cursor: pointer;
&:active,
&:hover {
filter: brightness(0.95);
}
.item-arrow {
position: absolute;
top: 0.67rem;
right: 0.67rem;
}
.item-head {
flex-wrap: nowrap;
.head-image {
width: 3rem;
height: 3rem;
border-radius: 4px;
margin-right: 0.38rem;
}
.head-content {
position: relative;
width: calc(100% - 4rem);
.content-title {
align-items: baseline;
margin-bottom: 0.2rem;
.title-name {
font-size: 14px;
font-weight: 550;
color: #333333;
margin-right: 0.2rem;
}
}
.content-text {
margin-bottom: 0.2rem;
.text-item {
font-size: 12px;
font-weight: 400;
margin-right: 0.5rem;
&:last-child {
margin-right: 0;
}
}
}
.content-tag {
flex-wrap: wrap;
margin-bottom: 0.33rem;
min-height: 0.79rem;
.tag-item {
min-width: 2.42rem;
height: 0.79rem;
border-radius: 0.17rem;
border: 0.04rem solid #fe562f;
text-align: center;
line-height: 0.79rem;
font-size: 0.5rem;
font-weight: 400;
color: #fe562f;
margin-right: 0.33rem;
}
}
&::after {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 100%;
//width: 8.21rem;
height: 0.02rem;
background: #dedede;
}
}
}
.item-foot {
min-height: 1.42rem;
box-sizing: border-box;
padding: 0.33rem 0;
.foot-state {
position: relative;
width: 3rem;
text-align: center;
margin-right: 0.33rem;
font-size: 12px;
color: #44d979;
&::after {
position: absolute;
content: '';
top: calc((100% - 0.25rem) / 2);
left: 0;
width: 0.25rem;
height: 0.25rem;
background: #44d979;
border-radius: 50%;
}
}
.foot-text {
width: calc(100% - 3.33rem);
font-size: 12px;
font-weight: 400;
color: #999999;
}
}
}
}
.tab-foot {
position: relative;
width: 100%;
}
`;
src/pages/home/comp/home-tab/_tab03.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { InterDataType } from '@/api/interface';
import { SelectCurriculumClassifyType } from '@/api/interface/course';
import { CourseAPI } from '@/api/modules/course';
import { setGlobalData } from '@/store/module/globalData';
// 列表类型
type ListType = Array<
InterDataType<SelectCurriculumClassifyType>[0] & {
children: InterDataType<SelectCurriculumClassifyType>;
}
>;
const HomeTabView03: React.FC = () => {
// 导航钩子
const router = useRouter();
// store
const dispatch = useDispatch();
// 列表数据
const [tabList, setTabList] = useState<ListType>([]);
// 获取执照培训分类
const getCategoryInfo = async () => {
const res = await CourseAPI.selectCurriculumClassify();
if (res && res.code === '200') {
setTabList(
res.result
?.filter((i) => !i.twoCourseId)
?.map((i) => {
const children = res.result?.filter(
(k) => k.oneCourseId === i.oneCourseId && k.twoCourseId,
);
return {
...i,
children,
};
}),
);
}
};
// 跳转一级分类详情
const handleMain = (i: ListType[0]) => {
dispatch(
setGlobalData({
loadingSpinnerVisible: true,
}),
);
router.push(`/course/${i?.oneCourseId}`).then();
};
// 跳转二级分类详情
const handleSecond = (i: ListType[0], n: ListType[0]['children'][0]) => {
dispatch(
setGlobalData({
loadingSpinnerVisible: true,
}),
);
router.push(`/course/${i?.oneCourseId}/${n?.twoCourseId}`).then();
};
// 跳转更多
const handleMore = async () => {
await router.push('/course');
};
// 组件挂载
useEffect(() => {
getCategoryInfo().then();
}, []);
return (
<HomeTabWrap04 className="animate__animated animate__fast animate__fadeIn">
<div className="tab-title flex-between w-full">
<div className="label flex-start ">
<div className="title select-none">技能课堂</div>
<div
className="action flex-end cursor-pointer text-primary"
onClick={handleMore}
>
<div className="text">更多</div>
<RightOutlined className="text-primary" style={{ fontSize: 10 }} />
</div>
</div>
</div>
<div className="tab-list">
{tabList.map((i, j) => (
<div className="tab-item align-start flex" key={j}>
<div className={'tab-little flex-start'}>
{!!i.classifyUrl && (
<img src={i.classifyUrl} alt={i.name} className="title-image" />
)}
<Button
type={'link'}
className="title-name"
onClick={() => handleMain(i)}
>
{i.name}
</Button>
</div>
<div className="tab-list flex-start">
{i.children?.map((n, m) => (
<Button
type={'link'}
key={m}
className="list-item"
onClick={() => handleSecond(i, n)}
>
{n.name}
</Button>
))}
</div>
</div>
))}
</div>
</HomeTabWrap04>
);
};
export default HomeTabView03;
// 样式
const HomeTabWrap04 = styled.div`
position: relative;
box-sizing: border-box;
padding-top: 1.58rem;
width: 100%;
.tab-title {
margin-bottom: 1.33rem;
.label {
align-items: center;
.title {
font-weight: 600;
font-size: 1.33rem;
color: #333333;
margin-right: 2rem;
}
.action {
font-weight: 500;
font-size: 0.78rem;
color: #ff552d;
margin-top: 0.15rem;
.text {
margin-right: 0.25rem;
}
}
}
}
.tab-list {
.tab-item {
position: relative;
width: 100%;
box-sizing: border-box;
margin-bottom: 0.48rem;
padding-bottom: 0.48rem;
border-bottom: 0.02rem solid #ededed;
&:last-child {
border: none;
}
}
.tab-little {
position: relative;
box-sizing: border-box;
//padding-bottom: 0.68rem;
//border-bottom: 0.02rem solid #ededed;
//margin-bottom: 0.5rem;
.title-image {
width: 1.68rem;
height: 1.68rem;
margin-right: 0.5rem;
}
.title-name {
font-size: 0.78rem;
font-weight: 550;
color: #333333;
padding: 0;
}
}
.tab-list {
position: relative;
flex-wrap: wrap;
max-width: calc(100% - 6rem);
transform: translateY(0.86px);
//height: 1.58rem;
//overflow: hidden;
//margin-bottom: 1rem;
//transform: translateX(-10px);
.list-item {
color: #666666;
font-weight: 500;
padding-right: 0;
}
}
@media (prefers-color-scheme: dark) {
.tab-little {
.title-name {
color: #fff;
}
}
.tab-list {
.list-item {
color: #999;
}
}
}
}
`;
src/pages/home/comp/home-tab/_tab04.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterDataType } from '@/api/interface';
import { AppCategoryInfoType } from '@/api/interface/home';
import { setGlobalData } from '@/store/module/globalData';
// 列表类型
type ListType = InterDataType<AppCategoryInfoType>;
const HomeTabView04: React.FC = () => {
// 路由钩子
const router = useRouter();
// store
const dispatch = useDispatch();
// 列表数据
const [tabList, setTabList] = useState<ListType>([]);
// 获取云享商城分类
const getAppCategoryInfo = async () => {
const res = await HomeAPI.appCategoryInfo({
type: 4,
});
if (res && res.code === '200') {
setTabList(res.result?.filter((i) => i.subDTOList?.length));
// console.log('获取云享商城分类 --->', tabList);
}
};
// 跳转一级分类详情
const handleMain = (i: ListType[0]) => {
dispatch(
setGlobalData({
loadingSpinnerVisible: true,
}),
);
router.push(`/mall/${i?.id}`).then();
};
// 跳转二级分类详情
const handleSecond = (i: ListType[0], n: ListType[0]['subDTOList'][0]) => {
dispatch(
setGlobalData({
loadingSpinnerVisible: true,
}),
);
router.push(`/mall/${i?.id}/${n?.id}`).then();
};
// 跳转更多
const handleMore = async () => {
await router.push('/mall');
};
// 组件挂载
useEffect(() => {
getAppCategoryInfo().then();
}, []);
return (
<HomeTabWrap04>
<div className="tab-title flex-between w-full">
<div className="label flex-start ">
<div className="title select-none">出口产品</div>
<div
className="action flex-end cursor-pointer text-primary"
onClick={handleMore}
>
<div className="text">更多</div>
<RightOutlined className="text-primary" style={{ fontSize: 10 }} />
</div>
</div>
</div>
<div className="tab-list flex-start">
{tabList.map((i, j) => (
<div className="tab-item align-start flex" key={j}>
<div className={'tab-little flex-start'}>
{!!i.icon && (
<img src={i.icon} alt={i.name} className="title-image" />
)}
<Button
type={'link'}
className="title-name"
onClick={() => handleMain(i)}
>
{i.name}
</Button>
</div>
<div className="tab-list flex-start">
{i.subDTOList?.map((n, m) => (
<Button
type={'link'}
key={m}
className="list-item"
onClick={() => handleSecond(i, n)}
>
{n.name}
</Button>
))}
</div>
</div>
))}
</div>
</HomeTabWrap04>
);
};
export default HomeTabView04;
// 样式
const HomeTabWrap04 = styled.div`
position: relative;
box-sizing: border-box;
padding-top: 1.58rem;
width: 100%;
.tab-title {
margin-bottom: 1.33rem;
.label {
align-items: center;
.title {
font-weight: 600;
font-size: 1.33rem;
color: #333333;
margin-right: 2rem;
}
.action {
font-weight: 500;
font-size: 0.78rem;
color: #ff552d;
margin-top: 0.15rem;
.text {
margin-right: 0.25rem;
}
}
}
}
.tab-list {
position: relative;
width: 100%;
box-sizing: border-box;
.tab-item {
position: relative;
width: 100%;
box-sizing: border-box;
margin-bottom: 0.48rem;
padding-bottom: 0.48rem;
border-bottom: 0.02rem solid #ededed;
&:last-child {
border: none;
}
}
.tab-little {
position: relative;
box-sizing: border-box;
//padding-bottom: 0.68rem;
//border-bottom: 0.02rem solid #ededed;
//margin-bottom: 0.5rem;
.title-image {
width: 1.68rem;
height: 1.68rem;
margin-right: 0.5rem;
}
.title-name {
font-size: 0.78rem;
font-weight: 550;
color: #333333;
padding: 0;
}
}
.tab-list {
position: relative;
flex-wrap: wrap;
max-width: calc(100% - 6rem);
transform: translateY(0.86px);
//height: 1.58rem;
//overflow: hidden;
//margin-bottom: 1rem;
//transform: translateX(-10px);
.list-item {
color: #666666;
font-weight: 500;
padding-right: 0;
}
}
@media (prefers-color-scheme: dark) {
.tab-little {
.title-name {
color: #fff;
}
}
.tab-list {
.list-item {
color: #999;
}
}
}
}
`;
src/pages/home/comp/home-tab/_tab05.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useRouter } from 'next/router';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterListType } from '@/api/interface';
import { ListBrandInfoType } from '@/api/interface/home';
import { setGlobalData } from '@/store/module/globalData';
type ListType = InterListType<ListBrandInfoType>;
const HomeTabView05 = () => {
// 导航钩子
const router = useRouter();
// store
const dispatch = useDispatch();
// 列表数据
const [tabList, setTabList] = useState<ListType>([]);
// 获取云享商城分类
const getListBrandInfo = async () => {
const res = await HomeAPI.getListBrandInfo({
pageNo: 1,
pageSize: 999,
});
if (res && res.code === '200') {
setTabList(res.result?.list?.filter((i) => i.modeInfoList?.length));
// console.log('获取云享商城分类 --->', res);
}
};
// 跳转一级分类详情
const handleMain = (i: ListType[0]) => {
dispatch(
setGlobalData({
loadingSpinnerVisible: true,
}),
);
router.push(`/rent/${i?.id}`).then();
};
// 跳转二级分类详情
const handleSecond = (i: ListType[0], n: ListType[0]['modeInfoList'][0]) => {
dispatch(
setGlobalData({
loadingSpinnerVisible: true,
}),
);
router.push(`/rent/${i?.id}/${n?.id}`).then();
};
// 跳转更多
const handleMore = async () => {
await router.push('/rent');
};
// 组件挂载
useEffect(() => {
getListBrandInfo().then();
}, []);
return (
<HomeTabWrap05 className="animate__animated animate__fast animate__fadeIn">
<div className="tab-title flex-between w-full">
<div className="label flex-start ">
<div className="title select-none">设备租赁</div>
<div
className="action flex-end cursor-pointer text-primary"
onClick={handleMore}
>
<div className="text">更多</div>
<RightOutlined className="text-primary" style={{ fontSize: 10 }} />
</div>
</div>
</div>
<div className="tab-list">
{tabList.map((i, j) => (
<div key={j}>
<div className={'tab-little flex-start'}>
<div className="title-name" onClick={() => handleMain(i)}>
{i.brandName}
</div>
</div>
<div className="tab-list flex-start">
{i.modeInfoList?.map((n, m) => (
<Button
type={'link'}
key={m}
className="list-item"
onClick={() => handleSecond(i, n)}
>
{n.modeName}
</Button>
))}
</div>
</div>
))}
</div>
</HomeTabWrap05>
);
};
export default HomeTabView05;
// 样式
const HomeTabWrap05 = styled.div`
position: relative;
box-sizing: border-box;
padding-top: 1.58rem;
width: 100%;
.tab-title {
margin-bottom: 1.33rem;
.label {
align-items: center;
.title {
font-weight: 600;
font-size: 1.33rem;
color: #333333;
margin-right: 2rem;
}
.action {
font-weight: 500;
font-size: 0.78rem;
color: #ff552d;
margin-top: 0.15rem;
.text {
margin-right: 0.25rem;
}
}
}
}
.tab-list {
position: relative;
width: 100%;
flex-wrap: wrap;
margin-bottom: 1rem;
.list-item {
color: #666666;
font-weight: 500;
}
}
`;
src/pages/home/comp/home-task/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { HomeAPI, ServiceAPI } from '@/api';
import { InterDataType, InterListType } from '@/api/interface';
import { AppPublishListType } from '@/api/interface/home';
import { GetIndustryListPagesType } from '@/api/interface/service';
import ServiceTaskItem from '@/pages/service/task/comp/_serviceTaskItem';
// 列表类型
type ListType = InterDataType<AppPublishListType>;
// 行业类型
type IndustryType = InterListType<GetIndustryListPagesType>;
const HomeTaskView = () => {
// 路由钩子
const router = useRouter();
// 实时订单列表
const [requireList, setRequireList] = useState<ListType>([]);
// 获取实时订单列表
const getAppPublishList = async () => {
const res = await HomeAPI.appPublishList({
isNewRequirements: true,
});
if (res && res.code === '200') {
const list = res.result || [];
// console.log('订单列表 --->', list?.slice(0, 5));
setRequireList(list?.slice(0, 5));
}
};
// 行业列表
const [industryList, setIndustryList] = useState<IndustryType>([]);
// 获取各个目录及分类信息
const getIndustryListPages = async () => {
const res = await ServiceAPI.getIndustryListPages({
pageNo: 1,
pageSize: 999,
});
if (res && res.code === '200') {
setIndustryList(res?.result?.list || []);
}
};
// 跳转更多
const handleMore = async () => {
await router.push('/service/task');
};
// componentDidMount
useEffect(() => {
Promise.all([getAppPublishList(), getIndustryListPages()]).then();
}, []);
return (
<HomeTaskWrap>
<div className="tab-title flex-between">
<div className="label select-none">服务订单</div>
<div
className="action flex-end cursor-pointer text-primary"
onClick={handleMore}
>
<div className="text">更多</div>
<RightOutlined className="text-primary" style={{ fontSize: 10 }} />
</div>
</div>
<div className="tab-list">
{requireList?.map((i, j) => (
<ServiceTaskItem
key={j}
detail={i}
industryList={industryList}
width={'100%'}
/>
))}
</div>
</HomeTaskWrap>
);
};
export default HomeTaskView;
export const HomeTaskWrap = styled.div`
position: relative;
width: 30%;
box-sizing: border-box;
padding-top: 1.58rem;
.tab-title {
margin-bottom: 1.33rem;
.label {
font-weight: 600;
font-size: 1.33rem;
color: #333333;
margin-right: 2rem;
}
.action {
font-weight: 500;
font-size: 0.78rem;
color: #ff552d;
.text {
margin-right: 0.25rem;
}
}
}
.tab-list {
position: relative;
width: 100%;
.list-item {
width: 100%;
height: 6.78rem;
//background: #ffffff;
box-shadow: 0 0.22rem 0.58rem 0 rgba(56, 116, 205, 0.04);
margin-bottom: 0.72rem;
background: lightblue;
}
}
`;
src/pages/home/comp/home-topic/_index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { RightOutlined } from '@ant-design/icons';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import { HomeAPI } from '@/api';
import { InterListType } from '@/api/interface';
import { GetAppGambitListType } from '@/api/interface/home';
// 列表类型
type ListType = InterListType<GetAppGambitListType>;
// 帖子类型
const indexList = [
{ label: 1, value: 'text-[#FF3A2C]' },
{ label: 2, value: 'text-[#FE7A2C]' },
{ label: 3, value: 'text-[#FEA32C]' },
];
const HomeTopicView: React.FC = () => {
// 路由钩子
const router = useRouter();
// 话题列表
const [topicList, setTopicList] = useState<ListType>();
// 获取话题列表
const getListGambit = async () => {
const res = await HomeAPI.getAppGambitList({
pageNo: 1,
pageSize: 6,
});
if (res && res.code === '200') {
setTopicList(res.result?.list || []);
// console.log('获取话题列表 --->', res.result?.list);
}
};
// 跳转详情
const handleDetail = async (item: ListType[0]) => {
await router.push(`/forum/topic/${item.id}`);
};
// 组件挂载
useEffect(() => {
getListGambit().then();
}, []);
return (
<HomeTopicWrap>
<div className="topic-head flex-between">
<div className="label flex-start select-none">
<img
className="icon"
src="https://file.iuav.com/file/sharefly-home-comp-icon-03.png"
alt="热门课程"
/>
<div className="text">热门话题</div>
</div>
<div className="more flex-end cursor-pointer">
<div className="text">更多</div>
<RightOutlined />
</div>
</div>
<div className="topic-list">
{topicList?.map((i, j) => (
<div
key={j}
className="flex-between list-item list-none"
onClick={() => handleDetail(i)}
>
<div className="item-title flex-start">
<div
className={`${indexList[j]?.value || 'text-[#c3c3c3]'} index`}
>
{j + 1}
</div>
<div className="title">{i.gambitName}</div>
</div>
<div className="item-num">{i?.postCount}个帖子</div>
</div>
))}
</div>
</HomeTopicWrap>
);
};
export default HomeTopicView;
// 样式
const HomeTopicWrap = styled.div`
position: relative;
width: 100%;
margin: 0 0 1rem 0;
box-sizing: border-box;
.topic-head {
position: relative;
box-sizing: border-box;
width: 100%;
margin-bottom: 0.67rem;
.label {
.icon {
width: 2rem;
height: 2rem;
}
.text {
font-weight: 550;
font-size: 1rem;
color: #333333;
}
}
.more {
color: #ff552d;
}
}
.topic-list {
position: relative;
width: 100%;
box-sizing: border-box;
.list-item {
position: relative;
width: 100%;
height: 2rem;
box-sizing: border-box;
cursor: pointer;
background: #fff;
padding: 0 0.25rem 0 0.5rem;
&:hover {
filter: brightness(0.96);
}
.item-title {
align-items: baseline;
.index {
font-weight: 500;
font-size: 14px;
margin-right: 0.67rem;
}
.title {
font-weight: 400;
font-size: 13px;
color: #333333;
&:hover {
color: #ff552d;
}
}
}
.item-num {
font-weight: 400;
font-size: 12.5px;
color: #999999;
}
}
}
`;
src/pages/home/index.tsx
import React from 'react';
import HomeBottomView from '@/components/home-comp/home-bottom';
import HomeBrandView from '@/components/home-comp/home-brand';
import HomeCourseView from '@/components/home-comp/home-course';
import HomeForumView from '@/components/home-comp/home-forum';
import HomeMapView from '@/components/home-comp/home-map';
import HomeNewsView from '@/components/home-comp/home-news';
import HomeProductView from '@/components/home-comp/home-product';
import HomeSearchView from '@/components/home-comp/home-search';
import HomeServiceView from '@/components/home-comp/home-service';
import HomeTabView from '@/components/home-comp/home-tab';
import HomeTaskView from '@/components/home-comp/home-task';
import HomeTitleView from '@/components/home-comp/home-title';
import { HomeWrap } from '@/pages/home/styled';
import styled from 'styled-components';
import HomeBannerView from '@/pages/home/comp/home-banner/_index';
import HomeBrandView from '@/pages/home/comp/home-brand/_index';
import HomeCourseView from '@/pages/home/comp/home-course/_index';
import HomeFlyerView from '@/pages/home/comp/home-flyer/_index';
import HomeForumView from '@/pages/home/comp/home-forum/_index';
import HomeNewsView from '@/pages/home/comp/home-news/_index';
import HomeSearchView from '@/pages/home/comp/home-search/_index';
import HomeTabView from '@/pages/home/comp/home-tab/_index';
import HomeTaskView from '@/pages/home/comp/home-task/_index';
import HomeTopicView from '@/pages/home/comp/home-topic/_index';
const HomeView = () => {
const HomePageView = () => {
return (
<HomeWrap>
<HomeViewWrap>
{/* 主页搜索 */}
<HomeSearchView />
{/* 网格布局 */}
<div className="home-grid">
{/* 页面布局 */}
<div className="home-wrap flex-between align-start">
{/* 主页分类 */}
<HomeTabView />
{/* 全国网点 */}
<HomeMapView />
{/* 主页新闻 */}
<HomeNewsView />
</div>
{/* 弹性布局 */}
<div className="home-wrap">
{/* 抢单大厅 */}
<HomeTaskView />
{/* 品牌企业 */}
<HomeBrandView />
{/* 大家都在买 */}
<HomeTitleView title="大家都在买" path="/mall" />
{/* 推荐商品 */}
<HomeProductView />
{/* 热门课程 */}
<HomeTitleView title="热门课程" path="/course" />
{/* 课程列表 */}
<HomeCourseView />
{/* 无人机服务 */}
<HomeTitleView title="无人机服务" path="/service" />
{/* 服务列表 */}
<HomeServiceView />
{/* 话题/论坛 */}
<HomeForumView />
{/* 底部标签 */}
<HomeBottomView />
{/* 右侧边栏 */}
<div className="relative w-[30%]">
{/* 飞手列表 */}
<HomeFlyerView />
{/* 热门课程 */}
<HomeCourseView />
{/* 热门话题 */}
<HomeTopicView />
{/* 首页轮播 */}
<HomeBannerView />
{/* 新闻快讯 */}
<HomeNewsView />
</div>
</div>
{/* <h1 className="title">home</h1> */}
{/* <Button type={'primary'} onClick={handleClick}> */}
{/* 测试 */}
{/* </Button> */}
{/* <Button type={'primary'} onClick={handleNavigate}> */}
{/* 跳转 */}
{/* </Button> */}
</HomeWrap>
</HomeViewWrap>
);
};
export default HomeView;
export default HomePageView;
// 样式
const HomeViewWrap = styled.div`
.home-wrap {
position: relative;
max-width: 1190px;
box-sizing: border-box;
margin: 0 auto;
}
`;
src/pages/home/old.tsx 0 → 100644
import React from 'react';
import HomeBottomView from '@/components/home-comp/home-bottom';
import HomeBrandView from '@/components/home-comp/home-brand';
import HomeCourseView from '@/components/home-comp/home-course';
import HomeForumView from '@/components/home-comp/home-forum';
import HomeMapView from '@/components/home-comp/home-map';
import HomeNewsView from '@/components/home-comp/home-news';
import HomeProductView from '@/components/home-comp/home-product';
import HomeSearchView from '@/components/home-comp/home-search';
import HomeServiceView from '@/components/home-comp/home-service';
import HomeTabView from '@/components/home-comp/home-tab';
import HomeTaskView from '@/components/home-comp/home-task';
import HomeTitleView from '@/components/home-comp/home-title';
import { HomeWrap } from '@/pages/home/styled';
const HomeView = () => {
return (
<HomeWrap>
{/* 主页搜索 */}
<HomeSearchView />
{/* 网格布局 */}
<div className="home-grid">
{/* 主页分类 */}
<HomeTabView />
{/* 全国网点 */}
<HomeMapView />
{/* 主页新闻 */}
<HomeNewsView />
</div>
{/* 弹性布局 */}
<div className="home-wrap">
{/* 抢单大厅 */}
<HomeTaskView />
{/* 品牌企业 */}
<HomeBrandView />
{/* 大家都在买 */}
<HomeTitleView title="大家都在买" path="/mall" />
{/* 推荐商品 */}
<HomeProductView />
{/* 热门课程 */}
<HomeTitleView title="热门课程" path="/course" />
{/* 课程列表 */}
<HomeCourseView />
{/* 无人机服务 */}
<HomeTitleView title="无人机服务" path="/service" />
{/* 服务列表 */}
<HomeServiceView />
{/* 话题/论坛 */}
<HomeForumView />
{/* 底部标签 */}
<HomeBottomView />
</div>
{/* <h1 className="title">home</h1> */}
{/* <Button type={'primary'} onClick={handleClick}> */}
{/* 测试 */}
{/* </Button> */}
{/* <Button type={'primary'} onClick={handleNavigate}> */}
{/* 跳转 */}
{/* </Button> */}
</HomeWrap>
);
};
export default HomeView;
src/pages/mine/index.tsx 0 → 100644
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import LayoutView from '@/components/layout';
import { RootState } from '@/store';
import { setGlobalData } from '@/store/module/globalData';
import { SystemState } from '@/store/module/system';
const MineAccountPage = () => {
// store
const dispatch = useDispatch();
// system
const system = useSelector((state: RootState) => state.system) as SystemState;
// 页面加载
useEffect(() => {
if (!system?.token) {
dispatch(
setGlobalData({
loginModalVisible: true,
loginModalBack: true,
}),
);
}
}, []);
return (
<LayoutView>
<MineAccountWrap>
<div>MineAccountPage</div>
</MineAccountWrap>
</LayoutView>
);
};
export default MineAccountPage;
// 样式
const MineAccountWrap = styled.div`
position: relative;
max-width: 1190px;
box-sizing: border-box;
padding: 2rem 0 0 0;
margin: 0 auto;
`;
src/pages/order/index.tsx
......@@ -4,7 +4,7 @@ import { Menu, MenuProps } from 'antd';
import styled from 'styled-components';
import BreadcrumbView from '@/components/breadcrumb';
import LayoutView from '@/components/layout';
import MallOrderListTable from '@/pages/order/comp/mallOrderLsit/_index';
import MallOrderListTable from '@/pages/order/comp/mallOrderList/_index';
type MenuItem = Required<MenuProps>['items'];
......
src/pages/service/task/comp/_serviceTaskItem.tsx
import React from 'react';
import { VerticalAlignTopOutlined } from '@ant-design/icons';
import { Statistic } from 'antd';
import dayjs from 'dayjs';
import styled from 'styled-components';
import { InterDataType, InterListType } from '@/api/interface';
......@@ -50,7 +49,8 @@ const orderStateList = [
const ServiceTaskItem: React.FC<{
detail: DetailType;
industryList: IndustryType;
}> = ({ detail, industryList }) => {
width?: string;
}> = ({ detail, industryList, width }) => {
// 根据服务id获取服务详情
const getIndustryItem = industryList.find((i) => i.id === detail?.serviceId);
// 获取任务时间
......@@ -93,7 +93,11 @@ const ServiceTaskItem: React.FC<{
console.log('handleDetail');
};
return (
<ServiceTaskItemWrap onClick={handleDetail} className="select-none">
<ServiceTaskItemWrap
onClick={handleDetail}
className="select-none"
style={width ? { width } : undefined}
>
{/* 头部区域 */}
<div className="item-head">
{getIndustryItem?.typeImg && (
......@@ -104,7 +108,7 @@ const ServiceTaskItem: React.FC<{
/>
)}
<div className="head-name text-ellipsis" title={detail.serviceName}>
{detail.serviceName}
{detail.serviceName || getIndustryItem?.typeName}
</div>
<div className="head-text">{getTaskRange}</div>
<div className="head-num">
......@@ -146,23 +150,26 @@ const ServiceTaskItem: React.FC<{
<div className="item-content">
<div className="content-label">{getTaskCity()}</div>
<div className="content-text">
<span>剩余：</span>
<Statistic.Countdown
value={dayjs(`${detail?.taskEndTime} 23:59:59`).valueOf()}
format="D 天 H 时 m 分 s 秒"
valueStyle={{ fontSize: '12px', color: '#999999' }}
/>
{dayjs(detail.createTime).format('MM-DD HH:mm')} 发布
</div>
{/* <div className="content-text"> */}
{/* <span>剩余：</span> */}
{/* <Statistic.Countdown */}
{/* value={dayjs(`${detail?.taskEndTime} 23:59:59`).valueOf()} */}
{/* format="D 天 H 时 m 分 s 秒" */}
{/* valueStyle={{ fontSize: '12px', color: '#999999' }} */}
{/* /> */}
{/* </div> */}
</div>
<div className="item-content dot">
<div className="content-label">保险要求</div>
<div className="content-text">{getInsuranceList}</div>
</div>
{/* <div className="item-content dot"> */}
{/* <div className="content-label">保险要求</div> */}
{/* <div className="content-text">{getInsuranceList}</div> */}
{/* </div> */}
{/* 发布时间 */}
<div className="item-time">
{dayjs(detail.createTime).format('MM-DD HH:mm')} 发布
</div>
{/* <div className="item-time"> */}
{/* {dayjs(detail.createTime).format('MM-DD HH:mm')} 发布 */}
{/* </div> */}
{/* 订单状态 */}
{getOrderStatus() && (
......@@ -180,7 +187,7 @@ const ServiceTaskItemWrap = styled.div`
position: relative;
box-sizing: border-box;
width: calc((100% - (0.83rem * 3)) / 4);
height: 7rem;
height: 6.25rem;
margin: 0 0.83rem 0.83rem 0;
background: #ffffff;
box-shadow: 0 0.17rem 0.67rem 0 rgba(24, 90, 190, 0.09);
......@@ -233,7 +240,8 @@ const ServiceTaskItemWrap = styled.div`
justify-content: flex-start;
box-sizing: border-box;
padding: 0 0 0 0.5rem;
margin-bottom: 0.25rem;
margin-bottom: 0.86rem;
//margin-bottom: 0.25rem;
.title-tag {
width: 1rem;
height: 1rem;
......@@ -321,6 +329,6 @@ const ServiceTaskItemWrap = styled.div`
.item-state {
position: absolute;
right: 0.5rem;
bottom: 1.5rem;
bottom: 0.86rem;
}
`;
src/pages/store/product/comp/_storeProductItem.tsx
......@@ -71,7 +71,7 @@ const StoreProductItem: React.FC<{
<img
className={'img'}
src={`${i?.resourcesList?.find((v) => v.type === 0)
?.url}?x-oss-process=image/quality,Q_50`}
?.url}?x-oss-process=image/quality,q_50`}
alt="图片"
/>
</div>
......
src/styles/globals.css
......@@ -203,3 +203,6 @@ a {
.richText,img {
width: 100%;
}
.ant-image-preview-root .ant-image-preview-img{
object-fit: contain;
}
src/utils/index.ts
// 随机生成
import { CommonAPI } from '@/api';
export const RandomNum = (minNum: number, maxNum: number) => {
return parseInt(String(Math.random() * (maxNum - minNum + 1) + minNum), 10);
};
......@@ -51,3 +53,14 @@ export const adcodeToCode = (
districtCode: String(adcode),
};
};
// 随机获取销售数字
export const getSellNumberRandom = (num: number, step: number): number => {
const str = Math.sqrt(num)?.toString();
return Number(str?.slice(str.length - step, str.length));
};
// 获取菜单图标
export const getBannerList = async (moduleCode: string) => {
const { result } = await CommonAPI.listBannerImg({ moduleCode });
return Promise.resolve(result || []);
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论