WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Monk组件动态创建-动态搜索框实现

Browse Source
This commit is contained in:
minimaxagent1 2025-07-29 16:39:21 +08:00
parent 7c7ebc6271
commit 5827bd02df
3 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,4 +1,5 @@
node_modules/ node_modules/
.project .project
unpackage/ unpackage/
.DS_Store. .DS_Store.
/config/dev.js

4
manifest.json
View File

@ -51,7 +51,7 @@
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin" : {
"libVersion" : "latest", "libVersion" : "latest",
"appid" : "wx3914d4d7441fb438", "appid" : "wx58ed81cb59afda38",
"setting" : { "setting" : {
"urlCheck" : false "urlCheck" : false
}, },
@ -73,5 +73,5 @@
"enable" : false "enable" : false
}, },
"vueVersion" : "2", "vueVersion" : "2",
"sassImplementationName": "node-sass" "sassImplementationName" : "node-sass"
} }

32
pages/Monk/Monk.vue
View File

@ -7,8 +7,15 @@
<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image> <image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
<view class='searchBox'> <view class='searchBox'>
<image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image> <image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
<text class="search-text">张姗姗</text> <input
<view class="search-btn">搜索</view> class="search-input"
v-model="searchName"
placeholder="请输入高僧姓名"
placeholder-class="search-placeholder"
@confirm="onSearch"
confirm-type="search"
/>
<view class="search-btn" @click="onSearch">搜索</view>
</view> </view>
<view class="monk-list"> <view class="monk-list">
<view class="monk-item" v-for="(item, idx) in monkList" :key="item.id"> <view class="monk-item" v-for="(item, idx) in monkList" :key="item.id">
@ -44,7 +51,8 @@
}, },
CommonEnum, CommonEnum,
MonkEnum, MonkEnum,
monkList: [] monkList: [],
searchName: ''
} }
}, },
onLoad() { onLoad() {
@ -53,7 +61,7 @@
methods: { methods: {
async fetchMonkList() { async fetchMonkList() {
try { try {
const res = await getMonkList() const res = await getMonkList({ name: this.searchName })
if (res.code === 200 && Array.isArray(res.rows)) { if (res.code === 200 && Array.isArray(res.rows)) {
this.monkList = res.rows this.monkList = res.rows
} else { } else {
@ -69,6 +77,9 @@
}) })
} }
}, },
onSearch() {
this.fetchMonkList()
},
// 去除 HTML 标签，返回纯文本 // 去除 HTML 标签，返回纯文本
stripHtmlTags(html) { stripHtmlTags(html) {
if (!html) return ''; // 处理空值 if (!html) return ''; // 处理空值
@ -129,13 +140,22 @@
.search-icon { .search-icon {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin: 0 16rpx 0 0; margin: 0 28rpx;
} }
.search-text { .search-input {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #333;
background: transparent;
border: none;
outline: none;
height: 100%;
}
.search-placeholder {
color: #bfa16b; color: #bfa16b;
font-size: 28rpx;
} }
.search-btn { .search-btn {