个人中心-接口测试

qiyunfeng-create

2 天以前 b15a997e95d715c41df3a76aecbf58ec1141ab53

 src/views/personalCenter/activeCode.vue

@@ -1,3 +1,397 @@
<template>
    <div>激活码</div>
</template>
  <!-- <page> -->
  <div class="personalPage-box">
    <div class="personalPage-title">激活商品</div>
    <div class="personalPage-content">
      <div class="activation flex">
        <el-input class="inputBox" v-model="activateCode" placeholder="请输入激活码">
          <template #append>
            <el-button
              style="background-color: #019e58; color: #fff"
              @click="userActiveCodeGet"
              :loading="loading"
              >激活</el-button
            >
          </template>
        </el-input>
        <!-- <el-button class="buttonBox" type="primary" @click="userActiveCodeGet" :loading="loading"
          >激活商品</el-button
        > -->
      </div>
      <div class="tipTitle">已激活商品</div>
      <div class="myCarTopPage">
        <div class="cartContent">
          <div class="list-box" v-loading="pages.loading">
            <ul class="listTable" v-if="dataList.length > 0 && !pages.loading">
              <li v-for="item in dataList" :key="item.index">
                <div class="stateBox flex">
                  <span class="flex1"
                    >使用激活码：<span>{{ item.code }}</span></span
                  >
                  <span class="createDate flex1"
                    >激活日期：{{ item.createDate ? item.createDate : "-" }}</span
                  >
                </div>
                <div class="listItemBox flex">
                  <div style="width: 100%" v-if="item.typeList.length > 0">
                    <div
                      v-for="pItem in item.typeList"
                      :key="pItem.id"
                      class="listItem"
                      @click="
                        goBookDetails(pItem.id, pItem.name, pItem.defaultSaleMethodId)
                      "
                    >
                      <div class="cover">
                        <img
                          :src="
                            pItem.icon ? getPublicImage(pItem.icon, '', '') : bookCover
                          "
                          alt=""
                        />
                        <!-- <div class="type" v-if="pItem.type">{{ pItem.type }}</div> -->
                      </div>
                      <div class="info">
                        <div style="margin-bottom: 10px" v-if="pItem.type">
                          {{ pItem.type }}
                        </div>
                        <span :title="pItem.name">{{ pItem.name }}</span>
                      </div>
                    </div>
                  </div>
                  <div v-else class="noProduct">
                    <el-empty :image-size="80" description="无激活商品" />
                  </div>
                </div>
              </li>
            </ul>
            <div v-if="dataList.length == 0 && !pages.loading">
              <el-empty :image-size="200" />
            </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 moment from "moment";
import { getPublicImage } from "@/assets/js/middleGround/tool.js";
import { ElMessage } from "element-plus";
import { useBreadcrumbStore, useUserStore } from "@/store";
import { useRouter } from "vue-router";
import bookCover from "@/assets/images/personalCenter/book-cover.png";
const router = useRouter();
const crumbStore = useBreadcrumbStore();
const userStore = useUserStore();
const MG = inject("MG");
const activateCode = ref("");
const loading = ref(false);
let dataList = ref([]);
let pages = reactive({
  page: 1,
  pageSize: 5,
  count: 0,
  loading: false,
});

// 使用激活码
const userActiveCodeGet = () => {
  loading.value = true;
  let lock = true;
  if (activateCode.value == "") {
    ElMessage({
      type: "error",
      message: "请输入激活码！",
    });
    loading.value = false;
  } else {
    if (lock) {
      lock = false;
      MG.store
        .userActiveCode({
          code: activateCode.value,
        })
        .then((res) => {
          ElMessage({
            type: res == "激活成功" ? "success" : "error",
            message: res,
          });
          activateCode.value = "";
          loading.value = false;
          getDataList();
          lock = true;
        });
    }
  }
};

