index.tsx
3.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import React, {useEffect, useState} from 'react'
import './style.less'
import NavBar from '@/components/nav-bar'
import {baseColorPrimary} from "@/utils/common";
import {hexToRgba} from "@/utils/utils";
import _mp4 from './mp4.png';
import _pdf from './pdf.png';
import { useSearchParams } from "react-router-dom";
const ProductionList: React.FC = () => {
const [title, setTitle] = useState<string>('');
// 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组
const [params] = useSearchParams();
console.log('ProductionList===params', params)
// 通过 get 方法获取目标参数
const name = params.get("name") || "";
useEffect(() => {
if (name) {
setTitle(name)
}
}, [name])
const list = [
{
id: '1',
name: '工艺流程指导文件',
type: 'pdf'
},
{
id: '2',
name: '设备操作指导文件',
type: 'mp4'
},
{
id: '3',
name: '工艺流程指导文件2',
type: 'pdf'
},
{
id: '4',
name: '工艺流程指导文件3',
type: 'pdf'
},
{
id: '5',
name: '工艺流程指导文件4',
type: 'pdf'
},
{
id: '6',
name: '工艺流程指导文件5',
type: 'pdf'
},
{
id: '7',
name: '设备操作指导文件2',
type: 'mp4'
},
{
id: '8',
name: '设备设备设备设备设备设备设备操作指导文件3',
type: 'mp4'
},
{
id: '9',
name: '设备操作指导文件4',
type: 'mp4'
},
{
id: '10',
name: '设备操作指导文件5',
type: 'mp4'
},
{
id: '11',
name: '设备操作指导文件6',
type: 'mp4'
},
{
id: '12',
name: '设备操作指导文件7',
type: 'mp4'
},
{
id: '13',
name: '设备操作指导文件8',
type: 'mp4'
},
{
id: '14',
name: '设备操作指导文件9',
type: 'mp4'
},
{
id: '15',
name: '设备操作指导文件10',
type: 'mp4'
}
]
return (
<div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
<div className={'production-list'}>
<NavBar title={title} showBack={true}/>
<div className={'production-list_list'}>
{
list?.map((item: any) => {
return <div
key={item?.id}
className={'production-list_list-item'}
style={{backgroundColor: hexToRgba(baseColorPrimary, 0.6)}}
>
<img className={'production-list_list-item-img'} src={item?.type === 'mp4' ? _mp4 : _pdf}/>
<div className={'omit2 production-list_list-item-name'}>
{item?.name}
</div>
</div>
})
}
</div>
</div>
</div>
)
}
export default ProductionList;