diff --git a/app/source/css/parts/phoneReset.css b/app/source/css/parts/phoneReset.css index 6ea6d2e..e33f4a3 100644 --- a/app/source/css/parts/phoneReset.css +++ b/app/source/css/parts/phoneReset.css @@ -2,6 +2,7 @@ html { color: #000; background: #fff; -webkit-text-size-adjust: 100%; + -webkit-overflow-scrolling: touch; -ms-text-size-adjust: 100% } diff --git a/app/source/img/service/purge/item10.png b/app/source/img/service/purge/item10.png new file mode 100644 index 0000000..c9a0ecf Binary files /dev/null and b/app/source/img/service/purge/item10.png differ diff --git a/app/source/img/service/purge/item6.png b/app/source/img/service/purge/item6.png new file mode 100644 index 0000000..f1cbe00 Binary files /dev/null and b/app/source/img/service/purge/item6.png differ diff --git a/app/source/img/service/purge/item7.png b/app/source/img/service/purge/item7.png new file mode 100644 index 0000000..f812d3b Binary files /dev/null and b/app/source/img/service/purge/item7.png differ diff --git a/app/source/img/service/purge/item8.png b/app/source/img/service/purge/item8.png new file mode 100644 index 0000000..44af5da Binary files /dev/null and b/app/source/img/service/purge/item8.png differ diff --git a/app/source/img/service/purge/item9.png b/app/source/img/service/purge/item9.png new file mode 100644 index 0000000..e66c85f Binary files /dev/null and b/app/source/img/service/purge/item9.png differ diff --git a/app/view/index/actions/Order.jsx b/app/view/index/actions/Order.jsx index 15131aa..0ed494f 100644 --- a/app/view/index/actions/Order.jsx +++ b/app/view/index/actions/Order.jsx @@ -1,4 +1,5 @@ import { createAction } from 'redux-actions' export const SELECT_CARD = createAction('SELECT_CARD', cardPrice => cardPrice) -export const UPDATE_PRICE = createAction('UPDATE_PRICE', price => price) \ No newline at end of file +export const UPDATE_PRICE = createAction('UPDATE_PRICE', price => price) +export const UPDATE_SERVICE_TIME = createAction('UPDATE_SERVICE_TIME', time => time) \ No newline at end of file diff --git a/app/view/index/actions/User.jsx b/app/view/index/actions/User.jsx new file mode 100644 index 0000000..be0664f --- /dev/null +++ b/app/view/index/actions/User.jsx @@ -0,0 +1,6 @@ +import { createAction } from 'redux-actions' + +export const FETCH_USER = createAction('FETCH_USER', items => items) +export const ADD_USER_ADDRESS = createAction('ADD_USER_ADDRESS', item => item) +export const DELETE_USER_ADDRESS = createAction('DELETE_USER_ADDRESS', key => key) +export const SELECT_USER_ADDRESS = createAction('SELECT_USER_ADDRESS', key => key) \ No newline at end of file diff --git a/app/view/index/actions/index.jsx b/app/view/index/actions/index.jsx index ce7875a..9ecb7ee 100644 --- a/app/view/index/actions/index.jsx +++ b/app/view/index/actions/index.jsx @@ -2,5 +2,6 @@ import { createAction } from 'redux-actions'; export * from './Order'; export * from './Service'; +export * from './User' export const FETCH_ROOT_LIST = createAction('FETCH_ROOT_LIST'); export const GET_ROOT_LIST = createAction('GET_ROOT_LIST', items => items); \ No newline at end of file diff --git a/app/view/index/components/AddAddress/AddAddress.jsx b/app/view/index/components/AddAddress/AddAddress.jsx new file mode 100644 index 0000000..9e085b2 --- /dev/null +++ b/app/view/index/components/AddAddress/AddAddress.jsx @@ -0,0 +1,107 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' +import PropTypes from 'prop-types' +import ImmutableTypes from 'react-immutable-proptypes' +import { + ADD_USER_ADDRESS +} from '../../actions' + +class AddAddress extends Component { + static propTypes() { + return { + location: PropTypes.object, + $$user: ImmutableTypes.map, + ADD_USER_ADDRESS: PropTypes.func + } + } + + shouldComponentUpdate() { + return false + } + + render() { + const props = this.props + const address = props.$$user.get('address') + return ( +
+
+ { + props.history.goBack() + }} + >X +

添加地址

+
+

+ 请填写一下信息： +

