<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>
|
