捐款记录搜索页微调

This commit is contained in:
WindowBird 2025-09-17 14:57:31 +08:00
parent bde55f1563
commit 07ca8b76ca
4 changed files with 157 additions and 147 deletions

View File

@ -1,101 +1,106 @@
<template> <template>
<view class="searchBox" :style="{ width: width }"> <view :style="{ width: width }" class="searchBox">
<image class="search-icon" :src="searchIcon" mode="aspectFit"></image> <image :src="searchIcon" class="search-icon" mode="aspectFit"></image>
<input <input
class="search-input"
:value="value"
@input="onInput"
:placeholder="placeholder" :placeholder="placeholder"
:value="value"
class="search-input"
confirm-type="search"
placeholder-class="search-placeholder" placeholder-class="search-placeholder"
@confirm="onSearch" @confirm="onSearch"
confirm-type="search" @input="onInput"
/> />
<view class="search-btn" @click="onSearch">{{ btnText }}</view> <view class="search-btn" @click="onSearch">{{ btnText }}</view>
</view> </view>
</template> </template>
<script> <script>
import CommonEnum from '@/enum/common.js' import CommonEnum from "@/enum/common.js";
export default {
name: 'SearchBox', export default {
props: { name: "SearchBox",
value: { props: {
type: String, value: {
default: '', type: String,
}, default: "",
width: {
type: String,
default: '690rpx',
},
placeholder: {
type: String,
default: '请输入高僧姓名',
},
btnText: {
type: String,
default: '搜索',
},
// CommonEnum.SEARCH
searchIcon: {
type: String,
default: () => CommonEnum.SEARCH,
},
}, },
methods: { width: {
onInput(e) { type: String,
// default: "690rpx",
this.$emit('input', e.detail.value)
},
onSearch() {
//
if (this.value.trim()) {
this.$emit('search', this.value)
}
},
}, },
} placeholder: {
type: String,
default: "请输入高僧姓名",
},
btnText: {
type: String,
default: "搜索",
},
// CommonEnum.SEARCH
searchIcon: {
type: String,
default: () => CommonEnum.SEARCH,
},
},
methods: {
onInput(e) {
//
this.$emit("input", e.detail.value);
},
onSearch() {
//
if (this.value) {
this.$emit("search", this.value);
}
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.searchBox { .searchBox {
display: flex; display: flex;
align-items: center; align-items: center;
height: 70rpx; height: 70rpx;
background: #fffbf5; background: #fffbf5;
border-radius: 10rpx; border-radius: 10rpx;
border: 1rpx solid #c7a26d; border: 1rpx solid #c7a26d;
margin-top: 20rpx; margin-top: 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
padding: 0 12rpx; padding: 0 12rpx;
} }
.search-icon {
width: 32rpx; .search-icon {
height: 32rpx; width: 32rpx;
margin: 0 28rpx; height: 32rpx;
} margin: 0 28rpx;
.search-input { }
flex: 1;
font-size: 28rpx; .search-input {
color: #333; flex: 1;
background: transparent; font-size: 28rpx;
border: none; color: #333;
outline: none; background: transparent;
height: 100%; border: none;
} outline: none;
.search-placeholder { height: 100%;
color: #bfa16b; }
font-size: 28rpx;
} .search-placeholder {
.search-btn { color: #bfa16b;
background: #bfa16b; font-size: 28rpx;
color: #fff; }
font-size: 26rpx;
border-radius: 6rpx; .search-btn {
padding: 0 24rpx; background: #bfa16b;
height: 48rpx; color: #fff;
display: flex; font-size: 26rpx;
align-items: center; border-radius: 6rpx;
justify-content: center; padding: 0 24rpx;
margin-left: 16rpx; height: 48rpx;
} display: flex;
align-items: center;
justify-content: center;
margin-left: 16rpx;
}
</style> </style>

View File

@ -32,7 +32,6 @@ export default {
width: 100%; width: 100%;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
padding-bottom: 106rpx;
} }
.list-header { .list-header {

View File

@ -48,7 +48,7 @@
> >
<view class="filterBox"> <view class="filterBox">
<view class="filterAll">全部筛选</view> <view class="filterAll">全部筛选</view>
<u-icon class="filterClose" name="close"></u-icon> <u-icon class="filterClose" name="close" @click="show = false"></u-icon>
<view class="filterBody"> <view class="filterBody">
<view class="filterTag">金额排序</view> <view class="filterTag">金额排序</view>
<view class="custom-radio-group"> <view class="custom-radio-group">
@ -186,7 +186,7 @@ export default {
customMin: "", customMin: "",
customMax: "", customMax: "",
show: true, show: false,
filter: { filter: {
minAmount: "", minAmount: "",
@ -269,6 +269,7 @@ page {
padding: 20rpx; padding: 20rpx;
.filterTag { .filterTag {
margin-left: 40rpx;
width: 96rpx; width: 96rpx;
height: 32rpx; height: 32rpx;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi; font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -284,7 +285,7 @@ page {
.custom-radio-group { .custom-radio-group {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: #f8f4e9;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
justify-content: space-around; justify-content: space-around;
@ -292,7 +293,7 @@ page {
.custom-radio-button { .custom-radio-button {
margin: 0 20rpx; margin: 0 20rpx;
flex: 1; flex: 1;
padding: 12px 24px; padding: 12rpx 24rpx;
background-color: #ffffff; background-color: #ffffff;
color: #333333; color: #333333;
text-align: center; text-align: center;
@ -310,12 +311,13 @@ page {
.container { .container {
padding: 20rpx; padding: 20rpx;
background-color: #f8f4e9;
border-radius: 12rpx; border-radius: 12rpx;
.customAmount { .customAmount {
background-color: #ffffff; background-color: #ffffff;
margin-top: 16rpx; margin-top: 16rpx;
padding: 16rpx;
display: flex; display: flex;
gap: 16rpx; gap: 16rpx;
justify-content: center; justify-content: center;
@ -411,11 +413,12 @@ page {
} }
.optionColumn { .optionColumn {
margin-top: 20rpx;
display: flex; display: flex;
margin-left: 34rpx; margin-left: 34rpx;
width: 686rpx; width: 686rpx;
height: 90rpx; height: 90rpx;
background: #a24242;
border-radius: 13rpx 13rpx 13rpx 13rpx; border-radius: 13rpx 13rpx 13rpx 13rpx;
.reset { .reset {
@ -425,6 +428,7 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 13rpx 0 0 13rpx;
text { text {
height: 50rpx; height: 50rpx;
@ -443,7 +447,7 @@ page {
width: 344rpx; width: 344rpx;
height: 90rpx; height: 90rpx;
background: #a24242; background: #a24242;
border-radius: 50rpx; border-radius: 0 13rpx 13rpx 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -465,7 +469,7 @@ page {
.header { .header {
width: 100%; width: 100%;
min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -12,13 +12,13 @@ export const dataManagerMixin = {
loading: false, loading: false,
// 分页参数 // 分页参数
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 8,
hasMore: true, hasMore: true,
// 总数据量 // 总数据量
total: 0, total: 0,
// 当前查询参数 // 当前查询参数
currentParams: {}, currentParams: {},
} };
}, },
methods: { methods: {
@ -42,30 +42,30 @@ export const dataManagerMixin = {
apiCall, apiCall,
dataTransformer, dataTransformer,
params = {}, params = {},
dataPath = 'rows', dataPath = "rows",
totalPath = 'total', totalPath = "total",
onSuccess, onSuccess,
onError, onError,
showLoading = true, showLoading = true,
showError = true, showError = true,
} = options } = options;
if (!apiCall) { if (!apiCall) {
console.error('fetchData: apiCall 是必需的') console.error("fetchData: apiCall 是必需的");
return return;
} }
// 设置loading状态 // 设置loading状态
if (showLoading) { if (showLoading) {
this.loading = true this.loading = true;
} }
try { try {
// 更新页码 // 更新页码
if (isLoadMore) { if (isLoadMore) {
this.pageNum++ this.pageNum++;
} else { } else {
this.pageNum = 1 this.pageNum = 1;
} }
// 构建请求参数 // 构建请求参数
@ -74,73 +74,75 @@ export const dataManagerMixin = {
pageSize: this.pageSize, pageSize: this.pageSize,
...this.currentParams, ...this.currentParams,
...params, ...params,
} };
// 调用API // 调用API
const response = await apiCall(requestParams) const response = await apiCall(requestParams);
console.log('API响应:', response) console.log("API响应:", response);
console.log('数据路径:', dataPath) console.log("数据路径:", dataPath);
console.log('总数路径:', totalPath) console.log("总数路径:", totalPath);
if (response.code === 200) { if (response.code === 200) {
// 根据路径获取数据 // 根据路径获取数据
const dataArray = this.getNestedValue(response, dataPath) || [] const dataArray = this.getNestedValue(response, dataPath) || [];
const total = this.getNestedValue(response, totalPath) || 0 const total = this.getNestedValue(response, totalPath) || 0;
console.log('提取的数据数组:', dataArray) console.log("提取的数据数组:", dataArray);
console.log('总数:', total) console.log("总数:", total);
// 转换数据 // 转换数据
const newData = dataTransformer ? dataTransformer(dataArray) : dataArray const newData = dataTransformer
? dataTransformer(dataArray)
: dataArray;
console.log('转换后的数据:', newData) console.log("转换后的数据:", newData);
// 更新数据 // 更新数据
if (isLoadMore) { if (isLoadMore) {
this.dataList = [...this.dataList, ...newData] this.dataList = [...this.dataList, ...newData];
} else { } else {
this.dataList = newData this.dataList = newData;
} }
console.log('更新后的 dataList:', this.dataList) console.log("更新后的 dataList:", this.dataList);
// 更新状态 // 更新状态
this.total = total this.total = total;
this.hasMore = newData.length === this.pageSize this.hasMore = newData.length === this.pageSize;
this.currentParams = { ...requestParams } this.currentParams = { ...requestParams };
// 成功回调 // 成功回调
if (onSuccess) { if (onSuccess) {
onSuccess(newData, response) onSuccess(newData, response);
} }
} else { } else {
const errorMsg = response.msg || '获取数据失败' const errorMsg = response.msg || "获取数据失败";
if (showError) { if (showError) {
uni.showToast({ uni.showToast({
title: errorMsg, title: errorMsg,
icon: 'none', icon: "none",
}) });
} }
if (onError) { if (onError) {
onError(errorMsg, response) onError(errorMsg, response);
} }
} }
} catch (error) { } catch (error) {
console.error('获取数据失败:', error) console.error("获取数据失败:", error);
const errorMsg = '网络错误' const errorMsg = "网络错误";
if (showError) { if (showError) {
uni.showToast({ uni.showToast({
title: errorMsg, title: errorMsg,
icon: 'none', icon: "none",
}) });
} }
if (onError) { if (onError) {
onError(errorMsg, error) onError(errorMsg, error);
} }
} finally { } finally {
if (showLoading) { if (showLoading) {
this.loading = false this.loading = false;
} }
} }
}, },
@ -153,7 +155,7 @@ export const dataManagerMixin = {
return this.fetchData({ return this.fetchData({
isLoadMore: false, isLoadMore: false,
...options, ...options,
}) });
}, },
/** /**
@ -165,7 +167,7 @@ export const dataManagerMixin = {
return this.fetchData({ return this.fetchData({
isLoadMore: true, isLoadMore: true,
...options, ...options,
}) });
} }
}, },
@ -179,18 +181,18 @@ export const dataManagerMixin = {
isLoadMore: false, isLoadMore: false,
params: searchParams, params: searchParams,
...options, ...options,
}) });
}, },
/** /**
* 重置分页状态 * 重置分页状态
*/ */
resetPagination() { resetPagination() {
this.pageNum = 1 this.pageNum = 1;
this.hasMore = true //可能就单页 this.hasMore = true; //可能就单页
this.dataList = [] this.dataList = [];
this.total = 0 this.total = 0;
this.currentParams = {} this.currentParams = {};
}, },
/** /**
@ -200,10 +202,10 @@ export const dataManagerMixin = {
* @returns {*} * @returns {*}
*/ */
getNestedValue(obj, path) { getNestedValue(obj, path) {
if (!path) return obj if (!path) return obj;
return path.split('.').reduce((current, key) => { return path.split(".").reduce((current, key) => {
return current && current[key] !== undefined ? current[key] : null return current && current[key] !== undefined ? current[key] : null;
}, obj) }, obj);
}, },
/** /**
@ -211,8 +213,8 @@ export const dataManagerMixin = {
* @param {number} pageSize 分页大小 * @param {number} pageSize 分页大小
*/ */
setPageSize(pageSize) { setPageSize(pageSize) {
this.pageSize = pageSize this.pageSize = pageSize;
this.resetPagination() this.resetPagination();
}, },
/** /**
@ -228,7 +230,7 @@ export const dataManagerMixin = {
hasMore: this.hasMore, hasMore: this.hasMore,
total: this.total, total: this.total,
currentParams: this.currentParams, currentParams: this.currentParams,
} };
}, },
}, },
} };