cash-out.vue 7.91 KB
Newer Older
1 2
<template>
  <div class="cash-out">
leiqingsong's avatar
leiqingsong committed
3
    <van-cell-group style="margin-bottom: 10px">
leiqingsong's avatar
leiqingsong committed
4
      <van-cell is-link title="所属银行" :value="bank" @click="jumpToBank" />
5 6
    </van-cell-group>
    <div class="detail">
leiqingsong's avatar
leiqingsong committed
7
      <p class="cash-out-title">提现金额</p>
leiqingsong's avatar
leiqingsong committed
8 9 10 11 12
      <van-field
        v-model="money"
        type="number"
        label="¥"
        class="money"
leiqingsong's avatar
leiqingsong committed
13 14
        maxlength="8"
        center
leiqingsong's avatar
leiqingsong committed
15
        @blur="onFillMoneyBlur"
16
        @input="inputClick"
leiqingsong's avatar
leiqingsong committed
17
      />
18 19 20 21
      <div class="remain">
        <span style="color: #666666"
          >可提现金额{{ remainMoney.toFixed(2) }}</span
        >
leiqingsong's avatar
leiqingsong committed
22
        <span v-if="remainMoney > 0" class="all" @click="allIn">全部提现</span>
23 24 25 26
      </div>
      <div class="real">
        <p class="real-item">
          <span>实际到账</span>
leiqingsong's avatar
leiqingsong committed
27
          <span>{{ account }}</span>
28 29 30
        </p>
        <p class="real-item">
          <span>税款</span>
leiqingsong's avatar
leiqingsong committed
31
          <span>{{ rate }}</span>
32 33 34 35
        </p>
        <p class="explain">
          <span>扣税说明</span>
          <img
36
            @click="taxtClick"
37 38 39 40 41
            class="explain-img"
            src="@/assets/images/explain.png"
            alt="解释"
          />
        </p>
leiqingsong's avatar
leiqingsong committed
42
        <p v-if="showExplain" class="explain">
leiqingsong's avatar
leiqingsong committed
43
          <span>{{ this.textName }}</span>
44
        </p>
45 46
      </div>
    </div>
leiqingsong's avatar
leiqingsong committed
47 48 49 50 51
    <div style="padding: 10px 16px">
      <van-button type="primary" size="large" @click="onCashOut"
        >提现</van-button
      >
    </div>
52 53 54 55 56 57
    <base-dialog
      base-dialog-title="提现"
      base-dialog-btn="提交"
      :base-dialog-show="validCodeDialogShow"
      :base-dialog-show-close="true"
      @onClick="onSubmit"
全球's avatar
全球 committed
58
      @onClose="onCloseDialog"
59 60
    >
      <div slot="content">
leiqingsong's avatar
leiqingsong committed
61
        <p class="content-text">请输入手机号{{ userPhone }}的动态验证码</p>
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
        <van-field
          v-model="validCode"
          type="number"
          class="validCodeInput"
          placeholder="请输入"
        >
          <img
            slot="left-icon"
            class="valid-code"
            src="@/assets/images/验证码.png"
          />
        </van-field>
      </div>
    </base-dialog>
    <base-dialog
      :base-dialog-title="resultDialogTitle"
      :base-dialog-show="resultDialog"
      @onClick="onSuccess"
    >
leiqingsong's avatar
leiqingsong committed
81
      <div slot="content" style="text-align: center">
82
        <img :src="resultDialogImg" style="width: 70px; height: 76px" alt />
leiqingsong's avatar
leiqingsong committed
83
        <p style="margin: 0; font-size: 14px; color: #999999">
84 85 86 87 88
          {{ resultDialogTip }}
        </p>
      </div>
      <div></div>
    </base-dialog>
89 90 91 92
  </div>
</template>

