ElectronicAssistant/lib/module/store/view.dart

import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/resource/assets.gen.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:electronic_assistant/widget/login_code_btn.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'controller.dart';

class StorePage extends BasePage<StoreController> {
  const StorePage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Stack(
            alignment: AlignmentDirectional.topStart,
            children: [
              _buildBackgroundGradient(),
              _buildTopBG(),
              Positioned(
                left: 12.w,
                top: 280,
                width: ScreenUtil().screenWidth - 24.w,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      height: 20.h,
                      child: Assets.images.iconStoreDescripe.image(),
                    ),
                    SizedBox(
                      height: 16.h,
                    ),
                    _buildGoods(),
                    SizedBox(
                      height: 16.h,
                    ),
                    Text(
                      "·该套餐约可倾听45小时",
                      style: TextStyle(
                        fontSize: 10.sp,
                        color: "#AFAFAF".toColor(),
                      ),
                    ),
                    SizedBox(
                      height: 16.h,
                    ),
                    _buildPayMethod(),
                    SizedBox(
                      height: 39.h,
                    ),
                    _buildService(),
                  ],
                ),
              ),
            ],
          ),
        ),
        _buildTopBar(),
        Positioned(
          bottom: 0,
          left: 0,
          right: 0,
          child: _buildBottombar(),
        ),
      ],
    );
  }

  // 背景颜色
  Widget _buildBackgroundGradient() {
    return Container(
      width: 1.sw,
      height: 1.sh,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: ['#071935'.toColor(), '#283B58'.toColor()],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: const [0.4, 1.0],
        ),
      ),
    );
  }

  // 顶部背景图片
  Widget _buildTopBG() {
    return Assets.images.bgStoreTop.image();
  }

  Widget _buildTopBar() {
    return Container(
      height: 44.h,
      margin: EdgeInsets.only(
        left: 0,
        right: 0,
        top: ScreenUtil().statusBarHeight,
      ),
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      child: Row(
        children: [
          IconButton(
            onPressed: () {},
            icon: ImageIcon(
              Assets.images.iconArrowBackWhite.provider(),
              color: Colors.white,
            ),
          ),
          const Spacer(),
          Container(
            padding:
                EdgeInsets.only(left: 6.w, top: 6.h, bottom: 6.h, right: 12.w),
            decoration: BoxDecoration(
              color: "#01051C".toColor(),
              border: Border.all(
                color: "#7688B1".toColor(),
                width: 1,
              ),
              borderRadius: BorderRadius.circular(16.h),
            ),
            child: Row(
              children: [
                SizedBox(
                  width: 20,
                  child: Assets.images.iconStoreLogo.image(),
                ),
                SizedBox(
                  width: 3.w,
                ),
                const Text(
                  "电量 ",
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.white,
                  ),
                ),
                Text(
                  "600",
                  style: TextStyle(
                    fontSize: 12,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildGoods() {
    return SizedBox(
      height: 154,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.only(top: 0),
        itemBuilder: (context, index) {
          return _buildGoodItem();
        },
        itemCount: 4,
      ),
    );
  }

  Widget _buildGoodItem() {
    return Container(
      height: 154,
      width: 132,
      margin: const EdgeInsets.only(right: 10),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Positioned(
            left: 0,
            top: 10,
            width: 132,
            height: 144,
            child: Container(
              padding: const EdgeInsets.all(2),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                gradient: LinearGradient(
                  colors: ['#9075FF'.toColor(), '#4366FF'.toColor()],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  stops: const [0.0, 1.0],
                ),
              ),
              child: Container(
                width: 128,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: ['#FFF3F6'.toColor(), '#DADBFF'.toColor()],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    stops: const [0.0, 1.0],
                  ),
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    SizedBox(
                      height: 12,
                    ),
                    Text(
                      "大电池",
                      style: TextStyle(
                        fontSize: 13,
                        fontWeight: FontWeight.w700,
                        color: "#6177F2".toColor(),
                      ),
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Container(
                          margin: EdgeInsets.only(bottom: 9),
                          child: Text(
                            "￥",
                            style: TextStyle(
                              fontSize: 16,
                              color: "#6177F2".toColor(),
                            ),
                          ),
                        ),
                        Text(
                          "198",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 39,
                            fontWeight: FontWeight.bold,
                            color: "#6177F2".toColor(),
                          ),
                        ),
                      ],
                    ),
                    Text(
                      "￥258",
                      style: TextStyle(
                        color: "#AFAFAF".toColor(),
                        decoration: TextDecoration.lineThrough,
                        decorationColor: "#AFAFAF".toColor(),
                        fontSize: 14.0,
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: ['#9075FF'.toColor(), '#4366FF'.toColor()],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          stops: const [0.0, 1.0],
                        ),
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          SizedBox(
                            width: 16,
                            child: Assets.images.iconStoreGoodFlash.image(),
                          ),
                          Text(
                            "550电量",
                            style: TextStyle(
                              fontSize: 13,
                              color: Colors.white,
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
          Stack(
            children: [
              Container(
                height: 29,
                child: Assets.images.iconStoreGoodTag.image(),
              ),
              Positioned(
                left: 8,
                top: 2,
                child: Text(
                  "最多人买",
                  style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                    color: "#703D27".toColor(),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildTopPayMethod(Image icon, String title) {
    return Row(
      children: [
        SizedBox(
          width: 20.w,
          child: icon,
        ),
        const SizedBox(
          width: 6,
        ),
        Text(
          title,
          style: TextStyle(color: Colors.white, fontSize: 14.sp),
        ),
      ],
    );
  }

  Widget _buildPayMethod() {
    return Column(
      children: [
        Row(
          children: [
            Text(
              "支付方式",
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.white,
                fontWeight: FontWeight.w500,
              ),
            ),
            const Spacer(),
            Obx(() {
              return GestureDetector(
                onTap: () {
                  controller.isExpanded.value = !controller.isExpanded.value;
                },
                child: Row(
                  children: [
                    Visibility(
                      visible: !controller.isExpanded.value,
                      child: _buildTopPayMethod(
                        Assets.images.iconStoreAlipay.image(),
                        "支付宝",
                      ),
                    ),
                    Visibility(
                      visible: controller.isExpanded.value,
                      child: Text(
                        "收起",
                        style: TextStyle(
                          fontSize: 14.sp,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    Container(
                      width: 16.w,
                      child: controller.isExpanded.value
                          ? Assets.images.iconArrowUpWhite.image()
                          : Assets.images.iconArrowDownWhite.image(),
                    ),
                  ],
                ),
              );
            }),
          ],
        ),
        Obx(() {
          return Visibility(
            visible: controller.isExpanded.value,
            child: SizedBox(
              height: 2 * 32,
              child: ListView.builder(
                padding: const EdgeInsets.only(top: 0),
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: (context, index) {
                  return _buildPayItem(
                      Assets.images.iconStoreAlipay.image().obs.value,
                      "支付宝",
                      true);
                },
                itemCount: 2,
              ),
            ),
          );
        }),
      ],
    );
  }

  Widget _buildPayItem(Image icon, String title, bool isSelect) {
    return Container(
      height: 20.h,
      margin: const EdgeInsets.only(top: 12),
      child: Row(
        children: [
          SizedBox(
            width: 20.w,
            child: icon,
          ),
          const SizedBox(
            width: 6,
          ),
          Text(
            title,
            style: TextStyle(color: Colors.white, fontSize: 14.sp),
          ),
          const Spacer(),
          GestureDetector(
            onTap: () {
              // controller.isAgree.value = !controller.isAgree.value;
            },
            child: SizedBox(
              width: 20.w,
              height: 20.w,
              child: isSelect
                  ? Assets.images.iconSelectTrue.image()
                  : Assets.images.iconSelectFalse.image(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildService() {
    return Column(
      children: [
        Row(
          children: [
            Container(
              width: 4.w,
              height: 16.h,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(2),
                gradient: LinearGradient(
                  colors: ['#357AFF'.toColor(), '#E389FF'.toColor()],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  stops: const [0.0, 1.0],
                ),
              ),
            ),
            SizedBox(
              width: 6.w,
            ),
            Text(
              "多种专属服务·高效辅助办公",
              style: TextStyle(
                fontSize: 15.sp,
                color: Colors.white,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
        Container(
          padding: EdgeInsets.only(
            left: 9,
            right: 9,
            top: 16,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              _buildServiceItem(
                Assets.images.iconStoreServiceSum.image(),
                "智能谈话总结",
              ),
              _buildServiceItem(
                Assets.images.iconStoreServiceRemain.image(),
                "待办任务处理",
              ),
              _buildServiceItem(
                Assets.images.iconStoreServiceAdvice.image(),
                "专业工作建议",
              ),
              _buildServiceItem(
                Assets.images.iconStoreServiceDeal.image(),
                "处理交代事宜",
              ),
            ],
          ),
        ),
        SizedBox(
          height: 26.h,
        ),
        Container(
          width: double.infinity,
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
          decoration: BoxDecoration(
            color: "#40567D".toColor().withOpacity(0.2),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "扣电规则",
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: Colors.white.withOpacity(0.6),
                ),
              ),
              SizedBox(
                height: 6.h,
              ),
              Text(
                "1、小听每听5分钟扣1电量，不满5分钟按5分钟算。",
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.white.withOpacity(0.6),
                ),
              ),
              Text(
                "2、大文件、超大文件生成新的总结，每次扣1电量。",
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: Colors.white.withOpacity(0.6),
                ),
              ),
              Text(
                "3、用大文件和小听对话，每次对话扣1电量。",
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: Colors.white.withOpacity(0.6),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildServiceItem(Image icon, String title) {
    return Column(
      children: [
        SizedBox(
          width: 32.w,
          child: icon,
        ),
        SizedBox(
          height: 2.h,
        ),
        Text(
          title,
          style: TextStyle(
            color: ColorName.white.withOpacity(0.8),
            fontSize: 11.sp,
          ),
        ),
      ],
    );
  }

  Widget _buildBottombar() {
    return Container(
      padding: EdgeInsets.only(
          left: 16.w,
          right: 16.w,
          top: 12.h,
          bottom: ScreenUtil().bottomBarHeight + 12.h),
      alignment: Alignment.topCenter,
      decoration: BoxDecoration(
        color: "#283B58".toColor(),
        boxShadow: const [
          BoxShadow(
            color: Color.fromARGB(1, 42, 48, 59), // 阴影颜色
            spreadRadius: 0, // 阴影扩散半径
            blurRadius: 20, // 阴影模糊半径
            offset: Offset(0, 0), // 阴影偏移量
          ),
        ],
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(12.w),
          topRight: Radius.circular(12.w),
        ),
      ),
      child: GestureDetector(
        onTap: () {
          // print(ScreenUtil().bottomBarHeight);
        },
        child: Container(
          height: 48.h,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: ['#9075FF'.toColor(), '#4366FF'.toColor()],
              begin: Alignment.centerRight,
              end: Alignment.centerRight,
              stops: const [0.0, 1.0],
            ),
            borderRadius: BorderRadius.circular(8.h),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "立即购买",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(
                width: 4.w,
              ),
              Text(
                "￥198",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}