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.
363 lines
14 KiB
363 lines
14 KiB
import 'package:dating_touchme_app/components/page_appbar.dart';
|
|
import 'package:dating_touchme_app/controller/mine/rose_controller.dart';
|
|
import 'package:dating_touchme_app/extension/ex_widget.dart';
|
|
import 'package:dating_touchme_app/generated/assets.dart';
|
|
import 'package:dating_touchme_app/model/mine/rose_data.dart';
|
|
import 'package:dating_touchme_app/pages/mine/rose_history_page.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:get/get.dart';
|
|
|
|
class RosePage extends StatelessWidget {
|
|
const RosePage({super.key});
|
|
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GetX<RoseController>(
|
|
init: RoseController(),
|
|
builder: (controller){
|
|
return Scaffold(
|
|
appBar: PageAppbar(title: "玫瑰充值", right: Container(
|
|
margin: EdgeInsets.only(right: 14.w),
|
|
child: InkWell(
|
|
onTap: (){
|
|
// context.pushNamed(RouteNames.payHistory);
|
|
Get.to(() => RoseHistoryPage());
|
|
},
|
|
child: Text(
|
|
"交易记录",
|
|
style: TextStyle(
|
|
fontSize: 13.w,
|
|
color: const Color.fromRGBO(144, 144, 144, 1),
|
|
),
|
|
),
|
|
),
|
|
),),
|
|
body: SingleChildScrollView(
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: 10.w,
|
|
horizontal: 12.w
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Image.asset(
|
|
Assets.imagesRoseBanner,
|
|
width: 350.w,
|
|
height: 161.w,
|
|
),
|
|
SizedBox(height: 22.w,),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
"余额：",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(144, 144, 144, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
Text(
|
|
"${controller.roseNum.value}",
|
|
style: TextStyle(
|
|
fontSize: 16.w,
|
|
color: const Color.fromRGBO(117, 98, 249, 1),
|
|
fontWeight: FontWeight.w700
|
|
),
|
|
),
|
|
SizedBox(width: 5.w,),
|
|
Image.asset(
|
|
Assets.imagesRoseGift,
|
|
width: 13.w,
|
|
height: 13.w,
|
|
)
|
|
],
|
|
),
|
|
|
|
|
|
Wrap(
|
|
spacing: 4.w,
|
|
runSpacing: 7.w,
|
|
children: [
|
|
...controller.roseList.asMap().entries.map((entry){
|
|
return PayItem(item: entry.value, active: controller.activePay.value, index: entry.key, changeActive: controller.changePayActive);
|
|
}),
|
|
],
|
|
),
|
|
Container(
|
|
height: 1,
|
|
margin: EdgeInsets.only(
|
|
top: 10.w,
|
|
bottom: 15.w
|
|
),
|
|
color: const Color.fromRGBO(219, 219, 219, 1),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Image.asset(
|
|
Assets.imagesAliPay,
|
|
width: 17.w,
|
|
height: 17.w,
|
|
),
|
|
SizedBox(width: 6.w,),
|
|
Text(
|
|
"支付宝支付",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(51, 51, 51, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
Checkbox(
|
|
value: controller.payChecked.value,
|
|
onChanged: (value) {
|
|
controller.payChecked.value = true;
|
|
},
|
|
activeColor: const Color.fromRGBO(117, 98, 249, 1),
|
|
side: const BorderSide(color: Colors.grey),
|
|
shape: const CircleBorder(),
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 10.w,),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Image.asset(
|
|
Assets.imagesWechatPay,
|
|
width: 17.w,
|
|
height: 17.w,
|
|
),
|
|
SizedBox(width: 6.w,),
|
|
Text(
|
|
"微信支付",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(51, 51, 51, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
Checkbox(
|
|
value: !controller.payChecked.value,
|
|
onChanged: (value) {
|
|
controller.payChecked.value = false;
|
|
},
|
|
activeColor: const Color.fromRGBO(117, 98, 249, 1),
|
|
side: const BorderSide(color: Colors.grey),
|
|
shape: const CircleBorder(),
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 8.w,),
|
|
Row(
|
|
children: [
|
|
RichText(
|
|
text: TextSpan(
|
|
style: TextStyle(
|
|
fontSize: 11.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: 50.w,),
|
|
Container(
|
|
width: 325.w,
|
|
height: 45.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(45.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: 18.w,
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
),
|
|
).onTap((){
|
|
controller.submitOrder();
|
|
})
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
class PayItem extends StatefulWidget {
|
|
final RoseData 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: 113.w,
|
|
height: 55.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(9.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.purchaseTimeValue}",
|
|
style: TextStyle(
|
|
fontSize: 17.w,
|
|
color: const Color.fromRGBO(51, 51, 51, 1),
|
|
fontWeight: FontWeight.w700
|
|
),
|
|
),
|
|
TextSpan(
|
|
text: "玫瑰",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(51, 51, 51, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
]
|
|
),
|
|
),
|
|
Text(
|
|
"${widget.item.unitSellingPriceStr}元",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(144, 144, 144, 144),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
if(widget.item.detailDesc != null) Positioned(
|
|
top: 0,
|
|
left: 0,
|
|
child: Container(
|
|
width: 53.w,
|
|
height: 11.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(9.w),
|
|
bottomRight: Radius.circular(9.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(
|
|
widget.item.detailDesc ?? "",
|
|
style: TextStyle(
|
|
fontSize: 6.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: 17.w,
|
|
height: 13.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(9.w),
|
|
bottomRight: Radius.circular(9.w),
|
|
),
|
|
color: const Color.fromRGBO(239, 19, 46, 1)
|
|
),
|
|
child: Center(
|
|
child: Image.asset(
|
|
Assets.imagesCheck,
|
|
width: 6.w,
|
|
height: 4.w,
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|