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" :loading="loading" @click="submitForm">提交</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 } 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: '',
      orderType: 'road',
      loading: false
    };
  },
  // computed: {
  //   ...mapState(['vuex_token'])
  // },
  onLoad(options) {
    const { orderId, payAmount, tabCur } = options;
    this.refundForm.orderId = orderId;
    this.refundForm.refundAmount = Number(payAmount);
    this.orderType = tabCur;
    this.getSystems(4);
    console.log(this.vuex_token);
  },
  methods: {
    /**
     * @description: 提交
     * @return {*}
     */
    submitForm() {
      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) {
        const submitObj = {
          road: () => {
            this.roadRefundSubmit();
          },
          park: () => {
            this.parkRefundSubmit();
          }
        };
        submitObj[this.orderType]();
      } else if (this.refundForm.refundReason == '') {
        this.$refs.uToast.show({
          title: '请填写申请退款原因',
          type: 'warning'
        });
      } else if (isHas) {
        this.$refs.uToast.show({
          title: '还有图片未完成上传,请稍等!',
          type: 'warning'
        });
      }
    },
    /**
     * @description: 路段退款提交
     * @return {*}
     */
    async roadRefundSubmit() {
      try {
        this.loading = true;
        const { code } = await this.$u.api.updateOrderRefund({ ...this.refundForm });
        if (code === 200) {
          this.successPop = true;
          setTimeout(() => {
            this.successPop = false;
            this.$u.route('pages/applyRefundDetails/applyRefundDetails', {
              orderId: this.refundForm.orderId
            });
          }, 2000);
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    /**
     * @description: 停车退款提交
     * @return {*}
     */
    async parkRefundSubmit() {
      try {
        this.loading = true;
        const { code } = await this.$u.api.updateParkingOrderRefund({ ...this.refundForm });
        if (code === 200) {
          this.successPop = true;
          setTimeout(() => {
            this.successPop = false;
            this.$u.route('pages/applyRefundDetails/applyRefundDetails', {
              orderId: this.refundForm.orderId
            });
          }, 2000);
        }
      } catch (error) {
      } finally {
        this.loading = false;
      }
    },
    /**
     * @description: 获取收费标准
     * @param {*} termsType
     * @return {*}
     */
    async getSystems(termsType) {
      const { code, data } = await this.$u.api.getSystems({ termsType: Number(termsType) });
      if (code === 200) {
        this.refundTipsContent = data.content;
      }
    }
  }
};
</script>

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