按钮操作更新

src/common/config.js

@@ -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"
+    }
+}

src/pages/waste_sorting/baike.vue

@@ -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:"垃圾分类百科",
+                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: {
+            //动画播放完更新按钮状态
+            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()
                     }
+                })
             },
-        methods:{
+            //获取垃圾分类
-            loadGroup:function (group) {
+            getWasteSorting: function (waste_type) {
-                console.info("选中"+group.name)
+                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>

src/pages/waste_sorting/query.vue

@@ -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>
@@ -22,40 +23,176 @@
             </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:"垃圾分类查询",
+                title: "垃圾分类查询",
-                textValue:""
+                textValue: "",
+                show_info:false,
+                query_result:[]
+            }
+        },
+        methods: {
+            getWasteSorting:function(waste_type){
+                switch (waste_type) {
+                    case 1:return "可回收垃圾";
+                    case 2:return "有害垃圾";
+                    case 4:return "湿垃圾";
+                    case 8:return "干垃圾";
+                    case 16:return "大件垃圾";
                 }
             },
-        methods:{
+            do_focus:function () {
-            changeTextQuery:function () {
+                this.show_info=false
-                console.info("文本查询值："+this.textValue)
+            },
+            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 () {
+            chooseImage: function () {
                 console.info("拍照查询")
+                this.show_info=false
+                let that=this
                 uni.authorize({
-                    scope:"scope.camera",
+                    scope: "scope.camera",
-                    success:function () {
+                    success: function () {
                         console.info("摄像头调用成功")
                         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
+                        })
                     }
                 })
             }
@@ -64,12 +201,30 @@
 </script>
 
 <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;
     }
-    text{
+
+    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>