mike
2 years ago
5 changed files with 637 additions and 0 deletions
-
3agentApp/common/api.js
-
16agentApp/pages.json
-
20agentApp/pages/merchant-index/index.vue
-
147agentApp/pages/merchant-withdrawal-history/merchant-withdrawal-history.vue
-
451agentApp/pages/merchant-withdrawal-management/merchant-withdrawal-management.vue
@ -0,0 +1,147 @@ |
|||
<template> |
|||
<view class="app-container"> |
|||
<u-gap height="10rpx" bgColor="#F7F7F7"></u-gap> |
|||
<view class="his-content"> |
|||
<view class="his-item u-border-bottom" v-if="!withdrawList.length">暂无数据</view> |
|||
<view class="his-item u-border-bottom" v-for="(item,index) in withdrawList" :key="item.id"> |
|||
<view class="hit-left"> |
|||
<view class="his-name"> |
|||
流水号: {{item.out_biz_no}} |
|||
</view> |
|||
<view class="his-state" v-if="item.status==0"> |
|||
审核状态：审核中 |
|||
</view> |
|||
<view class="his-state" v-if="item.status==1"> |
|||
审核状态：<text style="color:green">提现成功</text> |
|||
</view> |
|||
<view class="his-state" v-if="item.status==2"> |
|||
审核状态：<text style="color:red">审核不通过（原因：{{item.review_remark}})</text> |
|||
</view> |
|||
<view class="his-state"> |
|||
提现金额：￥{{item.amount}} |
|||
</view> |
|||
<view class="his-state"> |
|||
扣手续费：￥{{item.fee}} |
|||
</view> |
|||
<view class="his-state"> |
|||
实际到账：￥{{item.receive_amount}} |
|||
</view> |
|||
<view class="his-state"> |
|||
提现账户：{{item.alipay_account}} |
|||
</view> |
|||
<view class="his-time"> |
|||
申请时间：{{item.created_at}} |
|||
</view> |
|||
<view class="his-time"> |
|||
审核时间：{{item.reviewed_at}} |
|||
</view> |
|||
</view> |
|||
<!-- <view class="hit-right"> |
|||
<view class="amount">提现金额：￥{{item.amount}}</view> |
|||
<view class="fee">手续费：￥{{item.fee}}</view> |
|||
<view class="receive-amount">实到账：￥{{item.receive_amount}}</view> |
|||
</view> --> |
|||
</view> |
|||
</view> |
|||
<view class="load-more" @click="getWithdrawList">{{ hasMore ? '加载更多数据...' : '已加载完毕' }}</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
merchantWithdrawList |
|||
} from '../../common/api.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
withdrawList: [], |
|||
hasMore: true, |
|||
page: 0, |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.getWithdrawList() |
|||
}, |
|||
onReachBottom() { |
|||
this.getWithdrawList() |
|||
}, |
|||
methods: { |
|||
getWithdrawList() { |
|||
if (!this.hasMore) { |
|||
return |
|||
} |
|||
this.page++ |
|||
merchantWithdrawList({ |
|||
page: this.page, |
|||
page_size: 15, |
|||
}).then(data => { |
|||
this.withdrawList = [...this.withdrawList, ...data.list] |
|||
this.hasMore = data.has_more |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.his-content { |
|||
padding: 0 30rpx; |
|||
|
|||
.his-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 30rpx 0 30rpx; |
|||
|
|||
.hit-left { |
|||
|
|||
.his-name { |
|||
color: #454545; |
|||
font-size: 12px; |
|||
line-height: 1.8; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.his-state { |
|||
color: #666; |
|||
font-size: 12px; |
|||
line-height: 1.8; |
|||
} |
|||
|
|||
.his-time { |
|||
color: #999; |
|||
font-size: 12px; |
|||
line-height: 1.8; |
|||
} |
|||
} |
|||
|
|||
.hit-right { |
|||
font-size: 14px; |
|||
color: #454545; |
|||
font-weight: bold; |
|||
|
|||
.amount { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.fee { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.receive_amount { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.u-border-bottom, |
|||
.u-border-top { |
|||
border-color: #eee !important; |
|||
} |
|||
} |
|||
|
|||
.load-more { |
|||
text-align: center; |
|||
font-size: 14px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,451 @@ |
|||
<template> |
|||
<view class="app-container" style="background-color: #f7f7f7;"> |
|||
<view class="agent-content"> |
|||
<view class="ag-sign" @click="cashManager"> |
|||
提现历史 |
|||
</view> |
|||
<view class="agent-top"> |
|||
<view class="ag-num"> |
|||
<view class="au-font"> |
|||
￥ |
|||
</view> |
|||
<view class="au-num"> |
|||
{{accountInfo.wallet_balance}} |
|||
</view> |
|||
</view> |
|||
<view class="age-font"> |
|||
可提现 |
|||
</view> |
|||
<view class="age-line"> |
|||
<img src="../../static/page/line-style.png" style="width: 200rpx;height: 2rpx;" alt="" srcset="" /> |
|||
</view> |
|||
<view class="age-wait"> |
|||
总提现：￥{{accountInfo.withdraw_total}} |
|||
</view> |
|||
<view class="age-linemore"> |
|||
<img src="../../static/page/divider-style.png" style="width: 690rpx;height: 2rpx;" alt="" srcset="" /> |
|||
</view> |
|||
<div class="age-mnum"> |
|||
<view class="mtext"> |
|||
待入账：0元 |
|||
</view> |
|||
<view class="mline"> |
|||
|
|||
</view> |
|||
<view class="mtext"> |
|||
提现中：{{accountInfo.withdrawing_amount}}元 |
|||
</view> |
|||
</div> |
|||
</view> |
|||
<view class="ag-paylist"> |
|||
<view class="agp-item"> |
|||
<view class="agp-title"> |
|||
<view class="zhifubao"> |
|||
支付宝账户 |
|||
</view> |
|||
</view> |
|||
<view class="agp-detail" v-if="!accountInfo.alipay_account"> |
|||
<view class="agp-make" @click="showInputForm(1)"> |
|||
去开通 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<template v-if="isInputForm"> |
|||
<view class="apt-main u-border-top u-border-bottom" v-if="isInputForm"> |
|||
<view class="apm-cell"> |
|||
<view class="am-title"> |
|||
支付宝账号 |
|||
</view> |
|||
<view class="am-value" style="width:70%;"> |
|||
<u--input placeholder="绑定的手机号或邮箱" border="surround" v-model="inputAlipayAccount"></u--input> |
|||
</view> |
|||
</view> |
|||
<view class="apm-cell"> |
|||
<view class="am-title"> |
|||
支付宝姓名 |
|||
</view> |
|||
<view class="am-value" style="width:70%;"> |
|||
<u--input placeholder="账号真实姓名" border="surround" v-model="inputAlipayName"></u--input> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="apt-btn"> |
|||
<view class="savebtn" @click="saveAlipayAccount"> |
|||
保存 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<template v-if="accountInfo.alipay_account && !isInputForm"> |
|||
<view class="apt-main u-border-top u-border-bottom"> |
|||
<view class="apm-cell"> |
|||
<view class="am-title"> |
|||
提现账户 |
|||
</view> |
|||
<view class="am-value"> |
|||
<view class="mphone"> |
|||
{{accountInfo.alipay_account}} |
|||
</view> |
|||
<view class="mlink" @click="showInputForm(2)"> |
|||
修改 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="apm-cell"> |
|||
<view class="am-title"> |
|||
可提现金额 |
|||
</view> |
|||
<view class="am-value"> |
|||
<view class="mnum"> |
|||
￥{{accountInfo.wallet_balance}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="apt-btn"> |
|||
<view class="cashbtn" @click="showWithdrawForm"> |
|||
提现 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</view> |
|||
|
|||
<u-modal title="确认提现金额" :show="isWithdrawForm" :showCancelButton="true" @confirm="confirmWithdraw" |
|||
@cancel="isWithdrawForm=false"> |
|||
<view class="withdraw-form"> |
|||
<u--input prefixIcon="￥" placeholder="提现金额" border="surround" v-model="inputAmount"></u--input> |
|||
<view class="fee-desc"> |
|||
扣手续费{{calcFee}}元，实际到账{{calcReceiveAmount}}元 |
|||
</view> |
|||
<view class="tips"> |
|||
<view class="tips-item" v-for="(line,index) in sysConfig.withdraw_tips.split('\r\n')" :key="index">{{line}}</view> |
|||
</view> |
|||
</view> |
|||
</u-modal> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
merchantAccountInfo, |
|||
merchantFillAlipayAccount, |
|||
merchantWithdraw, |
|||
publicSysConfig |
|||
} from '../../common/api.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
accountInfo: {}, |
|||
isInputForm: false, |
|||
inputAlipayAccount: '', |
|||
inputAlipayName: '', |
|||
isWithdrawForm: false, |
|||
inputAmount: '', |
|||
sysConfig: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
calcFee() { |
|||
if (!this.inputAmount || isNaN(this.inputAmount)) { |
|||
return '--'; |
|||
} |
|||
if (!this.sysConfig.withdraw_fee_rate) { |
|||
return '--'; |
|||
} |
|||
let fee = (this.inputAmount * this.sysConfig.withdraw_fee_rate / 100).toFixed(2); |
|||
return fee; |
|||
}, |
|||
calcReceiveAmount() { |
|||
if (!this.inputAmount || isNaN(this.inputAmount)) { |
|||
return '--'; |
|||
} |
|||
if (!this.sysConfig.withdraw_fee_rate) { |
|||
return '--'; |
|||
} |
|||
let fee = this.calcFee; |
|||
let receiveAmount = (this.inputAmount - parseFloat(fee)).toFixed(2); |
|||
return receiveAmount; |
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getAccountInfo(); |
|||
this.getSysConfig(); |
|||
}, |
|||
methods: { |
|||
getAccountInfo() { |
|||
merchantAccountInfo().then(data => this.accountInfo = data) |
|||
}, |
|||
saveAlipayAccount() { |
|||
merchantFillAlipayAccount({ |
|||
alipay_account: this.inputAlipayAccount, |
|||
alipay_name: this.inputAlipayName, |
|||
}).then(() => { |
|||
this.getAccountInfo() |
|||
this.isInputForm = false |
|||
}) |
|||
}, |
|||
showInputForm(flag) { |
|||
this.isInputForm = true |
|||
if (flag == 2) { |
|||
this.inputAlipayAccount = this.accountInfo.alipay_account |
|||
this.inputAlipayName = this.accountInfo.alipay_name |
|||
} |
|||
// uni.navigateTo({ |
|||
// url: '/pages/account-opened/account-opened' |
|||
// }); |
|||
}, |
|||
showWithdrawForm() { |
|||
this.isWithdrawForm = true |
|||
this.inputAmount = this.accountInfo.wallet_balance |
|||
}, |
|||
confirmWithdraw() { |
|||
merchantWithdraw({ |
|||
amount: this.inputAmount |
|||
}).then(() => { |
|||
this.getAccountInfo() |
|||
this.isWithdrawForm = false |
|||
}) |
|||
}, |
|||
cashManager() { |
|||
uni.navigateTo({ |
|||
url: '/pages/merchant-withdrawal-history/merchant-withdrawal-history' |
|||
}); |
|||
}, |
|||
getSysConfig() { |
|||
publicSysConfig().then(data => this.sysConfig = data) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.uni-page-body { |
|||
background: #f7f7f7; |
|||
} |
|||
|
|||
.agent-content { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 1400rpx; |
|||
|
|||
background: url(../../static/page/merchant-account-opening-bg.png) no-repeat top center; |
|||
background-size: 100% 414rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.ag-sign { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
width: 150rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
padding-left: 40rpx; |
|||
border-top-left-radius: 30rpx; |
|||
border-bottom-left-radius: 30rpx; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
background: #FCC565; |
|||
box-sizing: border-box; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.agent-top { |
|||
text-align: center; |
|||
padding-top: 40rpx; |
|||
|
|||
.ag-num { |
|||
display: flex; |
|||
justify-content: center; |
|||
padding-top: 20rpx; |
|||
color: #fff; |
|||
|
|||
.au-font { |
|||
margin-top: 40rpx; |
|||
font-size: 14px; |
|||
margin-right: 10rpx; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.au-num { |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
.age-font { |
|||
margin-top: 10rpx; |
|||
font-size: 16px; |
|||
line-height: 1.5; |
|||
color: #fff; |
|||
} |
|||
|
|||
.age-line { |
|||
margin: 20rpx auto 0; |
|||
width: 200rpx; |
|||
height: 2rpx; |
|||
|
|||
img { |
|||
display: block; |
|||
margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
.age-wait { |
|||
margin-top: 20rpx; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.age-linemore {} |
|||
|
|||
.age-mnum { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 20rpx; |
|||
|
|||
.mtext { |
|||
color: #fff; |
|||
font-size: 14px; |
|||
margin: 0 20rpx; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.mline { |
|||
height: 28rpx; |
|||
width: 2rpx; |
|||
background: #F86E78; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ag-paylist { |
|||
padding-left: 30rpx; |
|||
padding-right: 30rpx; |
|||
margin-top: 36rpx; |
|||
background: #fff; |
|||
|
|||
.agp-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 100rpx; |
|||
|
|||
.agp-title { |
|||
|
|||
.zhifubao { |
|||
padding-left: 55rpx; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
color: #454545; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
background: url(../../static/page/payment-icon.png) no-repeat left center; |
|||
background-size: 40rpx 40rpx; |
|||
} |
|||
} |
|||
|
|||
.agp-detail { |
|||
|
|||
.agp-make { |
|||
padding-right: 30rpx; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
color: #999; |
|||
font-size: 12px; |
|||
background: url(../../static/page/open-icon.png) no-repeat right center; |
|||
background-size: 14rpx 24rpx; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.apt-main { |
|||
padding: 10rpx 0; |
|||
|
|||
.apm-cell { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.am-title { |
|||
height: 70rpx; |
|||
line-height: 70rpx; |
|||
color: 454545; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.am-value { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
height: 70rpx; |
|||
line-height: 70rpx; |
|||
|
|||
.mphone { |
|||
margin-right: 20rpx; |
|||
font-size: 12px; |
|||
color: #454545; |
|||
} |
|||
|
|||
.mlink { |
|||
font-size: 12px; |
|||
color: #32A2FC; |
|||
} |
|||
|
|||
.mnum { |
|||
font-size: 14px; |
|||
color: 454545; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.u-border-bottom, |
|||
.u-border-top { |
|||
border-color: #eee !important; |
|||
} |
|||
|
|||
.apt-btn { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
padding: 30rpx 0; |
|||
|
|||
.cashbtn { |
|||
width: 110rpx; |
|||
height: 48rpx; |
|||
text-align: center; |
|||
line-height: 48rpx; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
background: #F52F3E; |
|||
border-radius: 100rpx; |
|||
} |
|||
|
|||
.savebtn { |
|||
width: 110rpx; |
|||
height: 48rpx; |
|||
text-align: center; |
|||
line-height: 48rpx; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
background: #00aaff; |
|||
border-radius: 100rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.withdraw-form { |
|||
font-size: 28rpx; |
|||
.tips { |
|||
margin-top: 20rpx; |
|||
|
|||
.tips-item { |
|||
margin-top: 6rpx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue