基于微信小程序的票价和时间选择以及计算总价

发布时间：2018-10-30

 

技术：wxml+wxss+JS

 

概述

微信小程序实现选择时间和票价，根据选择的票价和时间实时计算总价，当时间和票价都显示缺货状态时，点击弹出缺货登记，需要选择票价和时间才能点击立即购买，否则弹出提示。

详细

代码下载：http://www.demodashi.com/demo/14299.html

一、运行结果

页面的功能代码在ycselect文件夹内，index和list文件夹对此功能没有作用，until文件夹里面是引入的小图标。

二、实现过程

1.下载的代码解压后放到某盘里面。

2.打开微信开发者工具点击上方的项目》新建项目。

3.新建项目的项目目录选择代码所在的位置，AppID可以点击测试号的小程序自动生成、项目名称可根据自己喜好来取。

4.点确定即可。

三、主要代码

页面属于静态页面，没有与后台交互， 主要思想是需要选中时间和票价才能点击下一步，用变量存时间（time_num）、票价(price_num)、总价（select_total）、数量（num），当选择了时间和票价后，对应的值存到对应的变量，在点击加减数量时，就可以取变量的值计算总价并存到select_total。数量小于1则禁用减号，最多可以选择10个。

缺货登记弹框默认隐藏，当点击缺货时间或票价时弹框显示出来，只需要给缺货的时间和票价添加id（disabed）就可以了。点开缺货登记需要输入手机号，正则验证通过才能提交登记。

Page({
    data: {
        stockFlag: true,//缺货登记
        show:false,//控制下拉列表的显示隐藏，false隐藏、true显示
        selectData:['1','2','3','4','5','6','7','8','9'],//下拉列表的数据
        index:0,//选择的下拉列表下标
        phone: '',  //手机号
        number: '', //数量
        showMessage:false, //点击弹出的缺货登记提示显示
        messageContent: '',//点击弹出的缺货登记提示内容
        submitMessage:false, //点击弹出的缺货登记提示显示
        time:"", //默认选中第一个时间
        price:"", //默认选中第一个不是缺货的时间
        time_num:"", //默认选中第一个时间下标
        price_num:"", //默认选中第一个不是缺货的时间下标
        select_total:0, //总票价
        num: 1, //默认选择的票价数量
        minusStatus: 'disabled ' //数量小于1禁止点击状态
    },
    onload:function(){

    },
    selectTap: function (e) {// 点击下拉显示框
        this.setData({
            show: !this.data.show
        });
    },
    optionTap: function (e) { // 点击下拉列表
        var Index=e.currentTarget.dataset.index;//获取点击的下拉列表的下标
        this.setData({
            index:Index,
            show:!this.data.show
        });
    },
    phoneInput: function(e) {  //监听手机号输入
        this.data.phone = e.detail.value;
    },
    wordInput: function(e) {  //监听留言输入
        this.data.word = e.detail.value;
    },
    stockRefer: function() {
        var _index = this.data.index;//点击数量的下标
        var _phone = this.data.phone;//手机号
        var _num = this.data.selectData[_index];//下拉选择的数量
        var _word = this.data.word;//留言
        console.log(_phone);
        console.log(_num);
        console.log(_word);
        var telRule = /^1[3|4|5|7|8]\d{9}$/;  //验证手机号
        if(_phone == ''){
            this.showMessage('手机号不能为空');
        }else if(!telRule.test(_phone)){
            this.showMessage('手机号格式不正确');
        }
    },
    showMessage: function(text) { //打开关闭提示弹框
        var that = this;
        that.setData({
            showMessage: true,
            messageContent: text
        });
        setTimeout(function(){
            that.setData({
                showMessage: false,
                messageContent: ''
            })
        }, 3000)
    },
    selectTime:function(e){  //点击选择时间
        var _time=e.currentTarget.dataset.time; //点击选择获取时间
        var _num=e.currentTarget.dataset.num; //点击选择获取时间的下标
        this.setData({
            time_num:_num,
            time:_time
        })
    },
    selectPrice: function (e) { //选择时间
        var _price=e.currentTarget.dataset.price; //点击选择获取价格
        var _num=e.currentTarget.dataset.num; //点击选择获取价格的下标
        var totalPrice=this.data.num*_price;
        var _id = e.target.id;
        if(_id=="disabled"){// 判断当缺货时打开缺货登记
            this.setData({
                stockFlag:false
            })
        }else{  // 当点击非缺货时
            this.setData({
                price_num:_num,
                price:_price,
                select_total:totalPrice
            });
        }
    },
    stockHide: function (e) {  // 关闭缺货登记
        this.setData({
            stockFlag:true
        })
    },

    /* 点击减号 */
    bindMinus: function() {
        var num = this.data.num; //选择的数量
        var price= this.data.price; //选中的票价
        // 如果大于1时，才可以减
        if (num > 1) {
            num --;
        }
        // 只有大于一件的时候，才能normal状态，否则disable状态
        var minusStatus = num <= 1 ? 'disabled' : 'normal';
        var totalPrice=num*price;
        // 将数值与状态写回
        this.setData({
            num: num,
            minusStatus: minusStatus,
            select_total:totalPrice
        });
    },
    /* 点击加号 */
    bindPlus: function() {
        var num = this.data.num;
        var price= this.data.price; //选中的票价
        // 数量最多可以选择10件
        if (num < 10) {
            num ++;
        }
        // 只有大于一件的时候，才能normal状态，否则disable状态
        var minusStatus = num < 1 ? 'disabled' : 'normal';
        var totalPrice=num*price;
        // 将数值与状态写回
        this.setData({
            num: num,
            minusStatus: minusStatus,
            select_total:totalPrice
        });
    },
    submitClick:function() {
        var that = this;
        var num = this.data.num; //选择的数量
        var price = this.data.price; //选中的票价
        var time = this.data.time; //选中的时间
        var total = this.data.select_total; //总价格

        if (price == ''||time == '') {
            that.setData({
                submitMessage: true
            });
            setTimeout(function () {
                that.setData({
                    submitMessage: false
                })
            }, 3000)
        } else {
            console.log(time);
            console.log(price);
            console.log(num);
            console.log(total);
        }
    }
});

四 、运行

点击编译可以在微信开发者工具预览效果，点击编译后点击预览可以扫描二维码在手机预览。

五、其他

暂时没有

代码下载：http://www.demodashi.com/demo/14299.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权