42 lines
1.3 KiB
Plaintext
42 lines
1.3 KiB
Plaintext
<template>
|
|
<view :class="['mt-search', isLargeScreen ? 'large' : 'small']">
|
|
<view class="mt-search-bar">
|
|
<input v-model="keyword" :placeholder="t('mt.search.placeholder')" @confirm="onSearch" />
|
|
<button @tap="onSearch">{{ t('mt.search.button') }}</button>
|
|
</view>
|
|
<scroll-view>
|
|
<view v-for="item in searchResults" :key="item.id" class="mt-search-item" @tap="goToDetail(item.id)">
|
|
<text>{{ item.title }}</text>
|
|
<text class="mt-summary">{{ item.summary }}</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
<script lang="uts">
|
|
import { ref } from 'uni-app'
|
|
import { t } from '@/i18n/mt'
|
|
import { isLargeScreen } from '@/utils/responsive'
|
|
import { searchNews } from '@/composables/use-news'
|
|
|
|
const keyword = ref('')
|
|
const searchResults = ref([])
|
|
|
|
function onSearch() {
|
|
searchNews(keyword.value).then(res => {
|
|
searchResults.value = res
|
|
})
|
|
}
|
|
function goToDetail(id: string) {
|
|
uni.navigateTo({ url: `/pages/mt/detail.uvue?id=${id}` })
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.mt-search {
|
|
padding: 24rpx;
|
|
&.large { max-width: 900rpx; margin: 0 auto; }
|
|
.mt-search-bar { display: flex; gap: 16rpx; margin-bottom: 24rpx; }
|
|
.mt-search-item { padding: 16rpx 0; border-bottom: 1px solid #eee; }
|
|
.mt-summary { color: #888; font-size: 24rpx; }
|
|
}
|
|
</style>
|