橙橙楊
5 years ago
committed by
潘啟华
parent
69f39539ef
commit
30227b541c
@ -0,0 +1,12 @@ |
||||
|
||||
export var config={ |
||||
//服务器地址
|
||||
server:"http://192.168.50.73", |
||||
// 接口
|
||||
interface:{ |
||||
//图片解析
|
||||
image_parse:"/api/BaiduImage.php?XDEBUG_SESSION_START=PHPSTORM", |
||||
// 文本查询
|
||||
text_query:"/api/QueryText.php?XDEBUG_SESSION_START=PHPSTORM" |
||||
} |
||||
} |
||||
@ -1,62 +1,251 @@ |
||||
<template> |
||||
<view> |
||||
<view class="uni-padding-wrap uni-common-mt"> |
||||
|
||||
|
||||
<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)"> |
||||
<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 () { |
||||
data: function () { |
||||
return { |
||||
title:"垃圾分类百科", |
||||
groups:[ |
||||
title: "垃圾分类百科", |
||||
//当前分类 |
||||
current_group: "", |
||||
//垃圾分类 |
||||
groups: [ |
||||
{ |
||||
name:"可回收垃圾", |
||||
icon:"", |
||||
type:1 |
||||
name: "可回收垃圾", |
||||
icon: "", |
||||
type: 1 |
||||
}, |
||||
{ |
||||
name:"有害垃圾", |
||||
icon:"", |
||||
type:2 |
||||
name: "有害垃圾", |
||||
icon: "", |
||||
type: 2 |
||||
}, |
||||
{ |
||||
name:"湿垃圾", |
||||
icon:"", |
||||
type:4 |
||||
name: "湿垃圾", |
||||
icon: "", |
||||
type: 4 |
||||
}, |
||||
{ |
||||
name:"干垃圾", |
||||
icon:"", |
||||
type:8 |
||||
name: "干垃圾", |
||||
icon: "", |
||||
type: 8 |
||||
}, |
||||
{ |
||||
name:"大件垃圾", |
||||
icon:"", |
||||
type:16 |
||||
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:{ |
||||
loadGroup:function (group) { |
||||
console.info("选中"+group.name) |
||||
} |
||||
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> |
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in new issue