/* * @author dx * @date 2019-09-17 **/ import 'dart:async'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart' as IMAGE; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:gmalpha_flutter/ActivityReportModel/service/remote/entity/ActivityReportEntity.dart'; import 'package:flutter/material.dart'; import 'package:gmalpha_flutter/ActivityReportModel/page/ActivityReportModel.dart'; import 'package:gmalpha_flutter/commonModel/base/Temp.dart'; import 'package:gmalpha_flutter/commonModel/ui/ALColors.dart'; final _goldenColor = Color(0xFFB59C64); class ActivityReportPage extends StatefulWidget { ActivityReportModel _model; ActivityReportPage(int id, int type, String fromPage) { _model = new ActivityReportModel(id, type, fromPage); } @override State createState() => ActivityReportState(_model); } class ActivityReportState extends State { ActivityReportModel _model; ActivityReportState(this._model); @override void initState() { super.initState(); _model.start(); _model.init(context); } @override Widget build(BuildContext context) { ScreenUtil.instance = ScreenUtil(width: 375, height: 667)..init(context); return Scaffold( appBar: AppBar( title: Text(''), centerTitle: true, leading: IMAGE.GestureDetector( onTap: (){ Navigator.pop(context,""); jumpToSearch(); }, child: IMAGE.Image.asset("images/nav_back.png"), ), actions: [ GestureDetector( child: Container( margin: EdgeInsets.only(right: 30), child: Center( child: Text( '再测一次', style: TextStyle( color: ALColors.Color323232, fontSize: 14, fontWeight: FontWeight.bold), ))), onTap: () { Navigator.pop(context,""); jumpToH5(); }, ) ], ), body: StreamBuilder( stream: _model.activityReportLive.stream, initialData: _model.activityReportLive.data, builder: (context, data) { if (data.data == null) { return loadingItem(); } if (data.data.error != 0 || data.data.data == null) { return errorItem(data.data.message); } return Container( padding: EdgeInsets.only( left: ScreenUtil().setWidth(16), right: ScreenUtil().setWidth(16)), child: SingleChildScrollView( child: Column( children: [ TopCard(share: data.data.data.report?.share), SizedBox(height: ScreenUtil().setHeight(8)), PictorialCard(pictorialList: data.data.data.report?.cards, id: _model.id), SizedBox(height: ScreenUtil().setHeight(38)) ], ), ), ); }, )); } Widget errorItem(String reason) { return Center( child: Text("$reason"), ); } Widget loadingItem() { return Center(child: CircularProgressIndicator()); } @override void dispose() { super.dispose(); _model.end(); _model.dispose(); } } class TopCard extends StatelessWidget { final share; TopCard({Key key, this.share}) : super(key: key); _moneyContainer(val) { return Container( child: Column( children: [ Container( decoration: BoxDecoration( border: Border( bottom: BorderSide(color: Color(0xffeeeeee), width: 1.0))), margin: EdgeInsets.only(left: 18, right: 18), height: ScreenUtil().setHeight(62), child: Row(children: [ Text('¥', style: TextStyle( fontSize: 28, color: _goldenColor, fontWeight: FontWeight.bold)), SizedBox(width: 8), Text('$val', style: TextStyle( color: _goldenColor, fontSize: ScreenUtil().setSp(45), fontWeight: FontWeight.bold)), ]), ) ], )); } _percentageContainer(val) { return Container( height: ScreenUtil().setHeight(28), child: Row( children: [ Text( '$val%', style: TextStyle( fontSize: ScreenUtil().setSp(20), color: _goldenColor, fontWeight: FontWeight.bold ), ), SizedBox(width: 4), Text( '的全国同龄人', style: TextStyle( fontSize: 11, color: _goldenColor, fontWeight: FontWeight.bold, height: 2), ) ], )); } _rankingContainer(val) { return Container( height: ScreenUtil().setHeight(28), child: Row( children: [ SizedBox(width: 4), Text( '$val', style: TextStyle( fontSize: ScreenUtil().setSp(20), color: _goldenColor, fontWeight: FontWeight.bold ), ), SizedBox(width: 4), Text( '名', style: TextStyle( fontSize: 11, color: _goldenColor, fontWeight: FontWeight.bold, height: 2), ) ], ), ); } @override Widget build(BuildContext context) { if(share == null) { return Container(); } return Container( color: Colors.white, width: ScreenUtil().setWidth(343), height: ScreenUtil().setHeight(277), child: Container( width: ScreenUtil().setWidth(343), height: ScreenUtil().setHeight(277), decoration: BoxDecoration( border: Border.all( color: ALColors.Color323232, width: ScreenUtil().setWidth(2))), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( height: ScreenUtil().setHeight(8.5), child: Container( margin: EdgeInsets.only(top: ScreenUtil().setHeight(.5)), color: ALColors.Color323232, ), ), Padding( padding: EdgeInsets.only( left: ScreenUtil().setWidth(18), top: ScreenUtil().setHeight(20)), child: Text( '你一年的颜值氪金约为:', textAlign: TextAlign.left, style: TextStyle( color: ALColors.Color323232, fontSize: ScreenUtil().setSp(12), height: 17/12, fontWeight: FontWeight.bold, letterSpacing: 1.5, ), )), AnimationNumber( targetNmber: share.totalCost, delay: 400, container: _moneyContainer), Container( padding: EdgeInsets.only( left: ScreenUtil().setWidth(18), right: ScreenUtil().setWidth(18), top: ScreenUtil().setHeight(14)), child: AnimationCharacter(targetNmber: share.beat, delay: 1000)), Container( padding: EdgeInsets.only( left: ScreenUtil().setWidth(18), right: ScreenUtil().setHeight(18), top: ScreenUtil().setHeight(16)), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( color: Color(0xFFF6F6F6), width: ScreenUtil().setWidth(140), height: ScreenUtil().setHeight(55), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: ScreenUtil().setHeight(15), padding: EdgeInsets.only( left: ScreenUtil().setWidth(8), top: ScreenUtil().setHeight(4)), child: Text('你的氪金量超过了', style: TextStyle( fontSize: ScreenUtil().setSp(11), color: ALColors.Color8E8E8E, fontWeight: FontWeight.bold)), ), Stack( children: [ Container( width: double.maxFinite, height: ScreenUtil().setHeight(32), ), Positioned( right: ScreenUtil().setWidth(4), bottom: ScreenUtil().setHeight(2), child: AnimationNumber( targetNmber: share.beat.toDouble(), delay: 1000, container: _percentageContainer)) ], ) ], ), ), Container( color: Color(0xFFF6F6F6), width: ScreenUtil().setWidth(140), height: ScreenUtil().setHeight(55), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: ScreenUtil().setHeight(15), padding: EdgeInsets.only( top: ScreenUtil().setHeight(4), left: ScreenUtil().setWidth(8)), child: Text('你的氪金排名为全国', style: TextStyle( fontSize: ScreenUtil().setSp(11), color: Color(0xFF8E8E8E), fontWeight: FontWeight.bold))), Stack( children: [ Container( width: double.maxFinite, height: ScreenUtil().setHeight(32), ), Positioned( right: ScreenUtil().setWidth(6), bottom: ScreenUtil().setHeight(2), child: AnimationNumber( targetNmber: share.rank.toDouble(), delay: 1000, container: _rankingContainer), ) ], ) ], ), ) ], )) ], ), )); } } class PictorialCard extends StatelessWidget { final List pictorialList; final id; PictorialCard({Key key, this.pictorialList, this.id}) : super(key: key); Widget _gridViewItemUI(BuildContext context, item) { return Container( padding: EdgeInsets.only(right: 3, bottom: 3, left: 3), child: CachedNetworkImage( imageUrl: '${item.image}', width: ScreenUtil().setWidth(110), height: ScreenUtil().setHeight(110))); } Widget _listViewUI(BuildContext context, item) { List list = []; item.drafts.forEach((item) { list.add(_gridViewItemUI(context, item)); }); return Container( margin: EdgeInsets.only(top: ScreenUtil().setHeight(32)), child: GestureDetector( onTap: () { jumpToPictorial('${item.protocol}&survey_record_id=$id'); }, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: EdgeInsets.only(bottom: 11.0), child: Wrap(children: list), ), Container( width: ScreenUtil().setWidth(343), height: ScreenUtil().setHeight(53), color: Colors.white, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Stack( children: [ Container( padding: EdgeInsets.only(right: 12), child: Text( '${item.guide}', style: TextStyle( color: Color(0xFF323232), fontWeight: FontWeight.bold, fontSize: ScreenUtil().setSp(14)), ), ), Positioned( width: ScreenUtil().setWidth(10), height: ScreenUtil().setHeight(20), top: ScreenUtil().setHeight(-2), right: 0, child: IMAGE.Image.asset('images/right_icon.png', width: ScreenUtil().setWidth(10), height: ScreenUtil().setHeight(20)), ) ], ) ], )) ], ) ) ); } @override Widget build(BuildContext context) { if(pictorialList == null) { return Container(); } return Column( children: pictorialList.map((item) { return _listViewUI(context, item); }).toList(), ); } } class AnimationNumber extends StatefulWidget { final targetNmber; final delay; final container; AnimationNumber({Key key, this.targetNmber, this.delay, this.container}) : super(key: key); _AnimationNumberState createState() => _AnimationNumberState(); } class _AnimationNumberState extends State with TickerProviderStateMixin { AnimationController _animationController; var _timer; @override void initState() { super.initState(); _animationController = AnimationController( duration: Duration(milliseconds: widget.delay), lowerBound: 0, upperBound: widget.targetNmber, vsync: this); _animationController.addListener(() { setState(() {}); }); } @override void dispose() { super.dispose(); _animationController.dispose(); _timer.dispose(); } @override Widget build(BuildContext context) { _timer = Timer(Duration(seconds: 1), () { _animationController.forward(); }); return widget.container(_animationController.value.toInt()); } } class AnimationCharacter extends StatefulWidget { final targetNmber; final delay; AnimationCharacter({Key key, this.targetNmber, this.delay}) : super(key: key); _AnimationCharacterState createState() => _AnimationCharacterState(); } class _AnimationCharacterState extends State with TickerProviderStateMixin { AnimationController _animationController; var _timer; List peopleList; double margin = 0; @override void initState() { super.initState(); _animationController = AnimationController( duration: Duration(milliseconds: widget.delay), lowerBound: 0, upperBound: 10, vsync: this); peopleList = [ {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0}, {'url': 'images/light_grey_person.png', 'width': 14.0, 'height': 36.0} ]; final target = (widget.targetNmber / 10).ceil(); _animationController.addListener(() { var value = _animationController.value; double percent = value / 10; double frist = target / 10; int nowValue; setState(() { peopleList.forEach((item) { int index = peopleList.indexOf(item); if (percent < frist) { double tempPercent = percent / frist; nowValue = (target * tempPercent).ceil(); margin = ScreenUtil().setWidth(6.0 + (29 * nowValue).ceil()); if (index != nowValue) { item['url'] = 'images/dark_grey_person.png'; } else { item['url'] = 'images/golden_person.png'; } } else { double tempPercent = (percent - frist) / (1 - frist); nowValue = (target + (11 - target) * tempPercent).ceil(); if (index > target && index <= nowValue) { item['url'] = 'images/black_person.png'; } } }); }); }); } @override void dispose() { super.dispose(); _animationController.dispose(); _timer.dispose(); } Widget _peopleViewUI(BuildContext context, item) { return IMAGE.Image.asset(item['url'], width: ScreenUtil().setWidth(item['width']), height: ScreenUtil().setHeight(item['height'])); } @override Widget build(BuildContext context) { _timer = Timer(Duration(seconds: 1), () { _animationController.forward(); }); return Column( children: [ _youContainer(), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: peopleList.map((item) { return _peopleViewUI(context, item); }).toList()) ], ); } _youContainer() { return Container( child: Stack(children: [ Container( width: double.maxFinite, height: ScreenUtil().setHeight(19), margin: EdgeInsets.only(bottom: ScreenUtil().setHeight(4)), ), Positioned( child: Container( margin: EdgeInsets.only(left: margin), width: ScreenUtil().setWidth(32), height: ScreenUtil().setHeight(19), child: IMAGE.Image.asset('images/you_icon.png'), )) ])); } }