|
|
|
<template>
|
|
|
|
<view>
|
|
|
|
|
|
|
|
|
|
|
|
<view v-if="show_info">
|
|
|
|
|
|
|
|
<view class="data">
|
|
|
|
<view class="weui-flex">
|
|
|
|
<view class="weui-flex__item">
|
|
|
|
<view class="placeholder">{{current_group}}</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="weui-flex">
|
|
|
|
<view class="weui-flex__item">
|
|
|
|
<view class="placeholder">垃圾</view>
|
|
|
|
</view>
|
|
|
|
<view class="weui-flex__item">
|
|
|
|
<view class="placeholder">分类</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="weui-flex" v-for="(item,index) in query_result" :key="index">
|
|
|
|
<view class="weui-flex__item">
|
|
|
|
<view class="placeholder">{{item.name}}</view>
|
|
|
|
</view>
|
|
|
|
<view class="weui-flex__item">
|
|
|
|
<view class="placeholder">{{getWasteSorting(item.category)}}</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="back" :class="{show:show_button,hide:hide_button}" @touchstart="do_touch"
|
|
|
|
:style="{right:button_right+'rpx'}" @animationend="update_status">
|
|
|
|
<button id="back" @longtap.stop="back" :aria-disabled="disabled_button">{{button_text}}</button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view v-else class="uni-padding-wrap uni-common-mt">
|
|
|
|
<view class="uni-form-item uni-column">
|
|
|
|
|
|
|
|
<view class="weui-cells weui-cells_after-title" v-for="(group,index) in groups" :key="index">
|
|
|
|
<button url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"
|
|
|
|
@click="loadGroup(group)">
|
|
|
|
<view class="weui-cell__bd">{{group.name}}</view>
|
|
|
|
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
|
|
|
|
</button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {config} from 'common/config'
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "baike",
|
|
|
|
data: function () {
|
|
|
|
return {
|
|
|
|
title: "垃圾分类百科",
|
|
|
|
//当前分类
|
|
|
|
current_group: "",
|
|
|
|
//垃圾分类
|
|
|
|
groups: [
|
|
|
|
{
|
|
|
|
name: "可回收垃圾",
|
|
|
|
icon: "",
|
|
|
|
type: 1
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "有害垃圾",
|
|
|
|
icon: "",
|
|
|
|
type: 2
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "湿垃圾",
|
|
|
|
icon: "",
|
|
|
|
type: 4
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "干垃圾",
|
|
|
|
icon: "",
|
|
|
|
type: 8
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "大件垃圾",
|
|
|
|
icon: "",
|
|
|
|
type: 16
|
|
|
|
}
|
|
|
|
],
|
|
|
|
show_info: false,
|
|
|
|
//垃圾分类结果
|
|
|
|
query_result: [],
|
|
|
|
//返回按钮贴边位置
|
|
|
|
//模拟器 -180
|
|
|
|
//真机 -160
|
|
|
|
button_right: -160,
|
|
|
|
//显示返回按钮
|
|
|
|
show_button: null,
|
|
|
|
//禁用返回按钮
|
|
|
|
disabled_button: true,
|
|
|
|
hide_button: null,
|
|
|
|
button_text:"长按返回"
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
//动画播放完更新按钮状态
|
|
|
|
update_status: function () {
|
|
|
|
console.info("动画播放完毕")
|
|
|
|
if (this.show_button) {
|
|
|
|
let that = this
|
|
|
|
setTimeout(function () {
|
|
|
|
that.button_text="自动收缩"
|
|
|
|
},1000)
|
|
|
|
setTimeout(function () {
|
|
|
|
that.disabled_button = true
|
|
|
|
that.show_button = false
|
|
|
|
that.hide_button = true
|
|
|
|
}, 2000)
|
|
|
|
}else{
|
|
|
|
this.button_text="长按返回"
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//点击按钮触发
|
|
|
|
do_touch: function (e) {
|
|
|
|
this.show_button = true
|
|
|
|
this.disabled_button = false
|
|
|
|
},
|
|
|
|
//加载垃圾分类信息
|
|
|
|
loadGroup: function (group) {
|
|
|
|
console.info("选中" + group.name)
|
|
|
|
this.current_group = group.name
|
|
|
|
let that = this
|
|
|
|
let url = config.server + config.interface.text_query
|
|
|
|
console.info("文本查询接口地址:" + url)
|
|
|
|
uni.showLoading({
|
|
|
|
title:"加载中"
|
|
|
|
})
|
|
|
|
uni.request({
|
|
|
|
url: url,
|
|
|
|
data: {
|
|
|
|
category: group.type
|
|
|
|
}, success: function (res) {
|
|
|
|
console.info(res)
|
|
|
|
that.show_info = true
|
|
|
|
that.query_result = res.data.result
|
|
|
|
},
|
|
|
|
fail:function(err){
|
|
|
|
uni.showToast({
|
|
|
|
title:"加载异常"
|
|
|
|
})
|
|
|
|
},
|
|
|
|
complete:function () {
|
|
|
|
uni.hideLoading()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
//获取垃圾分类
|
|
|
|
getWasteSorting: function (waste_type) {
|
|
|
|
switch (waste_type) {
|
|
|
|
case 1:
|
|
|
|
return "可回收垃圾";
|
|
|
|
case 2:
|
|
|
|
return "有害垃圾";
|
|
|
|
case 4:
|
|
|
|
return "湿垃圾";
|
|
|
|
case 8:
|
|
|
|
return "干垃圾";
|
|
|
|
case 16:
|
|
|
|
return "大件垃圾";
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//返回按钮操作
|
|
|
|
back: function (e) {
|
|
|
|
console.info(this.disabled_button)
|
|
|
|
console.info(e)
|
|
|
|
uni.reLaunch({
|
|
|
|
url: 'baike'
|
|
|
|
});
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
.placeholder {
|
|
|
|
margin: 1px;
|
|
|
|
padding: 0 10px;
|
|
|
|
text-align: center;
|
|
|
|
background-color: #F7F7F7;
|
|
|
|
height: 2.3em;
|
|
|
|
line-height: 2.3em;
|
|
|
|
color: rgba(0, 0, 0, .3);
|
|
|
|
border: 1px solid;
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
|
|
|
|
text {
|
|
|
|
font-size: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.back {
|
|
|
|
position: fixed;
|
|
|
|
top: 420rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
#back{
|
|
|
|
background-color: aqua;
|
|
|
|
}
|
|
|
|
|
|
|
|
.hide {
|
|
|
|
animation-duration: 1.5s;
|
|
|
|
animation-fill-mode: forwards;
|
|
|
|
animation-name: dohide;
|
|
|
|
}
|
|
|
|
|
|
|
|
.show {
|
|
|
|
animation-duration: 1.5s;
|
|
|
|
animation-fill-mode: forwards;
|
|
|
|
animation-name: doshow;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes dohide {
|
|
|
|
|
|
|
|
from {
|
|
|
|
right: 10rpx;
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
right: -160rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes doshow {
|
|
|
|
|
|
|
|
from {
|
|
|
|
right: -160rpx;
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
right: 10rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|