function getDataList() {
  pages.loading = true;
  MG.store
    .userActiveCodeList({
      start: (pages.page - 1) * pages.pageSize,
      size: pages.pageSize,
      sort: {
        type: "Desc",
        field: "CreateDate",
      },
    })
    .then((res) => {
      let list: any[] = [];
      res.datas.forEach((item) => {
        item.createDate = moment(item.createDate).format("YYYY-MM-DD HH:mm:ss");
        item.typeList = [];
        item.saleMethodList.forEach(async (i) => {
          const obj = {
            icon: item.productList[0]?.icon,
            id: item.productList[0]?.id,
            name: item.productList[0]?.name,
            type:
              i.type == "defaultSaleMethod"
                ? "电子书"
                : i.name.includes("-")
                ? i.name.split("-")[0]
                : i.name,
            defaultSaleMethodId: item.productList[0]?.defaultSaleMethodId,
          };

          let parentData = await MG.store.getProductBySaleMethod({ saleMethodId: i.id });
          if (parentData.storeLinks[0].storeRefCode == "jsek_digitalCourses") {
            obj.type = "数字课程";
          }
          if (parentData.storeLinks[0].storeRefCode == "jsek_digitalTextbooks") {
            obj.type = "数字教材";
          }
          item.typeList.push(obj);
        });
        list.push(item);
      });
      setTimeout(() => {
        dataList.value = list;
        pages.count = res.totalSize;
        pages.loading = false;
      }, 500);
    })
    .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, defaultSaleMethodId: number) => {
  let parentData = await MG.store.getProductBySaleMethod({
    saleMethodId: defaultSaleMethodId,
  });
  console.log(parentData, 123);
  if (parentData.storeLinks[0].storeRefCode == "jsek_digitalCourses") {
    let crumbs = [
      {
        name,
        isCrumbs: true,
        type: "digitalCourses",
        path: "digitalCoursesDetails",
      },
    ];
    // 在全局数据中设置面包屑
    crumbStore.setCrumbs({
      type: "digitalCourses",
      data: crumbs,
      callback: (key: any) => {
        router.push({
          name: "digitalCoursesDetails",
          query: {
            crumbsKey: key,
            bookId: parentData.id,
            bookName: parentData.name,
            type: "digitalCourses",
          },
        });
      },
    });
  } else if (parentData.storeLinks[0].storeRefCode == "jsek_digitalTextbooks") {
    let crumbs = [
      {
        name,
        isCrumbs: true,
        type: "digitalTextbooks",
        path: "digitalTextbooksDetails",
      },
    ];
    // 在全局数据中设置面包屑
    crumbStore.setCrumbs({
      type: "digitalTextbooks",
      data: crumbs,
      callback: (key: any) => {
        router.push({
          name: "digitalTextbooksDetails",
          query: {
            crumbsKey: key,
            bookId: parentData.id,
            bookName: parentData.name,
            type: "digitalTextbooks",
          },
        });
      },
    });
  } else {
    let crumbs = [
      {
        name,
        isCrumbs: true,
        type: "bookService",
        path: "/bookService/details",
      },
    ];
    // 在全局数据中设置面包屑
    crumbStore.setCrumbs({
      type: "bookService",
      data: crumbs,
      callback: (key: any) => {
        router.push({
          name: "bookDetails",
          query: {
            crumbsKey: key,
            bookId: id,
            bookName: name,
            type: "bookService",
          },
        });
      },
    });
  }
};
</script>
<style lang="less" scoped>
::v-deep(.activation) {
  margin-bottom: 30px;
  .el-input__wrapper.is-focus {
    border-color: none !important;
  }
}

.inputBox {
  width: 300px;
  margin-right: 10px;
}

.tipTitle {
  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  padding: 5px 20px;
  box-sizing: border-box;
  border-left: 3px solid #019e58;
  margin-bottom: 20px;
}

.stateBox {
  height: 47px;
  line-height: 47px;
  padding: 0 20px;
  border: 1px solid #edecec;
  background: #f3f3f3;
}

.listItemBox {
  margin-top: 20px;
}

.listItem {
  width: 130px;
  cursor: pointer;
  box-sizing: border-box;
  float: left;
  position: relative;
  margin-right: 5%;

  .cover {
    width: 100%;
    height: 180px;
    box-shadow: 0px 0px 20px 1px #ccc;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .type {
      width: 50px;
      height: 26px;
      text-align: center;
      font-size: 12px;
      line-height: 24px;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #019e58;
      color: #fff;
      border-radius: 0px 0px 0px 5px;
    }
  }

  .info {
    height: 90px;
    padding: 15px 0;
    width: 100%;

    span {
      font-weight: bold;
      height: 45px;
      line-height: 22px;
      display: -webkit-box;
      margin-bottom: 5px;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

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

.createDate {
  text-align: right;
}
.noProduct {
  padding: 30px;
  text-align: center;
}

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