ronggui-admin/src/views/financeManagement/refundListDetail.vue

<template>
  <div class="app-main-height">
    <el-form ref="form">
      <el-form-item label="所属店铺">
        <span>{{ form.merchantsName }}</span>
      </el-form-item>
      <el-form-item label="订单编号">
        <span>{{ form.orderNum }}</span>
      </el-form-item>
      <el-form-item label="商品名称">
        <span>{{ form.goodsName }}</span>
      </el-form-item>
      <el-form-item label="套餐名称">
        <span>{{ form.comboName }}</span>
      </el-form-item>
      <el-form-item label="购买数量">
        <span>{{ form.comboNum }}</span>
      </el-form-item>
      <el-form-item label="订单金额">
        <span>¥{{ form.settAmount }}</span>
      </el-form-item>
      <el-form-item label="实付金额">
        <span>¥{{ form.payAmount }}</span>
      </el-form-item>
      <el-form-item label="优惠金额">
        <span>¥{{ form.couponsAmout }}</span>
      </el-form-item>
      <el-form-item label="退款金额">
        <span>{{ form.payAmount }}元</span>
      </el-form-item>
      <!------------------------------------------------------------------------------>
      <el-form-item label="支付方式">
      <span>{{ form.paytype==2?"礼品卡支付":form.paytype=='1'?"微信支付":"组合支付" }}</span>
      </el-form-item>
      <el-form-item  label="微信付款"  v-if="form.paytype=='3' && form.wechatPayAmount">
        <span>¥{{form.wechatPayAmount || 0}}</span>
      </el-form-item>
      <el-form-item label="礼品卡付款"  v-if="form.paytype=='3' && form.giftCardsPayAmount">
        <span>¥{{form.giftCardsPayAmount || 0}}</span>
      </el-form-item>
      <!------------------------------------------------------------------------------>
      <el-form-item label="付款时间">
        <span>{{ form.payTime }}</span>
      </el-form-item>
      <el-form-item label="申请退款时间">
        <span>{{ form.refundTime }}</span>
      </el-form-item>
      <el-form-item label="店铺退款时间">
        <span>{{ form.merchantsRefundTime }}</span>
      </el-form-item>
      <el-form-item label="退款状态">
        <span style="color:red">{{ form.orderState | toState(form.orderState) }}</span>
      </el-form-item>
      <el-form-item label="退款原因">
        <span>{{ form.refundReason }}</span>
      </el-form-item>
      <el-form-item label="具体说明">
        <span>{{ form.refundDesc }}</span>
      </el-form-item>
      <el-form-item label="收货人">
        <span>{{ form.consignee }}</span>
      </el-form-item>
      <el-form-item label="手机号码">
        <span>{{ form.phone }}</span>
      </el-form-item>
      <el-form-item label="微信名" style="display:flex;">
        <span>{{ form.wxName }}</span>
        <el-avatar :size="60">
          <img :src="form.wxImage">
        </el-avatar>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">
        返回
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UserManagementEdit',
  filters: {
    textFilter(status) {
      const statusMap = {
        0: '未结算',
        1: '已结算'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        orderNum: '',
        goodsName: '',
        comboName: '',
        comboPrice: '',
        comboNum: '',
        orderAmount: '',
        orderState: '',
        refundReason: '',
        createTime: '',
        refundTime: '',
        consignee: '',
        phone: '',
        wxName: '',
        courierNum: ''
      },
      title: '',
      dialogFormVisible: false,
      row: '',
      md: ''
    }
  },
  created() {
    // console.log(this.$route.query.orderID)
    this.form.orderID = this.$route.query.orderID
    this.getDetails(this.form)
  },
  methods: {
    showEdit(row, md) {
      this.title = '查看详情'
      this.md = md
      this.getDetails(row)
      this.dialogFormVisible = true
    },
    close() {
      this.$router.go(-1)
    },
    getDetails(row) {
      const params = {
        type: 'getOrderDetails',
        data: {
          orderID: row.orderID
        }
      }
      this.$http
        .post(this.$api.getOrderDetails, params)
        .then((res) => {
          // console.log('查看订单详情')
          // console.log(res)
          this.form = res
        })
    }
  },
  // 缓存搜索页面
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true
    next()
  }
}
</script>
<style lang="scss" scoped>

::v-deep .el-form-item{
  border-bottom: 1px solid #EBEEF5;
  .el-form-item__label{
    text-align: left;
    padding: 0 50px 0 0;
    width: 140px;
   }
}
</style>