import { View, Text } from '@tarojs/components';
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 '../Components/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',
cellFontSize: '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 userRecentSite = useSelector((state: any) => state.userLocation_Store.recentSite);
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: userRecentSite.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.setStorageSync('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('getSelectEvent', (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(userRecentSite.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: userRecentSite.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: userRecentSite.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: userRecentSite.siteCode,
siteName: userRecentSite.siteName,
totalMoney: eventChecked ? (Number(payMoney) + currentEventList?.rewardAddAmount) : Number(payMoney)
}).then((r: any) => {
wxAppOrders({
orderId: r.resultData.orderNum,
siteId: userRecentSite.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('@/assets/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('@/assets/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;
这是一个公用组件,在其他页面如充值、账户详情、都有引用,只在账户详情页面引用时才展示退款按钮
最新发布