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.
454 lines
15 KiB
454 lines
15 KiB
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/help_info_page.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:get/get_core/src/get_main.dart';
|
|
|
|
class UserHelpCenterPage extends StatefulWidget {
|
|
const UserHelpCenterPage({super.key});
|
|
|
|
@override
|
|
State<UserHelpCenterPage> createState() => _UserHelpCenterPageState();
|
|
}
|
|
|
|
class _UserHelpCenterPageState extends State<UserHelpCenterPage> {
|
|
|
|
String search = '';
|
|
final TextEditingController searchController = TextEditingController();
|
|
|
|
List<String> navList = [
|
|
"推荐", "投诉举报", "账号问题", "充值提现", "产品功能"
|
|
];
|
|
|
|
int actionNav = 0;
|
|
|
|
List<Map> serviceList = [
|
|
{"icon": Assets.imagesRealnameHelp, "label": "实名认证"},
|
|
{"icon": Assets.imagesPhoneHelp, "label": "手机绑定"},
|
|
];
|
|
|
|
List<String> questionList = [
|
|
"充值了会员为什么无法畅聊",
|
|
"私聊/语音/视频聊天收费标准是什么",
|
|
"如何交换联系方式",
|
|
"如何取消VIP自动续费",
|
|
"账号注销问题"
|
|
];
|
|
|
|
changeNav(int i){
|
|
actionNav = i;
|
|
setState(() {
|
|
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
children: [
|
|
Positioned(
|
|
child: Container(
|
|
width: 375.w,
|
|
height: 821.h,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
Positioned(
|
|
left: -175.w,
|
|
top: -200.w,
|
|
child: Image.asset(
|
|
Assets.imagesHelpBg,
|
|
width: 750.w,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
Scaffold(
|
|
backgroundColor: Colors.transparent,
|
|
appBar: PageAppbar(title: "用户帮助中心", backgroundColor: Colors.transparent,),
|
|
body: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.only(
|
|
left: 11.w,
|
|
right: 20.w
|
|
),
|
|
margin: EdgeInsets.only(
|
|
bottom: 10.w
|
|
),
|
|
child: Container(
|
|
height: 45.w,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(9.w)),
|
|
color: Colors.white
|
|
),
|
|
child: TextField(
|
|
controller: searchController,
|
|
keyboardType: TextInputType.number,
|
|
style: TextStyle(
|
|
fontSize: ScreenUtil().setWidth(13),
|
|
height: 1
|
|
),
|
|
decoration: InputDecoration(
|
|
contentPadding: EdgeInsets.symmetric(
|
|
vertical: 0,
|
|
horizontal: 0.w
|
|
),
|
|
|
|
prefixIcon: Icon(
|
|
Icons.search,
|
|
size: 18.w,
|
|
color: const Color.fromRGBO(51, 51, 51, 1),
|
|
),
|
|
|
|
hintText: "请输入要查询的内容",
|
|
|
|
hintStyle: TextStyle(
|
|
color: const Color.fromRGBO(191, 191, 191, 1)
|
|
|
|
),
|
|
|
|
border: const OutlineInputBorder(
|
|
borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
|
|
),
|
|
// 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
|
|
focusedBorder: const OutlineInputBorder(
|
|
borderSide: BorderSide.none,
|
|
borderRadius: BorderRadius.all(Radius.circular(8.0)),
|
|
),
|
|
enabledBorder: const OutlineInputBorder(
|
|
borderSide: BorderSide.none,
|
|
borderRadius: BorderRadius.all(Radius.circular(8.0)),
|
|
),
|
|
),
|
|
onChanged: (value){
|
|
search = value;
|
|
setState(() {
|
|
|
|
});
|
|
},
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
padding: EdgeInsets.only(
|
|
left: 11.w,
|
|
right: 17.w
|
|
),
|
|
margin: EdgeInsets.only(
|
|
bottom: 9.w
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
...navList.asMap().entries.map((entry){
|
|
return NavItem(index: entry.key, action: actionNav, label: entry.value, cb: changeNav);
|
|
}),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: 15.w,
|
|
horizontal: 10.w
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.vertical(
|
|
top: Radius.circular(9.w)
|
|
)
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Text(
|
|
"自助服务",
|
|
style: TextStyle(
|
|
fontSize: 16.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
Container(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: 15.w
|
|
),
|
|
margin: EdgeInsets.only(
|
|
top: 17.w,
|
|
bottom: 30.w
|
|
),
|
|
child: Row(
|
|
children: [
|
|
...serviceList.map((e){
|
|
return ServiceItem(icon: e["icon"], label: e["label"]);
|
|
})
|
|
],
|
|
),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
"常见问题",
|
|
style: TextStyle(
|
|
fontSize: 16.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
Text(
|
|
"查看更多",
|
|
style: TextStyle(
|
|
fontSize: 11.w,
|
|
color: const Color.fromRGBO(144, 144, 144, 1),
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
),
|
|
SizedBox(width: 10.w,),
|
|
Icon(
|
|
Icons.keyboard_arrow_right,
|
|
size: 20.w,
|
|
color: const Color.fromRGBO(191, 191, 191, 1),
|
|
)
|
|
],
|
|
)
|
|
],
|
|
),
|
|
SizedBox(
|
|
height: 16.w,
|
|
),
|
|
Container(
|
|
padding: EdgeInsets.only(
|
|
top: 20.w,
|
|
right: 10.w,
|
|
left: 17.w
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(9.w)),
|
|
color: const Color.fromRGBO(250, 250, 250, 1)
|
|
),
|
|
child: Column(
|
|
children: [
|
|
...questionList.asMap().entries.map((entry){
|
|
return QuestionItem(index: entry.key, label: entry.value).onTap((){
|
|
Get.to(() => HelpInfoPage());
|
|
});
|
|
}),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
bottomNavigationBar:
|
|
SafeArea(
|
|
child: SizedBox(
|
|
height: 40.h,
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Image.asset(
|
|
Assets.imagesEdit,
|
|
width: 15.w,
|
|
),
|
|
SizedBox(width: 8.w,),
|
|
Text(
|
|
"意见反馈",
|
|
style: TextStyle(
|
|
fontSize: 16.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
width: 1,
|
|
height: 20.w,
|
|
color: const Color.fromRGBO(230, 230, 230, 1),
|
|
),
|
|
Expanded(
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Image.asset(
|
|
Assets.imagesCustomer,
|
|
width: 20.w,
|
|
height: 20.w,
|
|
),
|
|
SizedBox(width: 4.w,),
|
|
Text(
|
|
"联系客服",
|
|
style: TextStyle(
|
|
fontSize: 16.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class NavItem extends StatefulWidget {
|
|
final int index;
|
|
final int action;
|
|
final String label;
|
|
final void Function(int) cb;
|
|
const NavItem({super.key,
|
|
required this.index,
|
|
required this.action,
|
|
required this.label,
|
|
required this.cb,
|
|
});
|
|
|
|
@override
|
|
State<NavItem> createState() => _NavItemState();
|
|
}
|
|
|
|
class _NavItemState extends State<NavItem> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
padding: EdgeInsets.symmetric(
|
|
vertical: 2.w,
|
|
horizontal: 10.w
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(4.w)),
|
|
color: widget.index == widget.action ? Colors.white : const Color.fromRGBO(245, 245, 245, 1)
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
widget.label,
|
|
style: TextStyle(
|
|
fontSize: 13.w,
|
|
color: widget.index == widget.action ? const Color.fromRGBO(51, 51, 51, 1) : const Color.fromRGBO(144, 144, 144, 1),
|
|
fontWeight: widget.index == widget.action ? FontWeight.w500 : FontWeight.w400
|
|
),
|
|
),
|
|
),
|
|
).onTap((){
|
|
widget.cb(widget.index);
|
|
});
|
|
}
|
|
}
|
|
|
|
class ServiceItem extends StatefulWidget {
|
|
final String icon;
|
|
final String label;
|
|
const ServiceItem({super.key, required this.icon, required this.label});
|
|
|
|
@override
|
|
State<ServiceItem> createState() => _ServiceItemState();
|
|
}
|
|
|
|
class _ServiceItemState extends State<ServiceItem> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
margin: EdgeInsets.only(
|
|
right: 22.w
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
width: 64.w,
|
|
height: 64.w,
|
|
margin: EdgeInsets.only(bottom: 5.w),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(64.w)),
|
|
color: const Color.fromRGBO(245, 245, 245, 1)
|
|
),
|
|
child: Center(
|
|
child: Image.asset(
|
|
widget.icon,
|
|
width: 44.w,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
Text(
|
|
widget.label,
|
|
style: TextStyle(
|
|
fontSize: 13.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class QuestionItem extends StatefulWidget {
|
|
final int index;
|
|
final String label;
|
|
const QuestionItem({super.key, required this.index, required this.label});
|
|
|
|
@override
|
|
State<QuestionItem> createState() => _QuestionItemState();
|
|
}
|
|
|
|
class _QuestionItemState extends State<QuestionItem> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
margin: EdgeInsets.only(
|
|
bottom: 20.w
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
RichText(
|
|
text: TextSpan(
|
|
style: TextStyle(
|
|
fontSize: 13.w,
|
|
fontWeight: FontWeight.w500
|
|
),
|
|
children: [
|
|
TextSpan(
|
|
text: "${widget.index + 1}. ",
|
|
style: TextStyle(
|
|
color: const Color.fromRGBO(248, 85, 66, 1)
|
|
)
|
|
),
|
|
TextSpan(
|
|
text: "${widget.label}",
|
|
style: TextStyle(
|
|
color: const Color.fromRGBO(51, 51, 51, 1)
|
|
)
|
|
),
|
|
]
|
|
),
|
|
),
|
|
Icon(
|
|
Icons.play_arrow,
|
|
size: 15.w,
|
|
color: const Color.fromRGBO(204, 204, 204, 1),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|