html
<veiw class="img-view">
<image class="img" src="/images/vip/banner.png" />
</veiw>
<form bindsubmit="formSubmit">
<view class="main">
<view class="person_info">
<text class="person_info_text">面值</text>
<text class="word">{{amount}}元</text>
</view>
<view class="person_info">
<text class="person_info_text">姓名</text>
<input name="name" class="person_info_input" placeholder-class="person_info_input" placeholder="请输入您的姓名" />
</view>
<view class="person_info">
<text class="person_info_text">性别</text>
<view class="sex-box">
<radio-group name="sex" bindchange="changeSex">
<radio class="radio-item" value="1" checked="checked" color="#DBB975">男</radio>
<radio class="radio-item" value="2" checked="" color="#DBB975">女</radio>
</radio-group>
</view>
</view>
<view class="person_info">
<text class="person_info_text">手机号码</text>
<input name="telephone" type="number" bindinput=‘watchTelephone‘ class="person_info_input" placeholder-class="person_info_input" placeholder="请填写手机号" />
</view>
<view class="person_info">
<text class="person_info_text">验证码</text>
<input name="code" type="number" class="person_info_input" placeholder-class="person_info_input" placeholder="请输入验证码" />
<view class="person_info_down" bind:tap="getCode">{{code}}</view>
</view>
<view class="person_info">
<text class="person_info_text">生日</text>
<picker class="date-picker" mode="date" value="" start="1949-10-01" bindchange="bindDateChange">
<view class="birthday">
<input name="birthday" type="text" value="{{birthday}}" class="info_input" placeholder-class="info_input" placeholder="请选择您的生日" />
<view class="info_more">
<image class="more" src="/images/common/more_gray.png" />
</view>
</view>
</picker>
</view>
<button class="save_btn" form-type="submit">立即支付</button>
</view>
</form>
js
import Storage from "../../../common/auth/Storage";
import { initNoPage } from "../../../common/requestData";
import tips from "../../../common/tips";
import request from "../../../common/request";
import { checkTel } from "../../../common/commonFunc";
const app = getApp();
Page({
formSubmit({ detail: { value } }) {
let that = this;
if (that.data.lock_flag) {
return;
}
console.log(‘form发生了submit事件，携带数据为：‘, value);
for (const item of Object.values(value)) {
if (!item) {
return tips.showMsg("请填写信息");
}
}
// 具体的判断
if (!checkTel(value.telephone)) {
return tips.showMsg("请填写正确的手机号");
}
const openid = app.globalData.openid || Storage.get().openid;
const config_id = this.data.config_id;
that.setData({
lock_flag:true
});
request("getPayData", {openid,config_id, ...value})
.then(( {data} ) => {
that.setData({
lock_flag:false
});
// 发起支付
wx.requestPayment({
timeStamp: data.timeStamp.toString(),
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.sign,
complete() {
return wx.reLaunch({
url: "/pages/vip/index"
});
}
});
console.log(‘支付数据‘,data);
})
.catch(({ errdesc }) => {
that.setData({
lock_flag:false
});
return tips.showMsg(errdesc);
});
},
bindDateChange(e) {
console.log(‘picker发生change事件，携带value值为：‘, e.detail.value);
let birthday = e.detail.value;
this.setData({
birthday: birthday
})
},
changeSex(e) {
console.log(‘radio发生change事件，携带value值为：‘, e.detail.value)
},
// 监听手机号
watchTelephone({ detail: { value } }) {
console.log(‘手机号输入的内容为‘, value);
var that = this;
that.setData({
telephone: value
})
},
/**
* 页面的初始数据
*/
data: {
lock_flag:false,
disabled: false,
code: ‘获取验证码‘,
birthday: ‘‘,
amount: ‘‘,
telephone: ‘‘,
config_id: ‘‘,
},
getCode() {
var that = this;
// 判断是否填写手机号
let telephone = that.data.telephone;
if (!telephone) {
return tips.showMsg("请填写手机号");
}
// 具体的判断
if (!checkTel(telephone)) {
return tips.showMsg("请填写正确的手机号");
}
if (that.data.disabled == true) {
return;
}
var time = 60;
that.setData({
code: ‘60秒后重发‘,
disabled: true
});
var Interval = setInterval(function () {
time--;
if (time > 0) {
that.setData({
code: time + ‘秒后重发‘
})
} else {
clearInterval(Interval);
that.setData({
code: ‘获取验证码‘,
disabled: false
})
}
}, 1000);
// 发送验证码
request("getPhoneCode", { telephone }).then(({ errno, data }) => {
if (errno == 0) {
console.log(‘发送验证码成功！‘, data);
}
}).catch(({ errdesc }) => {
console.log(‘发送验证码失败！‘, errdesc);
return tips.showMsg(errdesc);
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let id = options.id;
// console.log(options);
let that = this;
that.setData({
config_id: id,
})
request("getCardConfigInfo", { config_id: id }).then(({ data }) => {
that.setData({
amount: data.amount,
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
获取参数，获取验证码，获取手机号等信息。
支付成功之后，跳转。redirectTo或者reLaunch。
其实不复杂。
wx.requestPayment({
timeStamp: data.timeStamp.toString(),
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.sign,
complete() {
return wx.redirectTo({
url: "/pages/order/list/index"
});
}
});