【程序源代码】小程序充值功能实现

最新推荐文章于 2024-04-05 21:50:59 发布

程序源代码

最新推荐文章于 2024-04-05 21:50:59 发布

阅读量2.7k

点赞数

文章标签：小程序 notepad++

本文链接：https://blog.csdn.net/weixin_43361374/article/details/131746177

版权

关键字：微信云开发支付功能小程序充值功能代码

一、实现界面

二、技术说明

本项目使用微信小程序云平台进行开发。
前端使用的是微信小程序原生语言
后端使用的是微信小程序云开发，主要使用到云函数

三、代码说明

myaddmoney.wxml：

这是页面，先将页面的元素设定好，这些使用了标签选择和自定义填写功能。用户可以选择标签上的金额，也可以自己填写金额进行。

<view><text class="num">{{money}}</text></view>

</view>

</view>

<text wx:if="{{item=='m' && activeIndex != index}}" class="zidyText">自定义金额</text>

<input wx:if="{{item=='m' && activeIndex == index}}" class="weui-input inputView" type="number"

placeholder="请输入金额" name='czmoney' value='{{czmoney}}'></input>

</view>

</view>

</form>

/* myaddmoney.wxss */

.wxss样式

这是页面中使用到的css样式，用于美化页面的元素的。

.active {

background-color: #6d97f8;

border: 2px solid #6d97f8;

color: white;

}

.noactive {

background-color: white;

border: 2px solid white;

color: black;

}

.btnView {

width: 100%;

height: 300rpx;

display: flex;

flex-wrap: wrap;

align-content: flex-start;

justify-content: center;

}

.btnView view {

width: 210rpx;

height: 100rpx;

margin: 10rpx;

border-radius: 10rpx;

}

.otherText {

/* color: black; */

font-size: 38rpx;

font-weight: 600;

}

.inputView {

height: 100%;

width: 100%;

text-align: center;

font-size: 38rpx;

color: white;

}

.zidyText {

font-size: 30rpx;

font-weight: 600;

}

.bgView {

height: 150rpx;

width: 100%;

margin-bottom: 30rpx;

}

.titleBox{

text-align: center;

}

.title {

color: white;

font-size: 28rpx;

}

.titleView{

margin-bottom: 20rpx;

}

.num{

color: white;

font-size: 40rpx;

font-weight: 600;

}

.czhiView{

width: 100%;

height: 100rpx;

background-color: white;

padding: 0rpx 30rpx;

margin-bottom: 10rpx;

}

.czhiView text{

font-size: 28rpx;

}

.czhiBox{

width: 100%;

}

.btnczhi{

width: 98%;

height: 80rpx;

border-radius: 20rpx;

text-align: center;

}

.btnczhi text{

color: white;

font-size: 32rpx;

}

//myaddmoney.js

y这是主要的业务逻辑文件，其中重要的就是有个事件，用户点击提交充值按钮时触发这个事件，在这个事件中实现调用云函数的充值方法和回调

// pages/myaddmoney/myaddmoney.js

// 充值逻辑

import common from '../../utils/common.js' //相对地址//调用验证工具类

const app = getApp()

const db = wx.cloud.database()

let addmoney ;

let czmoney = 0;

