merchant-web/src/views/modules/operation-management/order/popup/view-details.vue

<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <div slot="dialog__content">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="总订单号：">
                <span>{{ ruleForm.orderNo }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="	结算单位订单号：">
                <span>{{ ruleForm.unitOrderNo }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="总商品数量：">
                <span>{{ ruleForm.productCount }}</span>
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="顾客支付：">
                <span>{{ ruleForm.totalMoney }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="配送费：">
                <span>{{ ruleForm.deliveryMoney }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="优惠券减免：">
                <span>{{ ruleForm.couponMoney }}</span>
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="下单时间：">
                <span>{{ ruleForm.payTime }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="预计送达时间：">
                <span>{{ ruleForm.predictDeliveryTime }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="预计收入：">
                <span>{{ ruleForm.predictIncome }}</span>
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="距离：">
                <span>{{ ruleForm.distance }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="预计自动取消时间：">
                <span>{{ ruleForm.predictAutoCancelTime }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="备注：">
                <span>{{ ruleForm.remark }}</span>
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="包装费：">
                <span>{{ ruleForm.packageMoney }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="平台服务费：">
                <span>{{ ruleForm.platformMoney }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="备餐完成时间：">
                <span>{{ ruleForm.completePrepareTime }}</span>
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="开始配送时间：">
                <span>{{ ruleForm.startDeliveryTime }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="配送完成时间：">
                <span>{{ ruleForm.completeDeliveryTime }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="订单退款状态：">
                <span>{{ getRefundStatus(ruleForm.refundStatus) }}</span>
              </el-form-item></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="申请退款原因：">
                <span>{{ ruleForm.refundReason }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <el-form-item label="申请退款时间：">
                <span>{{ ruleForm.applyRefundTime }}</span>
              </el-form-item></el-col
            >
            <el-col :span="8">
              <!-- <el-form-item label="配送方式：">
                <span>{{ ruleForm.deliveryType }}</span>
              </el-form-item> -->
            </el-col>
          </el-row>
          <div style="padding: 0 0 0 20px; font-size: 16px; font-weight: 600">
            订单商品
          </div>
          <div style="padding: 20px">
            <div style="border-top: 1px solid #ccc; padding: 10px 0 0 0">
              <el-table
                border
                ref="multipleTable"
                :data="ruleForm.productOrders"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  prop="shopName"
                  align="center"
                  label="店铺名称"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  label="商品名称"
                  prop="productName"
                />
                <el-table-column
                  align="center"
                  label="商品图片"
                  prop="productImg"
                >
                  <template slot-scope="scope">
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="scope.row.productImg"
                      :preview-src-list="[scope.row.productImg]"
                    >
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="规格"
                  prop="productSpecName"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  label="商品原价"
                  prop="originPrice"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  label="商品终价"
                  prop="finalPrice"
                  width="120"
                />
                <el-table-column
                  prop="productOrderMoney"
                  align="center"
                  label="商品订单金额"
                  width="200"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-form>
      </div>
      <!-- 选择商品 -->
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
export default {
  components: {},
  props: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "订单详情",
        show: false,
        width: "1200px",
        fullscreen: true,
      },
      modalData: {},
      ruleForm: {},
      tableData: [],
    };
  },
  watch: {
    // "modalConfig.show"(newVal) {
    //   if (newVal) {
    //     //关闭弹窗清空校验
    //     setTimeout(() => {
    //       this.$refs.ruleForm.resetFields();
    //     });
    //   }
    // },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: () => {
          this.modalConfig.title = "订单详情";
          this.isAdd = true;
        },
        update: () => {
          this.modalConfig.title = "订单详情";
          this.isAdd = false;
        },
      };
    },
    init(row) {
      console.log(row);
      this.ruleForm = row;
    },
    handleSelectionChange(e) {
      console.log(e);
    },
    getRefundStatus(val) {
      if (val == 0) {
        return "正常";
      } else if (val == 1) {
        return "退款中";
      } else if (val == 2) {
        return "完全退款";
      } else if (val == 3) {
        return "部分退款";
      } else if (val == 4) {
        return "拒绝用户退款";
      } else if (val == -1) {
        return "退款失败";
      } else if (val == -2) {
        return "用户申请退款中";
      }
    },
  },
  computed: {
    modalHandles() {
      return [
        {
          label: "关闭",
          handle: () => {
            this.toggle();
          },
        },
        // {
        //   label: "确认",
        //   type: "primary",
        //   // submit: true,
        //   handle: () => {
        //   },
        // },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>