<script>
leiqingsong's avatar
leiqingsong committed
93
import { getWithdrawalAmount } from "@/api/wallet";
leiqingsong's avatar
leiqingsong committed
94
import { getUserBankInfo, sendSms, cashOut, getTaxRate } from "@/api/bank";
95
import BaseDialog from "@/components/BaseDialog.vue";
96
export default {
97
  components: { BaseDialog },
98 99 100
  name: "CashOut",
  data() {
    return {
leiqingsong's avatar
leiqingsong committed
101
      showExplain: false,
leiqingsong's avatar
leiqingsong committed
102
      userPhone: JSON.parse(localStorage.getItem("user")).userId,
103
      bank: "",
leiqingsong's avatar
leiqingsong committed
104
      money: null,
leiqingsong's avatar
leiqingsong committed
105 106
      account: 0,
      rate: 0,
leiqingsong's avatar
leiqingsong committed
107
      remainMoney: 100,
108 109 110 111
      resultDialogTitle: "",
      resultDialogTip: "",
      resultDialogImg: "",
      resultDialog: false,
leiqingsong's avatar
leiqingsong committed
112
      textName: "",
leiqingsong's avatar
leiqingsong committed
113 114
      validCodeDialogShow: false,
      validCode: null
115 116
    };
  },
leiqingsong's avatar
leiqingsong committed
117 118
  created() {
    this.getUserInfo();
leiqingsong's avatar
leiqingsong committed
119
    this.canCashOut();
leiqingsong's avatar
leiqingsong committed
120
  },
121
  methods: {
leiqingsong's avatar
leiqingsong committed
122 123
    onFillMoneyBlur(e) {
      if (e.target.value > this.remainMoney) {
leiqingsong's avatar
leiqingsong committed
124 125
        this.$toast.fail("输入超过可提现金额,请重新输入");
        return false;
leiqingsong's avatar
leiqingsong committed
126 127
      }
    },
leiqingsong's avatar
leiqingsong committed
128 129 130 131
    inputClick() {
      this.rate = this.money * 0.02;
      this.account = this.money - this.rate;
    },
leiqingsong's avatar
leiqingsong committed
132 133
    canCashOut() {
      const params = {
leiqingsong's avatar
leiqingsong committed
134
        userId: JSON.parse(localStorage.getItem("user")).userId
leiqingsong's avatar
leiqingsong committed
135 136 137 138 139 140 141 142
      };
      getWithdrawalAmount(params).then(res => {
        if (res.code === 0) {
          this.remainMoney = res.data.currentMoneyCan;
        } else {
          this.remainMoney = 100;
        }
      });
leiqingsong's avatar
leiqingsong committed
143
      getWithdrawalAmount;
leiqingsong's avatar
leiqingsong committed
144
    },
leiqingsong's avatar
leiqingsong committed
145 146 147 148 149
    jumpToBank() {
      console.log("1");
      this.$router.push("/bank");
    },
    // 全部提现
150 151
    allIn() {
      this.money = this.remainMoney;
leiqingsong's avatar
leiqingsong committed
152
    },
leiqingsong's avatar
leiqingsong committed
153
    // 点击提现
leiqingsong's avatar
leiqingsong committed
154
    onCashOut() {
leiqingsong's avatar
leiqingsong committed
155
      if (this.money == 0) {
leiqingsong's avatar
leiqingsong committed
156
        this.$toast.fail("请输入正确金额");
leiqingsong's avatar
leiqingsong committed
157 158
        return;
      }
leiqingsong's avatar
leiqingsong committed
159 160 161 162
      if (!this.money) {
        this.$toast.fail("未输入提现金额");
        return;
      }
leiqingsong's avatar
leiqingsong committed
163
      if (this.money > this.remainMoney) {
leiqingsong's avatar
leiqingsong committed
164 165
        this.$toast.fail("输入超过可提现金额,请重新输入");
        return;
leiqingsong's avatar
leiqingsong committed
166
      }
leiqingsong's avatar
leiqingsong committed
167
      const params = {
leiqingsong's avatar
leiqingsong committed
168
        userIdww: JSON.parse(localStorage.getItem("user")).userId
leiqingsong's avatar
leiqingsong committed
169 170
      };
      sendSms(params).then();
leiqingsong's avatar
leiqingsong committed
171 172
      this.validCode = null;
      this.validCodeDialogShow = true;
173
    },
leiqingsong's avatar
leiqingsong committed
174
    taxtClick() {
leiqingsong's avatar
leiqingsong committed
175 176 177 178 179 180 181 182 183 184 185
      this.showExplain = !this.showExplain;
      if (this.showExplain) {
        const params = {
          money: 1
        };
        getTaxRate(params).then(res => {
          if (res.code === 0) {
            this.textName = res.data.taxDesc;
          }
        });
      }
leiqingsong's avatar
leiqingsong committed
186
    },
leiqingsong's avatar
leiqingsong committed
187 188
    getUserInfo() {
      const params = {
leiqingsong's avatar
leiqingsong committed
189
        userId: JSON.parse(localStorage.getItem("user")).userId
leiqingsong's avatar
leiqingsong committed
190 191 192
      };
      getUserBankInfo(params).then(res => {
        if (res.code === 0) {
leiqingsong's avatar
leiqingsong committed
193 194 195 196 197
          if (res.data.bankName) {
            this.bank = res.data.bankName;
          } else {
            this.bank = "";
          }
leiqingsong's avatar
leiqingsong committed
198 199 200
        }
      });
    },
leiqingsong's avatar
leiqingsong committed
201 202 203
    onCloseDialog() {
      this.validCodeDialogShow = false;
    },
204 205
    onSubmit() {
      this.validCodeDialogShow = false;
leiqingsong's avatar
leiqingsong committed
206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225
      const params = {
        code: this.validCode,
        money: this.money
      };
      cashOut(params)
        .then(res => {
          this.resultDialog = true;
          if (res.code === 0) {
            this.resultDialogTitle = "提现成功";
            this.resultDialogTip = "提现成功,请及时查收";
            this.resultDialogImg = require("@/assets/images/成功.png");
          } else {
            this.resultDialogTitle = "提现失败";
            this.resultDialogTip = "提现失败,验证码错误";
            this.resultDialogImg = require("@/assets/images/叉号.png");
          }
        })
        .catch(err => {
          this.$toast.fail(err.response.data.error);
        });
226 227 228
    },
    onSuccess() {
      this.resultDialog = false;
229 230 231 232 233 234 235 236
    }
  }
};
</script>

