Skip to content

Commit

Permalink
feat:创建红包详情页。
Browse files Browse the repository at this point in the history
  • Loading branch information
LeeeYudE committed Aug 3, 2022
1 parent b4a1b67 commit fa46c62
Show file tree
Hide file tree
Showing 12 changed files with 275 additions and 14 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ Flutter版本:2.10.1
| ![1.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot0.gif) | ![2.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot1.gif) | ![3.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot2.gif) |
|------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
| ![4.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot3.gif) | ![5.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot4.gif) | ![6.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot5.gif) |
| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |----------------------------------------------------------------------------------------------------|
| ![6.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot6.gif) | ![7.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot7.gif) |
| ![6.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot6.gif) | ![7.gif](https://github.com/LeeeYudE/flutter_wechat/blob/master/assets/screenshot/screenshot7.gif) |


#Api方案采用Leancloud
* 数据存储文档:https://zh-docs.leancloud.app/leanstorage_guide-flutter.html
Expand Down
5 changes: 5 additions & 0 deletions lib/app_pages.dart
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import 'package:wechat/page/main/chat/chat_detail_page.dart';
import 'package:wechat/page/main/chat/chat_group_edit_name_page.dart';
import 'package:wechat/page/main/chat/chat_page.dart';
import 'package:wechat/page/main/chat/page/pay_password/pay_password_page.dart';
import 'package:wechat/page/main/chat/page/red_packet/red_packet_detail_page.dart';
import 'package:wechat/page/main/chat/page/red_packet/red_packet_preview_page.dart';
import 'package:wechat/page/main/chat/page/red_packet/send_red_packet_page.dart';
import 'package:wechat/page/main/chat/qrcode_group_chat_page.dart';
Expand Down Expand Up @@ -194,6 +195,10 @@ class AppPages {
name: NearbyLocationPage.routeName,
page: () => NearbyLocationPage(),
),
_getPage(
name: RedPacketDetailPage.routeName,
page: () => RedPacketDetailPage(),
),
];

