apicloud apicloud

注册
查看: 263|回复: 1

[案例源码] 关于timeSelector模块时间混乱问题的解决方法

驾校小白

UID:826231

主题:
7
帖子:
9
云币:
16

[案例源码] 关于timeSelector模块时间混乱问题的解决方法

263 1 | 发表于 2020-3-8 21:44:30 |阅读模式 | |
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>云API</title>
    <link href="../css/api.css" rel="stylesheet" type="text/css"/>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../css/aui.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="../css/myui.css"/>
    <script type="text/javascript" src="../script/log.js"></script>
    <script type="text/javascript" src="../script/config.js"></script>
    <script type="text/javascript" src="../script/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vuerify.js"></script>
</head>
<body>

<div id="app">
    <header id="header" class="aui-bar aui-bar-nav aui-bar-warning">
        <a class="aui-pull-left" tapmode onclick="onBack()">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </a>
        <div class="aui-title">{{title}}</div>
        <a class="aui-pull-right" tapmode v-on:click="confirmSelectedTime">
            确认
        </a>
    </header>
    <div style="font-size: 1em; color: red; text-align: center">
        {{error}}
    </div>
</div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script>

    var timeSelector;
    var isFirst = true;
    // 创建一个Vue实例
    var vueEntry = new Vue({
        el: '#app',
        data: {
            hour: '',
            minute: '',
            selectHour:0,
            selectMinute:0,
            title: '',
            limits: [],
            requestCode: '',
            error: ''
        },
        computed: {
            selectedDatesNum: function () {
                return this.specialDates.length;
            }
        },
        methods: {
            showError: function (errormsg) {
                this.error = errormsg;
                window.setTimeout(function () {
                    this.error = '';
                }.bind(this), 1000);
            },
            /**
             * 确认选择的时间
             */
            confirmSelectedTime: function () {

                //发出选择时间的事件
                api.sendEvent({
                    name: 'updateSelectTimes',
                    extra: {
                        hour: this.hour,
                        minute: this.minute,
                        requestCode: this.requestCode
                    }
                });

                //关闭日历
                api.closeWin();

            }
        },
        mounted: function () {

            //(3) 初始化apicloud
            apiready = function () {
                var header = $api.byId('header');
                $api.fixStatusBar(header);
                var headerHeight = $api.offset(header).h;

                //读取页面传递的参数
                log("显示页面传递过来的参数:" + JSON.stringify(api.pageParam));

                this.title = api.pageParam.title;
                this.limits = api.pageParam.existDates;
                this.requestCode = api.pageParam.requestCode;
                this.hour = api.pageParam.time.hour;
                this.minute = api.pageParam.time.minute;

                timeSelector = api.require('timeSelector');

                //打开时间选择窗口
                timeSelector.open({
                    x: api.safeArea.left,
                    y: api.safeArea.top + headerHeight,
                    width: api.winWidth,
                    height: 340,
                    separateColor: ''
                    // fixedOn: api.frameName
                }, function (ret, err) {
                    if (ret) {
                        log(JSON.stringify(ret));

                        if (this.selectHour != ret.hour)
                        {
                            this.hour = ret.hour;
                            this.selectHour = ret.hour;
                        }

                        if (this.selectMinute != ret.minute)
                        {
                            this.minute = ret.minute;
                            this.selectMinute = ret.minute;
                        }

                    } else {
                        alert(JSON.stringify(err));
                    }
                }.bind(this));
               
                // 设置传递过来的时间
                timeSelector.set({
                    hour: this.hour,
                    minute: this.minute
                });


            }.bind(this);
        }
    });

    //(5) 定义其他apicloud函数
    function onBack() {
        window.setTimeout(function () {
            api.closeWin();
        }, 500)
    }

</script>
</html>

版主

UID:489246

主题:
14
帖子:
2426
云币:
1412
发表于 2020-3-9 08:32:03 |
感谢分享~
app项目开发QQ:480286871
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表