7 changed files with 313 additions and 12 deletions
-
6src/pages.json
-
3src/subpackage/wallet/js/api.js
-
15src/subpackage/wallet/pages/douyin_withdraw/index.vue
-
72src/subpackage/wallet/pages/index/index.vue
-
82src/subpackage/wallet/pages/index/modules/recharge_modal.vue
-
6src/subpackage/wallet/pages/index/modules/wallet_info.vue
-
141src/subpackage/wallet/pages/index/recharge_record.vue
@ -0,0 +1,82 @@ |
|||
<template> |
|||
<wallet-modal title="充值" :show="isShow" @click:close="hide"> |
|||
<view class="recharge-container"> |
|||
<view class="rc-balance"> |
|||
<text class="rb-txt">钱包余额：</text> |
|||
{{ balance || 0 }}元 |
|||
</view> |
|||
<input type="digit" class="rc-ipt" v-model="iptNum" placeholder="请输入金额"> |
|||
<view class="rc-btns"> |
|||
<wm-button @click="hide">取消</wm-button> |
|||
<wm-button green @click="confirmBtn">确认</wm-button> |
|||
</view> |
|||
</view> |
|||
</wallet-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import walletModal from '../../../components/wallet_modal.vue'; |
|||
import wmButton from '../../../components/wm_button.vue'; |
|||
import { showNone } from '@/utils/util'; |
|||
export default { |
|||
props: { |
|||
balance: { |
|||
type: Number, |
|||
default: 0 |
|||
} |
|||
}, |
|||
components: { |
|||
walletModal, |
|||
wmButton, |
|||
}, |
|||
data() { |
|||
return { |
|||
isShow: false, |
|||
iptNum: '', |
|||
initData: {}, |
|||
} |
|||
}, |
|||
methods: { |
|||
show(data){ |
|||
this.isShow = true; |
|||
this.initData = data ?? {}; |
|||
}, |
|||
hide(){ |
|||
this.isShow = false; |
|||
}, |
|||
confirmBtn(){ |
|||
let { initData, iptNum, hide } = this; |
|||
if(!iptNum || isNaN(iptNum) || Number(iptNum) <= 0)return showNone('请输入正确金额！'); |
|||
initData?.success?.(iptNum); |
|||
hide(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.recharge-container{ |
|||
padding: 0 50upx; |
|||
.rc-balance{ |
|||
margin-top: 60upx; |
|||
@include flcw(28upx, 40upx, $mColor); |
|||
@include tHide; |
|||
.rb-txt{ |
|||
color: #1A1A1A; |
|||
} |
|||
} |
|||
.rc-ipt{ |
|||
margin-top: 20upx; |
|||
padding: 0 20upx; |
|||
display: block; |
|||
height: 108upx; |
|||
border-radius: 10upx; |
|||
background: #F2F2F7; |
|||
@include flcw(32upx, 44upx, #1A1A1A); |
|||
} |
|||
.rc-btns{ |
|||
margin-top: 80upx; |
|||
@include ctf(space-between); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,141 @@ |
|||
<template> |
|||
<view class="recharge-record"> |
|||
<filtrate-bar |
|||
:filter-list="['全部', '已完成', '已退款']" |
|||
ref="filtrateBar" |
|||
@change:times="timesChange" |
|||
@change:filter="filterBtn" |
|||
></filtrate-bar> |
|||
<view class="rr-ls"> |
|||
<view class="rl-item" v-for="(e, i) in rechargeList" :key="i"> |
|||
<record-line name="充值金额" :tag="getTagTxt(e.pay_status)" >{{ e.amount || 0 }}</record-line> |
|||
<record-line name="充值单号">{{ e.order_no || '-' }}</record-line> |
|||
<record-line name="充值时间">{{ e.pay_time || '-' }}</record-line> |
|||
<record-line name="支付方式">{{ e.pay_type || '-' }}</record-line> |
|||
<record-line name="交易流水号">{{ e.trans_no || '-' }}</record-line> |
|||
<record-line name="充值途径">{{ e.optsourse || '-' }}</record-line> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- 充值金额：12.00 |
|||
充值单号：TX20191017898999 |
|||
充值时间：2024-10-17 12:12:12 |
|||
支付方式：微信支付 |
|||
交易流水号：4002676665666 |
|||
充值途径：商家助手（刘晓） --> |
|||
</template> |
|||
|
|||
<script> |
|||
import filtrateBar from '../../components/filtrate_bar.vue'; |
|||
import recordLine from '../../components/record_line.vue'; |
|||
import { WALLET_API } from '../../js/api'; |
|||
import servers from '../../js/server'; |
|||
import { routeTo, showLoad, hideLoad, debounce, showModal, showNone } from '@/utils/util'; |
|||
export default { |
|||
components: { |
|||
filtrateBar, |
|||
recordLine, |
|||
}, |
|||
data(){ |
|||
return { |
|||
rechargeList: [], |
|||
page: 1, |
|||
brand_id: '', |
|||
|
|||
stime: '', |
|||
etime: '', |
|||
status: '' // 0:未支付, 1:已支付, 2:已退款 |
|||
} |
|||
}, |
|||
onLoad(opts){ |
|||
let _bid = opts?.brand_id ?? ''; |
|||
this.brand_id = _bid; |
|||
let { startDate, endDate } = this.$refs.filtrateBar.getTimes(); |
|||
this.stime = startDate; |
|||
this.etime = endDate; |
|||
this.getRechargeList({ brand_id: _bid, stime: startDate, etime: endDate }); |
|||
}, |
|||
onReachBottom(){ |
|||
let { brand_id, page, stime, etime } = this; |
|||
this.getRechargeList({ brand_id, page: ++page, stime, etime }); |
|||
}, |
|||
methods: { |
|||
getTagTxt(status = ''){ |
|||
return status === 0 ? '未支付' : |
|||
status === 1 ? '已完成' : |
|||
status === 2 ? '已退款' : ''; |
|||
}, |
|||
timesChange(e){ |
|||
let { startDate, endDate } = e; |
|||
this.stime = startDate ?? ''; |
|||
this.etime = endDate ?? ''; |
|||
this.refreshLs(); |
|||
}, |
|||
filterBtn(idx) { |
|||
let _status = idx === 0 ? '' : idx; |
|||
this.status = _status; |
|||
this.refreshLs(); |
|||
}, |
|||
refreshLs(){ |
|||
let { brand_id, stime, etime, status } = this; |
|||
this.page = 1; |
|||
this.rechargeList = []; |
|||
this.getRechargeList({ |
|||
brand_id: brand_id, |
|||
pay_status: status, |
|||
stime, |
|||
etime, |
|||
}); |
|||
}, |
|||
// 获取充值记录 |
|||
getRechargeList({ brand_id, pay_status = '', stime = '', etime = '', page_size = 20, page = 1 }){ |
|||
showLoad(); |
|||
return servers.post({ |
|||
url: WALLET_API.rechargeList, |
|||
data: { brand_id, pay_status, stime, etime, page_size, page }, |
|||
isDefaultGet: false, |
|||
}) |
|||
.then(res => { |
|||
hideLoad(); |
|||
let _data = res?.data || {}; |
|||
if(_data.code === 0){ |
|||
let _ls = _data?.data?.list || []; |
|||
if(page === 1)return this.rechargeList = _ls; |
|||
if(_ls?.length <= 0)return showNone('没有更多！'); |
|||
this.rechargeList = [ ...this.rechargeList, ..._ls ]; |
|||
this.page = page; |
|||
}else{ |
|||
return Promise.reject(_data); |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
hideLoad(); |
|||
showModal({ |
|||
title: '提示', |
|||
content: err.message || '加载失败！' |
|||
}) |
|||
console.warn('wallet index getPayInfo err --->', err); |
|||
// return Promise.reject(err); |
|||
}) |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.recharge-record{ |
|||
|
|||
} |
|||
.rr-ls{ |
|||
padding: 24upx; |
|||
.rl-item{ |
|||
padding: 26upx 20upx; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
&+ .rl-item{ |
|||
margin-top: 24upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue