Skip to content

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

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

上级 93efece7
隐藏空白字符变更
内嵌 并排
正在显示 包含 389 行增加 和 160 行删除
src/App.vue
浏览文件 @ 3b4f4843
<template>
<div id="app">
<NavBar />
<router-view :key="$route.fullPath"/>
<router-view :key="$route.fullPath" v-if="isRouterAlive" />
<Footer />
</div>
</template>
......@@ -10,8 +10,19 @@ import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
components: { NavBar, Footer },
data() {
return {
isRouterAlive: true,
};
},
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(() => (this.isRouterAlive = true));
},
},
};
</script>
<style lang="scss">
@import url('@/assets/styles/index.scss');
@import url("@/assets/styles/index.scss");
</style>
src/api/user.js
浏览文件 @ 3b4f4843
......@@ -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 @@
>
</div>
<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
> -->
<span v-if="!hasToken" @click="handleToLogin" class="operation-item"
<span v-if="!hasToken" @click="handleToLogin" class="operation-item"
>登陆</span
>
<router-link v-if="hasToken" to="/personal" class="operation-item"
......@@ -85,7 +87,7 @@ export default {
name: "文物展",
path: "/culturalRelic",
},
{
{
name: "博物馆",
path: "/museum",
},
......@@ -96,12 +98,17 @@ export default {
};
},
methods: {
handleToLogin(){
this.$router.push('/login?redirect='+this.$route.fullPath)
handleToLogin() {
this.$router.push("/login?redirect=" + this.$route.fullPath);
},
async handleLogOut() {
await this.$store.dispatch("user/logout");
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}`);
},
handleClickTab(tab) {
......
src/main.js
浏览文件 @ 3b4f4843
......@@ -7,6 +7,7 @@ import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// import * as echarts from 'echarts'
import './icons'
// import '@/permission' // permission control
Vue.config.productionTip = false
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 {
removeUserInfo
} from '@/utils/auth'
const getDefaultState = () => {
return {
token: getToken(),
......@@ -71,7 +70,9 @@ const actions = {
commit('SET_USERINFO', data)
setToken(data.accessToken)
setUserInfo(data)
// window.location.reload()
resolve()
// window.location.reload()
}).catch(error => {
reject(error)
})
......
src/views/login/index.vue
浏览文件 @ 3b4f4843
......@@ -106,7 +106,7 @@ export default {
this.$store
.dispatch("user/login", this.loginForm)
.then(() => {
debugger
// debugger
this.$router.push({ path: this.$route.query.redirect || "/" });
this.loading = false;
})
......
src/components/CulturalRelicCard/index.vue → src/views/personal/components/Card/index.vue
浏览文件 @ 3b4f4843
<template>
<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="desc-title">
<h4>{{ title }}</h4>
</div>
<div class="desc-time">
<span>{{ time }}</span>
</div>
<a class="desc-content" :alt="content">
{{ content }}
</a>
</div>
</div>
</template>
......@@ -19,30 +13,21 @@
export default {
name: "CulturalRelicCard",
props: {
img: {
url: {
type: String,
default: "",
},
title: {
type: String,
default: "",
},
time: {
type: String,
default: "",
},
content: {
type: String,
default: "",
},
},
};
</script>
<style lang='scss' scoped>
.display-item {
width: 330px;
width: 100%;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
......@@ -63,12 +48,5 @@ export default {
display: block;
}
}
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
}
</style>
\ No newline at end of file
src/views/personal/components/Collection.vue
浏览文件 @ 3b4f4843
<template>
<div class="like">
<el-tabs :tab-position="'top'">
<el-tab-pane label="文物">
<div class="display-group">
<div v-for="(item, index) in relateRelics" :key="index">
<CulturalRelicCard
:title="item.title"
:content="item.content"
:time="item.time"
/>
</div>
</div>
<el-tabs :tab-position="'top'" v-model="activeName">
<el-tab-pane
:key="tab.name"
v-for="tab in Tabs"
:label="tab.title"
:name="tab.name"
>
<el-row :gutter="20">
<el-col :span="6" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImageUrl"
/></el-col>
</el-row>
</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>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[12, 28, 40]"
:page-size="size"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
:total="Number(list.total)"
>
</el-pagination>
</div>
......@@ -40,13 +30,14 @@
</template>
<script>
import DisplayCard from "@/components/DisplayCard";
import CulturalRelicCard from "@/components/CulturalRelicCard";
import Card from "./Card";
// import CulturalRelicCard from "@/components/CulturalRelicCard";
import { getCollectionList } from "@/api/user";
export default {
name: "Collection",
name: "Like",
components: {
DisplayCard,
CulturalRelicCard,
Card,
// CulturalRelicCard,
},
props: {
relateRelics: {
......@@ -57,29 +48,65 @@ export default {
type: Array,
default: () => [],
},
size: {
type: Number,
default: 10,
},
current: {
type: Number,
default: 1,
},
total: {
type: Number,
default: 100,
},
// 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);
},
},
methods:{
handleSizeChange(value) {
console.log("handleSizeChange", value);
this.$emit('handleSizeChange',value)
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 getCollectionList(params);
this.list = res.data;
},
handleCurrentChange(value) {
console.log("handleCurrentChange", value);
this.$emit('handleCurrentChange',value)
handleSizeChange(size) {
this.list.size = size;
this.loadList(this.activeName);
},
}
handleCurrentChange(current) {
this.list.current = current;
this.loadList(this.activeName);
},
},
};
</script>
......
src/views/personal/components/Footprint.vue
浏览文件 @ 3b4f4843
<template>
<div class="like">
<el-tabs :tab-position="'top'">
<el-tab-pane label="文物">
<div class="display-group">
<div v-for="(item, index) in relateRelics" :key="index">
<CulturalRelicCard
:title="item.title"
:content="item.content"
:time="item.time"
/>
</div>
</div>
<el-tabs :tab-position="'top'" v-model="activeName">
<el-tab-pane
:key="tab.name"
v-for="tab in Tabs"
:label="tab.title"
:name="tab.name"
>
<el-row :gutter="20">
<el-col :span="6" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImageUrl"
/></el-col>
</el-row>
</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>
<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>
</template>
<script>
import DisplayCard from "@/components/DisplayCard";
import CulturalRelicCard from "@/components/CulturalRelicCard";
import Card from "./Card";
// import CulturalRelicCard from "@/components/CulturalRelicCard";
import { getViewList } from "@/api/user";
export default {
name: "Footprint",
name: "Like",
components: {
DisplayCard,
CulturalRelicCard,
Card,
// CulturalRelicCard,
},
props: {
relateRelics: {
......@@ -46,6 +49,58 @@ export 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>
......@@ -56,6 +111,37 @@ export default {
margin-top: 24px;
display: flex;
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>
\ No newline at end of file
src/views/personal/components/Info.vue
浏览文件 @ 3b4f4843
<template>
<div class="personal-info">
<el-form ref="form" label-width="80px">
<el-form-item label="账号"> {{userInfo.username}} </el-form-item>
<el-form-item label="手机号"> {{userInfo.phone}}</el-form-item>
<el-form-item label="账号" v-if="userInfo && userInfo.name">
{{ userInfo.username }}
</el-form-item>
<el-form-item label="手机号" v-if="userInfo && userInfo.phone">
{{ userInfo.phone }}</el-form-item
>
<!-- <el-form-item>
<el-button @click="editInfo">修改个人信息</el-button>
<el-button @click="editPassword">修改密码</el-button>
......
src/views/personal/components/Like.vue
浏览文件 @ 3b4f4843
<template>
<div class="like">
<el-tabs :tab-position="'top'">
<el-tab-pane label="文物">
<div class="display-group">
<div v-for="(item, index) in relateRelics" :key="index">
<CulturalRelicCard
:title="item.title"
:content="item.content"
:time="item.time"
/>
</div>
</div>
<el-tabs :tab-position="'top'" v-model="activeName">
<el-tab-pane
:key="tab.name"
v-for="tab in Tabs"
:label="tab.title"
:name="tab.name"
>
<el-row :gutter="20">
<el-col :span="6" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImageUrl"
/></el-col>
</el-row>
</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>
<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>
</template>
<script>
import DisplayCard from "@/components/DisplayCard";
import CulturalRelicCard from "@/components/CulturalRelicCard";
import Card from "./Card";
// import CulturalRelicCard from "@/components/CulturalRelicCard";
import { getLikeList } from "@/api/user";
export default {
name: "Like",
components: {
DisplayCard,
CulturalRelicCard,
Card,
// CulturalRelicCard,
},
props: {
relateRelics: {
......@@ -47,6 +49,64 @@ export 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>
......
src/views/personal/index.vue
浏览文件 @ 3b4f4843
......@@ -3,28 +3,13 @@
<!-- <NavBar /> -->
<el-tabs :tab-position="'left'" type="card">
<el-tab-pane label="我的点赞">
<Like
:exhibitions="exhibitions"
:relateRelics="relateRelics"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
<Like />
</el-tab-pane>
<el-tab-pane label="我的收藏">
<Collection
:exhibitions="exhibitions"
:relateRelics="relateRelics"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
<Collection />
</el-tab-pane>
<el-tab-pane label="浏览记录">
<Footprint
:exhibitions="exhibitions"
:relateRelics="relateRelics"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
<Footprint />
</el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane>
</el-tabs>
......@@ -36,7 +21,7 @@
import { relateRelics, exhibitions } from "@/mock/mock";
import Like from "./components/Like.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 NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论