bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

自定义title

Browse Source
This commit is contained in:
Ultrame
2025-10-17 10:11:36 +08:00
parent 54ac130e37
commit ac2c9571e7
22 changed files with 863 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/user_pages/billDetail/index.config.ts
View File

@@ -1,3 +1,9 @@
export default definePageConfig({
navigationBarTitleText: '明细详情',
})
navigationBarTitleText: "明细详情",
navigationBarBackgroundColor: "#ffffff",
navigationBarTextStyle: "black",
backgroundColor: "#f5f5f5",
enablePullDownRefresh: false,
disableScroll: false,
navigationStyle: "custom",
});

43
src/user_pages/billDetail/index.scss
View File

@@ -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;

53
src/user_pages/billDetail/index.tsx
View File

@@ -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<BillDetail>({});
const getBillDetail = async () => {
try {
const res = await httpService.post<BillDetail>("/wallet/transaction_detail", { transaction_id: id })
const res = await httpService.post<BillDetail>(
"/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 (
<View className="bill-detail-page">
{/* 导航栏 */}
<View className="custom-navbar">
<View className="detail-navigator">
<View
className="detail-navigator-back"
onClick={() => {
Taro.navigateBack();
}}
>
<Image
className="detail-navigator-back-icon"
src={img.ICON_NAVIGATOR_BACK}
/>
<Text>{pageTitle}</Text>
</View>
</View>
</View>
<View className="title-text-box">
<View className="title-text">现金交易 (元)</View>
<View className="amount-text">
<Text>{billDetail.transaction_type === 'expense' ? '-' : '+'}</Text>
<Text>{billDetail.transaction_type === "expense" ? "-" : "+"}</Text>
<Text>{billDetail.amount_yuan}</Text>
</View>
</View>
<View className="detail-wrapper">
<View className="detail-item">
<Text>交易时间</Text>
<Text>{billDetail.create_time && dayjs(billDetail.create_time).format('YYYY-MM-DD HH:mm:ss')}</Text>
<Text>
{billDetail.create_time &&
dayjs(billDetail.create_time).format("YYYY-MM-DD HH:mm:ss")}
</Text>
</View>
<View className="detail-item">
<Text>活动标题</Text>
@@ -91,7 +118,9 @@ const BillDetail: React.FC = () => {
<Text>商户单号</Text>
<View className="with-btn-box">
<Text>{billDetail.order_no}</Text>
<Text className="btn" onClick={() => copyText(billDetail.order_no)}>复制</Text>
<Text className="btn" onClick={() => copyText(billDetail.order_no)}>
复制
</Text>
</View>
</View>
</View>

10
src/user_pages/downloadBill/index.config.ts
View File

@@ -1,3 +1,9 @@
export default definePageConfig({
navigationBarTitleText: '下载账单',
})
navigationBarTitleText: "下载账单",
navigationBarBackgroundColor: "#ffffff",
navigationBarTextStyle: "black",
backgroundColor: "#f5f5f5",
enablePullDownRefresh: false,
disableScroll: false,
navigationStyle: "custom",
});

53
src/user_pages/downloadBill/index.scss
View File

@@ -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 @@
}
}
}
}
}

52
src/user_pages/downloadBill/index.tsx
View File

@@ -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>(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 (
<View className="download_bill_page">
{/* 导航栏 */}
<View className="custom-navbar">
<View className="detail-navigator">
<View
className="detail-navigator-back"
onClick={() => {
Taro.navigateBack();
}}
>
<Image
className="detail-navigator-back-icon"
src={img.ICON_NAVIGATOR_BACK}
/>
<Text>{pageTitle}</Text>
</View>
</View>
</View>
<View className="hint_content">
<Text>最长可导出三个月的账单 </Text>
{/* <Text className="button_text">示例文件</Text> */}
@@ -247,8 +272,9 @@ const DownloadBill: React.FC = () => {
近一周
</View>
<View
className={`option_button ${dateType === "month" ? "active" : ""
}`}
className={`option_button ${
dateType === "month" ? "active" : ""
}`}
onClick={() => {
selectDateRange("month");
}}
@@ -256,8 +282,9 @@ const DownloadBill: React.FC = () => {
近一月
</View>
<View
className={`option_button ${dateType === "custom" ? "active" : ""
}`}
className={`option_button ${
dateType === "custom" ? "active" : ""
}`}
onClick={() => {
selectDateRange("custom");
}}
@@ -298,7 +325,10 @@ const DownloadBill: React.FC = () => {
>
下载记录
</Text>
<Button className={`download_button ${!dateRange.start ? 'disabled' : ''}`} onClick={handleDownloadBill}>
<Button
className={`download_button ${!dateRange.start ? "disabled" : ""}`}
onClick={handleDownloadBill}
>
下载
</Button>
</View>

10
src/user_pages/downloadBillRecords/index.config.ts
View File

@@ -1,3 +1,9 @@
export default definePageConfig({
navigationBarTitleText: '下载记录',
})
navigationBarTitleText: "下载记录",
navigationBarBackgroundColor: "#ffffff",
navigationBarTextStyle: "black",
backgroundColor: "#f5f5f5",
enablePullDownRefresh: false,
disableScroll: false,
navigationStyle: "custom",
});

170
src/user_pages/downloadBillRecords/index.scss
View File

@@ -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;
}
}
}
}
}
}
}
.tips {
font-size: 12px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
background-color: #ffffff;
padding: 20px 0;
}
}