static GetPage _getPage({
Expand Down
3 changes: 2 additions & 1 deletion lib/page/login/controller/login_phone_controller.dart
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,12 @@ import '../model/zone_code.dart';

class LoginPhoneController extends BaseXController{

TextEditingController passwordController = TextEditingController();
TextEditingController passwordController = TextEditingController(text: '18202003769');
String phone = Get.arguments;

@override
onInit(){
super.onInit();
passwordController.addListener(() {
update();
});
Expand Down
2 changes: 1 addition & 1 deletion lib/page/main/chat/chat_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import 'package:wechat/core.dart';
import 'package:wechat/page/main/chat/controller/chat_controller.dart';
import 'package:wechat/page/main/chat/widget/chat_input_widget.dart';
import 'package:wechat/page/main/chat/widget/message/message_item.dart';
import 'package:wechat/page/main/chat/widget/record_preview%20_widget.dart';
import 'package:wechat/page/main/chat/widget/record_preview_widget.dart';
import 'package:wechat/utils/navigator_utils.dart';
import 'package:wechat/widget/base_scaffold.dart';
import 'package:scroll_to_index/scroll_to_index.dart';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:wechat/base/base_getx.dart';
import 'package:wechat/page/main/chat/page/red_packet/red_packet_detail_page.dart';
import 'package:wechat/utils/navigator_utils.dart';

class RedPacketController extends BaseXController {
Expand Down Expand Up @@ -33,7 +35,7 @@ class RedPacketController extends BaseXController {
vsync: tickerProvider
);
translateController = AnimationController(
duration: const Duration(milliseconds: 800),
duration: const Duration(milliseconds: 500),
vsync: tickerProvider
);
scaleController = AnimationController(
Expand All @@ -50,7 +52,7 @@ class RedPacketController extends BaseXController {

translateController.addStatusListener((status) {
if(status == AnimationStatus.completed){
NavigatorUtils.pop();
NavigatorUtils.offNamed(RedPacketDetailPage.routeName,arguments: Get.arguments);
}
});
repaint = Listenable.merge([angleController, translateController]);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@

import 'package:get/get.dart';
import 'package:leancloud_storage/leancloud.dart';
import 'package:wechat/base/base_getx.dart';
import 'package:wechat/base/constant.dart';

import '../../../model/red_packet_message.dart';

class RedPacketDetailController extends BaseXController{

late RedPacketMessage message;
LCObject? redPacket;

@override
void onInit() {
super.onInit();
message = Get.arguments;
}

@override
void onReady() {
super.onReady();
lcPost(() async {
var lcQuery = LCQuery(Constant.OBJECT_NAME_RED_PACKET);
lcQuery.whereEqualTo('objectId', message.rawData['redPacketId']);
redPacket = await lcQuery.first();
},showloading: false);
}

}
148 changes: 148 additions & 0 deletions lib/page/main/chat/page/red_packet/red_packet_detail_page.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import 'package:flutter/material.dart';
import 'package:wechat/base/base_view.dart';
import 'package:wechat/color/colors.dart';
import 'package:wechat/core.dart';
import 'package:wechat/page/main/chat/page/red_packet/widget/red_packet_top_bg.dart';
import '../../../../../controller/member_controller.dart';
import '../../../../../widget/avatar_widget.dart';
import '../../../../../widget/base_scaffold.dart';
import 'controller/red_packet_detail_contrlller.dart';

class RedPacketDetailPage extends BaseGetBuilder<RedPacketDetailController> {

static const String routeName = '/RedPacketDetailPage';


RedPacketDetailPage({Key? key}) : super(key: key);

@override
RedPacketDetailController? getController() => RedPacketDetailController();


@override
Widget controllerBuilder(BuildContext context, RedPacketDetailController controller) {
return MyScaffold(
showAppbar: false,
body: _buildBody(context),
);
}


_buildBar(){
return SizedBox(
height: 150.w,
child: AppBar(
toolbarHeight: 100.w,
backgroundColor: Colours.transparent,
elevation: 0,
),
);
}

_buildBody(BuildContext context) {
return Stack(
children: [
_buildAmount(),
CustomPaint(
size: Size(1.0.sw, 300.w),
painter: RedPacketTopBg(),
),
_buildBar(),
],
);
}

_buildAmount(){
var _message = controller.message;
var member = MemberController.instance.getMember(_message.fromClientID);
return Container(
color: Colours.white,
width: double.infinity,
padding: EdgeInsets.only(top: 300.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
AvatarWidget(avatar: member?.avatar, weightWidth: 48.w),
10.sizedBoxW,
Text("${MemberController.instance.getMember(_message.fromClientID)?.nickname}的红包", style: TextStyle(fontSize: 32.sp, color: Colours.black, fontWeight: FontWeight.w500),),
10.sizedBoxW,
Container(
decoration: Colours.c_D48610.boxDecoration(borderRadius: 5.w),
padding: EdgeInsets.all(5.w),
child: Center(
child: Text('拼',style: TextStyle(color: Colours.white,fontSize: 24.sp,height: 1.1),),
),
)
],
),
20.sizedBoxH,
Text(_message.text??'', style: TextStyle(fontSize: 28.sp, color: Colours.c_CCCCCC),),
40.sizedBoxH,
if(controller.redPacket != null)
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(
height: 80.sp,
child: Text('${controller.redPacket!['amount']}',textAlign: TextAlign.center, style: TextStyle(fontSize: 96.sp, color: Colours.c_D48610,height: 1),)),
Text('元', style: TextStyle(fontSize: 32.sp, color: Colours.c_D48610,height: 1.0),),
],
),
100.sizedBoxH,
Colours.c_EEEEEE.toLine(10.w),
Container(
alignment: Alignment.topLeft,
padding: EdgeInsets.only(left: 20.w),
height: 100.w,
child:(controller.redPacket != null)?
Align(
alignment: Alignment.centerLeft,
child: Text('${controller.redPacket!['packet_count']}个红包共${controller.redPacket!['amount']}元,3秒被抢光', style: TextStyle(fontSize: 28.sp, color: Colours.c_CCCCCC))):null,
),
Colours.c_EEEEEE.toLine(2.w),
20.sizedBoxH,
Container(
padding: EdgeInsets.symmetric(horizontal: 20.w),
child: Row(
children: [
AvatarWidget(avatar: member?.avatar, weightWidth: 100.w),
20.sizedBoxW,
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("${MemberController.instance.getMember(_message.fromClientID)?.nickname}", style: TextStyle(fontSize: 32.sp, color: Colours.black),),
Text("8月2日 19:35", style: TextStyle(fontSize: 24.sp, color: Colours.c_CCCCCC),),
],
),
),
if((controller.redPacket != null))
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('${controller.redPacket!['amount']}元', style: TextStyle(fontSize: 32.sp, color: Colours.black,height: 1),),
5.sizedBoxH,
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.wine_bar,color:Colours.c_FA9E3B,size: 32.w,),
Text('手气最佳', style: TextStyle(fontSize: 24.sp, color: Colours.c_FA9E3B,height: 1),),
],
)
],
)
],
),
)
],
),
);
}


}
17 changes: 11 additions & 6 deletions lib/page/main/chat/page/red_packet/red_packet_preview_page.dart
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import 'package:get/get.dart';
import 'package:wechat/color/colors.dart';
import 'package:wechat/controller/member_controller.dart';
import 'package:wechat/core.dart';
import 'package:flutter/material.dart';
import 'package:wechat/page/main/chat/page/red_packet/controller/red_packet_controller.dart';
import 'package:wechat/page/main/chat/page/red_packet/red_packet_painter.dart';
import 'package:wechat/page/main/chat/page/red_packet/widget/red_packet_painter.dart';
import 'package:wechat/utils/navigator_utils.dart';
import 'package:wechat/widget/avatar_widget.dart';
import 'package:wechat/widget/tap_widget.dart';

