recycle-mobile/src/pages/mine/myBuy/return.vue

<template>
  <!-- #ifdef H5 -->
  <zj-page-layout
    :hasFooter="true"
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
  >
    <view class="goods-container">
      <view class="title">商品信息</view>
      <view class="goods">
        <image :src="$imageUrl + form.goodsPicUrl"></image>
        <view class="main">
          <view class="name">{{ form.goodsTitle }}</view>
          <view class="des">{{ form.goods.content }}</view>
          <view class="price"
            ><text>¥{{ form.goodsAmount }}</text
            >x{{ form.num }}</view
          >
        </view>
      </view>
      <view class="total"
        >订单总金额<text>¥{{ form.price }}</text></view
      >
    </view>

    <view class="form-container">
      <view class="title">退货信息填写</view>
      <view class="radio">
        <view class="label"><text style="color: red">*</text>选择类型</view>
        <u-radio-group  v-model="formdata.applyType" placement="row">
          <u-radio label="仅退款" activeColor="#01C30B" name="REFUND"></u-radio>
        </u-radio-group>
      </view>
      <view class="content">
        <view class="label"><text style="color: red">*</text>退货原因</view>
        <u--textarea
          style="backgroundColor: #fff"
          :disabled="showDisable"
          v-model="formdata.applyNote"
          placeholder="请输入内容"
        ></u--textarea>
      </view>
      <view class="content">
        <view class="label">上传图片(最多9张)</view>
      </view>
      <br />
      <zj-upload :disabled="showDisable" key="cp" @getFiles="getFiles" :fileList="fileList" :count="9" />
    </view>

    <view v-if="['REFUND', 'NO_REFUND'].indexOf(form.status) != -1" class="form-container">
      <view class="title">处理结果</view>
      <view class="row">
        <view class="label">处理状态:</view>
        <view class="value">{{
          form.status === 'REFUND' || form.status === 'NO_REFUND' ? '已处理' : '待平台处理中'
        }}</view>
      </view>
      <view class="row">
        <view class="label">处理结果</view>
        <view class="value">{{
          form.status === 'REFUND' ? '退款成功' : form.status === 'NO_REFUND' ? '不退款' : ''
        }}</view>
      </view>
      <view class="row">
        <view class="label">退款金额</view>
        <view class="value">¥{{ form.refundPrice }}</view>
      </view>
      <view class="row">
        <view class="label">备注信息</view>
        <view class="value">{{ form.refundRemark }}</view>
      </view>
    </view>

    <template slot="footer">
      <view class="bottom-container">
        <u-button v-if="showDisable" @click="back" text="返回" type="primary" shape="circle"></u-button>
        <u-button v-else :disabled="disabled" @click="apply" text="提交申请" type="primary" shape="circle"></u-button>
      </view>
    </template>
  </zj-page-layout>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/pages/mine/myBuy/return`, pam, crossPagePam)"  @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
import zjUpload from '@/components/zj-upload/index.vue'
import { tr } from '@dcloudio/vue-cli-plugin-uni/packages/postcss/tags'
export default {
  // #ifndef H5
  data() {
    return {
      pam: {}
    }
  },

  onLoad(pam) {
    this.pam = pam
  },
  // #endif
  // #ifdef H5
  components: {
    zjUpload
  },
  data() {
    return {
      disabled: false,
      type: 1,
      content: '',
      refresherTriggered: false,
      form: {
        goods: {}
      },
      formdata: {
        applyType: 'REFUND',
        applyNote: ''
      },
      showDisable: false,
      fileList: [],
      fileurl: [],
      orderId: ''
    }
  },
  onLoad({ orderId }) {
    this.orderId = orderId
    this.getDetail()
  },
  onShow() {
  },
  methods: {
    back() {
      // uni.navigateBack()
       this.$navToPage(
              {
                url: ''
              },
              'navigateBack'
            )
    },
    getFiles(value) {
      this.fileurl = []
      value.forEach(v => {
        this.fileurl.push(v)
      })
    },
    //
    apply() {
      if (!this.formdata.applyNote) {
        this.$toast('缺少必要参数，请检查')
        return
      }
      this.disabled = true
      let params = {
        ...this.formdata,
        orderId: this.orderId,
        refundFile: this.fileurl.toString()
      }
      this.$toast('正在申请售后中...')
      setTimeout(() => {
        this.$api
          .postJson('/refundOrder/apply', params)
          .then(res => {
            this.disabled = false
            this.$navToPage(
              {
                url: '/pages/mine/myBuy/list'
              },
              'redirectTo'
            )
          })
          .catch(err => {
            this.disabled = false
          })
      }, 1000)
    },
    //
    getDetail() {
      this.$api
        .postJson('/refundOrder/detail', {
          orderId: this.orderId
        })
        .then(res => {
          this.form = res.data
          this.fileList = res.data.orderRefundFileList.map(v => v.imgUrl)
          if (['AFTER_WAIT', 'REFUND', 'NO_REFUND'].indexOf(res.data.status) !== -1) {
            this.showDisable = true
          }
        })
        .catch(err => {
        })
        .finally(() => {
          this.refresherTriggered = false
        })
    },
    refresherrefresh() {
      this.refresherTriggered = true
      this.getDetail()
    }
  }
  // #endif
}
</script>

<style lang="scss" scoped>
.goods-container {
  background: #ffffff;
  margin-top: 30rpx;
  padding: 30rpx 30rpx 0;
  .title {
    font-weight: 500;
  }
  .goods {
    display: flex;
    padding: 30rpx 0;
    image {
      width: 120rpx;
      height: 120rpx;
    }
    .main {
      flex: 1;
      margin-left: 20rpx;
      .name {
        font-size: 32rpx;
      }
      .des {
        margin-top: 12rpx;
        font-size: 28rpx;
        color: $reg-font;
      }
      .price {
        margin-top: 12rpx;
        text {
          color: $assist-color;
          font-weight: 500;
          font-size: 32rpx;
          margin-right: 12rpx;
        }
      }
    }
  }
  .total {
    border-top: 1px solid #eaeaea;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 28rpx;
    text {
      margin-left: 12rpx;
      color: $assist-color;
    }
  }
}

.form-container {
  background: #ffffff;
  margin-top: 30rpx;
  padding: 30rpx;
  .title {
    font-weight: 500;
  }
  .label {
    color: $sec-font;
    flex-shrink: 0;
    margin-right: 30rpx;
  }
  .radio {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
  }
  .content {
    display: flex;
    margin-top: 30rpx;
  }
  .row {
    display: flex;
    margin-top: 30rpx;
  }
}

.bottom-container {
  padding: 20rpx 30rpx;
}
</style>