476 lines
16 KiB
TypeScript
476 lines
16 KiB
TypeScript
import './copyrightG-goods.css'
|
||
import {
|
||
// Select, DatePicker, Button,
|
||
Table,
|
||
// message,
|
||
Space,
|
||
Pagination,
|
||
// InputNumber
|
||
Spin,
|
||
Modal,
|
||
Image,
|
||
Button,
|
||
Input
|
||
} from 'antd';
|
||
import { showImage } from '../../request/request'
|
||
import { useLocation } from 'react-router-dom';
|
||
import dayjs, { } from 'dayjs';
|
||
import { buyGoodsList, goodsDetail, createOrder, confirmPayment } 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 getBuyGoodsList = async (page: number) => {
|
||
try {
|
||
setLoading(true)
|
||
const res: any = await buyGoodsList({
|
||
page: page,
|
||
rows: 10,
|
||
keywords: copyrightKeywords ? copyrightKeywords : '', // 版权关键字
|
||
priceRangeStart: minPrice ? minPrice : '', // 最低价格
|
||
priceRangeEnd: maxPrice ? maxPrice : '', // 最高价格
|
||
priceOrder: sort ? sort : '', // 排序
|
||
goodsGetTime: copyrightDate ? dayjs(copyrightDate).year() : '', // 版权日期
|
||
goodsDevelop: copyrightLanguage ? copyrightLanguage : '', // 开发语言
|
||
goodsType: copyrightType ? copyrightType.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 [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])
|
||
|
||
return (
|
||
|
||
<div className='copyrightG-goods' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||
{messageContext}
|
||
{/* {contextHolder} */}
|
||
<div className='copyrightG-goods-table'>
|
||
{/* 表格 */}
|
||
{/* {data.length == 0 ? (
|
||
<div className='nodata' style={{ height: `${height - 93}px` }}>
|
||
<Empty
|
||
description={
|
||
'暂无数据'
|
||
} />
|
||
</div>) : ( */}
|
||
{/* <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) => (
|
||
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="short"
|
||
align="center"
|
||
/> */}
|
||
<Column
|
||
title="软著证号"
|
||
dataIndex="goodsNumber"
|
||
align="center"
|
||
// ellipsis
|
||
/>
|
||
<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 title="实名认证状态" dataIndex="address" key="key" /> */}
|
||
<Column
|
||
align="center"
|
||
title="操作"
|
||
render={(_text, record: any) => (
|
||
<Space size="middle">
|
||
<span className='copyrightG-goods-table-btn' onClick={() => {
|
||
// console.log(record);
|
||
|
||
setGoodsDetailModal(true)
|
||
getGoodsDetail(record.goodsId)
|
||
}}>查看详情</span>
|
||
</Space>
|
||
)}
|
||
/>
|
||
</Table>
|
||
|
||
</div>
|
||
</Spin>
|
||
{/* defaultCurrent: 默认当前页数 total:数据总数 defaultPageSize:'页面显示几条' */}
|
||
<div className='product-release-pagination' >
|
||
<Pagination
|
||
showSizeChanger={false}
|
||
current={page} total={total} defaultPageSize={10} 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={1200}
|
||
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>
|
||
</Modal>
|
||
|
||
|
||
<Modal
|
||
title="提示"
|
||
okText="确认"
|
||
cancelText="取消"
|
||
destroyOnClose={true}
|
||
open={buyTipsModal}
|
||
onCancel={() => {
|
||
setBuyTipsModal(false)
|
||
}}
|
||
onOk={() => {
|
||
// alert(goodsId)
|
||
createOrderFun(goodsId)
|
||
}}
|
||
// width={1200}
|
||
centered
|
||
>
|
||
确定购买该商品吗？
|
||
</Modal>
|
||
|
||
|
||
</div>
|
||
)
|
||
}
|