發布時間：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);
}
}
});
四 、運行
點擊編譯可以在微信開發者工具預覽效果，點擊編譯后點擊預覽可以掃描二維碼在手機預覽。
五、其他
暫時沒有