import '../../../../../widget/base_scaffold.dart';
import '../../model/red_packet_message.dart';

///代码来源 https://juejin.cn/post/7075338022446694413
class RedPacketPreviewPage extends StatefulWidget {
Expand All @@ -22,10 +26,12 @@ class RedPacketPreviewPage extends StatefulWidget {
class _RedPacketPreviewPageState extends State<RedPacketPreviewPage> with TickerProviderStateMixin{

late RedPacketController controller;
late RedPacketMessage _message;

@override
void initState() {
super.initState();
_message = Get.arguments;
controller = RedPacketController(tickerProvider: this);
}

Expand Down Expand Up @@ -83,6 +89,7 @@ class _RedPacketPreviewPageState extends State<RedPacketPreviewPage> with Ticker


Widget buildChild() {
var member = MemberController.instance.getMember(_message.fromClientID);
return AnimatedBuilder(
animation: controller.translateController,
builder: (context, child) => Container(
Expand All @@ -93,15 +100,13 @@ class _RedPacketPreviewPageState extends State<RedPacketPreviewPage> with Ticker
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(3.w),
child: Image.network("https://p26-passport.byteacctimg.com/img/user-avatar/32f1f514b874554f69fe265644ca84e4~300x300.image", width: 24.w,)),
AvatarWidget(avatar: member?.avatar, weightWidth: 48.w),
SizedBox(width: 5.w,),
Text("loongwind的红包", style: TextStyle(fontSize: 28.sp, color: const Color(0xFFF8E7CB), fontWeight: FontWeight.w500),)
Text("${MemberController.instance.getMember(_message.fromClientID)?.nickname}的红包", style: TextStyle(fontSize: 28.sp, color: const Color(0xFFF8E7CB), fontWeight: FontWeight.w500),)
],
),
SizedBox(height: 15.w,),
Text('恭喜发财', style: TextStyle(fontSize: 28.sp, color: const Color(0xFFF8E7CB)),)
Text(_message.text??'', style: TextStyle(fontSize: 28.sp, color: const Color(0xFFF8E7CB)),)
],
),
),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:wechat/core.dart';

import 'controller/red_packet_controller.dart';
import '../controller/red_packet_controller.dart';

class RedPacketPainter extends CustomPainter{

Expand Down
Loading

0 comments on commit fa46c62

Please sign in to comment.