Skip to content

E
exhibition_page
提交 8c2e8900 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

增加文创列表和文创详情

上级 5e5db8de
显示空白字符变更
内嵌 并排
正在显示 包含 804 行增加 和 21 行删除
src/api/literature.js
浏览文件 @ 8c2e8900
......@@ -9,3 +9,19 @@ export function getLiteratureList(data) {
data
})
}
export function getCcProductList(data) {
return request({
url: 'bizCcProducts/listByPage',
method: 'post',
data
})
}
export function getCcProductDetail(params) {
return request({
url: '/bizCcProducts/findById',
method: 'get',
params
})
}
src/api/org.js
浏览文件 @ 8c2e8900
......@@ -35,6 +35,15 @@ export function getMuseumListPage(data) {
})
}
export function getAllDeptIdAndName(data) {
return request({
url: '/sys/getAllDeptIdAndName',
method: 'get',
data
})
}
// 根据博物馆id查询详情(需token)
......
src/components/NavBar/index.vue
浏览文件 @ 8c2e8900
......@@ -201,6 +201,12 @@ export default {
path: "/museum",
};
}
if (value.name.indexOf("ccProduct") != -1) {
this.currentTab = {
name: "文创产品",
path: "/ccProduct",
};
}
if (value.params.themeType) {
this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
......@@ -266,6 +272,10 @@ export default {
name: "博物馆",
path: "/museum",
},
{
name: "文创产品",
path: "/ccProduct",
},
],
currentTab: {
name: "首页",
......
src/router/index.js
浏览文件 @ 8c2e8900
......@@ -127,6 +127,24 @@ const routes = [
keepAlive: false
}
},
// 文创
{
path: '/ccProduct',
name: 'ccProduct',
component: () => import('@/views/ccProduct'),
meta: {
keepAlive: true
}
},
// 文创详情
{
path: '/ccProduct/:bccpId',
name: 'ccProductDetail',
component: () => import('@/views/ccProduct/Detail.vue'),
meta: {
keepAlive: false
}
},
// 404
{
......
src/utils/index.js
浏览文件 @ 8c2e8900
......@@ -29,13 +29,14 @@ export function getFullUrl(url) {
if (url && url.indexOf('http') != -1 && url.indexOf('files') != -1) {
let urlArr = url.split('files')
fullUrl = '/files' + urlArr[1]
} else if (url && url.indexOf('http') == -1 && url.indexOf('files') == -1) {
fullUrl = '/files' + url
} else {
fullUrl = url
}
return fullUrl
}
/**
* 预览文件
* @param href 预览地址
......
src/views/ccProduct/Detail.vue 0 → 100644
浏览文件 @ 8c2e8900
<template>
<div class="ccproduct-detail">
<div class="back" @click="handleBack">
<svg-icon icon-class="mz-fh"></svg-icon>
返回上页</div>
<div class="wrapper">
<div class="header">
<div class="dc-left wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/ccproduct/dc5.png" alt="" />
</div>
<div class="text wow animate__animated animate__fadeIn">文创</div>
</div>
<div class="body">
<div class="title wow animate__animated animate__fadeInLeft">{{ productInfo.title }}</div>
<div class="intro wow animate__animated animate__fadeInRight" v-html="productInfo.intro"></div>
<div class="images wow animate__animated animate__fadeInUp">
<div
class="img-container"
v-for="(item, index) in productInfo.imagesVo"
:key="index"
>
<img :src="$getFullUrl(item.pressUrl)" />
</div>
</div>
<div class="deptName wow animate__animated animate__fadeInLeft">产品来源：{{ productInfo.deptName }}</div>
</div>
<!-- <div class="footer">
<div class="dc-right">
<img src="@/assets/imgs/ccproduct/dc4.png" alt="" />
</div>
</div> -->
</div>
</div>
</template>
<script>
import { getCcProductDetail } from "@/api/literature";
export default {
name: "ccProductDetail",
data() {
return {
productInfo: {},
};
},
async mounted() {
let bccpId = this.$route.params.bccpId;
this.loadProductDetail(bccpId);
},
methods: {
async loadProductDetail(bccpId) {
const params = {
bccpId,
};
let res = await getCcProductDetail(params);
this.productInfo = res.data;
},
handleBack() {
this.$router.go(-1);
},
},
};
</script>
<style lang="scss" scoped>
.ccproduct-detail {
background: url("@/assets/imgs/ccproduct/wc-bg.png");
min-height: calc(100vh - 300px);
padding: 40px 13%;
.back{
color: #999;
margin: 30px 0;
cursor: pointer;
}
.wrapper {
background-color: #fff;
min-height: calc(100vh - 300px);
.header {
position: relative;
.dc-right {
position: absolute;
right: 0;
bottom: 10px;
}
.dc-left {
position: absolute;
left: 0;
top: 0;
}
.text {
font-family: "SourceHanSerifCN-Bold";
font-size: 180px;
position: absolute;
right: 0;
top: 10px;
color: #f1f1f1;
}
}
.body{
padding: 400px 100px;
.title{
font-size: 32px;
font-family: "SourceHanSerifCN-Bold";
color: #333;
}
.intro,.deptName{
color: #999;
}
.intro{
&>p{
color: #666;
}
}
.images{
padding: 20px 0;
display: flex;
.img-container{
width: 400px;
height: 400px;
background-color: #f7f7f7;
margin: 20px;
img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
// .footer{
// position: relative;
// .dc-right{
// right: 0;
// top: 0;
// position: absolute;
// }
// }
}
}
</style>
\ No newline at end of file
src/views/ccProduct/index.vue 0 → 100644
浏览文件 @ 8c2e8900
<template>
<div class="cultural-relic">
<ListBanner title="文创产品" />
<div class="content-wrapper">
<div class="content">
<div class="search wow animate__animated animate__fadeIn">
<el-input
class="input item"
v-model="keyword"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
<el-select
class="years item"
v-model="deptId"
placeholder="请选择所属单位"
filterable
@change="handleDeptChange"
clearable
>
<el-option
v-for="(item, index) in deptList"
:key="index"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<el-col :span="3">
<div class="search-button" @click="search" style="width: 100%">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</el-col>
</div>
<el-row :gutter="40" class="cr-list">
<el-col
:span="item.status == 1 ? 8 : 0"
class="cr-item"
@click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="img-container">
<img
:src="$getFullUrl(item.imagesVo[0].pressUrl)"
width="100%"
class="face-image"
lazy
/>
<div class="deco-left-top">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-left-bottom">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-right-top">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
<div class="deco-right-bottom">
<img
:src="
require(`@/assets/imgs/list/img-deco${
item == currentImg ? '' : '-g'
}.png`)
"
alt=""
/>
</div>
</div>
<div class="desc">
<div class="name">{{ item.title }}</div>
<div class="desc-container">
<div class="left">
<div class="deptName">
<span>来源单位：</span>
<span>{{ item.deptName }}</span>
</div>
</div>
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
item.collectCount ? item.collectCount : "收藏"
}}</span>
</span>
<span class="view">
<svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span>
</span>
</div> -->
</div>
</div>
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
import ListBanner from "@/components/ListBanner";
import { getCcProductList } from "@/api/literature";
import { getAllDeptIdAndName } from "@/api/org";
import { mapGetters } from "vuex";
export default {
name: "ccProduct",
components: { ListBanner },
data() {
return {
list: {
records: [],
size: 15,
current: 1,
total: 0,
},
keyword: "",
currentImg: null,
regionCode: [],
regionTree: [],
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
deptId: "",
deptList: [],
};
},
computed: {},
mounted() {
this.loadData();
this.loadRegionTree();
this.loadDeptData();
},
watch: {
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
},
methods: {
search() {
this.loadData();
},
async loadData() {
const params = {
page: this.list.current,
limit: this.list.size,
title: this.keyword,
regionCode: this.regionCode[this.regionCode.length - 1],
deptId: this.deptId,
};
let res = await getCcProductList(params);
if (res.code == 0) {
this.list = res.data;
}
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
handleClick(item) {
const { bccpId } = item;
// const newPage = this.$router.resolve({
// path: "ccProduct/" + bccpId,
// });
// window.open(newPage.href, "_blank");
this.$router.push(`ccProduct/${bccpId}`);
},
handleClickThreeD() {
this.onlyShow3d = !this.onlyShow3d;
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
},
handleTo3D(url3d) {
window.open(url3d, "_blank");
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
handleRegionChange(value) {
this.regionCode = value;
this.loadData();
},
handleDeptChange(value) {
this.deptId = value;
this.loadData();
},
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
if (arr && arr.length > 0) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
});
},
async loadDeptData() {
let res = await getAllDeptIdAndName();
this.deptList = res.data;
},
},
};
</script>
<style lang="scss" scoped>
$blue: #2069c4;
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: #2069c4;
// color: #fff;
.content-wrapper {
padding-top: 60px;
background-color: #fff;
padding-bottom: 126px;
.search {
display: flex;
justify-content: center;
align-items: center;
padding: 90px 70px 80px;
margin-bottom: 40px;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 214px;
.item {
margin-right: 20px;
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
.input-icon {
height: 100%;
display: flex;
align-items: center;
font-size: 20px;
margin-left: 12px;
color: #444;
}
.threeD {
display: flex;
cursor: pointer;
font-size: 16px;
color: #666;
margin-left: 20px;
transition: all ease 0.3s;
// -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4));
.svg-icon {
margin-right: 4px;
font-size: 22px;
}
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
// .box {
// width: 28px;
// height: 28px;
// display: flex;
// justify-content: center;
// align-items: center;
// border: 2px solid #444;
// margin-right: 6px;
// i {
// font-size: 28px;
// }
// }
// .text {
// display: flex;
// justify-content: center;
// align-items: center;
// color: #444;
// }
}
.search-button {
cursor: pointer;
width: 156px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: url("@/assets/imgs/list/search-button-bg.png") transparent;
background-size: 100% 100%;
color: #444;
font-size: 14px;
transition: all 0.2s ease;
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.svg-icon {
margin-right: 4px;
}
}
}
.content {
width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.cr-list {
padding: 0 74px;
.cr-item {
margin-bottom: 40px;
.container {
border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid #2069c4;
.face-image {
transform: scale(1.2);
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
.desc {
background: url("@/assets/imgs/list/card-title-bg.png");
}
}
.img-container {
background-color: #fff;
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
.face-image {
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
// display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
.desc {
height: 150px;
padding: 36px 30px;
transition: all 0.5s ease;
background: #fff;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
margin-bottom: 18px;
}
.desc-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
.left {
.deptName {
font-size: 14px;
font-weight: 300;
color: #444444;
}
}
.right {
color: #858484;
.collect {
margin-right: 10px;
}
.svg-icon {
margin-right: 4px;
}
}
}
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 9;
// background-color: rgba(0, 0, 0, 0.1);
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
background: rgba(0, 0, 0, 0.3);
color: #fff;
border-radius: 8px;
font-size: 16px;
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #fff;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
.pagination {
margin: 24px;
display: flex;
justify-content: center;
align-items: center;
background-image: url("@/assets/imgs/list/search-bg.png");
background-size: 22%;
height: 116px;
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
font-weight: bold;
}
::v-deep .el-input,
.el-cascader {
// width: 368px !important;
.el-input__inner {
// width: 100%;
border: none;
border-radius: 0;
background: url("@/assets/imgs/list/input-border.png");
background-size: 100% 100%;
height: 40px;
&::placeholder {
text-indent: 10px;
color: #999;
font-size: 14px;
}
}
}
::v-deep .el-input {
width: auto !important;
}
::v-deep .el-pagination {
.btn-prev,
.btn-next {
background: transparent;
}
}
::v-deep .el-pager {
li {
width: 28px;
height: 28px;
border-radius: 50%;
background: #2069c4;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
}
.active {
color: #fff;
}
}
</style>
\ No newline at end of file
src/views/culturalRelic/index.vue
浏览文件 @ 8c2e8900
......@@ -4,11 +4,6 @@
<div class="content-wrapper">
<div class="content">
<div class="search wow animate__animated animate__fadeIn">
<!-- <el-row
style="width: 100%; display: flex; align-items: center"
:span="2"
>
<el-col :span="6"> -->
<el-input
class="input item"
v-model="keyword"
......@@ -17,9 +12,6 @@
clearable
>
</el-input>
<!-- </el-col> -->
<!-- <el-col :span="6"> -->
<el-select
class="type item"
v-model="type"
......@@ -36,8 +28,6 @@
>
</el-option>
</el-select>
<!-- </el-col> -->
<!-- <el-col :span="6"> -->
<el-cascader
class="years item"
v-model="years"
......@@ -50,7 +40,6 @@
ref="years"
>
</el-cascader>
<!-- </el-col> -->
<el-col :span="3">
<div class="search-button" @click="search" style="width: 100%">
<svg-icon icon-class="search"></svg-icon>
......@@ -59,11 +48,6 @@
</el-col>
<el-col :span="3" class="threeD" @click.native="handleClickThreeD">
<!-- <div class="threeD" @click="handleClickThreeD">
<div class="box">
<i class="el-icon-check" v-show="onlyShow3d"></i>
</div>
</div> -->
<svg-icon
:icon-class="onlyShow3d ? 'filter-s' : 'filter'"
></svg-icon>
......
src/views/museum/index.vue
浏览文件 @ 8c2e8900
......@@ -128,10 +128,8 @@
import ListBanner from "@/components/ListBanner";
import { getMuseumListPage } from "@/api/org";
import { mapGetters } from "vuex";
import { debounce } from "@/utils/index";
export default {
name: "Museum",
// components: { SearchBar, NavBar, Footer },
components: { ListBanner },
data() {
return {
......@@ -229,8 +227,6 @@ export default {
},
handleRegionChange(value) {
console.log(value);
console.log(value[value.length - 1]);
this.regionCode = value;
this.loadData();
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论