diff --git a/src/components/index.js b/src/components/index.js
index d7c996d44..16e12da3f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -83,6 +83,7 @@ import SpCustomNavigation from './sp-custom-navigation'
import SpUpload from './sp-upload'
import SpPicker from './sp-picker'
import SpPickerAddress from './sp-picker-address'
+import SpNumberKeyBoard from './sp-numberkeyboard'
export default {}
@@ -171,5 +172,6 @@ export {
SpCustomNavigation,
SpUpload,
SpPicker,
- SpPickerAddress
+ SpPickerAddress,
+ SpNumberKeyBoard
}
diff --git a/src/components/sp-float-layout/index.scss b/src/components/sp-float-layout/index.scss
index fe22841bd..77097070e 100644
--- a/src/components/sp-float-layout/index.scss
+++ b/src/components/sp-float-layout/index.scss
@@ -31,10 +31,10 @@
opacity: 1;
}
#{$self}__body {
- opacity: 1;
- visibility: visible;
+ // opacity: 1;
+ // visibility: visible;
transform: translate3D(0, 0, 0);
- transition-delay: 0s;
+ transition-delay: 0.3s;
}
}
diff --git a/src/components/sp-numberkeyboard/index copy.js b/src/components/sp-numberkeyboard/index copy.js
new file mode 100644
index 000000000..a3d88069d
--- /dev/null
+++ b/src/components/sp-numberkeyboard/index copy.js
@@ -0,0 +1,159 @@
+import Taro, { Component } from '@tarojs/taro'
+import { Text } from '@tarojs/components'
+import { classNames, isNumber, vaildPrice } from '@/utils'
+
+import './index.scss'
+import { SwPrice } from '..'
+
+const ret = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
+export default class SwNumberKeyBoard extends Component {
+ static options = {
+ addGlobalClass: true
+ }
+
+ static defaultProps = {
+ className: null,
+ maxValue: 0,
+ value: 0,
+ onClose: () => {}
+ }
+
+ constructor(props) {
+ super(props)
+ this.state = {
+ currentValue: '0'
+ }
+ }
+
+ handleClickItem = (key) => {
+ let _currentValue = this.state.currentValue
+ if (isNumber(key) || key == '.') {
+ _currentValue = `${_currentValue == '0' ? '' : _currentValue}${key}`
+ }
+
+ if (
+ !/\./.test(_currentValue) || // 首位不含.
+ (!/^\./.test(_currentValue) && //
+ !/\.\d{3}/.test(_currentValue) &&
+ _currentValue.match(/\./g).length <= 1)
+ ) {
+ this.setState({
+ currentValue: _currentValue
+ })
+ }
+
+ switch (key) {
+ case 'close':
+ this.props.onClose()
+ break
+ case 'clear':
+ this.setState({
+ currentValue: '0'
+ })
+ break
+ case 'ok':
+ this.props.onConfirm(_currentValue)
+ break
+ default:
+ break
+ }
+ }
+
+ // 使用全部
+ handleClickUseAll() {
+ const { maxValue } = this.props
+ this.setState({
+ currentValue: maxValue.toString()
+ })
+ }
+
+ isDisabled() {
+ const { currentValue } = this.state
+ const { maxValue } = this.props
+ return !(ret.test(this.state.currentValue) && parseFloat(currentValue) <= maxValue)
+ }
+
+ render() {
+ const { maxValue, value } = this.props
+ const { currentValue } = this.state
+ return (
+
+
+
+ 可用余额:
+
+ 全部使用
+
+
+ {currentValue}
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
+
+
+ 清除
+
+
+
+
+
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+
+
+ .
+
+
+ 0
+
+
+ 关闭
+
+
+
+
+
+ 确定
+
+
+
+
+ )
+ }
+}
diff --git a/src/components/sp-numberkeyboard/index.js b/src/components/sp-numberkeyboard/index.js
new file mode 100644
index 000000000..0c65fa694
--- /dev/null
+++ b/src/components/sp-numberkeyboard/index.js
@@ -0,0 +1,154 @@
+import React, { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { useImmer } from 'use-immer'
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import { classNames, isNumber } from '@/utils'
+import './index.scss'
+
+
+const ret = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
+const initialState = {
+ currentValue: 0
+}
+
+function SpNumberKeyBoard(props) {
+ const {
+ maxValue = 0,
+ value = 0, onClose = () => {}, onConfirm = () => {} } = props
+ const [state, setState] = useImmer(initialState)
+ const { currentValue } = state
+
+ const handleClickItem = (key) => {
+ let _currentValue = currentValue
+ if (isNumber(key)) {
+ _currentValue = `${_currentValue == '0' ? '' : _currentValue}${key}`
+ }
+
+
+ if (
+ !/\./.test(_currentValue) || // 首位不含.
+ (!/^\./.test(_currentValue) && //
+ !/\.\d{3}/.test(_currentValue) &&
+ _currentValue.match(/\./g).length <= 1)
+ ) {
+ setState((draft) => {
+ draft.currentValue = _currentValue
+ })
+ }
+
+ switch (key) {
+ case 'close':
+ onClose()
+ break
+ case 'clear':
+ setState((draft) => {
+ draft.currentValue = '0'
+ })
+ break
+ case 'ok':
+ if(!isDisabled()) {
+ onConfirm(_currentValue)
+ }
+ break
+ case 'all':
+ setState((draft) => {
+ draft.currentValue = maxValue
+ })
+ break
+ default:
+ break
+ }
+ }
+
+ const isDisabled = () => {
+ console.log(ret.test(currentValue), parseFloat(currentValue) <= maxValue)
+ return !(currentValue == '0' || (ret.test(currentValue) && parseFloat(currentValue) <= maxValue))
+ }
+
+ return (
+
+
+
+ {/* 可用余额:
+
+ 全部使用
+ */}
+
+ {currentValue}
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
+
+
+ 清除
+
+
+
+
+
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+
+
+ 全部使用
+
+
+ 0
+
+
+ 关闭
+
+
+
+
+
+ 确定
+
+
+
+
+ )
+}
+
+SpNumberKeyBoard.options = {
+ addGlobalClass: true
+}
+
+export default SpNumberKeyBoard
diff --git a/src/components/sp-numberkeyboard/index.scss b/src/components/sp-numberkeyboard/index.scss
new file mode 100644
index 000000000..1a7f30cb8
--- /dev/null
+++ b/src/components/sp-numberkeyboard/index.scss
@@ -0,0 +1,87 @@
+.sp-number-keyboard {
+ .display-col {
+ padding: 10px;
+ background: #fff;
+ /* prettier-ignore */
+ border-bottom: 1PX solid $color-border-gray-light;
+ position: relative;
+ .title {
+ margin-bottom: 10px;
+ }
+ .display-con {
+ background: $color-border-gray-light;
+ height: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 10px 20px;
+ font-size: 48px;
+ font-family: DINPro-Medium, DIN Alternate, Helvetica Neue, Helvetica, PingFang SC,
+ Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
+ // .sw-price__symbol {
+ // font-size: 36px;
+ // }
+ // .sw-price__int {
+ // font-size: 48px;
+ // }
+ // .sw-price__decimal {
+ // font-size: 44px;
+ // }
+ }
+ }
+ .all-use {
+ font-size: 26px;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ color: var(--color-primary);
+ }
+ .row {
+ display: flex;
+ .keyboard {
+ flex: 1;
+ height: 120px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 40px;
+ font-family: DINPro-Medium, DIN Alternate, Helvetica Neue, Helvetica, PingFang SC,
+ Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
+ }
+ }
+ .row-root {
+ display: flex;
+ .col {
+ &:first-child {
+ width: 75%;
+ .keyboard {
+ /* prettier-ignore */
+ border-bottom: 1PX solid $color-border-gray-light;
+ /* prettier-ignore */
+ border-right: 1PX solid $color-border-gray-light;
+ }
+ }
+ &:last-child {
+ width: 25%;
+ .keyboard {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+ }
+ .btn-ok__con {
+ background: var(--color-primary);
+ color: #fff;
+ &.disabled {
+ background: $color-hint-text;
+ color: $color-disabled-text;
+ }
+ }
+ }
+ .word {
+ font-size: 32px !important;
+ }
+}
diff --git a/src/pages/cart/comps/comp-pointuse copy.js b/src/pages/cart/comps/comp-pointuse copy.js
new file mode 100644
index 000000000..e9bf07b47
--- /dev/null
+++ b/src/pages/cart/comps/comp-pointuse copy.js
@@ -0,0 +1,173 @@
+import React, { useEffect } from 'react'
+import { useImmer } from 'use-immer'
+import { AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtButton } from 'taro-ui'
+import { useSelector } from 'react-redux'
+import { SpCheckbox, SpFloatLayout } from '@/components'
+import { View, Text, Button } from '@tarojs/components'
+
+import './comp-pointuse.scss'
+
+const initialState = {
+ isOpenRule: false,
+ point: null,
+ localType: null,
+ chenckColors: 'none'
+}
+
+function CompPointUse(props) {
+ const [state, setState] = useImmer(initialState)
+ const { info, isOpened, loading, type, defalutPaytype, onChange, onClose } = props
+ const { pointName } = useSelector((state) => state.sys)
+ const { localType, point, isOpenRule, chenckColors } = state
+
+ useEffect(() => {
+ setState((draf) => {
+ draf.localType = type
+ })
+ }, [type])
+
+ const handleCancel = () => {
+ setState((draf) => {
+ draf.localType = type
+ draf.isOpened = false
+ draf.point = null
+ })
+ onClose()
+ }
+ const handleRuleOpen = (isOpenRule) => {
+ setState((draf) => {
+ draf.isOpenRule = isOpenRule
+ })
+ }
+
+ const handlePointChange = (value) => {
+ const max_point = Number(info.max_point)
+ if (value >= max_point) {
+ setState((draf) => {
+ draf.localType = info.deduct_point_rule.full_amount ? 'point' : defalutPaytype
+ draf.point = max_point
+ })
+ return max_point
+ }
+ setState((draf) => {
+ draf.localType = info.deduct_point_rule.full_amount
+ ? Number(value) === max_point
+ ? 'point'
+ : defalutPaytype
+ : defalutPaytype
+ draf.point = Number(value) > max_point ? max_point : value
+ })
+ }
+
+ const handleUseFullAmount = (checked) => {
+ setState((draf) => {
+ draf.point = checked ? info.max_point : ''
+ draf.disabledPoint = checked
+ draf.localType = checked ? 'point' : localType
+ draf.chenckColors = checked ? 'var(--color-primary)' : ''
+ })
+ }
+
+ const handleChange = () => {
+ handleCancel()
+ onChange(point, localType)
+ }
+
+ if (!info) {
+ return null
+ }
+ const { deduct_point_rule = {} } = info
+ console.log(chenckColors, 'chenckColors')
+ return (
+
+
+ 确定
+
+ }
+ >
+
+
+ {pointName}
+ handleRuleOpen(true)}>
+ 使用规则
+
+
+
+
+
+ {`用户可用${pointName}：`}
+ {info.user_point}
+
+
+ {`本单最大可用${pointName}：`}
+ {info.max_point}
+
+
+ {`请输入抵扣${pointName}`}
+
+ = info.max_point ? info.max_point : point
+ // info.real_use_point
+ // ? info.real_use_point < info.point_use
+ // ? info.real_use_point
+ // : info.point_use
+ // : null
+ }
+ disabled={point >= info.max_point}
+ onChange={handlePointChange}
+ />
+
+
+
+ {deduct_point_rule && deduct_point_rule.full_amount && info.max_point > 0 && (
+
+
+
+ 全额抵扣
+
+
+
+ )}
+
+
+
+
+ 积分使用规则
+
+ 使用条件
+
+ {`1.${pointName}支付不得超出订单应付总金额的 ${deduct_point_rule.deduct_proportion_limit}%；`}
+
+ 使用数量
+ {`2.${deduct_point_rule.deduct_point} ${pointName}抵 1 元；`}
+
+
+
+
+
+
+ )
+}
+
+CompPointUse.defaultProps = {
+ isOpened: false,
+ disabledPoint: false,
+ onClose: () => {}
+}
+
+CompPointUse.addGlobalClass = {
+ addGlobalClass: true
+}
+
+export default CompPointUse
diff --git a/src/pages/cart/comps/comp-pointuse.js b/src/pages/cart/comps/comp-pointuse.js
index e9bf07b47..0910483a5 100644
--- a/src/pages/cart/comps/comp-pointuse.js
+++ b/src/pages/cart/comps/comp-pointuse.js
@@ -2,158 +2,58 @@ import React, { useEffect } from 'react'
import { useImmer } from 'use-immer'
import { AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtButton } from 'taro-ui'
import { useSelector } from 'react-redux'
-import { SpCheckbox, SpFloatLayout } from '@/components'
+import { SpNumberKeyBoard, SpFloatLayout } from '@/components'
import { View, Text, Button } from '@tarojs/components'
import './comp-pointuse.scss'
const initialState = {
- isOpenRule: false,
- point: null,
- localType: null,
- chenckColors: 'none'
+ isOpenRule: false
}
function CompPointUse(props) {
const [state, setState] = useImmer(initialState)
- const { info, isOpened, loading, type, defalutPaytype, onChange, onClose } = props
+ const { info, isOpened, onClose, onChange } = props
const { pointName } = useSelector((state) => state.sys)
- const { localType, point, isOpenRule, chenckColors } = state
+ const { isOpenRule } = state
- useEffect(() => {
- setState((draf) => {
- draf.localType = type
- })
- }, [type])
-
- const handleCancel = () => {
- setState((draf) => {
- draf.localType = type
- draf.isOpened = false
- draf.point = null
- })
- onClose()
- }
- const handleRuleOpen = (isOpenRule) => {
- setState((draf) => {
- draf.isOpenRule = isOpenRule
- })
- }
-
- const handlePointChange = (value) => {
- const max_point = Number(info.max_point)
- if (value >= max_point) {
- setState((draf) => {
- draf.localType = info.deduct_point_rule.full_amount ? 'point' : defalutPaytype
- draf.point = max_point
- })
- return max_point
- }
- setState((draf) => {
- draf.localType = info.deduct_point_rule.full_amount
- ? Number(value) === max_point
- ? 'point'
- : defalutPaytype
- : defalutPaytype
- draf.point = Number(value) > max_point ? max_point : value
- })
- }
-
- const handleUseFullAmount = (checked) => {
- setState((draf) => {
- draf.point = checked ? info.max_point : ''
- draf.disabledPoint = checked
- draf.localType = checked ? 'point' : localType
- draf.chenckColors = checked ? 'var(--color-primary)' : ''
- })
- }
-
- const handleChange = () => {
- handleCancel()
- onChange(point, localType)
- }
if (!info) {
return null
}
- const { deduct_point_rule = {} } = info
- console.log(chenckColors, 'chenckColors')
- return (
-
-
- 确定
-
- }
- >
-
-
- {pointName}
- handleRuleOpen(true)}>
- 使用规则
-
-
-
-
-
- {`用户可用${pointName}：`}
- {info.user_point}
-
-
- {`本单最大可用${pointName}：`}
- {info.max_point}
-
-
- {`请输入抵扣${pointName}`}
-
- = info.max_point ? info.max_point : point
- // info.real_use_point
- // ? info.real_use_point < info.point_use
- // ? info.real_use_point
- // : info.point_use
- // : null
- }
- disabled={point >= info.max_point}
- onChange={handlePointChange}
- />
-
-
- {deduct_point_rule && deduct_point_rule.full_amount && info.max_point > 0 && (
-
-
-
- 全额抵扣
-
-
-
- )}
-
+ const { deduct_point_rule = {} } = info
+
+ return (
+
+
+
+ {`可用${pointName}：${info.user_point}，本单可用${pointName}：${info.max_point}`}
+ {
+ setState((draf) => {
+ draf.isOpenRule = true
+ })
+ }}>使用规则
+
+
积分使用规则
使用条件
- {`1.${pointName}支付不得超出订单应付总金额的 ${deduct_point_rule.deduct_proportion_limit}%；`}
+ {`1. ${pointName}支付不得超出订单应付总金额的${deduct_point_rule.deduct_proportion_limit}%；`}
使用数量
- {`2.${deduct_point_rule.deduct_point} ${pointName}抵 1 元；`}
+ {`2. ${deduct_point_rule.deduct_point}${pointName}抵1元；`}
-
+
diff --git a/src/pages/cart/comps/comp-pointuse.scss b/src/pages/cart/comps/comp-pointuse.scss
index 0cdb34d80..908512be1 100644
--- a/src/pages/cart/comps/comp-pointuse.scss
+++ b/src/pages/cart/comps/comp-pointuse.scss
@@ -1,6 +1,16 @@
-@import '@/style/imports';
-
.comp-pointuse {
+ .point-hd {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 30px 20px 0;
+ }
+ .point-info {
+ color: #666;
+ }
+ .point-rule {
+ color: var(--color-primary)
+ }
&__hd {
background: #fff;
height: 95px;
diff --git a/src/pages/cart/espier-checkout.js b/src/pages/cart/espier-checkout.js
index 1e4641141..07787c45f 100644
--- a/src/pages/cart/espier-checkout.js
+++ b/src/pages/cart/espier-checkout.js
@@ -2,7 +2,16 @@ import React, { useEffect, useRef } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { AtButton, AtInput } from 'taro-ui'
-import { SpPage, SpPrice, SpCell, SpOrderItem, SpCashier, SpGoodsCell } from '@/components'
+import {
+ SpPage,
+ SpPrice,
+ SpCell,
+ SpOrderItem,
+ SpCashier,
+ SpGoodsCell,
+ SpFloatLayout,
+ SpNumberKeyBoard
+} from '@/components'
import { View, Text, Picker } from '@tarojs/components'
import { changeCoupon } from '@/store/slices/cart'
import { updateChooseAddress } from '@/store/slices/user'
@@ -19,7 +28,8 @@ import {
isAPP,
log,
VERSION_STANDARD,
- VERSION_PLATFORM
+ VERSION_PLATFORM,
+ VERSION_IN_PURCHASE
} from '@/utils'
import { useAsyncCallback, useLogin, usePayment } from '@/hooks'
import { PAYMENT_TYPE, TRANSFORM_PAYTYPE } from '@/consts'
@@ -132,12 +142,12 @@ function CartCheckout(props) {
}, [address, coupon, payType, shop.zitiShop, point_use])
useEffect(() => {
- if (isPackageOpend || openCashier) {
+ if (isPackageOpend || openCashier || isPointOpenModal) {
pageRef.current.pageLock()
} else {
pageRef.current.pageUnLock()
}
- }, [isPackageOpend, openCashier])
+ }, [isPackageOpend, openCashier, isPointOpenModal])
// 是否需要包装
const getTradeSetting = async () => {
@@ -147,33 +157,9 @@ function CartCheckout(props) {
})
}
- // 选择是否需要包装
- const changeNeedPackage = (isNeedPackage) => {
- setState((draft) => {
- draft.isNeedPackage = isNeedPackage
- draft.isPackageOpend = false
- })
- }
-
- const handlePointClick = () => {
- setState((draft) => {
- draft.isPointOpenModal = true
- })
- }
-
- const resetPoint = (e) => {
- e.stopPropagation()
- setState((draft) => {
- draft.point_use = 0
- draft.pointInfo = { ...pointInfo, point_use: 0 }
- draft.payType = defalutPaytype
- })
- }
-
- const handlePointUseChange = (point_use, payType) => {
+ const handlePointUseChange = (point_use) => {
setState((draft) => {
draft.point_use = point_use
- draft.payType = payType
draft.isPointOpenModal = false
})
}
@@ -584,7 +570,6 @@ function CartCheckout(props) {
}
const point_info = {
- ...pointInfo,
deduct_point_rule,
is_open_deduct_point,
user_point, //用户现有积分
@@ -930,20 +915,19 @@ function CartCheckout(props) {
)}
- {VERSION_STANDARD && pointInfo.is_open_deduct_point && (
+ {!VERSION_IN_PURCHASE && pointInfo?.is_open_deduct_point && (
{
+ setState((draft) => {
+ draft.isPointOpenModal = true
+ })
+ }}
>
- {(pointInfo.point_use > 0 || payType === 'point') && (
- resetPoint(e)}>
- )}
- {payType === 'point'
- ? '全额抵扣'
- : pointInfo.point_use > 0
+ {pointInfo.point_use > 0
? `已使用${pointInfo.real_use_point}${pointName}`
: `使用${pointName}`}
@@ -983,7 +967,7 @@ function CartCheckout(props) {
- {pointInfo.is_open_deduct_point && VERSION_STANDARD && (
+ {pointInfo.is_open_deduct_point && !VERSION_IN_PURCHASE && (
@@ -995,8 +979,6 @@ function CartCheckout(props) {
{
setState((draft) => {
diff --git a/src/pages/cart/espier-checkout.scss b/src/pages/cart/espier-checkout.scss
index 81f4ad87a..146e33975 100644
--- a/src/pages/cart/espier-checkout.scss
+++ b/src/pages/cart/espier-checkout.scss
@@ -257,4 +257,10 @@ $margin24: 24px;
// }
// }
}
+
+ .point-float-layout {
+ .sp-float-layout-bd {
+ padding: 0;
+ }
+ }
}