cashoutDialog.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <template>
  2. <van-overlay :show="true">
  3. <div class="wrapper" @click.stop>
  4. <div class="block">
  5. <van-form @submit="handleCashout">
  6. <van-cellGroup inset>
  7. <van-field v-model="amount" label="提现金额(元)" type="number" placeholder="请输入提现金额" />
  8. </van-cellGroup>
  9. <div class="submit-box">
  10. <van-button :loading="loading" :disabled="!amount" type="primary" hairline native-type="submit"
  11. loading-text="结算中..."> 提现 </van-button>
  12. <van-button @click="closeCashout" type="default" hairline> 取消 </van-button>
  13. </div>
  14. </van-form>
  15. </div>
  16. </div>
  17. </van-overlay>
  18. </template>
  19. <script lang="ts">
  20. import { Toast } from "vant";
  21. import { CashOutModel } from "@/model/cashOut";
  22. import { ref, defineComponent } from "vue";
  23. export default defineComponent({
  24. setup(props, context) {
  25. const cashOutModel = new CashOutModel();
  26. const useCashout = () => {
  27. const amount = ref<number>();
  28. const loading = ref(false);
  29. const cashout = async () => {
  30. if (!amount.value) {
  31. Toast.fail("请输入金额");
  32. return false;
  33. }
  34. loading.value = true;
  35. const data = await cashOutModel.cashout(amount.value * 100);
  36. loading.value = false;
  37. if (data.code === 200) {
  38. Toast.success("提现成功");
  39. return true;
  40. } else {
  41. Toast.fail(data.msg);
  42. return false;
  43. }
  44. };
  45. const handleCashout = async () => {
  46. if (await cashout()) {
  47. console.log(context.emit)
  48. context.emit('close')
  49. }
  50. };
  51. const closeCashout = ()=>{
  52. context.emit('close')
  53. }
  54. return {
  55. amount,
  56. loading,
  57. cashout,
  58. handleCashout,
  59. closeCashout
  60. };
  61. };
  62. return {
  63. ...useCashout()
  64. }
  65. },
  66. })
  67. </script>
  68. <style scoped lang="scss">
  69. .wrapper {
  70. display: flex;
  71. align-items: center;
  72. justify-content: center;
  73. height: 100%;
  74. }
  75. .block {
  76. width: 600px;
  77. background-color: #fff;
  78. padding: 20px;
  79. border-radius: 10px;
  80. }
  81. .user-img {
  82. display: flex;
  83. justify-content: center;
  84. align-items: center;
  85. font-size: 20px;
  86. margin-bottom: 10px;
  87. }
  88. .submit-box {
  89. display: flex;
  90. justify-content: space-around;
  91. align-items: center;
  92. margin-top: 10px;
  93. }
  94. </style>