index.js 4.92 KB
Newer Older
zhanghaozhe committed
1 2 3 4 5
import React, { Component } from "react"
import { http } from "src/utils"
import { Formik, Form, Field } from "formik"
import { Toast } from "antd-mobile"
import "./index.scss"
FE committed
6 7 8 9 10 11 12

class AddressPopup extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      addressInfo: {
zhanghaozhe committed
13 14 15
        name: "",
        phone: "",
        address: "",
FE committed
16 17 18 19 20
      },
    }
  }

  componentDidMount() {
zhanghaozhe committed
21
    this.fetchUserAddress()
FE committed
22 23 24 25
  }

  // 获取收货信息
  fetchUserAddress = () => {
zhanghaozhe committed
26 27
    const { addressInfo } = this.state
    http.get(`${API.home}/sys/user_address_info`).then((res) => {
zhanghaozhe committed
28
      const { code, data } = res.data
FE committed
29 30 31 32 33 34 35 36
      if (code === 200) {
        this.setState({
          addressInfo: Object.assign({}, addressInfo, {
            name: data.name,
            phone: data.phone,
            address: data.address,
          }),
          isLoading: true,
zhanghaozhe committed
37
        })
FE committed
38
      }
zhanghaozhe committed
39
    })
FE committed
40 41 42
  }

  handleToSubmit = (params = {}) => {
zhanghaozhe committed
43 44 45 46 47 48 49 50 51 52 53 54 55 56
    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)
        }
      })
FE committed
57 58 59
  }

  render() {
zhanghaozhe committed
60 61
    const { isLoading, addressInfo } = this.state
    const { tip, prize, skip = "default" } = this.props
FE committed
62 63
    return (
      <>
zhanghaozhe committed
64
        {isLoading && (
FE committed
65
          <Formik
zhanghaozhe committed
66 67
            initialValues={{
              ...addressInfo,
FE committed
68
            }}
zhanghaozhe committed
69 70
            validate={({ name, phone, address }) => {
              const errors = {}
FE committed
71 72

              if (!name) {
zhanghaozhe committed
73
                errors.name = "请输入收件人"
FE committed
74
              }
zhanghaozhe committed
75
              if (!/^1[3-9]\d{9}$/.test(phone)) {
zhanghaozhe committed
76
                errors.phone = "请填写正确格式的手机号"
FE committed
77 78
              }
              if (!address) {
zhanghaozhe committed
79
                errors.address = "请输入收货地址"
FE committed
80 81
              }

zhanghaozhe committed
82
              return errors
FE committed
83 84 85 86
            }}
            validateOnBlur={false}
            validateOnChange={false}
            onSubmit={(values) => {
zhanghaozhe committed
87
              this.handleToSubmit(values)
FE committed
88
            }}
zhanghaozhe committed
89
          >
zhanghaozhe committed
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162
            {({ 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>
            )}
zhanghaozhe committed
163
          </Formik>
zhanghaozhe committed
164
        )}
FE committed
165
      </>
zhanghaozhe committed
166
    )
FE committed
167 168 169
  }
}

zhanghaozhe committed
170
export default AddressPopup