GCLS_Page_Personal/src/components/Personalcenter/OrderManage.vue

<template>
  <!-- 购买记录 -->
  <div class="OrderManage personal-center">
    <EditTitle :title="title" />
    <div class="menuBox">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <!-- 全部 未支付 已支付 已取消-->
        <el-menu-item index="-1">{{ $t("Key110") }}</el-menu-item>
        <el-menu-item index="0">{{ $t("Key111") }}</el-menu-item>
        <el-menu-item index="1">{{ $t("Key112") }}</el-menu-item>
        <el-menu-item index="2">{{ $t("Key113") }}</el-menu-item>
      </el-menu>
      <el-select
        v-model="navValue"
        :placeholder="$t('Key295')"
        @change="changeNav"
      >
        <el-option
          v-for="(item, index) in navList"
          :key="'navList' + index"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select>
    </div>
    <div v-loading="loading" class="list">
      <template v-if="!isEmpty">
        <div class="main" v-for="(item, index) in list" :key="'order' + index">
          <div class="main-top">
            <div class="main-top-left">
              <p
                :class="[
                  'orderTime',
                  language_type == 'AR' ? 'marginLeft' : '',
                ]"
              >
                {{ item.create_time }}
              </p>
              <div class="orderNo">
                <!-- 订单编号 -->
                {{ $t("Key99") }}：<span>{{ item.id }}</span>
              </div>
            </div>
            <template v-if="item.is_pay == 'true' || item.is_cancel == 'true'">
              <img
                src="../../assets/Personalcenter/del-order.png"
                class="del-order"
                @click="deleteMyOrder(item.id)"
              />
            </template>
          </div>
          <div class="main-content">
            <div class="main-content-left" @click="jump(item)">
              <div class="coverUrl">
                <img :src="item.goods_picture_url" />
              </div>
              <div class="order-infor">
                <p class="name">{{ item.goods_name }}</p>
                <Goodstype :item="item" />
                <p class="author" v-if="item.goods_person_name_desc">
                  {{ item.goods_person_name_desc }}
                </p>
              </div>
            </div>
            <div class="main-content-middle">
              <div class="middle-con">
                <!-- 原价 -->
                <span class="middle-con-text">{{ $t("Key104") }}</span>
                <span
                  :class="[
                    'middle-con-p1',
                    language_type == 'AR' ? 'textLeft' : '',
                  ]"
                  >¥{{ item.price }}</span
                >
              </div>
              <div class="middle-con middle-con-discount">
                <!-- 折扣 -->
                <span class="middle-con-text">{{ $t("Key105") }} </span>
                <span
                  :class="[
                    'middle-con-p1',
                    language_type == 'AR' ? 'textLeft' : '',
                  ]"
                  >¥{{ item.discount_money }}</span
                >
                <template v-if="item.discount_code">
                  <!-- 已使用优惠码 -->
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="$t('Key107') + item.discount_code"
                    placement="bottom"
                  >
                    <img
                      src="../../assets/Personalcenter/notice.png"
                      class="notice"
                    />
                  </el-tooltip>
                </template>
              </div>
              <div class="middle-con">
                <!-- 实付 -->
                <span class="middle-con-text">{{ $t("Key106") }}</span>
                <span
                  :class="[
                    'middle-con-p1',
                    'middle-con-p2',
                    language_type == 'AR' ? 'textLeft' : '',
                  ]"
                  >¥{{ item.receivables_money }}</span
                >
              </div>
            </div>
            <div class="main-content-right">
              <p class="order-status" v-if="item.is_pay == 'true'">
                <!-- 交易成功 -->
                <span class="priceText pay">{{ $t("Key100") }}</span>
              </p>
              <template v-else>
                <div class="order-btn" v-if="item.is_cancel == 'true'">
                  <!-- 重新下单 -->
                  <button class="goPay" @click="reOrder(item)">
                    {{ $t("Key117") }}
                  </button>
                  <!-- 交易已取消 -->
                  <span class="priceText cancel-success">{{
                    $t("Key114")
                  }}</span>
                </div>
                <div class="order-btn" v-if="item.is_cancel == 'false'">
                  <!--  -->
                  <template v-if="item.goods_type == 201">
                    <!-- 审核中 -->
                    <span
                      class="pcom_verfiy pcom_verfiy_zhong"
                      v-if="item.audit_status == 0"
                      >{{ $t("Key81") }}</span
                    >
                    <!-- 审核通过 -->
                    <span
                      v-if="item.audit_status == 1"
                      class="pcom_verfiy pcom_verfiy_agree"
                      >{{ $t("Key469") }}</span
                    >
                    <!-- 审核未通过Key470 -->
                    <span
                      v-if="item.audit_status == 2"
                      class="pcom_verfiy pcom_verfiy_failed"
                      >{{ $t("Key470") }}</span
                    >
                  </template>
                  <template v-if="item.goods_type != 201">
                    <!-- 去付款 -->
                    <button class="goPay" @click="goPay(item)">
                      {{ $t("Key471") }}
                    </button>
                  </template>
                  <template v-if="item.goods_type == 201">
                    <button
                      class="goPay"
                      v-if="item.audit_status == 1"
                      @click="goPay(item)"
                    >
                      <!-- 去付款 -->{{ $t("Key471") }}
                    </button>
                    <button class="goPay noPay_ad" v-else>
                      {{ $t("Key471") }}
                    </button>
                  </template>
                  <!-- 取消订单 -->
                  <span class="cancelOrder" @click="cancleMyOrder(item.id)">{{
                    $t("Key102")
                  }}</span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <Empty :navType="navType" />
      </template>
    </div>
    <div class="paging" v-if="!isEmpty">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="pageNum"
        :total="total"
        :page-size="pageSize"
        @current-change="changecurrentPage"
      />
    </div>

    <el-dialog
      class="orderDialog"
      :title="$t('Key52')"
      :visible.sync="isConfirmorder"
      width="720px"
      :before-close="closeConfirmorder"
    >
      <Confirmorder
        ref="Confirmorder"
        :data="goods_Data"
        :changeOrderNumber="changeOrderNumber"
      />
    </el-dialog>
    <el-dialog
      class="orderDialog"
      top="50px"
      :title="$t('Key471') + '：' + orderNumber"
      :visible.sync="isPayment"
      width="720px"
      :before-close="closePayment"
    >
      <Payment
        :data="goods_Data"
        :orderNumber="orderNumber"
        :judgePayResult="judgePayResult"
      />
    </el-dialog>
  </div>
