Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

绑定手机号样式修改

Browse Source
This commit is contained in:
lyp 2025-04-15 15:42:16 +08:00
parent a9f8f77c78
commit 25d82e1b6e
9 changed files with 357 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/OrderDetailModal/components/File/File.css
View File

@ -17,4 +17,10 @@
.upFileBox { .upFileBox {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
align-items: center;
}
.phoneBoxLeft{
display: flex;
flex-direction: column;
} }

70
src/components/OrderDetailModal/components/File/File.tsx
View File

@ -1,11 +1,12 @@
import { useEffect, useState } from 'react' 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' import { sellSupplementList, buySupplementList, supplementDetail } from '../../../../request/api'
const { Column } = Table; const { Column } = Table;
import useMessage from "antd/es/message/useMessage"; import useMessage from "antd/es/message/useMessage";
import './File.css' import './File.css'
const { TextArea } = Input; const { TextArea } = Input;
export default function File(props: any) { export default function File(props: any) {
const [form] = Form.useForm();
const [messageApi, messageContext] = useMessage(); const [messageApi, messageContext] = useMessage();
const [correctionId, setCorrectionId] = useState('') // 点击查看内容选中的id const [correctionId, setCorrectionId] = useState('') // 点击查看内容选中的id
// 补充资料弹窗 // 补充资料弹窗
@ -223,12 +224,77 @@ export default function File(props: any) {
</div> </div>
<div className='upFileBox'> <div className='upFileBox'>
<div className='correctionTitle'>附件</div> <div className='correctionTitle'>附件</div>
{detailData.correctionFile ? (
<div>材料列表</div>
) : (
<div style={{ fontSize: 18 }}>
无
</div>
)}
</div> </div>
<div className='editModal-title' style={{ marginTop: 30 }}> <div className='editModal-title' style={{ marginTop: 30 }}>
<div className='editModal-title-box'></div> <div className='editModal-title-box'></div>
<div className='editModal-title-name'>在下面填写您补充的内容</div> <div className='editModal-title-name'>在下面填写您补充的内容</div>
</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> </div>
</Modal> </Modal>
</div> </div>

205
src/layout/head/Head.tsx
View File

@ -12,6 +12,13 @@ import {
Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table, Form, Button Dropdown, MenuProps, message, Modal, Space, Spin, Input, Table, Form, Button
// Form, Button, InputNumber // Form, Button, InputNumber
} from "antd"; } 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 pack from '../../static/pack.png'
// import type { TableProps, FormProps } from 'antd'; // import type { TableProps, FormProps } from 'antd';
interface DataType { interface DataType {
@ -159,7 +166,7 @@ export default function Head() {
} }
} }
const onFinish = async (values: any) => { const onFinish = async (values: any) => {
// console.log('Success:', values); console.log('Success:', values);
try { try {
const res = await checkPhone(values.phone) const res = await checkPhone(values.phone)
// console.log(res); // console.log(res);
@ -915,6 +922,7 @@ export default function Head() {
// console.log('嘎嘎嘎哈哈', data); // console.log('嘎嘎嘎哈哈', data);
setUserId(data.userId) setUserId(data.userId)
if (data.isUpdateWxUsernamePhone == 1) { if (data.isUpdateWxUsernamePhone == 1) {
// if (data.isUpdateWxUsernamePhone != 1) {
setIsUpdateWxUsernamePhone(true); setIsUpdateWxUsernamePhone(true);
dispath({ dispath({
type: 'changePhoneModal', type: 'changePhoneModal',
@ -1744,16 +1752,14 @@ export default function Head() {
</div> </div>
</Modal> </Modal>
<Modal {/* <Modal
title="绑定手机号" title="绑定手机号"
okText="确认" okText="确认"
cancelText="取消" cancelText="取消"
destroyOnClose={true} destroyOnClose={true}
footer={null} footer={null}
open={isUpdateWxUsernamePhone} open={isUpdateWxUsernamePhone}
// onOk={() => {
// setOrderDetailModal(false)
// }}
onCancel={() => { onCancel={() => {
setIsUpdateWxUsernamePhone(false); setIsUpdateWxUsernamePhone(false);
dispath({ dispath({
@ -1764,14 +1770,14 @@ export default function Head() {
}} }}
width={500} width={500}
centered centered
// zIndex={100}
> >
<div className='phoneBox'> <div className='phoneBox'>
<Form name="Form" <Form name="Form"
form={form} form={form}
onFinish={onFinish} onFinish={onFinish}
initialValues={{ softWare: '' }} initialValues={{ softWare: '' }}
// style={{ maxWidth: 600 }}
> >
<div className='phoneBoxInput'> <div className='phoneBoxInput'>
<div className='phoneBoxTitle'>手机号<span style={{ color: 'red' }}>*</span></div> <div className='phoneBoxTitle'>手机号<span style={{ color: 'red' }}>*</span></div>
@ -1789,7 +1795,7 @@ export default function Head() {
</div> </div>
<div className='phoneBoxInput' style={{ <div className='phoneBoxInput' style={{
position: 'relative', position: 'relative',
// backgroundColor:'pink',
}}> }}>
<div className='phoneBoxTitle'>验证码<span style={{ color: 'red' }}>*</span></div> <div className='phoneBoxTitle'>验证码<span style={{ color: 'red' }}>*</span></div>
<Form.Item name="smsCode" label="" rules={[{ required: true, message: '请输入验证码' }]}> <Form.Item name="smsCode" label="" rules={[{ required: true, message: '请输入验证码' }]}>
@ -1846,7 +1852,188 @@ export default function Head() {
</Form> </Form>
</div> </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="优惠券" {/* <Modal title="优惠券"
footer={null} footer={null}

67
src/layout/head/head.css
View File

@ -298,6 +298,7 @@
/* background-color: #fcc19d; */ /* background-color: #fcc19d; */
} }
.invBox-inputl { .invBox-inputl {
width: 264px; width: 264px;
height: 118px; height: 118px;
@ -310,6 +311,7 @@
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
} }
.invInputl { .invInputl {
width: 264px; width: 264px;
height: 118px; height: 118px;
@ -419,3 +421,68 @@
cursor: pointer; cursor: pointer;
color: #5980B5; 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;
}

2
src/request/request.ts
View File

@ -1,6 +1,6 @@
import axios from "axios"; import axios from "axios";
// 正式环境 // 正式与测试环境
import { import {
operatorPluginBaseUrl,// 开票功能baseUrl operatorPluginBaseUrl,// 开票功能baseUrl
aiShopBaseUrl,// 买卖商品baseUrl aiShopBaseUrl,// 买卖商品baseUrl

BIN
src/static/Phone/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 791 KiB

BIN
src/static/Phone/line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/static/Phone/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/static/Phone/titleB.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB