Skip to content

M
mr-julyedu
Commit 1fbed084 by FE
Options

address popup basic complete

parent f590eef5
Showing with 347 additions and 106 deletions
src/components/blessingPreheat/addressPopup/index.js 0 → 100644
import React, { Component } from 'react';
import { isEmpty } from 'lodash';
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 { handleToHide } = this.props;
http.post(`${API.home}/sys/collect_info`, params).then(res => {
const {code, msg} = res.data;
if (code === 200) {
handleToHide();
} else {
Toast.info(msg, 2, null, false);
}
});
}
render() {
const { isLoading, addressInfo } = this.state;
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;
}}
onSubmit={(values) => {
this.handleToSubmit(values);
}}
render={({errors}) => (
<Form className="address-form">
<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={isEmpty(errors)? 'do' : ''}
type="submit"
>提交</button>
</Form>
)}
/>
}
</>
);
}
}
export default AddressPopup;
\ No newline at end of file
src/components/blessingPreheat/addressPopup/index.scss 0 → 100644
// 地址弹窗
.address-form__desc {
width: 238px;
margin: 16px auto 15px;
font-size: 12px;
color: #999;
}
.address-form__item {
position: relative;
width: 250px;
margin: 0 auto 16px;
}
.address-form__ipt {
display: block;
width: 100%;
height: 40px;
border: 1px solid rgba(221, 221, 221, 1);
font-size: 14px;
font-weight: 400;
color: rgba(153, 153, 153, 1);
text-indent: 10px;
}
.address-form__tip {
position: absolute;
bottom: -14px;
width: 100%;
font-size: 12px;
color: #ff0000;
line-height: 14px;
}
.address-form__submit {
display: block;
width: 120px;
height: 34px;
margin: 8px auto 0;
border-radius: 17px;
border-style: none;
background-color: rgba(82, 92, 101, 0.3);
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 34px;
cursor: pointer;
outline: none;
&[data-status="do"] {
background-color: #0099FF;
}
}
\ No newline at end of file
src/components/blessingPreheat/collectBlessing/index.js
......@@ -49,6 +49,7 @@ class CollectBlessing extends Component {
}
render() {
console.log(this.props);
const {
isSign,
userInfo: { isLogin = false, blessingVal = 0 },
......@@ -105,7 +106,7 @@ class CollectBlessing extends Component {
<p className="collect-blessing__title">{item}</p>
{
index === 0 && (isLogin && isSign) &&
<a className="collect-blessing__content" onClick={handleToShowNotice}>
<a className="collect-blessing__content" data-status="done">
+5点<br/>福气值
</a>
}
......
src/components/blessingPreheat/collectBlessing/index.scss
......@@ -55,6 +55,10 @@
&[data-layout="column"] {
flex-direction: column;
}
&[data-status="done"] {
background: rgba(82,92,101,.3);
}
}
.collect-blessing__label {
......@@ -179,7 +183,7 @@
p {
margin-bottom: 10px;
line-height: 1;
&:last-child {
margin-bottom: 0;
}
......
src/components/blessingPreheat/index.js
......@@ -45,6 +45,7 @@ class BlessingPreheat extends Component {
const { code, data } = res.data;
if(code === 200) {
this.setState({
isSign: !!data.today_signed,
isFormal: data.is_activity,
userInfo: Object.assign({}, userInfo, {
isLogin: !!data.is_login,
......@@ -199,6 +200,8 @@ class BlessingPreheat extends Component {
</Popup>
<Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'}
className={'join-lottery'}
......@@ -233,4 +236,4 @@ class BlessingPreheat extends Component {
}
}
export default BlessingPreheat
export default BlessingPreheat;
src/components/blessingPreheat/index.scss
#blessing-preheat {
background: #5327FA;
.invite-popup {
.content {
display: flex;
flex-flow: column;
align-items: center;
margin-top: 29px;
.qr-code {
width: 120px;
height: 120px;
margin-bottom: 20px;
}
button {
width: 133px;
height: 30px;
background: rgba(83, 39, 250, 1);
border-radius: 15px;
font-size: 14px;
color: #fff;
-webkit-appearance: none;
outline: none;
border: none;
}
}
.timeline-share{
height: 215px;
padding-bottom: 30px;
.title{
margin-bottom: 20px;
}
.content{
text-align: center;
.qr-code{
width: 120px;
height: 120px;
}
}
}
.test__record {
width: 106px;
height: 26px;
border:1px solid rgba(255,246,4,1);
border-radius:13px;
font-size:14px;
font-weight:400;
color:rgba(255,246,4,1);
margin: 10px auto 14px;
display: flex;
justify-content: center;
align-items: center;
}
.sort__rules {
font-size:12px;
font-weight:400;
color:rgba(255,255,255,1);
text-align: center;
text-align-last: center;
}
.join-lottery {
background: #5327FA;
text-align: center;
.title {
color: #fff;
margin-bottom: 15px;
}
.join-lottery {
background: #5327FA;
.text {
width: 275px;
height: 248px;
padding: 36px 30px 0;
margin-bottom: 10px;
text-align: center;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/join-lottery-bg.png");
background-size: contain;
font-size: 14px;
.title {
color: #fff;
margin-bottom: 15px;
.code {
color: #FF0000;
margin-bottom: 8px;
}
.time, .hint {
font-size: 12px;
color: #525C65;
}
.time {
margin-bottom: 20px;
}
.text {
width: 275px;
height: 248px;
padding: 36px 30px 0;
.hint{
color: rgba(82, 92, 101, .8);
margin-bottom: 10px;
text-align: center;
background: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/join-lottery-bg.png");
background-size: contain;
font-size: 14px;
text-align: left;
}
.code {
color: #FF0000;
margin-bottom: 8px;
}
.time, .hint {
font-size: 12px;
color: #525C65;
}
.time {
margin-bottom: 20px;
}
.hint{
color: rgba(82, 92, 101, .8);
margin-bottom: 10px;
text-align: left;
}
.qr-code {
width: 90px;
height: 90px;
}
.qr-code {
width: 90px;
height: 90px;
}
}
button {
width: 133px;
height: 30px;
background: #fff;
border-radius: 15px;
font-size: 14px;
color: #5327FA;
-webkit-appearance: none;
outline: none;
border: none;
}
}
.invite-popup {
.content {
display: flex;
flex-flow: column;
align-items: center;
margin-top: 29px;
.qr-code {
width: 120px;
height: 120px;
margin-bottom: 20px;
}
button {
width: 133px;
height: 30px;
background: #fff;
background: rgba(83, 39, 250, 1);
border-radius: 15px;
font-size: 14px;
color: #5327FA;
color: #fff;
-webkit-appearance: none;
outline: none;
border: none;
}
}
.timeline-share{
height: 215px;
padding-bottom: 30px;
.title{
margin-bottom: 20px;
}
.content{
text-align: center;
.qr-code{
width: 120px;
height: 120px;
}
}
}
.test__record {
width: 106px;
height: 26px;
border:1px solid rgba(255,246,4,1);
border-radius:13px;
font-size:14px;
font-weight:400;
color:rgba(255,246,4,1);
margin: 10px auto 14px;
display: flex;
justify-content: center;
align-items: center;
}
.sort__rules {
font-size:12px;
font-weight:400;
color:rgba(255,255,255,1);
text-align: center;
text-align-last: center;
}
}
// 幸运大抽奖--预热
......@@ -142,4 +143,5 @@
font-size: 13px;
color: #FFF604;
background-color: transparent;
}
\ No newline at end of file
}
src/components/blessingRank/index.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { http } from "@/utils";
import { Popup } from '@/common';
import AddressPopup from './../blessingPreheat/addressPopup/index';
import './index.scss';
@connect(({ user }) => (
{
uid: user.data.uid || ''
}
))
class BlessingRank extends Component {
constructor(props) {
super(props);
this.state = {
isAddress: false,
rankList: [],
rules: [
'1、排行榜名次以2019年11月13日24点七月在线公布的排行榜为准，榜单确认后，得奖小伙伴请及时填写邮寄信息，7个自然日内不填写，视为主动放弃奖品；',
......@@ -31,17 +40,28 @@ class BlessingRank extends Component {
});
}
handleToSwitch = (bool) => {
const { history, uid } = this.props;
if(bool && !uid) {
history.push('/passport');
}else {
this.setState({
isAddress: bool
});
}
}
formatString = (str, len) => {
return str.length > len? `${str.substr(0, len)}...` : str;
}
render() {
const { rankList, rules } = this.state;
const { isAddress, rankList, rules } = this.state;
return (
<>
<div className="rank__banner"></div>
<div className="rank__body">
<button className="rank__address">填写收货地址></button>
<button className="rank__address" onClick={() => this.handleToSwitch(true)}>填写收货地址></button>
<div className="rank__table">
<dl className="rank__table-header">
<dd className="rank__table-column">排名</dd>
......@@ -84,6 +104,12 @@ class BlessingRank extends Component {
))
}
</div>
<Popup
visible={isAddress}
title="收货信息"
>
<AddressPopup handleToHide = {() => this.handleToSwitch(false)} />
</Popup>
</div>
</>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment