按钮操作更新

master
橙橙楊 5 years ago committed by 潘啟华
parent 69f39539ef
commit 30227b541c
  1. 12
      src/common/config.js
  2. 195
      src/pages/waste_sorting/baike.vue
  3. 175
      src/pages/waste_sorting/query.vue
  4. BIN
      src/static/photo128x128.gif
  5. BIN
      src/static/photo128x128.png

@ -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,25 +1,71 @@
<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: "垃圾分类百科",
//
current_group: "",
//
groups: [ groups: [
{ {
name: "可回收垃圾", name: "可回收垃圾",
@ -46,17 +92,160 @@
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: {
//
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) { loadGroup: function (group) {
console.info("选中" + group.name) 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>

@ -8,7 +8,8 @@
<view class="weui-cells weui-cells_after-title"> <view class="weui-cells weui-cells_after-title">
<view class="weui-cell "> <view class="weui-cell ">
<view class="weui-cell__bd"> <view class="weui-cell__bd">
<input class="weui-input" v-model="textValue" placeholder="请输入垃圾关键字" @input="changeTextQuery" /> <input class="weui-input" v-model="textValue" placeholder="请输入垃圾关键字"
@input="changeTextQuery" @focus="do_focus"/>
</view> </view>
</view> </view>
</view> </view>
@ -22,24 +23,98 @@
</view> </view>
</view> </view>
<view v-if="show_info">
<view class="weui-flex">
<view class="weui-flex__item"><view class="placeholder">查询结果</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> </view>
</template> </template>
<script> <script>
import {config} from 'common/config'
export default { export default {
name: "query", name: "query",
data: function () { data: function () {
return { return {
title: "垃圾分类查询", title: "垃圾分类查询",
textValue:"" textValue: "",
show_info:false,
query_result:[]
} }
}, },
methods: { methods: {
getWasteSorting:function(waste_type){
switch (waste_type) {
case 1:return "可回收垃圾";
case 2:return "有害垃圾";
case 4:return "湿垃圾";
case 8:return "干垃圾";
case 16:return "大件垃圾";
}
},
do_focus:function () {
this.show_info=false
},
changeTextQuery: function () { changeTextQuery: function () {
console.info("文本查询值:" + this.textValue) console.info("文本查询值:" + this.textValue)
let that=this
if(this.textValue.length>0){
let url = config.server + config.interface.text_query
console.info("文本查询接口地址:"+url)
uni.request({
url:url,
data:{
keyword:that.textValue
},
success:function (res) {
console.info(res)
let json_res = res.data
if(json_res["keyword"]===that.textValue) {
if (json_res["status"]) {
console.info("查询成功")
if (json_res["result"].length === 0) {
console.info("没有匹配结果")
} else {
that.show_info = true
that.query_result = json_res["result"]
}
} else {
console.info("查询失败")
}
}else{
uni.showToast({
title:"操作频率过快!",
duration:3000
})
}
},else:function (err) {
console.error(err)
uni.showToast({
title:"参数解析异常",
duration:3000
})
}
})
}
}, },
chooseImage: function () { chooseImage: function () {
console.info("拍照查询") console.info("拍照查询")
this.show_info=false
let that=this
uni.authorize({ uni.authorize({
scope: "scope.camera", scope: "scope.camera",
success: function () { success: function () {
@ -47,15 +122,77 @@
uni.chooseImage({ uni.chooseImage({
sourceType: ["camera"], sourceType: ["camera"],
success: function (obj) { success: function (obj) {
console.info("拍照成功,照片路径"+obj.tempFilePaths[0]) console.info("拍照成功,照片临时路径" + obj.tempFilePaths[0])
uni.showLoading({
title: "图片解析中"
})
let url = config.server + config.interface.image_parse
console.info("图片解析接口地址:" + url)
uni.uploadFile({
url: url,
filePath: obj.tempFilePaths[0],
name: 'file',
success: function (res) {
let json_res = JSON.parse(res.data)
console.info(json_res)
if (json_res["img_parse"]) {
console.info("照片解析成功")
if (json_res["query"]) {
if (json_res["result"].length === 0) {
let str = "照片解析成功,但是没有垃圾分类信息"
console.info(str)
uni.showToast({
title:str,
duration:3000
})
}else{
that.show_info=true
that.query_result=json_res["result"]
}
} else {
let str = "照片解析失败"
console.info(str)
uni.showToast({
title:str,
duration:3000
})
}
} else {
let str = "照片解析失败"
console.info(str)
uni.showToast({
title:str,
duration:3000
})
}
},
fail: function (err) {
console.error(err)
uni.showToast({
title: "照片解析失败,多次出现此异常请联系管理员",
duration:3000
})
}, },
fail:function () { complete: function (res) {
console.error("拍照失败") uni.hideLoading()
} }
}) })
}, },
fail:function () { fail: function (err) {
console.error("授权摄像头权限失败,请刷新页面重新授权") console.error(err)
uni.showToast({
title: "照片保存失败,多次出现此异常请联系管理员",
duration:3000
})
}
})
},
fail: function (err) {
console.error(err)
uni.showToast({
title: "授权摄像头权限失败,请刷新页面重新授权,多次出现此异常请联系管理员",
duration:3000
})
} }
}) })
} }
@ -65,10 +202,28 @@
<style scoped> <style scoped>
.photo { .photo {
background-image:url("~@/static/photo.png"); background-image: url("~@/static/photo128x128.gif");
background-size: 100% 100%; background-size: 120px;
width: 100%; background-repeat: no-repeat;
} }
image{
width: 120px;
height: 120px;
}
.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 { text {
font-size: 15px; font-size: 15px;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Loading…
Cancel
Save