import Taro , { Component , Config } from '@tarojs/taro' ; import { View , Text , Button , Image } from '@tarojs/components' ; import FloatLayot from '../../components/float-layout' ; import Panel from '../../components/panel' ; import './index.scss' ; import request from '../../utils/request' ; import data from '../../utils/data' ; import Account from '../../services/account' ; import Schedule from '../../services/schedule' ; import config from '../../utils/config' ; import IAccount from '../../interfaces/account' ; import { ISetting } from '../../interfaces/setting' ; interface ISchedule { courseName : string ; location : string ; teacher : string ; sessionText : string ; timeTable : string ; } interface IState { showJWFloatLayout : boolean ; showCardFloatLayout : boolean ; showLibFloatLayout : boolean ; balance : number ; showBalance : boolean ; showBalanceLoading : boolean ; jwVerified : boolean ; cardVerified : boolean ; schedule : Array < ISchedule > ; showSchedule : boolean ; notice : string ; showNotice : boolean ; showHelloWorld : boolean ; setting : ISetting ; } export default class Index extends Component < { } , IState > { /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */ config : Config = { navigationBarTitleText : '吉珠小助手' , enablePullDownRefresh : true , backgroundTextStyle : "dark" , } ; state : IState = { showJWFloatLayout : false , showCardFloatLayout : false , showLibFloatLayout : false , balance : 0 , showBalance : false , showBalanceLoading : true , jwVerified : false , cardVerified : false , schedule : [ ] as Array < ISchedule > , showSchedule : false , notice : '' , showNotice : false , showHelloWorld : false , setting : { } as ISetting , } ; componentWillMount ( ) { } componentDidMount ( ) { this . init ( ) ; Taro . eventCenter . on ( 'indexRemount' , async ( ) => { console . log ( 'Page Index Remount' ) ; this . setState ( { balance : 0 , schedule : [ ] } , ( ) => { this . init ( ) ; } ) ; } ) ; } componentWillUnmount ( ) { } componentDidShow ( ) { } componentDidHide ( ) { } onShareAppMessage ( ) { let path = '/pages/index/index' ; return { title : '明日复明日' , path : path , imageUrl : config . shareImageUrl } ; } onPullDownRefresh ( ) { this . init ( ) ; Taro . stopPullDownRefresh ( ) ; setTimeout ( ( ) => { Taro . showToast ( { title : '刷新成功' , icon : 'none' } ) ; } , 300 ) ; } init ( ) { const cardSetting = Taro . getStorageSync ( 'cardSetting' ) ; const setting = Taro . getStorageSync ( 'setting' ) ; let state = { setting } ; for ( let item of cardSetting ) { state [ `${ item . showKey }` ] = item . show ; state [ `${ item . verifiedKey }` ] = Account . checkBindState ( item . key ) ; if ( ! item . show ) { continue ; } if ( item . showKey === 'showNotice' ) { this . getNotice ( ) ; } else if ( item . showKey === 'showBalance' ) { this . getBalance ( ) ; } else if ( item . showKey === 'showSchedule' ) { this . getSchedule ( ) ; } } state [ 'showHelloWorld' ] = ! state [ 'jwVerified' ] && ! state [ 'cardVerified' ] && ! Account . checkBindState ( 'lib' ) ; this . setState ( state ) ; } goto ( url ) { Taro . navigateTo ( { url : url } ) ; } async getNotice ( ) { const response = await request . notice ( { } ) ; if ( ! response || response . data . code == - 1 ) { return ; } if ( response . data . data . notice === '' ) { return ; } this . setState ( { notice : response . data . data . notice } ) ; } async getBalance ( quiet_mode = true ) { const account = Account . Get ( ) ; if ( ! account || ! Account . checkBindState ( 'card' ) ) { return ; } const response = await request . cardBalance ( { quiet_mode : quiet_mode } ) ; if ( ! response || response . data . code == - 1 ) { return ; } const balance = response . data . data . balance ; this . setState ( { balance : parseFloat ( balance ) , showBalanceLoading : false } ) ; } async getSchedule ( ) { const rawSchedule = Schedule . GetFormStorage ( ) ; const customSchedule = Taro . getStorageSync ( 'customSchedule' ) ; const newSchedule = rawSchedule . concat ( customSchedule ) ; if ( ! newSchedule ) { return ; } const currWeek = await Schedule . getCurrWeek ( ) ; const currDay = new Date ( ) . getDay ( ) || 7 ; const schedule = Schedule . InitSchedule ( newSchedule , currWeek , currDay ) ; this . setState ( { schedule : schedule } ) ; } async gridGotoPage ( gridItem ) { if ( gridItem . pageUrl ) { Taro . navigateTo ( { url : gridItem . pageUrl , } ) ; } else if ( gridItem . bindState ) { const newState = { } as IState ; newState [ gridItem . bindState ] = true ; this . setState ( newState ) ; if ( gridItem . bindState == 'showCardFloatLayout' ) { this . getBalance ( ) ; } } } handleClose ( type ) { const newState = { } as IState ; newState [ type ] = false ; this . setState ( newState ) ; } handlePanelClick ( type ) { const cardBinded = Account . checkBindState ( 'card' ) ; const actions = { schedule : '/pages/edu/schedule/schedule' , transaction : cardBinded ? '/pages/card/transaction/index' : '/pages/common/bind/index' } ; Taro . navigateTo ( { url : actions [ type ] } ) ; } render ( ) { const { setting , balance , showBalanceLoading , showBalance , schedule , showSchedule , cardVerified , showJWFloatLayout , showCardFloatLayout , showLibFloatLayout , notice , showNotice , showHelloWorld , } = this . state ; const helloPanel = ( showHelloWorld ) ? ( < Panel title = '你好，世界' none = { false } nonText = { `感谢参与 吉珠课表 的内测` } > < View className = 'bind-tip' onClick = { this . goto . bind ( this , '/pages/common/bind/index' ) } > < Text > 点击绑定以启用更多服务 < /Text></View > < /Panel>) : null; const noticePanel = showNotice ? ( < Panel title = '通知' > < View className = "notice" > < Text className = "" decode = { false } > { notice } < /Text> < /View> < /Panel>) : null; const schedulePanel = showSchedule ? ( < Panel title = '今日课表' none = { schedule . length === 0 } nonText = '今天没有课哦😄' onClick = { this . handlePanelClick . bind ( this , 'schedule' , false ) } > < View className = 'card-schedule' > { schedule . map ( ( item , index ) => { return ( < View className = 'card-schedule__item' key = { index } > < View className = 'card-schedule__item__session' > { item . sessionText } < /View> < View className = 'card-schedule__item__info' > { item . courseName } < View className = 'card-schedule__item__location' > { `${ item . location }${ setting . todayScheduleDisplayTimeTable ? ' • ' + item . timeTable : '' }` } < /View> < /View> { setting . todayScheduleDisplayTeacher ? ( < View className = 'card-schedule__item__teacher' > { item . teacher } < /View>) : null } < /View>); } ) } < /View> < /Panel>) : null; const balancePanel = showBalance ? ( < Panel title = '校园卡余额' none = { ! cardVerified ? true : false } nonText = '还未绑定校园卡账号哦😏' onClick = { this . handlePanelClick . bind ( this , 'transaction' , false ) } > < View className = 'card-balance' > < Text className = 'card-balance__text' > { showBalanceLoading ? '' : `￥${ balance }` } < /Text> < /View> < /Panel>) : null; const gridItems = data . magicBoxItems ; const gridItemMap = gridItems . map ( ( gridItem , index ) => { return ( < View key = { index } className = 'grid-item' onClick = { this . gridGotoPage . bind ( this , gridItem ) } > < Image src = { gridItem . imageUrl } /> < Text > { gridItem . title } < /Text> < /View>); } ) ; const magicBoxPanel = ( < Panel title = 'Magic Box' none = { false } > < View className = 'grid' > { gridItemMap } < /View> < /Panel>); return ( < View className = 'home-page' > < View > { noticePanel } { helloPanel } { schedulePanel } { balancePanel } { magicBoxPanel } < /View> < FloatLayot title = '教务系统' isOpened = { showJWFloatLayout } onClose = { this . handleClose . bind ( this , 'showJWFloatLayout' ) } > < View className = 'grid small' > { data . scheduleItems . map ( ( item , index ) => { return ( < View className = 'grid-item small' key = { index } onClick = { this . goto . bind ( this , item . pageUrl ) } > < Image src = { item . imageUrl } /> < Text > { item . title } < /Text> < /View>); } ) } < /View> < /FloatLayot> < FloatLayot title = '校园卡' isOpened = { showCardFloatLayout } onClose = { this . handleClose . bind ( this , 'showCardFloatLayout' ) } > < View > < Panel title = '余额' marginBottom = { 0 } rightTip = { `${ cardVerified ? '刷新' : '' }` } onRightTipClick = { this . getBalance . bind ( this , false ) } > < View className = 'flex-center' > { cardVerified ? < Text className = 'card-balance__text' > ￥ { balance } < /Text> : < Text className = 'not-bind-tip' > 还未绑定校园卡账号 < /Text>} < /View> < /Panel> < Panel title = '功能' marginBottom = { 0 } padding = '20rpx 20rpx 30rpx;' > < Button className = 'btn' onClick = { this . goto . bind ( this , '/pages/card/transaction/index' ) } > 查询消费记录 < /Button> < /Panel> < /View> < /FloatLayot> < FloatLayot title = '图书馆' isOpened = { showLibFloatLayout } onClose = { this . handleClose . bind ( this , 'showLibFloatLayout' ) } > < Panel title = '功能' marginBottom = { 0 } padding = '20rpx 20rpx 30rpx;' > < View className = 'btn-group' > < Button className = 'btn' onClick = { this . goto . bind ( this , '/pages/library/search' ) } > 书目检索 < /Button> < Button className = 'btn' onClick = { this . goto . bind ( this , '/pages/library/reader' ) } > 个人中心 < /Button>     < /View> < /Panel> < /FloatLayot> < /View>); } }