Skip to content

Commit 1e48263

Browse files
author
U-JOHNLIU\jonhl
committed
feat: add feedback
1 parent cec1e57 commit 1e48263

File tree

1 file changed

+152
-125
lines changed

1 file changed

+152
-125
lines changed

‎src/components/dgiotVersion.js‎

Lines changed: 152 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,152 @@
1-
import { Button, Modal, Form, Input, Select, message } from 'antd'
2-
import React, { useState } from 'react'
3-
// import version from '@site/config/version'
4-
import axios from 'axios'
5-
import 'antd/dist/antd.css'
6-
const { Option } = Select
7-
const layout = {
8-
labelCol: {
9-
span: 4,
10-
},
11-
wrapperCol: {
12-
span: 20,
13-
},
14-
}
15-
/* eslint-disable no-template-curly-in-string */
16-
17-
const validateMessages = {
18-
required: '${label} 是必填项!',
19-
types: {
20-
email: '${label} 不是有效的电子邮件!',
21-
version: '${label} 不是有效版本!',
22-
},
23-
version: {
24-
range: '${label} 必须介于${min}和${max}之间',
25-
},
26-
}
27-
/* eslint-enable no-template-curly-in-string */
28-
29-
export default function dgiotVersion({ children, color }) {
30-
const [isModalVisible, setIsModalVisible] = useState(false)
31-
const from = {
32-
version: '最新版本',
33-
_wpcf7: '694',
34-
_wpcf7_version: '5.6',
35-
_wpcf7_locale: 'zh_CN',
36-
_wpcf7_unit_tag: 'wpcf7-f694-o1',
37-
_wpcf7_container_post: '0',
38-
// _wpcf7_posted_data_hash: '',
39-
// 'dgiot-version': '最新版本',
40-
// 'your-email': 'h7ml@qq.com',
41-
radio: '同意通过此邮件地址联系我',
42-
}
43-
const onFinish = (values) => {
44-
from['dgiot-version'] = values.version
45-
from['your-email'] = values.email
46-
const formData = new FormData()
47-
Object.keys(from).forEach((key) => {
48-
formData.append(key, from[key])
49-
})
50-
axios({
51-
url: 'https://www.dgiotcloud.cn/index.php?rest_route=/contact-form-7/v1/contact-forms/694/feedback',
52-
method: 'post',
53-
data: formData,
54-
headers: {
55-
'Content-Type': 'multipart/form-data',
56-
},
57-
})
58-
.then((res) => {
59-
message.info('下载链接已通过邮件的方式发送给您，请注意查收！')
60-
})
61-
.catch((e) => {
62-
message.error(e.message || e)
63-
})
64-
}
65-
const showModal = () => {
66-
setIsModalVisible(true)
67-
}
68-
const handleCancel = () => {
69-
setIsModalVisible(false)
70-
}
71-
return (
72-
<div>
73-
<Button type="primary" onClick={showModal}>
74-
{children}
75-
</Button>
76-
<Modal
77-
destroyOnClose={true}
78-
onCancel={handleCancel}
79-
footer={null}
80-
title="输入您的电子邮箱以接收下载链接"
81-
visible={isModalVisible}
82-
>
83-
<Form
84-
{...layout}
85-
name="nest-messages"
86-
onFinish={onFinish}
87-
validateMessages={validateMessages}
88-
>
89-
<Form.Item
90-
name="version"
91-
label="下载类型"
92-
initialValues="最新版本"
93-
rules={[{ required: true, message: 'Please select gender!' }]}
94-
>
95-
<Select placeholder="请选择下载类型">
96-
<Option value="最新版本">最新版本</Option>
97-
<Option value="最新代码">最新代码</Option>
98-
<Option value="开发环境">开发环境</Option>
99-
<Option value="dgiot手机端Android版">dgiot手机端Android版</Option>
100-
<Option value="dgiot_windows体验版">dgiot_windows体验版</Option>
101-
<Option value="dgiot_app体验版">dgiot_app体验版</Option>
102-
</Select>
103-
</Form.Item>
104-
<Form.Item
105-
name="email"
106-
label="接受邮箱"
107-
rules={[
108-
{
109-
type: 'email',
110-
required: true,
111-
},
112-
]}
113-
>
114-
<Input />
115-
</Form.Item>
116-
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 4 }}>
117-
<Button type="primary" block htmlType="submit">
118-
提交
119-
</Button>
120-
</Form.Item>
121-
</Form>
122-
</Modal>
123-
</div>
124-
)
125-
}
1+
import { Button, Modal, Form, Input, Select, message } from 'antd'
2+
import React, { useState } from 'react'
3+
// import version from '@site/config/version'
4+
import axios from 'axios'
5+
import 'antd/dist/antd.css'
6+
const { Option } = Select
7+
const layout = {
8+
labelCol: {
9+
span: 4,
10+
},
11+
wrapperCol: {
12+
span: 20,
13+
},
14+
}
15+
/* eslint-disable no-template-curly-in-string */
16+
17+
const validateMessages = {
18+
required: '${label} 是必填项!',
19+
types: {
20+
email: '${label} 不是有效的电子邮件!',
21+
version: '${label} 不是有效版本!',
22+
},
23+
version: {
24+
range: '${label} 必须介于${min}和${max}之间',
25+
},
26+
}
27+
/* eslint-enable no-template-curly-in-string */
28+
29+
export default function dgiotVersion({ children, color }) {
30+
const [isModalVisible, setIsModalVisible] = useState(false)
31+
const from = {
32+
version: '最新版本',
33+
_wpcf7: '694',
34+
_wpcf7_version: '5.6',
35+
_wpcf7_locale: 'zh_CN',
36+
_wpcf7_unit_tag: 'wpcf7-f694-o1',
37+
_wpcf7_container_post: '0',
38+
// _wpcf7_posted_data_hash: '',
39+
// 'dgiot-version': '最新版本',
40+
// 'your-email': 'h7ml@qq.com',
41+
radio: '同意通过此邮件地址联系我',
42+
}
43+
const onFinish = (values) => {
44+
from['dgiot-version'] = values.version
45+
from['your-email'] = values.email
46+
from['your-phone'] = values.phone
47+
from['your-name'] = values.name
48+
from['your-job'] = values.job
49+
const formData = new FormData()
50+
Object.keys(from).forEach((key) => {
51+
formData.append(key, from[key])
52+
})
53+
axios({
54+
url: 'https://www.dgiotcloud.cn/wp-json/contact-form-7/v1/contact-forms/694/feedback',
55+
method: 'post',
56+
data: formData,
57+
headers: {
58+
'Content-Type': 'multipart/form-data',
59+
},
60+
})
61+
.then((res) => {
62+
message.info('下载链接已通过邮件的方式发送给您，请注意查收！')
63+
})
64+
.catch((e) => {
65+
message.error(e.message || e)
66+
})
67+
}
68+
const showModal = () => {
69+
setIsModalVisible(true)
70+
}
71+
const handleCancel = () => {
72+
setIsModalVisible(false)
73+
}
74+
return (
75+
<div>
76+
<Button type="primary" onClick={showModal}>
77+
{children}
78+
</Button>
79+
<Modal
80+
destroyOnClose={true}
81+
onCancel={handleCancel}
82+
footer={null}
83+
title="请填写下面表单，我们会将下载地址发到您邮箱"
84+
visible={isModalVisible}
85+
>
86+
<Form
87+
{...layout}
88+
name="nest-messages"
89+
onFinish={onFinish}
90+
validateMessages={validateMessages}
91+
>
92+
<Form.Item
93+
name="version"
94+
label="下载类型"
95+
initialValues="最新版本"
96+
rules={[{ required: true, message: 'Please select gender!' }]}
97+
>
98+
<Select placeholder="请选择下载类型">
99+
<Option value="最新版本">最新版本</Option>
100+
<Option value="最新代码">最新代码</Option>
101+
<Option value="开发环境">开发环境</Option>
102+
<Option value="dgiot手机端Android版">dgiot手机端Android版</Option>
103+
<Option value="dgiot_windows体验版">dgiot_windows体验版</Option>
104+
<Option value="dgiot_app体验版">dgiot_app体验版</Option>
105+
</Select>
106+
</Form.Item>
107+
<Form.Item
108+
name="email"
109+
label="邮箱"
110+
rules={[
111+
{
112+
type: 'email',
113+
required: true,
114+
},
115+
]}
116+
>
117+
<Input />
118+
</Form.Item>
119+
<Form.Item
120+
name="name"
121+
label="姓名"
122+
>
123+
<Input />
124+
</Form.Item>
125+
<Form.Item
126+
name="phone"
127+
label="手机"
128+
>
129+
<Input />
130+
</Form.Item>
131+
<Form.Item
132+
name="corporate"
133+
label="公司"
134+
>
135+
<Input />
136+
</Form.Item>
137+
<Form.Item
138+
name="job"
139+
label="职位"
140+
>
141+
<Input />
142+
</Form.Item>
143+
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 4 }}>
144+
<Button type="primary" block htmlType="submit">
145+
提交
146+
</Button>
147+
</Form.Item>
148+
</Form>
149+
</Modal>
150+
</div>
151+
)
152+
}

0 commit comments

Comments
 (0)