Page({

/**

* 页面的初始数据

data: {

activeIndex: 0, //默认选中第一个

numArray: [20, 30, 50, 80, 100,'m'],//初始化几个默认金额面值

money: ''//当前用户余额

activethis: function (event) { //点击选中事件

var thisindex = event.currentTarget.dataset.thisindex; //当前index

console.log('点击选中事件值：',thisindex);

this.setData({

activeIndex: thisindex ,//设置选中序号

})

//充值

formSubmit (e) {

let _this = this //解决调用其它方法找不到的问题

try {

addmoney = e.detail.value

console.log('充值提交前的数据表单：',addmoney)

//选中的面值金额

if(addmoney.index =='0'){

czmoney = 20

}else if( addmoney.index == '1'){

czmoney = 30

}else if(addmoney.index == '2'){

czmoney = 50

}else if(addmoney.index == '3'){

czmoney = 80

}else if(addmoney.index == '4'){

czmoney = 100

}

console.log('选中的面值金额：',addmoney);

console.log('选中的面值金额：',czmoney);

if(!addmoney.czmoney || !common.iszs(parseInt(addmoney.czmoney))){//判断充值金额是否为空或者小于零

wx.showToast({

icon: 'none',

title: '请填写整数金额,最小单位为1元',

})

return

}else if(addmoney.czmoney>= 500){//充值金额较大,请重新填写小于500面值金额

wx.showToast({

icon: 'none',

title: '充值金额较大,请重新填写小于500面值金额',

})

return

}else{

console.log('充值金额:', addmoney.czmoney);

//调用云函数，充值云函数

wx.cloud.callFunction({

data: {

money: parseFloat(addmoney.czmoney)

success: res => {

const payment = res.result.payment

console.log('充值参数payment', payment)

wx.requestPayment({

...payment,

success (res) {

console.log('res.errMsg', res.errMsg)

if(res.errMsg == 'requestPayment:ok'){//用户完成支付

//更新当前用户的余额

_this.addUserMoney(addmoney.czmoney)

}

fail (err) {

console.error('充值失败', err)

}

})

fail: console.error,

})

}

} catch (error) {

console.log('充值异常',error);

}

//更新当前用户的余额-充值成功时调用此方法

addUserMoney(money){

var money = parseInt(money)

var openid = app.globalData.openid

console.log("更新当前用户的余额-money",money)

console.log("更新当前用户的余额-openid",openid)

//转换当前时间为年月日分

var d = new Date(Date.now()); // 将传进来的字符串或者毫秒转为标准时间

var month = d.getMonth() + 1;

var date = d.getDate();

var day = d.getDay();

var hours = d.getHours();

var minutes = d.getMinutes();

var curDateTime = d.getFullYear() + '年';

if (month > 9)

curDateTime += month + '月';

else

curDateTime += month + '月';

if (date > 9)

curDateTime = curDateTime + date + "日";

else

curDateTime = curDateTime + date + "日";

if (hours > 9)

curDateTime = curDateTime + hours + "时";

else

curDateTime = curDateTime + hours + "时";

if (minutes > 9)

curDateTime = curDateTime + minutes + "分";

else

curDateTime = curDateTime + minutes + "分";

//console.log("当前时间",curDateTime)

let jilutime = curDateTime

console.log("充值云函数参数，当前时间",jilutime)

//更新当前用户的余额

let _ = db.command

db.collection('students').doc(openid)

.update({

data: {

money: _.inc(money) //自增函数，在原来基本上加上值

}

}).then(res => {

console.log('更新当前用户的余额成功', res)

//添加当前用户的充值记录

if (res.stats.updated > 0) {

db.collection('jilu').add({

data: {

time: jilutime,

money: '+'+ money,

openid: openid

}

}).then((res) => {

console.log("添加当前用户的充值记录",res)

})

}

})

/**

* 生命周期函数--监听页面加载

onLoad(options) {

/**

* 生命周期函数--监听页面初次渲染完成

onReady() {

/**

* 生命周期函数--监听页面显示

onShow() {

//获取当前用户余额

if (app.globalData.userInfo || app.globalData.userInfo.money) {

wx.cloud.database().collection('students')

.doc(app.globalData.openid)

.get()

.then(res => {

if (res && res.data) {

app.globalData.userInfo = res.data;

this.setData({

money: app.globalData.userInfo.money

})

} else {

let userStor = wx.getStorageSync('user');

if (userStor) {

app.globalData.userInfo = userStor

}

})

.catch(res => {

let userStor = wx.getStorageSync('user');

console.log('本地获取user', userStor)

if (userStor) {

app.globalData.userInfo = userStor

}

})

}

/**

* 生命周期函数--监听页面隐藏

onHide() {

/**

* 生命周期函数--监听页面卸载

onUnload() {

/**

* 页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh() {

/**

* 页面上拉触底事件的处理函数

onReachBottom() {

/**

* 用户点击右上角分享

onShareAppMessage() {

}

})

// 云函数入口文件

这是一个重点的云函数文件，通过这个云函数实现支付

// 云函数入口文件

const cloud = require('wx-server-sdk')

// 使用当前云环境

cloud.init({

//env: cloud.DYNAMIC_CURRENT_ENV

env:'itcode-shoo'

})

// 充值云函数

exports.main = async (event, context) => {

//充值参数

let out_trade_no = Date.now() + '_' + parseInt(Math.random() * 1e5)//生成随机订单号

console.log("充值云函数参数，订单号out_trade_no",out_trade_no)

let money = event.money //充值金额

console.log("充值云函数参数，充值金额money",money)

const wxContext = cloud.getWXContext()

let openid = wxContext.OPENID//用户openid

console.log("充值云函数参数，用户openid",openid)

//调用支付下单接口

const result = await cloud.cloudPay.unifiedOrder({

body: "校园小程序",

outTradeNo: out_trade_no,//订单号，必要参数

spbillCreateIp: "127.0.0.1",

subMchId: "", //商户号,必须填写正确和开通，必要参数

totalFee: money, //充值金额,最小的充值金额为1，如果是0.01会报错，必要参数

envId: "",//云环境的ID,必要参数

functionName: "pay_back",//回调函数，不能为空，必要参数

tradeType :"JSAPI" //交易类型

})

//返回结果

console.log('充值云函数返回的结果集',result);

return result

}

原来群已满，请加新群。

——•程序源代码

QQ群：

免

责

声

明

【写作说明】以上文章属于此公众号原创所有，如需转载请注明出处。【免责申明】本公众号不是广告商，也没有为其他三方网站或者个人做广告宣传。文章发布源代码和文章均来源于各类开源网站社区或者是小编在项目中、学习中整理的一些实例项目。主要目的是将开源代码分享给喜欢编程、有梦想的程序员，希望能帮助到你们与他们共同成长。其中用户产生的一些自愿下载、打赏或者付费行为，原则与平台没有直接关系。如果涉及开源程序侵犯到原作者相关权益，可联系小编进行相关处理。

—————————————

目前已有1000000+优秀的程序员加入我们