<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垃圾分类查询助手</title>
<style>
.search, .result {
width: 720px;
margin: 50px auto;
}
.search > input {
width: 520px;
border: none;
outline: none;
text-align: center;
font-size: 36px;
line-height: 36px;
border-bottom: 1px solid gray;
margin: 0 20px;
}
.search button {
background-color: red;
color: white;
font-size: 28px;
border: none;
outline: none;
width: 120px;
}
.result > p, .result > div {
width: 640px;
margin: 0 auto;
}
.result > p, .result span {
text-align: left;
font-size: 28px;
}
.result img {
vertical-align: middle;
}
.explain {
font-size: 12px;
color: darkgray;
}
.result .pre {
font-size: 16px;
}
</style>
</head>
<body>
<div id="app">
<div class="search">
<input type="text" placeholder="请输入垃圾名字" v-model.trim="word" @keydown.enter="search()">
<button @click="search()">查询</button>
</div>
<div class="result">
<p v-if="searched && !results">没有对应的查询结果</p>
<div v-for="result in results">
<p>
<img :src="'images/' + pictures[result.type]" width="56" :alt="types[result.type]">
<span>{{ result.name }}</span>
<span class="pre" v-if="result.aipre == 1">（预测结果）</span>
</p>
<p class="explain">说明：{{ result.explain }}</p>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
word: '',
searched: false,
types: ['可回收物', '有害垃圾', '厨余垃圾', '其他垃圾'],
pictures: ['recyclable.png', 'harmful-waste.png', 'kitchen-waste.png', 'other-waste.png'],
results: []
},
methods: {
search() {
if (this.word.trim().length > 0) {
let key = 'e8c5524dd2a365f20908ced735f8e480'
let url = `http://api.tianapi.com/txapi/lajifenlei/?key=${key}&word=${this.word}`
fetch(url)
.then(resp => resp.json())
.then(json => {
this.searched = true
this.results = json.newslist
})
}
}
}
})
</script>
</body>
</html>