捐款记录搜索页微调
This commit is contained in:
parent
bde55f1563
commit
07ca8b76ca
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ export default {
|
|||
width: 100%;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
padding-bottom: 106rpx;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user