Skip to content

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

feat:对接个人中心接口、修改退出逻辑

上级 93efece7
隐藏空白字符变更
内嵌 并排
正在显示 包含 389 行增加 和 160 行删除
src/App.vue
浏览文件 @ 3b4f4843
<template> <template>
<div id="app"> <div id="app">
<NavBar /> <NavBar />
<router-view :key="$route.fullPath"/> <router-view :key="$route.fullPath" v-if="isRouterAlive" />
<Footer /> <Footer />
</div> </div>
</template> </template>
...@@ -10,8 +10,19 @@ import NavBar from "@/components/NavBar"; ...@@ -10,8 +10,19 @@ import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
export default { export default {
components: { NavBar, Footer }, components: { NavBar, Footer },
data() {
return {
isRouterAlive: true,
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(() => (this.isRouterAlive = true));
},
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@import url('@/assets/styles/index.scss'); @import url("@/assets/styles/index.scss");
</style> </style>
src/api/user.js
浏览文件 @ 3b4f4843
...@@ -50,6 +50,34 @@ export function toggleLike(data) { ...@@ -50,6 +50,34 @@ export function toggleLike(data) {
}) })
} }
// 查看点赞列表
export function getLikeList(data) {
return request({
url: '/bizCollection/listByPage',
method: 'post',
data
})
}
// 查看收藏列表
export function getCollectionList(data) {
return request({
url: '/bizLove/listByPage',
method: 'post',
data
})
}
// 查看浏览数据
export function getViewList(data) {
return request({
url: '/bizBrowseHistory/listByPage',
method: 'post',
data
})
}
// /** * // /** *
// * 上传头像 // * 上传头像
......
src/components/NavBar/index.vue
浏览文件 @ 3b4f4843
...@@ -14,11 +14,13 @@ ...@@ -14,11 +14,13 @@
> >
</div> </div>
<div class="operation"> <div class="operation">
<span v-if="hasToken" class="operation-item">欢迎你，{{ userInfo.username }}</span> <span v-if="hasToken && userInfo.username" class="operation-item"
>欢迎你，{{ userInfo.username }}</span
>
<!-- <router-link v-if="!hasToken" to="/login" class="operation-item" <!-- <router-link v-if="!hasToken" to="/login" class="operation-item"
>登陆</router-link >登陆</router-link
> --> > -->
<span v-if="!hasToken" @click="handleToLogin" class="operation-item" <span v-if="!hasToken" @click="handleToLogin" class="operation-item"
>登陆</span >登陆</span
> >
<router-link v-if="hasToken" to="/personal" class="operation-item" <router-link v-if="hasToken" to="/personal" class="operation-item"
...@@ -85,7 +87,7 @@ export default { ...@@ -85,7 +87,7 @@ export default {
name: "文物展", name: "文物展",
path: "/culturalRelic", path: "/culturalRelic",
}, },
{ {
name: "博物馆", name: "博物馆",
path: "/museum", path: "/museum",
}, },
...@@ -96,12 +98,17 @@ export default { ...@@ -96,12 +98,17 @@ export default {
}; };
}, },
methods: { methods: {
handleToLogin(){ handleToLogin() {
this.$router.push('/login?redirect='+this.$route.fullPath) this.$router.push("/login?redirect=" + this.$route.fullPath);
}, },
async handleLogOut() { async handleLogOut() {
await this.$store.dispatch("user/logout"); await this.$store.dispatch("user/logout");
this.logoutDialogVisible = false; this.logoutDialogVisible = false;
// 如果当前的path为/personal，需跳转到首页
let path = this.$route.fullPath;
if (path.indexOf("/personal") != -1) {
this.$router.push("/");
}
// this.$router.push(`/login?redirect=${this.$route.fullPath}`); // this.$router.push(`/login?redirect=${this.$route.fullPath}`);
}, },
handleClickTab(tab) { handleClickTab(tab) {
......
src/main.js
浏览文件 @ 3b4f4843
...@@ -7,6 +7,7 @@ import ElementUI from 'element-ui'; ...@@ -7,6 +7,7 @@ import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
// import * as echarts from 'echarts' // import * as echarts from 'echarts'
import './icons' import './icons'
// import '@/permission' // permission control
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI); Vue.use(ElementUI);
......
src/permission.js 0 → 100644
浏览文件 @ 3b4f4843
import router from './router'
import store from './store'
import {
Message
} from 'element-ui'
// import NProgress from 'nprogress' // progress bar
// import 'nprogress/nprogress.css' // progress bar style
import {
getToken
} from '@/utils/auth' // get token from cookie
// import getPageTitle from '@/utils/get-page-title'
// NProgress.configure({
// showSpinner: false
// }) // NProgress Configuration
// const whiteList = ['/login'] // no redirect whitelist
router.beforeEach(async (to, from, next) => {
// debugger
console.log('to',to);
console.log('from',from);
const hasToken = getToken()
console.log('hasToken',hasToken);
if (!hasToken) {
if (to.path === '/personal') {
next({
path: '/'
})
} else {
next()
}
} else {
next()
}
})
// router.afterEach(() => {
// // finish progress bar
// NProgress.done()
// })
src/store/modules/user.js
浏览文件 @ 3b4f4843
...@@ -13,7 +13,6 @@ import { ...@@ -13,7 +13,6 @@ import {
removeUserInfo removeUserInfo
} from '@/utils/auth' } from '@/utils/auth'
const getDefaultState = () => { const getDefaultState = () => {
return { return {
token: getToken(), token: getToken(),
...@@ -71,7 +70,9 @@ const actions = { ...@@ -71,7 +70,9 @@ const actions = {
commit('SET_USERINFO', data) commit('SET_USERINFO', data)
setToken(data.accessToken) setToken(data.accessToken)
setUserInfo(data) setUserInfo(data)
// window.location.reload()
resolve() resolve()
// window.location.reload()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
}) })
......
src/views/login/index.vue
浏览文件 @ 3b4f4843
...@@ -106,7 +106,7 @@ export default { ...@@ -106,7 +106,7 @@ export default {
this.$store this.$store
.dispatch("user/login", this.loginForm) .dispatch("user/login", this.loginForm)
.then(() => { .then(() => {
debugger // debugger
this.$router.push({ path: this.$route.query.redirect || "/" }); this.$router.push({ path: this.$route.query.redirect || "/" });
this.loading = false; this.loading = false;
}) })
......
src/components/CulturalRelicCard/index.vue → src/views/personal/components/Card/index.vue
浏览文件 @ 3b4f4843
<template> <template>
<div class="display-item"> <div class="display-item">
<img src="@/assets/imgs/display2.png" width="100%" :alt="title" /> <img :src="url" width="100%" :alt="title" height="200px"/>
<div class="display-desc"> <div class="display-desc">
<div class="desc-title"> <div class="desc-title">
<h4>{{ title }}</h4> <h4>{{ title }}</h4>
</div> </div>
<div class="desc-time">
<span>{{ time }}</span>
</div>
<a class="desc-content" :alt="content">
{{ content }}
</a>
</div> </div>
</div> </div>
</template> </template>
...@@ -19,30 +13,21 @@ ...@@ -19,30 +13,21 @@
export default { export default {
name: "CulturalRelicCard", name: "CulturalRelicCard",
props: { props: {
img: { url: {
type: String, type: String,
default: "", default: "",
}, },
title: { title: {
type: String, type: String,
default: "", default: "",
}, },
time: {
type: String,
default: "",
},
content: {
type: String,
default: "",
},
}, },
}; };
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.display-item { .display-item {
width: 330px; width: 100%;
margin-bottom: 32px; margin-bottom: 32px;
border-radius: 16px; border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
...@@ -63,12 +48,5 @@ export default { ...@@ -63,12 +48,5 @@ export default {
display: block; display: block;
} }
} }
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
} }
</style> </style>
\ No newline at end of file
src/views/personal/components/Collection.vue
浏览文件 @ 3b4f4843
<template> <template>
<div class="like"> <div class="like">
<el-tabs :tab-position="'top'"> <el-tabs :tab-position="'top'" v-model="activeName">
<el-tab-pane label="文物"> <el-tab-pane
<div class="display-group"> :key="tab.name"
<div v-for="(item, index) in relateRelics" :key="index"> v-for="tab in Tabs"
<CulturalRelicCard :label="tab.title"
:title="item.title" :name="tab.name"
:content="item.content" >
:time="item.time" <el-row :gutter="20">
/> <el-col :span="6" v-for="(item, index) in list.records" :key="index">
</div> <Card :title="item.title" :url="item.faceImageUrl"
</div> /></el-col>
</el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="展览">
<el-row :gutter="16">
<el-col
:span="6"
v-for="(item, index) in exhibitions"
:key="index"
@click.native="handleClick"
>
<DisplayCard :title="item.title" :content="item.content" />
</el-col> </el-row
></el-tab-pane>
</el-tabs> </el-tabs>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="current" :current-page="Number(list.current)"
:page-sizes="[12, 28, 40]" :page-sizes="[10, 20, 50]"
:page-size="size" :page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="total" :total="Number(list.total)"
> >
</el-pagination> </el-pagination>
</div> </div>
...@@ -40,13 +30,14 @@ ...@@ -40,13 +30,14 @@
</template> </template>
<script> <script>
import DisplayCard from "@/components/DisplayCard"; import Card from "./Card";
import CulturalRelicCard from "@/components/CulturalRelicCard"; // import CulturalRelicCard from "@/components/CulturalRelicCard";
import { getCollectionList } from "@/api/user";
export default { export default {
name: "Collection", name: "Like",
components: { components: {
DisplayCard, Card,
CulturalRelicCard, // CulturalRelicCard,
}, },
props: { props: {
relateRelics: { relateRelics: {
...@@ -57,29 +48,65 @@ export default { ...@@ -57,29 +48,65 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
size: { },
type: Number, // watch: {
default: 10, // activeName(type) {
}, // console.log('type',type);
current: { // this.loadList(type);
type: Number, // },
default: 1, // },
}, data() {
total: { return {
type: Number, Tabs: [
default: 100, {
name: "biz_cultural_relic",
title: "文物",
},
{
name: "biz_exhibition",
title: "展览",
},
],
activeName: "biz_cultural_relic",
list: {
records: {},
size: 10,
current: 1,
total: 0,
},
};
},
watch: {
activeName(name) {
// 重置current
this.list.current = 1;
this.loadList(name);
}, },
}, },
methods:{ mounted() {
handleSizeChange(value) { let type = "biz_cultural_relic";
console.log("handleSizeChange", value); this.loadList(type);
this.$emit('handleSizeChange',value) },
methods: {
async loadList(type) {
// biz_cultural_relic 文物 biz_exhibition 展览
const params = {
sourceType: type, //默认先加载文物
limit: this.list.size,
page: this.list.current,
};
let res = await getCollectionList(params);
this.list = res.data;
}, },
handleCurrentChange(value) { handleSizeChange(size) {
console.log("handleCurrentChange", value); this.list.size = size;
this.$emit('handleCurrentChange',value) this.loadList(this.activeName);
}, },
} handleCurrentChange(current) {
this.list.current = current;
this.loadList(this.activeName);
},
},
}; };
</script> </script>
......
src/views/personal/components/Footprint.vue
浏览文件 @ 3b4f4843
<template> <template>
<div class="like"> <div class="like">
<el-tabs :tab-position="'top'"> <el-tabs :tab-position="'top'" v-model="activeName">
<el-tab-pane label="文物"> <el-tab-pane
<div class="display-group"> :key="tab.name"
<div v-for="(item, index) in relateRelics" :key="index"> v-for="tab in Tabs"
<CulturalRelicCard :label="tab.title"
:title="item.title" :name="tab.name"
:content="item.content" >
:time="item.time" <el-row :gutter="20">
/> <el-col :span="6" v-for="(item, index) in list.records" :key="index">
</div> <Card :title="item.title" :url="item.faceImageUrl"
</div> /></el-col>
</el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="展览">
<el-row :gutter="16">
<el-col
:span="6"
v-for="(item, index) in exhibitions"
:key="index"
@click.native="handleClick"
>
<DisplayCard :title="item.title" :content="item.content" />
</el-col> </el-row
></el-tab-pane>
</el-tabs> </el-tabs>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
>
</el-pagination>
</div>
</div> </div>
</template> </template>
<script> <script>
import DisplayCard from "@/components/DisplayCard"; import Card from "./Card";
import CulturalRelicCard from "@/components/CulturalRelicCard"; // import CulturalRelicCard from "@/components/CulturalRelicCard";
import { getViewList } from "@/api/user";
export default { export default {
name: "Footprint", name: "Like",
components: { components: {
DisplayCard, Card,
CulturalRelicCard, // CulturalRelicCard,
}, },
props: { props: {
relateRelics: { relateRelics: {
...@@ -46,6 +49,58 @@ export default { ...@@ -46,6 +49,58 @@ export default {
default: () => [], default: () => [],
}, },
}, },
data() {
return {
Tabs: [
{
name: "biz_cultural_relic",
title: "文物",
},
{
name: "biz_exhibition",
title: "展览",
},
],
activeName: "biz_cultural_relic",
list: {
records: {},
size: 10,
current: 1,
total: 0,
},
};
},
watch: {
activeName(name) {
// 重置current
this.list.current = 1;
this.loadList(name);
},
},
mounted() {
let type = "biz_cultural_relic";
this.loadList(type);
},
methods: {
async loadList(type) {
// biz_cultural_relic 文物 biz_exhibition 展览
const params = {
sourceType: type, //默认先加载文物
limit: this.list.size,
page: this.list.current,
};
let res = await getViewList(params);
this.list = res.data;
},
handleSizeChange(size) {
this.list.size = size;
this.loadList(this.activeName);
},
handleCurrentChange(current) {
this.list.current = current;
this.loadList(this.activeName);
},
},
}; };
</script> </script>
...@@ -56,6 +111,37 @@ export default { ...@@ -56,6 +111,37 @@ export default {
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
.display-item {
width: 330px;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 0 32px 0;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
img {
border-radius: 16px 16px 0 0;
}
.display-desc {
padding: 0 16px;
.desc-content {
text-indent: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
}
} }
} }
</style> </style>
\ No newline at end of file
src/views/personal/components/Info.vue
浏览文件 @ 3b4f4843
<template> <template>
<div class="personal-info"> <div class="personal-info">
<el-form ref="form" label-width="80px"> <el-form ref="form" label-width="80px">
<el-form-item label="账号"> {{userInfo.username}} </el-form-item> <el-form-item label="账号" v-if="userInfo && userInfo.name">
<el-form-item label="手机号"> {{userInfo.phone}}</el-form-item> {{ userInfo.username }}
</el-form-item>
<el-form-item label="手机号" v-if="userInfo && userInfo.phone">
{{ userInfo.phone }}</el-form-item
>
<!-- <el-form-item> <!-- <el-form-item>
<el-button @click="editInfo">修改个人信息</el-button> <el-button @click="editInfo">修改个人信息</el-button>
<el-button @click="editPassword">修改密码</el-button> <el-button @click="editPassword">修改密码</el-button>
......
src/views/personal/components/Like.vue
浏览文件 @ 3b4f4843
<template> <template>
<div class="like"> <div class="like">
<el-tabs :tab-position="'top'"> <el-tabs :tab-position="'top'" v-model="activeName">
<el-tab-pane label="文物"> <el-tab-pane
<div class="display-group"> :key="tab.name"
<div v-for="(item, index) in relateRelics" :key="index"> v-for="tab in Tabs"
<CulturalRelicCard :label="tab.title"
:title="item.title" :name="tab.name"
:content="item.content" >
:time="item.time" <el-row :gutter="20">
/> <el-col :span="6" v-for="(item, index) in list.records" :key="index">
</div> <Card :title="item.title" :url="item.faceImageUrl"
</div> /></el-col>
</el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="展览">
<el-row :gutter="16">
<el-col
:span="6"
v-for="(item, index) in exhibitions"
:key="index"
@click.native="handleClick"
>
<DisplayCard :title="item.title" :content="item.content" />
</el-col> </el-row
></el-tab-pane>
</el-tabs> </el-tabs>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
>
</el-pagination>
</div>
</div> </div>
</template> </template>
<script> <script>
import DisplayCard from "@/components/DisplayCard"; import Card from "./Card";
import CulturalRelicCard from "@/components/CulturalRelicCard"; // import CulturalRelicCard from "@/components/CulturalRelicCard";
import { getLikeList } from "@/api/user";
export default { export default {
name: "Like", name: "Like",
components: { components: {
DisplayCard, Card,
CulturalRelicCard, // CulturalRelicCard,
}, },
props: { props: {
relateRelics: { relateRelics: {
...@@ -47,6 +49,64 @@ export default { ...@@ -47,6 +49,64 @@ export default {
default: () => [], default: () => [],
}, },
}, },
// watch: {
// activeName(type) {
// console.log('type',type);
// this.loadList(type);
// },
// },
data() {
return {
Tabs: [
{
name: "biz_cultural_relic",
title: "文物",
},
{
name: "biz_exhibition",
title: "展览",
},
],
activeName: "biz_cultural_relic",
list: {
records: {},
size: 10,
current: 1,
total: 0,
},
};
},
watch: {
activeName(name) {
// 重置current
this.list.current = 1;
this.loadList(name);
},
},
mounted() {
let type = "biz_cultural_relic";
this.loadList(type);
},
methods: {
async loadList(type) {
// biz_cultural_relic 文物 biz_exhibition 展览
const params = {
sourceType: type, //默认先加载文物
limit: this.list.size,
page: this.list.current,
};
let res = await getLikeList(params);
this.list = res.data;
},
handleSizeChange(size) {
this.list.size = size;
this.loadList(this.activeName);
},
handleCurrentChange(current) {
this.list.current = current;
this.loadList(this.activeName);
},
},
}; };
</script> </script>
......
src/views/personal/index.vue
浏览文件 @ 3b4f4843
...@@ -3,28 +3,13 @@ ...@@ -3,28 +3,13 @@
<!-- <NavBar /> --> <!-- <NavBar /> -->
<el-tabs :tab-position="'left'" type="card"> <el-tabs :tab-position="'left'" type="card">
<el-tab-pane label="我的点赞"> <el-tab-pane label="我的点赞">
<Like <Like />
:exhibitions="exhibitions"
:relateRelics="relateRelics"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="我的收藏"> <el-tab-pane label="我的收藏">
<Collection <Collection />
:exhibitions="exhibitions"
:relateRelics="relateRelics"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="浏览记录"> <el-tab-pane label="浏览记录">
<Footprint <Footprint />
:exhibitions="exhibitions"
:relateRelics="relateRelics"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane> <el-tab-pane label="个人信息"><Info /></el-tab-pane>
</el-tabs> </el-tabs>
...@@ -36,7 +21,7 @@ ...@@ -36,7 +21,7 @@
import { relateRelics, exhibitions } from "@/mock/mock"; import { relateRelics, exhibitions } from "@/mock/mock";
import Like from "./components/Like.vue"; import Like from "./components/Like.vue";
import Collection from "./components/Collection.vue"; import Collection from "./components/Collection.vue";
import Footprint from "./components/Collection.vue"; import Footprint from "./components/Footprint.vue";
import Info from "./components/Info.vue"; import Info from "./components/Info.vue";
import NavBar from "@/components/NavBar"; import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论