Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website

qiyunfeng-create

2 天以前 5f00696dfb25bc90034448ceb634ed1ef256681a

 src/views/personalCenter/myOrder.vue

@@ -1,3 +1,417 @@
<template>
  <div>我的订单</div>
  <!-- <page> -->
  <div class="personalPage-box">
    <div class="personalPage-title">我的订单</div>
    <div class="personalPage-content">
      <div class="cartClass">
        <el-tabs v-model="order" type="capsule" @tab-click="tabCart">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="待支付" name="payment"></el-tab-pane>
          <el-tab-pane label="已完成" name="complete"></el-tab-pane>
          <el-tab-pane label="已取消" name="cancellation"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="myCarTopPage">
        <div class="cartContent" v-loading="pages.loading">
          <div class="list-box">
            <ul class="listTable" v-if="dataList.length > 0 && !pages.loading">
              <li class="head flex">
                <span class="index">序号</span>
                <span class="clear flex1">商品信息</span>
                <span class="state">商品类型</span>
                <span class="price">价格</span>
              </li>
              <li v-for="item in dataList" :key="item.index">
                <div class="body flex ai-c">
                  <div class="index">{{ item.index }}</div>
                  <div class="list">
                    <div
                      v-for="pItem in item.productList"
                      :key="pItem.id"
                      class="listItem flex ai-c"
                    >
                      <div
                        class="clear hover"
                        @click="
                          goBookDetails(
                            pItem.orderSaleMethod.product.id,
                            pItem.orderSaleMethod.product.name,
                            pItem.orderSaleMethod.product.cmsTypeRefCode,
                            item.remarks,
                            pItem.orderSaleMethod.id
                          )
                        "
                      >
                        <div class="cover fl">
                          <img
                            :src="
                              pItem.orderSaleMethod.product.icon
                                ? getPublicImage(
                                    pItem.orderSaleMethod.product.icon,
                                    '',
                                    ''
                                  )
                                : bookCover
                            "
                            alt=""
                          />
                        </div>
                        <div class="title flex ai-c">
                          {{
                            pItem.orderSaleMethod.type === "defaultSaleMethod" ||
                            pItem.orderSaleMethod.cmsItemList.length == 0
                              ? pItem.orderSaleMethod.product.name
                              : pItem.orderSaleMethod.product.name +
                                "：" +
                                pItem.orderSaleMethod.cmsItemList[0].name
                          }}
                        </div>
                      </div>
                      <span class="state">{{
                        pItem.orderSaleMethod.product.cmsTypeRefCode ==
                        "jsek_digitalTextbooks"
                          ? "数字教材"
                          : pItem.orderSaleMethod.product.cmsTypeRefCode ==
                            "jsek_digitalCourses"
                          ? "数字课程"
                          : pItem.orderSaleMethod.type == "defaultSaleMethod"
                          ? "图书服务-电子书"
                          : pItem.orderSaleMethod.type == "createProductSaleMethod" &&
                            pItem.orderSaleMethod.cmsItemList == 0
                          ? "图书服务-组卷"
                          : pItem.orderSaleMethod.cmsItemList[0].type ==
                            "questionBankFolder"
                          ? "图书服务-云测试"
                          : "图书服务-云学习"
                      }}</span>
                      <div class="price">
                        <span>￥{{ pItem.payPrice.toFixed(2) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="count">
                  <span>订单号: {{ item.orderNumber }}</span>
                  <span v-if="item.createDate">
                    创建时间：
                    <span>{{ item.createDate.slice(0, 10) }}</span>
                    <span style="margin-left: 5px">{{
                      item.createDate.slice(11, 19)
                    }}</span>
                  </span>
                  <span class="right">
                    <span
                      >总计：<span class="main"
                        >￥{{ item.totalPrice.toFixed(2) }}</span
                      ></span
                    >
                    <span class="status yes" v-if="item.state == 'Success'">已完成</span>
                    <span class="status cancel" v-if="item.state == 'Cancel'"
                      >已取消</span
                    >
                    <span class="status cancel" v-if="item.state == 'ReFoundFinished'"
                      >已退款</span
                    >
                    <span class="status" v-if="item.state == 'WaitPay'">
                      <span class="main hover" @click="toPay(item.orderNumber)"
                        >立即支付</span
                      >
                      <span class="grey hover" @click="cancleOrder(item.orderNumber)"
                        >取消订单</span
                      >
                    </span>
                  </span>
                </div>
              </li>
            </ul>
            <div v-if="dataList.length == 0 && !pages.loading">
              <el-empty :image-size="200" description="暂无数据" />
            </div>
          </div>
          <div class="pagination-box" v-if="dataList.length > 0 && !pages.loading">
            <el-pagination
              v-model:current-page="pages.page"
              v-model:page-size="pages.pageSize"
              layout="total, prev, pager, next"
              :total="pages.count"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </page> -->
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, inject, watch } from "vue";
import { ElMessage } from "element-plus";
import { getPublicImage } from "@/assets/js/middleGround/tool.js";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store";
import bookCover from "@/assets/images/personalCenter/book-cover.png";
const router = useRouter();
const userStore = useUserStore();
const MG: any = inject("MG");
let order = ref("all");
let dataList = ref([]);
let queryFilter = reactive([]);
let pages = reactive({
  page: 1,
  pageSize: 5,
  count: 0,
  loading: false,
});

const tabCart = (event: Event) => {
  order.value = event.props.name;
  pages.page = 1;
  dataList.value = [];
  if (order.value == "all") {
    queryFilter.value = [];
  }
  if (order.value == "payment") {
    queryFilter.value = [{ field: "State", value: "WaitPay" }];
  }
  if (order.value == "complete") {
    queryFilter.value = [{ field: "State", value: "Success" }];
  }
  if (order.value == "cancellation") {
    queryFilter.value = [{ field: "State", value: "Cancel" }];
  }
  getDataList();
};
function getDataList() {
  pages.loading = true;
  const data = {
    start: pages.pageSize * pages.page - pages.pageSize,
    size: pages.pageSize,
    filterList: queryFilter.value,
    sort: {
      type: "Desc",
      field: "CreateDate",
    },
  };
  MG.store
    .getUserOrderList(data)
    .then((res) => {
      res.datas.forEach((item, index) => {
        item.index =
          pages.page == 1 ? index + 1 : pages.pageSize * (pages.page - 1) + (index + 1);
        item.productList = item.saleMethodLinks;
        item.time = item.createDate.slice(0, 10) + +item.createDate.slice(11, 20);
      });
      pages.count = res.totalSize;
      dataList.value = [...res.datas];
      console.log("订单列表", res.datas);
      pages.loading = false;
    })
    .catch(() => {
      pages.loading = false;
    });
}

onMounted(() => {
  getDataList();
});

// watch(
//   () => userStore.token,
//   () => {
//     getDataList()
//   }
// )

const handleCurrentChange = (val: number) => {
  pages.page = val;
  getDataList();
};
// 跳转书本详情
const goBookDetails = async (
  id: number,
  name: string,
  refCode: string,
  remarks: string,
  orderSaleMethodId: string
) => {
  let parentData = null;
  let bookId = id;
  if (refCode == "digitalCourses") {
    router.push({
      path: "/bookdetail",
      query: {
        bookId: bookId,
      },
    });
  } else if (refCode == "digitalTextbooks") {
    router.push({
      path: "/bookdetail",
      query: {
        bookId: bookId,
      },
    });
  } else {
    parentData = await MG.store.getProductBySaleMethod({
      saleMethodId: orderSaleMethodId,
    });
    if (parentData.parentProduct.length > 0) {
      bookId = parentData.parentProduct[parentData.parentProduct.length - 1].id;
    }
    router.push({
      path: "/bookdetail",
      query: {
        bookId: bookId,
      },
    });
  }
};
//立即支付
const toPay = (orderNo) => {
  router.push({
    path: "/paymentPage", //要跳转的页面
    query: {
      orderNum: orderNo,
      type: "personalCenter",
    },
  });
};

//取消订单
const cancleOrder = (orderNum) => {
  MG.store.cancelOrder({ orderNum: orderNum }).then(() => {
    ElMessage({
      message: "订单已取消",
      type: "success",
    });
    getDataList();
  });
};
</script>
<style lang="less" scoped>
.cartClass {
  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #019e58;
    height: 1px;
  }

  ::v-deep .el-tabs__item {
    width: 100px;
    padding: 0;
    color: #545c63;
  }

  ::v-deep .is-active {
    background-color: #019e58;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }
}

.listTable {
  .head {
    font-weight: bold;
    padding: 12px 10px;
    background-color: #f3f3f3;

    .flex1 {
      padding: 0 50px;
    }
  }

  .body {
    padding: 15px 10px;
  }

  li {
    line-height: 23px;
    border-bottom: 1px solid #f4f4f4;

    .index {
      // padding: 0 20px;
      text-align: center;
      width: 80px;
      flex-shrink: 0;
    }

    .list {
      .listItem {
        padding-bottom: 10px;

        .clear {
          width: 400px;
          display: flex;
          align-items: center;
        }
      }

      :last-child {
        padding-bottom: 0px;
      }
    }

    .cover {
      box-shadow: 0px 0px 20px 1px #ccc;
      margin-right: 20px;
      width: 130px;
      height: 180px;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .title {
      height: 180px;
      line-height: 180px;
    }

    .state {
      padding: 0 20px;
      width: 230px;
    }

    .price {
      text-align: right;
      padding: 0 20px;
      // width: 100px;
      color: #019e58;
    }

    .count {
      // text-align: right;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background: rgba(205, 207, 219, 0.14);

      .right {
        float: right;
      }

      .cancel {
        color: #949494;
      }

      .status {
        margin-left: 40px;

        span {
          padding: 0 10px;
        }
      }
    }
  }
}

.list-box {
  min-height: 495px;
}

.pagination-box {
  display: flex;
  justify-content: center;
}
</style>