fix

src/global.tsx

@@ -2,14 +2,15 @@ import { useIntl } from '@umijs/max';
 import { Button, message, notification } from 'antd';
 import defaultSettings from '../config/defaultSettings';
 import { createFromIconfontCN } from '@ant-design/icons';
-
+import nocover from '../public/nocover.jpg'
 const { pwa } = defaultSettings;
 const isHttps = document.location.protocol === 'https:';
-export let scriptUrl = "//at.alicdn.com/t/c/font_4644725_sif6l9wwae.js"
-
+export let scriptUrl = "//at.alicdn.com/t/c/font_4644725_rof7okshv7t.js"//线上icon
+// 自定义icon组件用于线上icon
 export const MyIcon = createFromIconfontCN({
   scriptUrl// 在 iconfont.cn 上生成
 });
+localStorage.setItem("nocover",nocover)
 const clearCache = () => {
   // remove all caches
   if (window.caches) {

src/pages/MiniApp/BookManage/Long/formConfig.tsx

@@ -0,0 +1,97 @@
+import { convertEnumArr } from "@/utils";
+import { ProFormColumnsType } from "@ant-design/pro-components";
+
+function formConfig(props: { paragraphList?: any[], enumList?: { [key: string]: any }, paymentType: any[] }): ProFormColumnsType<{
+    name: string;
+    state: string;
+}>[] {
+    let { paragraphList, enumList, paymentType } = props
+    // console.log("paragraphList",paragraphList)
+    return [
+        {
+            title: '开始付费段落',
+            dataIndex: 'beginPayChapterNo',
+            valueType: 'select',
+            fieldProps: {
+                showSearch: true, placeholder: '请选择开始收费段落'
+            },
+            formItemProps: {
+                style: { marginBottom: 15 },
+                rules: [
+                    {
+                        required: true,
+                        message: '此项为必填项',
+                    },
+                ],
+            },
+            valueEnum: () => {
+                return new Map(paragraphList?.map(item => [item.chapterNo, item.chapterName]))
+            }
+        },
+        {
+            title: 'VIP阅读',
+            dataIndex: 'vipFree',
+            valueType: 'segmented',
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+            valueEnum: () => {
+                let arr = enumList?.VIP_FREE?.values
+                return new Map(arr?.map(({ value, description }: any) => [value, description]))
+            }
+        },
+        {
+            title: '付费方式',
+            dataIndex: 'paymentType',
+            valueType: 'checkbox',
+            fieldProps: {
+                onChange: (value) => {
+                    paymentType[1](value)
+                }
+            },
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+            valueEnum: () => {
+                let arr = enumList?.PAYMENT_TYPE?.values
+                let obj = {}
+                if (paymentType?.[0]?.includes('0')) {
+                    obj = { "1": { disabled: true }, '2': { disabled: true }, '3': { disabled: true } }
+                }
+                if (paymentType?.[0]?.join().match(/[123]/g)) {
+                    obj = { "0": { disabled: true } }
+                }
+                let enumObj = convertEnumArr(arr, obj)
+                return enumObj
+            }
+        },
+        {
+            title: '收费金额',
+            dataIndex: 'paymentAmount',
+            valueType: 'money',
+            hideInForm: !paymentType?.[0]?.includes('2'),
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+        },
+        {
+            title: '收费书币',
+            dataIndex: 'paymentCoin',
+            valueType: 'digit',
+            hideInForm: !paymentType?.[0]?.join().match(/[13]/g),
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+        },
+        {
+            title: '备注',
+            dataIndex: 'remark',
+            valueType: 'textarea',
+            formItemProps: {
+                style: { marginBottom: 15 },
+            },
+        }
+    ]
+}
+
+export default formConfig

src/pages/MiniApp/BookManage/Long/index.tsx

@@ -1,35 +1,180 @@
-import { PageContainer, ProTable } from "@ant-design/pro-components"
+import { ActionType, BetaSchemaForm, PageContainer, ProFormInstance, ProTable } from "@ant-design/pro-components"
 import { columns } from "./tableConfig"
 import { useAjax } from "@/Hook/useAjax"
 import { useModel } from "@umijs/max"
-import { longBookInfoList } from "@/services/miniApp/bookManage"
-
+import { longBookInfoList, longBookInfoChapterContent, longBookInfoBookConfig, longBookInfoConfig, longBookInfoChapterAllList } from "@/services/miniApp/bookManage"
+import { useEffect, useMemo, useRef, useState } from "react"
+import { Drawer, message } from "antd"
+import ReadText from "../components/readText"
+import formConfig from "./formConfig"
+import ReadBook from "../components/readBook"
+const wordCountRanges: any = {
+    "": { start: null, end: null }, // 全部
+    "0-2": { start: 0, end: 2 * 10000 },
+    "2-5": { start: 2 * 10000, end: 5 * 10000 },
+    "5-10": { start: 5 * 10000, end: 10 * 10000 },
+    "10-20": { start: 10 * 10000, end: 20 * 10000 },
+    "20-40": { start: 20 * 10000, end: 40 * 10000 },
+    "40-100": { start: 40 * 10000, end: 100 * 10000 },
+    "100-150": { start: 100 * 10000, end: 150 * 10000 },
+    "150-200": { start: 150 * 10000, end: 200 * 10000 },
+    "200-300": { start: 200 * 10000, end: 300 * 10000 },
+    "300-0": { start: 300 * 10000, end: null }, // 300万以上
+};
+type DataItem = {
+    name: string;
+    state: string;
+};
 const Page: React.FC = () => {
     let { initialState } = useModel("@@initialState")
-    let {enumList} = useModel("global",(res)=>({
-        enumList:res.state.enumList
-    }))
-    let getList = useAjax((params) => longBookInfoList(params), { type: 'table' })
+    let { state, getLabelAndClassList } = useModel('global')
+    let [open, setOpen] = useState<any>(null)//付费配置
+    let [editValues, setEditValues] = useState<any>({})
+    let paymentType = useState([])
+    let [workDirection, setWorkDirection] = useState<any>(null)
+    const [openBook, setOpneBook] = useState<any>(null)//阅读小说
+    let getList = useAjax((params) => longBookInfoList(params), { type: 'table' })//获取书列表
+    let getChapterContent = useAjax((params) => longBookInfoChapterContent(params))//获取章节内容信息
+    let getChapterAllList = useAjax((params) => longBookInfoChapterAllList(params))//获取全部章节
+    let add = useAjax((params) => longBookInfoBookConfig(params))//新增配置
+    let configInfo = useAjax((params) => longBookInfoConfig(params))//获取配置信息
+    const formRef = useRef<ProFormInstance>();
+    const actionRef = useRef<ActionType>();
+    // 获取标签和分类
+    useEffect(() => {
+        getLabelAndClassList({ workDirection })
+    }, [workDirection])
+    // 接口公共参数
+    let publicData = useMemo(() => {
+        return {
+            miniappId: initialState?.selectApp?.id || "",
+            distributorId: initialState?.currentUser?.distributorId,
+            appType: initialState?.selectApp?.appType || ""
+        }
+    }, [initialState?.selectApp, initialState?.currentUser?.distributorId])
+
+    // 看小说列表
+    const lookBookList = (params: any) => {
+        let { id, pageNum, pageSize } = params
+        return getChapterAllList.run({ bookId: id, ...publicData }).then(res => {
+            setOpneBook({ list: res.data, ...params })
+        })
+    }
+    // 看小说
+    const lookBook = (id: any) => {
+        return getChapterContent.run(id).then(res => {
+            return res.data
+        })
+    }
+    // 提交表单
+    const submit = async (values: any) => {
+        if (editValues?.id) {
+            values.id = editValues?.id
+        }
+        if (editValues?.bookId) {
+            values.bookId = editValues?.bookId
+        }
+        add.run({ ...values, ...publicData }).then(res => {
+            if (res.code === 200) {
+                actionRef?.current?.reload()
+                message.success("付费配置成功!")
+                closeForm(false)
+            }
+        })
+    }
+    // 关闭表单弹窗和重置表单内容
+    const closeForm = (b: boolean, values?: any) => {
+        if (!b) {
+            setEditValues({})
+            paymentType[1]([])
+            formRef?.current?.resetFields?.()
+            setOpen(b)
+        } else {
+            // 获取书全部章节
+            getChapterAllList.run({ bookId: values.bookId, ...publicData }).then(res => {
+                if (res.code === 200) {
+                    setOpen(b)//弹窗开启
+                    if (values) {
+                        // 获取书付费配置
+                        configInfo.run({ bookId: values.bookId, ...publicData }).then(res => {
+                            if (res.code === 200) {
+                                let paymentTypeArr = res.data?.paymentType?.map((i: string) => i + '')
+                                let data = { ...res.data, paymentType: paymentTypeArr }
+                                setEditValues(data)
+                                paymentType[1](paymentTypeArr)
+                                formRef?.current?.setFieldsValue(data)
+                            }
+                        })
+                    }
+                }
+            })
+        }
+    }
     return <PageContainer title={false}
         tabProps={{ type: 'card' }}
-        >
+    >
         <ProTable<any, any>
-            params={{
-                miniappId: initialState?.selectApp?.id || "",
-                distributorId: initialState?.currentUser?.distributorId,
-                appType:initialState?.selectApp?.appType || ""
-            }}
-            headerTitle={"长篇小说列表"}
-            rowKey={(r) => r.id}
+            params={publicData}
+            actionRef={actionRef}
+            headerTitle={"长篇篇小说列表"}
+            rowKey={(r) => r.bookId}
             search={{
-                labelWidth: 120,
+                labelWidth: 90,
+                searchGutter: [10, 15],
+            }}
+            loading={getChapterAllList?.loading || configInfo?.loading || getList.loading}
+            // ghost={true}//去除表格的背景一些配置改变ui
+            beforeSearchSubmit={(params) => {//处理搜索数据
+                let newParams = Object.entries(params).reduce((acc: any, [key, value]) => {
+                    // 过滤掉空值，包括空字符串和 null
+                    if (value !== '' && value != null) {
+                        acc[key] = value;
+                    }
+                    if (key === 'wordCount' && value) {
+                        let obj = wordCountRanges[value]
+                        acc['startWordCount'] = obj.start
+                        acc['endWordCount'] = obj.end
+                        delete acc[key]
+                    }
+                    return acc;
+                }, {});
+                return newParams
             }}
             request={async (params) => {
                 return await getList.run(params)
             }}
-            columns={columns()}
-        // bordered
+            columns={columns({ authList: state?.authList, labelList: state.labelList, categoryList: state.categoryList, enumList: state?.enumList, lookBook:lookBookList, closeForm, setWorkDirection })}
+        />
+        {/* 付费配置 */}
+        <BetaSchemaForm<DataItem>
+            title={"付费配置"}
+            formRef={formRef}
+            open={open}
+            onOpenChange={(b) => { !b && closeForm(b) }}
+            layoutType={"ModalForm"}
+            labelCol={{ span: 6 }}
+            wrapperCol={{ span: 14 }}
+            // grid={true}
+            layout='horizontal'
+            onFinish={submit}
+            columns={formConfig({ enumList: state?.enumList, paymentType, paragraphList: getChapterAllList?.data?.data?.map((item: { chapterInfo: any }) => item.chapterInfo) })}
+            loading={add?.loading}
         />
+        {/* 阅读小说 */}
+        <Drawer
+            open={!!openBook}
+            placement="right"
+            onClose={() => { setOpneBook(null) }}
+            footer={null}
+            width={'65%'}
+            destroyOnClose={true}
+            // getContainer={false}
+            styles={{ body: { padding: 0 } }}
+            closeIcon={false}
+            title={<div style={{ fontSize: 20 }}>{openBook?.bookName ? openBook?.bookName : ""}</div>}
+        >
+            <ReadBook listData={openBook} next={lookBook} />
+        </Drawer>
     </PageContainer>
 
 }

src/pages/MiniApp/BookManage/Long/tableConfig.tsx

@@ -1,104 +1,353 @@
+import { MyIcon } from "@/global";
+import { getDescriptions } from "@/utils";
 import { ProColumns } from "@ant-design/pro-components";
-import { Badge } from "antd";
-
-export const columns = (): ProColumns<any>[] => {
-    let payChannelObj: any = { '1': '微信小程序支付' };
-    let orderTypeObj: any = { '1': '书币充值', "2": "vip充值", "3": "购买整本" };
-    let orderStatusObj: any = { '1': '待支付', "2": "已支付" };
-    return [
-        {
-            title: "用户Id",
-            dataIndex: 'userId',
-            key: "userId",
-            align: "center",
+import { Badge, Col, Image, Row, Space, Tag } from "antd";
+import { createStyles } from "antd-style";
+const useStyles = createStyles(({ token }) => {
+    return {
+        bookLabel: {
+            color: token.colorTextTertiary
+        }
+    }
+})
+const brightColors = [
+    "#FF6347", // 番茄红
+    "#FF4500", // 橙红色
+    "#FFD700", // 金黄色
+    "#32CD32", // 鲜绿色
+    "#00FF7F", // 麦绿色
+    "#00CED1", // 暗青色
+    "#4682B4", // 钢蓝色
+    "#6A5ACD", // 鲜紫色
+    "#FF69B4", // 热粉红色
+    "#FF1493"  // 深粉红色
+];
+export const columns = (props: { authList?: any[], labelList?: any[], enumList?: { [key: string]: any }, categoryList?: any[], lookBook: (data: any) => void, closeForm: (b: boolean, d: any) => void, setWorkDirection: (w: any) => void }): ProColumns<any>[] => {
+    let { authList, labelList, categoryList, enumList, lookBook, closeForm, setWorkDirection } = props
+    let { styles } = useStyles()
+    return enumList?.BOOK_STATUS ? [
+        {
+            title: '封面',
+            dataIndex: 'picUrl',
+            key: 'picUrl',
+            width: 90,
+            ellipsis: true,
+            align: 'center',
             hideInSearch: true,
+            render: (a: any, b: any) => {
+                return <div style={{ position: 'relative' }}>
+                    {b?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 20, position: 'absolute', zIndex: 1 }} />}
+                    <Image src={b?.longBookInfo?.picUrl} style={{ width: 50 }} onError={(e:any)=>{
+                        e.target.src = localStorage.getItem("nocover")
+                    }} />
+                </div>
+            }
         },
         {
-            title: "小说名称",
-            dataIndex: 'bookName',
-            key: "bookName",
-            align: "center",
+            title: '作品详情',
+            dataIndex: 'authorId',
+            key: 'authorId',
+            ellipsis: true,
             hideInSearch: true,
+            render: (a, b) => {
+                let { bookName, wordCount, labelInfoList, bookStatus, categoryInfo, authorInfo, score } = b?.longBookInfo
+                let arr = enumList?.BOOK_STATUS?.values
+                return <Row >
+                    <Col span={24}>
+                        <Space size={[5, 0]} wrap>
+                            <a style={{ fontSize: 14, color: "#337ab7" }} onClick={() => {
+                                lookBook?.({ ...b.longBookInfo, pageNum: 1, pageSize: 2 })
+                            }}>[{categoryInfo?.name}]{bookName}</a>
+                            <span style={{ fontSize: 11 }} className={styles.bookLabel}>[{arr[bookStatus]?.description}]</span>
+                            <Space size={[0, 0]}>
+                                {
+                                    labelInfoList?.map((tags: { id: string, name: string }, index: number) => {
+                                        return <Tag key={tags?.id} color={brightColors[index]}>{tags?.name}</Tag>
+                                    })
+                                }
+                            </Space>
+                        </Space>
+                    </Col>
+                    <Col span={24} className={styles.bookLabel}><span ><span>作者</span>：</span>{authorInfo?.authorName}</Col>
+                    <Col span={24} className={styles.bookLabel}><span >总字数：</span>{wordCount || 0}</Col>
+                    <Col span={24} className={styles.bookLabel}><span >评分：</span>{score || 0}</Col>
+                </Row>
+            }
         },
         {
-            title: "支付渠道",
-            dataIndex: 'payChannel',
-            key: "payChannel",
-            align: "center",
-            valueType:'select',
-            valueEnum:payChannelObj,
-            render: (a: any,b:any) => {
-                return payChannelObj[b.payChannel]
-            },
+            title: '所属频道',
+            dataIndex: 'workDirection',
+            key: 'workDirection',
+            align: 'center',
+            width: 80,
+            ellipsis: true,
+            hideInSearch: true,
+            render: (a: any, b: any) => {
+                return enumList?.WORK_DIRECTION?.values[b.longBookInfo.workDirection]?.description
+            }
+        },
+        {
+            title: '点击量',
+            dataIndex: 'visitCount',
+            key: 'visitCount',
+            width: 90,
+            ellipsis: true,
+            align: 'center',
+            hideInSearch: true,
+            render: (a, b) => {
+                let { visitCount } = b?.longBookInfo
+                return visitCount
+            }
+        },
+        {
+            title: '上架状态',
+            dataIndex: 'shelveStatus',
+            key: 'shelveStatus',
+            width: 90,
+            ellipsis: true,
+            align: 'center',
+            hideInSearch: true,
+            render: (a: any, b) => {
+                let arr: any = enumList?.SHELVE_STATUS?.values
+                let { shelveStatus } = b?.longBookInfo
+                return arr[shelveStatus]?.description && <Badge text={arr[shelveStatus]?.description} status={shelveStatus == 0 ? "processing" : "default"} />
+            }
         },
         {
-            title: "支付金额",
-            dataIndex: 'amount',
-            key: "amount",
+            title: '来源',
+            dataIndex: 'source',
+            key: 'source',
+            width: 90,
+            ellipsis: true,
+            align: 'center',
             hideInSearch: true,
-            align: "center",
+            render: (a: any, b) => {
+                let { source } = b?.longBookInfo
+                let arr: any = new Map(enumList?.SOURCE?.values?.map(({ value, description }: any) => [value, description]))
+                return arr.get(source)
+            }
         },
         {
-            title: "订单类型",
-            dataIndex: 'orderType',
-            key: "orderType",
-            valueType:'select',
-            valueEnum:orderTypeObj,
-            align: "center",
-            render: (a: any,b:any) => {
-                return orderTypeObj[b.orderType]
+            title: '收费类型',
+            dataIndex: 'paymentType',
+            key: 'paymentType',
+            width: 100,
+            ellipsis: true,
+            align: 'center',
+            hideInSearch: true,
+            render: (a: any, b: any) => {
+                let arr = getDescriptions(enumList?.PAYMENT_TYPE?.values || [], b?.paymentType || [])
+                return <Space size={[0, 5]} wrap>
+                    {
+                        arr?.map(str => {
+                            return <Tag bordered={false} key={str}>{str}</Tag>
+                        })
+                    }
+                </Space>
             }
         },
         {
-            title: "订单状态",
-            dataIndex: 'orderStatus',
-            key: "orderStatus",
-            valueType:'select',
-            valueEnum:orderStatusObj,
-            align: "center",
-            render: (a: any,b:any) => {
-                return <Badge text={orderStatusObj[b.orderStatus]} status={b.orderStatus != 1 ? "success" : "warning"} />
+            title: 'VIP免费',
+            dataIndex: 'vipFree',
+            key: 'vipFree',
+            width: 70,
+            ellipsis: true,
+            align: 'center',
+            hideInSearch: true,
+            render: (a: any, b) => {
+                return <Badge text={b?.vipFree ? "是" : "否"} status={b?.vipFree ? "processing" : "error"} />
             }
         },
         {
-            title: "用户订单号",
-            dataIndex: 'orderId',
-            key: "orderId",
-            align: "center",
+            title: '收费金额',
+            tooltip: "收费金额（整本）",
+            dataIndex: 'paymentAmount',
+            key: 'paymentAmount',
+            width: 100,
+            ellipsis: true,
+            align: 'center',
+            hideInSearch: true,
         },
         {
-            title: "商户订单号",
-            dataIndex: 'merchantOrderId',
-            key: "merchantOrderId",
-            align: "center",
+            title: '收费书币',
+            tooltip: "收费书币（/千字、/本、/段|章节）",
+            dataIndex: 'paymentCoin',
+            key: 'paymentCoin',
+            width: 100,
+            ellipsis: true,
+            align: 'center',
+            hideInSearch: true,
         },
         {
-            title: "下单时间",
-            dataIndex: 'orderTime',
-            key: "orderTime",
+            title: '开始收费段落',
+            dataIndex: 'beginPayParagraphNo',
+            key: 'beginPayParagraphNo',
+            width: 100,
+            ellipsis: true,
+            align: 'center',
             hideInSearch: true,
-            align: "center",
         },
         {
-            title: "支付时间",
-            tooltip: "实际到账时间",
-            dataIndex: 'payTime',
-            key: "payTime",
+            title: '操作',
+            dataIndex: 'cz',
+            key: 'cz',
+            width: 90,
+            ellipsis: true,
+            align: 'center',
             hideInSearch: true,
-            align: "center",
+            render: (a: any, b: any) => {
+                return <a onClick={() => { closeForm(true, b) }}>付费配置</a>
+            }
         },
         // 搜索条件
         {
-            title: "开始时间",
-            dataIndex: 'startTime',
-            valueType: 'dateTime',
-            hideInTable: true
+            title: "小说名称",
+            dataIndex: 'bookName',
+            valueType: 'text',
+            hideInTable: true,
+            fieldProps: { placeholder: "请输入小说名称" },
+            colSize: 1,
+        },
+        {
+            title: "作者",
+            dataIndex: 'authorId',
+            valueType: 'select',
+            hideInTable: true,
+            fieldProps: { showSearch: true, placeholder: '请选择作者' },
+            colSize: 1,
+            valueEnum: new Map(authList?.map(({ id, authorName }) => [id, authorName]))
         },
         {
-            title: "结束时间",
-            dataIndex: 'endTime',
-            valueType: 'dateTime',
-            hideInTable: true
+            title: "频道",
+            dataIndex: 'workDirection',
+            valueType: 'segmented',
+            hideInTable: true,
+            fieldProps: {
+                type: 'primary', style: { width: 'auto' }, onChange: (value) => {
+                    setWorkDirection(value)
+                }
+            },
+            colSize: 3,
+            initialValue: '',
+            valueEnum: () => {
+                let arr = enumList?.WORK_DIRECTION?.values
+                return arr ? new Map([{ value: '', description: "全部" }, ...arr]?.map(({ value, description }: any) => [value, description])) : {}
+            }
+        },
+        {
+            title: "分类",
+            dataIndex: 'categoryId',
+            valueType: 'segmented',
+            hideInTable: true,
+            hideInSearch: !labelList,
+            fieldProps: { type: 'primary', style: { width: 'auto' } },
+            colSize: 3,
+            initialValue: '',
+            valueEnum: () => {
+                let arr = categoryList || []
+                return new Map([{ id: "", name: "全部" }, ...arr]?.map(item => [item.id, item.name]))
+            }
+        },
+        {
+            title: "标签",
+            dataIndex: 'labelIds',
+            valueType: 'segmented',
+            hideInTable: true,
+            hideInSearch: !labelList,
+            fieldProps: { type: 'primary', style: { width: 'auto' } },
+            colSize: 3,
+            initialValue: '',
+            valueEnum: () => {
+                let arr = labelList || []
+                return new Map([{ id: "", name: "全部" }, ...arr]?.map(item => [item.id, item.name]))
+            },
+        },
+        {
+            title: "来源",
+            dataIndex: 'source',
+            valueType: 'segmented',
+            hideInTable: true,
+            fieldProps: { type: 'primary', style: { width: 'auto' } },
+            colSize: 3,
+            initialValue: '',
+            valueEnum: () => {
+                let arr = enumList?.SOURCE?.values
+                return arr ? new Map([{ value: '', description: "全部" }, ...arr]?.map(({ value, description }: any) => [value, description])) : {}
+            }
+        },
+        {
+            title: "连载",
+            dataIndex: 'bookStatus',
+            valueType: 'segmented',
+            hideInTable: true,
+            fieldProps: { type: 'primary', style: { width: 'auto' } },
+            colSize: 3,
+            initialValue: '',
+            valueEnum: () => {
+                let arr = enumList?.BOOK_STATUS?.values
+                return arr ? new Map([{ value: '', description: "全部" }, ...arr]?.map(({ value, description }: any) => [value, description])) : {}
+            }
+        },
+        {
+            title: "上架",
+            dataIndex: 'shelveStatus',
+            valueType: 'segmented',
+            hideInTable: true,
+            fieldProps: { type: 'primary', style: { width: 'auto' } },
+            colSize: 3,
+            initialValue: '',
+            valueEnum: () => {
+                let arr = enumList?.SHELVE_STATUS?.values
+                return arr ? new Map([{ value: '', description: "全部" }, ...arr]?.map(({ value, description }: any) => [value, description])) : {}
+            }
+        },
+        {
+            title: "付费",
+            dataIndex: 'paymentType',
+            valueType: 'segmented',
+            hideInTable: true,
+            fieldProps: { type: 'primary', style: { width: 'auto' } },
+            colSize: 3,
+            initialValue: '',
+            valueEnum: () => {
+                let arr = enumList?.PAYMENT_TYPE?.values
+                return arr ? new Map([{ value: '', description: "全部" }, ...arr]?.map(({ value, description }: any) => [value, description])) : {}
+            }
+        },
+        {
+            title: "VIP",
+            dataIndex: 'vipFree',
+            valueType: 'segmented',
+            hideInTable: true,
+            fieldProps: { type: 'primary', style: { width: 'auto' } },
+            colSize: 3,
+            initialValue: '',
+            valueEnum: () => {
+                let arr = enumList?.VIP_FREE?.values
+                return arr ? new Map([{ value: '', description: "全部" }, ...arr]?.map(({ value, description }: any) => [value, description])) : {}
+            }
+        },
+        {
+            title: "字数",
+            dataIndex: 'wordCount',
+            valueType: 'segmented',
+            hideInTable: true,
+            fieldProps: { type: 'primary', style: { width: 'auto' } },
+            colSize: 3,
+            initialValue: '',
+            valueEnum: {
+                "": "全部",
+                "0-2": "2万内",
+                "2-5": "2-5万",
+                "5-10": "5-10万",
+                "10-20": "10-20万",
+                "20-40": "20-40万",
+                "40-100": "40-100万",
+                "100-150": "100-150万",
+                "150-200": "150-200万",
+                "200-300": "200-300万",
+                "300-0": "300万以上",
+            },
         },
-    ];
+    ] : []
 }

src/pages/MiniApp/BookManage/Short/formConfig.tsx

@@ -45,7 +45,6 @@ function formConfig(props: { paragraphList?: any[], enumList?: { [key: string]:
             valueType: 'checkbox',
             fieldProps: {
                 onChange: (value) => {
-                    console.log(value)
                     paymentType[1](value)
                 }
             },

src/pages/MiniApp/BookManage/Short/index.tsx

@@ -41,7 +41,7 @@ const Page: React.FC = () => {
     const actionRef = useRef<ActionType>();
     // 获取标签和分类
     useEffect(() => {
-         getLabelAndClassList({ workDirection })
+        getLabelAndClassList({ workDirection })
     }, [workDirection])
     // 接口公共参数
     let publicData = useMemo(() => {
@@ -55,7 +55,7 @@ const Page: React.FC = () => {
     // 看小说
     const lookBook = (params: any) => {
         let { id, pageNum, pageSize } = params
-        return getParagraphList.run({ bookId: id, pageNum, pageSize, backContent: true }).then(res => {
+        return getParagraphList.run({ bookId: id, pageNum, pageSize, backContent: true,...publicData }).then(res => {
             setOpneBook({ ...res.data, ...params })
             return res.data
         })
@@ -85,7 +85,7 @@ const Page: React.FC = () => {
             setOpen(b)
         } else {
             // 获取书全部段落
-            getParagraphAllList.run({ bookId: values.bookId, backContent: true }).then(res => {
+            getParagraphAllList.run({ bookId: values.bookId, backContent: true,...publicData }).then(res => {
                 if (res.code === 200) {
                     setOpen(b)//弹窗开启
                     if (values) {
@@ -116,6 +116,7 @@ const Page: React.FC = () => {
                 labelWidth: 90,
                 searchGutter: [10, 15],
             }}
+            loading={getParagraphList?.loading || getList?.loading}
             // ghost={true}//去除表格的背景一些配置改变ui
             beforeSearchSubmit={(params) => {//处理搜索数据
                 let newParams = Object.entries(params).reduce((acc: any, [key, value]) => {

src/pages/MiniApp/BookManage/Short/tableConfig.tsx

@@ -1,3 +1,4 @@
+import { MyIcon } from "@/global";
 import { getDescriptions } from "@/utils";
 import { ProColumns } from "@ant-design/pro-components";
 import { Badge, Col, Image, Row, Space, Tag } from "antd";
@@ -34,7 +35,12 @@ export const columns = (props: { authList?: any[], labelList?: any[], enumList?:
             align: 'center',
             hideInSearch: true,
             render: (a: any, b: any) => {
-                return <Image src={b?.shortBookInfoVO?.picUrl} style={{ width: 50 }} />
+                return <div style={{position:'relative'}}>
+                   {b?.vipFree && <MyIcon type="icon-vipmianfei" style={{fontSize:20,position:'absolute',zIndex:1}}/>}
+                    <Image src={b?.shortBookInfoVO?.picUrl} style={{ width: 50 }}  onError={(e:any)=>{
+                        e.target.src = localStorage.getItem("nocover")
+                    }}/>
+                </div>
             }
         },
         {
@@ -50,7 +56,7 @@ export const columns = (props: { authList?: any[], labelList?: any[], enumList?:
                     <Col span={24}>
                         <Space size={[5, 0]} wrap>
                             <a style={{ fontSize: 14, color: "#337ab7" }} onClick={() => {
-                                lookBook?.({ ...b.shortBookInfoVO, pageNum: 1, pageSize: 2 })
+                                lookBook?.({ ...b.shortBookInfoVO,vipFree:b.vipFree,beginPayParagraphNo:b.beginPayParagraphNo, pageNum: 1, pageSize: 2 })
                             }}>[{categoryInfo?.name}]{bookName}</a>
                             <span style={{ fontSize: 11 }} className={styles.bookLabel}>[{arr[bookStatus]?.description}]</span>
                             <Space size={[0, 0]}>
@@ -149,7 +155,7 @@ export const columns = (props: { authList?: any[], labelList?: any[], enumList?:
             align: 'center',
             hideInSearch: true,
             render: (a: any, b) => {
-                return <Badge text={!b?.vipFree ? "是" : "否"} status={!b?.vipFree ? "processing" : "error"} />
+                return <Badge text={b?.vipFree ? "是" : "否"} status={b?.vipFree ? "processing" : "error"} />
             }
         },
         {

src/pages/MiniApp/BookManage/components/readBook/index.tsx

@@ -1,19 +1,17 @@
 import { useVirtualList } from "ahooks";
-import { Button, Col, Row, Image, Spin, Space, Drawer } from "antd";
-import { JSXElementConstructor, Key, ReactElement, ReactFragment, ReactPortal, useEffect, useRef, useState } from "react";
-import { ReactComponent as SuoSvg } from '@/assets/suo.svg';
-function ReadBook(props: { next: (data: { id: number }) => Promise<any>, listData: any }) {
+import { Button, Col, Row, Image, Spin, Space, Drawer, Empty } from "antd";
+import { JSXElementConstructor, Key, ReactElement, ReactFragment, ReactPortal, useEffect, useMemo, useRef, useState } from "react";
+import { MyIcon } from "@/global";
+import { useToken } from "@ant-design/pro-components";
+function ReadBook(props: { next: (listData: { id: number }) => Promise<any>, listData: any }) {
     let { next, listData } = props;
     const divRef = useRef<HTMLDivElement>(null);
+    let { token } = useToken()
     const [isFetching, setIsFetching] = useState(true);
     const [newData, setNewData] = useState<any>(null);
     const [content, setContent] = useState<any>(null)
-    const list = useVirtualList(listData?.list || [],{
-        containerTarget: undefined,
-        wrapperTarget: undefined,
-        itemHeight: 0
-    });
-
+    const containerRef = useRef(null);
+    const wrapperRef = useRef(null);
     useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
             if (divRef.current) {
@@ -33,7 +31,8 @@ function ReadBook(props: { next: (data: { id: number }) => Promise<any>, listDat
 
     async function getBookContent(id: any) {
         let content = await next(id)
-        setContent(content)
+        console.log(content)
+        // setContent(content)
     }
     useEffect(() => {
         if (divRef.current) {
@@ -45,42 +44,50 @@ function ReadBook(props: { next: (data: { id: number }) => Promise<any>, listDat
             style={{ height: '85vh', overflow: 'hidden', display: 'flex', justifyContent: 'space-around' }}
         >
             <div style={{ width: '20%', flexFlow: 'column', alignItems: 'center', display: 'flex', borderRight: '1px solid #efefef' }}>
-                <Image src={listData?.picUrl} style={{ width: 150, marginBottom: 20 }} />
-                <Row style={{ width: '80%' }}>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }}><span style={{ color: "#333" }}><span>作者</span>：</span>{listData?.authorName}</Col>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }}><span style={{ color: "#333" }}><span>来源</span>：</span>{({ "UPLOAD": "管理员", "CREATOR": "创作者" } as any)[listData.source]}</Col>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }}><span style={{ color: "#333" }}><span>频道</span>：</span>{listData?.corpUserName == 0 ? "男频" : "女频"}</Col>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }}><span style={{ color: "#333" }}>标签：</span> {
-                        listData?.labels?.map((tags: { id: string, name: string }, index: number) => {
+                <div style={{ marginBottom: 20, marginTop: 20 }}>
+                    {listData?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 70, position: 'absolute', zIndex: 1 }} />}
+                    <Image src={listData?.picUrl} style={{ width: 150 }} onError={(e: any) => {
+                        e.target.src = localStorage.getItem("nocover")
+                    }} />
+                </div>
+                <Row style={{ width: '80%' }} gutter={[10, 5]}>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>作者</span>：</span>{listData?.authorInfo?.authorName}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>类别</span>：</span>{listData?.categoryInfo?.name}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>来源</span>：</span>{({ "UPLOAD": "管理员", "CREATOR": "创作者" } as any)[listData.source]}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>频道</span>：</span>{listData?.corpUserName == 0 ? "男频" : "女频"}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>标签：</span> {
+                        listData?.labelInfoList?.map((tags: { id: string, name: string }, index: number) => {
                             return tags?.name
                         }).join(',')
                     }</Col>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }} ><span style={{ color: "#333" }}><span>状态</span>：</span>{["连载中", "已完结"][listData.bookStatus]}</Col>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }}><span style={{ color: "#333" }}>评分：</span>{listData?.score || 0}</Col>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }}><span style={{ color: "#333" }}>点击量：</span>{listData?.visitCount}</Col>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }}><span style={{ color: "#333" }}>总字数：</span>{listData?.wordCount}</Col>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }}><span style={{ color: "#333" }}>上架状态：</span>{["上架中", "已下架"][listData.shelveStatus]}</Col>
-                    <Col span={24} style={{ fontSize: 14, color: "#777" }}><span style={{ color: "#333" }}>描述：</span>{listData.bookDesc}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }} ><span style={{ color: token.colorText }}><span>状态</span>：</span>{["连载中", "已完结"][listData.bookStatus]}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>评分：</span>{listData?.score || 0}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>点击量：</span>{listData?.visitCount || 0}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>总字数：</span>{listData?.wordCount || 0}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>上架状态：</span>{["上架中", "已下架"][listData.shelveStatus]}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>描述：</span>{listData?.bookDesc}</Col>
 
                 </Row>
             </div>
+
             <div
-                style={{ overflowY: 'auto', display: 'flex', flexFlow: "column", width: '75%' }}
+                style={{ overflowY: 'auto', display: 'flex', flexFlow: "column", width: '75%', paddingTop: 20, paddingBottom: 20 }}
                 ref={divRef}
             >
                 <div >
-                    {/* {list?.map((ele) => (
+                    {listData.list?.map((ele: any, index: number) => (
                         <a
-                            key={ele.index}
+                            key={index}
                             style={{ display: 'inline-block', marginRight: ele.index % 4 === 0 ? 0 : 20, marginBottom: 10, width: 190, overflow: 'hidden' }}
-                            onClick={() => { getBookContent(ele.data.chapterInfo.id) }}
+                            onClick={() => { getBookContent(ele?.chapterInfo?.id) }}
                         >
                             <div style={{ display: 'flex', alignItems: 'center' }}>
-                                {ele.data.needPay && <SuoSvg width={15} height={15} style={{ marginRight: 5 }} />}
-                                <span >{ele.data.chapterInfo.chapterName}</span>
+                                {ele.needPay && <MyIcon type="icon-jiesuo" style={{ marginRight: 5 }} />}
+                                <span >{ele?.chapterInfo?.chapterName}</span>
                             </div>
                         </a>
-                    ))} */}
+                    ))}
+                    {listData.list?.length === 0 && <div style={{ width: "100%", height: "100%", marginTop: "10%" }}><Empty description={<Space direction='vertical'><div>暂无章节</div></Space>} /></div>}
                 </div>
                 {/* 阅读小说 */}
                 <Drawer
@@ -90,15 +97,15 @@ function ReadBook(props: { next: (data: { id: number }) => Promise<any>, listDat
                     footer={null}
                     width={'60%'}
                     destroyOnClose={true}
-                    bodyStyle={{ padding: 0 }}
+                    styles={{ body: { padding: 0 } }}
                     closeIcon={false}
-                    title={<div style={{ fontSize: 20 }}>{content?.chapterName}</div>}
+                // title={<div style={{ fontSize: 20 }}>{content?.chapterName}</div>}
                 >
                     {
                         content && <>
                             <div
                                 ref={divRef}
-                                style={{ borderTop: '1px solid #efefef', fontSize: 17,lineHeight:2, padding: '0 40px', height: '87vh', overflowY: 'auto', paddingBottom: 50,paddingTop:15, boxSizing: 'border-box' }} dangerouslySetInnerHTML={{ __html: content.content.replace(/\n/g, '<br/>') }}></div>
+                                style={{ borderTop: '1px solid #efefef', fontSize: 17, lineHeight: 2, padding: '0 40px', height: '87vh', overflowY: 'auto', paddingBottom: 50, paddingTop: 15, boxSizing: 'border-box' }} dangerouslySetInnerHTML={{ __html: content.content.replace(/\n/g, '<br/>') }}></div>
                             <div style={{ borderTop: '1px solid #efefef', display: 'flex', justifyContent: 'center' }}>
                                 <Space style={{ marginTop: 15 }}>
                                     {content?.chapterNo > 1 && <Button onClick={() => {

src/pages/MiniApp/BookManage/components/readText/index.tsx

@@ -1,13 +1,13 @@
+import { MyIcon } from "@/global";
 import { useToken } from "@ant-design/pro-components";
-import { Col, Row, Spin, Image } from "antd";
+import { Col, Row, Spin, Image, Divider } from "antd";
 import { useEffect, useRef, useState } from "react";
-
 function ReadText(props: { next: (data: { pageNum: number, pageSize: number, id: number }) => Promise<any>, data: any }) {
     let { next, data } = props;
     const divRef = useRef<HTMLDivElement>(null);
     const [isFetching, setIsFetching] = useState(true);
     const [newData, setNewData] = useState<any>(null);
-    let {token} = useToken()
+    let { token } = useToken()
     console.log(data)
     // 存放首次的size
     useEffect(() => {
@@ -62,23 +62,28 @@ function ReadText(props: { next: (data: { pageNum: number, pageSize: number, id:
             style={{ height: '90vh', overflow: 'hidden', display: 'flex', justifyContent: 'space-around' }}
         >
             <div style={{ width: '20%', flexFlow: 'column', alignItems: 'center', display: 'flex', borderRight: '1px solid #efefef' }}>
-                <Image src={data?.picUrl} style={{ width: 150, marginBottom: 20, marginTop: 20 }} />
+                <div style={{ marginBottom: 20, marginTop: 20 }}>
+                    {data?.vipFree && <MyIcon type="icon-vipmianfei" style={{ fontSize: 70, position: 'absolute', zIndex: 1 }} />}
+                    <Image src={data?.picUrl} style={{ width: 150 }} onError={(e: any) => {
+                        e.target.src = localStorage.getItem("nocover")
+                    }} />
+                </div>
                 <Row style={{ width: '80%' }} gutter={[10, 5]}>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText }}><span>作者</span>：</span>{data?.authorInfo?.authorName}</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText  }}><span>类别</span>：</span>{data?.categoryInfo?.name}</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText  }}><span>来源</span>：</span>{({ "UPLOAD": "管理员", "CREATOR": "创作者" } as any)[data.source]}</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText  }}><span>频道</span>：</span>{data?.corpUserName == 0 ? "男频" : "女频"}</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText  }}>标签：</span> {
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>作者</span>：</span>{data?.authorInfo?.authorName}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>类别</span>：</span>{data?.categoryInfo?.name}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>来源</span>：</span>{({ "UPLOAD": "管理员", "CREATOR": "创作者" } as any)[data.source]}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}><span>频道</span>：</span>{data?.corpUserName == 0 ? "男频" : "女频"}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>标签：</span> {
                         data?.labelInfoList?.map((tags: { id: string, name: string }, index: number) => {
                             return tags?.name
                         }).join(',')
                     }</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }} ><span style={{ color: token. colorText  }}><span>状态</span>：</span>{["连载中", "已完结"][data.bookStatus]}</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText  }}>评分：</span>{data?.score || 0}</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText  }}>点击量：</span>{data?.visitCount || 0}</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText  }}>总字数：</span>{data?.wordCount || 0}</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText  }}>上架状态：</span>{["上架中", "已下架"][data.shelveStatus]}</Col>
-                    <Col span={24} style={{ fontSize: 14, color:token.colorTextSecondary }}><span style={{ color: token. colorText  }}>描述：</span>{data?.bookDesc}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }} ><span style={{ color: token.colorText }}><span>状态</span>：</span>{["连载中", "已完结"][data.bookStatus]}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>评分：</span>{data?.score || 0}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>点击量：</span>{data?.visitCount || 0}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>总字数：</span>{data?.wordCount || 0}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>上架状态：</span>{["上架中", "已下架"][data.shelveStatus]}</Col>
+                    <Col span={24} style={{ fontSize: 14, color: token.colorTextSecondary }}><span style={{ color: token.colorText }}>描述：</span>{data?.bookDesc}</Col>
 
                 </Row>
             </div>
@@ -89,8 +94,11 @@ function ReadText(props: { next: (data: { pageNum: number, pageSize: number, id:
             >
                 <Spin spinning={!data?.size}>
                     {
-                        newData?.records?.map((item: { paragraphInfo: { id: number, content: string } }) => {
-                            return <div style={{ fontSize: 17, lineHeight: 2 }} key={item.paragraphInfo.id} dangerouslySetInnerHTML={{ __html: item.paragraphInfo.content.replace(/\n/g, '<br/>') }}></div>
+                        newData?.records?.map((item: { paragraphInfo: { id: number, content: string, paragraphNo: number } }) => {
+                            return <>
+                                {data.beginPayParagraphNo === item.paragraphInfo.paragraphNo && <Divider plain dashed><strong style={{ fontSize: 20, color: token.colorErrorText }}>以下内容为收费内容</strong></Divider>}
+                                <div style={{ fontSize: 17, lineHeight: 2 }} key={item.paragraphInfo.id} dangerouslySetInnerHTML={{ __html: item.paragraphInfo.content.replace(/\n/g, '<br/>') }} />
+                            </>
                         })
                     }
                 </Spin>

src/services/miniApp/bookManage/index.tsx

@@ -62,9 +62,10 @@ export async function longBookInfoChapterList(params: LongBookParams) {
   });
 }
 /**小说章节全部列表 */
-export async function longBookInfoChapterAllList(bookId: number) {
-  return request(api + `/admin/longBookInfo/chapterAllList/${bookId}`, {
+export async function longBookInfoChapterAllList(params: any) {
+  return request(api + `/admin/longBookInfo/chapterAllList`, {
     method: 'GET',
+    params
   });
 }
 /**小说付费章节内容 */
@@ -113,10 +114,9 @@ export async function shortBookInfoParagraphList(params: ShortBookParams) {
 }
 /**小说段落全部列表 */
 export async function shortBookInfoParagraphAllList(data:any) {
-  let {bookId,...params} = data
-  return request(api + `/admin/shortBookInfo/paragraphAllList/${bookId}`, {
+  return request(api + `/admin/shortBookInfo/paragraphAllList`, {
     method: 'GET',
-    params
+    params:data
   });
 }
 /**小说付费配置 */