106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<base-background />
|
||
<!-- 使用自定义导航栏组件 -->
|
||
<custom-navbar title="带图片背景的基础界面"
|
||
ref="customNavbar"/>
|
||
<view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
|
||
<!-- 状态展示 -->
|
||
<status-display
|
||
v-if="loading"
|
||
type="loading"
|
||
loading-text="加载中..."
|
||
/>
|
||
<!-- 页面内容将在这里添加 -->
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
CommonEnum
|
||
} from '@/enum/common.js'
|
||
import {
|
||
MonkEnum
|
||
} from '@/enum/monk.js'
|
||
import {
|
||
getMonkList
|
||
} from '@/api/monk/monk.js'
|
||
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
||
import BaseBackground from "../../components/base-background/base-background.vue";
|
||
import SearchBox from "../../components/search-box/search-box.vue";
|
||
import StatusDisplay from "../../components/status-display/status-display.vue";
|
||
|
||
export default {
|
||
components: {
|
||
StatusDisplay,
|
||
CustomNavbar,
|
||
BaseBackground,
|
||
MonkSearchBox: SearchBox
|
||
},
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#F5F0E7"
|
||
},
|
||
CommonEnum,
|
||
MonkEnum,
|
||
monkList: [],
|
||
searchName: ''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.fetchMonkList()
|
||
},
|
||
methods: {
|
||
async fetchMonkList() {
|
||
try {
|
||
const res = await getMonkList({ name: this.searchName })
|
||
if (res.code === 200 && Array.isArray(res.rows)) {
|
||
this.monkList = res.rows
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg || '获取失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (e) {
|
||
uni.showToast({
|
||
title: '网络错误',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 去除 HTML 标签，返回纯文本
|
||
stripHtmlTags(html) {
|
||
if (!html) return ''; // 处理空值
|
||
return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background: transparent;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
/* 移除padding-top，因为导航栏已经处理了状态栏适配 */
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
padding: 0 15rpx;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
</style> |