一、退款業務效果

?二、退款流程

第一步：展示需要退款的訂單

第二步：點擊退款按鈕，判斷是否有需要退款的訂單

第三步：獲取到需要退款的訂單信息

第四步：為每個需要退款的訂單去調用微信退款接口

第四步：最后彈出退款情況

三、實現

• 退款頁面（展示姓名、退款原因、金額、申請退款時間等）

<view class="container"><block wx:if="{{refundList.length!=0}}"><view class="refund-list" wx:for="{{refundList}}" wx:key=""><view class="line"></view><view class="refund-img"><text class="iconfont icon-xuanzhong1 {{item.isSelect? 'selectIcon':'noSelectIcon'}}" data-index="{{index}}" bindtap='selectOne'></text></view><view class="refund" style="width:{{contentWid *0.6}}px"><view class="title">{{item.Show_Name}}</view><view class="result">{{item.RefuseMsg}}</view><view class="time">{{item.DhanderTime}}</view></view><view class="refund-money" style="width:{{contentWid *0.4}}px">￥{{item.refund_fee}}</view></view><view class="refund-bottom"><view class="refund-bottom-left"><view class="bottom-left-left"><text class="iconfont icon-xuanzhong1 {{selectAll==0 ? 'noSelectIcon':'selectIcon'}}" bindtap='selectAll'></text><text class="all-select">全選</text></view><view class="bottom-left-right"><text>{{refundNum}}個退款 共{{refunfMoney}}元</text></view></view><view class="refund-bottom-right" bindtap='agree'>同意退款</view></view></block><block wx:else><view class="nolist">暫無待處理的退款信息，稍后再查看。</view></block> </view>

• 獲取退款待處理列表（根據活動ID查詢）

onLoad: function (options) {//獲取退款待處理列表this.getRefundList();},/***獲取退款待處理列表 */getRefundList: function () {let that = this//初始化全選按鈕 退款數量等that.setData({selectAll: 0,refundNum: 0,refunfMoney: 0.00})let data = {Jsonstring: JSON.stringify({"Act_id": that.data.Act_id})}wx.api.api.getEventRfundList(data, function (res) {if (res.data.code == 1) {for (let i in res.data.data) {res.data.data[i].isSelect = false}that.setData({refundList: res.data.data})}})},

• 單個訂單選擇/全選操作；計算退款數量和金額

/***單個選擇 */selectOne: function (e) {let that = thislet index = e.currentTarget.dataset.index;let item = this.data.refundList[index];item.isSelect = !item.isSelect;that.setData({refundList: that.data.refundList});//計算退款數量和金額that.countNumAndSum();},/****全選 */selectAll: function () {let selectAll = this.data.selectAlllet that = thislet data = that.data.refundList//取消全選if (selectAll == 1) {for (let i in data) {data[i].isSelect = false}//點亮全選按鈕that.setData({selectAll: 0})} else {//全部選中for (let i in data) {data[i].isSelect = true}that.setData({selectAll: 1})}that.setData({refundList: data})//計算退款數量和金額that.countNumAndSum();},/****計算退款數量和金額 */countNumAndSum: function () {let that = thisthat.setData({refundNum: 0, //清空退款數量refunfMoney: 0.00,//清空金額})for (let i in that.data.refundList) {if (that.data.refundList[i].isSelect == true) {let newRefundNum = parseFloat(that.data.refundNum) + 1let newRefunfMoney = parseFloat(that.data.refunfMoney) + parseFloat(that.data.refundList[i].refund_fee)that.setData({refundNum: newRefundNum,refunfMoney: newRefunfMoney})}}//如果全部單選中 就增加全選按鈕樣式if (that.data.refundNum == that.data.refundList.length) {that.setData({selectAll: 1})} else {that.setData({selectAll: 0})}},

• 點擊同意退款按鈕
• 注意異步操作，需要等所有訂單都調用完退款的接口之后，一次性彈出提示信息
• 可以使用回調、遞歸、setTimeout、promise等方法

/***同意 */agree: function (e) {let that = this//判斷是否有需要退款的訂單let isRefund = ''let isRefund2 = ''for (let i in that.data.refundList) {if (that.data.refundList[i].isSelect == true) {//有退款的訂單數isRefund++} else {//無退款的訂單數isRefund2++}let total = isRefund + isRefund2if (total == that.data.refundList.length) {if (isRefund > 0) {//有需要退款的訂單that.haveRefundList();} else {that.showTips("暫無需要退款的訂單")}}}},/****有需要退款的訂單 */haveRefundList: function () {let that = thislet selectLength = 0 //需要退款的數量that.setData({ errArray: [] }) //清空提示數組wx.showModal({title: '提示',content: '確定同意退款申請？',confirmColor: '#FFA404',success(res) {if (res.confirm) {let carrayNum = 0//執行個數for (let i in that.data.refundList) {if (that.data.refundList[i].isSelect == true) {selectLength++let data = {transaction_id: that.data.refundList[i].transaction_id,out_refund_no: that.data.refundList[i].out_refund_no,out_trade_no: that.data.refundList[i].out_trade_no,refund_fee: parseFloat(that.data.refundList[i].refund_fee)}wx.api.api.backMoney(data, function (res) {if (res.data.code == 1) {//接口調用成功 不區分是否能夠退款成功that.data.errArray.push({name: that.data.refundList[i].Show_Name,errorMsg: res.data.data.return_msg})} else {//接口調用失敗that.data.errArray.push({name: that.data.refundList[i].Show_Name,errorMsg: '退款接口調用' + res.data.msg})}carrayNum++if (carrayNum == selectLength) {let msg = ''for (let j in that.data.errArray) {msg += that.data.errArray[j].name + that.data.errArray[j].errorMsg + "\n"}that.showTips(msg)}})}}}}})},

• 退款成功與否，都會彈出提示框信息

/*****提示信息 */showTips: function (msg) {let that = this;wx.showModal({title: '提示',content: msg,showCancel: false,confirmText: '我知道了',confirmColor: '#FFA404',success(res) {if (res.confirm) {//重新加載退款待處理列表that.getRefundList();}}})},

?

總結

以上是生活随笔為你收集整理的微信小程序-退款业务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。