绑定手机号样式修改
This commit is contained in:
lyp
parent
a9f8f77c78
commit
25d82e1b6e
@ -17,4 +17,10 @@
|
||||
.upFileBox {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
.phoneBoxLeft{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
@ -1,11 +1,12 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Table, Space, Modal,Input } from "antd"
|
||||
import { Table, Space, Modal, Input, Form } from "antd"
|
||||
import { sellSupplementList, buySupplementList, supplementDetail } from '../../../../request/api'
|
||||
const { Column } = Table;
|
||||
import useMessage from "antd/es/message/useMessage";
|
||||
import './File.css'
|
||||
const { TextArea } = Input;
|
||||
export default function File(props: any) {
|
||||
const [form] = Form.useForm();
|
||||
const [messageApi, messageContext] = useMessage();
|
||||
const [correctionId, setCorrectionId] = useState('') // 点击查看内容选中的id
|
||||
// 补充资料弹窗
|
||||
@ -68,7 +69,7 @@ export default function File(props: any) {
|
||||
}
|
||||
}
|
||||
// 补充资料详情
|
||||
const[detailData, setDetailData] = useState<any>({})
|
||||
const [detailData, setDetailData] = useState<any>({})
|
||||
const getSupplementDetail = async (id: string) => {
|
||||
try {
|
||||
const res: any = await supplementDetail(id)
|
||||
@ -205,30 +206,95 @@ export default function File(props: any) {
|
||||
<div className='correctionTitleBox'>
|
||||
<div className='correctionTitle'>主题</div>
|
||||
<Input value={detailData.correctionTitle} style={{
|
||||
height:40,
|
||||
color:'black'
|
||||
}}
|
||||
disabled
|
||||
height: 40,
|
||||
color: 'black'
|
||||
}}
|
||||
disabled
|
||||
></Input>
|
||||
</div>
|
||||
<div className='correctionRemarkBox'>
|
||||
<div className='correctionTitle'>内容</div>
|
||||
<TextArea value={detailData.correctionRemark} style={{
|
||||
height:100,
|
||||
color:'black',
|
||||
resize:'none'
|
||||
}}
|
||||
disabled
|
||||
height: 100,
|
||||
color: 'black',
|
||||
resize: 'none'
|
||||
}}
|
||||
disabled
|
||||
></TextArea>
|
||||
</div>
|
||||
<div className='upFileBox'>
|
||||
<div className='correctionTitle'>附件</div>
|
||||
|
||||
{detailData.correctionFile ? (
|
||||
<div>材料列表</div>
|
||||
) : (
|
||||
<div style={{ fontSize: 18 }}>
|
||||
无
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='editModal-title' style={{ marginTop: 30 }}>
|
||||
<div className='editModal-title-box'></div>
|
||||
<div className='editModal-title-name'>在下面填写您补充的内容</div>
|
||||
</div>
|
||||
<Form
|
||||
name="basic"
|
||||
form={form}
|
||||
layout="vertical"
|
||||
|
||||
onFinish={(value) => {
|
||||
|
||||
console.log(value);
|
||||
|
||||
}}
|
||||
onFinishFailed={() => {
|
||||
messageApi.open({
|
||||
type: 'error',
|
||||
content: '请填写完整信息',
|
||||
})
|
||||
}}
|
||||
autoComplete="off"
|
||||
>
|
||||
<div className='correctionRemarkBox'>
|
||||
<div className='correctionTitle'>内容</div>
|
||||
<Form.Item
|
||||
// label="软著名称"
|
||||
name="correctionRemark"
|
||||
rules={[{ required: true, message: '请输入软著名称' }]}
|
||||
>
|
||||
<TextArea value={detailData.correctionRemark} style={{
|
||||
height: 100,
|
||||
resize: 'none',
|
||||
width: 1050
|
||||
}}
|
||||
|
||||
></TextArea>
|
||||
</Form.Item>
|
||||
|
||||
</div>
|
||||
<div className='correctionRemarkBox' style={{
|
||||
marginTop:0
|
||||
}}>
|
||||
<div className='correctionTitle'>附件</div>
|
||||
<Form.Item
|
||||
// label="软著名称"
|
||||
name="correctionRemark"
|
||||
rules={[{ required: true, message: '请输入软著名称' }]}
|
||||
>
|
||||
<TextArea value={detailData.correctionRemark} style={{
|
||||
height: 100,
|
||||
resize: 'none',
|
||||
width: 1050
|
||||
}}
|
||||
|
||||
></TextArea>
|
||||
</Form.Item>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
@ -12,6 +12,13 @@ import {
|
||||
Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table, Form, Button
|
||||
// Form, Button, InputNumber
|
||||
} from "antd";
|
||||
import {
|
||||
CloseOutlined
|
||||
} from '@ant-design/icons';
|
||||
import title from '../../static/Phone/title.png'
|
||||
import titleB from '../../static/Phone/titleB.png'
|
||||
import line from '../../static/Phone/line.png'
|
||||
|
||||
import pack from '../../static/pack.png'
|
||||
// import type { TableProps, FormProps } from 'antd';
|
||||
interface DataType {
|
||||
@ -159,13 +166,13 @@ export default function Head() {
|
||||
}
|
||||
}
|
||||
const onFinish = async (values: any) => {
|
||||
// console.log('Success:', values);
|
||||
console.log('Success:', values);
|
||||
try {
|
||||
const res = await checkPhone(values.phone)
|
||||
// console.log(res);
|
||||
if (res.data == 'SUCCESS') {
|
||||
submit(values.phone, values.smsCode)
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
messageApi.open({
|
||||
@ -915,6 +922,7 @@ export default function Head() {
|
||||
// console.log('嘎嘎嘎哈哈', data);
|
||||
setUserId(data.userId)
|
||||
if (data.isUpdateWxUsernamePhone == 1) {
|
||||
// if (data.isUpdateWxUsernamePhone != 1) {
|
||||
setIsUpdateWxUsernamePhone(true);
|
||||
dispath({
|
||||
type: 'changePhoneModal',
|
||||
@ -925,7 +933,7 @@ export default function Head() {
|
||||
// if(!data.hasUserInfo && data.isUpdateWxUsernamePhone != 1) {
|
||||
// setIsSelfModalOpen(true);
|
||||
// }
|
||||
if (!data.hasUserInfo ) {
|
||||
if (!data.hasUserInfo) {
|
||||
setIsSelfModalOpen(true);
|
||||
}
|
||||
});
|
||||
@ -933,9 +941,9 @@ export default function Head() {
|
||||
const getUserData = () => {
|
||||
reloadUser(messageApi, globalDispatchContext).then((data) => {
|
||||
console.log(data);
|
||||
|
||||
|
||||
//嘻嘻嘻
|
||||
if(!data.hasUserInfo ) {
|
||||
if (!data.hasUserInfo) {
|
||||
setIsSelfModalOpen(true);
|
||||
}
|
||||
// if (!data.hasUserInfo && !phoneModal) {
|
||||
@ -978,7 +986,7 @@ export default function Head() {
|
||||
setInterval(reloadUserInterval, 5 * 60 * 1000);
|
||||
getMyPackNum()
|
||||
// console.log('是否关闭',phoneModal);
|
||||
|
||||
|
||||
}, [])
|
||||
const loginFlag = async () => {
|
||||
try {
|
||||
@ -1744,16 +1752,14 @@ export default function Head() {
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
{/* <Modal
|
||||
title="绑定手机号"
|
||||
okText="确认"
|
||||
cancelText="取消"
|
||||
destroyOnClose={true}
|
||||
footer={null}
|
||||
open={isUpdateWxUsernamePhone}
|
||||
// onOk={() => {
|
||||
// setOrderDetailModal(false)
|
||||
// }}
|
||||
|
||||
onCancel={() => {
|
||||
setIsUpdateWxUsernamePhone(false);
|
||||
dispath({
|
||||
@ -1764,14 +1770,14 @@ export default function Head() {
|
||||
}}
|
||||
width={500}
|
||||
centered
|
||||
// zIndex={100}
|
||||
|
||||
>
|
||||
<div className='phoneBox'>
|
||||
<Form name="Form"
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
initialValues={{ softWare: '' }}
|
||||
// style={{ maxWidth: 600 }}
|
||||
|
||||
>
|
||||
<div className='phoneBoxInput'>
|
||||
<div className='phoneBoxTitle'>手机号<span style={{ color: 'red' }}>*</span></div>
|
||||
@ -1789,7 +1795,7 @@ export default function Head() {
|
||||
</div>
|
||||
<div className='phoneBoxInput' style={{
|
||||
position: 'relative',
|
||||
// backgroundColor:'pink',
|
||||
|
||||
}}>
|
||||
<div className='phoneBoxTitle'>验证码<span style={{ color: 'red' }}>*</span></div>
|
||||
<Form.Item name="smsCode" label="" rules={[{ required: true, message: '请输入验证码' }]}>
|
||||
@ -1846,7 +1852,188 @@ export default function Head() {
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
</Modal>
|
||||
</Modal> */}
|
||||
{/* 绑定手机号 */}
|
||||
<div style={{
|
||||
display: isUpdateWxUsernamePhone ? 'block' : 'none',
|
||||
position: 'fixed', // 固定定位
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100vw', // 宽度占满视口
|
||||
height: '100vh', // 高度占满视口
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)', // 半透明黑色背景
|
||||
zIndex: 100, // 确保在其他元素之上
|
||||
|
||||
}}>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
// background:'pink'
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<div className='phoneMaskBox'>
|
||||
<div className='phoneBoxLeft'>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 79,
|
||||
marginLeft: 43
|
||||
}}
|
||||
>
|
||||
<img src={title} alt="" width={79} height={27} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 16,
|
||||
marginLeft: 43
|
||||
}}
|
||||
>
|
||||
<img src={titleB} alt="" width={109} height={17} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 10,
|
||||
marginLeft: 38,
|
||||
}}
|
||||
>
|
||||
<img src={line} alt="" width={180} height={19} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='phoneBoxRight'>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
fontSize: 20,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
// height: 21,
|
||||
// background: 'pink'
|
||||
|
||||
}}>
|
||||
<div style={{ cursor: 'pointer' }} onClick={() => {
|
||||
setIsUpdateWxUsernamePhone(false);
|
||||
dispath({
|
||||
type: 'changePhoneModal',
|
||||
val: false
|
||||
})
|
||||
getUserData()
|
||||
}}>
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style={{
|
||||
// background:'pink',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<div className='phoneTitle'>您正在绑定手机号</div>
|
||||
<div className='phoneTitleB'>绑定手机号后，您可以通过手机号码登录平台</div>
|
||||
<div style={{
|
||||
marginTop: 30
|
||||
}}>
|
||||
<Form name="Form"
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
initialValues={{ softWare: '' }}
|
||||
// style={{ maxWidth: 600 }}
|
||||
>
|
||||
<div className='phoneBoxInput'>
|
||||
|
||||
<Form.Item name="phone" label="" rules={[{ required: true, message: '请输入手机号' },
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
message: '请输入有效的手机号'
|
||||
}
|
||||
]}>
|
||||
<Input style={{
|
||||
width: '300px',
|
||||
height: '42px',
|
||||
fontSize: 16,
|
||||
background: '#F7F7F7',
|
||||
}} placeholder="请输入手机号" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className='phoneBoxInput' style={{
|
||||
}}>
|
||||
|
||||
<Form.Item name="smsCode" label="" rules={[{ required: true, message: '请输入验证码' }]}>
|
||||
<Input style={{
|
||||
width: '200px',
|
||||
height: '42px',
|
||||
fontSize: 16,
|
||||
background: '#F7F7F7',
|
||||
}} placeholder="请输入验证码" />
|
||||
</Form.Item>
|
||||
{countdown === 0 ? (
|
||||
<div
|
||||
className='sendCode'
|
||||
// style={{
|
||||
|
||||
// width: '90px',
|
||||
// height: '42px',
|
||||
// justifyContent: 'center',
|
||||
// alignItems: 'center',
|
||||
// display: 'flex',
|
||||
// cursor: 'pointer',
|
||||
// color: '#929292',
|
||||
// paddingRight: 10,
|
||||
// }}
|
||||
onClick={sendCode}
|
||||
>
|
||||
发送验证码
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className='sendCode'
|
||||
style={{
|
||||
cursor: 'unset',
|
||||
|
||||
}}
|
||||
>
|
||||
倒计时 {countdown} 秒
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Form.Item>
|
||||
<Button style={{
|
||||
width: 300,
|
||||
height: 42,
|
||||
background: '#3B2C0D',
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
borderRadius: 10,
|
||||
marginTop: 20,
|
||||
}}
|
||||
type="primary" htmlType="submit"
|
||||
>
|
||||
绑定
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
<div className='closeTitle' onClick={() => {
|
||||
setIsUpdateWxUsernamePhone(false);
|
||||
dispath({
|
||||
type: 'changePhoneModal',
|
||||
val: false
|
||||
})
|
||||
getUserData()
|
||||
}}>跳过，下次再说</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <Modal title="优惠券"
|
||||
footer={null}
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
.head .center .left img {
|
||||
/* width: 263px; */
|
||||
height:40px;
|
||||
height: 40px;
|
||||
/* height:78px; */
|
||||
/* background-color: red;
|
||||
*/
|
||||
@ -131,7 +131,7 @@
|
||||
|
||||
.invitation-box {
|
||||
width: 530px;
|
||||
height:157px;
|
||||
height: 157px;
|
||||
background: #F9F9F9;
|
||||
margin-top: 16px;
|
||||
border: 1px solid #EEEEEE;
|
||||
@ -280,7 +280,7 @@
|
||||
font-size: 18px;
|
||||
height: 57px;
|
||||
color: #818181;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.invBox-tips {
|
||||
@ -298,7 +298,8 @@
|
||||
/* background-color: #fcc19d; */
|
||||
|
||||
}
|
||||
.invBox-inputl{
|
||||
|
||||
.invBox-inputl {
|
||||
width: 264px;
|
||||
height: 118px;
|
||||
}
|
||||
@ -310,6 +311,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.invInputl {
|
||||
width: 264px;
|
||||
height: 118px;
|
||||
@ -418,4 +420,69 @@
|
||||
.kfHttpText {
|
||||
cursor: pointer;
|
||||
color: #5980B5;
|
||||
}
|
||||
|
||||
.phoneMaskBox {
|
||||
width: 821px;
|
||||
height: 574px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.phoneBoxLeft {
|
||||
width: 239px;
|
||||
height: 574px;
|
||||
/* background-color: pink; */
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
background: url('../../static/Phone/back.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.phoneBoxRight {
|
||||
width: 582px;
|
||||
height: 574px;
|
||||
/* background-color: skyblue; */
|
||||
padding: 32px 34px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.phoneTitle {
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
color: #000000;
|
||||
/* line-height: 72px; */
|
||||
/* margin-top: 20px; */
|
||||
}
|
||||
|
||||
.phoneTitleB {
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
color: #888888;
|
||||
margin-top: 10px;
|
||||
/* line-height: 72px; */
|
||||
}
|
||||
|
||||
.sendCode {
|
||||
width: 90px;
|
||||
height: 42px;
|
||||
background: #F7F7F7;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #333333;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.closeTitle {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #B6B6B6;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import axios from "axios";
|
||||
|
||||
// 正式环境
|
||||
// 正式与测试环境
|
||||
import {
|
||||
operatorPluginBaseUrl,// 开票功能baseUrl
|
||||
aiShopBaseUrl,// 买卖商品baseUrl
|
||||
|
||||
BIN
src/static/Phone/back.png
Normal file
BIN
src/static/Phone/back.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 791 KiB |
BIN
src/static/Phone/line.png
Normal file
BIN
src/static/Phone/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/static/Phone/title.png
Normal file
BIN
src/static/Phone/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/static/Phone/titleB.png
Normal file
BIN
src/static/Phone/titleB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Loading…
Reference in New Issue
Block a user