You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
395 lines
13 KiB
395 lines
13 KiB
import 'package:dating_touchme_app/components/page_appbar.dart';
|
|
import 'package:dating_touchme_app/router/route_paths.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:roundcheckbox/roundcheckbox.dart';
|
|
|
|
class RosePage extends StatefulWidget {
|
|
const RosePage({super.key});
|
|
|
|
@override
|
|
State<RosePage> createState() => _RosePageState();
|
|
}
|
|
|
|
class _RosePageState extends State<RosePage> {
|
|
|
|
|
|
|
|
|
|
bool payChecked = true;
|
|
|
|
int activePay = 0;
|
|
List<Map> payList = [
|
|
{"num": 10, "price": 10, "hasTag": true},
|
|
{"num": 60, "price": 60, "hasTag": true},
|
|
{"num": 300, "price": 60, "hasTag": true},
|
|
{"num": 1080, "price": 1080, "hasTag": false},
|
|
{"num": 2880, "price": 2880, "hasTag": false},
|
|
{"num": 5000, "price": 5000, "hasTag": false},
|
|
{"num": 10000, "price": 10000, "hasTag": false},
|
|
{"num": 20000, "price": 20000, "hasTag": false},
|
|
{"num": 50000, "price": 50000, "hasTag": false},
|
|
];
|
|
|
|
|
|
|
|
changePayActive(int index){
|
|
activePay = index;
|
|
setState(() {
|
|
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: PageAppbar(title: "玫瑰充值", right: Container(
|
|
margin: EdgeInsets.only(right: 28.w),
|
|
child: InkWell(
|
|
onTap: (){
|
|
context.pushNamed(RouteNames.payHistory);
|
|
},
|
|
child: Text(
|
|
"交易记录",
|
|
style: TextStyle(
|
|
fontSize: 26.w,
|
|
color: const Color.fromRGBO(144, 144, 144, 1),
|
|
),
|
|
),
|
|
),
|
|
),),
|
|
body: SingleChildScrollView(
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: 20.w,
|
|
horizontal: 25.w
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Image.asset(
|
|
"assets/rose_banner.png",
|
|
width: 700.w,
|
|
height: 322.w,
|
|
),
|
|
SizedBox(height: 45.w,),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
"余额：",
|
|
style: TextStyle(
|
|
fontSize: 22.w,
|
|
color: const Color.fromRGBO(144, 144, 144, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
Text(
|
|
"15",
|
|
style: TextStyle(
|
|
fontSize: 32.w,
|
|
color: const Color.fromRGBO(117, 98, 249, 1),
|
|
fontWeight: FontWeight.w700
|
|
),
|
|
),
|
|
SizedBox(width: 11.w,),
|
|
Image.asset(
|
|
"assets/rose_gift.png",
|
|
width: 26.w,
|
|
height: 26.w,
|
|
)
|
|
],
|
|
),
|
|
|
|
|
|
Wrap(
|
|
spacing: 9.w,
|
|
runSpacing: 14.w,
|
|
children: [
|
|
...payList.asMap().entries.map((entry){
|
|
return PayItem(item: entry.value, active: activePay, index: entry.key, changeActive: changePayActive);
|
|
}),
|
|
],
|
|
),
|
|
Container(
|
|
height: 1,
|
|
margin: EdgeInsets.only(
|
|
top: 20.w,
|
|
bottom: 30.w
|
|
),
|
|
color: const Color.fromRGBO(219, 219, 219, 1),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Image.asset(
|
|
"assets/ali_pay.png",
|
|
width: 35.w,
|
|
height: 35.w,
|
|
),
|
|
SizedBox(width: 12.w,),
|
|
Text(
|
|
"支付宝支付",
|
|
style: TextStyle(
|
|
fontSize: 22.w,
|
|
color: const Color.fromRGBO(51, 51, 51, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
RoundCheckBox(
|
|
onTap: (bool? value) {
|
|
setState(() {
|
|
payChecked = true;
|
|
});
|
|
},
|
|
isChecked: payChecked,
|
|
size: ScreenUtil().setWidth(30),
|
|
checkedColor: const Color.fromRGBO(117, 98, 249, 1),
|
|
checkedWidget: Icon(
|
|
Icons.check,
|
|
color: const Color.fromRGBO(255, 255, 255, 1),
|
|
size: ScreenUtil().setWidth(14),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 20.w,),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Image.asset(
|
|
"assets/wechat_pay.png",
|
|
width: 35.w,
|
|
height: 35.w,
|
|
),
|
|
SizedBox(width: 12.w,),
|
|
Text(
|
|
"支付宝支付",
|
|
style: TextStyle(
|
|
fontSize: 22.w,
|
|
color: const Color.fromRGBO(51, 51, 51, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
RoundCheckBox(
|
|
onTap: (bool? value) {
|
|
setState(() {
|
|
payChecked = false;
|
|
});
|
|
},
|
|
isChecked: !payChecked,
|
|
size: ScreenUtil().setWidth(30),
|
|
checkedColor: const Color.fromRGBO(117, 98, 249, 1),
|
|
checkedWidget: Icon(
|
|
Icons.check,
|
|
color: const Color.fromRGBO(255, 255, 255, 1),
|
|
size: ScreenUtil().setWidth(14),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 17.w,),
|
|
Row(
|
|
children: [
|
|
RichText(
|
|
text: TextSpan(
|
|
style: TextStyle(
|
|
fontSize: 22.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
children: const [
|
|
TextSpan(
|
|
text: "充值既代表同意",
|
|
style: TextStyle(
|
|
color: Color.fromRGBO(189, 189, 189, 1)
|
|
)
|
|
),
|
|
TextSpan(
|
|
text: "《动我充值协议》",
|
|
style: TextStyle(
|
|
color: Color.fromRGBO(71, 123, 255, 1)
|
|
)
|
|
),
|
|
TextSpan(
|
|
text: "和隐私政策",
|
|
style: TextStyle(
|
|
color: Color.fromRGBO(189, 189, 189, 1)
|
|
)
|
|
),
|
|
]
|
|
),
|
|
)
|
|
],
|
|
),
|
|
SizedBox(height: 100.w,),
|
|
Container(
|
|
width: 650.w,
|
|
height: 90.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(90.w)),
|
|
gradient: LinearGradient(
|
|
begin: Alignment.centerLeft, // 0%：左边开始
|
|
end: Alignment.centerRight, // 100%：右边结束
|
|
colors: [
|
|
Color.fromRGBO(131, 89, 255, 1), // 紫色
|
|
Color.fromRGBO(77, 127, 231, 1), // 中间淡蓝
|
|
Color.fromRGBO(61, 138, 224, 1), // 右侧深蓝
|
|
],
|
|
stops: [0.0, 0.7753, 1.0], // 对应 CSS 百分比：0%、77.53%、100%
|
|
),
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
"立即充值",
|
|
style: TextStyle(
|
|
fontSize: 36.w,
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
class PayItem extends StatefulWidget {
|
|
final Map item;
|
|
final int active;
|
|
final int index;
|
|
final void Function(int) changeActive;
|
|
const PayItem({super.key, required this.item, required this.active, required this.index, required this.changeActive, });
|
|
|
|
@override
|
|
State<PayItem> createState() => _PayItemState();
|
|
}
|
|
|
|
class _PayItemState extends State<PayItem> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return InkWell(
|
|
onTap: (){
|
|
widget.changeActive(widget.index);
|
|
},
|
|
child: Stack(
|
|
children: [
|
|
Container(
|
|
width: 227.w,
|
|
height: 110.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(18.w)),
|
|
color: widget.active == widget.index ? const Color.fromRGBO(239, 19, 46, .05) : const Color.fromRGBO(247, 247, 247, 1),
|
|
border: widget.active == widget.index ? Border.all(width: 1, color: const Color.fromRGBO(239, 19, 46, 1)) : null
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
RichText(
|
|
text: TextSpan(
|
|
children: [
|
|
TextSpan(
|
|
text: "${widget.item["num"]}",
|
|
style: TextStyle(
|
|
fontSize: 35.w,
|
|
color: const Color.fromRGBO(51, 51, 51, 1),
|
|
fontWeight: FontWeight.w700
|
|
),
|
|
),
|
|
TextSpan(
|
|
text: "玫瑰",
|
|
style: TextStyle(
|
|
fontSize: 22.w,
|
|
color: const Color.fromRGBO(51, 51, 51, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
]
|
|
),
|
|
),
|
|
Text(
|
|
"${widget.item["price"]}元",
|
|
style: TextStyle(
|
|
fontSize: 22.w,
|
|
color: const Color.fromRGBO(144, 144, 144, 144),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
if(widget.item["hasTag"]) Positioned(
|
|
top: 0,
|
|
left: 0,
|
|
child: Container(
|
|
width: 107.w,
|
|
height: 23.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(18.w),
|
|
bottomRight: Radius.circular(18.w),
|
|
),
|
|
color: widget.active == widget.index ? null :const Color.fromRGBO(238, 24, 50, .1),
|
|
gradient: widget.active == widget.index ? LinearGradient(
|
|
begin: Alignment.centerLeft, // 对应 0%
|
|
end: Alignment.centerRight, // 对应 100%
|
|
colors: [
|
|
Color.fromRGBO(238, 24, 50, 1), // #EE1832 深红
|
|
Color.fromRGBO(250, 101, 64, 1), // #FA6540 橙红
|
|
Color.fromRGBO(255, 131, 69, 1), // #FF8345 浅橙
|
|
],
|
|
stops: [0.0, 0.7216, 1.0], // 对应 CSS 中的百分比位置
|
|
) : null,
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
"送新人大礼包",
|
|
style: TextStyle(
|
|
fontSize: 12.w,
|
|
color: widget.active == widget.index ? Colors.white : const Color.fromRGBO(237, 23, 50, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
if(widget.active == widget.index) Positioned(
|
|
right: 0,
|
|
bottom: 0,
|
|
child: Container(
|
|
width: 35.w,
|
|
height: 26.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(18.w),
|
|
bottomRight: Radius.circular(18.w),
|
|
),
|
|
color: const Color.fromRGBO(239, 19, 46, 1)
|
|
),
|
|
child: Center(
|
|
child: Image.asset(
|
|
"assets/check.png",
|
|
width: 13.w,
|
|
height: 9.w,
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|