652 lines
23 KiB
TypeScript
652 lines
23 KiB
TypeScript
import './copyrightG-goods.css'
|
|
import {
|
|
// Select, DatePicker, Button,
|
|
// Table,
|
|
// message,
|
|
// Space,
|
|
Pagination,
|
|
// InputNumber
|
|
Spin,
|
|
Modal,
|
|
Empty,
|
|
Image,
|
|
// Button,
|
|
// Input
|
|
} from 'antd';
|
|
|
|
// import { showImage } from '../../request/request'
|
|
import AiShopDetail from '../../components/AiShopDetail/AiShopDetail'
|
|
import { useLocation } from 'react-router-dom';
|
|
import { showImage } from '../../request/request'
|
|
import dayjs, { } from 'dayjs';
|
|
import {
|
|
buyGoodsList,
|
|
// goodsDetail,
|
|
// createOrder, confirmPayment
|
|
getSoftTypeList
|
|
} from '../../request/api'
|
|
// import type { InputNumberProps } from 'antd';
|
|
// import type { TableColumnsType } from 'antd';
|
|
// import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
|
|
// import type { DatePickerProps } from 'antd';
|
|
// import locale from 'antd/es/date-picker/locale/zh_CN';
|
|
import { useState, useEffect } from 'react';
|
|
import useMessage from "antd/es/message/useMessage";
|
|
// const { Column } = Table;
|
|
// const { TextArea } = Input;
|
|
export default function CopyrightGgoods() {
|
|
const [messageApi, messageContext] = useMessage();
|
|
const height = window.innerHeight - 180;
|
|
const [goodsId, setGoodsId] = useState<any>() //商品ID
|
|
const [goodsDetailModal, setGoodsDetailModal] = useState(false) //订单详情
|
|
// const [buyTipsModal, setBuyTipsModal] = useState(false) //卖提示框
|
|
|
|
// const [messageApi, contextHolder] = message.useMessage();
|
|
// const dateFormat = 'YYYY-MM-DD';
|
|
// const [minPrice, setMinPrice] = useState<any>() //最低价格
|
|
// const [maxPrice, setMaxPrice] = useState<any>() //最高价格
|
|
// const [date, setDate] = useState<any>() //获取时间
|
|
// const [sort, setSort] = useState<any>() //排序
|
|
// const [language, setLanguage] = useState<any>() //开发语言
|
|
// const [type, setType] = useState<any>() //软著类型
|
|
const [page, setPage] = useState(1) //页
|
|
const [total, setTotal] = useState(0) //总条数
|
|
const [loading, setLoading] = useState(false) //加载中
|
|
// const [payLoading, setPayLoading] = useState(false) //正在付款
|
|
const { state } = useLocation()
|
|
const copyrightKeywords = state ? state.copyrightKeywords : ''; // 版权关键字
|
|
const minPrice = state ? state.minPrice : ''; // 最低价格
|
|
const maxPrice = state ? state.maxPrice : ''; // 最高价格
|
|
const sort = state ? state.sort : ''; // 排序
|
|
const copyrightDate = state ? state.copyrightDate : ''; // 版权日期
|
|
const copyrightLanguage = state ? state.copyrightLanguage : ''; // 开发语言
|
|
// const copyrightType = state ? state.copyrightType : ''; // 软著类型
|
|
|
|
|
|
const [data, setData] = useState([]); // 表格数据
|
|
// 确认支付
|
|
// const confirmPaymentFun = async (orderId: string) => {
|
|
// try {
|
|
// // setLoading(true)
|
|
// const res: any = await confirmPayment(orderId)
|
|
// console.log(res);
|
|
// // setLoading(false)
|
|
// } catch (error: any) {
|
|
|
|
// if (error.response) {
|
|
// const data = error.response.data;
|
|
// messageApi.open({
|
|
// type: 'error',
|
|
// content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
|
// });
|
|
// } else {
|
|
// console.error(error)
|
|
// }
|
|
// }
|
|
// }
|
|
// 创建订单
|
|
// const createOrderFun = async (goodsId: string) => {
|
|
// try {
|
|
// // setPayLoading(true)
|
|
// const res: any = await createOrder(goodsId)
|
|
// // console.log(res);
|
|
// confirmPaymentFun(res.data)
|
|
|
|
// } catch (error: any) {
|
|
|
|
// if (error.response) {
|
|
// const data = error.response.data;
|
|
// messageApi.open({
|
|
// type: 'error',
|
|
// content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
|
// });
|
|
// } else {
|
|
// console.error(error)
|
|
// }
|
|
// }
|
|
// }
|
|
const [selectTypeArray, setSelectTypeArray] = useState<any>([]) // 选择的软著类型
|
|
|
|
const getBuyGoodsList = async (page: number) => {
|
|
try {
|
|
setLoading(true)
|
|
const res: any = await buyGoodsList({
|
|
page: page,
|
|
rows: 20,
|
|
keywords: copyrightKeywords ? copyrightKeywords : '', // 版权关键字
|
|
priceRangeStart: minPrice ? minPrice : '', // 最低价格
|
|
priceRangeEnd: maxPrice ? maxPrice : '', // 最高价格
|
|
priceOrder: sort ? sort : '', // 排序
|
|
goodsGetTime: copyrightDate ? dayjs(copyrightDate).year() : '', // 版权日期
|
|
goodsDevelop: copyrightLanguage ? copyrightLanguage : '', // 开发语言
|
|
// goodsType: copyrightType ? copyrightType.join(',') : '', // 软著类型
|
|
goodsType: selectTypeArray.length > 0 ? selectTypeArray.join(',') : '',
|
|
|
|
})
|
|
// console.log(res);
|
|
|
|
setLoading(false)
|
|
setPage(res.page)
|
|
setData(res.rows)
|
|
setTotal(res.total)
|
|
setLoading(false)
|
|
|
|
} catch (error: any) {
|
|
// setLoading(false)
|
|
if (error.response) {
|
|
const data = error.response.data;
|
|
messageApi.open({
|
|
type: 'error',
|
|
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
|
});
|
|
} else {
|
|
console.error(error)
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
const [softTypeList, setSoftTypeList] = useState<any>([]) // 软著类型列表
|
|
// 获取软著类型列表
|
|
const getSoftTypeListDate = async () => {
|
|
try {
|
|
const res: any = await getSoftTypeList()
|
|
// console.log('软著类型列表', res);
|
|
// setSoftTypeList(res.map((item: any) => {
|
|
// return {
|
|
// value: item.dataId,
|
|
// label: item.dataName,
|
|
// }
|
|
// }))
|
|
setSoftTypeList(res)
|
|
} catch (error: any) {
|
|
|
|
if (error.response) {
|
|
const data = error.response.data;
|
|
messageApi.open({
|
|
type: 'error',
|
|
content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
|
});
|
|
} else {
|
|
console.error(error)
|
|
}
|
|
}
|
|
}
|
|
// const [goodsDetailData, setGoodsDetailData] = useState<any>({}) // 商品详情数据
|
|
// const getGoodsDetail = async (goodsId: string) => {
|
|
// try {
|
|
// setLoading(true)
|
|
// const res: any = await goodsDetail(goodsId)
|
|
// // console.log(res);
|
|
// setGoodsId(res.goodsId)
|
|
// setGoodsDetailData(res)
|
|
// setLoading(false)
|
|
// } catch (error: any) {
|
|
// // setLoading(false)
|
|
// if (error.response) {
|
|
// const data = error.response.data;
|
|
// messageApi.open({
|
|
// type: 'error',
|
|
// content: data.msg ? data.msg : `${data.path}(${data.status})`,
|
|
// });
|
|
// }
|
|
// } finally {
|
|
// setLoading(false)
|
|
// }
|
|
// }
|
|
useEffect(() => {
|
|
// console.log('copyrightKeywords', copyrightKeywords);
|
|
// console.log('minPrice', minPrice);
|
|
// console.log('maxPrice', maxPrice);
|
|
// console.log('sort', sort);
|
|
// console.log('copyrightDate', copyrightDate);
|
|
// console.log('copyrightLanguage', copyrightLanguage);
|
|
// console.log('copyrightType', copyrightType);
|
|
|
|
// if (copyrightDate) {
|
|
// console.log('sellDate', dayjs(copyrightDate).year());
|
|
// }
|
|
setPage(1)
|
|
getBuyGoodsList(1)
|
|
}, [state])
|
|
useEffect(() => {
|
|
getSoftTypeListDate()
|
|
}, [])
|
|
useEffect(() => {
|
|
getBuyGoodsList(page)
|
|
}, [page, selectTypeArray])
|
|
|
|
return (
|
|
|
|
<div className='copyrightG-goods' style={{ height: `${height}px`, overflow: 'auto' }}>
|
|
{messageContext}
|
|
{/* {contextHolder} */}
|
|
<div className='copyrightG-goods-table'>
|
|
{/* 表格 */}
|
|
<Spin tip="正在加载..." size="small" spinning={loading}>
|
|
<div style={{ height: `${height - 80}px`, overflow: 'auto', position: 'relative' }}>
|
|
<div className='goodsTypeArrayBox'>
|
|
<div className='goodsTypeTitle'>软著类型 : </div>
|
|
<div className='goodsTypeArray'>
|
|
{softTypeList.map((item: any) => {
|
|
return (
|
|
<div className='typeName'
|
|
key={item.dataId}
|
|
style={{
|
|
color: selectTypeArray.includes(item.dataId) ? '#E73B3B' : '#707070',
|
|
}}
|
|
onClick={() => {
|
|
if (selectTypeArray.includes(item.dataId)) {
|
|
setSelectTypeArray(selectTypeArray.filter((typeId: any) => typeId !== item.dataId))
|
|
} else {
|
|
setSelectTypeArray([...selectTypeArray, item.dataId])
|
|
}
|
|
}}
|
|
>
|
|
{item.dataName}
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
</div>
|
|
</div>
|
|
{data.length <= 0 ? (
|
|
<div className='nodata' style={{ height: `${height - 93}px` }}>
|
|
<Empty
|
|
description={
|
|
'暂无数据'
|
|
} />
|
|
</div>) : (
|
|
<div className='showGoodsBox'>
|
|
{data.map((item: any) => {
|
|
return (
|
|
<div className='goodSBox rightgoods' key={item.goodsId} style={{
|
|
height: 300,
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={() => {
|
|
setGoodsDetailModal(true)
|
|
|
|
setGoodsId(item.goodsId)
|
|
}}
|
|
>
|
|
|
|
|
|
<div className='goodsImg'>
|
|
<Image src={showImage(item.goodsPhoto, false)} width={'100%'}
|
|
preview={false}
|
|
style={{ maxWidth: '100%' }}
|
|
></Image>
|
|
</div>
|
|
<div className='goodsBot'>
|
|
<div className='goodsPrice'>
|
|
<div>
|
|
<span style={{
|
|
fontSize: 20,
|
|
}}>￥</span>
|
|
<span>{item.goodsOpenPrice}</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div className='goodsNameBox'>
|
|
<div className='tipsPrice'>特价</div>
|
|
<div className='goodsName' title={item.goodsName}>{item.goodsName}</div>
|
|
</div>
|
|
<div className='goodsTime'>
|
|
截止日期 : {item.goodsLastTime}
|
|
</div>
|
|
{/* <div className='goodsBtnBox'>
|
|
<Button className='goodsBtn' style={{
|
|
display: item.goodsStatus == '1' ? 'none' : 'unset'
|
|
}}
|
|
onClick={() => {
|
|
edit(item)
|
|
}}>编辑</Button>
|
|
<Button className='goodsBtn' type="primary" style={{
|
|
display: item.goodsCheckStatus == '1' || item.goodsCheckStatus == '2' ? 'none' : 'unset'
|
|
}} onClick={() => submit(item)}>提交审核</Button>
|
|
<Button className='goodsBtn' type="primary" style={{
|
|
display: item.goodsStatus == '0' && item.goodsCheckStatus == '2' ? 'unset' : 'none'
|
|
}} onClick={() => sell(item)}>上架</Button>
|
|
<Button className='goodsBtn' type="primary" style={{
|
|
display: item.goodsStatus == '0' || item.goodsOrderStatus == '1' ? 'none' : 'unset'
|
|
}}
|
|
onClick={() => off(item)}>下架</Button>
|
|
<div className='goodsBtnIng' style={{
|
|
display: item.goodsOrderStatus == '1' ? 'unset' : 'none'
|
|
}}>
|
|
正在交易中...
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
|
|
{/* <div className='goodSBox'>
|
|
<div className='goodsImg'>
|
|
|
|
</div>
|
|
<div className='goodsBot'>
|
|
<div className='goodsPrice'>
|
|
<span style={{
|
|
fontSize: 20,
|
|
}}>￥</span>
|
|
<span>299</span>
|
|
</div>
|
|
<div className='goodsNameBox'>
|
|
<div className='tipsPrice'>特价</div>
|
|
<div className='goodsName' title='智能化接口处理系统'>智能化接口处理系统</div>
|
|
</div>
|
|
<div className='goodsTime'>
|
|
2025-05-12
|
|
</div>
|
|
<div className='goodsBtnBox'>
|
|
<div className='goodsBtn'>编辑</div>
|
|
<div className='goodsBtn'>提交审核</div>
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
{/* {data.length == 0 ? (
|
|
<div className='nodata' style={{ height: `${height - 93}px` }}>
|
|
<Empty
|
|
description={
|
|
'暂无数据'
|
|
} />
|
|
</div>) : ( */}
|
|
</Spin>
|
|
{/* <div> */}
|
|
{/* <Spin tip="正在加载..." size="small" spinning={loading}>
|
|
<div style={{ height: `${height - 80}px` }}>
|
|
|
|
<Table
|
|
scroll={{ y: `${height - 150}px` }}
|
|
dataSource={data}
|
|
pagination={false}
|
|
style={{ textAlign: 'center' }}
|
|
rowKey="goodsId"
|
|
locale={{ emptyText: '暂无数据' }}
|
|
>
|
|
<Column
|
|
width={70}
|
|
title="序号" render={(_text, _record, index: number) => (
|
|
(page - 1) * 10 + index + 1
|
|
)} align="center" />
|
|
<Column
|
|
title="软著名称"
|
|
dataIndex="goodsName"
|
|
align="center"
|
|
render={(text) => (
|
|
<span style={{ color: '#1B8BD2', fontSize: '16px', fontWeight: '700' }}>{text}</span>
|
|
)}
|
|
/>
|
|
|
|
<Column
|
|
title="软著证号"
|
|
dataIndex="goodsNumber"
|
|
align="center"
|
|
|
|
/>
|
|
<Column title="售价" dataIndex="goodsOpenPrice" align="center"
|
|
render={(text) => (
|
|
<span style={{ color: '#FF5D15', fontSize: '24px', fontWeight: '700' }}>{text}</span>
|
|
)} />
|
|
<Column title="软著版本" dataIndex="goodsVersion" align="center" />
|
|
<Column title="软著取得时间" dataIndex="goodsGetTime" align="center" />
|
|
<Column title="软著开发语言" dataIndex="goodsDevelop" align="center" />
|
|
<Column
|
|
align="center"
|
|
title="操作"
|
|
render={(_text, record: any) => (
|
|
<Space size="middle">
|
|
<span className='copyrightG-goods-table-btn' onClick={() => {
|
|
setGoodsDetailModal(true)
|
|
|
|
setGoodsId(record.goodsId)
|
|
}}>查看详情</span>
|
|
</Space>
|
|
)}
|
|
/>
|
|
</Table>
|
|
|
|
</div>
|
|
</Spin> */}
|
|
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
|
|
<div className='product-release-pagination' >
|
|
<Pagination
|
|
showSizeChanger={false}
|
|
current={page} total={total} defaultPageSize={20} onChange={(page) => {
|
|
console.log(page)
|
|
setPage(page)
|
|
}} />
|
|
</div>
|
|
</div>
|
|
{/* )} */}
|
|
<Modal
|
|
title="著作权商品信息"
|
|
okText="确认"
|
|
cancelText="取消"
|
|
destroyOnClose={true}
|
|
footer={null}
|
|
open={goodsDetailModal}
|
|
// onOk={() => {
|
|
// setOrderDetailModal(false)
|
|
// }}
|
|
onCancel={() => {
|
|
setGoodsDetailModal(false)
|
|
}}
|
|
width={700}
|
|
centered
|
|
>
|
|
{/* <Spin tip="正在加载..." size="small" spinning={loading}>
|
|
<div className='goodsDetail'>
|
|
<div className='goodsDetailImg' style={{
|
|
position: 'relative',
|
|
}}>
|
|
<Image src={showImage(goodsDetailData.goodsPhoto, false)} preview={{
|
|
mask: '查看', // 设置点击放大时显示的文字
|
|
}}
|
|
height={'100%'}
|
|
style={{ maxWidth: '100%' }}
|
|
></Image>
|
|
<div style={{
|
|
position: 'absolute',
|
|
bottom: '3px',
|
|
left: '265px',
|
|
color: 'rgb(160, 160, 160)',
|
|
// backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明背景色
|
|
}}>点击查看</div>
|
|
</div>
|
|
<div className='goodsDetailInputBox'>
|
|
<div className='detailBox'>
|
|
<div className='detailBoxTitle'>软著名称</div>
|
|
<Input value={goodsDetailData.goodsName} style={{
|
|
// height: '40px',
|
|
color: 'black',
|
|
|
|
}} disabled></Input>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<div className='detailBox'>
|
|
<div className='detailBoxTitle'>软著简称</div>
|
|
<Input value={goodsDetailData.goodsSubName} style={{
|
|
// height: '40px',
|
|
color: 'black',
|
|
|
|
}} disabled></Input>
|
|
</div>
|
|
<div className='detailBox detailBoxRight'>
|
|
<div className='detailBoxTitle'>软著证号</div>
|
|
<Input value={goodsDetailData.goodsNumber} style={{
|
|
// height: '40px',
|
|
color: 'black',
|
|
|
|
}} disabled></Input>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<div className='detailBox'>
|
|
<div className='detailBoxTitle'>软著版本</div>
|
|
<Input value={goodsDetailData.goodsVersion} style={{
|
|
// height: '40px',
|
|
color: 'black',
|
|
|
|
}} disabled></Input>
|
|
</div>
|
|
<div className='detailBox'>
|
|
<div className='detailBoxTitle detailBoxRight'>取得时间</div>
|
|
<Input value={goodsDetailData.goodsGetTime} style={{
|
|
// height: '40px',
|
|
color: 'black',
|
|
|
|
}} disabled></Input>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<div className='detailBox'>
|
|
<div className='detailBoxTitle'>开发语言</div>
|
|
<Input value={goodsDetailData.goodsDevelop} style={{
|
|
// height: '40px',
|
|
color: 'black',
|
|
|
|
}} disabled></Input>
|
|
</div>
|
|
<div className='detailBox'>
|
|
<div className='detailBoxTitle detailBoxRight'>取得方式</div>
|
|
<Input value={goodsDetailData.goodsGetType} style={{
|
|
// height: '40px',
|
|
color: 'black',
|
|
|
|
}} disabled></Input>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
<div className='detailBox'>
|
|
<div className='detailBoxTitle'>售卖价格</div>
|
|
<Input value={goodsDetailData.goodsOpenPrice} style={{
|
|
// height: '40px',
|
|
color: 'black',
|
|
|
|
}} disabled></Input>
|
|
</div>
|
|
<div className='detailBox'>
|
|
<div className='detailBoxTitle detailBoxRight'>上架时间</div>
|
|
<Input value={goodsDetailData.goodsStatusTime} style={{
|
|
// height: '40px',
|
|
color: 'black',
|
|
|
|
}} disabled></Input>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className='detailBoxText'>
|
|
<div className='detailBoxTitle'>软著详情</div>
|
|
<TextArea
|
|
disabled
|
|
style={{
|
|
width: '100%',
|
|
// width: 1100,
|
|
height: 150,
|
|
fontSize: 16,
|
|
color: "#5C5C5C",
|
|
resize: 'none',
|
|
background: '#F5F5F9'
|
|
}} value={goodsDetailData.goodsDescription}></TextArea>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
marginTop: 20
|
|
}}>
|
|
<Button style={{
|
|
marginRight: 20,
|
|
fontSize: 16,
|
|
color: '#7C7C7C ',
|
|
background: '#E9E9E9',
|
|
fontWeight: '700',
|
|
height: 40,
|
|
width: 100,
|
|
|
|
}}
|
|
onClick={() => {
|
|
setGoodsDetailModal(false)
|
|
}}
|
|
|
|
>返回</Button>
|
|
<Button style={{
|
|
fontSize: 16,
|
|
// color: '#FFFFFF',
|
|
// background: '#FFA800',
|
|
fontWeight: '700',
|
|
height: 40,
|
|
width: 100,
|
|
|
|
}}
|
|
type="primary"
|
|
onClick={() => {
|
|
setBuyTipsModal(true)
|
|
}}
|
|
>购买</Button>
|
|
</div>
|
|
</Spin> */}
|
|
<AiShopDetail goodsId={goodsId} closeModal={() => {
|
|
setGoodsDetailModal(false)
|
|
}}
|
|
upData={() => {
|
|
getBuyGoodsList(page)
|
|
}}
|
|
></AiShopDetail>
|
|
</Modal>
|
|
|
|
|
|
{/* <Modal
|
|
title="提示"
|
|
okText="确认"
|
|
cancelText="取消"
|
|
destroyOnClose={true}
|
|
open={buyTipsModal}
|
|
onCancel={() => {
|
|
setBuyTipsModal(false)
|
|
}}
|
|
onOk={() => {
|
|
// alert(goodsId)
|
|
createOrderFun(goodsId)
|
|
}}
|
|
// width={1200}
|
|
centered
|
|
>
|
|
确定购买该商品吗？
|
|
</Modal> */}
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|