许静 il y a 5 ans
Parent
révision
acbdce987f

+ 12
- 2
config/config.js Voir le fichier

@@ -139,6 +139,11 @@ export default {
139 139
                   name: '商品列表',
140 140
                   component: './integralMall/GoodsList',
141 141
                 },
142
+                {
143
+                  path: '/integralMall/achieve',
144
+                  name: '积分获取',
145
+                  component: './integralMall/achieve',
146
+                },
142 147
                 {
143 148
                   path: '/integralMall/editGoods',
144 149
                   name: '',
@@ -149,6 +154,11 @@ export default {
149 154
                   name: '兑换记录',
150 155
                   component: './integralMall/exchangeRecords',
151 156
                 },
157
+                {
158
+                  path: '/integralMall/writeOff',
159
+                  name: '商品核销',
160
+                  component: './integralMall/writeOff',
161
+                },
152 162
               ],
153 163
             },
154 164
             {
@@ -273,7 +283,7 @@ export default {
273 283
     basePath: '/',
274 284
   },
275 285
   chainWebpack: webpackPlugin,
276
-  
286
+
277 287
   proxy: {
278 288
     '/api/': {
279 289
       target: 'http://192.168.0.84:8080/',
@@ -281,5 +291,5 @@ export default {
281 291
       // pathRewrite: { '^/server': '' },
282 292
     },
283 293
   },
284
-  
294
+
285 295
 };

BIN
src/assets/erweima.png Voir le fichier


BIN
src/assets/list.png Voir le fichier


BIN
src/assets/saoma.png Voir le fichier


+ 6
- 0
src/global.less Voir le fichier

@@ -99,4 +99,10 @@ ol {
99 99
 }
100 100
 .ant-pro-sider-menu-logo img{
101 101
   height: 41px;
102
+}
103
+.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
104
+  color: #FF7E48;
105
+}
106
+.ant-table{
107
+  line-height: 3;
102 108
 }

+ 91
- 0
src/pages/integralMall/achieve.jsx Voir le fichier

@@ -0,0 +1,91 @@
1
+import React from 'react';
2
+import { Form, Input, Button, Icon, Tabs, Row, Col, Table } from 'antd';
3
+import { FormattedMessage } from 'umi-plugin-react/locale';
4
+import styles from '../style/GoodsList.less';
5
+import router from 'umi/router';
6
+
7
+
8
+const { TabPane } = Tabs;
9
+function callback(key) {
10
+  console.log(key);
11
+}
12
+
13
+/**
14
+ *
15
+ *
16
+ * @param {*} props
17
+ * @returns
18
+ */
19
+const dataSource = [
20
+  {
21
+    key: '1',
22
+    img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
23
+    name: '华为P30 Pro',
24
+  },
25
+  {
26
+    key: '2',
27
+    img: '',
28
+    name: '大米',
29
+  },
30
+];
31
+
32
+const columns = [
33
+  {
34
+    title: '类型',
35
+    dataIndex: 'type',
36
+    key: 'type',
37
+    align: 'center',
38
+  },
39
+  {
40
+    title: '获取积分',
41
+    dataIndex: 'intergral',
42
+    key: 'intergral',
43
+    align: 'center',
44
+  },
45
+  {
46
+    title: '状态',
47
+    dataIndex: 'state',
48
+    key: 'state',
49
+    align: 'center',
50
+  },
51
+  {
52
+    title: '说明',
53
+    dataIndex: 'desc',
54
+    key: 'desc',
55
+    align: 'center',
56
+  },
57
+  {
58
+    title: '操作时间',
59
+    dataIndex: 'time',
60
+    key: 'time',
61
+    align: 'center',
62
+  },
63
+  {
64
+    title: '操作',
65
+    dataIndex: 'handle',
66
+    key: 'handle',
67
+    align: 'center',
68
+    render: () => <><span style={{ color: '#EF273A', marginRight: '20px' }} >停用<Icon type="stop" className={styles.shoppingCart} /></span><span style={{ color: '#EF273A', marginRight: '20px' }} >启用<Icon type="check-circle" className={styles.shoppingCart} /></span><span style={{ color: '#FF925C' }}>编辑<Icon type="form" className={styles.edit} /></span></>,
69
+  },
70
+
71
+];
72
+
73
+
74
+function header(props) {
75
+  const { getFieldDecorator } = props.form
76
+  return (
77
+    <>
78
+      <Tabs onChange={callback} type="card">
79
+        <TabPane tab="平台积分" key="1">
80
+          <Table style={{ marginTop: '40px' }} dataSource={dataSource} columns={columns} />
81
+        </TabPane>
82
+        <TabPane tab="项目积分" key="2">
83
+          <Table style={{ marginTop: '40px' }} dataSource={dataSource} columns={columns} />
84
+        </TabPane>
85
+      </Tabs>,
86
+    </>
87
+  )
88
+}
89
+const WrappedHeader = Form.create({ name: 'header' })(header);
90
+
91
+export default WrappedHeader

+ 68
- 2
src/pages/integralMall/exchangeRecords.jsx Voir le fichier

@@ -1,5 +1,5 @@
1 1
 import React from 'react';
2
-import { Form, Input, Button, Icon, Select, DatePicker } from 'antd';
2
+import { Form, Input, Button, Icon, Select, DatePicker, Table } from 'antd';
3 3
 import { FormattedMessage } from 'umi-plugin-react/locale';
4 4
 import styles from '../style/GoodsList.less';
5 5
 
@@ -172,6 +172,72 @@ class DateRange2 extends React.Component {
172 172
   }
173 173
 }
174 174
 // 领取时间 组件  end
