按钮操作更新

master
橙橙楊 4 years ago committed by 潘啟华
parent 69f39539ef
commit 30227b541c
  1. 12
      src/common/config.js
  2. 239
      src/pages/waste_sorting/baike.vue
  3. 203
      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,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>

@ -8,7 +8,8 @@
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell ">
<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>
@ -17,45 +18,181 @@
<view class="uni-flex uni-column">
<text class="title uni-center">点击图标拍照查询</text>
<view class="flex-item flex-item-V uni-center">
<image class="photo" @click="chooseImage"></image>
<image class="photo" @click="chooseImage"></image>
</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>
</template>
<script>
import {config} from 'common/config'
export default {
name: "query",
data:function(){
data: function () {
return {
title:"垃圾分类查询",
textValue:""
title: "垃圾分类查询",
textValue: "",
show_info:false,
query_result:[]
}
},
methods:{
changeTextQuery:function () {
console.info("文本查询值:"+this.textValue)
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
},
chooseImage:function () {
changeTextQuery: function () {
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 () {
console.info("拍照查询")
this.show_info=false
let that=this
uni.authorize({
scope:"scope.camera",
success:function () {
scope: "scope.camera",
success: function () {
console.info("摄像头调用成功")
uni.chooseImage({
sourceType:["camera"],
success:function (obj) {
console.info("拍照成功,照片路径"+obj.tempFilePaths[0])
sourceType: ["camera"],
success: function (obj) {
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
})
},
complete: function (res) {
uni.hideLoading()
}
})
},
fail:function () {
console.error("拍照失败")
fail: function (err) {
console.error(err)
uni.showToast({
title: "照片保存失败,多次出现此异常请联系管理员",
duration:3000
})
}
})
},
fail:function () {
console.error("授权摄像头权限失败,请刷新页面重新授权")
fail: function (err) {
console.error(err)
uni.showToast({
title: "授权摄像头权限失败,请刷新页面重新授权,多次出现此异常请联系管理员",
duration:3000
})
}
})
}
@ -64,12 +201,30 @@
</script>
<style scoped>
.photo{
background-image:url("~@/static/photo.png");
background-size: 100% 100%;
width: 100%;
}
text{
.photo {
background-image: url("~@/static/photo128x128.gif");
background-size: 120px;
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 {
font-size: 15px;
}
</style>

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