</template>

<script>
import EditTitle from "../common/EditTitle.vue";
import { getLearnWebContent } from "@/api/ajax";
import { jumpPath } from "@/utils/jumpPath";
import Empty from "../common/Empty.vue";
import Goodstype from "../common/Goodstype.vue";
import Confirmorder from "../common/Confirmorder.vue";
import Payment from "../common/Payment.vue";

import { mapGetters } from "vuex";

export default {
  components: { EditTitle, Empty, Goodstype, Confirmorder, Payment },
  props: {},
  data() {
    //这里存放数据
    return {
      title: this.$t("Key65"),
      navType: "5",
      isEmpty: false,
      activeIndex: "-1",
      navValue: "",
      navList: [
        {
          code: "",
          name: this.$t("Key110"), //"全部",
        },
        {
          code: [101],
          name: this.$t("Key61"), //"教材",
        },
        {
          code: [201],
          name: this.$t("Key62"), //"教学课程",
        },
        {
          code: [301, 302, 303],
          name: this.$t("Key63"), //"教培课程",
        },
        {
          code: [401],
          name: this.$t("Key64"), // "教研资料",
        },
      ],
      goods_name: "",
      total: 0,
      pageSize: 5,
      pageNum: 1,
      list: [],
      loading: false,
      orderNumber: "", //订单编号
      goods_Data: null,
      isPayment: false,
      isConfirmorder: false,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapGetters(["language_type"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    jump(item) {
      jumpPath(item);
    },
    // 选择已购买还是待付款
    handleSelect(val) {
      let _this = this;
      _this.activeIndex = val;
      _this.navValue = "";
      _this.pageNum = 1;
      _this.goods_name = "";
      this.getOrderList();
    },
    changeNav() {
      console.log(this.navValue);
      this.getOrderList();
    },
    changecurrentPage(val) {
      this.pageNum = val;
      this.getOrderList();
    },
    //分页查询我的订单列表
    getOrderList() {
      let _this = this;
      _this.loading = true;
      let MethodName = "page_query-PageQueryMyOrderList";
      let data = {
        goods_id_list: [], // 商品 ID 列表，空表示查询所有商品
        goods_type_list: _this.navValue ? _this.navValue : [], // 商品类型列表，具体参看数据字典 6.9，订单商品类型。空表示查询所有类型
        goods_name: _this.goods_name, // 商品名称，模糊查询，空表示查询所有
        page_capacity: _this.pageSize, // 每页容量，最大不能超过 200
        cur_page: _this.pageNum, // 当前查询第几页，页码序号从 1 开始
      };
      if (_this.activeIndex == "-1") {
        //全部
        data.pay_status = -1; //支付状态 -1全部0未支付1已支付
        data.cancel_status = -1; //取消状态 -1 全部 0 未取消 1 已取消(只有未支付的订单才会有取消状态)
      } else if (_this.activeIndex == "0") {
        //未支付
        data.pay_status = 0; //支付状态 -1全部0未支付1已支付
        data.cancel_status = 0; //取消状态 -1 全部 0 未取消 1 已取消(只有未支付的订单才会有取消状态)
      } else if (_this.activeIndex == "1") {
        //已支付
        data.pay_status = 1; //支付状态 -1全部0未支付1已支付
        data.cancel_status = 0; //取消状态 -1 全部 0 未取消 1 已取消(只有未支付的订单才会有取消状态)
      } else if (_this.activeIndex == "2") {
        //已取消
        data.cancel_status = 1; //取消状态 -1 全部 0 未取消 1 已取消(只有未支付的订单才会有取消状态)
      }
      getLearnWebContent(MethodName, data).then((res) => {
        _this.loading = false;
        this.total = res.total_count;
        if (res.order_list && res.order_list.length > 0) {
          let list = res.order_list;
          list = list.map((item) => {
            // item.price = this.handlePrice(item.price);
            // item.discount_money = this.handlePrice(item.discount_money);
            // item.receivables_money = this.handlePrice(item.receivables_money);
            let obj = this.handleGoodsType(item.goods_type);
            item.className = obj.className;
            item.goods_type_root_name = obj.rootName;

            item.isPop = false;
            return item;
          });
          this.list = list;
          console.log(this.list);
          this.isEmpty = false;
        } else {
          this.isEmpty = true;
        }
      });
    },
    handlePrice(price) {
      let priceArr = price.toString().split(".");
      if (priceArr.length > 1 && priceArr[1]) {
      } else {
        price = priceArr[0] + ".00";
      }
      return price;
    },
    handleGoodsType(type) {
      let className = "",
        rootName = "";
      if (type) {
        type = type.toString();
        if (type.indexOf("10") > -1) {
          className = "type10";
          rootName = this.$t("Key44"); //"教材";
        }
        if (type.indexOf("20") > -1) {
          rootName = this.$t("Key62"); //"教学课程";
          className = "type20";
        }
        if (type.indexOf("30") > -1) {
          className = "type30";
          rootName = this.$t("Key63"); //"教培课程";
        }
        if (type.indexOf("40") > -1) {
          className = "type40";
          rootName = this.$t("Key64"); //"教研资料";
        }
      }
      return { className: className, rootName: rootName };
    },
    handlePrice2(price) {
      let str = "";
      price = toString("price");
      if (price.indexOf(".") > -1) {
        let arr = price.split(".");
        str = `<span class="num1">${arr[0]}</span>.<span class="num2">${arr[1]}</span>`;
      } else {
        str = `<span class="num1">${price}</span>.<span class="num2">00</span>`;
      }

      return str;
    },
    close(item) {
      item.isPop = false;
    },
    //取消我的订单
    cancleMyOrder(id) {
      let _this = this;
      let MethodName = "order-order_manager-CancelMyOrder";
      let data = {
        id: id,
      };
      getLearnWebContent(MethodName, data).then((res) => {
        _this.$message.success("取消成功");
        _this.handleSelect(this.activeIndex);
      });
    },
    //删除我的订单
    deleteMyOrder(id) {
      let _this = this;
      _this
        .$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          _this.setDeleteMyOrder(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    setDeleteMyOrder(id) {
      let _this = this;
      let MethodName = "order-order_manager-DeleteMyOrder";
      let data = {
        id: id,
      };
      getLearnWebContent(MethodName, data).then((res) => {
        _this.$message.success("删除成功");
        _this.handleSelect(this.activeIndex);
      });
    },
    //获取订单编号
    changeOrderNumber(
      id,
      back_discount_code,
      discount_money,
      receivables_money
    ) {
      this.orderNumber = id;
      this.isPayment = true;
      this.goods_Data.discount_code = back_discount_code;
      this.goods_Data.discount_money = discount_money;
      this.goods_Data.receivables_money = receivables_money;
    },
    //未支付订单，去购买
    goPay(item) {
      this.isPayment = true;
      this.goods_Data = item;
      this.orderNumber = item.id;
    },
    //重新下单
    reOrder(item) {
      this.isConfirmorder = true;
      this.goods_Data = item;
    },
    closeConfirmorder() {
      this.isConfirmorder = false;
      this.$refs.Confirmorder.clearData();
    },
    closePayment() {
      this.isPayment = false;
      this.$refs.Confirmorder.clearData();
    },
    judgePayResult(bool) {
      this.isPayment = false;
      this.isConfirmorder = false;
      if (bool) {
        this.$message.success("支付成功");
      } else {
        this.$message.warning("支付失败");
      }
      this.getOrderList();
    },
    // 处理价格
    changePrice(type, item) {
      if (item.indexOf(".") != -1) {
        if (type == 1) {
          return item.split(".")[0];
        } else if (type == 2) {
          return "." + item.split(".")[1];
        }
      } else {
        if (type == 1) {
          return item;
        }
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getOrderList();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.OrderManage {
  .menuBox {
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .list {
    width: 100%;
    min-height: 221px;
    margin-bottom: 20px;
    .main {
      width: 100%;
      box-sizing: border-box;
      padding: 0px 0px 0px 32px;
      background: #ffffff;
      box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
      &:hover {
        background: #fff9f1;
      }
      &-top {
        width: 100%;
        height: 53px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px rgba(44, 44, 44, 0.15) solid;
        padding-right: 24px;
        &-left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .orderTime {
            font-weight: bold;
            font-size: 14px;
            line-height: 150%;
            text-align: right;
            color: #2c2c2c;
            margin-right: 16px;
            &.marginLeft {
              margin-right: 0px;
              margin-left: 16px;
            }
          }
          .orderNo {
            font-weight: normal;
            font-size: 14px;
            line-height: 150%;
            color: #2c2c2c;
          }
        }
        .del-order {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
      &-content {
        padding: 16px 0 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        &-left {
          display: flex;
          justify-content: flex-start;
          margin-right: 18px;
          .coverUrl {
            width: 120px;
            height: 120px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            > img {
              max-width: 100%;
              max-height: 100%;
            }
          }
          .order-infor {
            width: 352px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            margin: 0 16px;
            .name {
              max-height: 48px;
              word-break: break-all;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
              overflow: hidden;
              font-weight: normal;
              font-size: 16px;
              line-height: 150%;
              color: #2c2c2c;
            }
            .goodsType {
              min-width: 64px;
              padding: 0 8px;
              box-sizing: border-box;
              height: 24px;
              background: #ffefd8;
              border-radius: 4px;
              margin: 8px 0;
              font-weight: bold;
              font-size: 12px;
              line-height: 24px;
              text-align: center;
              &.type10 {
                background: #ffefd8;
                color: #ff9900;
              }
              &.type20 {
                background: #def6cc;
                color: #73b740;
              }
              &.type30 {
                background: #ecf1ff;
                color: #5079e2;
              }
              &.type40 {
                background: #eee1ff;
                color: #7f43ff;
              }
            }
            .author {
              font-weight: normal;
              font-size: 14px;
              line-height: 150%;
              color: #2c2c2c;
              opacity: 0.65;
            }
          }
        }
        &-middle {
          height: 136px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          padding: 0 48px 0 32px;
          border-width: 0 1px 0 1px;
          border-style: solid;
          border-color: rgba(44, 44, 44, 0.15);
          .middle-con {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            &-discount {
              margin: 16px 0;
            }
            &-text {
              font-weight: normal;
              font-size: 14px;
              line-height: 22px;
              text-align: right;
              color: #2c2c2c;
              margin-right: 8px;
              width: 30px;
            }
            &-p1 {
              width: 72px;
              font-weight: normal;
              font-size: 14px;
              line-height: 22px;
              text-align: right;
              color: #2c2c2c;
              &.textLeft {
                text-align: left;
              }
            }
            &-p2 {
              font-weight: bold;
              color: #ff2727;
            }
            .notice {
              position: absolute;
              right: -20px;
              width: 16px;
              height: 16px;
            }
          }
        }
        &-right {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-end;
          padding: 0 40px;
          .price {
            font-weight: bold;
            font-size: 16px;
            line-height: 150%;
            text-align: right;
            color: #2c2c2c;
            margin-bottom: 8px;
          }
          .order-status {
            display: flex;
            justify-content: center;
            align-items: center;
            > span {
              width: 120px;
              // height: 40px;
              font-weight: normal;
              font-size: 16px;
              // line-height: 40px;
              text-align: center;
              &.noPay {
                color: #ff9900;
              }
              &.pay {
                color: #27c579;
              }
              &.cancel {
                color: #888888;
              }
            }
          }
          .order-btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 136px;

            .cancelOrder {
              height: 40px;
              padding: 0 12px;
              font-weight: normal;
              font-size: 16px;
              // line-height: 40px;
              text-align: center;
              color: #2c2c2c;
              cursor: pointer;
            }
            .pcom_verfiy {
              font-size: 16px;
              // line-height: 40px;
              text-align: center;
              text-transform: uppercase;
              margin-bottom: 8px;
              &_zhong {
                color: #ff9900;
              }
              &_agree {
                color: #27c579;
              }
              &_failed {
                color: #ff3c3c;
              }
            }
            .goPay {
              min-width: 120px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #ff9900;
              border-radius: 4px;
              font-weight: normal;
              font-size: 16px;

              padding: 8px 8px;
              text-align: center;
              text-transform: uppercase;
              color: #ffffff;
              cursor: pointer;
              border: 0;
              outline: 0;
              margin-bottom: 8px;
              &.noPay_ad {
                background: #e5e5e5;
                color: rgba(44, 44, 44, 0.5);
                cursor: default;
              }
            }
            .cancel-success {
              width: 120px;
              height: 40px;
              border-radius: 4px;
              font-weight: normal;
              font-size: 16px;
              // line-height: 40px;
              text-align: center;
              text-transform: uppercase;
              color: #888888;
              cursor: pointer;
              border: 0;
              outline: 0;
              margin-top: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.OrderManage {
  .el-menu.el-menu--horizontal {
    border: 0;
    padding: 0;
  }
  .el-menu--horizontal > .el-menu-item {
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    text-align: center;
    padding: 0;
    margin-right: 24px;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 1px solid #ff9900;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #ff9900;
    color: #fff;
  }
  .menuBox {
    .el-input__inner {
      width: 128px;
      height: 40px;
      background: #ffffff;
      border: 1px solid #d9d9d9;
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 16px;
      color: #2c2c2c;
    }
  }
  .orderDialog {
    .el-dialog__header {
      padding: 32px 20px 24px 32px;
      .el-dialog__title {
        line-height: 150%;
        font-size: 20px;
        color: #000;
      }
    }
    .el-dialog__body {
      padding: 0px 32px 32px 32px;
    }
  }
}
</style>