<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: #144941; 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 ? pItem.icon : bookCover" alt="" />
|
</div>
|
<div class="info">
|
<div class="bookType" style="margin-bottom: 10px" v-if="pItem.type">
|
{{ pItem.type }}
|
</div>
|
<span class="title" :title="pItem.name">{{ pItem.name }}</span>
|
<span class="author" v-if="pItem.author">{{ pItem.author }}</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 { useRouter } from 'vue-router'
|
import bookCover from '@/assets/images/personalCenter/book-cover.png'
|
const router = useRouter()
|
const MG: any = 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',
|
},
|
fields: {
|
author: [],
|
},
|
})
|
.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, index) => {
|
const author = item.productList[index]?.dataList?.find((citem) => {
|
return citem.data.sequenceNum == '007EB8E7' && citem.data.value
|
})?.data?.value
|
const obj = {
|
icon: getPublicImage(item.productList[index]?.icon, '', '150'),
|
id: item.productList[index]?.id,
|
name: item.productList[index]?.name,
|
author,
|
type: '数字教材',
|
defaultSaleMethodId: item.productList[index]?.defaultSaleMethodId,
|
}
|
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) => {
|
router.push({
|
path: '/bookdetail',
|
query: {
|
bookId: id,
|
},
|
})
|
}
|
</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: 40px;
|
line-height: 40px;
|
padding: 0 20px;
|
border: 1px solid #edecec;
|
background: #edf4f2;
|
.flex1 span {
|
color: #000;
|
}
|
}
|
|
.listItemBox {
|
margin-top: 20px;
|
}
|
|
.listItem {
|
cursor: pointer;
|
box-sizing: border-box;
|
float: left;
|
position: relative;
|
margin-right: 3%;
|
width: 185px;
|
min-height: 258px;
|
background: rgba(255, 255, 255, 0.3);
|
border-radius: 8px 8px 8px 8px;
|
border: 1px solid #dedede;
|
padding: 20px 10px;
|
box-sizing: border-box;
|
margin-bottom: 20px;
|
|
.cover {
|
width: 116px;
|
height: 150px;
|
border-radius: 0px 0px 0px 0px;
|
border: 1px solid #019e58;
|
position: relative;
|
margin: auto;
|
margin-bottom: 5px;
|
|
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 {
|
width: 100%;
|
.bookType {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 60px;
|
height: 26px;
|
text-align: center;
|
font-size: 12px;
|
line-height: 24px;
|
font-weight: 400;
|
color: #fff;
|
border-radius: 0px 0px 0px 5px;
|
background: linear-gradient(130deg, #019e58 0%, #144941 100%);
|
border-radius: 0px 8px 0px 8px;
|
}
|
|
span {
|
line-height: 25px;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
padding: 5px 0;
|
box-sizing: border-box;
|
text-align: center;
|
font-family:
|
Microsoft YaHei UI,
|
Microsoft YaHei UI;
|
font-size: 16px;
|
}
|
.title {
|
font-weight: bold;
|
color: #000000;
|
}
|
.author {
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
|
.list-box {
|
min-height: 450px;
|
}
|
|
.createDate {
|
text-align: right;
|
}
|
.noProduct {
|
padding: 30px;
|
text-align: center;
|
}
|
|
.pagination-box {
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
