charge-java/charge-front/src/pages-user/wallet-refund/wallet-refund.vue

<template>
  <view class="page">
    <navigation-bar title="退款"></navigation-bar>
    <view class="block">
      <view class="fs-28 color-000 fw-500">退款金额</view>
      <view
        class="pt-24 pb-24 box-content flex-inline"
        style="border-bottom: 1rpx solid rgba(0, 0, 0, 0.1)"
      >
        <text style="font-size: 32px; line-height: 32px">¥</text>
        <input
          style="height: 46px; font-size: 46px; line-height: 46px"
          class="fw-600 color-000 ml-18"
          :value="value"
          :disabled="true"
        />
      </view>
      <view class="height-94 flex-align-center">
        <view class="fs-28 color-999"
          >可退金额 {{ user ? user.refundableAmount : 0 }} 元，优惠金额
          {{ user ? user.discountAmount : 0 }} 元</view
        >
        <!-- <view class="fs-28 color-primary" @click="allRefund">全部提现</view> -->
      </view>
    </view>
    <view class="block mt-16">
      <view class="fs-28 color-000 fw-500 pb-8">退款原因</view>
      <view class="pb-40 flex-wrap">
        <view
          :class="[
            'reason',
            'mt-16',
            'mr-20',
            'fs-26',
            reason === i ? 'reason-active' : '',
          ]"
          v-for="(r, i) in reasons"
          :key="i"
          @click="changeReason(i)"
          >{{ r }}</view
        >
      </view>
    </view>
    <view class="block mt-16 relative">
      <view class="fs-28 color-000 fw-500 pb-16">退款说明</view>
      <view class="pb-40 reason-text">
        <textarea
          class="fs-28"
          style="height: 100%"
          placeholder="请您详细填写申请说明"
          maxlength="200"
          @input="inputReasonText"
        ></textarea>
      </view>
      <view class="reason-text-length lh-28 fs-28 color-999"
        >{{ reasonText.length }}/200</view
      >
    </view>
    <style-bottom-view>
      <view class="pl-40 pr-40 pb-30 pt-30" style="background-color: #fff">
        <style-button type="primary" :disabled="submitting" @click="submit">提交申请</style-button>
      </view>
    </style-bottom-view>
    <style-result
      v-if="success"
      icon="/pages-user/static/icon-submit-success.png"
      title="提交成功"
      tip="预计需要5个工作日内审核完成请及时查收"
    >
      <view class="pt-64" style="width: 280rpx">
        <style-button height="80" type="primary" @click="close"
          >完成</style-button
        >
      </view>
    </style-result>
  </view>
</template>

<script setup lang="ts">
import { applyRefund } from "@/api/user";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const user = ref();
const value = ref(0);
const reasonText = ref("");
const reason = ref(-1);
const reasons = ref([
  "不常住该小区",
  "充电故障",
  "下次使用再充值",
  "充电费用贵",
  "很难充上电",
  "其他原因",
]);
const success = ref(false);
const submitting = ref(false);
onLoad(() => {
  if (getApp<any>().globalData.user) {
    user.value = getApp<any>().globalData.user;
    allRefund();
  }
});

const allRefund = () => {
  if (user.value) {
    value.value = Number(user.value.balance);
  }
};
const changeReason = (i: number) => {
  reason.value = i;
};
const inputReasonText = (e: any) => {
  reasonText.value = e.detail.value;
};
const submit = () => {
  if (submitting.value) {
    return;
  }
  submitting.value = true;
  uni.showLoading({
    title: "提交中",
    mask: true,
  });
  let r = "";
  if (reason.value >= 0) {
    r += `${reasons.value[reason.value]}`;
    if (reasonText.value) {
      r += "|";
    }
  }
  if (reasonText.value) {
    r += reasonText.value;
  }
  applyRefund(r)
    .then(() => {
      uni.hideLoading();
      success.value = true;
    })
    .catch((err) => {
      console.log(err);
      uni.hideLoading();
      uni.showModal({
        content: err.errMsg,
        showCancel: false
      })
    })
    .finally(() => {
      submitting.value = false;
    });
};
const close = () => {
  success.value = false;
  uni.navigateBack();
};
</script>

<style lang="scss">
.page {
  height: 100vh;
  background-color: #f6f7fa;
  padding: 20rpx;
  .block {
    border-radius: 24rpx;
    background: #fff;
    padding: 40rpx 40rpx 0px 40rpx;
  }
  .reason {
    color: #666;
    background-color: #f7f7f7;
    border-radius: 4rpx;
    padding: 12rpx 16rpx;
    border: 1px solid #f7f7f7;
  }
  .reason-active {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    background: rgba(52, 125, 255, 0.1);
  }
  .reason-text {
    height: 224rpx;
  }
  .reason-text-length {
    position: absolute;
    top: 40rpx;
    right: 40rpx;
  }
}
</style>