HM21St_Page_User/src/views/personalCenter/components/OrderList.vue

<template>
  <div class="my-share personal-info">
    <h2>订单管理</h2>
    <el-table
      :data="orderList"
      @sort-change="handleSort"
      :default-sort="dataSort"
      v-loading="tableLoading"
      :max-height="tableHeight"
    >
      <el-table-column
        type="index"
        label="#"
        width="48"
        :index="(pageNumber - 1) * pageSize + 1"
      >
      </el-table-column>
      <el-table-column prop="sn" label="交易单号" width="200">
      </el-table-column>
      <el-table-column
        prop="pay_time"
        label="交易时间"
        width="180"
        sortable="custom"
      >
        <template slot-scope="scope">
          {{ scope.row.pay_time ? scope.row.pay_time.substring(0, 16) : "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="购买商品" min-width="220">
      </el-table-column>
      <el-table-column label="类型" width="72">
        <template slot-scope="scope" v-if="scope.row.goods_type >= 0">
          <span
            class="items-type"
            :style="{
              background: typeList[scope.row.goods_type]
                ? typeList[scope.row.goods_type].bg
                : '',
              color: typeList[scope.row.goods_type]
                ? typeList[scope.row.goods_type].color
                : '',
            }"
            >{{
              typeList[scope.row.goods_type]
                ? typeList[scope.row.goods_type].text
                : "-"
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="goods_study_phase_name" label="学段" width="64">
      </el-table-column>
      <el-table-column prop="study" label="价格" width="154">
        <template slot-scope="scope">
          <span class="currectPrice"
            >￥{{
              scope.row.hasOwnProperty("goods_price_discount")
                ? scope.row.goods_price_discount
                : scope.row.goods_price | cutMoneyFiter
            }}</span
          >
          <span
            class="oldPrice"
            v-if="
              scope.row.hasOwnProperty('goods_price_discount') &&
              scope.row.goods_price_discount !== scope.row.goods_price
            "
            >(￥{{ scope.row.goods_price | cutMoneyFiter }})</span
          >
        </template>
      </el-table-column>
      <el-table-column label="兑换码" width="194">
        <template slot-scope="scope">
          <template v-if="scope.row.is_use_discount_code == 'false'">
            无
          </template>
          <template v-else>
            <template v-if="scope.row.discount_code">
              <span class="code" :id="'copy-' + scope.row.discount_code">{{
                scope.row.discount_code
              }}</span>
              <svg-icon
                icon-class="copy"
                class="copy"
                @click="CopyToClipboard('copy-' + scope.row.discount_code)"
              ></svg-icon>
            </template>
            <template v-else>-</template>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="支付金额" width="96">
        <template slot-scope="scope">
          <span>￥{{ scope.row.order_amount | cutMoneyFiter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="pay_type_name" label="支付渠道" width="104">
      </el-table-column>
      <el-table-column prop="status" label="交易状态" width="112">
        <template slot-scope="scope">
          <div class="status-box">
            <span
              :style="{ background: statusList[scope.row.order_status].bg }"
            ></span>
            <b
              :style="{ color: statusList[scope.row.order_status].textColor }"
              >{{ scope.row.order_status_name }}</b
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="退款申请状态" width="112">
        <template
          slot-scope="scope"
          v-if="scope.row.is_has_refund_apply === 'true'"
        >
          <div class="status-box">
            <span
              :style="{
                background: refundStatusList[scope.row.refund_apply_status].bg,
              }"
            ></span>
            <b
              :style="{
                color:
                  refundStatusList[scope.row.refund_apply_status].textColor,
              }"
              >{{ refundStatusList[scope.row.refund_apply_status].text }}</b
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="refund_apply_submit_time"
        label="退款申请时间"
        width="165"
      >
      </el-table-column>
      <el-table-column prop="refund_amount" label="退款金额" width="100">
        <template slot-scope="scope" v-if="scope.row.refund_apply_status === 2">
          <span>￥{{ scope.row.refund_amount | cutMoneyFiter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="操作" width="140" fixed="right">
        <template slot-scope="scope">
          <template
            v-if="
              scope.row.is_use_discount_code == 'false' &&
              scope.row.order_status === 1
            "
          >
            <a class="apply" @click="handleApply(scope.row, scope.$index)"
              >申请退款</a
            >
          </template>
          <template
            v-if="
              scope.row.order_status === 1 ||
              scope.row.order_status === 2 ||
              (scope.row.order_status === 3 &&
                scope.row.order_amount !== scope.row.refund_amount)
            "
          >
            <a class="apply" @click="handleToShlef">去查看</a>
          </template>
          <!-- <template v-if="scope.row.operate==='3'">
                    <a class="order-detail"><svg-icon icon-class="question-line"></svg-icon>详情</a>
                </template>
                <template v-if="scope.row.operate==='4'">
                    <a class="order-detail"><svg-icon icon-class="question-line"></svg-icon>详情</a>
                    <a class="apply">申请退款</a>
                </template> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total, prev, pager, next, sizes, jumper"
      :total="total_count"
    >
    </el-pagination>
    <div
      class="kefu-box"
      v-if="kefuShow"
      @mouseover="kefuCode = true"
      @mouseleave="kefuCode = false"
    >
      <div v-if="kefuCode" style="background: #ffffff">
        <img src="../../../assets/21st-kefu-code.jpg" />
        <span>扫一扫，添加客服微信</span>
      </div>

      <div v-else>
        <img class="kefu-img" src="../../../assets/kefu.png" />
        <span style="color: #ff3333; font-weight: bold; font-size: 16px"
          >客服咨询入口</span
        >
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { cutMoneyFiter } from "@/utils/defined";
import { getLogin } from "@/api/ajax";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: [],
  filters: {
    cutMoneyFiter,
  },
  data() {
    //这里存放数据
    return {
      pageSize: 10,
      pageNumber: 1,
      statusList: {
        1: {
          text: "支付成功",
          bg: "#00B42A",
          textColor: "#1D2129",
        },
        2: {
          text: "兑换成功",
          bg: "#165DFF",
          textColor: "#1D2129",
        },
        4: {
          text: "已退款",
          textColor: "#0FC6C2",
          bg: "#0FC6C2",
        },
        5: {
          text: "支付失败",
          bg: "#EF21DA",
          textColor: "#EF21DA",
        },
        3: {
          text: "已撤回",
          bg: "#FF7D00",
          textColor: "#1D2129",
        },
        0: {
          text: "未支付",
          bg: "#F53F3F",
          textColor: "#F53F3F",
        },
      },
      refundStatusList: {
        2: {
          text: "审核通过",
          bg: "#00B42A",
          textColor: "#1D2129",
        },
        0: {
          text: "待审核",
          bg: "#165DFF",
          textColor: "#1D2129",
        },
        1: {
          text: "驳回",
          bg: "#FF7D00",
          textColor: "#1D2129",
        },
      },
      typeList: {
        2: {
          text: "报纸",
          color: "#165DFF",
          bg: "#E8F7FF",
        },
        4: {
          text: "画刊",
          color: "#F53F3F",
          bg: "#FFECE8",
        },
        3: {
          text: "精读",
          color: "#0FC6C2",
          bg: "#E8FFFB",
        },
        0: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        1: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        // '5':{
        //     text:'报纸专辑',
        //     color:'#165DFF',
        //     bg:'#E8F7FF'
        // },
        // '6':{
        //     text:'画刊专辑',
        //     color:'#F53F3F',
        //     bg:'#FFECE8'
        // }
      },
      orderList: [],
      total_count: 0,
      dataSort: {
        prop: "pay_time",
        order: "descending",
      },
      tableLoading: false,
      tableHeight: "", // 表格高度
      kefuShow: true, // 是否显示客服
      kefuCode: false, // 显示客服二维码
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 260; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    handleSort(value) {
      let dataSort = {
        prop: value.prop,
        order: value.order,
      };
      this.dataSort = dataSort;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNumber = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getList();
    },
    CopyToClipboard(element) {
      var doc = document,
        text = doc.getElementById(element),
        range,
        selection;
      if (doc.body.createTextRange) {
        range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) {
        selection = window.getSelection();
        range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
      document.execCommand("copy");
      this.$message({
        message: "复制成功",
        type: "success",
      });
      window.getSelection().removeAllRanges();
    },
    getList() {
      this.tableLoading = true;
      let MethodName = "/ShopServer/Client/OrderManager/PageQueryMyOrderList";
      let order_column_list = [];
      if (this.dataSort != {}) {
        if (this.dataSort.order == "descending") {
          order_column_list = [this.dataSort.prop + ":desc"];
        } else if (this.dataSort.order == "ascending") {
          // 升序不传值
          order_column_list = [this.dataSort.prop];
        }
      } else {
        order_column_list = ["pay_time:desc"];
      }
      let data = {
        page_capacity: this.pageSize,
        cur_page: this.pageNumber,
        order_column_list: order_column_list,
        pay_status: 1,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.tableLoading = false;
          if (res.status === 1) {
            this.orderList = res.order_list;
            this.total_count = res.total_count;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 申请退款
    handleApply(obj, index) {
      let data = {
        order_id: obj.id,
      };
      getLogin(
        "/ShopServer/Client/OrderManager/CheckOrderIsCanSubmitRefundApply",
        data
      ).then((res) => {
        if (res.status === 1) {
          if (res.is_can_submit_refund_apply === "true") {
            this.$confirm("确定申请退款吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                let Mname =
                  "/ShopServer/Client/OrderManager/SubmitOrderRefundApply";

                getLogin(Mname, data).then((res) => {
                  if (res.status === 1) {
                    this.$message({
                      type: "success",
                      message: "申请成功!",
                    });
                    this.getList();
                  }
                });
              })
              .catch(() => {});
          } else {
            this.$confirm(res.cannot_submit_reason, "不可退款原因", {
              confirmButtonText: "确定",
              showCancelButton: false,
              type: "warning",
            });
          }
        }
      });
    },
    handleToShlef() {
      this.$router.push({ path: "/bookShelf" });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getTableHeight();
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.my-share {
  background: #ffffff;
  border-radius: 4px;
  padding: 24px;
  h2 {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #1d2129;
    margin: 0;
  }
  .el-table {
    margin: 24px 0;
    max-width: 100%;
  }
  .el-pagination {
    text-align: right;
  }
  .status-box {
    display: flex;
    align-items: center;
    span {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      margin-right: 8px;
      margin-top: 2px;
    }
    b {
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      color: #1d2129;
    }
  }
  .order-detail {
    color: #165dff;
    margin-right: 8px;
  }
  .apply {
    font-size: 14px;
    line-height: 22px;
    color: #165dff;
    margin-right: 10px;
    font-weight: 500;
  }
  .items-type {
    padding: 1px 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    border-radius: 2px;
  }
  .oldPrice {
    color: #86909c;
    margin-left: 8px;
  }
  .code {
    color: #175dff;
  }
  .copy {
    color: #c9cdd4;
    margin-left: 8px;
    cursor: pointer;
  }
  .kefu-box {
    position: fixed;
    right: 0;
    bottom: 300px;
    z-index: 3;
    text-align: center;
    cursor: pointer;
    img {
      width: 150px;
    }
    .kefu-img {
      width: 70px;
    }
    span {
      display: block;
      text-align: center;
      font-size: 12px;
      line-height: 1.4;
    }
  }
}
</style>