Web_QiCaiYao/pages/order/applyRefund.vue

<template>
  <div class="applyRefund">
    <el-form
      ref="refundForm"
      :model="refundForm"
      label-width="120px"
      label-position="left"
      class="refundForm"
      :rules="refundRules"
    >
      <el-form-item label="退款商品">
        <div class="commodityBox">
          <div v-for="(item,index) in orderData.order_goods" :key="index" style="display:flex">
            <img :src="imgUrl+item.sku_image" alt />
            <div class="commoditytxt">
              <p>{{item.goods_name}}</p>
              <p>
                <!-- <span>商品编号：a0001</span>
                <span>&nbsp;&nbsp;</span>
                <span>规格：10g/袋</span>-->
              </p>
              <!-- <p>产地：北京</p> -->
              <p style="color: #ff2828">￥{{ item.real_goods_money }}</p>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="退款类型" prop="refundtype">
        <el-select
          v-model="refundForm.refundtype"
          placeholder="请选择"
          style="width: 100%"
          size="small"
        >
          <el-option
            v-for="(item) in refundType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退款金额" prop="region">
        <el-input v-model="orderData.order_money" class="refundIpt" size="small" disabled></el-input>
      </el-form-item>
      <el-form-item label="退款原因">
        <el-input type="textarea" placeholder="请输入原因" rows="3" v-model="refundForm.refund_reason"></el-input>
      </el-form-item>
      <el-form-item label="退款说明">
        <el-input type="textarea" placeholder="请输入说明" rows="3" v-model="refundForm.refund_remark"></el-input>
      </el-form-item>
      <!-- <el-form-item label="上传图片" prop="region">
        <UploadImage1 @input="uploadSccess($event, '1')" :value="refundForm.license">
          <template v-slot:upload>
            <div class="upload_BOX">
              <div class="upload">
                <img src="~assets/images/downloadIMG.png" alt />
                <span>上传图片</span>
              </div>
            </div>
          </template>
        </UploadImage1>
      </el-form-item>-->
    </el-form>
  </div>
</template>
<script>
import Setting from "~/setting";
export default {
  props: ["orderData"],
  data() {
    return {
      imgUrl: Setting.uplodBaseURL,
      refundForm: {
        region: "",
        num: undefined,
        refund_reason: "",
        license: "",
        refundtype: undefined,
        refund_remark: ""
      },
      refundType: [
        {
          label: "原路返回",
          value: 1
        }
      ],
      refundRules: {
        refundType: [
          { required: true, message: "请选择退款方式", trigger: "change" }
        ]
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.applyRefund {
  .refundForm {
    width: 600px;
    /deep/ .el-form-item {
      .refundIpt {
        .el-input__inner {
          color: #ff3838;
        }
      }
    }
  }
  .commodityBox {
    display: flex;
    img {
      width: 80px;
      height: 80px;
    }
    .commoditytxt {
      width: 250px;
      p {
        line-height: 30px;
        text-align: left;
        margin-left: 10px;
        font-size: 12px;
      }

      p:first-child {
        font-weight: 600;
        font-size: 16px;
      }
    }
  }
  .upload_BOX {
    width: 70px;
    height: 70px;
    border-radius: 4px;
    border: 1px solid #dddddd;
    text-align: center;
    .upload {
      margin: 10px auto;
      color: #ccc;
      img {
        margin: auto;
        width: 22px;
        height: 20px;
      }
    }
  }
}
</style>