添加提现页面

lib/pages/withdraw_page/bloc/withdraw_bloc.dart

@@ -1,11 +1,12 @@
 import 'dart:async';
+import 'dart:convert' as convert;
 
-import 'package:zhiying_base_widget/pages/withdraw_page/withdraw_model.dart';
+import 'package:zhiying_base_widget/pages/withdraw_page/models/withdraw_model.dart';
 import 'package:zhiying_comm/util/base_bloc.dart';
 import 'package:zhiying_comm/zhiying_comm.dart';
 
 class WithdrawBloc extends BlocBase {
-  WithdrawModel model;
+  WithdrawModel _model;
 
   StreamController<WithdrawModel> _dataController =
       StreamController<WithdrawModel>();
@@ -33,15 +34,18 @@ class WithdrawBloc extends BlocBase {
       if (json == null || json.length == 0) {
         return;
       }
-      // List mods = json['mod_list'];
+      List mods = json['mod_list'];
-      // if (mods.first != null) {
+      if (mods.first != null) {
-      //   json = Map<String, dynamic>.from(mods.first);
+        json = Map<String, dynamic>.from(mods.first);
-      //   String d = json['data'];
+        String d = json['data'];
-      //   Map<String, dynamic> da =
+        if (json.containsKey('data')) {
-      //       Map<String, dynamic>.from(convert.jsonDecode(d));
+          String d = json['data'];
-      //   _model = SecurityBindAlipayModel.fromJson(da);
+          Map<String, dynamic> da =
-      //   _dataController.add(_model);
+              Map<String, dynamic>.from(convert.jsonDecode(d));
-      // }
+          _model = WithdrawModel.fromJson(da);
+          _dataController.add(_model);
+        }
+      }
     } catch (err) {
       Logger.error(err);
     }

lib/pages/withdraw_page/models/withdraw_model.dart

@@ -0,0 +1,166 @@
+class WithdrawModel {
+  String appBarName;
+  String appBarNameColor;
+  String appBarBgColor;
+  String appBarBgImg;
+  String appBarRightText;
+  String appBarRightTextColor;
+  String appBarRightIcon;
+  String availableCashOutText;
+  String availableCashOutTextColor;
+  String availableCashOutBgImg;
+  String unbindAlipayImg;
+  String bindAlipayImg;
+  String unbindAlipayText;
+  String bindAlipayText;
+  String unbindAlipayGotoText;
+  String bindAlipayGotoText;
+  String isCashOutType;
+  List<WithdrawDashbordItems> cashOutDashbordItems;
+  String cashOutDashbordItemsUnselectedColor;
+  String cashOutDashbordItemsSelectedColor;
+  String cashOutDashbordItemsSelectedBgColor;
+  String cashOutDashbordItemsUnselectedBgColor;
+  String cashOutBtnText;
+  String cashOutBtnTextAvailableColor;
+  String cashOutBtnTextAvailableBgColor;
+  String cashOutBtnTextUnavailableColor;
+  String cashOutBtnTextUnavailableBgColor;
+  String cashOutTips;
+
+  WithdrawModel(
+      {this.appBarName,
+      this.appBarNameColor,
+      this.appBarBgColor,
+      this.appBarBgImg,
+      this.appBarRightText,
+      this.appBarRightTextColor,
+      this.appBarRightIcon,
+      this.availableCashOutText,
+      this.availableCashOutTextColor,
+      this.availableCashOutBgImg,
+      this.unbindAlipayImg,
+      this.bindAlipayImg,
+      this.unbindAlipayText,
+      this.bindAlipayText,
+      this.unbindAlipayGotoText,
+      this.bindAlipayGotoText,
+      this.isCashOutType,
+      this.cashOutDashbordItems,
+      this.cashOutDashbordItemsUnselectedColor,
+      this.cashOutDashbordItemsSelectedColor,
+      this.cashOutDashbordItemsSelectedBgColor,
+      this.cashOutDashbordItemsUnselectedBgColor,
+      this.cashOutBtnText,
+      this.cashOutBtnTextAvailableColor,
+      this.cashOutBtnTextAvailableBgColor,
+      this.cashOutBtnTextUnavailableColor,
+      this.cashOutBtnTextUnavailableBgColor,
+      this.cashOutTips});
+
+  WithdrawModel.fromJson(Map<String, dynamic> json) {
+    appBarName = json['app_bar_name'];
+    appBarNameColor = json['app_bar_name_color'];
+    appBarBgColor = json['app_bar_bg_color'];
+    appBarBgImg = json['app_bar_bg_img'];
+    appBarRightText = json['app_bar_right_text'];
+    appBarRightTextColor = json['app_bar_right_text_color'];
+    appBarRightIcon = json['app_bar_right_icon'];
+    availableCashOutText = json['available_cash_out_text'];
+    availableCashOutTextColor = json['available_cash_out_text_color'];
+    availableCashOutBgImg = json['available_cash_out_bg_img'];
+    unbindAlipayImg = json['unbind_alipay_img'];
+    bindAlipayImg = json['bind_alipay_img'];
+    unbindAlipayText = json['unbind_alipay_text'];
+    bindAlipayText = json['bind_alipay_text'];
+    unbindAlipayGotoText = json['unbind_alipay_goto_text'];
+    bindAlipayGotoText = json['bind_alipay_goto_text'];
+    isCashOutType = json['is_cash_out_type'];
+    if (json['cash_out_dashbord_items'] != null) {
+      cashOutDashbordItems = new List<WithdrawDashbordItems>();
+      json['cash_out_dashbord_items'].forEach((v) {
+        cashOutDashbordItems.add(new WithdrawDashbordItems.fromJson(v));
+      });
+    }
+    cashOutDashbordItemsUnselectedColor =
+        json['cash_out_dashbord_items_unselected_color'];
+    cashOutDashbordItemsSelectedColor =
+        json['cash_out_dashbord_items_selected_color'];
+    cashOutDashbordItemsSelectedBgColor =
+        json['cash_out_dashbord_items_selected_bg_color'];
+    cashOutDashbordItemsUnselectedBgColor =
+        json['cash_out_dashbord_items_unselected_bg_color'];
+    cashOutBtnText = json['cash_out_btn_text'];
+    cashOutBtnTextAvailableColor = json['cash_out_btn_text_available_color'];
+    cashOutBtnTextAvailableBgColor =
+        json['cash_out_btn_text_available_bg_color'];
+    cashOutBtnTextUnavailableColor =
+        json['cash_out_btn_text_unavailable_color'];
+    cashOutBtnTextUnavailableBgColor =
+        json['cash_out_btn_text_unavailable_bg_color'];
+    cashOutTips = json['cash_out_tips'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['app_bar_name'] = this.appBarName;
+    data['app_bar_name_color'] = this.appBarNameColor;
+    data['app_bar_bg_color'] = this.appBarBgColor;
+    data['app_bar_bg_img'] = this.appBarBgImg;
+    data['app_bar_right_text'] = this.appBarRightText;
+    data['app_bar_right_text_color'] = this.appBarRightTextColor;
+    data['app_bar_right_icon'] = this.appBarRightIcon;
+    data['available_cash_out_text'] = this.availableCashOutText;
+    data['available_cash_out_text_color'] = this.availableCashOutTextColor;
+    data['available_cash_out_bg_img'] = this.availableCashOutBgImg;
+    data['unbind_alipay_img'] = this.unbindAlipayImg;
+    data['bind_alipay_img'] = this.bindAlipayImg;
+    data['unbind_alipay_text'] = this.unbindAlipayText;
+    data['bind_alipay_text'] = this.bindAlipayText;
+    data['unbind_alipay_goto_text'] = this.unbindAlipayGotoText;
+    data['bind_alipay_goto_text'] = this.bindAlipayGotoText;
+    data['is_cash_out_type'] = this.isCashOutType;
+    if (this.cashOutDashbordItems != null) {
+      data['cash_out_dashbord_items'] =
+          this.cashOutDashbordItems.map((v) => v.toJson()).toList();
+    }
+    data['cash_out_dashbord_items_unselected_color'] =
+        this.cashOutDashbordItemsUnselectedColor;
+    data['cash_out_dashbord_items_selected_color'] =
+        this.cashOutDashbordItemsSelectedColor;
+    data['cash_out_dashbord_items_selected_bg_color'] =
+        this.cashOutDashbordItemsSelectedBgColor;
+    data['cash_out_dashbord_items_unselected_bg_color'] =
+        this.cashOutDashbordItemsUnselectedBgColor;
+    data['cash_out_btn_text'] = this.cashOutBtnText;
+    data['cash_out_btn_text_available_color'] =
+        this.cashOutBtnTextAvailableColor;
+    data['cash_out_btn_text_available_bg_color'] =
+        this.cashOutBtnTextAvailableBgColor;
+    data['cash_out_btn_text_unavailable_color'] =
+        this.cashOutBtnTextUnavailableColor;
+    data['cash_out_btn_text_unavailable_bg_color'] =
+        this.cashOutBtnTextUnavailableBgColor;
+    data['cash_out_tips'] = this.cashOutTips;
+    return data;
+  }
+}
+
+class WithdrawDashbordItems {
+  String name;
+  String value;
+
+  WithdrawDashbordItems({this.name, this.value});
+
+  WithdrawDashbordItems.fromJson(Map<String, dynamic> json) {
+    name = json['name'];
+    value = json['value'];
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['name'] = this.name;
+    data['value'] = this.value;
+    return data;
+  }
+}

lib/pages/withdraw_page/withdraw_model.dart

@@ -1 +0,0 @@
-class WithdrawModel {}

lib/pages/withdraw_page/withdraw_page.dart

@@ -1,7 +1,11 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:zhiying_base_widget/pages/withdraw_page/bloc/withdraw_bloc.dart';
+import 'package:zhiying_base_widget/pages/withdraw_page/models/withdraw_model.dart';
+import 'package:zhiying_base_widget/pages/withdraw_page/withdraw_page_sk.dart';
 import 'package:zhiying_comm/util/base_bloc.dart';
+import 'package:zhiying_comm/zhiying_comm.dart';
 
 /*提现页面*/
 class WithdrawPage extends StatefulWidget {
@@ -16,12 +20,18 @@ class WithdrawPage extends StatefulWidget {
 class _WithdrawPageState extends State<WithdrawPage> {
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return GestureDetector(
-      appBar: _createNav(),
+      onTap: () {
-      body: SafeArea(
+        FocusScope.of(context).requestFocus(FocusNode());
-        child: BlocProvider<WithdrawBloc>(
+      },
-          bloc: WithdrawBloc(),
+      child: Scaffold(
-          child: _WithdrawContainer(widget.data),
+        appBar: _createNav(),
+        backgroundColor: Colors.white,
+        body: SafeArea(
+          child: BlocProvider<WithdrawBloc>(
+            bloc: WithdrawBloc(),
+            child: _WithdrawContainer(widget.data),
+          ),
         ),
       ),
     );
@@ -76,6 +86,11 @@ class _WithdrawContainer extends StatefulWidget {
 class _WithdrawContainerState extends State<_WithdrawContainer> {
   WithdrawBloc _bloc;
 
+  int _currentIndex = 0;
+  TextEditingController _controller = TextEditingController();
+  bool _submitable = false;
+  bool _inputable = false;
+
   @override
   void initState() {
     _bloc = BlocProvider.of<WithdrawBloc>(context);
@@ -88,9 +103,269 @@ class _WithdrawContainerState extends State<_WithdrawContainer> {
   @override
   Widget build(BuildContext context) {
     return SingleChildScrollView(
+      child: StreamBuilder<WithdrawModel>(
+          stream: _bloc.outData,
+          builder: (BuildContext context, AsyncSnapshot snapshot) {
+            WithdrawModel model = snapshot.data;
+            if (model == null) {
+              return WithdrawPageSketelon();
+            }
+
+            return Container(
+              margin: EdgeInsets.only(left: 12.5, right: 12.5, top: 8),
+              child: Column(
+                children: <Widget>[
+                  _createHeader(model),
+                  _createVerify(model),
+                  _createPrice(model),
+                  _createInput(model),
+                  _createSubmit(model),
+                  _createDesc(model),
+                ],
+              ),
+            );
+          }),
+      // child: Column(
+      //   children: <Widget>[],
+      // ),
+    );
+  }
+
+  Widget _createHeader(WithdrawModel model) {
+    return Container(
+      width: double.infinity,
+      height: 97,
+      decoration: BoxDecoration(
+          color: Colors.white, borderRadius: BorderRadius.circular(10)),
+      child: Stack(
+        children: <Widget>[
+          Container(
+            width: double.infinity,
+            height: double.infinity,
+            child: CachedNetworkImage(
+              imageUrl: model.availableCashOutBgImg ?? '',
+              fit: BoxFit.fill,
+            ),
+          ),
+          Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                Text(
+                  '￥0.03',
+                  style: TextStyle(
+                    color: Colors.white,
+                    fontSize: 30,
+                  ),
+                ),
+                Text(
+                  '可提现总余额',
+                  style: TextStyle(
+                    color: Colors.white,
+                    fontSize: 14,
+                  ),
+                ),
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget _createVerify(WithdrawModel model) {
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: () {
+        Logger.debug('绑定支付宝');
+      },
+      child: Container(
+        margin: EdgeInsets.only(top: 8, bottom: 8),
+        child: Row(
+          children: <Widget>[
+            CachedNetworkImage(
+              imageUrl: model.unbindAlipayImg,
+              height: 23,
+            ),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.only(left: 8, right: 8),
+                child: Text(
+                  model.unbindAlipayText,
+                  style: TextStyle(fontSize: 11, color: Color(0xff999999)),
+                ),
+              ),
+            ),
+            Icon(
+              Icons.arrow_forward_ios,
+              size: 12,
+              color: Color(0xff999999),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _createPrice(WithdrawModel model) {
+    return GridView.builder(
+      shrinkWrap: true,
+      physics: NeverScrollableScrollPhysics(),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3,
+        crossAxisSpacing: 10,
+        mainAxisSpacing: 10,
+        childAspectRatio: 2.5,
+      ),
+      itemCount: model?.cashOutDashbordItems?.length ?? 0,
+      itemBuilder: (BuildContext context, int index) {
+        WithdrawDashbordItems item = model.cashOutDashbordItems[index];
+        return GestureDetector(
+          onTap: () {
+            _controller.text = item.value;
+            _currentIndex = index;
+            _inputable = item.value == null || item.value == '';
+            _checkSubmit(item.value);
+          },
+          child: Container(
+            decoration: BoxDecoration(
+              color: index == _currentIndex
+                  ? HexColor.fromHex(
+                      model.cashOutDashbordItemsSelectedBgColor ?? '')
+                  : HexColor.fromHex(
+                      model.cashOutDashbordItemsUnselectedBgColor ?? ''),
+              borderRadius: BorderRadius.circular(5),
+              border: Border.all(
+                color: index == _currentIndex
+                    ? HexColor.fromHex(
+                        model.cashOutDashbordItemsSelectedColor ?? '')
+                    : HexColor.fromHex('#d2d2d2'),
+              ),
+            ),
+            child: Center(
+              child: Text(
+                item.name,
+                style: TextStyle(
+                  fontSize: 14,
+                  color: index == _currentIndex
+                      ? HexColor.fromHex(
+                          model.cashOutDashbordItemsSelectedColor ?? '')
+                      : HexColor.fromHex(
+                          model.cashOutDashbordItemsUnselectedColor ?? ''),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _createInput(WithdrawModel model) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 8.0),
       child: Column(
-        children: <Widget>[],
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: <Widget>[
+          Text(
+            '提现金额',
+            style: TextStyle(
+              fontWeight: FontWeight.bold,
+              color: Color(0xff333333),
+            ),
+          ),
+          Container(
+            width: double.infinity,
+            height: 50,
+            child: CupertinoTextField(
+              placeholder: '输入提现金额',
+              controller: _controller,
+              enabled: _inputable,
+              style: TextStyle(
+                fontSize: 30,
+                color: Color(0xff333333),
+                fontFamily: 'Din-Bold',
+                package: 'zhiying_base_widget',
+              ),
+              decoration: BoxDecoration(color: Colors.transparent),
+              keyboardType: TextInputType.numberWithOptions(decimal: true),
+              textInputAction: TextInputAction.done,
+              inputFormatters: [
+                WhitelistingTextInputFormatter(RegExp("[0-9.]")), //只允许输入小数
+              ],
+              prefix: Text(
+                '￥',
+                style: TextStyle(fontSize: 20),
+              ),
+              onChanged: (value) {
+                _checkSubmit(value);
+              },
+            ),
+          ),
+          Container(
+            margin: EdgeInsets.only(top: 5, bottom: 20),
+            width: double.infinity,
+            height: 0.5,
+            color: Color(0xffe4e4e4),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _createSubmit(WithdrawModel model) {
+    return Container(
+      height: 50,
+      decoration: BoxDecoration(
+        color: _submitable
+            ? HexColor.fromHex(model.cashOutBtnTextAvailableBgColor ?? '')
+            : HexColor.fromHex(model.cashOutBtnTextUnavailableBgColor ?? ''),
+        borderRadius: BorderRadius.circular(7.5),
+      ),
+      child: Center(
+        child: Text(
+          model.cashOutBtnText ?? '',
+          style: TextStyle(
+            fontSize: 15,
+            color: _submitable
+                ? HexColor.fromHex(model.cashOutBtnTextAvailableColor ?? '')
+                : HexColor.fromHex(model.cashOutBtnTextUnavailableColor ?? ''),
+          ),
+        ),
       ),
     );
   }
+
+  Widget _createDesc(WithdrawModel model) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: <Widget>[
+        Container(
+          width: double.infinity,
+          margin: EdgeInsets.only(top: 8),
+          child: Text(
+            '提现说明',
+            style: TextStyle(
+              fontWeight: FontWeight.bold,
+              color: Color(0xff333333),
+            ),
+          ),
+        ),
+        Text(
+          model.cashOutTips ?? '',
+          style: TextStyle(
+            color: Color(0xff999999),
+            fontSize: 14,
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _checkSubmit(String value) {
+    _submitable = value.length > 0;
+    setState(() {});
+  }
 }

lib/pages/withdraw_page/withdraw_page_sk.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
+
+class WithdrawPageSketelon extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Shimmer.fromColors(
+      baseColor: Colors.grey[300],
+      highlightColor: Colors.grey[100],
+      child: Container(
+        margin: EdgeInsets.only(left: 12.5, right: 12.5, top: 8),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            Container(
+              width: double.infinity,
+              height: 97,
+              decoration: BoxDecoration(
+                  color: Colors.white, borderRadius: BorderRadius.circular(10)),
+            ),
+            Container(
+              margin: EdgeInsets.only(top: 8, bottom: 8),
+              height: 20,
+              color: Colors.white,
+              width: 200,
+            ),
+            GridView.builder(
+              shrinkWrap: true,
+              physics: NeverScrollableScrollPhysics(),
+              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 3,
+                crossAxisSpacing: 10,
+                mainAxisSpacing: 10,
+                childAspectRatio: 2.5,
+              ),
+              itemCount: 6,
+              itemBuilder: (BuildContext context, int index) {
+                return Container(
+                  decoration: BoxDecoration(
+                      color: Colors.white,
+                      borderRadius: BorderRadius.circular(5)),
+                );
+              },
+            ),
+            Container(
+              margin: EdgeInsets.only(top: 28, bottom: 0),
+              height: 60,
+              color: Colors.white,
+              width: double.infinity,
+            ),
+            Container(
+              margin: EdgeInsets.only(top: 8, bottom: 0),
+              height: 20,
+              color: Colors.white,
+              width: 200,
+            ),
+            Container(
+              margin: EdgeInsets.only(top: 8, bottom: 0),
+              height: 20,
+              color: Colors.white,
+              width: 150,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}