From ac2c9571e700f61ab998330bb8de687c898fb9b8 Mon Sep 17 00:00:00 2001 From: Ultrame <1019265060@qq.com> Date: Fri, 17 Oct 2025 10:11:36 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89title?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/user_pages/billDetail/index.config.ts | 10 +- src/user_pages/billDetail/index.scss | 43 +++++ src/user_pages/billDetail/index.tsx | 53 ++++-- src/user_pages/downloadBill/index.config.ts | 10 +- src/user_pages/downloadBill/index.scss | 53 +++++- src/user_pages/downloadBill/index.tsx | 52 ++++-- .../downloadBillRecords/index.config.ts | 10 +- src/user_pages/downloadBillRecords/index.scss | 170 +++++++++++------- src/user_pages/downloadBillRecords/index.tsx | 75 +++++--- src/user_pages/edit/index.config.ts | 12 +- .../queryTransactions/index.config.ts | 10 +- src/user_pages/queryTransactions/index.scss | 54 +++++- src/user_pages/queryTransactions/index.tsx | 21 +++ .../setTransactionPassword/index.config.ts | 10 +- .../setTransactionPassword/index.scss | 154 ++++++++++------ .../setTransactionPassword/index.tsx | 93 +++++++--- src/user_pages/validPhone/index.config.ts | 10 +- src/user_pages/validPhone/index.scss | 136 +++++++++----- src/user_pages/validPhone/index.tsx | 90 ++++++++-- src/user_pages/wallet/index.config.ts | 6 + src/user_pages/wallet/index.scss | 61 +++++-- src/user_pages/wallet/index.tsx | 28 ++- 22 files changed, 863 insertions(+), 298 deletions(-) diff --git a/src/user_pages/billDetail/index.config.ts b/src/user_pages/billDetail/index.config.ts index d5ec499..c786697 100644 --- a/src/user_pages/billDetail/index.config.ts +++ b/src/user_pages/billDetail/index.config.ts @@ -1,3 +1,9 @@ export default definePageConfig({ - navigationBarTitleText: '明细详情', -}) + navigationBarTitleText: "明细详情", + navigationBarBackgroundColor: "#ffffff", + navigationBarTextStyle: "black", + backgroundColor: "#f5f5f5", + enablePullDownRefresh: false, + disableScroll: false, + navigationStyle: "custom", +}); diff --git a/src/user_pages/billDetail/index.scss b/src/user_pages/billDetail/index.scss index 6e12235..ab664df 100644 --- a/src/user_pages/billDetail/index.scss +++ b/src/user_pages/billDetail/index.scss @@ -4,6 +4,49 @@ padding: 5px; box-sizing: border-box; overflow: hidden; + .custom-navbar { + height: 56px; + /* 通常与原生导航栏高度一致 */ + display: flex; + align-items: center; + justify-content: center; + // background-color: #fff; + color: #000; + padding-top: 44px; + /* 适配状态栏 */ + position: sticky; + top: 0; + z-index: 100; + background-color: #f5f5f5; + } + + .detail-navigator { + height: 30px; + width: fit-content; + border-radius: 15px; + position: absolute; + left: 12px; + box-sizing: border-box; + display: flex; + align-items: center; + + .detail-navigator-back { + height: 32px; + display: flex; + justify-content: center; + align-items: center; + font-family: PingFang SC; + font-weight: 600; + font-style: Semibold; + font-size: 20px; + letter-spacing: 0.38px; + + & > .detail-navigator-back-icon { + width: 32px; + height: 32px; + } + } + } .title-text-box { height: 118px; display: flex; diff --git a/src/user_pages/billDetail/index.tsx b/src/user_pages/billDetail/index.tsx index 9a755e9..f396cc3 100644 --- a/src/user_pages/billDetail/index.tsx +++ b/src/user_pages/billDetail/index.tsx @@ -1,12 +1,13 @@ import React, { useEffect, useState } from "react"; -import { View, Text } from "@tarojs/components"; -import { useRouter } from '@tarojs/taro'; -import dayjs from 'dayjs'; -import Taro from '@tarojs/taro'; +import { View, Text, Image } from "@tarojs/components"; +import { useRouter } from "@tarojs/taro"; +import dayjs from "dayjs"; +import Taro from "@tarojs/taro"; import httpService from "@/services/httpService"; import { TransactionType, TransactionSubType } from "@/user_pages/wallet/index"; import "./index.scss"; +import img from "@/config/images"; enum FreezeActions { Unfreeze = "unfreeze", @@ -31,20 +32,26 @@ interface BillDetail { } const BillDetail: React.FC = () => { + // 获取当前页面的配置 + const currentPage = Taro.getCurrentInstance(); + const pageConfig = currentPage.page?.config; + const pageTitle = pageConfig?.navigationBarTitleText; const router = useRouter(); const { id } = router.params; const [billDetail, setBillDetail] = useState({}); const getBillDetail = async () => { try { - const res = await httpService.post("/wallet/transaction_detail", { transaction_id: id }) + const res = await httpService.post( + "/wallet/transaction_detail", + { transaction_id: id } + ); if (res.code === 0) { setBillDetail(res.data); } } catch (error) { console.log(error); } - }; const copyText = (text: string | undefined) => { @@ -55,10 +62,10 @@ const BillDetail: React.FC = () => { data: text, success: () => { Taro.showToast({ - title: '复制成功', - icon: 'none' + title: "复制成功", + icon: "none", }); - } + }, }); }; @@ -67,17 +74,37 @@ const BillDetail: React.FC = () => { }, [id]); return ( + {/* 导航栏 */} + + + { + Taro.navigateBack(); + }} + > + + {pageTitle} + + + 现金交易 (元) - {billDetail.transaction_type === 'expense' ? '-' : '+'} + {billDetail.transaction_type === "expense" ? "-" : "+"} {billDetail.amount_yuan} 交易时间 - {billDetail.create_time && dayjs(billDetail.create_time).format('YYYY-MM-DD HH:mm:ss')} + + {billDetail.create_time && + dayjs(billDetail.create_time).format("YYYY-MM-DD HH:mm:ss")} + 活动标题 @@ -91,7 +118,9 @@ const BillDetail: React.FC = () => { 商户单号 {billDetail.order_no} - copyText(billDetail.order_no)}>复制 + copyText(billDetail.order_no)}> + 复制 + diff --git a/src/user_pages/downloadBill/index.config.ts b/src/user_pages/downloadBill/index.config.ts index 3ec35fc..5245ff8 100644 --- a/src/user_pages/downloadBill/index.config.ts +++ b/src/user_pages/downloadBill/index.config.ts @@ -1,3 +1,9 @@ export default definePageConfig({ - navigationBarTitleText: '下载账单', -}) \ No newline at end of file + navigationBarTitleText: "下载账单", + navigationBarBackgroundColor: "#ffffff", + navigationBarTextStyle: "black", + backgroundColor: "#f5f5f5", + enablePullDownRefresh: false, + disableScroll: false, + navigationStyle: "custom", +}); diff --git a/src/user_pages/downloadBill/index.scss b/src/user_pages/downloadBill/index.scss index 3e2774e..16f7e51 100644 --- a/src/user_pages/downloadBill/index.scss +++ b/src/user_pages/downloadBill/index.scss @@ -7,6 +7,50 @@ overflow: hidden; box-sizing: border-box; + .custom-navbar { + height: 56px; + /* 通常与原生导航栏高度一致 */ + display: flex; + align-items: center; + justify-content: center; + // background-color: #fff; + color: #000; + padding-top: 44px; + /* 适配状态栏 */ + position: sticky; + top: 0; + z-index: 100; + background-color: #f5f5f5; + } + + .detail-navigator { + height: 30px; + width: fit-content; + border-radius: 15px; + position: absolute; + left: 12px; + box-sizing: border-box; + display: flex; + align-items: center; + + .detail-navigator-back { + height: 32px; + display: flex; + justify-content: center; + align-items: center; + font-family: PingFang SC; + font-weight: 600; + font-style: Semibold; + font-size: 20px; + letter-spacing: 0.38px; + + & > .detail-navigator-back-icon { + width: 32px; + height: 32px; + } + } + } + .hint_content { font-family: PingFang SC; font-weight: 400; @@ -81,7 +125,7 @@ border-radius: 20px; padding: 4px 8px; - &+.option_button { + & + .option_button { margin-left: 12px; } @@ -136,7 +180,7 @@ line-height: normal; &.disabled { - color: rgba(255, 255, 255, 0.30); + color: rgba(255, 255, 255, 0.3); } } } @@ -144,7 +188,6 @@ // 过滤弹窗 .filter_popup { - .popup_content { padding: 16px 20px; .form_section { @@ -166,7 +209,7 @@ gap: 8px; .option_item { - background-color: #0000000D; + background-color: #0000000d; text-align: center; padding: 8px; border-radius: 4px; @@ -180,4 +223,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/user_pages/downloadBill/index.tsx b/src/user_pages/downloadBill/index.tsx index c9c1e3c..bc9027c 100644 --- a/src/user_pages/downloadBill/index.tsx +++ b/src/user_pages/downloadBill/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { View, Text, Button, Input } from "@tarojs/components"; +import { View, Text, Button, Input, Image } from "@tarojs/components"; import Taro, { useDidShow } from "@tarojs/taro"; import dayjs from "dayjs"; @@ -8,6 +8,7 @@ import { DialogCalendarCard } from "@/components/index"; // import { CalendarUI } from "@/components"; import { CommonPopup } from "@/components"; import httpService from "@/services/httpService"; +import img from "@/config/images"; export enum TransactionSubType { All = "", @@ -30,6 +31,10 @@ interface TransactionLoadParams { date_range?: string[]; } const DownloadBill: React.FC = () => { + // 获取当前页面的配置 + const currentPage = Taro.getCurrentInstance(); + const pageConfig = currentPage.page?.config; + const pageTitle = pageConfig?.navigationBarTitleText; const [dateRange, setDateRange] = useState({ start: "", end: "" }); const [transactionSubType, setTransactionSubType] = useState(TransactionSubType.All); @@ -179,7 +184,10 @@ const DownloadBill: React.FC = () => { try { const { transaction_sub_type } = load_transactions_params; const date_range = [start, end]; - const res = await httpService.post("/wallet/download_bill", { transaction_sub_type, date_range }); + const res = await httpService.post("/wallet/download_bill", { + transaction_sub_type, + date_range, + }); const { fileUrl, fileName } = res.data; // 调用下载文件接口 wx.downloadFile({ @@ -188,17 +196,17 @@ const DownloadBill: React.FC = () => { // 只有200状态码表示下载成功 if (res.statusCode === 200) { // 下载成功后可以使用res.tempFilePath访问临时文件路径 - console.log('文件下载成功，临时路径为：', res.tempFilePath); + console.log("文件下载成功，临时路径为：", res.tempFilePath); // 保存文件到本地 wx.openDocument({ filePath: res.tempFilePath, - showMenu: true // 显示保存菜单 + showMenu: true, // 显示保存菜单 }); } }, fail: function (err) { - console.error('文件下载失败：', err); - } + console.error("文件下载失败：", err); + }, }); } catch (error) { console.error(error); @@ -206,6 +214,23 @@ const DownloadBill: React.FC = () => { }; return ( + {/* 导航栏 */} + + + { + Taro.navigateBack(); + }} + > + + {pageTitle} + + + 最长可导出三个月的账单 {/* 示例文件 */} @@ -247,8 +272,9 @@ const DownloadBill: React.FC = () => { 近一周 { selectDateRange("month"); }} @@ -256,8 +282,9 @@ const DownloadBill: React.FC = () => { 近一月 { selectDateRange("custom"); }} @@ -298,7 +325,10 @@ const DownloadBill: React.FC = () => { > 下载记录 - diff --git a/src/user_pages/downloadBillRecords/index.config.ts b/src/user_pages/downloadBillRecords/index.config.ts index 158e68c..4b5a357 100644 --- a/src/user_pages/downloadBillRecords/index.config.ts +++ b/src/user_pages/downloadBillRecords/index.config.ts @@ -1,3 +1,9 @@ export default definePageConfig({ - navigationBarTitleText: '下载记录', -}) + navigationBarTitleText: "下载记录", + navigationBarBackgroundColor: "#ffffff", + navigationBarTextStyle: "black", + backgroundColor: "#f5f5f5", + enablePullDownRefresh: false, + disableScroll: false, + navigationStyle: "custom", +}); diff --git a/src/user_pages/downloadBillRecords/index.scss b/src/user_pages/downloadBillRecords/index.scss index 111f2e8..a1feb35 100644 --- a/src/user_pages/downloadBillRecords/index.scss +++ b/src/user_pages/downloadBillRecords/index.scss @@ -1,78 +1,116 @@ .download-bill-records-page { - color: #3C3C4399; - font-family: PingFang SC; - font-weight: 400; - font-style: Regular; - font-size: 16px; - line-height: 24px; - letter-spacing: 0px; - padding: 20px; - height: 100vh; - overflow-y: auto; + color: #3c3c4399; + font-family: PingFang SC; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 24px; + letter-spacing: 0px; + height: 100vh; + overflow-y: auto; - &::-webkit-scrollbar { - display: none; - width: 0; - height: 0; - color: transparent; + &::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + color: transparent; + } + .custom-navbar { + height: 56px; + /* 通常与原生导航栏高度一致 */ + display: flex; + align-items: center; + justify-content: center; + // background-color: #fff; + color: #000; + padding-top: 44px; + /* 适配状态栏 */ + position: sticky; + top: 0; + z-index: 100; + background-color: #f5f5f5; + } + + .detail-navigator { + height: 30px; + width: fit-content; + border-radius: 15px; + position: absolute; + left: 12px; + box-sizing: border-box; + display: flex; + align-items: center; + + .detail-navigator-back { + height: 32px; + display: flex; + justify-content: center; + align-items: center; + font-family: PingFang SC; + font-weight: 600; + font-style: Semibold; + font-size: 20px; + letter-spacing: 0.38px; + + & > .detail-navigator-back-icon { + width: 32px; + height: 32px; + } } + } + .records-container { + padding: 0 20px 50px 20px; - .records-container { - padding-bottom: 50px; + .record-item { + padding: 16px 0; - .record-item { - padding: 16px 0; + & + .record-item { + border-top: 1px solid #0000000d; + } - &+.record-item { - border-top: 1px solid #0000000D; - } + .title-text { + font-size: 16px; + color: #000; + margin-bottom: 8px; + } - .title-text { - font-size: 16px; - color: #000; - margin-bottom: 8px; - - } - - .info-item { - display: flex; - gap: 20px; - - &+.info-item { - margin-top: 8px; - } - - Text { - &:first-child { - width: 64px; - } - - &:last-child { - flex: 1; - color: #000; - - &.btn { - color: #007AFF; - flex: unset; - width: fit-content; - } - } - } - - } + .info-item { + display: flex; + gap: 20px; + & + .info-item { + margin-top: 8px; } - } - .tips { - font-size: 12px; - text-align: center; - position: fixed; - bottom: 0; - left: 0; - width: 100vw; - background-color: #FFFFFF; - padding: 20px 0; + Text { + &:first-child { + width: 64px; + } + + &:last-child { + flex: 1; + color: #000; + + &.btn { + color: #007aff; + flex: unset; + width: fit-content; + } + } + } + } } -} \ No newline at end of file + } + + .tips { + font-size: 12px; + text-align: center; + position: fixed; + bottom: 0; + left: 0; + width: 100vw; + background-color: #ffffff; + padding: 20px 0; + } +} diff --git a/src/user_pages/downloadBillRecords/index.tsx b/src/user_pages/downloadBillRecords/index.tsx index 2d90252..b40334f 100644 --- a/src/user_pages/downloadBillRecords/index.tsx +++ b/src/user_pages/downloadBillRecords/index.tsx @@ -1,9 +1,10 @@ import React, { useState, useEffect } from "react"; -import { View, Text } from "@tarojs/components"; +import { View, Text, Image } from "@tarojs/components"; import "./index.scss"; import httpService from "@/services/httpService"; import Taro, { useReachBottom } from "@tarojs/taro"; +import img from "@/config/images"; interface BillRecord { id: number; @@ -22,6 +23,10 @@ interface BillRecord { } const DownloadBillRecords: React.FC = () => { + // 获取当前页面的配置 + const currentPage = Taro.getCurrentInstance(); + const pageConfig = currentPage.page?.config; + const pageTitle = pageConfig?.navigationBarTitleText; const [records, setRecords] = useState([]); const [params, setParams] = useState({ page: 1, @@ -41,42 +46,62 @@ const DownloadBillRecords: React.FC = () => { const fetchRecords = async () => { try { - const response = await httpService.post<{ rows: BillRecord[], totalPages: number }>('/wallet/download_history', params); + const response = await httpService.post<{ + rows: BillRecord[]; + totalPages: number; + }>("/wallet/download_history", params); setRecords([...records, ...response.data.rows]); setTotalPages(response.data.totalPages); } catch (error) { console.log(error); Taro.showToast({ - title: '获取账单记录失败', - icon: 'none', + title: "获取账单记录失败", + icon: "none", duration: 2000, }); } }; return ( - - { - records.map((record) => ( - - {record.file_name} - - 申请时间 - {record.create_time} - - - 账单范围 - {record.date_range_desc} - - - - 查看材料 - - - )) - } + {/* 导航栏 */} + + + { + Taro.navigateBack(); + }} + > + + {pageTitle} + + + + + {records.map((record) => ( + + {record.file_name} + + 申请时间 + {record.create_time} + + + 账单范围 + {record.date_range_desc} + + + + 查看材料 + + + ))} + + + 出于信息安全考虑，仅保留并展示7天内的账单下载记录 - 出于信息安全考虑，仅保留并展示7天内的账单下载记录 ); }; diff --git a/src/user_pages/edit/index.config.ts b/src/user_pages/edit/index.config.ts index 7f8c559..fa92eb6 100644 --- a/src/user_pages/edit/index.config.ts +++ b/src/user_pages/edit/index.config.ts @@ -1,9 +1,9 @@ export default definePageConfig({ - navigationBarTitleText: '编辑资料', - navigationBarBackgroundColor: '#ffffff', - navigationBarTextStyle: 'black', - backgroundColor: '#f5f5f5', + navigationBarTitleText: "编辑资料", + navigationBarBackgroundColor: "#ffffff", + navigationBarTextStyle: "black", + backgroundColor: "#f5f5f5", enablePullDownRefresh: false, disableScroll: false, - navigationStyle: 'custom', -}) \ No newline at end of file + navigationStyle: "custom", +}); diff --git a/src/user_pages/queryTransactions/index.config.ts b/src/user_pages/queryTransactions/index.config.ts index 79cc30c..b9a0e1a 100644 --- a/src/user_pages/queryTransactions/index.config.ts +++ b/src/user_pages/queryTransactions/index.config.ts @@ -1,3 +1,9 @@ export default definePageConfig({ - navigationBarTitleText: '查找交易', -}) + navigationBarTitleText: "查找交易", + navigationBarBackgroundColor: "#ffffff", + navigationBarTextStyle: "black", + backgroundColor: "#f5f5f5", + enablePullDownRefresh: false, + disableScroll: false, + navigationStyle: "custom", +}); diff --git a/src/user_pages/queryTransactions/index.scss b/src/user_pages/queryTransactions/index.scss index e7efb87..1b4344e 100644 --- a/src/user_pages/queryTransactions/index.scss +++ b/src/user_pages/queryTransactions/index.scss @@ -1,5 +1,4 @@ .listSearchContainer { - padding: 0 15px; height: 100vh; box-sizing: border-box; @@ -10,6 +9,50 @@ color: transparent; } + .custom-navbar { + height: 56px; + /* 通常与原生导航栏高度一致 */ + display: flex; + align-items: center; + justify-content: center; + // background-color: #fff; + color: #000; + padding-top: 44px; + /* 适配状态栏 */ + position: sticky; + top: 0; + z-index: 100; + background-color: #f5f5f5; + } + + .detail-navigator { + height: 30px; + width: fit-content; + border-radius: 15px; + position: absolute; + left: 12px; + box-sizing: border-box; + display: flex; + align-items: center; + + .detail-navigator-back { + height: 32px; + display: flex; + justify-content: center; + align-items: center; + font-family: PingFang SC; + font-weight: 600; + font-style: Semibold; + font-size: 20px; + letter-spacing: 0.38px; + + & > .detail-navigator-back-icon { + width: 32px; + height: 32px; + } + } + } + .icon16 { width: 16px; height: 16px; @@ -19,8 +62,7 @@ position: sticky; top: -1px; background-color: #fff; - width: calc(100vw - 28px); - padding: 5px 0; + padding: 5px 15px; box-sizing: border-box; } @@ -43,7 +85,7 @@ } .historySearch { - // padding-top: 50px; + padding: 0 15px; } .searchRight { @@ -142,7 +184,7 @@ } .transaction_list { - padding: 0 0 80px; + padding: 0 15px 80px; // overflow-y: auto; // &::-webkit-scrollbar { @@ -238,4 +280,4 @@ padding: 20px 0 40px; background: #fff; } -} \ No newline at end of file +} diff --git a/src/user_pages/queryTransactions/index.tsx b/src/user_pages/queryTransactions/index.tsx index 77746b3..3703ae2 100644 --- a/src/user_pages/queryTransactions/index.tsx +++ b/src/user_pages/queryTransactions/index.tsx @@ -29,6 +29,10 @@ interface TransactionLoadParams { } const QueryTransactions = () => { + // 获取当前页面的配置 + const currentPage = Taro.getCurrentInstance(); + const pageConfig = currentPage.page?.config; + const pageTitle = pageConfig?.navigationBarTitleText; const isInitialMount = useRef(true); const [loading_transactions, set_loading_transactions] = useState(false); const [transactions, setTransactions] = useState([]); @@ -238,6 +242,23 @@ const QueryTransactions = () => { return ( <> + {/* 导航栏 */} + + + { + Taro.navigateBack(); + }} + > + + {pageTitle} + + + {/* 搜索 */} diff --git a/src/user_pages/setTransactionPassword/index.config.ts b/src/user_pages/setTransactionPassword/index.config.ts index 5f2a473..0f1e368 100644 --- a/src/user_pages/setTransactionPassword/index.config.ts +++ b/src/user_pages/setTransactionPassword/index.config.ts @@ -1,3 +1,9 @@ export default definePageConfig({ - navigationBarTitleText: '设置交易密码', -}) + navigationBarTitleText: "设置交易密码", + navigationBarBackgroundColor: "#ffffff", + navigationBarTextStyle: "black", + backgroundColor: "#f5f5f5", + enablePullDownRefresh: false, + disableScroll: false, + navigationStyle: "custom", +}); diff --git a/src/user_pages/setTransactionPassword/index.scss b/src/user_pages/setTransactionPassword/index.scss index efbe673..646958d 100644 --- a/src/user_pages/setTransactionPassword/index.scss +++ b/src/user_pages/setTransactionPassword/index.scss @@ -1,63 +1,111 @@ .set-transaction-password-page { - height: 100vh; + height: 100vh; + background-color: #f5f5f5; + box-sizing: border-box; + overflow: hidden; + .custom-navbar { + height: 56px; + /* 通常与原生导航栏高度一致 */ + display: flex; + align-items: center; + justify-content: center; + // background-color: #fff; + color: #000; + padding-top: 44px; + /* 适配状态栏 */ + position: sticky; + top: 0; + z-index: 100; background-color: #f5f5f5; + } + + .detail-navigator { + height: 30px; + width: fit-content; + border-radius: 15px; + position: absolute; + left: 12px; + box-sizing: border-box; + display: flex; + align-items: center; + + .detail-navigator-back { + height: 32px; + display: flex; + justify-content: center; + align-items: center; + font-family: PingFang SC; + font-weight: 600; + font-style: Semibold; + font-size: 20px; + letter-spacing: 0.38px; + + & > .detail-navigator-back-icon { + width: 32px; + height: 32px; + } + } + } + + .form-item { padding: 20px; box-sizing: border-box; - overflow: hidden; + height: 50px; + display: flex; + gap: 10px; + align-items: center; + border-bottom: 1px solid #0000000d; + font-size: 14px; - .form-item { - height: 50px; - display: flex; - gap: 10px; - align-items: center; - border-bottom: 1px solid #0000000D; - font-size: 14px; - - .form-label { - width: 56px; - text-align: right; - } + .form-label { + width: 56px; + text-align: right; } + } - .tips { - font-family: PingFang SC; - font-weight: 400; - font-style: Regular; - font-size: 12px; - line-height: 18px; - letter-spacing: 0px; - vertical-align: middle; - color: #3C3C4366; - } + .tips { + font-family: PingFang SC; + font-weight: 400; + font-style: Regular; + font-size: 12px; + line-height: 18px; + letter-spacing: 0px; + vertical-align: middle; + color: #3c3c4366; + padding: 0 20px; + } - .btn { - width: 78px; - height: 24px; - border: 1px solid rgba(0, 0, 0, 0.06); - display: flex; - align-items: center; - justify-content: center; - color: #fff; - background: #000; - box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - font-feature-settings: "liga" off, "clig" off; - font-family: "PingFang SC"; - font-size: 9.6px; - font-style: normal; - line-height: normal; - border-radius: 8px; - margin-right: 0; + .btn { + width: 78px; + height: 24px; + border: 1px solid rgba(0, 0, 0, 0.06); + display: flex; + align-items: center; + justify-content: center; + color: #fff; + background: #000; + box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + font-feature-settings: "liga" off, "clig" off; + font-family: "PingFang SC"; + font-size: 9.6px; + font-style: normal; + line-height: normal; + border-radius: 8px; + margin-right: 0; + &.disabled { + color: rgba(255, 255, 255, 0.3); } + } - .bottom-btn { - position: fixed; - bottom: 40px; - height: 54px; - width: calc(100vw - 40px); - margin: 0 auto; - border-radius: 16px; - font-size: 16px; - font-weight: 600; - } -} \ No newline at end of file + .bottom-btn { + position: fixed; + bottom: 40px; + height: 54px; + width: calc(100vw - 40px); + border-radius: 16px; + font-size: 16px; + font-weight: 600; + transform: translateX(20px); + } +} diff --git a/src/user_pages/setTransactionPassword/index.tsx b/src/user_pages/setTransactionPassword/index.tsx index dcb5643..b1d9aec 100644 --- a/src/user_pages/setTransactionPassword/index.tsx +++ b/src/user_pages/setTransactionPassword/index.tsx @@ -1,40 +1,50 @@ import React, { useState, useEffect } from "react"; import Taro, { useRouter } from "@tarojs/taro"; -import { View, Text, Input, Button } from "@tarojs/components"; +import { View, Text, Input, Button, Image } from "@tarojs/components"; import "./index.scss"; import httpService from "@/services/httpService"; -import { useKeyboardHeight } from '@/store/keyboardStore' +import { useKeyboardHeight } from "@/store/keyboardStore"; +import img from "@/config/images"; interface FormFields { - old_password?: string; new_password: string; confirm_password: string; sms_code?: string; } const SetTransactionPassword: React.FC = () => { + // 获取当前页面的配置 + const currentPage = Taro.getCurrentInstance(); + const pageConfig = currentPage.page?.config; + const pageTitle = pageConfig?.navigationBarTitleText; // 使用全局键盘状态 - const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight() + const { + keyboardHeight, + isKeyboardVisible, + addListener, + initializeKeyboardListener, + } = useKeyboardHeight(); const [smsCodeSended, setSmsCodeSended] = useState(false); - const [smsCodeText, setSmsCodeText] = useState('获取验证码'); + const [smsCodeText, setSmsCodeText] = useState("获取验证码"); + const [valid, setValid] = useState(false); // 使用全局键盘状态监听 useEffect(() => { // 初始化全局键盘监听器 - initializeKeyboardListener() + initializeKeyboardListener(); // 添加本地监听器 const removeListener = addListener((height, visible) => { - console.log('AiImportPopup 收到键盘变化:', height, visible) - }) + console.log("AiImportPopup 收到键盘变化:", height, visible); + }); return () => { - removeListener() - } - }, [initializeKeyboardListener, addListener]) + removeListener(); + }; + }, [initializeKeyboardListener, addListener]); const [handleType, setHandleType] = useState("set"); const router = useRouter(); - const { type, phone, sms_code } = router.params; + const { type } = router.params; useEffect(() => { if (type) { @@ -43,12 +53,22 @@ const SetTransactionPassword: React.FC = () => { }, [type]); const [formData, setFormData] = useState({ - old_password: "", new_password: "", confirm_password: "", sms_code: "", }); + useEffect(() => { + const { new_password, confirm_password, sms_code } = formData; + if (handleType === "set") { + setValid( + !sms_code && new_password.length === 6 && confirm_password.length === 6 + ); + } else { + setValid(new_password.length === 6 && confirm_password.length === 6); + } + }, [formData]); + const handleInput = (e: any, field: string) => { setFormData({ ...formData, [field]: e.detail.value }); }; @@ -71,8 +91,8 @@ const SetTransactionPassword: React.FC = () => { icon: "success", }); Taro.redirectTo({ - url: "/user_pages/wallet/index" - }) + url: "/user_pages/wallet/index", + }); } catch (error) { Taro.showToast({ title: "设置交易密码失败", @@ -98,7 +118,7 @@ const SetTransactionPassword: React.FC = () => { time--; setSmsCodeText(`${time}秒后重发`); } else { - setSmsCodeText('获取验证码'); + setSmsCodeText("获取验证码"); setSmsCodeSended(false); clearInterval(timer); } @@ -115,14 +135,23 @@ const SetTransactionPassword: React.FC = () => { return ( - { - // handleType === "reset" && ( - // - // 旧密码 - // { handleInput(e, "old_password") }}> - // - // ) - } + {/* 导航栏 */} + + + { + Taro.navigateBack(); + }} + > + + {pageTitle} + + + 交易密码 { handleInput(e, "sms_code"); }} > - + )} * 密码由6位数字组成 - diff --git a/src/user_pages/validPhone/index.config.ts b/src/user_pages/validPhone/index.config.ts index 6d6c0ff..07c17a4 100644 --- a/src/user_pages/validPhone/index.config.ts +++ b/src/user_pages/validPhone/index.config.ts @@ -1,3 +1,9 @@ export default definePageConfig({ - navigationBarTitleText: '验证手机号', -}) + navigationBarTitleText: "验证手机号", + navigationBarBackgroundColor: "#ffffff", + navigationBarTextStyle: "black", + backgroundColor: "#f5f5f5", + enablePullDownRefresh: false, + disableScroll: false, + navigationStyle: "custom", +}); diff --git a/src/user_pages/validPhone/index.scss b/src/user_pages/validPhone/index.scss index 9f201b5..6224b72 100644 --- a/src/user_pages/validPhone/index.scss +++ b/src/user_pages/validPhone/index.scss @@ -1,56 +1,100 @@ .set-transaction-password-page { + background-color: #f5f5f5; + box-sizing: border-box; + height: 100vh; + overflow-y: hidden; + .custom-navbar { + height: 56px; + /* 通常与原生导航栏高度一致 */ + display: flex; + align-items: center; + justify-content: center; + // background-color: #fff; + color: #000; + padding-top: 44px; + /* 适配状态栏 */ + position: sticky; + top: 0; + z-index: 100; background-color: #f5f5f5; + } + + .detail-navigator { + height: 30px; + width: fit-content; + border-radius: 15px; + position: absolute; + left: 12px; + box-sizing: border-box; + display: flex; + align-items: center; + + .detail-navigator-back { + height: 32px; + display: flex; + justify-content: center; + align-items: center; + font-family: PingFang SC; + font-weight: 600; + font-style: Semibold; + font-size: 20px; + letter-spacing: 0.38px; + + & > .detail-navigator-back-icon { + width: 32px; + height: 32px; + } + } + } + + .form-item { padding: 20px; box-sizing: border-box; - height: 100vh; - overflow-y: hidden; + height: 50px; + display: flex; + gap: 10px; + align-items: center; + border-bottom: 1px solid #0000000d; + font-size: 14px; - .form-item { - height: 50px; - display: flex; - gap: 10px; - align-items: center; - border-bottom: 1px solid #0000000D; - font-size: 14px; - - .form-label { - width: 56px; - text-align: right; - } + .form-label { + width: 56px; + text-align: right; } + } - .btn { - width: 78px; - height: 24px; - border: 1px solid rgba(0, 0, 0, 0.06); - display: flex; - align-items: center; - justify-content: center; - color: #fff; - background: #000; - box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1); - backdrop-filter: blur(16px); - font-feature-settings: "liga" off, "clig" off; - font-family: "PingFang SC"; - font-size: 9.6px; - font-style: normal; - line-height: normal; - border-radius: 8px; - margin-right: 0; + .btn { + width: 78px; + height: 24px; + border: 1px solid rgba(0, 0, 0, 0.06); + display: flex; + align-items: center; + justify-content: center; + color: #fff; + background: #000; + box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1); + backdrop-filter: blur(16px); + font-feature-settings: "liga" off, "clig" off; + font-family: "PingFang SC"; + font-size: 9.6px; + font-style: normal; + line-height: normal; + border-radius: 8px; + margin-right: 0; - &.disabled { - color: rgba(255, 255, 255, 0.30); - } + &.disabled { + color: rgba(255, 255, 255, 0.3); } + } - .bottom-btn { - position: fixed; - bottom: 40px; - height: 54px; - width: calc(100vw - 40px); - margin: 0 auto; - border-radius: 16px; - font-size: 16px; - font-weight: 600; - } -} \ No newline at end of file + .bottom-btn { + position: fixed; + bottom: 40px; + height: 54px; + width: calc(100vw - 40px); + border-radius: 16px; + font-size: 16px; + font-weight: 600; + transform: translateX(20px); + } +} diff --git a/src/user_pages/validPhone/index.tsx b/src/user_pages/validPhone/index.tsx index affcce7..bf72055 100644 --- a/src/user_pages/validPhone/index.tsx +++ b/src/user_pages/validPhone/index.tsx @@ -1,11 +1,12 @@ import React, { useState, useEffect } from "react"; -import Taro from '@tarojs/taro'; -import { View, Text, Input, Button } from "@tarojs/components"; +import Taro from "@tarojs/taro"; +import { View, Text, Input, Button, Image } from "@tarojs/components"; import "./index.scss"; import httpService from "@/services/httpService"; import { useUserInfo } from "@/store/userStore"; -import { useKeyboardHeight } from '@/store/keyboardStore' +import { useKeyboardHeight } from "@/store/keyboardStore"; +import img from "@/config/images"; interface FormFields { phone?: string; @@ -13,24 +14,33 @@ interface FormFields { } const ValidPhone: React.FC = () => { + // 获取当前页面的配置 + const currentPage = Taro.getCurrentInstance(); + const pageConfig = currentPage.page?.config; + const pageTitle = pageConfig?.navigationBarTitleText; // 使用全局键盘状态 - const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight() + const { + keyboardHeight, + isKeyboardVisible, + addListener, + initializeKeyboardListener, + } = useKeyboardHeight(); const [smsCodeSended, setSmsCodeSended] = useState(false); - const [smsCodeText, setSmsCodeText] = useState('获取验证码'); + const [smsCodeText, setSmsCodeText] = useState("获取验证码"); // 使用全局键盘状态监听 useEffect(() => { // 初始化全局键盘监听器 - initializeKeyboardListener() + initializeKeyboardListener(); // 添加本地监听器 const removeListener = addListener((height, visible) => { - console.log('AiImportPopup 收到键盘变化:', height, visible) - }) + console.log("AiImportPopup 收到键盘变化:", height, visible); + }); return () => { - removeListener() - } - }, [initializeKeyboardListener, addListener]) + removeListener(); + }; + }, [initializeKeyboardListener, addListener]); const userInfo = useUserInfo(); const [formData, setFormData] = useState({ phone: userInfo.phone || "", @@ -44,14 +54,20 @@ const ValidPhone: React.FC = () => { const handleConfirm = async () => { const isValid = await validSMSCode(); if (isValid) { - Taro.navigateTo({ url: `/user_pages/setTransactionPassword/index?type=reset&phone=${formData.phone}&sms_code=${formData.sms_code}` }); + Taro.navigateTo({ + url: `/user_pages/setTransactionPassword/index?type=reset&phone=${formData.phone}&sms_code=${formData.sms_code}`, + }); } }; const validSMSCode = async () => { const { phone, sms_code } = formData; try { - const res = await httpService.post("/wallet/verify_sms_code", { phone, sms_code, type: "reset_password" }); + const res = await httpService.post("/wallet/verify_sms_code", { + phone, + sms_code, + type: "reset_password", + }); const { verified } = res.data; if (verified) { return true; @@ -78,7 +94,7 @@ const ValidPhone: React.FC = () => { time--; setSmsCodeText(`${time}秒后重发`); } else { - setSmsCodeText('获取验证码'); + setSmsCodeText("获取验证码"); setSmsCodeSended(false); clearInterval(timer); } @@ -92,16 +108,56 @@ const ValidPhone: React.FC = () => { return ( + {/* 导航栏 */} + + + { + Taro.navigateBack(); + }} + > + + {pageTitle} + + + 手机号 验证码 - { handleInput(e, "sms_code") }}> - + { + handleInput(e, "sms_code"); + }} + > + - + ); }; diff --git a/src/user_pages/wallet/index.config.ts b/src/user_pages/wallet/index.config.ts index 72b109b..169580f 100644 --- a/src/user_pages/wallet/index.config.ts +++ b/src/user_pages/wallet/index.config.ts @@ -1,3 +1,9 @@ export default definePageConfig({ navigationBarTitleText: "钱包", + navigationBarBackgroundColor: "#ffffff", + navigationBarTextStyle: "black", + backgroundColor: "#f5f5f5", + enablePullDownRefresh: false, + disableScroll: false, + navigationStyle: "custom", }); diff --git a/src/user_pages/wallet/index.scss b/src/user_pages/wallet/index.scss index 3dcf6d4..1d1e4c0 100644 --- a/src/user_pages/wallet/index.scss +++ b/src/user_pages/wallet/index.scss @@ -10,6 +10,49 @@ width: 0; height: 0; } + .custom-navbar { + height: 56px; + /* 通常与原生导航栏高度一致 */ + display: flex; + align-items: center; + justify-content: center; + // background-color: #fff; + color: #000; + padding-top: 44px; + /* 适配状态栏 */ + position: sticky; + top: 0; + z-index: 100; + background-color: #f5f5f5; + } + + .detail-navigator { + height: 30px; + width: fit-content; + border-radius: 15px; + position: absolute; + left: 12px; + box-sizing: border-box; + display: flex; + align-items: center; + + .detail-navigator-back { + height: 32px; + display: flex; + justify-content: center; + align-items: center; + font-family: PingFang SC; + font-weight: 600; + font-style: Semibold; + font-size: 20px; + letter-spacing: 0.38px; + + & > .detail-navigator-back-icon { + width: 32px; + height: 32px; + } + } + } .wallet_main_card { background: #000; @@ -33,7 +76,7 @@ .modify_password { font-size: 12px; font-weight: 400; - color: #007AFF; + color: #007aff; line-height: 1.5; } } @@ -51,7 +94,7 @@ gap: 8px; .currency_symbol { - font-family: 'DingTalk JinBuTi', sans-serif; + font-family: "DingTalk JinBuTi", sans-serif; font-size: 32px; font-weight: 400; line-height: 0.8; @@ -62,14 +105,14 @@ align-items: flex-end; .main_amount { - font-family: 'DingTalk JinBuTi', sans-serif; + font-family: "DingTalk JinBuTi", sans-serif; font-size: 32px; font-weight: 400; line-height: 0.75; } .decimal_amount { - font-family: 'DingTalk JinBuTi', sans-serif; + font-family: "DingTalk JinBuTi", sans-serif; font-size: 32px; font-weight: 400; line-height: 0.8; @@ -111,7 +154,7 @@ .function_item { background: white; - border: 0.5px solid #EBEBEB; + border: 0.5px solid #ebebeb; border-radius: 20px; padding: 4px 8px; display: flex; @@ -150,7 +193,7 @@ .transaction_history { background: white; - border: 0.5px solid #EBEBEB; + border: 0.5px solid #ebebeb; border-radius: 20px; box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.1); margin: 0 5px; @@ -181,7 +224,7 @@ &::before, &::after { - content: ''; + content: ""; display: block; width: 2px; height: 8px; @@ -206,7 +249,6 @@ } .transaction_list { - .loading_state, .empty_state { padding: 40px 20px; @@ -364,7 +406,6 @@ // 过滤弹窗 .filter_popup { - .popup_content { padding: 16px 20px; .form_section { @@ -386,7 +427,7 @@ gap: 8px; .option_item { - background-color: #0000000D; + background-color: #0000000d; text-align: center; padding: 8px; border-radius: 4px; diff --git a/src/user_pages/wallet/index.tsx b/src/user_pages/wallet/index.tsx index 269032a..bd62747 100644 --- a/src/user_pages/wallet/index.tsx +++ b/src/user_pages/wallet/index.tsx @@ -1,13 +1,13 @@ import React, { useEffect, useState } from "react"; import { View, Text, Input, Button, Image } from "@tarojs/components"; -import Taro, { useDidShow } from "@tarojs/taro"; +import Taro, { useDidShow, useReachBottom } from "@tarojs/taro"; import "./index.scss"; import { CommonPopup } from "@/components"; import httpService from "@/services/httpService"; import { withAuth } from "@/components"; import { PopupPicker } from "@/components/Picker/index"; import { handleCustomerService } from "@/services/userService"; -import { useReachBottom } from "@tarojs/taro"; +import img from "@/config/images"; // 交易记录类型 interface Transaction { @@ -97,6 +97,11 @@ const transaction_type_options: Option[] = [ ]; const WalletPage: React.FC = () => { + // 获取当前页面的配置 + const currentPage = Taro.getCurrentInstance(); + const pageConfig = currentPage.page?.config; + const pageTitle = pageConfig?.navigationBarTitleText; + useReachBottom(() => { if (load_transactions_params.page >= totalPages) return; // 加载更多方法 @@ -157,7 +162,7 @@ const WalletPage: React.FC = () => { }); const modify_load_transactions_params = () => { - set_transactions([]) + set_transactions([]); const { type, transaction_sub_type } = filterParams; set_load_transactions_params((prev) => { return { @@ -431,6 +436,23 @@ const WalletPage: React.FC = () => { return ( + {/* 导航栏 */} + + + { + Taro.navigateBack(); + }} + > + + {pageTitle} + + + {/* 钱包主卡片 */} {/* 头部信息 */}