From 944d37b195220b54ee62644c58532f409443ac24 Mon Sep 17 00:00:00 2001 From: xiezhigang Date: Fri, 2 Dec 2022 16:25:11 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E3=80=90=E5=B0=8F=E7=A8=8B=E5=BA=8F?= =?UTF-8?q?=E3=80=91=E6=94=B6=E8=B4=A7=E5=9C=B0=E5=9D=80=E6=94=B9=E9=80=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/marketing/pages/member/address.js | 125 ++++++---- src/marketing/pages/member/address.scss | 33 ++- src/marketing/pages/member/edit-address.js | 233 +++++++++++-------- src/marketing/pages/member/edit-address.scss | 33 ++- 4 files changed, 268 insertions(+), 156 deletions(-) diff --git a/src/marketing/pages/member/address.js b/src/marketing/pages/member/address.js index 92e8d8580..3d47ddcc7 100644 --- a/src/marketing/pages/member/address.js +++ b/src/marketing/pages/member/address.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import Taro, { getCurrentInstance, getCurrentPages } from '@tarojs/taro' import { View, Text } from '@tarojs/components' +import { AtButton } from 'taro-ui' // import AddressList from '@/components/new-address/address' import { connect } from 'react-redux' import { SpToast, SpCell, SpNavBar, SpPage } from '@/components' @@ -34,11 +35,11 @@ export default class AddressIndex extends Component { } componentDidShow() { - this.fetch() + this.fetch() } - async fetch(isDelete = false) { - const { isPicker, receipt_type = '', city = '' } = this.$instance.router.params + async fetch(isDelete = false) { + const { isPicker, receipt_type = '', city = '' } = this.$instance.router.params if (isPicker) { this.setState({ isPicker: true @@ -107,9 +108,21 @@ export default class AddressIndex extends Component { } handleDelete = async (item) => { + const res = await Taro.showModal({ + title: '提示', + content: `确定要删除该地址吗?`, + showCancel: true, + cancel: '取消', + cancelText: '拒绝', + confirmText: '同意', + confirmColor: this.props.colors.colorPrimary + }) + if (!res.confirm) return + const { selectedId } = this.state await api.member.addressDelete(item.address_id) S.toast('删除成功') + if (selectedId === item.address_id) { this.props.updateChooseAddress(null) } @@ -145,7 +158,16 @@ export default class AddressIndex extends Component { const { colors } = this.props const { selectedId, isPicker, list, is_open_crmAddress } = this.state return ( - + + + +新增地址 + + + } + > {process.env.TARO_ENV === 'weapp' ? ( - {isPicker && !item.disabled && ( - - {item[ADDRESS_ID] === selectedId ? ( - - ) : ( - - {' '} - - )} - - )} - {item.username} - {item.telephone} + {item.telephone} - - {item.province} - {item.city} - {item.county} - {item.adrdetail} + + + {item.province} + {item.city} + {item.county} + {item.adrdetail} + + + {isPicker && !item.disabled && ( + + {item[ADDRESS_ID] === selectedId ? ( + + ) : ( + + {' '} + + )} + + )} + {item.is_def ? ( - - {' '} - + <> + + {' '} + + 已设为默认 + ) : ( - + <> + + {' '} + + 设为默认 + )} - 设为默认 + + + 删除 + 编辑 - - - 删除 - @@ -239,13 +274,13 @@ export default class AddressIndex extends Component { ) })} - 添加新地址 - + */} 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..a1d7e92c9 100644 --- a/src/marketing/pages/member/edit-address.js +++ b/src/marketing/pages/member/edit-address.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' 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 { AtForm, AtInput, AtButton } from 'taro-ui' import { connect } from 'react-redux' import { SpCell, SpToast, SpNavBar, SpAddress } from '@/components' import api from '@/api' @@ -25,12 +25,15 @@ const traverseData = (data) => { return item } -@connect(({ colors }) => ({ - colors: colors.current -}),(dispatch) => ({ - updateChooseAddress: (address) => - dispatch({ type: 'user/updateChooseAddress', payload: address }) -})) +@connect( + ({ colors }) => ({ + colors: colors.current + }), + (dispatch) => ({ + updateChooseAddress: (address) => + dispatch({ type: 'user/updateChooseAddress', payload: address }) + }) +) export default class AddressIndex extends Component { $instance = getCurrentInstance() constructor(props) { @@ -42,15 +45,22 @@ export default class AddressIndex extends Component { areaArray: [[], [], []], areaIndexArray: [0, 0, 0], areaData: [], - chooseValue: ['北京市', '北京市', '昌平区'], + chooseValue: ['', '', ''], isOpened: false // ubmitLoading: false, } } - componentDidMount() { - this.fetchAddressList() - this.fetch() + async componentDidMount() { + await this.fetchAddressList() + await this.fetch() + Taro.setNavigationBarTitle({ + title: this.setNavigationBarTitle() + }) + } + + setNavigationBarTitle = () => { + return this.state.info.user_id ? '编辑地址' : '新增地址' } fetchAddressList = async () => { @@ -103,31 +113,24 @@ export default class AddressIndex extends Component { } onPickerClick = () => { - this.setState( - { - isOpened: true - } - ) + this.setState({ + isOpened: true + }) } handleClickClose = () => { - this.setState( - { - isOpened: false - } - ) + this.setState({ + isOpened: false + }) } onPickerChange = (selectValue) => { - // console.log(selectValue,'selectValue1111'); - const chooseValue = [selectValue[0].label,selectValue[1].label,selectValue[2].label] + const chooseValue = [selectValue[0].label, selectValue[1].label, selectValue[2].label] this.setState({ chooseValue }) } - - handleChange = (name, val) => { const { info } = this.state info[name] = val @@ -205,90 +208,116 @@ export default class AddressIndex extends Component { render() { const { colors } = this.props const { info, areaIndexArray, areaArray, chooseValue, isOpened } = this.state + console.log('color', colors, info) return ( - {/**/} - - - - - - {/* + + + + } + > + + + } + > + + - 所在区域 - {chooseValue.join('') || '选择地区'} + {chooseValue.join('') === '' ? ( + 选择省/市/区 + ) : ( + {chooseValue.join('/')} + )} - */} - - 所在区域 - {chooseValue.join('') || '选择地区'} - - - - - + } + > + - - - - - + + } + > - - {process.env.TARO_ENV === 'weapp' ? ( - - ) : ( - - )} - - + {/* + } + > */} + - + + + } + > + + + {/* + 保存并使用 + */} + + ) } diff --git a/src/marketing/pages/member/edit-address.scss b/src/marketing/pages/member/edit-address.scss index 054251ed7..1fc2cc0fb 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:#d8d8d8 0.5px solid; + .at-input { + margin-bottom: 0; + width: 350px; + padding: 0; + &:after { + border-color: transparent; + } + &__input { + padding-right: 0; + } + } + } + } From 520057eaa4f536c85ea2e70f2d037e2e7f79cf71 Mon Sep 17 00:00:00 2001 From: xiezhigang Date: Fri, 2 Dec 2022 18:37:20 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E6=94=B6=E8=8E=B7=E5=9C=B0=E5=9D=80?= =?UTF-8?q?=E7=B1=BB=E7=BB=84=E4=BB=B6=E6=94=B9=E9=80=A0=E6=88=90=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/marketing/pages/member/address-fun.js | 297 ++++++++++++++++++++++ 1 file changed, 297 insertions(+) create mode 100644 src/marketing/pages/member/address-fun.js diff --git a/src/marketing/pages/member/address-fun.js b/src/marketing/pages/member/address-fun.js new file mode 100644 index 000000000..1c8b0be50 --- /dev/null +++ b/src/marketing/pages/member/address-fun.js @@ -0,0 +1,297 @@ +import React, { useEffect } from 'react' +import { useImmer } from 'use-immer' +import Taro, { getCurrentInstance, getCurrentPages } from '@tarojs/taro' +import { View, Text } from '@tarojs/components' +import { AtButton } from 'taro-ui' +// import AddressList from '@/components/new-address/address' +import { useDispatch, useSelector } from 'react-redux' +import { SpToast, SpCell, SpNavBar, SpPage } from '@/components' +import S from '@/spx' +import api from '@/api' + +import './address.scss' + +const ADDRESS_ID = 'address_id' + +const initialState = { + list: [], + isPicker: false, + selectedId: null +} + +function AddressIndex(props) { + const [state, setState] = useImmer(initialState) + const $instance = getCurrentInstance() + const colors = useSelector((state) => state.sys) + const {address} = useSelector((state) => state.user) + const dispatch = useDispatch() + + useEffect(() => { + debugger + fetch() + }, []) + + const updateChooseAddress = (address) =>{ + dispatch({ type: 'user/updateChooseAddress', payload: address }) + } + + + const fetch = async (isDelete = false)=> { + const { isPicker, receipt_type = '', city = '' } = $instance.router.params + if (isPicker) { + setState({ + isPicker: true + }) + } + Taro.showLoading({ title: '' }) + const { list } = await api.member.addressList() + Taro.hideLoading() + let newList = [...list] + if (receipt_type === 'dada' && city) { + newList = list + .map((item) => { + item.disabled = item.city !== city + return item + }) + .sort((first) => (first.disabled ? 1 : -1)) + } + let selectedId = null + if (address) { + selectedId = address[ADDRESS_ID] + } else { + selectedId = list.find((addr) => addr.is_def > 0) || null + } + setState({ + list: newList, + selectedId + }) + } + + const handleClickChecked = (e,item) => { + setState({ + selectedId: item[ADDRESS_ID] + }) + + updateChooseAddress(item) + setTimeout(() => { + Taro.navigateBack() + }, 700) + } + + const handleChangeDefault = async (e,item) => { + item.is_def = 1 + try { + await api.member.addressCreateOrUpdate(item) + if (item?.address_id) { + S.toast('修改成功') + } + + setTimeout(() => { + fetch() + }, 700) + } catch (error) { + return false + } + } + + const handleClickToEdit = (e,item) => { + console.log(123,e,item) + if (item?.address_id) { + Taro.navigateTo({ + url: `/marketing/pages/member/edit-address?address_id=${item.address_id}` + }) + } else { + Taro.navigateTo({ + url: '/marketing/pages/member/edit-address' + }) + } + } + + const handleDelete = async (e,item) => { + const res = await Taro.showModal({ + title: '提示', + content: `确定要删除该地址吗?`, + showCancel: true, + cancel: '取消', + cancelText: '拒绝', + confirmText: '同意', + confirmColor: colors.colorPrimary + }) + if (!res.confirm) return + + debugger + const { selectedId } = state + await api.member.addressDelete(item.address_id) + S.toast('删除成功') + + debugger + if (selectedId === item.address_id) { + updateChooseAddress(null) + } + + this.fetch(true) + + } + + const wxAddress = () => { + Taro.navigateTo({ + url: `/marketing/pages/member/edit-address?isWechatAddress=true` + }) + } + + const crmAddress = () => { + Taro.navigateTo({ + url: `/marketing/pages/member/crm-address-list?isCrmAddress=true` + }) + } + + const handleClickLeftIcon = () => { + let CHECKOUT_PAGE = '/pages/cart/espier-checkout' + const pages = getCurrentPages() + if (pages.length > 1) { + let { path } = pages[pages.length - 2] + if (CHECKOUT_PAGE == path.split('?')[0]) { + S.set('FROM_ADDRESS', true) + } + } + Taro.navigateBack() + } + + const { selectedId, isPicker, list } = state + + return ( + + + +新增地址 + + + } + > + + {process.env.TARO_ENV === 'weapp' ? ( + + ) : ( + + )} + + + {list.map((item) => { + return ( + + + + {item.username} + {item.telephone} + + + + {item.province} + {item.city} + {item.county} + {item.adrdetail} + + + {isPicker && !item.disabled && ( + + {item[ADDRESS_ID] === selectedId ? ( + + ) : ( + + {' '} + + )} + + )} + + + + handleChangeDefault(e,item)} + > + {item.is_def ? ( + <> + + {' '} + + 已设为默认 + + ) : ( + <> + + {' '} + + 设为默认 + + )} + + + handleDelete(e,item)}> + + 删除 + + handleClickToEdit(e,item)} + > + + 编辑 + + + + + + ) + })} + + {/* + 添加新地址 + */} + + + + ) + +} + +AddressIndex.options = { + addGlobalClass: true +} + +export default AddressIndex From 8654a6935e8253c122fcae6d60997a8306b4ed1d Mon Sep 17 00:00:00 2001 From: xzg666 <1563248070@qq.com> Date: Sat, 3 Dec 2022 16:58:22 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E6=94=B6=E8=8E=B7=E5=9C=B0=E5=9D=80?= =?UTF-8?q?=E7=B1=BB=E7=BB=84=E4=BB=B6=E6=94=B9=E9=80=A0=E6=88=90=E5=87=BD?= =?UTF-8?q?=E6=95=B0=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/marketing/pages/member/address-fun.js | 297 ----------------- src/marketing/pages/member/address.js | 326 +++++++++---------- src/marketing/pages/member/edit-address.js | 354 ++++++++++----------- 3 files changed, 323 insertions(+), 654 deletions(-) delete mode 100644 src/marketing/pages/member/address-fun.js diff --git a/src/marketing/pages/member/address-fun.js b/src/marketing/pages/member/address-fun.js deleted file mode 100644 index 1c8b0be50..000000000 --- a/src/marketing/pages/member/address-fun.js +++ /dev/null @@ -1,297 +0,0 @@ -import React, { useEffect } from 'react' -import { useImmer } from 'use-immer' -import Taro, { getCurrentInstance, getCurrentPages } from '@tarojs/taro' -import { View, Text } from '@tarojs/components' -import { AtButton } from 'taro-ui' -// import AddressList from '@/components/new-address/address' -import { useDispatch, useSelector } from 'react-redux' -import { SpToast, SpCell, SpNavBar, SpPage } from '@/components' -import S from '@/spx' -import api from '@/api' - -import './address.scss' - -const ADDRESS_ID = 'address_id' - -const initialState = { - list: [], - isPicker: false, - selectedId: null -} - -function AddressIndex(props) { - const [state, setState] = useImmer(initialState) - const $instance = getCurrentInstance() - const colors = useSelector((state) => state.sys) - const {address} = useSelector((state) => state.user) - const dispatch = useDispatch() - - useEffect(() => { - debugger - fetch() - }, []) - - const updateChooseAddress = (address) =>{ - dispatch({ type: 'user/updateChooseAddress', payload: address }) - } - - - const fetch = async (isDelete = false)=> { - const { isPicker, receipt_type = '', city = '' } = $instance.router.params - if (isPicker) { - setState({ - isPicker: true - }) - } - Taro.showLoading({ title: '' }) - const { list } = await api.member.addressList() - Taro.hideLoading() - let newList = [...list] - if (receipt_type === 'dada' && city) { - newList = list - .map((item) => { - item.disabled = item.city !== city - return item - }) - .sort((first) => (first.disabled ? 1 : -1)) - } - let selectedId = null - if (address) { - selectedId = address[ADDRESS_ID] - } else { - selectedId = list.find((addr) => addr.is_def > 0) || null - } - setState({ - list: newList, - selectedId - }) - } - - const handleClickChecked = (e,item) => { - setState({ - selectedId: item[ADDRESS_ID] - }) - - updateChooseAddress(item) - setTimeout(() => { - Taro.navigateBack() - }, 700) - } - - const handleChangeDefault = async (e,item) => { - item.is_def = 1 - try { - await api.member.addressCreateOrUpdate(item) - if (item?.address_id) { - S.toast('修改成功') - } - - setTimeout(() => { - fetch() - }, 700) - } catch (error) { - return false - } - } - - const handleClickToEdit = (e,item) => { - console.log(123,e,item) - if (item?.address_id) { - Taro.navigateTo({ - url: `/marketing/pages/member/edit-address?address_id=${item.address_id}` - }) - } else { - Taro.navigateTo({ - url: '/marketing/pages/member/edit-address' - }) - } - } - - const handleDelete = async (e,item) => { - const res = await Taro.showModal({ - title: '提示', - content: `确定要删除该地址吗?`, - showCancel: true, - cancel: '取消', - cancelText: '拒绝', - confirmText: '同意', - confirmColor: colors.colorPrimary - }) - if (!res.confirm) return - - debugger - const { selectedId } = state - await api.member.addressDelete(item.address_id) - S.toast('删除成功') - - debugger - if (selectedId === item.address_id) { - updateChooseAddress(null) - } - - this.fetch(true) - - } - - const wxAddress = () => { - Taro.navigateTo({ - url: `/marketing/pages/member/edit-address?isWechatAddress=true` - }) - } - - const crmAddress = () => { - Taro.navigateTo({ - url: `/marketing/pages/member/crm-address-list?isCrmAddress=true` - }) - } - - const handleClickLeftIcon = () => { - let CHECKOUT_PAGE = '/pages/cart/espier-checkout' - const pages = getCurrentPages() - if (pages.length > 1) { - let { path } = pages[pages.length - 2] - if (CHECKOUT_PAGE == path.split('?')[0]) { - S.set('FROM_ADDRESS', true) - } - } - Taro.navigateBack() - } - - const { selectedId, isPicker, list } = state - - return ( - - - +新增地址 - - - } - > - - {process.env.TARO_ENV === 'weapp' ? ( - - ) : ( - - )} - - - {list.map((item) => { - return ( - - - - {item.username} - {item.telephone} - - - - {item.province} - {item.city} - {item.county} - {item.adrdetail} - - - {isPicker && !item.disabled && ( - - {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.js b/src/marketing/pages/member/address.js index 3d47ddcc7..b9b497426 100644 --- a/src/marketing/pages/member/address.js +++ b/src/marketing/pages/member/address.js @@ -1,9 +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 { AtButton } from 'taro-ui' -// import AddressList from '@/components/new-address/address' -import { connect } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import { SpToast, SpCell, SpNavBar, SpPage } from '@/components' import S from '@/spx' import api from '@/api' @@ -12,36 +12,31 @@ 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 [state, setState] = useImmer(initialState) + const $instance = getCurrentInstance() + 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({ + setState({ isPicker: true }) } @@ -58,45 +53,47 @@ 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({ + setState({ list: newList, selectedId }) } - handleClickChecked = (item) => { - this.setState({ + const handleClickChecked = (e, item) => { + setState({ selectedId: item[ADDRESS_ID] }) - this.props.updateChooseAddress(item) + updateChooseAddress(item) setTimeout(() => { Taro.navigateBack() }, 700) } - handleChangeDefault = async (item) => { + const handleChangeDefault = async (e, item) => { item.is_def = 1 try { await api.member.addressCreateOrUpdate(item) - if (item.address_id) { + 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) => { + console.log(123, e, item) + if (item?.address_id) { Taro.navigateTo({ url: `/marketing/pages/member/edit-address?address_id=${item.address_id}` }) @@ -107,7 +104,7 @@ export default class AddressIndex extends Component { } } - handleDelete = async (item) => { + const handleDelete = async (e, item) => { const res = await Taro.showModal({ title: '提示', content: `确定要删除该地址吗?`, @@ -115,34 +112,36 @@ export default class AddressIndex extends Component { cancel: '取消', cancelText: '拒绝', confirmText: '同意', - confirmColor: this.props.colors.colorPrimary + confirmColor: colors.colorPrimary }) if (!res.confirm) return - const { selectedId } = this.state + 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) { @@ -154,136 +153,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 ( - - - - {item.username} - {item.telephone} - - - - {item.province} - {item.city} - {item.county} - {item.adrdetail} - + return ( + + + +新增地址 + + + } + > + + {process.env.TARO_ENV === 'weapp' ? ( + + ) : ( + + )} - {isPicker && !item.disabled && ( - - {item[ADDRESS_ID] === selectedId ? ( - - ) : ( - - {' '} - - )} - - )} + + {list.map((item) => { + return ( + + + + {item.username} + {item.telephone} + + + + {item.province} + {item.city} + {item.county} + {item.adrdetail} - - - {item.is_def ? ( - <> - - {' '} - - 已设为默认 - + {isPicker && !item.disabled && ( + + {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/edit-address.js b/src/marketing/pages/member/edit-address.js index a1d7e92c9..f9e9a9786 100644 --- a/src/marketing/pages/member/edit-address.js +++ b/src/marketing/pages/member/edit-address.js @@ -1,107 +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, AtButton } 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 './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) => - dispatch({ type: 'user/updateChooseAddress', payload: address }) - }) -) -export default class AddressIndex extends Component { - $instance = getCurrentInstance() - constructor(props) { - super(props) +function AddressIndex(props) { + const $instance = getCurrentInstance() + const [state, setState] = useImmer(initialState) + const colors = useSelector((state) => state.colors.current) + const dispatch = useDispatch() - this.state = { - info: {}, - listLength: 0, - areaArray: [[], [], []], - areaIndexArray: [0, 0, 0], - areaData: [], - chooseValue: ['', '', ''], - isOpened: false - // ubmitLoading: false, - } + const updateChooseAddress = (address) => { + dispatch({ type: 'user/updateChooseAddress', payload: address }) } - async componentDidMount() { - await this.fetchAddressList() - await this.fetch() + useEffect(() => { + fetchAddressList() + fetch() Taro.setNavigationBarTitle({ - title: this.setNavigationBarTitle() + title: setNavigationBarTitle() }) + },[]) + + const setNavigationBarTitle = () => { + return $instance.router?.params?.address_id ? '编辑地址' : '新增地址' } - setNavigationBarTitle = () => { - return this.state.info.user_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) @@ -112,49 +91,49 @@ export default class AddressIndex extends Component { Taro.hideLoading() } - onPickerClick = () => { - this.setState({ - isOpened: true + const onPickerClick = () => { + setState((draft) => { + draft.isOpened = true }) } - handleClickClose = () => { - this.setState({ - isOpened: false + const handleClickClose = () => { + setState((draft) => { + draft.isOpened = false }) } - onPickerChange = (selectValue) => { - const chooseValue = [selectValue[0].label, selectValue[1].label, selectValue[2].label] - this.setState({ - chooseValue + const onPickerChange = (selectValue) => { + const chooseValue = [selectValue[0]?.label, selectValue[1]?.label, selectValue[2]?.label] + setState((draft) => { + draft.chooseValue = chooseValue }) } - handleChange = (name, val) => { - const { info } = this.state - info[name] = val - this.setState({ - info + const handleChange = (name, val) => { + const nInfo = JSON.parse(JSON.stringify(state.info || {})) + nInfo[name] = val + setState((draft) => { + draft.info = nInfo }) } - handleDefChange = (e) => { + 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 } @@ -163,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' } @@ -175,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('请输入详细地址') @@ -194,7 +171,7 @@ export default class AddressIndex extends Component { } else { S.toast('创建成功') } - this.props.updateChooseAddress(data) + updateChooseAddress(data) setTimeout(() => { Taro.navigateBack() }, 700) @@ -205,74 +182,68 @@ export default class AddressIndex extends Component { Taro.hideLoading() } - render() { - const { colors } = this.props - const { info, areaIndexArray, areaArray, chooseValue, isOpened } = this.state - console.log('color', colors, info) - return ( - - - - - } - > + const { info, chooseValue, isOpened } = state - - } - > + return ( + + + + handleChange('username', e)} + /> + } + > - - {chooseValue.join('') === '' ? ( - 选择省/市/区 - ) : ( - {chooseValue.join('/')} - )} - - } - > - + handleChange('telephone', e)} + /> + } + > - - } - > + + {chooseValue?.join('') === '' ? ( + 选择省/市/区 + ) : ( + {chooseValue?.join('/')} + )} + + } + > + - {/* handleChange('adrdetail', e)} + /> + } + > + + {/* } > */} - + - - - } - > - - - {/* + + } + > + + + {/* 保存并使用 */} - - + - ) - } + + ) } + +AddressIndex.options = { + addGlobalClass: true +} + +export default AddressIndex From af0ea8e11d13029732fc313480bc9529e7290e6d Mon Sep 17 00:00:00 2001 From: xiezhigang Date: Mon, 5 Dec 2022 11:19:33 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E5=88=87=E6=8D=A2=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E5=9C=B0=E5=9D=80bug=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/marketing/pages/member/address.js | 27 ++++++++++---------- src/marketing/pages/member/edit-address.scss | 2 +- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/marketing/pages/member/address.js b/src/marketing/pages/member/address.js index b9b497426..eebf7725c 100644 --- a/src/marketing/pages/member/address.js +++ b/src/marketing/pages/member/address.js @@ -19,8 +19,8 @@ const initialState = { } function AddressIndex(props) { - const [state, setState] = useImmer(initialState) const $instance = getCurrentInstance() + const [state, setState] = useImmer(initialState) const colors = useSelector((state) => state.sys) const { address } = useSelector((state) => state.user) const dispatch = useDispatch() @@ -36,8 +36,8 @@ function AddressIndex(props) { const fetch = async (isDelete = false) => { const { isPicker, receipt_type = '', city = '' } = $instance.router.params if (isPicker) { - setState({ - isPicker: true + setState(draft=>{ + draft.isPicker = true }) } Taro.showLoading({ title: '' }) @@ -58,15 +58,16 @@ function AddressIndex(props) { } else { selectedId = list.find((addr) => addr.is_def > 0) || null } - setState({ - list: newList, - selectedId + setState(draft=>{ + draft.list = newList, + draft.selectedId = selectedId }) } const handleClickChecked = (e, item) => { - setState({ - selectedId: item[ADDRESS_ID] + + setState(draft=>{ + draft.selectedId = item[ADDRESS_ID] }) updateChooseAddress(item) @@ -76,9 +77,10 @@ function AddressIndex(props) { } const handleChangeDefault = async (e, item) => { - item.is_def = 1 + const nItem = JSON.parse(JSON.stringify(item)) + nItem.is_def = 1 try { - await api.member.addressCreateOrUpdate(item) + await api.member.addressCreateOrUpdate(nItem) if (item?.address_id) { S.toast('修改成功') } @@ -92,7 +94,6 @@ function AddressIndex(props) { } const handleClickToEdit = (e, item) => { - console.log(123, e, item) if (item?.address_id) { Taro.navigateTo({ url: `/marketing/pages/member/edit-address?address_id=${item.address_id}` @@ -185,7 +186,7 @@ function AddressIndex(props) { )} - {list.map((item) => { + {list?.map((item) => { return ( {isPicker && !item.disabled && ( - + handleClickChecked(e,item)}> {item[ADDRESS_ID] === selectedId ? ( Date: Mon, 5 Dec 2022 14:02:21 +0800 Subject: [PATCH 5/5] =?UTF-8?q?useNavigation=20hook=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/marketing/pages/member/edit-address.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/marketing/pages/member/edit-address.js b/src/marketing/pages/member/edit-address.js index f9e9a9786..9ee95d296 100644 --- a/src/marketing/pages/member/edit-address.js +++ b/src/marketing/pages/member/edit-address.js @@ -8,6 +8,7 @@ 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' @@ -26,6 +27,7 @@ function AddressIndex(props) { 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 }) @@ -34,12 +36,10 @@ function AddressIndex(props) { useEffect(() => { fetchAddressList() fetch() - Taro.setNavigationBarTitle({ - title: setNavigationBarTitle() - }) + setNavigationBarTitle(initNavigationBarTitle()) },[]) - const setNavigationBarTitle = () => { + const initNavigationBarTitle = () => { return $instance.router?.params?.address_id ? '编辑地址' : '新增地址' }