yky-wx-components1
Version:
Taro实现微信小程序红包雨效果
242 lines (213 loc) • 10.1 kB
JavaScript
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text , Swiper, SwiperItem} from '@tarojs/components'
import {AtButton,AtCard,AtTabs, AtTabsPane,AtList, AtListItem,AtTabBar,AtIcon,AtFloatLayout,AtTextarea,AtInput} from 'taro-ui'
import { imgUrl, judgeEmpty, exportBaseUrl, hidebankCard, encrypt,toThousands, CZBANK, openPDF } from '../utils/utils'
import moment from 'moment'
import { get,set} from '../../global_data'
import './index.less'
class approveList extends Component {
static options = {
addGlobalClass: true
}
SectionCustom = {}
config = {
navigationBarTitleText: '审批1',
navigationBarBackgroundColor:'#F7F7F7',
navigationBarTextStyle:'white',
navigationStyle: "custom",
}
// 索引tab栏
constructor () {
super(...arguments)
this.state = {
current: 0,
fixedTab:false,
value: '',
fuKuanReason:false,
Beizhuvalue:'',
EyeFlag:false,
costInformationCurent:0,
lendingCount:0
// sectionCustom: {}
}
}
refSectionCustom = (ref) => {
this.SectionCustom = ref
}
componentWillReceiveProps (nextProps) {
}
componentWillUnmount () {
}
onLoad(options) {
console.log(options,'ppp')
// let item = JSON.parse(options.item)
// this.setState({
// item
// })
}
componentDidShow () { }
componentDidHide () { }
// nav-bar高度
componentDidMount () {
}
// 切换卡片信息
onChangeCostInformationByManage = () => {
this.setState({
lendingCount: 0
})
}
onChangeCostInformationByService = () => {
this.setState({
lendingCount: 1
})
}
onChangeInterestExpense = (index) => {
this.setState({
lendingCount:index
})
}
handlecostcardChange(e){
console.log(e.target.current)
this.setState({
lendingCount:e.target.current
})
}
// 选择显示或者隐藏银行卡号
chooseEye=()=>{
if(this.state.EyeFlag==false){
this.setState({
EyeFlag:true
})
}else if(this.state.EyeFlag==true){
this.setState({
EyeFlag:false
})
}
}
render () {
console.log(this.props,this)
const noInfo ='---'
let {imgUrl,swiperObj,tabObj,tabArr}=this.props
const {lendingCount,}=this.state
return (
<View >
<AtCard className='assure-message-card cost-message-card' id='cost-message-card'>
<View className='at-article__h3'>费用信息</View>
<Swiper
className='cost-message-top'
vertical={false}
circular={false}
indicatorDots={false}
autoplay={false}
displayMultipleItems='3.5'
>
{
tabObj&&tabObj.map((item,index)=>{
return(
<SwiperItem >
<View className={lendingCount == index ? 'cost-list arrow active' : 'cost-list'}>
<View onClick={this.onChangeInterestExpense.bind(this,index)}>
<View className='cost-icon'><Image src={item.imgUrl} style="width:64rpx;height:64rpx" /></View>
<View className='cost-text'>{item.title}</View>
</View>
</View>
</SwiperItem>
)
})
}
{/* <SwiperItem>
<View className={lendingCount == 1 ? 'cost-list arrow active' : 'cost-list'}>
<View>
<View onClick={this.onChangeCostInformationByService.bind(this)} className='cost-icon'><Image src={`${imgUrl}manaIcon2.png`} style="width:64rpx;height:64rpx" /></View>
<View className='cost-text'>服务费</View>
</View>
</View>
</SwiperItem>
<SwiperItem>
<View className={lendingCount == 2 ? 'cost-list arrow active' : 'cost-list'}>
<View>
<View onClick={this.onChangeInterestExpense.bind(this)} className='cost-icon'><Image src={`${imgUrl}manaIcon3.png`} style="width:64rpx;height:64rpx" /></View>
<View className='cost-text'>利息费</View>
</View>
</View>
</SwiperItem> */}
<SwiperItem></SwiperItem>
<SwiperItem></SwiperItem>
</Swiper>
<Swiper
className='cost-message-bottom'
indicatorColor='#D0D0D0'
indicatorActiveColor='#518DFA'
vertical={false}
circular={false}
indicatorDots
autoplay={false}
displayMultipleItems='1'
style={{maxHeight:'300rpx'}}
current={lendingCount}
onChange={this.handlecostcardChange.bind(this)}
>
{
tabObj&&tabObj.map((item,index)=>{
return(
<SwiperItem>
<View className='cost-list'>
<View className='basic-con'>
{
item&&item.tArr.map((data,index)=>{
return(
<View className='basic-list'><View>{data.name}</View><View> {swiperObj && swiperObj[data.type] ? swiperObj[data.type] : noInfo}</View></View>
)
})
}
{/* <View className='basic-list'><View>管理费金额</View><View style={{color:'#E35555'}}>{swiperObj&&swiperObj.administrativeFigure?swiperObj.administrativeFigure:'---'}</View></View>
<View className='basic-list'><View>收取方式</View><View>固定金额</View></View>
<View className='basic-list'><View>支付方式</View><View> {swiperObj && swiperObj.managementPaymentWay ? swiperObj.managementPaymentWay : noInfo}</View></View>
<View className='basic-list'><View>起息日</View><View> {swiperObj && swiperObj.valueDate ? swiperObj.valueDate : noInfo}</View></View>
<View className='basic-list'><View>到息日</View><View> {swiperObj && swiperObj.expiryDate ? swiperObj.expiryDate : noInfo}</View></View>
<View className='basic-list'><View>融资年化率</View><View> {swiperObj && swiperObj.annualInterestRate ? swiperObj.annualInterestRate : noInfo}%</View></View>
<View className='basic-list'><View>收息天数</View><View> {swiperObj && swiperObj.shouxiDays ? swiperObj.shouxiDays : noInfo}</View></View> */}
</View>
</View>
</SwiperItem>
)
})
}
{/* <SwiperItem>
<View className='cost-list'>
<View className='basic-con'>
<View className='basic-list'><View>管理费金额</View><View style={{color:'#E35555'}}>{swiperObj&&swiperObj.administrativeFigure?swiperObj.administrativeFigure:'---'}</View></View>
<View className='basic-list'><View>收取方式</View><View>固定金额</View></View>
<View className='basic-list'><View>支付方式</View><View> {swiperObj && swiperObj.managementPaymentWay ? swiperObj.managementPaymentWay : noInfo}</View></View>
<View className='basic-list'><View>起息日</View><View> {swiperObj && swiperObj.valueDate ? swiperObj.valueDate : noInfo}</View></View>
<View className='basic-list'><View>到息日</View><View> {swiperObj && swiperObj.expiryDate ? swiperObj.expiryDate : noInfo}</View></View>
<View className='basic-list'><View>融资年化率</View><View> {swiperObj && swiperObj.annualInterestRate ? swiperObj.annualInterestRate : noInfo}%</View></View>
<View className='basic-list'><View>收息天数</View><View> {swiperObj && swiperObj.shouxiDays ? swiperObj.shouxiDays : noInfo}</View></View>
</View>
</View>
</SwiperItem>
<SwiperItem>
<View className='cost-list'>
<View className='basic-con'>
<View className='basic-list'><View>服务费金额</View><View style={{color:'#E35555'}}>¥{toThousands(swiperObj&&swiperObj.servicechargeFigure?swiperObj.servicechargeFigure:'---')}</View></View>
<View className='basic-list'><View>收取方式</View><View>固定金额</View></View>
<View className='basic-list'><View>支付方式</View><View>{swiperObj && swiperObj.servicechargetPaymentWay ? swiperObj.servicechargetPaymentWay : noInfo}</View></View>
</View>
</View>
</SwiperItem>
<SwiperItem>
<View className='cost-list'>
<View className='basic-con'>
<View className='basic-list'><View>利息金额</View><View style={{color:'#E35555'}}>¥{toThousands(swiperObj&&swiperObj.totalAmountInterest?swiperObj.totalAmountInterest:'---')}</View></View>
<View className='basic-list'><View>支付方式</View><View>{swiperObj && swiperObj.paymentWay ? swiperObj.paymentWay : noInfo}</View></View>
</View>
</View>
</SwiperItem> */}
</Swiper>
</AtCard>
{/* <View className='more'>查看更多<AtIcon value='chevron-down' size='16' color='rgba(0,0,0,0.3)'></AtIcon></View> */}
</View>
)
}
}
export default approveList