<template>
|
<div class="page">
|
<div class="topBox">
|
<div class="searchBox">
|
<el-input
|
class="custom-input"
|
placeholder="请输入内容"
|
v-model="searchText"
|
@keyup.enter="searchBook"
|
>
|
<template #suffix>
|
<el-icon @click="searchBook"><Search /></el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="manageBox">
|
<div class="manageItem hover" @click="activateShow">
|
<img :src="jihe" />
|
<div class="label">激活</div>
|
</div>
|
<div class="manageItem">
|
<img :src="jihe" />
|
<div class="label">管理</div>
|
</div>
|
<div class="manageItem">
|
<img :src="jihe" />
|
<div class="label">更多教材</div>
|
</div>
|
</div>
|
</div>
|
<div class="content">
|
<div class="list-box" v-loading="pages.loading">
|
<el-row :gutter="20" v-if="dataList.length > 0">
|
<el-col :span="6" v-for="(item, index) in dataList" :key="index">
|
<div
|
class="textbook-body-box hover"
|
@click="goBookDetails(item)"
|
>
|
<div class="book-img">
|
<img :src="getPublicImage(item.product.icon, '', '')" alt="" />
|
</div>
|
<div class="books-info">
|
<p class="book-title" :title="item.product.name">{{ item.product.name }}</p>
|
<p class="flex jc-sb">
|
<!-- <span class="author" :title="item.author">{{ item.author }}</span>
|
<span class="price" v-if="item.price == 0">免费</span>
|
<span class="price" v-else>￥{{ item.price.toFixed(2) }}</span> -->
|
</p>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div v-if="dataList.length == 0 && !pages.loading" class="noData">
|
<el-empty :image-size="200" description="暂无数据" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
title="激活教材"
|
align-center
|
v-model="activateData.dialog"
|
:before-close="activateClose"
|
width="400"
|
class="activateDialog"
|
>
|
<div class="formBox">
|
<span class="label">激活码</span>
|
<el-input v-model="activateData.code" placeholder="请输入激活码"></el-input>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="activateClose">取 消</el-button>
|
<el-button type="primary" @click="userActiveCodeGet" :loading="activateData.loading"
|
>确 定</el-button
|
>
|
</span>
|
</template>
|
</el-dialog>
|
</template>
|
<script setup lang="ts">
|
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
|
import { ref, onMounted, inject, reactive } from 'vue'
|
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
|
const router = useRouter()
|
const MG: any = inject('MG')
|
|
import jihe from '@/assets/images/menu/jihe.png'
|
|
const searchText = ref('')
|
let dataList = ref([])
|
let pages = reactive({
|
page: 1,
|
pageSize: 10,
|
count: 0,
|
loading: false
|
})
|
onMounted(() => {
|
getDataList()
|
})
|
|
const searchBook = () => {}
|
|
const getDataList = () => {
|
pages.loading = true
|
const searchData = [
|
{
|
keywords: 'jsek_digitalTextbooks',
|
field: 'ProductType'
|
}
|
]
|
const data = {
|
Size: pages.pageSize,
|
Start: pages.pageSize * pages.page - pages.pageSize,
|
sort: {
|
type: 'Desc',
|
field: 'CreateDate'
|
},
|
searchList: searchData
|
}
|
MG.store.getPurchasedProductList(data).then((res) => {
|
dataList.value = res.datas
|
pages.count = res.totalSize
|
pages.loading = false
|
})
|
}
|
|
// 跳转书本详情
|
const goBookDetails = (item) => {
|
console.log(item)
|
router.push({
|
name: 'home',
|
query: {
|
bookId: item.refCode,
|
}
|
})
|
// window.open(config.textReaderUrl+ '?bookId=' + item.product.refCode + "&token=" + localStorage.getItem('token'))
|
}
|
|
//.。激活商品
|
const activateData = reactive({
|
loading:false,
|
dialog: false,
|
code:"",
|
})
|
const activateShow =()=>{
|
activateData.dialog = true
|
}
|
const activateClose =()=>{
|
activateData.dialog = false
|
}
|
// 使用激活码
|
const userActiveCodeGet = () => {
|
let lock = true;
|
if (activateData.code == "") {
|
ElMessage({
|
type: "error",
|
message: "请输入激活码！",
|
});
|
} else {
|
if (lock) {
|
lock = false;
|
MG.store
|
.userActiveCode({
|
code: activateData.code,
|
})
|
.then((res) => {
|
ElMessage({
|
type: res == "激活成功" ? "success" : "error",
|
message: res,
|
});
|
getDataList();
|
lock = true;
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.page {
|
width: 100%;
|
height: 100%;
|
padding: 20px;
|
.topBox {
|
display: flex;
|
.searchBox {
|
padding: 0 40px;
|
.el-input .el-input__wrapper {
|
width:220px;
|
border-radius: 20px !important;
|
height: 34px;
|
background: #ffffff;
|
}
|
}
|
.manageBox {
|
display: flex;
|
.manageItem {
|
margin: 0 15px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
width: 24px;
|
height: 24px;
|
}
|
.label {
|
min-width: 40px;
|
padding-left: 10px;
|
}
|
}
|
}
|
}
|
.content {
|
padding: 40px;
|
min-width:1200px;
|
.textbook-body-box {
|
display: flex;
|
.book-img {
|
width: 130px;
|
height: 180px;
|
box-shadow: 0px 0px 20px 1px #ccc;
|
position: relative;
|
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
|
.books-info {
|
padding: 15px;
|
flex:1;
|
.book-title {
|
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;
|
}
|
}
|
}
|
}
|
.noData {
|
margin: 100px auto;
|
}
|
}
|
.activateDialog{
|
.formBox{
|
display:flex;
|
align-items: center;
|
.label{
|
width:80px;
|
}
|
}
|
|
}
|
</style>
|
