import React, { Component } from 'react'; import { http } from '@/utils'; import { Formik, Form, Field } from 'formik'; import { Toast } from "antd-mobile"; import './index.scss'; class AddressPopup extends Component { constructor(props) { super(props) this.state = { isLoading: false, addressInfo: { name: '', phone: '', address: '', }, } } componentDidMount() { this.fetchUserAddress(); } // 获取收货信息 fetchUserAddress = () => { const { addressInfo } = this.state; http.get(`${API.home}/sys/user_address_info`).then(res => { const {code, data, msg} = res.data; if (code === 200) { this.setState({ addressInfo: Object.assign({}, addressInfo, { name: data.name, phone: data.phone, address: data.address, }), isLoading: true, }); } }); } handleToSubmit = (params = {}) => { const { successBindAddress } = this.props; http.post(`${API.home}/sys/update_address`, { act_type: 'treasure', ...params }).then(res => { const {code, msg} = res.data; if (code === 200) { successBindAddress(); } else { Toast.info(msg, 2, null, false); } }); } render() { const { isLoading, addressInfo } = this.state; const {tip, prize, skip = 'default'} = this.props; return ( <> { isLoading && <Formik initialValues={{ ...addressInfo }} validate={({name, phone, address}) => { const errors = {}; if (!name) { errors.name = '请输入收件人'; } if(!/^1[3-9]\d{9}$/.test(phone)) { errors.phone = '请填写正确格式的手机号'; } if (!address) { errors.address = '请输入收货地址'; } return errors; }} validateOnBlur={false} validateOnChange={false} onSubmit={(values) => { this.handleToSubmit(values); }} render={({errors}) => ( <Form className="address-form" data-skip={skip}> <h2 className="address-form__title">收货信息</h2> { prize ? ( <p className='address__prize'> 您抽中了 <span style={{'color': '#FF4000'}}>{prize}</span> </p> ) : (null) } { tip ? (<div className="address-form__subtitle">{tip}</div>) : (<p className="address-form__desc">请及时填写收货信息,获得实物奖品后将第一时间为您邮寄</p>) } <Field name="name" render={({ field }) => ( <div className="address-form__item"> <input {...field} className="address-form__ipt" type="text" placeholder="收件人" /> { errors.name && <p className="address-form__tip">{errors.name}</p> } </div> )} /> <Field name="phone" render={({ field }) => ( <div className="address-form__item"> <input {...field} className="address-form__ipt" type="text" placeholder="联系方式" /> { errors.phone && <p className="address-form__tip">{errors.phone}</p> } </div> )} /> <Field name="address" render={({ field }) => ( <div className="address-form__item"> <input {...field} className="address-form__ipt" type="text" placeholder="收货地址" /> { errors.address && <p className="address-form__tip">{errors.address}</p> } </div> )} /> <button className="address-form__submit" data-status="do" type="submit" >提交</button> </Form> )} /> } </> ); } } export default AddressPopup;