75
src/user_pages/downloadBillRecords/index.tsx
View File

@@ -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<BillRecord[]>([]);
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 (
<View className="download-bill-records-page">
<View className="records-container">
{
records.map((record) => (
<View className="record-item" key={record.id}>
<View className="title-text">{record.file_name}</View>
<View className="info-item">
<Text>申请时间</Text>
<Text>{record.create_time}</Text>
</View>
<View className="info-item">
<Text>账单范围</Text>
<Text>{record.date_range_desc}</Text>
</View>
<View className="info-item">
<Text></Text>
<Text className="btn">查看材料</Text>
</View>
</View>
))
}
{/* 导航栏 */}
<View className="custom-navbar">
<View className="detail-navigator">
<View
className="detail-navigator-back"
onClick={() => {
Taro.navigateBack();
}}
>
<Image
className="detail-navigator-back-icon"
src={img.ICON_NAVIGATOR_BACK}
/>
<Text>{pageTitle}</Text>
</View>
</View>
</View>
<View className="records-container">
{records.map((record) => (
<View className="record-item" key={record.id}>
<View className="title-text">{record.file_name}</View>
<View className="info-item">
<Text>申请时间</Text>
<Text>{record.create_time}</Text>
</View>
<View className="info-item">
<Text>账单范围</Text>
<Text>{record.date_range_desc}</Text>
</View>
<View className="info-item">
<Text></Text>
<Text className="btn">查看材料</Text>
</View>
</View>
))}
</View>
<View className="tips">
出于信息安全考虑，仅保留并展示7天内的账单下载记录
</View>
<View className="tips">出于信息安全考虑，仅保留并展示7天内的账单下载记录</View>
</View>
);
};

12
src/user_pages/edit/index.config.ts
View File

@@ -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',
})
navigationStyle: "custom",
});

10
src/user_pages/queryTransactions/index.config.ts
View File

@@ -1,3 +1,9 @@
export default definePageConfig({
navigationBarTitleText: '查找交易',
})
navigationBarTitleText: "查找交易",
navigationBarBackgroundColor: "#ffffff",
navigationBarTextStyle: "black",
backgroundColor: "#f5f5f5",
enablePullDownRefresh: false,
disableScroll: false,
navigationStyle: "custom",
});

54
src/user_pages/queryTransactions/index.scss
View File

@@ -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;
}
}
}

21
src/user_pages/queryTransactions/index.tsx
View File

@@ -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<Transaction[]>([]);
@@ -238,6 +242,23 @@ const QueryTransactions = () => {
return (
<>
<View className="listSearchContainer">
{/* 导航栏 */}
<View className="custom-navbar">
<View className="detail-navigator">
<View
className="detail-navigator-back"
onClick={() => {
Taro.navigateBack();
}}
>
<Image
className="detail-navigator-back-icon"
src={img.ICON_NAVIGATOR_BACK}
/>
<Text>{pageTitle}</Text>
</View>
</View>
</View>
{/* 搜索 */}
<View className="topSearchWrapper">
<View className="topSearch">

10
src/user_pages/setTransactionPassword/index.config.ts
View File

@@ -1,3 +1,9 @@
export default definePageConfig({
navigationBarTitleText: '设置交易密码',
})
navigationBarTitleText: "设置交易密码",
navigationBarBackgroundColor: "#ffffff",
navigationBarTextStyle: "black",
backgroundColor: "#f5f5f5",
enablePullDownRefresh: false,
disableScroll: false,
navigationStyle: "custom",
});

154
src/user_pages/setTransactionPassword/index.scss
View File

@@ -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;
}
}
.bottom-btn {
position: fixed;
bottom: 40px;
height: 54px;
width: calc(100vw - 40px);
border-radius: 16px;
font-size: 16px;
font-weight: 600;
transform: translateX(20px);
}
}

93
src/user_pages/setTransactionPassword/index.tsx
View File

