• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
发布时间:2018-10-30
 
技术:wxml+wxss+JS
 
微信小程序实现选择时间和票价,根据选择的票价和时间实时计算总价,当时间和票价都显示缺货状态时,点击弹出缺货登记,需要选择票价和时间才能点击立即购买,否则弹出提示。

详细

一、运行结果

 

页面的功能代码在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);
        }
    }
});

 

 

四 、运行

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

 

 

 

五、其他

暂时没有

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap