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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
| 1import React,{Component} from 'react'
2import {
3 Card,
4 Select,
5 Input,
6 Table,
7 Icon,
8 Button,
9 message
10} from 'antd'
11import LinkButton from '../../../components/link-button'
12
13const Option=Select.Option
14
15export default class Home extends Component{
16 state={
17 //【5】商品列表
18 products:[
19 {
20 "status": 1,
21 "imgs": [
22 "image-1559402396338.jpg"
23 ],
24 "_id": "5ca9e05db49ef916541160cd",
25 "name": "联想ThinkPad 翼4809",
26 "desc": "年度重量级新品，X390、T490全新登场 更加轻薄机身设计9",
27 "price": 65999,
28 "pCategoryId": "5ca9d6c0b49ef916541160bb",
29 "categoryId": "5ca9db9fb49ef916541160cc",
30 "detail": "<p><span style=\"color: rgb(228,57,60);background-color: rgb(255,255,255);font-size: 12px;\">想你所需，超你所想！精致外观，轻薄便携带光驱，内置正版office杜绝盗版死机，全国联保两年！</span> 222</p>\n<p><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">联想（Lenovo）扬天V110 15.6英寸家用轻薄便携商务办公手提笔记本电脑 定制【E2-9010/4G/128G固态】 2G独显 内置</span></p>\n<p><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">99999</span></p>\n",
31 "__v": 0
32 },
33 {
34 "status": 1,
35 "imgs": [
36 "image-1559402448049.jpg",
37 "image-1559402450480.jpg"
38 ],
39 "_id": "5ca9e414b49ef916541160ce",
40 "name": "华硕(ASUS) 飞行堡垒",
41 "desc": "15.6英寸窄边框游戏笔记本电脑(i7-8750H 8G 256GSSD+1T GTX1050Ti 4G IPS)",
42 "price": 6799,
43 "pCategoryId": "5ca9d6c0b49ef916541160bb",
44 "categoryId": "5ca9db8ab49ef916541160cb",
45 "detail": "<p><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">华硕(ASUS) 飞行堡垒6 15.6英寸窄边框游戏笔记本电脑(i7-8750H 8G 256GSSD+1T GTX1050Ti 4G IPS)火陨红黑</span> </p>\n<p><span style=\"color: rgb(228,57,60);background-color: rgb(255,255,255);font-size: 12px;\">【4.6-4.7号华硕集体放价，大牌够品质！】1T+256G高速存储组合！超窄边框视野无阻，强劲散热一键启动！</span> </p>\n",
46 "__v": 0
47 },
48 {
49 "status": 2,
50 "imgs": [
51 "image-1559402436395.jpg"
52 ],
53 "_id": "5ca9e4b7b49ef916541160cf",
54 "name": "你不知道的JS（上卷）",
55 "desc": "图灵程序设计丛书： [You Don't Know JS:Scope & Closures] JavaScript开发经典入门图书 打通JavaScript的任督二脉",
56 "price": 35,
57 "pCategoryId": "0",
58 "categoryId": "5ca9d6c9b49ef916541160bc",
59 "detail": "<p style=\"text-align:start;\"><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">图灵程序设计丛书：你不知道的JavaScript（上卷）</span> <span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\"><strong>[You Don't Know JS:Scope & Closures]</strong></span></p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(227,57,60);background-color: rgb(255,255,255);font-size: 12px;\">JavaScript开发经典入门图书 打通JavaScript的任督二脉 领略语言内部的绝美风光</span> </p>\n",
60 "__v": 0
61 },
62 {
63 "status": 2,
64 "imgs": [
65 "image-1554638240202.jpg"
66 ],
67 "_id": "5ca9e5bbb49ef916541160d0",
68 "name": "美的(Midea) 213升-BCD-213TM",
69 "desc": "爆款直降!大容量三口之家优选! *节能养鲜,自动低温补偿,36分贝静音呵护",
70 "price": 1388,
71 "pCategoryId": "5ca9d695b49ef916541160ba",
72 "categoryId": "5ca9d9cfb49ef916541160c4",
73 "detail": "<p style=\"text-align:start;\"><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;font-family: Arial, \"microsoft yahei;\">美的(Midea) 213升 节能静音家用三门小冰箱 阳光米 BCD-213TM(E)</span></p>\n<p><span style=\"color: rgb(228,57,60);background-color: rgb(255,255,255);font-size: 12px;font-family: tahoma, arial, \"Microsoft YaHei\", \"Hiragino Sans GB\", u5b8bu4f53, sans-serif;\">【4.8美的大牌秒杀日】爆款直降!大容量三口之家优选! *节能养鲜,自动低温补偿,36分贝静音呵护! *每天不到一度电,省钱又省心!</span> </p>\n",
74 "__v": 0
75 },
76 {
77 "status": 1,
78 "imgs": [
79 "image-1554638403550.jpg"
80 ],
81 "_id": "5ca9e653b49ef916541160d1",
82 "name": "美的（Midea）KFR-35GW/WDAA3",
83 "desc": "正1.5匹 变频 智弧 冷暖 智能壁挂式卧室空调挂机",
84 "price": 2499,
85 "pCategoryId": "5ca9d695b49ef916541160ba",
86 "categoryId": "5ca9da1ab49ef916541160c6",
87 "detail": "<p style=\"text-align:start;\"><span style=\"color: rgb(102,102,102);background-color: rgb(255,255,255);font-size: 16px;\">美的（Midea）正1.5匹 变频 智弧 冷暖 智能壁挂式卧室空调挂机 KFR-35GW/WDAA3@</span></p>\n<p style=\"text-align:start;\"></p>\n<p><span style=\"color: rgb(228,57,60);background-color: rgb(255,255,255);font-size: 12px;\">【4.8美的大牌秒杀日】提前加入购物车！2299元成交价！前50名下单送赠品加湿型电风扇，赠完即止！8日0点开抢！</span><a href=\"https://sale.jd.com/mall/LKHdqZUIYk.html\" target=\"_blank\"><span style=\"color: rgb(94,105,173);background-color: rgb(255,255,255);font-size: 12px;\">更有无风感柜挂组合套购立减500元！猛戳！！</span></a> </p>\n",
88 "__v": 0
89 }
90 ],
91 }
92
93 //【6】Table的列名及对应显示的内容渲染
94 initColumns=()=>{
95 this.columns=[
96 {
97 title:'商品名称',
98 dataIndex:'name'
99 },
100 {
101 title:'商品描述',
102 dataIndex:'desc'
103 },
104 {
105 title:'价格',
106 dataIndex:'price',
107 render:(price)=>'￥'+price //把price渲染进对应的行，并加上￥符号
108 },
109 {
110 width:100,
111 title:'商品状态',
112 dataIndex:'status',
113 render:(status)=>{
114 return(
115 <span>
116 <Button type='primary'>{status===1 ? '下架' : '上架'}</Button>
117 <span>{status===1 ? '在售':'已下架'}</span>
118 </span>
119 )
120 }
121 },
122 {
123 width:100,
124 title:'操作',
125
126 render:(proObj)=>{
127 return(
128 <span>
129 <LinkButton>详情</LinkButton>
130 <LinkButton>修改</LinkButton>
131 </span>
132 )
133 }
134 },
135 ]
136 }
137
138 componentWillMount(){
139 //【7】Table列名初始化函数调用，用于准备表格列名及显示内容
140 this.initColumns()
141 }
142
143 render(){
144 //【5】state数据解构，简化使用
145 const {products}=this.state
146
147 //【2】card左侧内容
148 const title=(
149 <span>
150 <Select value='1' style={{width:150,}}>
151 <Option value='1'>按名称搜索</Option>
152 <Option value='2'>按描述搜索</Option>
153 </Select>
154 <Input placeholder='关键字' style={{width:150,margin:'0 8px'}} />
155 <Button type='primary'>搜索</Button>
156 </span>
157 )
158 //【3】card右侧内容
159 const extra=(
160 <Button type='primary'>
161 <Icon type='plus'/>
162 添加商品
163 </Button>
164 )
165 return(
166 <Card title={title} extra={extra}>
167 <Table
168 bordered
169 rowKey='_id'
170 dataSource={products}
171 columns={this.columns} />
172 </Card>
173 )
174 }
175}
176
177 |
