|
@@ -0,0 +1,183 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="book-info">
|
|
|
|
|
+ <template v-if="['/project_manage/book'].includes(backPath)">
|
|
|
|
|
+ <MenuPage :cur-key="backPath" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-if="['/project_manage/org/book'].includes(backPath)">
|
|
|
|
|
+ <ProjectMenu :cur-key="backPath.replace('/project_manage/', '')" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="book-info__header">
|
|
|
|
|
+ <div class="menu-container">
|
|
|
|
|
+ <span class="name">{{ book_info.name }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="book">
|
|
|
|
|
+ <div class="operator">
|
|
|
|
|
+ <span class="link" @click="$router.push({ path: backPath })">返回项目列表</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <main class="book-info-main">
|
|
|
|
|
+ <div class="name info-item" :style="{ gridArea: 'name' }">
|
|
|
|
|
+ <span class="label">名称</span>
|
|
|
|
|
+ <span class="field">{{ book_info.name }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="version info-item" :style="{ gridArea: 'version' }">
|
|
|
|
|
+ <span class="label">版本</span>
|
|
|
|
|
+ <span class="field">{{ book_info.version }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="cover info-item" :style="{ gridArea: 'cover' }">
|
|
|
|
|
+ <span class="label">封面</span>
|
|
|
|
|
+ <span class="field">
|
|
|
|
|
+ <img :src="book_info.cover_image_file_url" alt="封面" :style="{ maxHeight: '220px' }" />
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="name_english info-item" :style="{ gridArea: 'english-name' }">
|
|
|
|
|
+ <span class="label">英文名称</span>
|
|
|
|
|
+ <span class="field">{{ book_info.name_english }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="series_name info-item" :style="{ gridArea: 'series_name' }">
|
|
|
|
|
+ <span class="label">所属从书</span>
|
|
|
|
|
+ <span class="field">{{ book_info.series_name }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="isbn info-item" :style="{ gridArea: 'isbn' }">
|
|
|
|
|
+ <span class="label">国际标准图书<br />编号(ISBN)</span>
|
|
|
|
|
+ <span class="field">{{ book_info.isbn }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="author info-item" :style="{ gridArea: 'author' }">
|
|
|
|
|
+ <span class="label">作者</span>
|
|
|
|
|
+ <span class="field">{{ book_info.author }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="price info-item" :style="{ gridArea: 'price' }">
|
|
|
|
|
+ <span class="label">价格</span>
|
|
|
|
|
+ <span class="field">{{ book_info.price }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="content_count info-item" :style="{ gridArea: 'content_count' }">
|
|
|
|
|
+ <span class="label">课数容量</span>
|
|
|
|
|
+ <span class="field">{{ book_info.content_count }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="shangjia_time info-item" :style="{ gridArea: 'shangjia_time' }">
|
|
|
|
|
+ <span class="label">上架时间</span>
|
|
|
|
|
+ <span class="field">{{ book_info.shangjia_time }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </main>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import MenuPage from '@/views/personal_workbench/common/menu.vue';
|
|
|
|
|
+import ProjectMenu from '@/views/project_manage/common/ProjectMenu.vue';
|
|
|
|
|
+
|
|
|
|
|
+import { GetBookInfo } from '@/api/book';
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: 'BookInfoPage',
|
|
|
|
|
+ components: {
|
|
|
|
|
+ MenuPage,
|
|
|
|
|
+ ProjectMenu,
|
|
|
|
|
+ },
|
|
|
|
|
+ props: {
|
|
|
|
|
+ id: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: '',
|
|
|
|
|
+ },
|
|
|
|
|
+ query: {
|
|
|
|
|
+ type: Object,
|
|
|
|
|
+ default: () => ({}),
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ book_info: {},
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ backPath() {
|
|
|
|
|
+ return this.$route.query.backPath || '/project_manage/book';
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ created() {
|
|
|
|
|
+ GetBookInfo({ id: this.id }).then(({ book_info }) => {
|
|
|
|
|
+ this.book_info = book_info;
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {},
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+@use '@/styles/mixin.scss' as *;
|
|
|
|
|
+
|
|
|
|
|
+.book-info {
|
|
|
|
|
+ @include page-content(true);
|
|
|
|
|
+
|
|
|
|
|
+ &__header {
|
|
|
|
|
+ .name {
|
|
|
|
|
+ width: 240px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .book {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ main.book-info-main {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template: repeat(3, 41px) 70px repeat(3, 41px) / repeat(2, 1fr);
|
|
|
|
|
+ grid-template-areas: 'name version' 'cover english-name' 'cover series_name' 'cover isbn' 'cover author' 'cover price' 'content_count shangjia_time';
|
|
|
|
|
+ grid-auto-rows: 41px;
|
|
|
|
|
+ row-gap: 0;
|
|
|
|
|
+ max-width: 1148px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+
|
|
|
|
|
+ .info-item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .label {
|
|
|
|
|
+ width: 130px;
|
|
|
|
|
+ text-align: right;
|
|
|
|
|
+ background-color: #f2f3f5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .field {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ column-gap: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .label,
|
|
|
|
|
+ .field {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ padding: 4px 12px;
|
|
|
|
|
+ line-height: 32px;
|
|
|
|
|
+ border-bottom: 1px solid #e5e6eb;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.cover {
|
|
|
|
|
+ .label {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .field {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.ibsn {
|
|
|
|
|
+ .label {
|
|
|
|
|
+ line-height: 16px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|