1
This commit is contained in:
+356
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<header class="header">
|
||||
<h1>Pointly-Tel</h1>
|
||||
<p class="subtitle">高德地图 POI 商户信息查询</p>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="search-box">
|
||||
<div class="form-row">
|
||||
<input
|
||||
v-model="keywords"
|
||||
class="input"
|
||||
placeholder="输入关键词（如：火锅店 咖啡厅）"
|
||||
@keyup.enter="doSearch"
|
||||
/>
|
||||
<input
|
||||
v-model="city"
|
||||
class="input city-input"
|
||||
placeholder="城市（可选）"
|
||||
@keyup.enter="doSearch"
|
||||
/>
|
||||
<button class="btn" :disabled="loading" @click="doSearch">
|
||||
{{ loading ? '搜索中...' : '搜索' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<div v-if="loading" class="loading">
|
||||
<div class="spinner"></div>
|
||||
<span>正在查询...</span>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && searched && results.length === 0" class="empty">
|
||||
未找到相关商户，请尝试其他关键词
|
||||
</div>
|
||||
|
||||
<div v-if="results.length > 0" class="results">
|
||||
<div class="result-meta">共 {{ total }} 条结果</div>
|
||||
<div v-for="item in results" :key="item.poiId" class="card">
|
||||
<div class="card-header">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<span v-if="item.category" class="tag">{{ item.category.split('|').pop() }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="info-row">
|
||||
<span class="label">电话</span>
|
||||
<a v-if="item.phone" :href="'tel:' + item.phone" class="phone">{{ item.phone }}</a>
|
||||
<span v-else class="na">暂无</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">地址</span>
|
||||
<span>{{ item.address || '暂无' }}</span>
|
||||
</div>
|
||||
<div class="info-row" v-if="item.businessArea">
|
||||
<span class="label">商圈</span>
|
||||
<span>{{ item.businessArea }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="total > results.length" class="pagination">
|
||||
<button class="btn-outline" :disabled="page <= 1" @click="page--; doSearch()">上一页</button>
|
||||
<span class="page-info">第 {{ page }} / {{ maxPage }} 页（共 {{ total }} 条）</span>
|
||||
<button class="btn-outline" :disabled="page >= maxPage" @click="page++; doSearch()">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { searchPoi } from './api/poi.js'
|
||||
|
||||
const keywords = ref('')
|
||||
const city = ref('')
|
||||
const results = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const searched = ref(false)
|
||||
const error = ref('')
|
||||
const page = ref(1)
|
||||
const offset = ref(20)
|
||||
const maxPage = ref(1)
|
||||
|
||||
async function doSearch() {
|
||||
if (!keywords.value.trim()) {
|
||||
error.value = '请输入搜索关键词'
|
||||
return
|
||||
}
|
||||
error.value = ''
|
||||
loading.value = true
|
||||
searched.value = true
|
||||
try {
|
||||
const data = await searchPoi(keywords.value.trim(), city.value.trim(), page.value, offset.value)
|
||||
results.value = data.list || []
|
||||
total.value = data.total || 0
|
||||
maxPage.value = data.maxPage || 1
|
||||
page.value = data.page || 1
|
||||
offset.value = data.offset || 20
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || e.message || '请求失败'
|
||||
results.value = []
|
||||
total.value = 0
|
||||
maxPage.value = 1
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #f5f7fa;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.app {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 28px;
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: #1a73e8;
|
||||
}
|
||||
|
||||
.city-input {
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 28px;
|
||||
background: #1a73e8;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) {
|
||||
background: #1557b0;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 48px 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid #e5e7eb;
|
||||
border-top-color: #1a73e8;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 48px 0;
|
||||
color: #999;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.results {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.result-meta {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 12px;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
font-size: 16px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 12px;
|
||||
background: #e8f0fe;
|
||||
color: #1a73e8;
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
min-width: 40px;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
color: #1a73e8;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.phone:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.na {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
padding: 8px 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-outline:hover:not(:disabled) {
|
||||
border-color: #1a73e8;
|
||||
color: #1a73e8;
|
||||
}
|
||||
|
||||
.btn-outline:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.DEV ? '' : '',
|
||||
timeout: 30000,
|
||||
})
|
||||
|
||||
export async function searchPoi(keywords, city = '', page = 1, offset = 20) {
|
||||
const params = { keywords }
|
||||
if (city) params.city = city
|
||||
params.page = page
|
||||
params.offset = offset
|
||||
|
||||
const res = await api.get('/poi/search', { params })
|
||||
return res.data.data
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
Reference in New Issue
Block a user