parking_h5_all/pages/applyRefund/applyRefund.vue

<template>
  <view class="apply-refund">
    <view class="apply-refund-form">
      <view class="apply-refund-form-item">
        <view class="apply-refund-form-label"> 退款金额： </view>
        <view class="apply-refund-form-content">
          <text class="money">{{ Number(refundForm.refundAmount).toFixed(2) }}</text
          >元
        </view>
      </view>
      <view class="apply-refund-form-item">
        <view class="apply-refund-form-label"> 退款原因： </view>
        <view class="apply-refund-form-content full-width">
          <textarea
            v-model="refundForm.refundReason"
            maxlength="200"
            placeholder="请填写申请退款原因"
            :data-maxnum="refundForm.refundReason.length + '/200'"
          />
          <u-upload
            :header="{
              Authorization: 'Bearer ' + vuex_token
            }"
            max-count="3"
            ref="uUpload"
            :action="action"
          ></u-upload>
        </view>
      </view>
    </view>
    <view class="apply-refund-form-submit">
      <u-button type="primary" @click="submit">提交</u-button>
    </view>
    <view class="refund-tips" v-if="refundTipsContent">
      <u-parse :html="refundTipsContent"></u-parse>
    </view>
    <u-mask :show="successPop" :zoom="true" :custom-style="{ background: 'rgba(255, 255, 255, 0.8)' }">
      <view class="pop-warp">
        <view class="pop-warp-icon">
          <u-icon name="checkbox-mark" color="#fff" size="50"></u-icon>
        </view>
        <view class="pop-warp-tips">
          <text>提交成功！预计3-7个工作日内处理</text>
        </view>
      </view>
    </u-mask>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { config } from '@/common/config.js';
export default {
  data() {
    return {
      refundForm: {
        orderId: '',
        refundAmount: '',
        refundReason: '',
        images: []
      },
      action: config.baseUrl + '/file/tencent/upload',
      successPop: false,
      // 退款温馨提示
      refundTipsContent: ''
    };
  },
  computed: {
    ...mapState(['vuex_token'])
  },
  onLoad(page) {
    this.refundForm.orderId = page.orderId;
    this.refundForm.refundAmount = Number(page.payAmount);
    this.getSysterms(4);
  },
  methods: {
    submit() {
      let files = [];
      // 是否有未完成上传的图片标识
      let isHas = false;
      this.$refs.uUpload.lists.forEach((item) => {
        if (item.progress === 100 && item.response) {
          const url = item?.response?.data?.url;
          if (url) {
            files.push(url);
          }
        } else {
          isHas = true;
        }
      });
      this.refundForm.images = files;
      if (this.refundForm.refundReason && !isHas) {
        this.$u.api
          .updateOrderRefund(this.refundForm)
          .then((res) => {
            this.successPop = true;
            if (res.code === 200) {
              setTimeout(() => {
                this.$u.route('pages/applyRefundDetails/applyRefundDetails', {
                  orderId: this.refundForm.orderId
                });
              }, 2000);
            } else {
              this.successPop = false;
              this.$refs.uToast.show({
                title: res.msg,
                type: 'error'
              });
            }
          })
          .catch((err) => {
            this.$refs.uToast.show({
              title: '操作失败!',
              type: 'error'
            });
          });
      } else if (this.refundForm.refundReason == '') {
        this.$refs.uToast.show({
          title: '请填写申请退款原因',
          type: 'warning'
        });
      } else if (isHas) {
        this.$refs.uToast.show({
          title: '还有图片未完成上传,请稍等!',
          type: 'warning'
        });
      }
    },
    /**
     * 获取收费标准
     * */
    getSysterms(termsType) {
      this.$u.api
        .getSysterms({
          termsType: Number(termsType)
        })
        .then((res) => {
          if (res.code === 200) {
            this.refundTipsContent = res.data?.content;
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: '系统错误!',
            type: 'error'
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './applyRefund.scss';
</style>