+ + { + if (this.name.value && this.phone.value.length === 11 && this.address.value) { + props.ADD_USER_ADDRESS({ + name: this.name.value, + phone: this.phone.value, + address: this.address.value, + id: address[address.length - 1].id + 1 + }) + props.history.goBack() + } + else if (this.phone.value.length !== 11) { + this.phone.style.background = 'rgb(255, 237, 0)' + } + else { + const inputs = [this.name, this.phone, this.address] + inputs.map(item => { + /* eslint no-param-reassign:off */ + if (!item.value) { + item.style.background = 'rgb(255, 237, 0)' + } + else { + item.style.background = 'rgb(255, 255, 255)' + } + return false + }) + } + }} + /> +
+ ) + } +} + +export default connect(state => ({ + $$user: state.$$user +}), { + ADD_USER_ADDRESS +})(AddAddress) \ No newline at end of file diff --git a/app/view/index/components/Service/AddAddress/index.jsx b/app/view/index/components/AddAddress/index.jsx similarity index 100% rename from app/view/index/components/Service/AddAddress/index.jsx rename to app/view/index/components/AddAddress/index.jsx diff --git a/app/view/index/components/Service/AddAddress/index.pcss b/app/view/index/components/AddAddress/index.pcss similarity index 84% rename from app/view/index/components/Service/AddAddress/index.pcss rename to app/view/index/components/AddAddress/index.pcss index 72bd892..37c8822 100644 --- a/app/view/index/components/Service/AddAddress/index.pcss +++ b/app/view/index/components/AddAddress/index.pcss @@ -48,15 +48,15 @@ } &:nth-child(1)::before { - background: url("../../../../../source/img/user/userName.png") no-repeat; + background: url("../../../../source/img/user/userName.png") no-repeat; background-size: cover; } &:nth-child(2)::before { - background: url("../../../../../source/img/user/userPhone.png") no-repeat; + background: url("../../../../source/img/user/userPhone.png") no-repeat; background-size: cover; } &:nth-child(3)::before { - background: url("../../../../../source/img/user/userMap.png") no-repeat; + background: url("../../../../source/img/user/userMap.png") no-repeat; background-size: cover; } } diff --git a/app/view/index/components/Address/Address.jsx b/app/view/index/components/Address/Address.jsx new file mode 100644 index 0000000..9c66c80 --- /dev/null +++ b/app/view/index/components/Address/Address.jsx @@ -0,0 +1,93 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import ImmutableTypes from 'react-immutable-proptypes' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' +import { + SELECT_USER_ADDRESS, + DELETE_USER_ADDRESS +} from '../../actions' +import Header from '../Header' + +class Address extends PureComponent { + static propTypes() { + return { + $$user: ImmutableTypes.map, + location: PropTypes.object, + SELECT_USER_ADDRESS: PropTypes.func, + DELETE_USER_ADDRESS: PropTypes.func + } + } + + constructor(...props) { + super(props) + } + + render() { + const props = this.props + return ( +
+
+
+ 新添地址 +
+
+ {/* 判断是否有地址，让div占据真个div覆盖背景 */} + {1 && ( + + )} +
+
+ ) + } +} + +export default connect(state => ({ + $$user: state.$$user +}), { + SELECT_USER_ADDRESS, + DELETE_USER_ADDRESS +})(Address) \ No newline at end of file diff --git a/app/view/index/components/Service/Address/index.jsx b/app/view/index/components/Address/index.jsx similarity index 100% rename from app/view/index/components/Service/Address/index.jsx rename to app/view/index/components/Address/index.jsx diff --git a/app/view/index/components/User/Address/index.pcss b/app/view/index/components/Address/index.pcss similarity index 87% rename from app/view/index/components/User/Address/index.pcss rename to app/view/index/components/Address/index.pcss index 3ad7fe2..4e9c3c4 100644 --- a/app/view/index/components/User/Address/index.pcss +++ b/app/view/index/components/Address/index.pcss @@ -16,7 +16,7 @@ .addressList { width: 100%; height: calc(100vh - 90px); /*px*/ - background: url("../../../../../source/img/user/noArea.png") no-repeat center; + background: url("../../../../source/img/user/noArea.png") no-repeat center; background-size: 60%; & ul { box-sizing: border-box; @@ -62,7 +62,7 @@ top: 24px; width: 40px; height: 40px; - background: url("../../../../../source/img/user/clearAddress.png") no-repeat; + background: url("../../../../source/img/user/clearAddress.png") no-repeat; background-size: cover; } } \ No newline at end of file diff --git a/app/view/index/components/Order/Pay/Pay.jsx b/app/view/index/components/Order/Pay/Pay.jsx index b2c3881..438dce0 100644 --- a/app/view/index/components/Order/Pay/Pay.jsx +++ b/app/view/index/components/Order/Pay/Pay.jsx @@ -1,30 +1,36 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import { Link } from 'react-router-dom'; +import React, { Component } from 'react' +import { connect } from 'react-redux' +import ImmutableTypes from 'react-immutable-proptypes' +import { Link } from 'react-router-dom' const orderPay = { price: '45', track: '20', - type: '洗衣', -}; + type: '洗衣' +} class Pay extends Component { + static propTypes() { + return { + $$pay: ImmutableTypes.map + } + } + constructor(props) { - super(props); + super(props) this.state = { - mode: '余额', - }; + mode: '余额' + } } tabMode(value) { this.setState({ - mode: value, - }); + mode: value + }) } render() { - const pay = this.props.pay; - console.log(pay.toJS(), pay.get('useCard')); + const $$pay = this.props.$$pay return (
{ @@ -51,7 +57,11 @@ class Pay extends Component { }
优惠卷 - {pay.get('useCard') ? pay.get('useCard') : '请选择优惠卷 >'} + + {$$pay.get('useCard') ? $$pay.get('useCard') : '请选择优惠卷 >'} +
{
- ); + ) } } function mapStateToProps(state) { return { - pay: state.pay, - }; + $$pay: state.$$pay + } } -export default connect(mapStateToProps)(Pay); \ No newline at end of file +export default connect(mapStateToProps)(Pay) \ No newline at end of file diff --git a/app/view/index/components/Root/Slider/slider.pcss b/app/view/index/components/Root/Slider/slider.pcss index b1abd89..cf7b535 100644 --- a/app/view/index/components/Root/Slider/slider.pcss +++ b/app/view/index/components/Root/Slider/slider.pcss @@ -1,4 +1,5 @@ .mySlider { + height: 392px; /*px*/ position: relative; & img { height: 392px; /*px*/ diff --git a/app/view/index/components/Service/About.jsx b/app/view/index/components/Service/About.jsx index 21b1ab2..aee6228 100644 --- a/app/view/index/components/Service/About.jsx +++ b/app/view/index/components/Service/About.jsx @@ -3,29 +3,6 @@ import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import about from '../../../../source/img/service/clearing/about.jpg'; -/* -const groups = [ - { - tatle: '团队强大', - img: groupImg0, - text: '公司成立与2009年3月，是一家经余姚工商行政管理局批准成立的企业。公司对雇主进行全方位跟踪服务，对雇员进行公司员工制管理。使雇主和雇员都能享受安心可靠的服务。', - key: 0, - }, - { - tatle: '培训专业', - img: groupImg1, - text: '公司专门开办搭把手职业技能培训学校，提供专业的培训给公司的保洁人员，通过理论和实操的结合培训，手把手的知道，使保洁人员都拥有专业的保洁知识。', - key: 1, - }, - { - tatle: '团队强大', - img: groupImg0, - text: '公司采购了专业的保洁用具，并根据保洁员使用后的反馈意见，更换并更新更实用的用具，使保洁员在保洁的过程中更好的提高工作效率。', - key: 2, - }, -]; -*/ - function About({ location }) { return (
@@ -44,37 +21,6 @@ function About({ location }) { }} /> - {/* -

居家保洁详情

- -
-

用户保障

- -

温馨提示

-
    -
  1. - 订单不足3小时，按3小时计费；超过3小时，按实际 -
    2. -
-
- */}
); } diff --git a/app/view/index/components/Service/AddAddress/AddAddress.jsx b/app/view/index/components/Service/AddAddress/AddAddress.jsx deleted file mode 100644 index 1eb2245..0000000 --- a/app/view/index/components/Service/AddAddress/AddAddress.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; - -function AddAddress({ location }) { - return ( -
-
- X -

添加地址

-
-

- 请填写一下信息： -

- - -
- ); -} - -AddAddress.defaultProps = { - location: {} -}; -AddAddress.propTypes = { - location: PropTypes.object -}; -export default AddAddress; \ No newline at end of file diff --git a/app/view/index/components/Service/Address/Address.jsx b/app/view/index/components/Service/Address/Address.jsx deleted file mode 100644 index e26e9f2..0000000 --- a/app/view/index/components/Service/Address/Address.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; -import Header from '../../Header'; - -const addressList = [ - { name: '路人甲', phone: '123123123', address: '地址111111111', id: 0 }, - { name: '路人乙', phone: '123123123', address: '地址111111111', id: 1 }, - { name: '路人丙', phone: '123123123', address: '地址111111111', id: 2 }, - { name: '路人丁', phone: '123123123', address: '地址111111111', id: 3 } -]; - -function Address({ location }) { - return ( -
-
-
- 新添地址 -
-
- {/* 判断是否有地址，让div占据真个div覆盖背景 */} - {1 && ( - - )} -
-
- ); -} - -Address.defaultProps = { - location: {} -}; -Address.propTypes = { - location: PropTypes.object -}; -export default Address; \ No newline at end of file diff --git a/app/view/index/components/Service/Address/index.pcss b/app/view/index/components/Service/Address/index.pcss deleted file mode 100644 index 3ad7fe2..0000000 --- a/app/view/index/components/Service/Address/index.pcss +++ /dev/null @@ -1,68 +0,0 @@ -.address { - background: #efefef; -} - -.addAddress { - position: relative; - & > a { - position: fixed; - top: 40px; - right: 40px; - z-index: 200; - color: #f39700; - } -} - -.addressList { - width: 100%; - height: calc(100vh - 90px); /*px*/ - background: url("../../../../../source/img/user/noArea.png") no-repeat center; - background-size: 60%; - & ul { - box-sizing: border-box; - padding-top: 20px; - width: 100%; - height: calc(100vh - 90px); /*px*/ - background: #efefef; - } - & li { - position: relative; - padding: 20px 40px; - border-bottom: 2px solid #eee; /*px*/ - background: #fff; - } - & .textContent { - position: relative; - display: block; - padding-left: 30px; - & span { - margin-right: 30px; - } - & p { - padding-top: 6px; - } - &::before { - position: absolute; - top: 30px; - left: 0; - display: block; - content: ''; - width: 10px; - height: 10px; - border: 2px solid #9B9B9B; /*px*/ - border-radius: 50%; - } - } - & .active a::before { - border-color: #f39700 !important; - } - & .clearAddress { - position: absolute; - right: 40px; - top: 24px; - width: 40px; - height: 40px; - background: url("../../../../../source/img/user/clearAddress.png") no-repeat; - background-size: cover; - } -} \ No newline at end of file diff --git a/app/view/index/components/Service/Items/Items.jsx b/app/view/index/components/Service/Items/Items.jsx index c9e3365..0685e01 100644 --- a/app/view/index/components/Service/Items/Items.jsx +++ b/app/view/index/components/Service/Items/Items.jsx @@ -58,7 +58,7 @@ class Items extends Component { { // 购买数量 - props.$$order.map(o => o.get('type') === item.type && o.get('num')) + props.$$order.map(o => o.get('id') === item.id && o.get('num')) } diff --git a/app/view/index/components/Service/Ordering/Ordering.jsx b/app/view/index/components/Service/Ordering/Ordering.jsx index f65f045..bafef08 100644 --- a/app/view/index/components/Service/Ordering/Ordering.jsx +++ b/app/view/index/components/Service/Ordering/Ordering.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import ImmutableTypes from 'react-immutable-proptypes' import { connect } from 'react-redux' @@ -8,31 +8,26 @@ import img0 from '../../../../../source/img/service/address.png' import img1 from '../../../../../source/img/service/itemList.png' import img2 from '../../../../../source/img/service/time.png' -const items = [ - { name: '日常保洁（3小时/次）', num: 2, price: 100, key: 0 }, - { name: '日常保洁（3小时/次）', num: 1, price: 140, key: 1 }, - { name: '日常保洁（3小时/次）', num: 4, price: 120, key: 2 }, - { name: '日常保洁（3小时/次）', num: 2, price: 100, key: 3 } -] - -class Ordering extends Component { +class Ordering extends PureComponent { static propTypes() { return { $$order: ImmutableTypes.map, + $$user: ImmutableTypes.map, $$pay: ImmutableTypes.map, location: PropTypes.object } } - constructor(...props) { - super(props) + constructor() { + super() this.state = {} } render() { const props = this.props - console.log(props.$$order.toJS()) - console.log(props.$$pay.toJS()) + const address = props.$$user.get('address').filter(item => + item.id === props.$$user.get('defaultAddressId') && item.address + ) return (
@@ -42,7 +37,7 @@ class Ordering extends Component { 服务地址：

- 还没有设置地址哟 + {address[0] ? address[0].address : '还没有设置地址哟' } >

@@ -52,7 +47,7 @@ class Ordering extends Component { 订单详情： { props.$$order.map(item => ( -

+

{item.get('type')} @@ -96,7 +91,7 @@ class Ordering extends Component { 服务时间：

- 请选择服务时间 + {props.$$pay.get('serviceTime') ? props.$$pay.get('serviceTime') : '请选择服务时间'} >

@@ -112,5 +107,6 @@ class Ordering extends Component { export default connect(state => ({ $$order: state.$$order, + $$user: state.$$user, $$pay: state.$$pay }), {})(Ordering) \ No newline at end of file diff --git a/app/view/index/components/Service/Ordering/index.pcss b/app/view/index/components/Service/Ordering/index.pcss index e899296..bbdee02 100644 --- a/app/view/index/components/Service/Ordering/index.pcss +++ b/app/view/index/components/Service/Ordering/index.pcss @@ -7,7 +7,7 @@ } & p { position: relative; - padding: 6px 0; + padding: 10px 0; } & .items { text-align: center; @@ -18,13 +18,12 @@ & li { position: relative; border-bottom: 2px solid #9B9B9B; /*px*/ - padding-bottom: 20px; + padding-bottom: 10px; margin-bottom: 14px; & img { width: 50px; height: 50px; position: absolute; - top: 10px; left: -70px; } } diff --git a/app/view/index/components/Service/Time/Time.jsx b/app/view/index/components/Service/Time/Time.jsx index 30e8b6f..77f6bf2 100644 --- a/app/view/index/components/Service/Time/Time.jsx +++ b/app/view/index/components/Service/Time/Time.jsx @@ -1,6 +1,9 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' +import DateFormat from 'dateformat-util' +import { UPDATE_SERVICE_TIME } from '../../../actions' const itemsTime = [ { time: '8:00-9:00', key: 0 }, @@ -11,52 +14,97 @@ const itemsTime = [ { time: '13:00-14:00', key: 5 }, { time: '14:00-15:00', key: 6 }, { time: '15:00-16:00', key: 7 } -]; +] +const itemsDays = [ + { time: DateFormat.format(new Date(), 'MM月dd号'), key: 0 }, + { time: DateFormat.format(new Date(Date.now() + (24 * 60 * 60 * 1000)), 'MM月dd号'), key: 1 }, + { time: DateFormat.format(new Date(Date.now() + (2 * 24 * 60 * 60 * 1000)), 'MM月dd号'), key: 2 } +] -function Time({ location }) { - return ( -
-
 
-
-

- 取消 - 完成 -

- -
    - { - itemsTime.map(item => ( -
  1. - {item.time} -
    2. - )) - } -
+class Time extends Component { + static propTypes() { + return { + location: PropTypes.object, + SELECT_SERVICE_TIME: PropTypes.func + } + } + + constructor() { + super() + this.state = { + day: null, + dayKey: null, + hour: null, + hourKey: null + } + } + + render() { + const props = this.props + const state = this.state + return ( +
+
 
+
+

+ 取消 + { + if (state.hour && state.day) { + props.UPDATE_SERVICE_TIME(`${state.day} ${state.hour}`) + } + }} + >完成 +

+
    + { + itemsDays.map(item => ( +
  • { + this.setState({ + ...state, + dayKey: item.key, + day: item.time + }) + }} + > + + {item.time} + +
    • + )) + } +
+
    + { + itemsTime.map(item => ( +
  1. { + this.setState({ + ...state, + hourKey: item.key, + hour: item.time + }) + }} + > + {item.time} +
    2. + )) + } +
+
-
- ); + ) + } } - -Time.defaultProps = { - location: {} -}; -Time.propTypes = { - location: PropTypes.object -}; -export default Time; \ No newline at end of file +export default connect(state => ({ + $$pay: state.$$pay +}), { + UPDATE_SERVICE_TIME +})(Time) \ No newline at end of file diff --git a/app/view/index/components/Service/Time/index.pcss b/app/view/index/components/Service/Time/index.pcss index c5d4e45..64940ca 100644 --- a/app/view/index/components/Service/Time/index.pcss +++ b/app/view/index/components/Service/Time/index.pcss @@ -20,6 +20,7 @@ background: #fff; & li { position: relative; + border-bottom: 4px solid #fff; /*px*/ bottom: -2px; /*px*/ float: left; width: calc(100% / 3); @@ -54,6 +55,7 @@ float: left; width: 32%; border: 2px solid #0D0D0D; /*px*/ + background: #fff; padding: 20px 0; margin-top: 10px; margin-left: 1%; diff --git a/app/view/index/components/User/AddAddress/AddAddress.jsx b/app/view/index/components/User/AddAddress/AddAddress.jsx deleted file mode 100644 index b61e038..0000000 --- a/app/view/index/components/User/AddAddress/AddAddress.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -function AddAddress() { - return ( -
-
- X -

添加地址

-
-

- 请填写一下信息： -

-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- 确认 -
- ); -} - -export default AddAddress; \ No newline at end of file diff --git a/app/view/index/components/User/AddAddress/index.jsx b/app/view/index/components/User/AddAddress/index.jsx deleted file mode 100644 index 0e8cac1..0000000 --- a/app/view/index/components/User/AddAddress/index.jsx +++ /dev/null @@ -1,4 +0,0 @@ -import AddAddress from './AddAddress'; -import './index.pcss'; - -export default AddAddress; \ No newline at end of file diff --git a/app/view/index/components/User/AddAddress/index.pcss b/app/view/index/components/User/AddAddress/index.pcss deleted file mode 100644 index 1356c57..0000000 --- a/app/view/index/components/User/AddAddress/index.pcss +++ /dev/null @@ -1,76 +0,0 @@ -#addAddress { - height: 100vh; - background: #efefef; - & .header { - height: 90px; /*px*/ - line-height: 50px; /*px*/ - background: #3f3b3a; - color: #fff; - & a { - position: relative; - top: 20px; /*px*/ - float: left; - font-size: 30px; - padding: 0 40px; - border-right: 2px solid #0D0D0D; /*px*/ - color: #fff; - } - & h1 { - position: relative; - top: 20px; /*px*/ - font-size: 32px; /*px*/ - margin-left: 160px; - } - } - & p { - margin: 10px 8px; - } - & li { - position: relative; - height: 80px; /*px*/ - line-height: 80px; /*px*/ - background: #fff; - border-top: 2px solid #eee; - &::before { - position: absolute; - top: 20px; - left: 30px; - display: block; - content: ''; - width: 40px; - height: 40px; - } - & input { - width: 100%; - padding: 20px; - margin-left: 10%; - border: 0; - } - - &:nth-child(1)::before { - background: url("../../../../../source/img/user/userName.png") no-repeat; - background-size: cover; - } - &:nth-child(2)::before { - background: url("../../../../../source/img/user/userPhone.png") no-repeat; - background-size: cover; - } - &:nth-child(3)::before { - background: url("../../../../../source/img/user/userMap.png") no-repeat; - background-size: cover; - } - } - & > a { - position: fixed; - left:0; - bottom: 0; - width: 100%; - height: 90px; - line-height: 90px; - border: 0; - font-size: 1.2em; - text-align: center; - color: #fff; - background: #f8b62c; - } -} \ No newline at end of file diff --git a/app/view/index/components/User/Address/Address.jsx b/app/view/index/components/User/Address/Address.jsx deleted file mode 100644 index 62fef7b..0000000 --- a/app/view/index/components/User/Address/Address.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import Header from '../../Header'; - -const addressList = [ - { name: '路人甲', phone: '123123123', address: '地址111111111', key: 0 }, - { name: '路人乙', phone: '123123123', address: '地址111111111', key: 1 }, - { name: '路人丙', phone: '123123123', address: '地址111111111', key: 2 }, - { name: '路人丁', phone: '123123123', address: '地址111111111', key: 3 }, -]; - -function Address() { - return ( -
-
-
- 新添地址 -
-
- {/* 判断是否有地址，让div占据真个div覆盖背景 */} - {1 && ( - - )} -
-
- ); -} - -export default Address; \ No newline at end of file diff --git a/app/view/index/components/User/Address/index.jsx b/app/view/index/components/User/Address/index.jsx deleted file mode 100644 index f131a74..0000000 --- a/app/view/index/components/User/Address/index.jsx +++ /dev/null @@ -1,4 +0,0 @@ -import Address from './Address'; -import './index.pcss'; - -export default Address; \ No newline at end of file diff --git a/app/view/index/containers/Login.jsx b/app/view/index/containers/Login.jsx index a68bcde..fcf0998 100644 --- a/app/view/index/containers/Login.jsx +++ b/app/view/index/containers/Login.jsx @@ -1,12 +1,12 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { Route } from 'react-router-dom'; -import Header from '../components/Header'; -import { EmployeeLogin, Register } from '../components/Login'; +import React from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import { Route } from 'react-router-dom' +import Header from '../components/Header' +import { EmployeeLogin, Register } from '../components/Login' function Login({ match }) { - const path = match.params.path; + const path = match.params.path return (
{ @@ -15,14 +15,14 @@ function Login({ match }) {
- ); + ) } Login.propTypes = { - match: PropTypes.object.isRequired, -}; + match: PropTypes.object.isRequired +} function mapStateToProps(state) { - return state; + return state } -export default connect(mapStateToProps, {})(Login); \ No newline at end of file +export default connect(mapStateToProps, {})(Login) \ No newline at end of file diff --git a/app/view/index/containers/Order.jsx b/app/view/index/containers/Order.jsx index a135ed9..ff33ce7 100644 --- a/app/view/index/containers/Order.jsx +++ b/app/view/index/containers/Order.jsx @@ -1,13 +1,29 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Route, Switch } from 'react-router-dom'; -import Header from '../components/Header'; -import Footer from '../components/Footer'; -import List from '../components/Order/List'; -import Details from '../components/Order/Details'; -import Pay from '../components/Order/Pay'; -import Success from '../components/Order/Success'; -import Card from '../components/Order/Card'; +import React from 'react' +import PropTypes from 'prop-types' +import { Route, Switch } from 'react-router-dom' +import { asyncComponent } from 'react-async-component' + +const Header = asyncComponent({ + resolve: () => System.import('../components/Header') +}) +const Footer = asyncComponent({ + resolve: () => System.import('../components/Footer') +}) +const List = asyncComponent({ + resolve: () => System.import('../components/Order/List') +}) +const Details = asyncComponent({ + resolve: () => System.import('../components/Order/Details') +}) +const Pay = asyncComponent({ + resolve: () => System.import('../components/Order/Pay') +}) +const Success = asyncComponent({ + resolve: () => System.import('../components/Order/Success') +}) +const Card = asyncComponent({ + resolve: () => System.import('../components/Order/Card') +}) function Order({ match }) { return ( @@ -64,13 +80,13 @@ function Order({ match }) { )} /> - ); + ) } Order.propTypes = { match: PropTypes.shape({ - url: PropTypes.string, - }).isRequired, -}; + url: PropTypes.string + }).isRequired +} -export default Order; \ No newline at end of file +export default Order \ No newline at end of file diff --git a/app/view/index/containers/Service.jsx b/app/view/index/containers/Service.jsx index 109fea3..7351c83 100644 --- a/app/view/index/containers/Service.jsx +++ b/app/view/index/containers/Service.jsx @@ -1,15 +1,35 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Route } from 'react-router-dom'; -import Header from '../components/Header'; -import Items from '../components/Service/Items'; -import SelectServiceFooter from '../components/Service/Footer'; -import About from '../components/Service/About'; -import CartList from '../components/Service/CartList'; -import Ordering from '../components/Service/Ordering'; -import Time from '../components/Service/Time'; -import Address from '../components/Service/Address'; -import AddAddress from '../components/Service/AddAddress'; +import React from 'react' +import PropTypes from 'prop-types' +import { Route } from 'react-router-dom' +import { asyncComponent } from 'react-async-component' + +const Header = asyncComponent({ + resolve: () => System.import('../components/Header') +}) +const Items = asyncComponent({ + resolve: () => System.import('../components/Service/Items') +}) +const SelectServiceFooter = asyncComponent({ + resolve: () => System.import('../components/Service/Footer') +}) +const About = asyncComponent({ + resolve: () => System.import('../components/Service/About') +}) +const CartList = asyncComponent({ + resolve: () => System.import('../components/Service/CartList') +}) +const Ordering = asyncComponent({ + resolve: () => System.import('../components/Service/Ordering') +}) +const Time = asyncComponent({ + resolve: () => System.import('../components/Service/Time') +}) +const Address = asyncComponent({ + resolve: () => System.import('../components/Address') +}) +const AddAddress = asyncComponent({ + resolve: () => System.import('../components/AddAddress') +}) function Service({ location }) { return ( @@ -64,14 +84,14 @@ function Service({ location }) { component={AddAddress} />
- ); + ) } Service.defaultProps = { location: {} -}; +} Service.propTypes = { location: PropTypes.object -}; +} -export default Service; \ No newline at end of file +export default Service \ No newline at end of file diff --git a/app/view/index/containers/User.jsx b/app/view/index/containers/User.jsx index a0bc091..1ee046f 100644 --- a/app/view/index/containers/User.jsx +++ b/app/view/index/containers/User.jsx @@ -2,16 +2,34 @@ import React from 'react' import PropTypes from 'prop-types' import { Route } from 'react-router-dom' import { asyncComponent } from 'react-async-component' -import Header from '../components/Header' -import Footer from '../components/Footer' -import Home from '../components/User/Home' -import Card from '../components/User/Card' -import Recharge from '../components/User/Recharge' -import RecordRecharge from '../components/User/RecordRecharge' -import Record from '../components/User/Record' -import Address from '../components/User/Address' -import AddAddress from '../components/User/AddAddress' +const Header = asyncComponent({ + resolve: () => System.import('../components/Header') +}) +const Footer = asyncComponent({ + resolve: () => System.import('../components/Footer') +}) +const Home = asyncComponent({ + resolve: () => System.import('../components/User/Home') +}) +const Card = asyncComponent({ + resolve: () => System.import('../components/User/Card') +}) +const Recharge = asyncComponent({ + resolve: () => System.import('../components/User/Recharge') +}) +const RecordRecharge = asyncComponent({ + resolve: () => System.import('../components/User/RecordRecharge') +}) +const Record = asyncComponent({ + resolve: () => System.import('../components/User/Record') +}) +const Address = asyncComponent({ + resolve: () => System.import('../components/Address') +}) +const AddAddress = asyncComponent({ + resolve: () => System.import('../components/AddAddress') +}) const Introduce = asyncComponent({ resolve: () => System.import('../components/User/Introduce') }) diff --git a/app/view/index/epics/index.jsx b/app/view/index/epics/index.jsx index ca1801a..550dddd 100644 --- a/app/view/index/epics/index.jsx +++ b/app/view/index/epics/index.jsx @@ -2,11 +2,13 @@ import { combineEpics } from 'redux-observable' import rootEpics from './rootEpics' import orderEpics from './orderEpics' import serviceEpics from './serviceEpics' +import userEpics from './userEpics' const epics = [ ...rootEpics, ...orderEpics, - ...serviceEpics + ...serviceEpics, + ...userEpics ] export default combineEpics(...epics) diff --git a/app/view/index/epics/orderEpics.jsx b/app/view/index/epics/orderEpics.jsx index 15e225a..fbca20b 100644 --- a/app/view/index/epics/orderEpics.jsx +++ b/app/view/index/epics/orderEpics.jsx @@ -1,6 +1,7 @@ import { ADD_SERVICE, ADD_SERVICE_COUNT, + REDUCE_SERVICE_COUNT, CLEAR_SERVICE, UPDATE_PRICE } from '../actions' @@ -9,6 +10,7 @@ function updatePayPrice(action$, stroe) { return action$.filter( action => action.type === ADD_SERVICE().type || action.type === ADD_SERVICE_COUNT().type || + action.type === REDUCE_SERVICE_COUNT().type || action.type === CLEAR_SERVICE().type ) .map(() => ({ diff --git a/app/view/index/epics/serviceEpics.jsx b/app/view/index/epics/serviceEpics.jsx index 80220bf..e4731ec 100644 --- a/app/view/index/epics/serviceEpics.jsx +++ b/app/view/index/epics/serviceEpics.jsx @@ -14,10 +14,46 @@ import nanny2 from '../../../source/img/service/nanny/item2.png' import nanny3 from '../../../source/img/service/nanny/item3.png' import nanny4 from '../../../source/img/service/nanny/item4.png' +import purge0 from '../../../source/img/service/purge/item0.png' +import purge1 from '../../../source/img/service/purge/item1.png' +import purge2 from '../../../source/img/service/purge/item2.png' +import purge3 from '../../../source/img/service/purge/item3.png' +import purge4 from '../../../source/img/service/purge/item4.png' +import purge5 from '../../../source/img/service/purge/item5.png' + +import aegis0 from '../../../source/img/service/aegis/item0.png' +import aegis1 from '../../../source/img/service/aegis/item1.png' +import aegis2 from '../../../source/img/service/aegis/item2.png' +import aegis3 from '../../../source/img/service/aegis/item3.png' +import aegis4 from '../../../source/img/service/aegis/item4.png' +import aegis5 from '../../../source/img/service/aegis/item5.png' +import aegis6 from '../../../source/img/service/aegis/item6.png' +import aegis7 from '../../../source/img/service/aegis/item7.png' +import aegis8 from '../../../source/img/service/aegis/item8.png' +import aegis9 from '../../../source/img/service/aegis/item9.png' +import aegis10 from '../../../source/img/service/aegis/item10.png' +import aegis11 from '../../../source/img/service/aegis/item11.png' +import aegis12 from '../../../source/img/service/aegis/item12.png' +import aegis13 from '../../../source/img/service/aegis/item13.png' +import aegis14 from '../../../source/img/service/aegis/item14.png' +import aegis15 from '../../../source/img/service/aegis/item15.png' +import aegis16 from '../../../source/img/service/aegis/item16.png' +import aegis17 from '../../../source/img/service/aegis/item17.png' +import aegis18 from '../../../source/img/service/aegis/item18.png' +import aegis19 from '../../../source/img/service/aegis/item19.png' +import aegis20 from '../../../source/img/service/aegis/item20.png' +import aegis21 from '../../../source/img/service/aegis/item21.png' +import aegis22 from '../../../source/img/service/aegis/item22.png' + function fetchService(action$) { return action$.filter(action => action.type === Actions.FETCH_SERVICE().type).map(item => { switch (item.payload) { case '#laundry': + return { + type: Actions.SELECT_SERVICE().type, + payload: [] + } + case '#clearing': return { type: Actions.SELECT_SERVICE().type, payload: [ @@ -42,6 +78,48 @@ function fetchService(action$) { { type: '催乳', node: '面议', unit: '1次', price: '380', img: nanny4, id: 12 } ] } + case '#purge': + return { + type: Actions.SELECT_SERVICE().type, + payload: [ + { type: '油烟机清洗', node: '家用', unit: '1台', price: '150', img: purge0, id: 13 }, + { type: '空调清洗', node: '壁挂式', unit: '1台', price: '120', img: purge1, id: 14 }, + { type: '空调清洗', node: '柜台', unit: '1台', price: '150', img: purge2, id: 15 }, + { type: '中央空调清洗', node: '中央空调', unit: '1台', price: '260', img: purge3, id: 16 }, + { type: '中央空调风口清洗', node: '面议', unit: '1组（进风口;出风口）', price: '60', img: purge4, id: 17 }, + { type: '洗衣机清洗', node: '滚筒式', unit: '1台', price: '150', img: purge5, id: 18 } + ] + } + case '#aegis': + return { + type: Actions.SELECT_SERVICE().type, + payload: [ + { type: '水龙头更换', node: '普通', unit: '1个', price: '60', img: aegis0, id: 19 }, + { type: '水龙头更换', node: '浑水单双孔.三孔', unit: '1个', price: '100', img: aegis1, id: 20 }, + { type: '水龙头更换', node: '恒温型', unit: '1套', price: '200', img: aegis2, id: 21 }, + { type: '软管更换维修', node: '', unit: '1根', price: '60', img: aegis3, id: 22 }, + { type: '角阀更换维修', node: '', unit: '1个', price: '60', img: aegis4, id: 40 }, + { type: '自来水管安装', node: '面议', unit: '1m', price: '1', img: aegis5, id: 23 }, + { type: '冲洗阀更换', node: '', unit: '1个', price: '60', img: aegis6, id: 24 }, + { type: '阀门拆装维修', node: '', unit: '1次', price: '100', img: aegis7, id: 25 }, + { type: '防水补漏维修', node: '面议', unit: '1m*m', price: '1', img: aegis8, id: 26 }, + { type: '马桶更换维修', node: '配件', unit: '1个', price: '60', img: aegis9, id: 27 }, + { type: '花洒更换维修', node: '花洒/淋浴头', unit: '1个', price: '60', img: aegis10, id: 28 }, + { type: '浴霸更换安装', node: '', unit: '1个', price: '200', img: aegis11, id: 29 }, + { type: '坐便器更换安装', node: '普通', unit: '1个', price: '150', img: aegis12, id: 30 }, + { type: '不锈钢水槽安装', node: '', unit: '1个', price: '100', img: aegis13, id: 31 }, + { type: '拖把盆安装', node: '', unit: '1个', price: '100', img: aegis14, id: 32 }, + { type: '立柱盆安装', node: '', unit: '1个', price: '100', img: aegis15, id: 33 }, + { type: '台上盆安装', node: '', unit: '1个', price: '100', img: aegis16, id: 34 }, + { type: '台下盆安装', node: '', unit: '1个', price: '150', img: aegis17, id: 35 }, + { type: '浴缸安装维修', node: '面议', unit: '1个', price: '1', img: aegis18, id: 36 }, + { type: '立柱盆安装', node: '', unit: '1个', price: '100', img: aegis19, id: 37 }, + { type: '蹲坑疏通', node: '蹲坑、地漏、洗手盆', unit: '1个', price: '80', img: aegis20, id: 38 }, + { type: '马桶/小便池疏通', node: '非拆', unit: '1个', price: '100', img: aegis21, id: 39 }, + { type: '马桶/小便池疏通', node: '拆卸疏通', unit: '1个', price: '200', img: aegis21, id: 40 }, + { type: '主管疏通', node: '', unit: '1次', price: '200', img: aegis22, id: 41 } + ] + } default: return { type: Actions.SELECT_SERVICE().type, diff --git a/app/view/index/epics/userEpics.jsx b/app/view/index/epics/userEpics.jsx new file mode 100644 index 0000000..12595df --- /dev/null +++ b/app/view/index/epics/userEpics.jsx @@ -0,0 +1,36 @@ +import { + FETCH_USER +} from '../actions' + +function fetchUser(action$, store) { + // 未登录状态自动发起获取用户信息 + if (!store.getState().$$user.get('token')) { + store.dispatch({ + type: 'FETCH_USER', + payload: { + token: true, + defaultAddressId: 0, + address: [ + { name: '路人甲', phone: '123123123', address: '111111111', id: 0 }, + { name: '路人乙', phone: '123123123', address: '222222222', id: 1 }, + { name: '路人丙', phone: '123123123', address: '333333333', id: 2 } + ] + } + }) + } + return action$.filter(action => action.type === FETCH_USER().type) + .map(action => ({ + type: action.type, + payload: { + token: false, + defaultAddressId: 0, + address: [ + { name: '路人甲', phone: '123123123', address: '111111111', id: 0 }, + { name: '路人乙', phone: '123123123', address: '222222222', id: 1 }, + { name: '路人丙', phone: '123123123', address: '333333333', id: 2 } + ] + } + })) +} + +export default [fetchUser] \ No newline at end of file diff --git a/app/view/index/reducers/index.jsx b/app/view/index/reducers/index.jsx index 769ba4b..61f2081 100644 --- a/app/view/index/reducers/index.jsx +++ b/app/view/index/reducers/index.jsx @@ -1,10 +1,12 @@ -import { combineReducers } from 'redux'; -import $$app from './app'; -import $$order from './order'; -import service from './service'; +import { combineReducers } from 'redux' +import $$app from './app' +import $$user from './user' +import $$order from './order' +import $$service from './service' export default combineReducers({ ...$$app, + ...$$user, ...$$order, - ...service -}); + ...$$service +}) diff --git a/app/view/index/reducers/order.jsx b/app/view/index/reducers/order.jsx index f858679..dbea45c 100644 --- a/app/view/index/reducers/order.jsx +++ b/app/view/index/reducers/order.jsx @@ -1,10 +1,11 @@ // import { Map } from 'immutable'; import createReducer from './createReducer' -import { SELECT_CARD, UPDATE_PRICE } from '../actions' +import { SELECT_CARD, UPDATE_PRICE, UPDATE_SERVICE_TIME } from '../actions' const $$pay = createReducer({ num: 0, price: 0, + serviceTime: null, useCard: '' }, { [UPDATE_PRICE](state, action) { @@ -15,6 +16,9 @@ const $$pay = createReducer({ .set('num', action.payload.map(item => Number.parseInt(item.get('num'), 10)) .reduce((pre, next) => pre + next)) }, + [UPDATE_SERVICE_TIME](state, action) { + return state.set('serviceTime', action.payload) + }, [SELECT_CARD](state, action) { return state.set('useCard', action.payload) } diff --git a/app/view/index/reducers/user.jsx b/app/view/index/reducers/user.jsx new file mode 100644 index 0000000..ebf33fc --- /dev/null +++ b/app/view/index/reducers/user.jsx @@ -0,0 +1,34 @@ +import { Map } from 'immutable' +import createReducer from './createReducer' +import { + FETCH_USER, + SELECT_USER_ADDRESS, + ADD_USER_ADDRESS, + DELETE_USER_ADDRESS +} from '../actions' + +const $$user = createReducer({ + token: false, + address: [], + defaultAddressId: 0 +}, { + [FETCH_USER](state, action) { + return Map(action.payload) + }, + [SELECT_USER_ADDRESS](state, action) { + return state.set('defaultAddressId', action.payload) + }, + [ADD_USER_ADDRESS](state, action) { + return state.updateIn(['address'], item => { + item.push(action.payload) + return item + }) + }, + [DELETE_USER_ADDRESS](state, action) { + return state.set('address', state.get('address').filter(item => item.id !== action.payload)) + } +}) + +export default { + $$user +} \ No newline at end of file diff --git a/package.json b/package.json index a98d830..a1af804 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ }, "homepage": "https://github.com/sayll/react-webpack-start#readme", "dependencies": { + "dateformat-util": "^1.0.5", "es6-promise": "^4.1.0", "history": "^4.6.1", "immutable": "^4.0.0-rc.2",