@@ -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<FormFields>({
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 (
<View className="set-transaction-password-page">
{
// handleType === "reset" && (
// <View className="form-item">
// <Text className="form-label">旧密码</Text>
// <Input placeholder="请输入旧密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "old_password") }}></Input>
// </View>
// )
}
{/* 导航栏 */}
<View className="custom-navbar">
<View className="detail-navigator">
<View
className="detail-navigator-back"
onClick={() => {
Taro.navigateBack();
}}
>
<Image
className="detail-navigator-back-icon"
src={img.ICON_NAVIGATOR_BACK}
/>
<Text>{pageTitle}</Text>
</View>
</View>
</View>
<View className="form-item">
<Text className="form-label">交易密码</Text>
<Input
@@ -157,11 +186,23 @@ const SetTransactionPassword: React.FC = () => {
handleInput(e, "sms_code");
}}
></Input>
<Button className={`btn ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
<Button
className={`btn ${smsCodeSended ? "disabled" : ""}`}
disabled={smsCodeSended}
onClick={getSMSCode}
>
{smsCodeText}
</Button>
</View>
)}
<Text className="tips">* 密码由6位数字组成</Text>
<Button className="btn bottom-btn" onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>
<Button
className={`btn bottom-btn ${!valid ? "disabled" : ""}`}
onClick={handleConfirm}
style={{
bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined,
}}
>
完成
</Button>
</View>

10
src/user_pages/validPhone/index.config.ts
View File

@@ -1,3 +1,9 @@
export default definePageConfig({
navigationBarTitleText: '验证手机号',
})
navigationBarTitleText: "验证手机号",
navigationBarBackgroundColor: "#ffffff",
navigationBarTextStyle: "black",
backgroundColor: "#f5f5f5",
enablePullDownRefresh: false,
disableScroll: false,
navigationStyle: "custom",
});

136
src/user_pages/validPhone/index.scss
View File

@@ -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;
}
}
.bottom-btn {
position: fixed;
bottom: 40px;
height: 54px;
width: calc(100vw - 40px);
border-radius: 16px;
font-size: 16px;
font-weight: 600;
transform: translateX(20px);
}
}

90
src/user_pages/validPhone/index.tsx
View File

@@ -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<FormFields>({
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 (
<View className="set-transaction-password-page">
{/* 导航栏 */}
<View className="custom-navbar">
<View className="detail-navigator">
<View
className="detail-navigator-back"
onClick={() => {
Taro.navigateBack();
}}
>
<Image
className="detail-navigator-back-icon"
src={img.ICON_NAVIGATOR_BACK}
/>
<Text>{pageTitle}</Text>
</View>
</View>
</View>
<View className="form-item">
<Text className="form-label">手机号</Text>
<Input defaultValue={formData.phone} type="number" disabled></Input>
</View>
<View className="form-item">
<Text className="form-label">验证码</Text>
<Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
<Button className={`btn ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
<Input
placeholder="请输入验证码"
type="number"
onInput={(e) => {
handleInput(e, "sms_code");
}}
></Input>
<Button
className={`btn ${smsCodeSended ? "disabled" : ""}`}
disabled={smsCodeSended}
onClick={getSMSCode}
>
{smsCodeText}
</Button>
</View>
<Button className={`btn bottom-btn ${formData.sms_code === "" ? 'disabled' : ''}`} disabled={formData.sms_code === ""} onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>提交</Button>
<Button
className={`btn bottom-btn ${
formData.sms_code === "" ? "disabled" : ""
}`}
disabled={formData.sms_code === ""}
onClick={handleConfirm}
style={{
bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined,
}}
>
提交
</Button>
</View>
);
};

6
src/user_pages/wallet/index.config.ts
View File

@@ -1,3 +1,9 @@
export default definePageConfig({
navigationBarTitleText: "钱包",
navigationBarBackgroundColor: "#ffffff",
navigationBarTextStyle: "black",
backgroundColor: "#f5f5f5",
enablePullDownRefresh: false,
disableScroll: false,
navigationStyle: "custom",
});

61
src/user_pages/wallet/index.scss
View File

@@ -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;

28
src/user_pages/wallet/index.tsx
View File

@@ -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<TransactionSubType>[] = [
];
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 (
<View className="wallet_page">
{/* 导航栏 */}
<View className="custom-navbar">
<View className="detail-navigator">
<View
className="detail-navigator-back"
onClick={() => {
Taro.navigateBack();
}}
>
<Image
className="detail-navigator-back-icon"
src={img.ICON_NAVIGATOR_BACK}
/>
<Text>{pageTitle}</Text>
</View>
</View>
</View>
{/* 钱包主卡片 */}
<View className="wallet_main_card">
{/* 头部信息 */}