Skip to content

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

Merge branch 'master' of https://gitee.com/gzcnki/exhibition_page

上级 85eab6ca 806330ef
隐藏空白字符变更
内嵌 并排
正在显示 包含 1175 行增加 和 0 行删除
src/views/museum/Detail.vue 0 → 100644
浏览文件 @ 82da8add
<!-- -->
<template>
<div class="museum-detail">
<div class="bg">
<div class="bg-1">
<img src="@/assets/imgs/ms/bg.png" alt="">
</div>
<div class="bg-2"></div>
</div>
<div class="content">
<div class="left">
<div class="pen">
<img src="@/assets/imgs/ms/pen.png" alt="">
<span class="name">{{ museumDetail.name }}</span>
</div>
<div class="center">
<div class="face-img">
<div class="museum-face">
<img :src="$getFullUrl(museumDetail.faceImageUrl)" alt="">
</div>
<div class="cover">
<img src="@/assets/imgs/ms/img-bg.png" alt="">
</div>
</div>
<div class="text-container">
<div class="text-title">
{{ currentTab }}
</div>
<div class="text-content">
<el-scrollbar style="height:100%">
<div class="intro" v-html="museumDetail.intro" v-if="currentTab == '简介'">
</div>
<div class="ways" v-if="currentTab == '入园方式'">
<div>地址：<span>{{ museumDetail.address }}</span></div>
<div>开放时间：<span>{{ museumDetail.openPeriod }}</span></div>
<div>入园方式：<span>{{ museumDetail.entryMode }}</span></div>
</div>
<div class="contact" v-if="currentTab == '联系方式'">
<div class="qr-code" v-if="museumDetail.qrCodeVo.length > 0">
<img :src="museumDetail.qrCodeVo[0].url" alt="">
</div>
<div class="phone" v-if="museumDetail.phone">
<i class="el-icon-phone"></i>
<span>{{ museumDetail.phone }}</span>
</div>
<div v-if="!museumDetail.phone">暂无联系方式</div>
</div>
</el-scrollbar>
</div>
</div>
</div>
<div class="cloud">
<img src="@/assets/imgs/ms/cloud.png" alt="">
</div>
</div>
<div class="tabbar">
<div class="tabbar-item" v-for="(item, index) in tabbars" :key="index" @click="handleClickTab(item)"
@mouseenter="handleMouseEnter(item)" @mouseleave="handleMouseLeave(item)">
<div class="tab-img">
<img src="@/assets/imgs/ms/menu-border.png" alt="">
</div>
<div class="tab-text">{{ item }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getMSDetailById } from "@/api/org";
export default {
components: {
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
return {
museumDetail: {},
tabbars: [
'简介', '入园方式', '联系方式',
],
currentTab: '简介'
};
},
mounted() {
// this.creatQrCode();
this.loadDetail();
},
methods: {
async loadDetail() {
let id = this.$route.params.id;
if (id) {
let res = await getMSDetailById(id);
if (res.code == 0) {
this.museumDetail = res.data;
}
}
},
handleBack() {
this.$router.go(-1);
// this.$router.push({path:'/museum'})
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handelPreviewImages() {
this.imgViewerVisible = true;
this.imgList = [this.$getFullUrl(this.museumDetail.faceImageUrl)];
},
handleClickTab(item) {
this.currentTab = item
},
handleMouseEnter(item) {
console.log(item);
},
handleMouseLeave(item) {
console.log(item);
}
},
};
</script>
<style lang="scss" scoped>
.museum-detail {
height: calc(100vh - 100px);
width: 100%;
position: relative;
overflow: hidden;
.bg {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
.bg-1 {
position: absolute;
left: 0;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 2;
img {
width: 100%;
height: 100%;
object-fit: fill;
// filter: brightness(0.3);
}
}
.bg-2 {
position: absolute;
left: 0;
top: 0;
right: 0;
width: 100%;
height: 100%;
// background-color: rgba($themeColor, 0.8);
z-index: 3;
}
}
.content {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
z-index: 9;
padding: 60px 100px;
.left {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
.pen {
width: 100px;
height: 100px;
position: relative;
display: flex;
justify-content: center;
align-content: center;
// color: #d9cfa6;
color: #333;
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.name {
position: absolute;
left: 0;
top: 0;
padding: 20px;
font-size: 44px;
font-family: 'PangMenZhengDaoCuShuTi', 'KaiTi';
white-space: nowrap;
}
}
.center {
position: relative;
.face-img {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 10%;
top: 80px;
// left: 50%;
// transform: translateX(-50%);
.museum-face {
width: 430px;
height: 430px;
background: #fff;
border-radius: 50%;
img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: contain;
}
}
.cover {
position: absolute;
width: 540px;
height: 540px;
img {
width: 100%;
height: 100%;
}
}
}
}
.text-container {
position: absolute;
top: 80px;
right: 100px;
width: 700px;
height: 400px;
background-color: rgba(0, 0, 0, 0.3);
padding: 80px 60px;
// color: #d9cfa6;
display: flex;
align-content: center;
.text-title {
font-size: 40px;
font-family: 'PangMenZhengDaoCuShuTi', 'KaiTi';
margin-right: 16px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
}
.text-content {
overflow: auto;
}
::v-deep .el-scrollbar__wrap {
overflow-x: hidden;
}
.intro {
text-indent: 32px;
line-height: 2;
}
.ways {
padding-top: 16px;
&>div {
margin-bottom: 16px;
}
}
.contact {
padding-top: 16px;
.qr-code {
width: 120px;
margin-bottom: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
.cloud {
width: 160px;
height: 160px;
position: absolute;
display: flex;
justify-content: center;
align-content: center;
bottom: 0;
left: 0;
img {
position: absolute;
width: 100%;
height: 100%;
}
}
}
.tabbar {
width: 100px;
display: flex;
flex-direction: column;
.tabbar-item {
position: relative;
width: 160px;
height: 260px;
cursor: pointer;
.tab-img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
img {
width: 100%;
height: 100%;
}
}
.tab-text {
font-size: 22px;
font-family: 'PangMenZhengDaoCuShuTi', 'KaiTi';
font-weight: bold;
writing-mode: vertical-lr;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #000;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/museum/index.vue 0 → 100644
浏览文件 @ 82da8add
<template>
<div class="display">
<!-- <NavBar /> -->
<ListBanner
title="共计已收录博物馆"
:num="list.total"
:info="['州馆', '展示']"
/>
<div class="content-wrapper">
<div class="content">
<el-row
:gutter="40"
class="search wow animate__animated animate__fadeIn"
>
<el-col :span="8">
<el-input
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
</el-col>
<el-col :span="8">
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
>
</el-cascader>
</el-col>
<el-col :span="8">
<div class="search-button" @click="search">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</el-col>
</el-row>
<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"
>
<!-- id为1 的是文旅厅 -->
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1 && item.id != '1'"
>
<div class="img-container">
<img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
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.name }}</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 { getMuseumListPage } from "@/api/org";
import { mapGetters } from "vuex";
export default {
name: "Museum",
components: { ListBanner },
data() {
return {
list: {
records: [],
size: 21,
current: 1,
total: 0,
},
culturalRegionProps: {
value: "code",
label: "name",
children: "children",
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
regionCode: [],
regionTree: [],
currentImg: null,
};
},
computed: {
...mapGetters(["dicts"]),
},
async created() {
await this.$store.dispatch("dict/getDictList", ["displayType"]);
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears;
},
mounted() {
this.loadData();
this.loadRegionTree();
},
// 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,
name: this.keyword,
regionCode: this.regionCode[this.regionCode.length - 1],
};
let res = await getMuseumListPage(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();
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
},
handleClick(item) {
const { id } = item;
const newPage = this.$router.resolve({
path: `museum/${id}`,
});
window.open(newPage.href, "_blank");
// this.$router.push({
// path: `museum/${id}`,
// });
},
handleTypeChange(value) {
this.type = value;
this.list.current = 1;
this.loadData();
},
handleKeyWordChange(value) {
this.keyword = value;
this.loadData();
},
handleRegionChange(value) {
this.regionCode = 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);
}
});
}
}
});
},
handleEnterImg(item) {
this.currentImg = item;
},
handleLeaveImg() {
this.currentImg = null;
},
},
};
</script>
<style lang="scss" scoped>
$blue: $themeColor;
$text-indent: 16px;
.display {
width: 100%;
// background-color: $themeColor;
// color: #fff;
.content-wrapper {
// padding-top: 60px;
padding-bottom: 126px;
background-color: #fff;
/* .search {
display: flex;
justify-content: center;
align-items: center;
// background-image: url("@/assets/imgs/list/search-bg.png");
// background-size: 22%;
margin-bottom: 40px;
// padding: 90px 70px 80px;
// height: 214px;
.item {
margin-right: 20px;
}
.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");
background-size: 100% 100%;
color: #444;
font-size: 14px;
.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 $themeColor;
.face-image {
transform: scale(1.2);
}
.desc {
background: url("@/assets/imgs/list/card-title-bg.png");
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
display: block;
}
}
}
.img-container {
background-color: #f8f8f8;
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
.face-image {
width: 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: 100px;
padding: 36px 30px;
transition: all 0.5s ease;
background: #fff;
.name {
font-size: 18px;
font-weight: bold;
color: $themeColor;
margin-bottom: 18px;
}
.deptName {
font-size: 14px;
font-weight: 300;
color: #444444;
}
}
}
}
}
}
}
.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-pagination {
.btn-prev,
.btn-next {
background: transparent;
}
}
::v-deep .el-pager {
li {
width: 28px;
height: 28px;
border-radius: 50%;
background: $themeColor;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
}
.active {
color: #fff;
}
} */
</style>
\ No newline at end of file
src/views/register/index.vue 0 → 100644
浏览文件 @ 82da8add
<template>
<div class="wrapper">
<div class="register">
<div class="title">
<div class="text">
账号注册
<el-tooltip
class="item"
effect="dark"
content="提示：若您已经使用微信账号在小程序平台登录过后，系统将自动为您注册账号，初始密码为您的手机号，请直接登录"
placement="top-start"
>
<i class="el-icon-question tips"></i>
</el-tooltip>
</div>
<div class="close" @click="handleCloseLogin">×</div>
</div>
<el-form
:model="form"
status-icon
:rules="rules"
ref="registerForm"
label-width="80px"
class="register-form"
>
<el-form-item label="账号" prop="username">
<el-input
v-model="form.username"
autocomplete="off"
clearable
placeholder="账号长度4-20个字符，只能包括字母、数字、下划线"
></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input
v-model="form.phone"
autocomplete="off"
clearable
></el-input>
</el-form-item>
<el-form-item label="昵称" prop="nickName">
<el-input
v-model="form.nickName"
autocomplete="off"
clearable
placeholder="2~10个字符，只能包含中英文、数字及下划线，不能以下划线开头或结尾"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
type="password"
v-model="form.password"
autocomplete="off"
clearable
placeholder="至少8位，至少含数字、大写字母、小写字母、特殊符其中三种"
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input
type="password"
v-model="form.checkPass"
autocomplete="off"
clearable
></el-input>
</el-form-item>
<el-form-item class="submit-buttons">
<el-button @click.native="resetForm('registerForm')" v-if="!loading"
>重置</el-button
>
<el-button
:loading="loading"
type="primary"
@click.native="submitForm"
class="submit"
>提交</el-button
>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { register } from "@/api/user";
import { checkUserName, checkPhone } from "@/utils/validate";
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
var pattern =
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;
if (!pattern.test(value)) {
callback(
new Error(
"密码长度至少8位，至少含数字,大写字母,小写字母,特殊符其中三种"
)
);
}
if (this.form.checkPass !== "") {
this.$refs.registerForm.validateField("checkPass");
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.form.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
var validateUserName = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入账号"));
} else {
var pattern = /^[0-9a-zA-Z|_]{4,20}$/g;
if (!pattern.test(value)) {
callback(new Error("账号长度4-20个字符，只能包括字母、数字、下划线"));
} else {
const formData = new FormData();
formData.append("userName", value);
checkUserName(formData)
.then((res) => {
if (res.code == "0") {
callback();
} else {
callback(res.msg);
}
})
.catch((err) => {
console.error(err);
});
}
}
};
var validatePhone = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号"));
} else {
var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
if (!pattern.test(value)) {
callback(new Error("请输入合法手机号/电话号"));
} else {
const formData = new FormData();
formData.append("phone", value);
checkPhone(formData)
.then((res) => {
console.log(res);
if (res.code == "0") {
callback();
} else {
callback(res.msg);
}
})
.catch((err) => {
console.error(err);
});
}
}
};
return {
form: {
username: "",
password: "",
checkPass: "",
nickName: "",
},
isDisabled: true,
second: 60,
rules: {
username: [
{ validator: validateUserName, trigger: "blur", required: true },
],
phone: [{ validator: validatePhone, trigger: "blur", required: true }],
nickName: [
{ required: true, message: "请输入昵称", trigger: "blur" },
{
pattern: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
message:
"昵称长度2~10位，只能包含中文、英文大小写、数字及下划线，不能以下划线开头或结尾",
trigger: "blur",
},
],
password: [
{ validator: validatePass, trigger: "blur", required: true },
],
checkPass: [
{ validator: validatePass2, trigger: "blur", required: true },
],
},
loading: false,
};
},
methods: {
submitForm() {
// debugger
// console.log(123);
this.$refs["registerForm"].validate((valid) => {
// debugger
if (valid) {
this.loading = true;
const { username, password, phone, nickName } = this.form;
let params = {
username,
password,
phone,
nickName,
status: 1,
};
register(params)
.then((res) => {
if (res.code == "0") {
this.$confirm("注册成功, 是否去登录?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "success",
})
.then(() => {
this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
})
.catch(() => {
console.log("取消操作");
});
}
this.loading = false;
})
.catch((err) => {
this.loading = false;
});
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
handleCloseLogin() {
if (window.history.length <= 1) {
this.$router.push({ path: "/" });
return false;
} else {
this.$router.go(-1);
}
},
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
background-image: url("@/assets/imgs/home/display-bg.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
padding: 60px 0 100px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
flex-direction: column;
.register {
width: 580px;
background-color: #fff;
// border-radius: 16px;
padding: 48px 32px;
box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
.text {
// font-weight: bold;
font-size: 36px;
color: #666;
font-family: "KaiTi";
.tips {
font-size: 24px;
}
}
.close {
font-size: 34px;
cursor: pointer;
color: #ccc;
}
}
}
}
::v-deep .el-input__inner {
background: #e8f0fe;
border: none;
}
::v-deep .submit-buttons {
.el-form-item__content {
display: flex;
justify-content: flex-end;
.el-button {
border-radius: 0px;
&:last-child {
width: 160px;
background-color: $themeColor;
&:hover {
filter: brightness(0.9);
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论