project_telephony/lib/ui/user/members_page.dart

import 'package:flutter/material.dart';
import 'package:project_telephony/base/base_style.dart';
import 'package:project_telephony/ui/widget/check_radio.dart';
import 'package:project_telephony/ui/widget/plone_back_button.dart';
import 'package:project_telephony/ui/widget/plone_bottom.dart';
import 'package:project_telephony/ui/widget/putup_widget.dart';
import 'package:project_telephony/utils/headers.dart';

class MembersPage extends StatefulWidget {
  const MembersPage({Key? key}) : super(key: key);

  @override
  _MembersPageState createState() => _MembersPageState();
}

ChooseItems? _chooseItem;
List<dynamic>? data;
final List<ChooseItems> _piceList = [
  ChooseItems(
    month: 12,
    pice: 10,
  ),
  ChooseItems(
    month: 1,
    pice: 1,
  ),
];
int _selectIndex = 0;
List payWay = [
  {
    'payName': '微信支付',
    'payUrl': Assets.icons.weixin.path,
  },
  {'payName': '支付宝支付', 'payUrl': Assets.icons.zhifubao.path}
];

class _MembersPageState extends State<MembersPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Align(
            child: SizedBox(
              width: 750.w,
              height: 1624.w,
            ),
          ),
          Positioned(
              child: Image.asset(
            Assets.images.vipbg.path,
          )),
          Positioned(top: 256.w, left: 32.w, child: _getBanner()),
          Positioned(
              top: 480.w,
              child: Container(
                height: 1208.w,
                width: 750.w,
                decoration: const BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20),
                        topRight: Radius.circular(20))),
                child: Column(children: [
                  _getRecharge(),
                  _getSpay(payWay),
                  PloneBottom(
                    border: true,
                    onTap: () {},
                    textColor: const Color(0xFF333333),
                    text: "立即开通",
                    color1: const Color(0xFFFFF6D8),
                    color2: const Color(0xFFFFEAB0),
                  )
                ]),
              )),
          Positioned(
              top: 68.w,
              child: Row(
                children: [
                  const CloudBackButton(
                    isSpecial: true,
                  ),
                  154.wb,
                  Text('会员中心', style: Theme.of(context).textTheme.headline6),
                ],
              )),
        ],
      ),
    );
  }

  //banner
  _getBanner() {
    return SizedBox(
      // margin: EdgeInsets.symmetric(horizontal: 32.w),
      child: Stack(children: [
        Align(
            child: SizedBox(
          width: 686.w,
          child: Image.asset(
            Assets.images.vipbanner.path,
            width: 622.w,
            height: 244.w,
            fit: BoxFit.fill,
          ),
        )),
        Positioned(
            child: Container(
                margin: EdgeInsets.symmetric(horizontal: 64.w, vertical: 16.w),
                child: _getText()))
      ]),
    );
  }

//banner 文字
  _getText() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _getVip(),
        18.hb,
        Text(
          "解锁全部功能",
          style: TextStyle(
              color: Colors.white,
              fontSize: BaseStyle.fontSize32,
              fontWeight: FontWeight.bold),
        ),
        16.hb,
        Text(
          "解锁全部功能",
          style: TextStyle(color: Colors.white, fontSize: BaseStyle.fontSize24),
        )
      ],
    );
  }

  _getVip() {
    return Row(
      children: [
        const Text(
          "vip",
          style: TextStyle(color: Color(0xFFFFEAB0)),
        ),
        Container(
          width: 8.w,
          height: 8.w,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4),
            color: const Color(0xFFFFEAB0),
          ),
        ),
        const Text(
          "未开通会员",
          style: TextStyle(color: Color(0xFFFFEAB0)),
        )
      ],
    );
  }

//充值金额
  _getRecharge() {
    return Container(
      width: double.infinity,
      decoration: const BoxDecoration(),
      clipBehavior: Clip.antiAlias,
      child: ListView(
        shrinkWrap: true,
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 80.w, vertical: 32.w),
            child: SortWidget(
              crossAxisSpacing: 24.w,
              itemList: _piceList,
              childAspectRatio: 288 / 216,
              crossAxisCount: 2,
              mainAxisSpacing: 20.w,
              callback: (item, index) {
                _chooseItem = item;
                // print(_piceList[index].pice);
                setState(() {});
              },
              pickItem: _chooseItem,
            ),
          ),
          // 762.hb,
          //40.hb,
        ],
      ),
    );
  }

  _getSpay(List item) {
    return Container(
      // color: Colors.red,
      width: double.infinity,
      height: 500.w,
      margin: EdgeInsets.symmetric(horizontal: 64.w),
      child: ListView.builder(
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              _selectIndex = index;
              // print(_selectIndex);
              setState(() {});
            },
            child: Container(
                padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 40.w),
                color: Colors.white,
                child: Row(
                  children: [
                    SizedBox(
                      child: Image.asset(
                        item[index]['payUrl'],
                        width: 40.w,
                        height: 40.h,
                      ),
                    ),
                    20.wb,
                    SizedBox(
                      width: 200.w,
                      child: Text(
                        item[index]['payName'],
                        style: TextStyle(
                            color: BaseStyle.color333333,
                            fontSize: BaseStyle.fontSize28),
                      ),
                    ),
                    const Spacer(),
                    BeeCheckRadio(
                      value: index,
                      groupValue: [_selectIndex],
                    ),
                  ],
                )),
          );
        },
        itemCount: item.length,
      ),
    );

    // ListView.builder(
    //   itemBuilder: (context, index) {
    //     return GestureDetector(
    //       onTap: () {
    //         _selectIndex = index;
    //         // setState(() {});
    //       },
    //       child: Container(
    //           padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 40.w),
    //           color: Colors.white,
    //           child: Row(
    //             children: [
    //               SizedBox(
    //                 child: Image.asset(
    //                   item[index]['payUrl'],
    //                   width: 40.w,
    //                   height: 40.h,
    //                 ),
    //               ),
    //               20.wb,
    //               SizedBox(
    //                 width: 200.w,
    //                 child: Text(
    //                   item[index]['payName'],
    //                   style: TextStyle(
    //                       color: BaseStyle.color333333,
    //                       fontSize: BaseStyle.fontSize28),
    //                 ),
    //               ),
    //               const Spacer(),
    //               BeeCheckRadio(
    //                 value: index,
    //                 groupValue: [_selectIndex],
    //               ),
    //             ],
    //           )),
    //     );
    //   },
    //   itemCount: item.length,
    // );
  }
}