car-wash-java/car-wash-mp/src/pages-user/wallet/refund.vue

<template>
  <view class="page">
    <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">¥{{ ((account.balance || 0)/100).toFixed(2) }}</text>
      </view>
      <view class="height-94 flex-align-center">
        <view class="fs-28 color-999">可退金额 {{ ((account.balance || 0)/100).toFixed(2) }} 元，优惠金额
          {{ ((account.grantsBalance || 0)/100).toFixed(2) }} 元
        </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">
        <uv-textarea
            class="fs-28"
            style="height: 100%"
            count
            placeholder="请您详细填写申请说明"
            maxlength="200"
            @input="inputReasonText"></uv-textarea>
      </view>
    </view>
    <view>
      <view class="pl-40 pr-40 pb-30 pt-30" style="background-color: #fff">
        <uv-button shape="circle" color="#C6171E" type="primary" @click="submit" :disabled="account.balance<=0">提交申请</uv-button>
      </view>
    </view>


    <uv-popup
        closeable
        @change="popClose"
        ref="popup_ref"
        mode="bottom"
        custom-style="height: 200rpx;">
      <view class="pt-64" style="width: 100%;">
        <uv-alert :show-icon="true" type="success" description="提交成功，预计需要5个工作日内审核完成请及时查收"></uv-alert>
      </view>
    </uv-popup>
  </view>
</template>

<script setup lang="ts">
import {onLoad, onShow} from "@dcloudio/uni-app";
import {ref} from "vue";
import {post, get} from "@/utils/https";

const popup_ref = ref();
const account = ref();
const value = ref(0);
const reasonText = ref("");
const reason = ref(-1);
const reasons = ref([
  "不常住该小区",
  "充电故障",
  "下次使用再充值",
  "充电费用贵",
  "很难充上电",
  "其他原因",
]);
const success = ref(true);


onShow(() => {
  allRefund();
});

const allRefund = () => {
  get(`/account/balance`).then(res => {
    account.value = res;
  })
};

const changeReason = (i: number) => {
  reason.value = i;
};

const inputReasonText = (e: any) => {
  reasonText.value = e.detail.value;
};

const popClose = (e:any) => {
  if (!e.show) {
    uni.redirectTo({
      url: '/pages/user/index'
    })
  }
}

const submit = () => {
  uni.showLoading({
    title: "提交中",
  });
  let r = "";
  if (reason.value >= 0) {
    r += `${reasons.value[reason.value]}`;
    if (reasonText.value) {
      r += "|";
    }
  }
  if (reasonText.value) {
    r += reasonText.value;
  }
  post(`/payment/wxApplyRefund`, r).then((res: any) => {
    uni.hideLoading();
    success.value = true;
    popup_ref.value?.open();
  }).catch((err) => {
    uni.hideLoading();
    uni.showModal({
      content: err.errMsg,
      showCancel: false
    })
  });
};


const close = () => {
  success.value = false;
  uni.navigateBack();
};
</script>

<style lang="scss">
.page {
  height: 100vh;
  background-color: $uni-bg-color-page;
  padding: 20rpx;

  .block {
    border-radius: 24rpx;
    background: $uni-bg-color-card;
    padding: 40rpx 40rpx 0px 40rpx;
  }

  .reason {
    color: $uni-text-color-secondary;
    background-color: $uni-bg-color-hover;
    border-radius: 4rpx;
    padding: 12rpx 16rpx;
    border: 1px solid $uni-border-color-light;
  }

  .reason-active {
    color: $uni-color-primary;
    border: 1px solid $uni-color-primary;
    background: rgba(198, 23, 30, 0.08);
  }

  .reason-text {
    height: 224rpx;
  }

  .reason-text-length {
    position: absolute;
    top: 40rpx;
    right: 40rpx;
  }
}
</style>