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.
613 lines
23 KiB
613 lines
23 KiB
import 'package:cached_network_image/cached_network_image.dart';
|
|
import 'package:dating_touchme_app/components/page_appbar.dart';
|
|
import 'package:dating_touchme_app/controller/global.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:fluwx/fluwx.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:url_launcher/url_launcher_string.dart';
|
|
|
|
class VipPage extends StatefulWidget {
|
|
const VipPage({super.key});
|
|
|
|
@override
|
|
State<VipPage> createState() => _VipPageState();
|
|
}
|
|
|
|
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;
|
|
|
|
final Fluwx fluwx = Fluwx();
|
|
|
|
final userData = GlobalData().userData.obs;
|
|
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
children: [
|
|
Positioned(
|
|
child: Container(
|
|
width: 375.w,
|
|
height: 812.h,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
Positioned(
|
|
left: 0,
|
|
top: -200,
|
|
child: Image.asset(
|
|
Assets.imagesVipBg,
|
|
width: 561.w,
|
|
height: 1120.w,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
Scaffold(
|
|
appBar: PageAppbar(
|
|
title: "会员中心",
|
|
backgroundColor: Colors.transparent,
|
|
right: Container(
|
|
margin: EdgeInsets.only(
|
|
right: 18.w
|
|
),
|
|
child: InkWell(
|
|
onTap: (){
|
|
Get.to(() => VipManagePage());
|
|
},
|
|
child: Image.asset(
|
|
Assets.imagesSettingIcon,
|
|
width: 17.w,
|
|
),
|
|
),
|
|
),),
|
|
backgroundColor: Colors.transparent,
|
|
body: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.only(
|
|
top: 5.w,
|
|
left: 15.w
|
|
),
|
|
child:
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween ,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.all(Radius.circular(60.w)),
|
|
child: (userData.value?.profilePhoto?.isNotEmpty ?? false) ? CachedNetworkImage(
|
|
imageUrl: "${userData.value?.profilePhoto ?? ""}?x-oss-process=image/format,webp/resize,w_120",
|
|
width: 60.w,
|
|
height: 60.w,
|
|
imageBuilder: (context, imageProvider) => Container(
|
|
decoration: BoxDecoration(
|
|
image: DecorationImage(
|
|
image: imageProvider,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
) : Image.asset(
|
|
Assets.imagesUserAvatar,
|
|
width: 60.w,
|
|
height: 60.w,
|
|
)
|
|
),
|
|
SizedBox(width: 15.w,),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
userData.value?.nickName ?? "",
|
|
style: TextStyle(
|
|
fontSize: 18.w,
|
|
fontWeight: FontWeight.w700
|
|
),
|
|
),
|
|
SizedBox(height: 6.w,),
|
|
Container(
|
|
width: 32.w,
|
|
height: 16.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(16.w)),
|
|
color: const Color.fromRGBO(201, 201, 201, 1)
|
|
),
|
|
child: Center(
|
|
child: Image.asset(
|
|
Assets.imagesVipFont,
|
|
width: 20.w,
|
|
height: 8.w,
|
|
),
|
|
),
|
|
)
|
|
],
|
|
)
|
|
],
|
|
),
|
|
SizedBox(height: 29.w,),
|
|
Text(
|
|
"开通 趣恋恋vip 畅享尊贵特权~",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(144, 144, 144, 1 )
|
|
),
|
|
)
|
|
],
|
|
),
|
|
Image.asset(
|
|
Assets.imagesVipImg,
|
|
width: 158.w,
|
|
height: 179.w,
|
|
)
|
|
],
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 260.w,
|
|
left: 0,
|
|
child: Material(
|
|
child: Container(
|
|
width: 375.w,
|
|
height: 821.h - 270.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.vertical(
|
|
top: Radius.circular(18.w)
|
|
),
|
|
color: Colors.white
|
|
),
|
|
child: SingleChildScrollView(
|
|
child: Container(
|
|
padding: EdgeInsetsGeometry.only(
|
|
top: 22.w,
|
|
left: 13.w,
|
|
right: 13.w
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
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,),
|
|
Row(
|
|
children: [
|
|
|
|
Checkbox(
|
|
value: checked,
|
|
onChanged: (value) {
|
|
checked = value ?? false;
|
|
setState(() {
|
|
|
|
});
|
|
},
|
|
activeColor: const Color.fromRGBO(117, 98, 249, 1),
|
|
side: const BorderSide(color: Colors.grey),
|
|
shape: const CircleBorder(),
|
|
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
|
),
|
|
Text(
|
|
"我已阅读并同意《会员购买协议》",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(189, 189, 189, 1)
|
|
),
|
|
)
|
|
],
|
|
),
|
|
SizedBox(height: 25.w,),
|
|
Row(
|
|
children: [
|
|
Text(
|
|
"会员专属特权",
|
|
style: TextStyle(
|
|
fontSize: 17.w,
|
|
fontWeight: FontWeight.w500,
|
|
color: const Color.fromRGBO(54, 0, 115, 1)
|
|
),
|
|
)
|
|
],
|
|
),
|
|
SizedBox(height: 18.w,),
|
|
Container(
|
|
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
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
|
|
Row(
|
|
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(() {
|
|
|
|
});
|
|
}),
|
|
],
|
|
),
|
|
SizedBox(height: 10.w,),
|
|
Container(
|
|
width: 350.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(() async {
|
|
if(payActive == 1){
|
|
var e = await launchUrlString("alipays://platformapi/startapp?appId=20000067&url=https://www.baidu.com");
|
|
} else {
|
|
fluwx.open(target: MiniProgram(
|
|
username: 'gh_9ea8d46add6f',
|
|
miniProgramType: WXMiniProgramType.preview,
|
|
path:"pages/index/index"
|
|
));
|
|
}
|
|
})
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class VipItem extends StatefulWidget {
|
|
final int index;
|
|
final int active;
|
|
const VipItem({super.key, required this.index, required this.active});
|
|
|
|
@override
|
|
State<VipItem> createState() => _VipItemState();
|
|
}
|
|
|
|
class _VipItemState extends State<VipItem> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Container(
|
|
width: 112.w,
|
|
height: 120.h,
|
|
padding: EdgeInsets.only(
|
|
top: 16.w,
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(18.w)),
|
|
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)
|
|
),
|
|
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: 2.w,),
|
|
Text(
|
|
"￥29.3/月",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(144, 144, 144, 1)
|
|
),
|
|
),
|
|
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: 23.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 {
|
|
final String img;
|
|
final String label;
|
|
const VipPrivilege({super.key, required this.img, required this.label});
|
|
|
|
@override
|
|
State<VipPrivilege> createState() => _VipPrivilegeState();
|
|
}
|
|
|
|
class _VipPrivilegeState extends State<VipPrivilege> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
children: [
|
|
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
|
|
),
|
|
)
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|