捐款记录搜索页微调

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

View File

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

View File

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

View File

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