橙橙楊
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> |
<template> |
||||||
<view> |
<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="uni-form-item uni-column"> |
||||||
|
|
||||||
<view class="weui-cells weui-cells_after-title" v-for="(group,index) in groups" :key="index"> |
<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__bd">{{group.name}}</view> |
||||||
<view class="weui-cell__ft weui-cell__ft_in-access"></view> |
<view class="weui-cell__ft weui-cell__ft_in-access"></view> |
||||||
</button> |
</button> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
|
|
||||||
|
|
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import {config} from 'common/config' |
||||||
|
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "baike", |
name: "baike", |
||||||
data:function () { |
data: function () { |
||||||
return { |
return { |
||||||
title:"垃圾分类百科", |
title: "垃圾分类百科", |
||||||
groups:[ |
//当前分类 |
||||||
|
current_group: "", |
||||||
|
//垃圾分类 |
||||||
|
groups: [ |
||||||
{ |
{ |
||||||
name:"可回收垃圾", |
name: "可回收垃圾", |
||||||
icon:"", |
icon: "", |
||||||
type:1 |
type: 1 |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
name:"有害垃圾", |
name: "有害垃圾", |
||||||
icon:"", |
icon: "", |
||||||
type:2 |
type: 2 |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
name:"湿垃圾", |
name: "湿垃圾", |
||||||
icon:"", |
icon: "", |
||||||
type:4 |
type: 4 |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
name:"干垃圾", |
name: "干垃圾", |
||||||
icon:"", |
icon: "", |
||||||
type:8 |
type: 8 |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
name:"大件垃圾", |
name: "大件垃圾", |
||||||
icon:"", |
icon: "", |
||||||
type:16 |
type: 16 |
||||||
} |
} |
||||||
] |
], |
||||||
|
show_info: false, |
||||||
|
//垃圾分类结果 |
||||||
|
query_result: [], |
||||||
|
//返回按钮贴边位置 |
||||||
|
//模拟器 -180 |
||||||
|
//真机 -160 |
||||||
|
button_right: -160, |
||||||
|
//显示返回按钮 |
||||||
|
show_button: null, |
||||||
|
//禁用返回按钮 |
||||||
|
disabled_button: true, |
||||||
|
hide_button: null, |
||||||
|
button_text:"长按返回" |
||||||
} |
} |
||||||
}, |
}, |
||||||
methods:{ |
methods: { |
||||||
loadGroup:function (group) { |
//动画播放完更新按钮状态 |
||||||
console.info("选中"+group.name) |
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> |
</script> |
||||||
|
|
||||||
<style scoped> |
<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> |
</style> |
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in new issue