|
|
@@ -0,0 +1,305 @@
|
|
|
+<template>
|
|
|
+ <view class="margin-30">
|
|
|
+ <navigator v-if="$isEmpty(bank)" url="/pages/userBank/add" class="card_add" hover-class="none">
|
|
|
+ <view class="margin-bottom-10">
|
|
|
+ <u-icon name="plus-circle-fill" color="#F5A85B" size="70"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="" style="color: #666666;">
|
|
|
+ 添加银行卡
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+
|
|
|
+ <navigator url="select-bank" class="bank" v-else hover-class="none">
|
|
|
+ <view class="left center">
|
|
|
+ <image :src="bank.bankType?'/static/bank/'+bank.bankType+'.png':''" mode=""></image>
|
|
|
+ <view class="content">
|
|
|
+ <text>{{bank.bankTypeLabel}}</text>
|
|
|
+ <text>{{bank.cardNo}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="center">
|
|
|
+ <text class="cuIcon-right" style="font-size: 36rpx;color: #888888;"></text>
|
|
|
+ </view>
|
|
|
+ </navigator>
|
|
|
+ <view class="card">
|
|
|
+ <text class="title">提现金额</text>
|
|
|
+
|
|
|
+ <view class="input">
|
|
|
+ <text class="text-price center text-bold" style="font-size: 60rpx;"></text>
|
|
|
+ <view @click="show" class="margin-left-20 center"
|
|
|
+ style="width: 60%;justify-content: flex-start;color: #ff9900;">
|
|
|
+ <text class="text-xl" v-text="withdrawAmount"></text>
|
|
|
+ <view class="cusor"></view>
|
|
|
+ </view>
|
|
|
+ <view @click="allWithdraw" class="center margin-bottom-10 margin-left-20">
|
|
|
+ <view class="cu-btn withdraw-btn sm round center">
|
|
|
+ <text>全部提现</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="canWithdraw">
|
|
|
+ 可提现金额
|
|
|
+ <text class="text-price margin-left-20" style="font-size: 34rpx;">{{canWithDraw}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="rate">
|
|
|
+ <view class="item">
|
|
|
+ <text>服务费</text>
|
|
|
+ <text class="text-price">0.10</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="">
|
|
|
+ <text>费率</text>
|
|
|
+ <text @click="rateShow=true" class="cuIcon-question margin-left-10 text-lg"></text>
|
|
|
+ </view>
|
|
|
+ <text class="">0.05%</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <u-popup v-model="rateShow" :mask-close-able="false" mode="center" height="40%" width="76%" borderRadius="20"
|
|
|
+ negative-top="100">
|
|
|
+ <view class="popup-content" style="height: 98%;">
|
|
|
+ <view class="">
|
|
|
+ <text class="popup-title">费率说明</text>
|
|
|
+ <view class="popup-desc">
|
|
|
+ <text>累计营收0-1000元,费率为0.5%;</text>
|
|
|
+ <text>1001-10000元,费率为0.38%;</text>
|
|
|
+ <text>10000-100000元,费率0.3%;</text>
|
|
|
+ <text>100000元起申请更低费率。</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="center">
|
|
|
+ <view class="cu-btn btn-bg-color round" style="height: 80rpx;font-size: 30rpx;width: 80%;"
|
|
|
+ @click="rateShow=false">
|
|
|
+ 确认
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+
|
|
|
+ <amountInput :maxNumber="canWithDraw" ref="amountInput" confirmText="确认提现" btnColor="#ff9900" @change="change"
|
|
|
+ @confirm="withdrawConfirm"></amountInput>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import amountInput from '@/components/amountInput/amountInput.vue';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ amountInput
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ rateShow: false,
|
|
|
+ bank: {},
|
|
|
+ //可提现
|
|
|
+ canWithDraw: '',
|
|
|
+ //提现金额
|
|
|
+ withdrawAmount: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.fetchCardList()
|
|
|
+ this.fetchShopDetail()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.canReset) {
|
|
|
+ this.bank = this.$util.getBackParams('bank')
|
|
|
+ }
|
|
|
+ this.canReset = true
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async fetchShopDetail() {
|
|
|
+ let params = {
|
|
|
+ id: this.vuex_shopId
|
|
|
+ }
|
|
|
+ let data = (await this.$api.shop.detail(params)).data
|
|
|
+ let originalData = this.$digital.floatSub(data.withdrawTotalPrice, data.totalPointValue)
|
|
|
+ this.canWithDraw = this.$digital.keepTwoDecimal(originalData)
|
|
|
+ },
|
|
|
+ fetchCardList() {
|
|
|
+ let params = {
|
|
|
+ userId: this.vuex_shopId,
|
|
|
+ size: 10
|
|
|
+ }
|
|
|
+ this.$api.userBank.appList(params).then(res => {
|
|
|
+ this.bank = res.data.records[0]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ change(e) {
|
|
|
+ if (!e) {
|
|
|
+ this.withdrawAmount = 0
|
|
|
+ } else {
|
|
|
+ this.withdrawAmount = e
|
|
|
+ }
|
|
|
+ },
|
|
|
+ show() {
|
|
|
+ this.$refs.amountInput.show()
|
|
|
+ },
|
|
|
+ //全部提现
|
|
|
+ allWithdraw(){
|
|
|
+ this.withdrawAmount=this.canWithDraw
|
|
|
+ this.$refs.amountInput.initialMoney(this.withdrawAmount)
|
|
|
+ },
|
|
|
+ withdrawConfirm(){
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .bank {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 44rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ color: #252525;
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ margin-top: 15rpx;
|
|
|
+ color: #888888;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card_add {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 40rpx 0;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1rpx solid #DFDFDF;
|
|
|
+
|
|
|
+ .withdraw-btn {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ color: #EE9230;
|
|
|
+ border: 1rpx solid #EE9230;
|
|
|
+ height: 54rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .canWithdraw {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ color: #252525;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate {
|
|
|
+ margin-top: 40rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ color: #252525;
|
|
|
+ }
|
|
|
+
|
|
|
+ text:last-child {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit-btn {
|
|
|
+ background-color: #EE9230;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-content {
|
|
|
+ height: 100%;
|
|
|
+ padding: 50rpx 60rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+
|
|
|
+ .popup-title {
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-desc {
|
|
|
+ margin-top: 50rpx;
|
|
|
+ color: #666666;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ text {
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cusor {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ width: 6rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ height: 60%;
|
|
|
+ background-color: #ff9900;
|
|
|
+ animation: blink 1200ms infinite ease-in-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes blink {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|