import {Text, View} from '@tarojs/componen
ts';
import {Image, Button} from '@antmjs/vantui';
import {ReactNode} from 'react';
import '
./index
.scss';
interface BalanceInfoCardPropTypes {
money
:number,
headerTitle?
:ReactNode|string,
tipsNode?
:ReactNode,
moneyTips?
:ReactNode
}
const BalanceInfoCard =
({
money=0
.00,
headerTitle='可用额度',
tipsNode=
(<></>
),
moneyTips=
(<></>
)
}
:BalanceInfoCardPropTypes
) => {
return
(
<View className='header-content'>
<View className='header'>
<View className='fg-1 ml-45 header-title'>
<View>
{typeof headerTitle === 'string' &&
(<Text className=''>{headerTitle}</Text>
)}
{typeof headerTitle === 'object' &&
(headerTitle
)}
</View>
{tipsNode}
<View>
<Text className='header-title-money'>¥ {money
.toFixed
(2
)}</Text>
{moneyTips}
</View>
{/* 退款按钮 */}
<View className='refund-button-container'>
<Button block color='#4687FF' plain onClick={
()=>{
// showDialog
({
// selector
: 'vanDialog',
// message
:'是否退出登录？',
// showCancelButton
:true
// }
).then
(()=>{
// dispatch
({
// type
:CLEAR_USER,
// text
:null
// }
);
// clearStorageSync
();
// Taro
.showLoading
({
// title
: '正在加载'
// }
);;
// setTimeout
(()=>{
// Taro
.hideLoading
();
// Taro
.switchTab
({
// url
:'/pages/tabBarPages/index/index'
// }
);
// },1000
);
// }
);
}}>退款</Button>
</View>
</View>
<View className='fg-1 money-big-content'>
<View className='money-big'>
<Image src={require
('@/asse
ts/images/money-big
.png'
)} showLoading={false} width='220rpx' height='240rpx'></Image>
</View>
</View>
</View>
</View>
);
};
export default BalanceInfoCard;
import { View, Text } from '@tarojs/componen
ts';
import { Image, Row, Col, Field, Cell, ConfigProvider, Button, Icon } from '@antmjs/vantui';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { getRechargeActivity } from '@/api/market';
import { insetPayRecord, wxAppOrders, insertRechargeOrderByAliPay } from '@/api/order';
import { getMemberInfo } from '@/store/actions/userAction';
import { aliPayment, wechatPayment } from '@/utils/appPay';
import Taro, { ENV_TYPE, useRouter, useLoad } from '@tarojs/taro';
import BalanceInfoCard from '
../Componen
ts/BalanceInfoCard';
import '
./index
.scss';
interface EventList {
activityType
: number,
couponsCount
: number,
couponsList
: Array<any> | null
eventId
: number,
eventName
: string,
[propsName
: string]
: any
}
const themeVars = {
cellVerticalPadding
: '8rpx',
cellFon
tSize
: '26rpx',
cellValueColor
: '#333333',
cellTextColor
: '#333333',
cellBorderColor
: '#DDDDDD'
};
// * 获取的充值活动
const BalanceRecharge =
() => {
const router = useRouter
();
let { goBack } = router
.params;
const userInfo = useSelector
((state
: any
) => state
.userInfo_Store
);
const userRecen
tSite = useSelector
((state
: any
) => state
.userLocation_Store
.recen
tSite
);
const [moneyList] = useState<Array<{ money
: number }>>
([
{ money
: 50 },
{ money
: 100 },
{ money
: 200 },
{ money
: 300 },
{ money
: 500 },
{ money
: 1000 },
{ money
: 2000 },
{ money
: 3000 },
{ money
: 5000 },
]
);
const [customMoney, setCustomMoney] = useState<number | string>
(''
);
const [moneyIndex, setMoneyIndex] = useState<number | null>
(null
);
const [payMoney, setPayMoney] = useState<number>
(0
);
const [currentEventList, setCurrentEventList] = useState<EventList | null>
(null
);
// ? 是否选中活动
const [eventChecked, setEventChecked] = useState<boolean>
(false
);
// ? 支付
时 是否同意协议
// const [agreeChecked,setAgreeChecked] = useState<boolean>
(false
);
// @
ts-ignore
useLoad
(async
(option
) => {
console
.log
('===================================='
);
console
.log
(option
.rechargeMoney
);
console
.log
('===================================='
);
option
.rechargeMoney ?
(() => {
let index = moneyList
.findIndex
((v
) => v
.money === parseInt
(option
.rechargeMoney
));
index === -1 ? setMoneyIndex
(3
) : setMoneyIndex
(index
);
}
)() : (() => {
setMoneyIndex
(3
);
}
)();
// await getMemberInfo
(userInfo
.mobile, option
.siteId
);
}
);
useEffect
(() => {
(customMoney || moneyIndex !== null
) && getRechargeEvent
();
}, [moneyIndex, customMoney]
);
// * 充值活动
const [eventList, setEventList] = useState<Array<EventList>>
([]
);
const getRechargeEvent =
() => {
let money = moneyIndex === null ? customMoney
: moneyList[moneyIndex]
.money;
getRechargeActivity
({
birthday
: userInfo
.birthday,
busChannel
: 1,
cardType
: 2,
levelId
: userInfo
.levelId,
memberType
: userInfo
.type,
merchantId
: userRecen
tSite
.siteId,
memberId
: userInfo
.id,
moneyAmount
: money,
payType
: Taro
.getEnv
() === ENV_TYPE
.ALIPAY ? 1
: 2,
type
: 2
}
).then
((res
: any
) => {
if
(res
.resultData
.length === 0
) {
setCurrentEventList
(null
);
setEventChecked
(false
);
}
if
(res
.resultData
.length > 0
) {
setCurrentEventList
(res
.resultData[0]
);
setEventChecked
(true
);
}
setEventList
(res
.resultData
);
Taro
.se
tStorageSync
('eventList', res
.resultData
);
setPayMoney
(money as number
);
// setEventList
(res
.resultData
);
}
);
};
const toSelectEvent =
(): void => {
let changeIndex = eventList
.findIndex
((val
) => {
return val
.eventId === currentEventList?
.eventId;
}
);
Taro
.eventCenter
.on
('ge
tSelectEvent',
(params
: EventList
) => {
!eventChecked && setEventChecked
(true
);
setCurrentEventList
(params
);
}
);
Taro
.navigateTo
({
url
: `/pages/selectEvent/index?changeIndex=${changeIndex}`
}
);
};
// const getEventParams =
()=>{
// // 选择活动之后传入接口
// if
(eventChecked
){
// return {
// activityID
: currentEventList?
.eventId,
// rechargeAmount
: (payMoney +currentEventList?
.rewardAddAmount
),
// sendIntegral
: currentEventList?
.rewardAddIntegral ? currentEventList?
.rewardAddIntegral
: 0,
// rewardCoupon
: !currentEventList?
.couponsList ?
// null
: (() => {
// return currentEventList?
.couponsList
.map
((val
) => {
// return val
.couponId;
// }
).join
(','
);
// }
)(),
// };
// }
// return {};
//
// };
const submitRecharge =
() => {
// if
(Taro
.getEnv
() === ENV_TYPE
.ALIPAY
){
// Taro
.showModal
({
// title
:'支付宝暂不支持充值',
// showCancel
:false
// }
);
// return;
// }
// if
(![49]
.includes
(userRecen
tSite
.companyId
)){
// Taro
.showModal
({
// content
:'当前站点不支持充值',
// showCancel
:false
// }
);
// return;
// }
if
(customMoney
) {
let reg = new RegExp
(/^0\
.([1-9]|\d[1-9]
)$|^[1-9]\d{0,8}\
.\d{0,2}$|^[1-9]\d{0,8}$/
);
if
(!reg
.test
(String
(customMoney
))) {
Taro
.showToast
({
icon
: 'error',
title
: '金额格式错误'
}
);
return;
}
}
Taro
.showLoading
({
title
: '请求支付'
}
);
let payment
: number | string = moneyIndex === null ? customMoney
: moneyList[moneyIndex]
.money;
Taro
.getEnv
() === ENV_TYPE
.ALIPAY ?
(() => {
// 支付宝支付
insertRechargeOrderByAliPay
({
actualMoney
: payment as number,
buyerOpenId
: userInfo
.openId,
discountMoney
: eventChecked ? currentEventList?
.rewardAddAmount
: 0,
eventId
: eventChecked ? currentEventList?
.eventId
: null,
eventName
: eventChecked ? currentEventList?
.eventName
: null,
memberId
: userInfo
.id,
siteCode
: userRecen
tSite
.siteCode,
totalAmount
: eventChecked ?
(Number
(payment
) + currentEventList?
.rewardAddAmount
) : Number
(payment
)
}
).then
((r
) => {
aliPayment
(r
.resultData
.tradeNo
).then
(async
() => {
await paySuccessCallBack
();
}
).catch
(() => {
Taro
.hideLoading
();
}
);
}
).catch
(() => {
Taro
.hideLoading
();
}
);
}
)() : (() => {
// 微信支付
insetPayRecord
({
actualMoney
: payment as number,
balance
: userInfo
.totalBalance,
cardNum
: userInfo
.number,
company
: userRecen
tSite
.companyName,
discountMoney
: eventChecked ? currentEventList?
.rewardAddAmount
: 0,
discountType
: eventChecked ? 0
: 3,
eventId
: eventChecked ? currentEventList?
.eventId
: null,
eventName
: eventChecked ? currentEventList?
.eventName
: null,
memberId
: userInfo
.id,
mobile
: userInfo
.mobile,
payType
: 2,
siteCode
: userRecen
tSite
.siteCode,
siteName: userRecen
tSite
.siteName,
totalMoney
: eventChecked ?
(Number
(payMoney
) + currentEventList?
.rewardAddAmount
) : Number
(payMoney
)
}
).then
((r
: any
) => {
wxAppOrders
({
orderId
: r
.resultData
.orderNum,
siteId
: userRecen
tSite
.siteId,
subOpenId
: userInfo
.openId,
txnAmt
: r
.resultData
.actualMoney,
}
).then
((res
: any
) => {
wechatPayment
(res
.data
.data
).then
(async
() => {
await paySuccessCallBack
();
}
).catch
(() => {
Taro
.hideLoading
();
}
);
}
);
}
).catch
(() => {
Taro
.hideLoading
();
}
);
}
)();
};
const paySuccessCallBack = async
() => {
Taro
.showToast
({
icon
: 'success',
title
: '充值成功'
}
);
await getMemberInfo
(userInfo
.mobile
);
Taro
.hideLoading
();
if
(goBack
) {
Taro
.navigateBack
({
delta
: 1
}
);
} else {
setMoneyIndex
(3
);
setCustomMoney
(''
);
}
};
return
(
<ConfigProvider themeVars={themeVars}>
<View className='index'>
<BalanceInfoCard money={userInfo
.totalBalance}></BalanceInfoCard>
<View className='operation-content'>
<View className='container' style={{ marginBottom
: 0 }}>
<View className='df f-ac'>
<View className='title-block'></View>
<View className='fs-35'>我要充值</View>
</View>
{/* 充值金额*/}
<Row className='money-content' gutter={20}>
{
moneyList
.map
((val
: any, index
: number
) => {
return
(
<Col span={8} key={index}>
<View
className={`money-list-item ${moneyIndex === index ? 'money-list-item-active'
: ''}`}
onClick={
() => {
setCustomMoney
(''
);
setMoneyIndex
(index
);
}}>
<Image className='money-icon'
src={require
('@/asse
ts/images/money-icon
.png'
)} width='43rpx'
height='43rpx'></Image>
<Text className='money'>{val
.money}</Text>
<Text className='company'>元</Text>
<Icon name='success'
style={{ display
: moneyIndex === index ? 'block'
: 'none' }}
className='success-icon' size='15px' color='#ffffff'></Icon>
</View>
</Col>
);
}
)
}
{/*自定义金额*/}
<Col span={24} className=''>
<View
className={`money-list-item df f-ac ${customMoney !== '' ? 'money-list-item-active'
: ''}`}>
<View className='fg-1 custom-money-content'>
<Row>
<Col span={8} className='tx-r'>
<Image src={require
('@/asse
ts/images/money-icon
.png'
)} width='43rpx'
height='43rpx'></Image></Col>
<Col span={16}>
<Field
value={customMoney}
placeholder='请输入其他面额'
border={false}
type='digit'
onFocus={
() => {
// * 自定义价格获得焦点
setMoneyIndex
(null
);
}}
onBlur={
(e
) => {
{/* 在ide 当前方法没效果 真机调试无问题 */ }
if
(!e
.detail || e
.detail === ''
) {
setMoneyIndex
(3
);
setCustomMoney
(''
);
return;
}
setCustomMoney
(e
.detail
);
}}
/>
</Col>
</Row>
</View>
<Icon name='success' style={{ display
: customMoney ? 'block'
: 'none' }}
className='success-icon' size='15px' color='#ffffff'></Icon>
</View>
</Col>
</Row>
</View>
{/*活动选择*/}
<View className='event-change-content'>
<View className='select-current-event df f-ac'>
<View className='df f-ac fg-1' onClick={
() => {
if
(!currentEventList
) return;
setEventChecked
(!eventChecked
);
}}>
<View className={`checked-box ${eventChecked && 'checked-box-active'}`}>
{
eventChecked &&
(
<Icon name='success' color='#ffffff' size={35}></Icon>
)
}
</View>
<View className='event-content'>
<View>
{
!currentEventList ?
(
<Text>暂无可用活动</Text>
) : (
<Text>{currentEventList['eventName']}</Text>
)
}
</View>
</View>
</View>
{
eventList
.length > 0 &&
(
<>
<View onClick={
() => {
toSelectEvent
();
}}>
<Text className='fc-666666 fs-26'>共 {eventList
.length} 个活动可选</Text>
</View>
<View>
<Icon name='arrow' className='arrow-icon'></Icon>
</View></>
)
}
</View>
</View>
<View className='card-content'>
<Cell renderTitle={
<Text className='fs-26'>赠送金额：</Text>
} renderExtra={
<Text
className='price'>¥ {eventChecked && currentEventList ? currentEventList['rewardAddAmount']
: 0
.00}</Text>
} />
<Cell renderTitle={
<Text className='fs-26'>实充金额：</Text>
} renderExtra={
<Text className='price'>¥ {payMoney}</Text>
} />
</View>
</View>
<View className='pay-content'>
{/*<Checkbox value={agreeChecked} checkedColor='#FFB01D' onChange={
(e
) => setAgreeChecked
(e
.detail
)}>*/}
{/* <Text>我已阅读并同意</Text>*/}
{/* <Text className='fc-FFB01D'>《小惠易电-充电用户充值协议》</Text>*/}
{/*</Checkbox>*/}
<Button block color='#4687FF' round className='mt-30' onClick={
() => submitRecharge
()}>
{Taro
.getEnv
() === ENV_TYPE
.ALIPAY ? '支付宝支付'
: '微信支付'}
</Button>
<View className='safe-area-inset-bottom'></View>
</View>
</View>
</ConfigProvider>
);
};
export default BalanceRecharge;
import {View,ScrollView,Text} from '@tarojs/componen
ts';
import {useState, useCallback, useEffect, useRef} from 'react';
import Taro, {usePullDownRefresh,ENV_TYPE} from '@tarojs/taro';
import {Button,Icon,DatetimePicker,Popup,Dialog} from '@antmjs/vantui';
import moment from 'moment';
import {useSelector} from 'react-redux';
import {selectRechargeOrderList,selectWaitChargeOrder} from '@/api/order';
import EmptyList from '@/Componen
ts/EmptyList';
import ListLoading from '@/Componen
ts/ListLoading';
import {showDialog} from '@/utils/UIControl';
import BalanceInfoCard from '
../Componen
ts/BalanceInfoCard';
import '
./index
.scss';
export interface ListChildren {
cardNum
:string,
actualMoney
:number,
balance
:number,
memberId
:number,
state
:number,
orderNum
:string,
orderSource
:number,
payType
:number,
totalMoney
:number,
siteId
:number,
[propName
:string]
:any
}
interface RechargeListOptions {
totalCount
:number,
loading
:boolean,
list
:Array<ListChildren>
}
interface DateOptions {
show
:boolean,
currentDate
:string|number,
minDate
:string|number,
maxDate
:string|number
}
const BalanceDetail =
() => {
const nowPage = useRef<number>
(1
);
const [rechargeListOptions,setRechargeListOptions] = useState<RechargeListOptions>
({
totalCount
:0,
loading
:true,
list
:[]
}
);
const userInfo = useSelector
((state
:any
)=>state
.userInfo_Store
);
const userRecen
tSite = useSelector
((state
:any
)=> state
.userLocation_Store
.recen
tSite
);
const [dateOptions, setDateOptions] = useState<DateOptions>
({
show
:false,
currentDate
:new Date
().getTime
(),
maxDate
:new Date
().getTime
(),
minDate
: new Date
('2019-01-01'
).getTime
(),
}
);
const [refreshLoading,setRefreshLoading] = useState<boolean>
(false
);
const formatter = useCallback
((type, value
)=>{
if
(type === 'year'
) {
return `${value}年`;
}
if
(type === 'month'
) {
return `${value}月`;
}
return value;
},[]
);
const dateOnConfirm =
({detail}
):void=>{
nowPage
.current = 1;
setRechargeListOptions
({
...rechargeListOptions,
loading
:true,
list
:[]
}
);
setDateOptions
({
...dateOptions,
show
:false,
currentDate
:detail
.value
}
);
};
useEffect
(()=>{
rechargeListOptions
.loading && getRechargeList
();
},[dateOptions
.currentDate,rechargeListOptions
.loading]
);
useEffect
(()=>{
refreshLoading && getRechargeList
();
},[refreshLoading]
);
usePullDownRefresh
(() => {
refreshData
();
}
);
const refreshData =
()=>{
setRechargeListOptions
({
totalCount
:0,
list
:[],
loading
:true
}
);
nowPage
.current = 1;
setRefreshLoading
(true
);
};
const getRechargeList =
():void=>{
selectRechargeOrderList
({
memberMobile
: userInfo
.mobile,
state
:[1,2,3],
pageSize
: 10,
startTime
: moment
(dateOptions
.currentDate
).format
('YYYY-MM-01 00
:00
:00'
),
endTime
: moment
(dateOptions
.currentDate
).endOf
('month'
).format
('YYYY-MM-DD 23
:59
:59'
),
nowPage
:nowPage
.current
}
).then
((res
:any
)=>{
let data
:RechargeListOptions = {
loading
:false,
...res
.resultData,
list
: rechargeListOptions
.list
.concat(res
.resultData
.list
)
};
setRechargeListOptions
({
...rechargeListOptions,
...data}
);
setRefreshLoading
(false
);
Taro
.stopPullDownRefresh
();
}
);
};
const toDetail =
(val
):void=>{
Taro
.navigateTo
({
url
:'
./refundOperation/index',
success
:(res
)=>{
res
.eventChannel
.emit
('getRechargeInfo', val
);
}
}
).then
(()=>{
Taro
.eventCenter
.on
('refreshRechargeRecords',
()=>{
setRechargeListOptions
({
totalCount
:0,
list
:[],
loading
:true
}
);
nowPage
.current = 1;
setRefreshLoading
(true
);
}
);
}
);
};
return
(
<View className='balance-info-card-content'>
<Dialog id='balanceDialog'/>
<View>
<BalanceInfoCard money={userInfo
.totalBalance}></BalanceInfoCard>
</View>
<View className='list-content '>
<View className='date-btn-content'>
<Button color='#EAF0FE' round size='small' className='list-date-btn' onClick={
()=>{
setDateOptions
({
...dateOptions,
show
:true
}
);
}}>
<Text>{moment
(dateOptions
.currentDate
).format
('YYYY-MM'
)}</Text>
<Icon name='arrow-down' size='30' className='arrow-down'></Icon>
</Button>
</View>
<View className='list-item-content'>
<ScrollView className='list-scroll-view' scrollY refresherEnabled={false} refresherTriggered={refreshLoading} onScrollToLower={
()=>{
if
(rechargeListOptions
.loading || rechargeListOptions
.list
.length === rechargeListOptions
.totalCount
){
return;
}
nowPage
.current = nowPage
.current+1;
getRechargeList
();
}}>
<ListLoading total={rechargeListOptions
.totalCount} loading={rechargeListOptions
.loading}>
<View className='list-card'>
{
rechargeListOptions
.list
.length > 0 && rechargeListOptions
.list
.map
((val
:ListChildren,index
:number
)=>{
return
(
<View className='list-card-item' key={index} onClick={
()=>{
if
(val
.state=== 2 || val
.state === 3
) toDetail
(val
);
}}>
{
(val
.state=== 2 || val
.state === 3
) &&
(
<View className='fc-4687FF fs-24 order-state-content'>
<Text>{val
.stateStr}</Text>
<Icon name='arrow' className='arrow-icon' size={23}></Icon>
</View>
)
}
<View className='df f-ac'>
<View className='fg-1'>
<View className=''>
<Text className='fc-333333 fs-28'>{val
.orderNum}</Text>
</View>
<View>
<Text className='fs-24 fc-aaaaaa'>{moment
(val
.createTime
).format
('MM-DD HH
:mm
:ss'
)}</Text>
</View>
</View>
<View>
<View className='tx-r'>
<Text className='fs-28 fc-F83D46'>{val
.state=== 1 ? '+'
: '-'}{val
.totalMoney}</Text>
</View>
<View className='tx-r'>
<Text className='fs-24 fc-999999'>余额：¥{val
.balance}</Text>
</View>
</View>
<View className='ml-15'>
<Button size='mini' disabled={
(val
.state !== 1
)} color='#FDE6E7' onClick={
()=>{
//如果当前有充电中订单，不允许退款
selectWaitChargeOrder
({
memberCreateTime
: userInfo
.createdAt,
memberId
: userInfo
.id,
memberMobile
: userInfo
.mobile,
nowTime
: moment
(new Date
()).format
('YYYY-MM-DD HH
:mm
:ss'
)
}
).then
((res
: any
) => {
if
(res
.resultData && res
.resultData
.length > 0
) {
Taro
.showToast
({
icon
:'error',
title
:'充电中不可退款'
}
);
} else {
toDetail
(val
);
}
}
);
}}>
<Text className='fc-F83D46'>{
val
.state !== 3 ? '退款'
: '已退款'
}</Text>
</Button>
</View>
</View>
</View>
);
}
)
}
{
rechargeListOptions
.list
.length === 0 &&
(
<EmptyList></EmptyList>
)
}
</View>
</ListLoading>
</ScrollView>
</View>
</View>
{
Taro
.getEnv
() === ENV_TYPE
.WEAPP &&
(
<View className='recharge-btn-content safe-area-inset-bottom'>
<Button round color='#288CFF' block onClick={
()=>{
if
(userRecen
tSite && userRecen
tSite
.siteId
){
Taro
.navigateTo
({
url
:'
../balanceRecharge/index'
}
);
}else{
showDialog
({
selector
: 'balanceDialog',
message
: '请在首页切换有站点地区',
showCancelButton
: false,
}
).then
(() => {
return;
}
).catch
(()=>{
return;
}
);
}
}}>充值</Button>
</View>
)
}
<Popup show={dateOptions
.show} position='bottom'>
<DatetimePicker
type='year-month'
value={dateOptions
.currentDate}
minDate={dateOptions
.minDate}
maxDate={dateOptions
.maxDate}
onConfirm={dateOnConfirm}
formatter={formatter}
onCancel={
()=>{
setDateOptions
({
...dateOptions,
show
:false
}
);
}}
/>
</Popup>
</View>
);
};
export default BalanceDetail;
BalanceInfoCard是一个公用组件，在其他页面如BalanceRecharge充值、 BalanceDetail账户详情、都有引用，只在账户详情页面引用
时才展示退款按钮，该如何修改这几个文件
本文介绍MySQL中使用GROUP_CONCAT、concat和concat_ws函数进行字段拼接的方法，包括如何将多列数据合并为一列，以及如何在拼接时使用指定的分隔符。
扫一扫
4930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
