mirror of
https://github.com/HChaZZY/PiliPlus.git
synced 2025-12-06 09:13:48 +08:00
feat: new pay coin page
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
import 'dart:async';
|
||||
import 'dart:math';
|
||||
|
||||
import 'package:PiliPalaX/http/loading_state.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:get/get_navigation/src/dialog/dialog_route.dart';
|
||||
import 'package:hive/hive.dart';
|
||||
import 'package:PiliPalaX/http/constants.dart';
|
||||
import 'package:PiliPalaX/http/user.dart';
|
||||
@@ -280,51 +282,76 @@ class VideoIntroController extends GetxController {
|
||||
}
|
||||
}
|
||||
|
||||
void coinVideo(int coin) async {
|
||||
var res = await VideoHttp.coinVideo(bvid: bvid, multiply: coin);
|
||||
if (res['status']) {
|
||||
print(res);
|
||||
SmartDialog.showToast('投币成功');
|
||||
hasCoin.value = true;
|
||||
videoDetail.value.stat!.coin = videoDetail.value.stat!.coin! + coin;
|
||||
} else {
|
||||
SmartDialog.showToast(res['msg']);
|
||||
}
|
||||
}
|
||||
|
||||
// 投币
|
||||
Future actionCoinVideo() async {
|
||||
if (userInfo == null) {
|
||||
SmartDialog.showToast('账号未登录');
|
||||
return;
|
||||
}
|
||||
void coinVideo(int coin) async {
|
||||
var res = await VideoHttp.coinVideo(bvid: bvid, multiply: coin);
|
||||
if (res['status']) {
|
||||
print(res);
|
||||
SmartDialog.showToast('投币成功');
|
||||
hasCoin.value = true;
|
||||
videoDetail.value.stat!.coin = videoDetail.value.stat!.coin! + coin;
|
||||
} else {
|
||||
SmartDialog.showToast(res['msg']);
|
||||
}
|
||||
}
|
||||
|
||||
showDialog(
|
||||
context: Get.context!,
|
||||
builder: (context) {
|
||||
return AlertDialog(
|
||||
title: const Text('选择投币个数'),
|
||||
contentPadding: const EdgeInsets.fromLTRB(0, 12, 0, 12),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Get.back(),
|
||||
child: Text('取消',
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.outline))),
|
||||
TextButton(
|
||||
onPressed: () async {
|
||||
coinVideo(1);
|
||||
Get.back();
|
||||
},
|
||||
child: const Text('投 1 枚')),
|
||||
TextButton(
|
||||
onPressed: () async {
|
||||
coinVideo(1);
|
||||
Get.back();
|
||||
},
|
||||
child: const Text('投 2 枚'))
|
||||
],
|
||||
Navigator.of(Get.context!).push(
|
||||
GetDialogRoute(
|
||||
pageBuilder: (buildContext, animation, secondaryAnimation) {
|
||||
return PayCoinsPage(
|
||||
callback: coinVideo,
|
||||
);
|
||||
});
|
||||
},
|
||||
transitionDuration: const Duration(milliseconds: 225),
|
||||
transitionBuilder: (context, animation, secondaryAnimation, child) {
|
||||
const begin = 0.0;
|
||||
const end = 1.0;
|
||||
const curve = Curves.linear;
|
||||
|
||||
var tween = Tween<double>(begin: begin, end: end)
|
||||
.chain(CurveTween(curve: curve));
|
||||
|
||||
return FadeTransition(
|
||||
opacity: animation.drive(tween),
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
// showDialog(
|
||||
// context: Get.context!,
|
||||
// builder: (context) {
|
||||
// return AlertDialog(
|
||||
// title: const Text('选择投币个数'),
|
||||
// contentPadding: const EdgeInsets.fromLTRB(0, 12, 0, 12),
|
||||
// actions: [
|
||||
// TextButton(
|
||||
// onPressed: () => Get.back(),
|
||||
// child: Text('取消',
|
||||
// style: TextStyle(
|
||||
// color: Theme.of(context).colorScheme.outline))),
|
||||
// TextButton(
|
||||
// onPressed: () async {
|
||||
// coinVideo(1);
|
||||
// Get.back();
|
||||
// },
|
||||
// child: const Text('投 1 枚')),
|
||||
// TextButton(
|
||||
// onPressed: () async {
|
||||
// coinVideo(2);
|
||||
// Get.back();
|
||||
// },
|
||||
// child: const Text('投 2 枚'))
|
||||
// ],
|
||||
// );
|
||||
// },
|
||||
// );
|
||||
}
|
||||
|
||||
// (取消)收藏
|
||||
@@ -694,3 +721,281 @@ class VideoIntroController extends GetxController {
|
||||
return res;
|
||||
}
|
||||
}
|
||||
|
||||
class PayCoinsPage extends StatefulWidget {
|
||||
const PayCoinsPage({super.key, required this.callback});
|
||||
|
||||
final Function callback;
|
||||
|
||||
@override
|
||||
State<PayCoinsPage> createState() => _PayCoinsPageState();
|
||||
}
|
||||
|
||||
class _PayCoinsPageState extends State<PayCoinsPage>
|
||||
with TickerProviderStateMixin {
|
||||
bool _isPaying = false;
|
||||
late final _controller = PageController(viewportFraction: 0.30);
|
||||
|
||||
int get _index => _controller.hasClients ? _controller.page?.round() ?? 0 : 0;
|
||||
|
||||
late AnimationController _slide22Controller;
|
||||
late AnimationController _scale22Controller;
|
||||
late AnimationController _coinSlideController;
|
||||
late AnimationController _coinFadeController;
|
||||
late AnimationController _boxAnimController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_slide22Controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 50),
|
||||
);
|
||||
_scale22Controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 50),
|
||||
);
|
||||
_coinSlideController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
);
|
||||
_coinFadeController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 100),
|
||||
);
|
||||
_boxAnimController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 50),
|
||||
);
|
||||
_scale();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_slide22Controller.dispose();
|
||||
_scale22Controller.dispose();
|
||||
_coinSlideController.dispose();
|
||||
_coinFadeController.dispose();
|
||||
_boxAnimController.dispose();
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _scale() {
|
||||
_scale22Controller.forward().whenComplete(() {
|
||||
_scale22Controller.reverse();
|
||||
});
|
||||
}
|
||||
|
||||
void _onScroll(int index) {
|
||||
_controller.animateToPage(
|
||||
index,
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.ease,
|
||||
);
|
||||
_scale();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return LayoutBuilder(builder: (_, constraints) {
|
||||
return _buildBody(constraints.maxHeight > constraints.maxWidth);
|
||||
});
|
||||
}
|
||||
|
||||
Widget _buildBody(isV) => Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Visibility(
|
||||
visible: !_isPaying,
|
||||
maintainSize: true,
|
||||
maintainAnimation: true,
|
||||
maintainState: true,
|
||||
child: GestureDetector(
|
||||
onTap: _index == 0
|
||||
? null
|
||||
: () {
|
||||
_onScroll(0);
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 12),
|
||||
child: Image.asset(
|
||||
width: 16,
|
||||
height: 28,
|
||||
_index == 0
|
||||
? 'assets/images/paycoins/ic_left_disable.png'
|
||||
: 'assets/images/paycoins/ic_left.png',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: SizedBox(
|
||||
height: 100,
|
||||
child: PageView.builder(
|
||||
itemCount: 2,
|
||||
controller: _controller,
|
||||
onPageChanged: (index) => setState(() {
|
||||
_scale();
|
||||
}),
|
||||
itemBuilder: (context, index) {
|
||||
return ListenableBuilder(
|
||||
listenable: _controller,
|
||||
builder: (context, child) {
|
||||
double factor = index == 0 ? 1 : 0;
|
||||
if (_controller.position.hasContentDimensions) {
|
||||
factor = 1 - (_controller.page! - index).abs();
|
||||
}
|
||||
return Visibility(
|
||||
visible: !_isPaying || _index == index,
|
||||
child: Center(
|
||||
child: SizedBox(
|
||||
height: 70 + (factor * 30),
|
||||
width: 70 + (factor * 30),
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
SlideTransition(
|
||||
position: _boxAnimController.drive(
|
||||
Tween(
|
||||
begin: const Offset(0.0, 0.0),
|
||||
end: const Offset(0.0, -0.2),
|
||||
),
|
||||
),
|
||||
child: Image.asset(
|
||||
'assets/images/paycoins/ic_pay_coins_box.png',
|
||||
),
|
||||
),
|
||||
SlideTransition(
|
||||
position: _coinSlideController.drive(
|
||||
Tween(
|
||||
begin: const Offset(0.0, 0.0),
|
||||
end: const Offset(0.0, -2),
|
||||
),
|
||||
),
|
||||
child: FadeTransition(
|
||||
opacity: Tween<double>(begin: 1, end: 0)
|
||||
.animate(_coinFadeController),
|
||||
child: Image.asset(
|
||||
height: 35 + (factor * 15),
|
||||
width: 35 + (factor * 15),
|
||||
index == 0
|
||||
? 'assets/images/paycoins/ic_coins_one.png'
|
||||
: 'assets/images/paycoins/ic_coins_two.png',
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
Visibility(
|
||||
visible: !_isPaying,
|
||||
maintainSize: true,
|
||||
maintainAnimation: true,
|
||||
maintainState: true,
|
||||
child: GestureDetector(
|
||||
onTap: _index == 1
|
||||
? null
|
||||
: () {
|
||||
_onScroll(1);
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(right: 12),
|
||||
child: Image.asset(
|
||||
width: 16,
|
||||
height: 28,
|
||||
_index == 1
|
||||
? 'assets/images/paycoins/ic_right_disable.png'
|
||||
: 'assets/images/paycoins/ic_right.png',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 25),
|
||||
GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onPanUpdate: _handlePanUpdate,
|
||||
child: SizedBox(
|
||||
width: double.infinity,
|
||||
height: 140,
|
||||
child: Center(
|
||||
child: GestureDetector(
|
||||
onPanUpdate: (e) => _handlePanUpdate(e, true),
|
||||
child: ScaleTransition(
|
||||
scale: _scale22Controller.drive(
|
||||
Tween(begin: 1, end: 1.2),
|
||||
),
|
||||
child: SlideTransition(
|
||||
position: _slide22Controller.drive(
|
||||
Tween(
|
||||
begin: const Offset(0.0, 0.0),
|
||||
end: const Offset(0.0, -0.2),
|
||||
),
|
||||
),
|
||||
child: SizedBox(
|
||||
width: 100,
|
||||
height: 140,
|
||||
child: Image.asset(
|
||||
_index == 0
|
||||
? 'assets/images/paycoins/ic_22_gun_sister.png'
|
||||
: 'assets/images/paycoins/ic_22_mario.png',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: (isV ? 50 : 0) + MediaQuery.of(context).padding.bottom),
|
||||
],
|
||||
);
|
||||
|
||||
void _handlePanUpdate(DragUpdateDetails e, [bool needV = false]) {
|
||||
if (needV && e.delta.dy.abs() > max(2, e.delta.dx.abs())) {
|
||||
if (e.delta.dy < 0) {
|
||||
setState(() {
|
||||
_isPaying = true;
|
||||
});
|
||||
_slide22Controller.forward().whenComplete(() {
|
||||
_slide22Controller.reverse().whenComplete(() {
|
||||
_boxAnimController.forward().whenComplete(() {
|
||||
_boxAnimController.reverse();
|
||||
});
|
||||
_coinSlideController.forward().whenComplete(() {
|
||||
_coinFadeController.forward().whenComplete(() {
|
||||
Get.back();
|
||||
widget.callback(_index + 1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
} else if (e.delta.dx.abs() > max(2, e.delta.dy.abs())) {
|
||||
if (e.delta.dx > 0) {
|
||||
if (_index == 1) {
|
||||
_onScroll(0);
|
||||
setState(() {});
|
||||
}
|
||||
} else {
|
||||
if (_index == 0) {
|
||||
_onScroll(1);
|
||||
setState(() {});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user