您现在的位置是:网站首页>前端技术>uniappuniapp

小程序uniapp 实现店铺营业时间段选择

神夜2020-06-03 15:20:59uniapp4484人已围观文章来源:神夜个人博客

简介

小程序uniapp 实现店铺营业时间段选择

<template>
<view class="form">

  <picker mode="multiSelector" @columnchange="columnChange" @change="yyTimeChange" :range="yyTimeList">
    <input type="text" v-model="form.yytime" disabled class="intext" placeholder="请选择营业时间段">
    <image src="/static/icon-right.png" class="r"></image>
  </picker>

</view>
</template>
<script>
export default {
        data() {
            return {
                timearr: [],
                yyTimeList: [[], []],
                form: {
                    yytime: '',
                }
            }
        },
        onLoad() {
            this.initYyTimeList();
        },
        methods: {

            //初始化营业时间
            initYyTimeList() {
                var m = 0,
                n = 0,
                arr = [];
                for (var i = 0; i < 48; i++) {
                    if (i == 0) {
                        n = 0;
                    } else {
                        n += 30;
                    }
                    if (n > 30) {
                        n = 0;
                        m += 1;
                    }
                    arr.push((m > 9 ? m: "0" + m) + ":" + (n > 9 ? n: "0" + n));
                }
                var b = 0,
                c = 0,
                arr2 = [];
                for (var i = 0; i < 47; i++) {
                    b += 30;
                    if (b > 30) {
                        b = 0;
                        c += 1;
                    }
                    arr2.push((c > 9 ? c: "0" + c) + ":" + (b > 9 ? b: "0" + b));
                }
                this.timearr = arr;
                this.yyTimeList[0] = arr;
                this.yyTimeList[1] = arr2;
            },

            //时间列表改变
            columnChange(e) {
                if (e.target.column == 0) {
                    let startTime = this.yyTimeList[0][e.target.value];
                    let arr = [];
                    this.timearr.forEach(res = >{
                        if (res > startTime) {
                            arr.push(res);
                        }
                    }) arr.push("00:00");
                    this.yyTimeList[1] = arr;
                    this.$forceUpdate()
                }
            },

            //确定选择时间
            yyTimeChange(e) {
                this.form.yytime = this.yyTimeList[0][e.target.value[0]] + '-' + this.yyTimeList[1][e.target.value[1]];
            },
        }
    }
</script>
<style>
</style>

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:511条
  • 微信公众号:扫描二维码,关注我们