diff --git a/src/marketing/pages/member/address.js b/src/marketing/pages/member/address.js index 92e8d8580..eebf7725c 100644 --- a/src/marketing/pages/member/address.js +++ b/src/marketing/pages/member/address.js @@ -1,8 +1,9 @@ -import React, { Component } from 'react' +import React, { useEffect } from 'react' +import { useImmer } from 'use-immer' import Taro, { getCurrentInstance, getCurrentPages } from '@tarojs/taro' import { View, Text } from '@tarojs/components' -// import AddressList from '@/components/new-address/address' -import { connect } from 'react-redux' +import { AtButton } from 'taro-ui' +import { useDispatch, useSelector } from 'react-redux' import { SpToast, SpCell, SpNavBar, SpPage } from '@/components' import S from '@/spx' import api from '@/api' @@ -11,37 +12,32 @@ import './address.scss' const ADDRESS_ID = 'address_id' -@connect( - ({ user, sys }) => ({ - address: user.address, - colors: sys - }), - (dispatch) => ({ - updateChooseAddress: (address) => - dispatch({ type: 'user/updateChooseAddress', payload: address }) - }) -) -export default class AddressIndex extends Component { - $instance = getCurrentInstance() - constructor(props) { - super(props) +const initialState = { + list: [], + isPicker: false, + selectedId: null +} - this.state = { - list: [], - isPicker: false, - selectedId: null - } +function AddressIndex(props) { + const $instance = getCurrentInstance() + const [state, setState] = useImmer(initialState) + const colors = useSelector((state) => state.sys) + const { address } = useSelector((state) => state.user) + const dispatch = useDispatch() + + useEffect(() => { + fetch() + }, [address]) + + const updateChooseAddress = (address) => { + dispatch({ type: 'user/updateChooseAddress', payload: address }) } - componentDidShow() { - this.fetch() - } - - async fetch(isDelete = false) { - const { isPicker, receipt_type = '', city = '' } = this.$instance.router.params + const fetch = async (isDelete = false) => { + const { isPicker, receipt_type = '', city = '' } = $instance.router.params if (isPicker) { - this.setState({ - isPicker: true + setState(draft=>{ + draft.isPicker = true }) } Taro.showLoading({ title: '' }) @@ -57,45 +53,48 @@ export default class AddressIndex extends Component { .sort((first) => (first.disabled ? 1 : -1)) } let selectedId = null - if (this.props.address) { - selectedId = this.props.address[ADDRESS_ID] + if (address) { + selectedId = address[ADDRESS_ID] } else { selectedId = list.find((addr) => addr.is_def > 0) || null } - this.setState({ - list: newList, - selectedId + setState(draft=>{ + draft.list = newList, + draft.selectedId = selectedId }) } - handleClickChecked = (item) => { - this.setState({ - selectedId: item[ADDRESS_ID] + const handleClickChecked = (e, item) => { + + setState(draft=>{ + draft.selectedId = item[ADDRESS_ID] }) - this.props.updateChooseAddress(item) + updateChooseAddress(item) setTimeout(() => { Taro.navigateBack() }, 700) } - handleChangeDefault = async (item) => { - item.is_def = 1 + const handleChangeDefault = async (e, item) => { + const nItem = JSON.parse(JSON.stringify(item)) + nItem.is_def = 1 try { - await api.member.addressCreateOrUpdate(item) - if (item.address_id) { + await api.member.addressCreateOrUpdate(nItem) + if (item?.address_id) { S.toast('修改成功') } + setTimeout(() => { - this.fetch() + fetch() }, 700) } catch (error) { return false } } - handleClickToEdit = (item) => { - if (item.address_id) { + const handleClickToEdit = (e, item) => { + if (item?.address_id) { Taro.navigateTo({ url: `/marketing/pages/member/edit-address?address_id=${item.address_id}` }) @@ -106,30 +105,44 @@ export default class AddressIndex extends Component { } } - handleDelete = async (item) => { - const { selectedId } = this.state + const handleDelete = async (e, item) => { + const res = await Taro.showModal({ + title: '提示', + content: `确定要删除该地址吗?`, + showCancel: true, + cancel: '取消', + cancelText: '拒绝', + confirmText: '同意', + confirmColor: colors.colorPrimary + }) + if (!res.confirm) return + + const { selectedId } = state await api.member.addressDelete(item.address_id) S.toast('删除成功') + if (selectedId === item.address_id) { - this.props.updateChooseAddress(null) + updateChooseAddress(null) } + setTimeout(() => { - this.fetch(true) + fetch(true) }, 700) } - wxAddress = () => { + const wxAddress = () => { Taro.navigateTo({ url: `/marketing/pages/member/edit-address?isWechatAddress=true` }) } - crmAddress = () => { + + const crmAddress = () => { Taro.navigateTo({ url: `/marketing/pages/member/crm-address-list?isCrmAddress=true` }) } - handleClickLeftIcon = () => { + const handleClickLeftIcon = () => { let CHECKOUT_PAGE = '/pages/cart/espier-checkout' const pages = getCurrentPages() if (pages.length > 1) { @@ -141,114 +154,127 @@ export default class AddressIndex extends Component { Taro.navigateBack() } - render() { - const { colors } = this.props - const { selectedId, isPicker, list, is_open_crmAddress } = this.state - return ( - - - {process.env.TARO_ENV === 'weapp' ? ( - - ) : ( - - )} + const { selectedId, isPicker, list } = state - - {list.map((item) => { - return ( - - {isPicker && !item.disabled && ( - - {item[ADDRESS_ID] === selectedId ? ( - - ) : ( - - {' '} - - )} - - )} + return ( + + + +新增地址 + + + } + > + + {process.env.TARO_ENV === 'weapp' ? ( + + ) : ( + + )} - - - {item.username} - {item.telephone} - + + {list?.map((item) => { + return ( + + + + {item.username} + {item.telephone} + + {item.province} {item.city} {item.county} {item.adrdetail} - - - {item.is_def ? ( + + {isPicker && !item.disabled && ( + handleClickChecked(e,item)}> + {item[ADDRESS_ID] === selectedId ? ( + + ) : ( + + {' '} + + )} + + )} + + + + handleChangeDefault(e, item)} + > + {item.is_def ? ( + <> {' '} - ) : ( - - )} - 设为默认 + 已设为默认 + + ) : ( + <> + + {' '} + + 设为默认 + + )} + + + handleDelete(e, item)}> + + 删除 - - - - 编辑 - - - - 删除 - + handleClickToEdit(e, item)}> + + 编辑 - ) - })} - - - 添加新地址 - - + + ) + })} - - ) - } + + + + ) } + +AddressIndex.options = { + addGlobalClass: true +} + +export default AddressIndex diff --git a/src/marketing/pages/member/address.scss b/src/marketing/pages/member/address.scss index 45601e7fd..84d70d5fb 100644 --- a/src/marketing/pages/member/address.scss +++ b/src/marketing/pages/member/address.scss @@ -2,16 +2,33 @@ .page-address-index { background: #f5f5f5; + padding: 20rpx 20rpx 0 20rpx; + .btn-wrap{ + padding: 20rpx 40rpx; + } .member-address-list { - padding: 53px 30px 120px 40px; + margin-top: 20rpx; + // padding: 53px 30px 120px 40px; /* #ifdef h5 */ padding: 48px 30px; /* #endif */ + + .address-item__content{ + .address-item__detail_box{ + display: flex; + justify-content: space-between; + border-bottom: 1px solid #e6e6e6; + .address-item__unchecked{ + margin-top: 0; + } + } + } + } .address-item { display: flex; justify-content: space-between; - margin-bottom: 48px; + margin-bottom: 30px; &.disabled { opacity: 0.6; } @@ -45,11 +62,16 @@ } &__info { margin-right: 20px; + &_tel{ + font-size: 19px; + color: #9d9d9d; + } } &__detail { + @include multi-ellipsis(2); + margin: 0 40rpx 17rpx 0; color: #0d0d0d; - padding-bottom: 14px; - border-bottom: 1px solid #e6e6e6; + } } .address-item__footer { @@ -60,6 +82,9 @@ &_default { display: flex; font-size: 23px; + .address-item__unchecked{ + margin: 0 14rpx 0 0; + } } .default__icon { margin-right: 14px; diff --git a/src/marketing/pages/member/edit-address.js b/src/marketing/pages/member/edit-address.js index eba55ea9f..9ee95d296 100644 --- a/src/marketing/pages/member/edit-address.js +++ b/src/marketing/pages/member/edit-address.js @@ -1,97 +1,86 @@ -import React, { Component } from 'react' +import React, { useEffect } from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { useImmer } from 'use-immer' import Taro, { getCurrentInstance } from '@tarojs/taro' -// import EditAddress from '@/components/new-address/edit-address' -import { View, Switch, Text, Picker, Button } from '@tarojs/components' -import { AtForm, AtInput } from 'taro-ui' -import { connect } from 'react-redux' -import { SpCell, SpToast, SpNavBar, SpAddress } from '@/components' +import { View, Switch, Text, Button } from '@tarojs/components' +import { AtInput, AtButton } from 'taro-ui' +import { SpCell, SpNavBar, SpAddress } from '@/components' import api from '@/api' import { isWxWeb } from '@/utils' import S from '@/spx' +import { useNavigation } from '@/hooks' import './edit-address.scss' -//转换属性 -const traverseData = (data) => { - let item = [] - data.forEach((d) => { - let newData = {} - newData.name = d.label - if (d.children) { - newData.subList = traverseData(d.children) - } - item.push(newData) - }) - return item +const initialState = { + info: {}, + listLength: 0, + areaArray: [[], [], []], + areaIndexArray: [0, 0, 0], + areaData: [], + chooseValue: ['', '', ''], + isOpened: false } -@connect(({ colors }) => ({ - colors: colors.current -}),(dispatch) => ({ - updateChooseAddress: (address) => +function AddressIndex(props) { + const $instance = getCurrentInstance() + const [state, setState] = useImmer(initialState) + const colors = useSelector((state) => state.colors.current) + const dispatch = useDispatch() + const { setNavigationBarTitle } = useNavigation() + + const updateChooseAddress = (address) => { dispatch({ type: 'user/updateChooseAddress', payload: address }) -})) -export default class AddressIndex extends Component { - $instance = getCurrentInstance() - constructor(props) { - super(props) - - this.state = { - info: {}, - listLength: 0, - areaArray: [[], [], []], - areaIndexArray: [0, 0, 0], - areaData: [], - chooseValue: ['北京市', '北京市', '昌平区'], - isOpened: false - // ubmitLoading: false, - } } - componentDidMount() { - this.fetchAddressList() - this.fetch() + useEffect(() => { + fetchAddressList() + fetch() + setNavigationBarTitle(initNavigationBarTitle()) + },[]) + + const initNavigationBarTitle = () => { + return $instance.router?.params?.address_id ? '编辑地址' : '新增地址' } - fetchAddressList = async () => { + const fetchAddressList = async () => { const areaData = await api.member.areaList() - this.setState({ - areaData + setState((draft) => { + draft.areaData = areaData }) } - async fetch() { + const fetch = async () => { Taro.showLoading({ title: '' }) const { list } = await api.member.addressList() - this.setState({ - listLength: list.length + setState((draft) => { + draft.listLength = list?.length }) list.map((a_item) => { - if (a_item.address_id === this.$instance.router.params.address_id) { - this.setState({ - info: a_item, - chooseValue: [a_item.province, a_item.city, a_item.county] + if (a_item.address_id === $instance.router?.params?.address_id) { + setState((draft) => { + ;(draft.info = a_item), + (draft.chooseValue = [a_item.province, a_item.city, a_item.county]) }) } }) - if (this.$instance.router.params.isWechatAddress) { + if ($instance.router?.params?.isWechatAddress) { try { const resAddress = await Taro.chooseAddress() const query = { - province: resAddress.provinceName, - city: resAddress.cityName, - county: resAddress.countyName, - adrdetail: resAddress.detailInfo, + province: resAddress?.provinceName, + city: resAddress?.cityName, + county: resAddress?.countyName, + adrdetail: resAddress?.detailInfo, is_def: 0, - postalCode: resAddress.postalCode, - telephone: resAddress.telNumber, - username: resAddress.userName + postalCode: resAddress?.postalCode, + telephone: resAddress?.telNumber, + username: resAddress?.userName } - this.setState({ - info: query, - chooseValue: [query.province, query.city, query.county] + setState((draft) => { + ;(draft.info = query), (draft.chooseValue = [query.province, query.city, query.county]) }) } catch (err) { console.error(err) @@ -102,56 +91,49 @@ export default class AddressIndex extends Component { Taro.hideLoading() } - onPickerClick = () => { - this.setState( - { - isOpened: true - } - ) - } - - handleClickClose = () => { - this.setState( - { - isOpened: false - } - ) - } - - onPickerChange = (selectValue) => { - // console.log(selectValue,'selectValue1111'); - const chooseValue = [selectValue[0].label,selectValue[1].label,selectValue[2].label] - this.setState({ - chooseValue + const onPickerClick = () => { + setState((draft) => { + draft.isOpened = true }) } - - - handleChange = (name, val) => { - const { info } = this.state - info[name] = val - this.setState({ - info + const handleClickClose = () => { + setState((draft) => { + draft.isOpened = false }) } - handleDefChange = (e) => { + const onPickerChange = (selectValue) => { + const chooseValue = [selectValue[0]?.label, selectValue[1]?.label, selectValue[2]?.label] + setState((draft) => { + draft.chooseValue = chooseValue + }) + } + + const handleChange = (name, val) => { + const nInfo = JSON.parse(JSON.stringify(state.info || {})) + nInfo[name] = val + setState((draft) => { + draft.info = nInfo + }) + } + + const handleDefChange = (e) => { const info = { - ...this.state.info, + ...state.info, is_def: e.detail.value ? 1 : 0 } - this.setState({ - info + setState((draft) => { + draft.info = info }) } - handleSubmit = async (e) => { + const handleSubmit = async (e) => { const { value } = e.detail || {} - const { chooseValue } = this.state + const { chooseValue } = state const data = { - ...this.state.info, + ...state.info, ...value } @@ -160,7 +142,7 @@ export default class AddressIndex extends Component { } else { data.is_def = '1' } - if (this.state.listLength === 0) { + if (state.listLength === 0) { data.is_def = '1' } @@ -172,11 +154,9 @@ export default class AddressIndex extends Component { return S.toast('请输入手机号') } - // if (!data.province) { data.province = chooseValue[0] data.city = chooseValue[1] data.county = chooseValue[2] - // } if (!data.adrdetail) { return S.toast('请输入详细地址') @@ -191,7 +171,7 @@ export default class AddressIndex extends Component { } else { S.toast('创建成功') } - this.props.updateChooseAddress(data) + updateChooseAddress(data) setTimeout(() => { Taro.navigateBack() }, 700) @@ -202,94 +182,119 @@ export default class AddressIndex extends Component { Taro.hideLoading() } - render() { - const { colors } = this.props - const { info, areaIndexArray, areaArray, chooseValue, isOpened } = this.state - return ( - - {/**/} - - - + const { info, chooseValue, isOpened } = state + + return ( + + + + handleChange('username', e)} /> + } + > + + handleChange('telephone', e)} /> - {/* - - 所在区域 - {chooseValue.join('') || '选择地区'} - - */} - - 所在区域 - {chooseValue.join('') || '选择地区'} + } + > + + + {chooseValue?.join('') === '' ? ( + 选择省/市/区 + ) : ( + {chooseValue?.join('/')} + )} - + } + > + + + handleChange('adrdetail', e)} /> - - + } + > - - - - - - - - {process.env.TARO_ENV === 'weapp' ? ( - - ) : ( - - )} - - - - + {/* + } + > */} - ) - } + + + + } + > + + + {/* + 保存并使用 + */} + + + + ) } + +AddressIndex.options = { + addGlobalClass: true +} + +export default AddressIndex diff --git a/src/marketing/pages/member/edit-address.scss b/src/marketing/pages/member/edit-address.scss index 054251ed7..19311c217 100644 --- a/src/marketing/pages/member/edit-address.scss +++ b/src/marketing/pages/member/edit-address.scss @@ -3,20 +3,24 @@ .page-address-edit { width: 100%; overflow-x: hidden; + padding: 24px $edge-size; + box-sizing: border-box; /* #ifdef h5 */ padding-top: $navigate-height-h5; /* #endif */ + .page-address-edit__form{ + padding-top: 0; + } + .sp-cell__ft { + color: #ccc; + } &__form { background: #fff; padding: $edge-size; margin: 0 0 $edge-margin; } .picker { - padding: 16px 0; - margin: 0 0 $edge-size; - display: flex; - justify-content: flex-start; - border-bottom: 1px solid rgba($color-brand-primary, 0.2); + width: 350px; &__title { font-size: $font-size; margin-right: 16px; @@ -32,4 +36,23 @@ color: #808080; } } + .submit-btn{ + border-radius: 5px; + font-size: 30px; + } + .logistics-no { + border-bottom:1rpx solid #e6e6e6; + .at-input { + margin-bottom: 0; + width: 350px; + padding: 0; + &:after { + border-color: transparent; + } + &__input { + padding-right: 0; + } + } + } + }