175
+const dataSource = [
176
+  {
177
+    key: '1',
178
+    img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
179
+    name: '华为P30 Pro',
180
+  },
181
+  {
182
+    key: '2',
183
+    img: '',
184
+    name: '大米',
185
+  },
186
+];
187
+
188
+const columns = [
189
+
190
+  {
191
+    title: '用户姓名',
192
+    dataIndex: 'name',
193
+    key: 'name',
194
+    align: 'center',
195
+
196
+  },
197
+  {
198
+    title: '用户类型',
199
+    dataIndex: 'type',
200
+    key: 'type',
201
+    align: 'center',
202
+  },
203
+  {
204
+    title: '手机号',
205
+    dataIndex: 'phone',
206
+    key: 'phone',
207
+    align: 'center',
208
+  },
209
+  {
210
+    title: '商品图片',
211
+    dataIndex: 'img',
212
+    key: 'img',
213
+    align: 'center',
214
+    render: (text, record) => <img src={record.img} className={styles.touxiang} />,
215
+  },
216
+  {
217
+    title: '商品名称',
218
+    dataIndex: 'goodName',
219
+    key: 'goodName',
220
+    align: 'center',
221
+  },
222
+  {
223
+    title: '兑换时间',
224
+    dataIndex: 'time',
225
+    key: 'time',
226
+    align: 'center',
227
+  },
228
+  {
229
+    title: '领取时间',
230
+    dataIndex: 'time2',
231
+    key: 'time2',
232
+    align: 'center',
233
+  },
234
+  {
235
+    title: '状态',
236
+    dataIndex: 'state',
237
+    key: 'state',
238
+    align: 'center',
239
+  },
240
+];
175 241
 
176 242
 function record(props) {
177 243
   const { getFieldDecorator } = props.form
@@ -221,7 +287,6 @@ function record(props) {
221 287
             </Select>,
222 288
           )}
223 289
         </Form.Item>
224
-
225 290
         <Form.Item>
226 291
           <Button type="primary" htmlType="submit" className={styles.searchBtn}>
227 292
             搜索
@@ -234,6 +299,7 @@ function record(props) {
234 299
           <DateRange2 />
235 300
         </Form.Item>
236 301
       </Form>
302
+      <Table style={{ marginTop: '40px' }} dataSource={dataSource} columns={columns} />
237 303
     </>
238 304
   )
239 305
 }

+ 73
- 0
src/pages/integralMall/writeOff.jsx Voir le fichier

@@ -0,0 +1,73 @@
1
+import React from 'react';
2
+import { Form, Input, Button, Icon, Tabs, Row, Col } from 'antd';
3
+import { FormattedMessage } from 'umi-plugin-react/locale';
4
+import styles from '../style/GoodsList.less';
5
+import router from 'umi/router';
6
+import erweima from '../../assets/erweima.png';
7
+import saoma from '../../assets/saoma.png';
8
+import list from '../../assets/list.png';
9
+
10
+const { TabPane } = Tabs;
11
+function callback(key) {
12
+  console.log(key);
13
+}
14
+
15
+/**
16
+ *
17
+ *
18
+ * @param {*} props
19
+ * @returns
20
+ */
21
+
22
+function header(props) {
23
+  const { getFieldDecorator } = props.form
24
+  return (
25
+    <>
26
+      <Tabs onChange={callback} type="card">
27
+        <TabPane tab="扫码核销" key="1">
28
+          <Row>
29
+            <Col span={8} style={{ textAlign: 'center' }}>
30
+              <img src={erweima} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
31
+              <p>1</p>
32
+              <p>请用户出示核销的二维码</p>
33
+              <p>请将网页输入法切换成英文</p>
34
+            </Col>
35
+            <Col span={8} style={{ textAlign: 'center' }}>
36
+              <img src={saoma} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
37
+              <p>2</p>
38
+              <p>点击“立即核销”按钮</p>
39
+              <p>使用扫码枪扫描客户二维码</p>
40
+            </Col>
41
+            <Col span={8} style={{ textAlign: 'center' }}>
42
+              <img src={list} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
43
+              <p>3</p>
44
+              <p style={{ margin: '44px auto' }}>根据提示进行核销操作</p>
45
+            </Col>
46
+          </Row>
47
+          <Button type="primary" style={{ margin: '80px auto', display: 'block', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }}>立即核销</Button>
48
+        </TabPane>
49
+        <TabPane tab="手机号核销" key="2">
50
+          <Row>
51
+            <Col span={12} style={{ textAlign: 'center' }}>
52
+              <img src={erweima} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
53
+              <p>1</p>
54
+              <p>请输入用户的手机号</p>
55
+            </Col>
56
+            <Col span={12} style={{ textAlign: 'center' }}>
57
+              <img src={list} style={{ width: '50px', height: '50px', margin: '30px auto' }} />
58
+              <p>2</p>
59
+              <p>点击“立即核销”按钮</p>
60
+            </Col>
61
+          </Row>
62
+          <div style={{ margin: '110px auto', display: 'block',textAlign:'center' }}>
63
+            <Input placeholder="请输入手机号" style={{width:'200px'}} />
64
+            <Button type="primary" style={{marginLeft:'10px', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }}>立即核销</Button>
65
+          </div>
66
+        </TabPane>
67
+      </Tabs>,
68
+    </>
69
+  )
70
+}
71
+const WrappedHeader = Form.create({ name: 'header' })(header);
72
+
73
+export default WrappedHeader

+ 1
- 1
src/pages/style/GoodsList.less Voir le fichier

@@ -36,4 +36,4 @@
36 36
   color: #dcdcdc;
37 37
   margin-left: 6px;
38 38
   font-size: 15px;
39
-}
39
+}