wastesorting/src/pages/waste_sorting/baike.vue

<template>
    <view>


        <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)">
                        <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 () {
            return {
                title: "垃圾分类百科",
                //当前分类
                current_group: "",
                //垃圾分类
                groups: [
                    {
                        name: "可回收垃圾",
                        icon: "",
                        type: 1
                    },
                    {
                        name: "有害垃圾",
                        icon: "",
                        type: 2
                    },
                    {
                        name: "湿垃圾",
                        icon: "",
                        type: 4
                    },
                    {
                        name: "干垃圾",
                        icon: "",
                        type: 8
                    },
                    {
                        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: {
            //动画播放完更新按钮状态
            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>