捐款记录搜索页微调
This commit is contained in:
parent
bde55f1563
commit
07ca8b76ca
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user