|
|
|
@ -1,7 +1,11 @@ |
|
|
|
import 'package:dating_touchme_app/components/page_appbar.dart'; |
|
|
|
import 'package:dating_touchme_app/extension/ex_widget.dart'; |
|
|
|
import 'package:dating_touchme_app/generated/assets.dart'; |
|
|
|
import 'package:dating_touchme_app/pages/mine/pay_fail_page.dart'; |
|
|
|
import 'package:dating_touchme_app/pages/mine/vip_manage_page.dart'; |
|
|
|
import 'package:flutter/material.dart'; |
|
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
|
|
|
import 'package:get/get.dart'; |
|
|
|
|
|
|
|
class VipPage extends StatefulWidget { |
|
|
|
const VipPage({super.key}); |
|
|
|
@ -15,6 +19,19 @@ class _VipPageState extends State<VipPage> { |
|
|
|
|
|
|
|
bool checked = false; |
|
|
|
|
|
|
|
int vipActive = 0; |
|
|
|
|
|
|
|
List<Map> vipPrivilege = [ |
|
|
|
{"img": Assets.imagesVipSpecial, "label": "特殊标识"}, |
|
|
|
{"img": Assets.imagesVipVisitor, "label": "最近访客"}, |
|
|
|
{"img": Assets.imagesVipGift, "label": "专属礼物"}, |
|
|
|
{"img": Assets.imagesVipVoice, "label": "语音弹幕"}, |
|
|
|
]; |
|
|
|
|
|
|
|
int payActive = 0; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@override |
|
|
|
Widget build(BuildContext context) { |
|
|
|
return Stack( |
|
|
|
@ -46,7 +63,7 @@ class _VipPageState extends State<VipPage> { |
|
|
|
), |
|
|
|
child: InkWell( |
|
|
|
onTap: (){ |
|
|
|
print("12121"); |
|
|
|
Get.to(() => VipManagePage()); |
|
|
|
}, |
|
|
|
child: Image.asset( |
|
|
|
Assets.imagesSettingIcon, |
|
|
|
@ -60,7 +77,7 @@ class _VipPageState extends State<VipPage> { |
|
|
|
children: [ |
|
|
|
Container( |
|
|
|
padding: EdgeInsets.only( |
|
|
|
top: 20.w, |
|
|
|
top: 5.w, |
|
|
|
left: 15.w |
|
|
|
), |
|
|
|
child: |
|
|
|
@ -131,7 +148,7 @@ class _VipPageState extends State<VipPage> { |
|
|
|
), |
|
|
|
), |
|
|
|
Positioned( |
|
|
|
top: 270.w, |
|
|
|
top: 260.w, |
|
|
|
left: 0, |
|
|
|
child: Material( |
|
|
|
child: Container( |
|
|
|
@ -152,9 +169,24 @@ class _VipPageState extends State<VipPage> { |
|
|
|
Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
VipItem(), |
|
|
|
VipItem(), |
|
|
|
VipItem(), |
|
|
|
VipItem(active: vipActive, index: 0,).onTap((){ |
|
|
|
vipActive = 0; |
|
|
|
setState(() { |
|
|
|
|
|
|
|
}); |
|
|
|
}), |
|
|
|
VipItem(active: vipActive, index: 1,).onTap((){ |
|
|
|
vipActive = 1; |
|
|
|
setState(() { |
|
|
|
|
|
|
|
}); |
|
|
|
}), |
|
|
|
VipItem(active: vipActive, index: 2,).onTap((){ |
|
|
|
vipActive = 2; |
|
|
|
setState(() { |
|
|
|
|
|
|
|
}); |
|
|
|
}), |
|
|
|
], |
|
|
|
), |
|
|
|
SizedBox(height: 12.w,), |
|
|
|
@ -201,11 +233,184 @@ class _VipPageState extends State<VipPage> { |
|
|
|
padding: EdgeInsets.symmetric( |
|
|
|
horizontal: 18.w |
|
|
|
), |
|
|
|
child: Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
...vipPrivilege.map((e){ |
|
|
|
return VipPrivilege(img: e["img"], label: e["label"]); |
|
|
|
}) |
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
SizedBox(height: 15.w,), |
|
|
|
Container( |
|
|
|
height: 60.w, |
|
|
|
padding: EdgeInsets.symmetric( |
|
|
|
vertical: 19.w, |
|
|
|
horizontal: 18.w |
|
|
|
), |
|
|
|
margin: EdgeInsets.only( |
|
|
|
bottom: 10.w |
|
|
|
), |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(9.w)), |
|
|
|
color: const Color.fromRGBO(117, 98, 249, .1) |
|
|
|
), |
|
|
|
child: Row( |
|
|
|
children: [ |
|
|
|
Image.asset( |
|
|
|
Assets.imagesVipChat, |
|
|
|
width: 34.w, |
|
|
|
), |
|
|
|
SizedBox(width: 16.w,), |
|
|
|
Text( |
|
|
|
"【聊天券】立即得70张，后续每天领7张，共280张", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 11.w, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
Container( |
|
|
|
height: 60.w, |
|
|
|
padding: EdgeInsets.symmetric( |
|
|
|
vertical: 19.w, |
|
|
|
horizontal: 18.w |
|
|
|
), |
|
|
|
margin: EdgeInsets.only( |
|
|
|
bottom: 10.w |
|
|
|
), |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(9.w)), |
|
|
|
color: const Color.fromRGBO(117, 98, 249, .1) |
|
|
|
), |
|
|
|
child: Row( |
|
|
|
children: [ |
|
|
|
|
|
|
|
Image.asset( |
|
|
|
Assets.imagesVipMessage, |
|
|
|
width: 34.w, |
|
|
|
), |
|
|
|
SizedBox(width: 16.w,), |
|
|
|
Text( |
|
|
|
"【消息回执】消息已读！看到了~", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 11.w, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
Spacer(), |
|
|
|
Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
Container( |
|
|
|
width: 86.w, |
|
|
|
height: 30.w, |
|
|
|
padding: EdgeInsets.symmetric( |
|
|
|
horizontal: 9.w |
|
|
|
), |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(30.w)), |
|
|
|
border: Border.all( |
|
|
|
width: 1, |
|
|
|
color: Color.fromRGBO(117, 98, 249, payActive == 0 ? 1 : 0)), |
|
|
|
color: payActive == 0 ? |
|
|
|
const Color.fromRGBO(117, 98, 249, .07) : |
|
|
|
const Color.fromRGBO(247, 247, 247, 1) |
|
|
|
), |
|
|
|
child: Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
Image.asset( |
|
|
|
Assets.imagesWechatPay, |
|
|
|
width: 17.w, |
|
|
|
), |
|
|
|
Text( |
|
|
|
"微信支付", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 11.w, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
).onTap((){ |
|
|
|
payActive = 0; |
|
|
|
setState(() { |
|
|
|
|
|
|
|
}); |
|
|
|
}), |
|
|
|
Container( |
|
|
|
width: 80.w, |
|
|
|
height: 30.w, |
|
|
|
padding: EdgeInsets.symmetric( |
|
|
|
horizontal: 12.w |
|
|
|
), |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(30.w)), |
|
|
|
border: Border.all( |
|
|
|
width: 1, |
|
|
|
color: Color.fromRGBO(117, 98, 249, payActive == 1 ? 1 : 0)), |
|
|
|
color: payActive == 1 ? |
|
|
|
const Color.fromRGBO(117, 98, 249, .07) : |
|
|
|
const Color.fromRGBO(247, 247, 247, 1) |
|
|
|
), |
|
|
|
child: Row( |
|
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
|
children: [ |
|
|
|
Image.asset( |
|
|
|
Assets.imagesAliPay, |
|
|
|
width: 17.w, |
|
|
|
), |
|
|
|
Text( |
|
|
|
"支付宝", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 11.w, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
).onTap((){ |
|
|
|
payActive = 1; |
|
|
|
setState(() { |
|
|
|
|
|
|
|
}); |
|
|
|
}), |
|
|
|
Container( |
|
|
|
width: 161.w, |
|
|
|
height: 45.w, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(45.w)), |
|
|
|
gradient: LinearGradient( |
|
|
|
begin: Alignment.centerLeft, // 90deg: 从左到右 |
|
|
|
end: Alignment.centerRight, |
|
|
|
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], // 对应 0%、77.53%、100% |
|
|
|
), |
|
|
|
), |
|
|
|
child: Center( |
|
|
|
child: Text( |
|
|
|
"立即开通", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 18.w, |
|
|
|
color: Colors.white, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
).onTap((){ |
|
|
|
Get.to(() => PayFailPage()); |
|
|
|
}) |
|
|
|
], |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
@ -218,7 +423,9 @@ class _VipPageState extends State<VipPage> { |
|
|
|
} |
|
|
|
|
|
|
|
class VipItem extends StatefulWidget { |
|
|
|
const VipItem({super.key}); |
|
|
|
final int index; |
|
|
|
final int active; |
|
|
|
const VipItem({super.key, required this.index, required this.active}); |
|
|
|
|
|
|
|
@override |
|
|
|
State<VipItem> createState() => _VipItemState(); |
|
|
|
@ -227,66 +434,112 @@ class VipItem extends StatefulWidget { |
|
|
|
class _VipItemState extends State<VipItem> { |
|
|
|
@override |
|
|
|
Widget build(BuildContext context) { |
|
|
|
return |
|
|
|
Container( |
|
|
|
width: 111.w, |
|
|
|
height: 117.w, |
|
|
|
padding: EdgeInsets.only( |
|
|
|
top: 16.w, |
|
|
|
bottom: 21.w |
|
|
|
), |
|
|
|
decoration: BoxDecoration( |
|
|
|
return Stack( |
|
|
|
clipBehavior: Clip.none, |
|
|
|
children: [ |
|
|
|
Container( |
|
|
|
width: 113.w, |
|
|
|
height: 119.w, |
|
|
|
padding: EdgeInsets.only( |
|
|
|
top: 16.w, |
|
|
|
bottom: 21.w |
|
|
|
), |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(18.w)), |
|
|
|
border: Border.all(width: 1, color: Color.fromRGBO(222, 222, 222, 1)) |
|
|
|
), |
|
|
|
child: Column( |
|
|
|
children: [ |
|
|
|
Text( |
|
|
|
"3个月", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 11.w, |
|
|
|
fontWeight: FontWeight.w700 |
|
|
|
), |
|
|
|
border: widget.active == widget.index ? |
|
|
|
Border.all( |
|
|
|
width: 2, |
|
|
|
color: const Color.fromRGBO(117, 98, 249, 1)) : Border.all( |
|
|
|
width: 1, |
|
|
|
color: Color.fromRGBO(222, 222, 222, 1) |
|
|
|
), |
|
|
|
SizedBox(height: 2.w,), |
|
|
|
Text( |
|
|
|
"￥29.3/月", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 11.w, |
|
|
|
color: const Color.fromRGBO(144, 144, 144, 1) |
|
|
|
gradient: widget.active == widget.index ? LinearGradient( |
|
|
|
begin: Alignment.centerLeft, // 90deg → 从左到右 |
|
|
|
end: Alignment.centerRight, |
|
|
|
colors: [ |
|
|
|
Color.fromRGBO(232, 199, 255, 0.2), // 左侧淡紫色（20% 透明） |
|
|
|
Color.fromRGBO(194, 195, 255, 0.2), // 右侧淡蓝紫色（20% 透明） |
|
|
|
], |
|
|
|
stops: [0.0, 1.0], // 可省略，默认就是 [0.0, 1.0] |
|
|
|
) : null, |
|
|
|
), |
|
|
|
child: Column( |
|
|
|
children: [ |
|
|
|
Text( |
|
|
|
"3个月", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 11.w, |
|
|
|
fontWeight: FontWeight.w700 |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
SizedBox(height: 23.w,), |
|
|
|
RichText( |
|
|
|
text: TextSpan( |
|
|
|
SizedBox(height: 2.w,), |
|
|
|
Text( |
|
|
|
"￥29.3/月", |
|
|
|
style: TextStyle( |
|
|
|
color: const Color.fromRGBO(248, 85, 66, 1), |
|
|
|
fontWeight: FontWeight.w700 |
|
|
|
fontSize: 11.w, |
|
|
|
color: const Color.fromRGBO(144, 144, 144, 1) |
|
|
|
), |
|
|
|
children: [ |
|
|
|
TextSpan( |
|
|
|
text: "￥", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 12.w |
|
|
|
) |
|
|
|
), |
|
|
|
TextSpan( |
|
|
|
text: "88", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 18.w |
|
|
|
) |
|
|
|
), |
|
|
|
] |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
SizedBox(height: 23.w,), |
|
|
|
RichText( |
|
|
|
text: TextSpan( |
|
|
|
style: TextStyle( |
|
|
|
color: const Color.fromRGBO(248, 85, 66, 1), |
|
|
|
fontWeight: FontWeight.w700 |
|
|
|
), |
|
|
|
children: [ |
|
|
|
TextSpan( |
|
|
|
text: "￥", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 12.w |
|
|
|
) |
|
|
|
), |
|
|
|
TextSpan( |
|
|
|
text: "88", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 18.w |
|
|
|
) |
|
|
|
), |
|
|
|
] |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
), |
|
|
|
); |
|
|
|
Positioned( |
|
|
|
left: 0, |
|
|
|
top: -5.w, |
|
|
|
child: Stack( |
|
|
|
children: [ |
|
|
|
Image.asset( |
|
|
|
Assets.imagesVipBuyTag, |
|
|
|
width: 60.w, |
|
|
|
height: 18.w, |
|
|
|
), |
|
|
|
Positioned.fill( |
|
|
|
child: Center( |
|
|
|
child: Text( |
|
|
|
"推荐", |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 11.w, |
|
|
|
color: Colors.white, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
class VipPrivilege extends StatefulWidget { |
|
|
|
const VipPrivilege({super.key}); |
|
|
|
final String img; |
|
|
|
final String label; |
|
|
|
const VipPrivilege({super.key, required this.img, required this.label}); |
|
|
|
|
|
|
|
@override |
|
|
|
State<VipPrivilege> createState() => _VipPrivilegeState(); |
|
|
|
@ -297,8 +550,27 @@ class _VipPrivilegeState extends State<VipPrivilege> { |
|
|
|
Widget build(BuildContext context) { |
|
|
|
return Column( |
|
|
|
children: [ |
|
|
|
Image.asset( |
|
|
|
Assets.imagesWallet |
|
|
|
Container( |
|
|
|
width: 54.w, |
|
|
|
height: 54.w, |
|
|
|
decoration: BoxDecoration( |
|
|
|
borderRadius: BorderRadius.all(Radius.circular(18.w)), |
|
|
|
color: const Color.fromRGBO(245, 245, 245, 1) |
|
|
|
), |
|
|
|
child: Center( |
|
|
|
child: Image.asset( |
|
|
|
widget.img, |
|
|
|
width: 30.w, |
|
|
|
), |
|
|
|
), |
|
|
|
), |
|
|
|
SizedBox(height: 3.w,), |
|
|
|
Text( |
|
|
|
widget.label, |
|
|
|
style: TextStyle( |
|
|
|
fontSize: 11.w, |
|
|
|
fontWeight: FontWeight.w500 |
|
|
|
), |
|
|
|
) |
|
|
|
], |
|
|
|
); |
|
|
|
|
王子贤
4 months ago