<style lang="scss" scoped>
.cash-out {
  padding: 10px 0;
leiqingsong's avatar
leiqingsong committed
237
  font-family: PingFang-SC-Medium;
238 239 240 241 242 243 244 245 246 247
  .bank {
    ::v-deep .van-field__control {
      text-align: right;
    }
  }
  .detail {
    height: 380px;
    padding: 10px 16px;
    background-color: #ffffff;

leiqingsong's avatar
leiqingsong committed
248 249 250
    .cash-out-title {
      font-size: 24px;
    }
251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305
    .money {
      box-sizing: border-box;
      margin: 0 0 10px;
      border-bottom: 1px solid #eeeeee;
      ::v-deep .van-field__label {
        width: 16px;
        height: 21px;
        font-size: 28px;
        line-height: 20px;
        color: #333333;
      }

      ::v-deep .van-field__control {
        font-size: 23px;
        color: #333333;
      }
    }

    .remain {
      padding: 10px 16px;
      font-size: 12px;

      .all {
        padding-left: 20px;
        color: #88c678;
      }
    }

    .real {
      padding: 10px 16px;
      font-size: 14px;
      background-color: #f9f9f9;
      .real-item {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
      }
      .explain {
        position: relative;
        span {
          color: #999999;
        }
        .explain-img {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 14px;
          height: 14px;
          margin-left: 8px;
        }
      }
    }
  }
}
306 307 308 309
.content-text {
  width: 185px;
  margin: 25px auto;
  text-align: center;
leiqingsong's avatar
leiqingsong committed
310
  font-family: PingFang-SC-Medium;
311 312 313
  font-size: 14px;
  color: #333333;
}
leiqingsong's avatar
leiqingsong committed
314 315 316 317 318
.validCodeInput {
  width: 245px;
  margin: 10px auto;
  background-color: #f9f9f9;
  border-radius: 20px;
319 320 321 322
  .van-field__left-icon {
    display: flex;
    align-items: center;
  }
leiqingsong's avatar
leiqingsong committed
323 324 325 326 327
  .valid-code {
    width: 16px;
    height: 18px;
  }
}
328
</style>