Skip to content

N
national_museum_vod-H5
Commit a72891f4 authored by Your Name's avatar Your Name
Browse files
Options

限制角色页面

parent acd48e7c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 978 additions and 946 deletions
src/components/tabbar/index.vue
View file @ a72891f4
<template>
<div class="my-tabbar">
<van-tabbar v-model="activeIndex" active-color="#EE0A24" route>
<van-tabbar-item v-for="item in iconList" :to="item.url" :key="item.title">
<span>{{item.title}}</span>
<template #icon="props">
<img :src="props.active ? item.icon.active : item.icon.inactive" />
</template>
</van-tabbar-item>
<!-- <van-tabbar-item icon="search" to="/learn">
<span>学习项目</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</template>
</van-tabbar-item>
<van-tabbar-item icon="friends-o" to="/admin">
<span>管理员信息</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</template>
</van-tabbar-item>
<van-tabbar-item icon="setting-o" to="/editPsd">
<span>修改密码</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</template>
</van-tabbar-item> -->
</van-tabbar>
</div>
</template>
<script>
export default {
props: {
active: {
type: String,
default: "0"
}
},
data() {
return {
activeIndex: this.active,
iconList: [
{
url: "/commit",
title: "观影互动",
icon: {
inactive: require("@/assets/images/applets/commit.png"),
active: require("@/assets/images/applets/commit-active.png")
}
},
{
url: "/learn",
title: "学习项目",
icon: {
inactive: require("@/assets/images/applets/learn.png"),
active: require("@/assets/images/applets/learn-active.png")
}
},
{
url: "/admin",
title: "管理员信息",
icon: {
inactive: require("@/assets/images/applets/admin.png"),
active: require("@/assets/images/applets/admin-active.png")
}
},
{
url: "/editPsd",
title: "修改密码",
icon: {
inactive: require("@/assets/images/applets/editpsd.png"),
active: require("@/assets/images/applets/editpsd-active.png")
}
}
]
};
}
};
</script>
<style scoped>
.my-tabbar {
height: 50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
<template>
<div class="my-tabbar">
<van-tabbar v-model="activeIndex" active-color="#EE0A24" route>
<van-tabbar-item @click="changeHandle(item.title, userInfo.roleList[0])" v-for="item in iconList" :to=" +userInfo.roleList[0] == 2 && item.title == '观影互动' || +userInfo.roleList[0] == 17 && item.title == '学习项目' ? '' : item.url" :key="item.title">
<span>{{item.title}}</span>
<template #icon="props">
<img :src="props.active ? item.icon.active : item.icon.inactive" />
</template>
</van-tabbar-item>
<!-- <van-tabbar-item icon="search" to="/learn">
<span>学习项目</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</template>
</van-tabbar-item>
<van-tabbar-item icon="friends-o" to="/admin">
<span>管理员信息</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</template>
</van-tabbar-item>
<van-tabbar-item icon="setting-o" to="/editPsd">
<span>修改密码</span>
<template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" />
</template>
</van-tabbar-item> -->
</van-tabbar>
</div>
</template>
<script>
export default {
props: {
active: {
type: String,
default: "0"
}
},
data() {
return {
userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
activeIndex: this.active,
iconList: [
{
url: "/commit",
title: "观影互动",
icon: {
inactive: require("@/assets/images/applets/commit.png"),
active: require("@/assets/images/applets/commit-active.png")
}
},
{
url: "/learn",
title: "学习项目",
icon: {
inactive: require("@/assets/images/applets/learn.png"),
active: require("@/assets/images/applets/learn-active.png")
}
},
{
url: "/admin",
title: "管理员信息",
icon: {
inactive: require("@/assets/images/applets/admin.png"),
active: require("@/assets/images/applets/admin-active.png")
}
},
{
url: "/editPsd",
title: "修改密码",
icon: {
inactive: require("@/assets/images/applets/editpsd.png"),
active: require("@/assets/images/applets/editpsd-active.png")
}
}
]
};
},
methods: {
changeHandle(index1,index2) {
// console.log(index1,index2)
if(index1 == '观影互动' && index2 == 2 || index1 == '学习项目' && index2 == 17) {
this.$toast('暂无该权限！')
}
}
}
};
</script>
<style scoped>
.my-tabbar {
height: 50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>
\ No newline at end of file
src/views/guide.vue
View file @ a72891f4
<template>
<div class="login-container">
<div class="login-bg"></div>
<div class="login-page">
<div class="login-page-body">
<div class="login-page-title">展板导览</div>
<div class="login-page-form">
<van-cell-group>
<van-field label="展板名称：" v-model="panelName" readonly />
</van-cell-group>
<p>展板导览视频：</p>
<!-- <embed type="video/mp4" :src="panelVideo" /> -->
<video
placeholder="展板导览视频" controls
width="150px"
height="100px">
　　　　　　　　<source :src="panelVideo" type="video/mp4" />
　　　　　　　　<source :src="panelVideo" type="video/WebM">
　　　　　　</video>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://www.baidu.com/h5/guide?id=1&name=长征之路&video=2', // 扫描者携带的信息参数
panelId: '', // 展板id
panelName: '', // 展板名称
panelVideo:'https://www.runoob.com/try/demo_source/movie.mp4', // 展板导览视频地址
};
},
created() {
// var url = window.location.href ; //获取url中"?"符后的字串
// var cs = this.url.split('?')[1]; //获取?之后的参数字符串
//alert(url+'地址');//orderCode=20200721093517378188743943022
// var cc ='';
// var cs2 = '';
// if (cs.length > 0)
// {
// cs = cs.replace('id=', ''); // 去除参数名称
// var cc =cs.split('&')[0];//获取展板id
// var cs3 = cs.split('&')[1];
// var ccs = cs3.replace('name=', '') // 获取展板名称
// var cs1 = cs.split('&')[2];//ocd=20200818103843816416953617735
// var cs2 = cs1.replace('video=', '');//20200818103843816416953617735
// }
// this.panelName = ccs;
// // this.panelVideo = cs2;
// this.panelId = ccs
},
methods: {
}
};
</script>
<style lang="scss">
.login-container {
width: 100%;
height: 100%;
max-width: 1280px;
.login-bg {
width: 100%;
height: 100%;
margin: 0 auto;
background: #a4171d;
&:before {
display: inline-block;
content: "";
width: 100%;
height: 106px;
// background: url("~@/assets/images/topBox/bg-bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 0;
}
&:after {
display: inline-block;
content: "";
width: 100%;
height: 421px;
// background: url("~@/assets/images/topBox/bg-top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
}
.login-page {
height: 580px;
position: absolute;
bottom: 20px;
left: 24px;
right: 24px;
padding: 24px;
background: #ffffff;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
border-radius: 8px;
.login-page-form {
padding-top: 24px;
.van-field {
background: #f5f5f5;
border-radius: 4px;
margin-bottom: 32px;
.van-field__left-icon {
margin-right: 12px;
}
}
}
.login-page-title {
font-size: 18px;
color: #333;
text-align: center;
margin: 24px 0;
}
.login-page-button {
text-align: center;
background: #a4151d;
border-radius: 4px;
position: absolute;
bottom: 40px;
left: 24px;
right: 24px;
box-sizing: border-box;
.van-button {
font-size: 16px;
color: #fff;
background-color: transparent;
border: none;
}
}
}
}
</style>
<template>
<div class="login-container">
<div class="login-bg"></div>
<div class="login-page">
<div class="login-page-body">
<div class="login-page-title">展板导览</div>
<div class="login-page-form">
<van-cell-group>
<van-field label="展板名称：" v-model="panelName" readonly />
</van-cell-group>
<van-row>
<van-col span="8" style="margin-top: 50px;"><div style="vertical-align:middle;font-size:14px;">展板导览视频：</div></van-col>
<van-col span="12"> <!-- <embed type="video/mp4" :src="panelVideo" /> -->
<video
placeholder="展板导览视频" controls
width="150px"
height="100px">
　　　　　　　<source :src="panelVideo" type="video/mp4" />
　　　　　　　<source :src="panelVideo" type="video/WebM">
　　　　　</video></van-col>
</van-row>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://www.baidu.com/h5/guide?panelId=1&panelName=长征之路&panelVideo=https://www.runoob.com/try/demo_source/movie.mp4', // 扫描者携带的信息参数
panelId: '', // 展板id
panelName: '', // 展板名称
panelVideo:'', // 展板导览视频地址
u:''
};
},
created() {
var url = window.location.href ; // 获取url中"?"符后的字串
this.u = this.url.split('?')[0];//
console.log(this.u)
var cs = this.url.split('?')[1]; // 获取?之后的参数字符串
// alert(url+'地址');//orderCode=20200721093517378188743943022
var cc ='';
var cs2 = '';
if (cs.length > 0)
{
cs = cs.replace('panelId=', ''); // 去除参数名称
var cc =cs.split('&')[0];//获取展板id
var cs3 = cs.split('&')[1];
var ccs = cs3.replace('panelName=', '') // 去除参数名称
var cs1 = cs.split('&')[2]; // 获取展板名称
var cs2 = cs1.replace('panelVideo=', '');// 获取展板导览视频
}
this.panelName = ccs;
this.panelVideo = cs2;
this.panelId = cc
this.initData()
},
methods: {
initData() {
let vm = this
let param = {
id: this.panelId,
};
vm.$https(
{
url: "screen/statistic",
method: "get",
authType: this.backToken,
},
param
).catch(function (err) {
console.log(err);
});
}
}
};
</script>
<style lang="scss">
.login-container {
width: 100%;
height: 100%;
max-width: 1280px;
.login-bg {
width: 100%;
height: 100%;
margin: 0 auto;
background: #776d6e;
&:before {
display: inline-block;
content: "";
width: 100%;
height: 106px;
// background: url("~@/assets/images/topBox/bg-bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 0;
}
&:after {
display: inline-block;
content: "";
width: 100%;
height: 421px;
// background: url("~@/assets/images/topBox/bg-top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
}
.login-page {
height: 580px;
position: absolute;
bottom: 20px;
left: 24px;
right: 24px;
padding: 24px;
background: #f5f5f5;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
border-radius: 8px;
.login-page-form {
padding-top: 24px;
.van-field {
background: #f5f5f5;
border-radius: 4px;
margin-bottom: 32px;
.van-field__left-icon {
margin-right: 12px;
}
}
}
.login-page-title {
font-size: 18px;
color: #333;
text-align: center;
margin: 24px 0;
}
.login-page-button {
text-align: center;
background: #a4151d;
border-radius: 4px;
position: absolute;
bottom: 40px;
left: 24px;
right: 24px;
box-sizing: border-box;
.van-button {
font-size: 16px;
color: #fff;
background-color: transparent;
border: none;
}
}
}
}
</style>
src/views/login.vue
View file @ a72891f4
<template>
<div class="login-container">
<div class="login-bg"></div>
<div class="login-page">
<div class="login-page-body">
<div class="login-page-title">客户端登录</div>
<div class="login-page-form">
<van-form @submit.native="onSubmit">
<van-field
v-model="userInfo.username"
name="用户名"
left-icon="manager"
placeholder="请输入用户名"
:rules="[{ required: true, message: '用户名不能为空' }]"
/>
<van-field
v-model="userInfo.password"
type="password"
name="密码"
left-icon="lock"
placeholder="请输入密码"
:rules="[{ required: true, message: '密码不能为空' }]"
/>
<div class="login-page-button">
<van-button type="default" block native-type="submit">登录</van-button>
</div>
</van-form>
</div>
</div>
</div>
</div>
</template>
<script>
import util from "@/utils/index.js";
export default {
data() {
return {
userInfo: {},
};
},
mounted() {},
methods: {
onSubmit() {
let vm = this;
let param = {
password: util.encrypt(this.userInfo.password),
username: this.userInfo.username,
};
vm.$https(
{
url: "ajaxLogin",
method: "post",
authType: this.backToken,
},
vm.$qs.stringify(param)
)
.then((res) => {
if (res.data.resultCode === "200") {
let data = res.data;
if(data.isDefault){
this.$notify({
type: 'warning',
message: '登录成功,为了安全，建议修改密码',
duration: 5000
})
}
const isOpt = data.user.type;
sessionStorage.setItem("token", data.token);
sessionStorage.setItem("userInfo", JSON.stringify(data.user));
// let redirectPath = decodeURIComponent(this.$route.fullPath).split('redirect=')[1]
if (isOpt == "4") {
this.$router.push("/opt");
}else if (isOpt == "2") {
this.$router.push("/commit");
}else{
this.$toast.fail("您登录的账号既不是运维账号也不是单位用户账号，不能使用H5的功能");
}
} else {
this.$toast.fail(res.data.message);
}
})
.catch(function (err) {
console.log(err);
});
},
},
};
</script>
<style lang="scss">
.login-container {
width: 100%;
height: 100%;
max-width: 1280px;
.login-bg {
width: 100%;
height: 100%;
margin: 0 auto;
background: #a4171d;
&:before {
display: inline-block;
content: "";
width: 100%;
height: 106px;
background: url("~@/assets/images/topBox/bg-bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 0;
}
&:after {
display: inline-block;
content: "";
width: 100%;
height: 421px;
background: url("~@/assets/images/topBox/bg-top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
}
.login-page {
height: 350px;
position: absolute;
bottom: 58px;
left: 24px;
right: 24px;
padding: 24px;
background: #ffffff;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
border-radius: 8px;
.login-page-form {
padding-top: 24px;
.van-field {
background: #f5f5f5;
border-radius: 4px;
margin-bottom: 32px;
.van-field__left-icon {
margin-right: 12px;
}
}
}
.login-page-title {
font-size: 18px;
color: #333;
text-align: center;
margin: 24px 0;
}
.login-page-button {
text-align: center;
background: #a4151d;
border-radius: 4px;
position: absolute;
bottom: 40px;
left: 24px;
right: 24px;
box-sizing: border-box;
.van-button {
font-size: 16px;
color: #fff;
background-color: transparent;
border: none;
}
}
}
}
</style>
<template>
<div class="login-container">
<div class="login-bg"></div>
<div class="login-page">
<div class="login-page-body">
<div class="login-page-title">客户端登录</div>
<div class="login-page-form">
<van-form @submit.native="onSubmit">
<van-field
v-model="userInfo.username"
name="用户名"
left-icon="manager"
placeholder="请输入用户名"
:rules="[{ required: true, message: '用户名不能为空' }]"
/>
<van-field
v-model="userInfo.password"
type="password"
name="密码"
left-icon="lock"
placeholder="请输入密码"
:rules="[{ required: true, message: '密码不能为空' }]"
/>
<div class="login-page-button">
<van-button type="default" block native-type="submit">登录</van-button>
</div>
</van-form>
</div>
</div>
</div>
</div>
</template>
<script>
import util from "@/utils/index.js";
export default {
data() {
return {
userInfo: {},
};
},
mounted() {},
methods: {
onSubmit() {
let vm = this;
let param = {
password: util.encrypt(this.userInfo.password),
username: this.userInfo.username,
};
vm.$https(
{
url: "ajaxLogin",
method: "post",
authType: this.backToken,
},
vm.$qs.stringify(param)
)
.then((res) => {
if (res.data.resultCode === "200") {
let data = res.data;
if(data.isDefault){
this.$notify({
type: 'warning',
message: '登录成功,为了安全，建议修改密码',
duration: 5000
})
}
const isOpt = +data.user.roleList[0];
sessionStorage.setItem("token", data.token);
sessionStorage.setItem("userInfo", JSON.stringify(data.user));
// let redirectPath = decodeURIComponent(this.$route.fullPath).split('redirect=')[1]
if (isOpt == 17) {
this.$router.push("/commit");
}else if (isOpt == 2) {
this.$router.push("/learn");
}else{
this.$toast.fail("您登录的账号既不是运维账号也不是单位用户账号，不能使用H5的功能");
}
} else {
this.$toast.fail(res.data.message);
}
})
.catch(function (err) {
console.log(err);
});
},
},
};
</script>
<style lang="scss">
.login-container {
width: 100%;
height: 100%;
max-width: 1280px;
.login-bg {
width: 100%;
height: 100%;
margin: 0 auto;
background: #a4171d;
&:before {
display: inline-block;
content: "";
width: 100%;
height: 106px;
background: url("~@/assets/images/topBox/bg-bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 0;
}
&:after {
display: inline-block;
content: "";
width: 100%;
height: 421px;
background: url("~@/assets/images/topBox/bg-top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
}
.login-page {
height: 350px;
position: absolute;
bottom: 58px;
left: 24px;
right: 24px;
padding: 24px;
background: #ffffff;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
border-radius: 8px;
.login-page-form {
padding-top: 24px;
.van-field {
background: #f5f5f5;
border-radius: 4px;
margin-bottom: 32px;
.van-field__left-icon {
margin-right: 12px;
}
}
}
.login-page-title {
font-size: 18px;
color: #333;
text-align: center;
margin: 24px 0;
}
.login-page-button {
text-align: center;
background: #a4151d;
border-radius: 4px;
position: absolute;
bottom: 40px;
left: 24px;
right: 24px;
box-sizing: border-box;
.van-button {
font-size: 16px;
color: #fff;
background-color: transparent;
border: none;
}
}
}
}
</style>
src/views/user/components/commitTab.vue
View file @ a72891f4
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment