Skip to content

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

限制角色页面

parent acd48e7c
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
<template>
<div class="commit-page-content">
<van-form @submit="onSubmit">
<div class="field-title">
<span>基本信息</span>
</div>
<div class="input-box">
<van-field
class="field-form-item"
readonly
clickable
required
name="boardName"
input-align="right"
:value="form.boardName"
label="展板名称"
placeholder="请选择展板"
:right-icon="showBoard ? 'arrow-up' : 'arrow-down'"
@click="showBoard = true"
:rules="[{ required: true ,message: '请选择展板' ,trigger:'change'}]"
/>
<van-popup v-model="showBoard" position="bottom">
<van-picker
show-toolbar
:columns="boardNameList"
@confirm="onConfirmBoard"
@cancel="showBoard = false"
/>
</van-popup>
<van-field
label="账户名"
v-model="form.username"
placeholder="请输入账户名称"
readonly
input-align="right"
/>
<van-field
class="field-form-item"
readonly
clickable
required
name="studyTime"
input-align="right"
:value="form.studyTime || ''"
label="学习时间"
placeholder="请选择学习时间"
:right-icon="form.studyTime || cellIcon"
@click="onDisplay"
:rules="[{ required: true ,message: '请选择学习时间',trigger:'change' }]"
/>
<van-popup v-model="show" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="datetime"
title="选择学习时间"
:formatter="formatter"
@confirm="onConfirm"
@cancel="onClose"
/>
</van-popup>
<van-field
required
label="观影人数"
v-model="form.num"
placeholder="请输入观影人数"
input-align="right"
:rules="[{ pattern: /^[1-9]\d{0,9}$/, message: '请输入正确内容,最多10位数',trigger:'blur'}]"
/>
<!-- <van-field
required
label="管理员账号"
v-model="form.name"
placeholder="请输入管理员账号"
input-align="right"
:rules="[{ required: true }]"
/>
<van-field
required
type="password"
label="管理员密码"
v-model="form.password"
placeholder="请输入管理员密码"
input-align="right"
:rules="[{ required: true }]"
/> -->
</div>
<div class="field-title">
<span>上传视频</span>
</div>
<div class="field-content">
<div class="upload-content">
<div class="uplaod-video" style="min-height: 60px">
<van-uploader
:max-count="3"
v-model="fileList"
accept="video/*"
:before-read="beforeVideo"
:after-read="uploadVideo"
:before-delete="deleteVideo"
multiple
>
<div class="avatar-plus">
<span>+</span>
</div>
</van-uploader>
</div>
<div class="tips">
<img src="@/assets/images/applets/tip.png" alt />
<span>
最多支持上传
<b>3</b> 段视频,每段大小不能超过 <b>10MB</b>。
</span>
</div>
</div>
</div>
<div class="field-title">
<span>上传照片</span>
</div>
<div class="field-content">
<div class="upload-content">
<div class="uplaod-video" style="min-height: 60px">
<van-uploader
:max-count="6"
accept="image/png, image/jpeg"
v-model="imgFileList"
multiple
:after-read="uploadImg"
:before-delete="deleteImg"
>
<div class="avatar-plus">
<span>+</span>
</div>
</van-uploader>
</div>
<div class="tips">
<img src="@/assets/images/applets/tip.png" alt />
<span>
最多支持上传
<b>6</b> 张照片
</span>
</div>
</div>
</div>
<div class="field-title">
<span>有话对党说</span>
</div>
<div class="field-content">
<van-field
required
class="field-textarea"
type="textarea"
v-model="form.content"
maxlength="500"
show-word-limit
placeholder="我有话对党说..."
:rules="[{ required: true ,message: '请输入内容，最多500个字'}]"
/>
</div>
<div class="commit-page-button">
<van-button type="default" native-type="submit">提交</van-button>
</div>
</van-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: JSON.parse(sessionStorage.getItem("userInfo")).orgName,
organId: JSON.parse(sessionStorage.getItem("userInfo")).orgId,
images: [], // 文件地址
videos: [], // 文件地址
},
currentDate: new Date(),
boardList: [],
boardNameList: [],
showBoard: false,
cellIcon: require("@/assets/images/applets/date.png"),
show: false,
fileList: [], // 预览
imgFileList: [],// 预览
videoIds:[], // 文件ID
imageIds:[] // 文件ID
};
},
mounted() {
this.getBoardList();
},
methods: {
// 获取所属单位
getBoardList() {
let vm = this;
vm.$https({
url: "exhibitionBoard/getList",
method: "post",
authType: this.backToken,
})
.then((res) => {
if (res.data.resultCode === "200") {
vm.boardList = res.data.data;
vm.boardNameList = res.data.data.map((item) => item.name);
}
})
.catch(function (err) {
console.log(err);
});
},
// 下拉框确认按钮
onConfirmBoard(value, index) {
this.form.boardName = value;
this.form.boardId = this.boardList[index].id;
this.showBoard = false;
},
// 打开日历
onDisplay() {
this.show = true;
},
// 关闭日历
onClose() {
this.show = false;
},
// 确认日历
onConfirm(event) {
this.show = false;
this.form.studyTime = this.timeStamp2String(event);
},
// 格式转化
timeStamp2String(time) {
var datetime = new Date();
datetime.setTime(time);
var year = datetime.getFullYear();
var month =
datetime.getMonth() + 1 < 10
? "0" + (datetime.getMonth() + 1)
: datetime.getMonth() + 1;
var date =
datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
var hour =
datetime.getHours() < 10
? "0" + datetime.getHours()
: datetime.getHours();
var minute =
datetime.getMinutes() < 10
? "0" + datetime.getMinutes()
: datetime.getMinutes();
var second =
datetime.getSeconds() < 10
? "0" + datetime.getSeconds()
: datetime.getSeconds();
return (
year +
"-" +
month +
"-" +
date +
" " +
hour +
":" +
minute +
":" +
second
);
},
formatter(type, value) {
if (type === "year") {
return `${value}年`;
} else if (type === "month") {
return `${value}月`;
} else if (type === "day") {
return `${value}日`;
} else if (type === "hour") {
return `${value}时`;
}
return `${value}分`;
},
// 删除图片
async deleteImg(file,detail){
this.form.images.splice(detail.index,1)
const id = this.imageIds[detail.index]
this.imageIds.splice(detail.index,1)
await this.deleteInterface(id)
},
// 上传图片
uploadImg(file) {
let param = new FormData();
if(Array.isArray(file)){
file.forEach(item=>{
param.append("file", item.file)
})
}else{
param.append("file", file.file)
}
this.uploadImgInterface(param)
},
// 上传图片接口
uploadImgInterface(param){
let vm = this;
vm.$https(
{
url: "file/datum/upload",
method: "post",
authType: this.backToken,
},
param
)
.then((res) => {
if(res.data.resultCode==='200'){
this.$toast('上传成功')
res.data.data.fileList.forEach(item=>{
this.form.images.push(item.fileUrl);
this.imageIds.push(item.id);
})
}else{
this.$toast(res.data.message)
}
})
.catch(function (err) {
console.log(err);
});
},
// 上传视频size限制
beforeVideo(file) {
let isOver = true
if(Array.isArray(file)){
isOver = file.every(item=>item <= 10*1024*1024)
}else{
isOver = file.size <= 10*1024*1024
}
if(!isOver){
this.$toast.fail("上传文件大小不能超过 10MB");
return false
}else{
return true
}
},
// 删除视频
async deleteVideo(file,detail){
this.form.videos.splice(detail.index,1)
const id = this.videoIds[detail.index]
this.videoIds.splice(detail.index,1)
await this.deleteInterface(id)
},
// 上传视频
uploadVideo(file) {
let param = new FormData();
if(Array.isArray(file)){
file.forEach(item=>{
param.append("file", item.file)
})
}else{
param.append("file", file.file)
}
this.uploadVideoInterface(param)
},
// 上传视频接口
uploadVideoInterface(param){
let vm = this;
vm.$https(
{
url: "file/video/upload",
method: "post",
authType: this.backToken,
},
param
)
.then((res) => {
if(res.data.resultCode==='200'){
this.$toast('上传成功')
res.data.data.fileList.forEach(item=>{
this.form.videos.push(item.fileUrl);
this.videoIds.push(item.id);
})
}else{
this.$toast(res.data.message)
}
})
.catch(function (err) {
console.log(err);
});
},
// 删除接口
deleteInterface(id){
this.$https(
{
url: "file/delete/"+id,
method: "delete",
authType: this.backToken,
})
.then((res) => {
if(res.data.resultCode==='200'){
return true
}else{
this.$toast(res.data.message)
return false
}
})
.catch(function (err) {
console.log(err);
});
},
// 提交数据
onSubmit() {
let vm = this;
let param = {};
for (let key in this.form) {
if (this.form[key]) {
param[key] = this.form[key];
}
}
param.images = [...param.images, ...param.videos];
param.images = param.images.join(",");
delete param.videos;
vm.$https(
{
url: "interaction/add",
method: "post",
authType: this.backToken,
},
vm.$qs.stringify(param)
)
.then((res) => {
if (res.data.resultCode === "200") {
this.$router.replace({path:"/success",query:{txt:'提交成功',url:'/commit'}})
} else {
this.$toast(res.data.message)
}
})
.catch(function (err) {
console.log(err)
});
},
},
};
</script>
<style lang="scss" scoped>
.commit-page-content {
padding: 24px 20px;
height: calc(100% - 200px);
overflow-y: auto;
.field-title {
position: relative;
padding-bottom: 20px;
span {
color: #333;
font-size: 16px;
line-height: 20px;
&:before {
content: "";
height: 16px;
width: 4px;
border-radius: 1px;
display: inline-block;
background: #a4151d;
position: absolute;
left: -20px;
top: 2px;
}
}
}
.field-content {
padding-bottom: 32px;
.upload-content {
.avatar-plus {
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
background-color: #f5f5f5;
border-radius: 1px;
font-size: 25px;
color: #999;
margin-bottom: 12px;
}
.tips {
img {
width: 12px;
height: 12px;
vertical-align: middle;
}
span {
margin-left: 4px;
color: #666;
font-size: 12px;
vertical-align: middle;
}
}
}
}
.input-box {
padding-bottom: 32px;
.van-cell {
line-height: 40px;
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid #eee;
}
.van-cell:after {
display: none;
}
}
.commit-page-button {
position: fixed;
bottom: 50px;
left: 0;
right: 0;
padding: 0 40px;
background-color: #fff;
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
.van-button--normal {
background: #a4151d;
border-radius: 4px;
height: 40px;
width: 100%;
color: #fff;
border: none;
font-size: 16px;
}
}
.van-field__control,
.van-cell__value {
color: #333;
}
::v-deep .van-field__error-message {
text-align: right;
background: #fff;
}
::v-deep .field-textarea {
min-height: 80px;
padding: 0;
margin-bottom: 150px;
.van-field__value {
background-color: #f5f5f5;
}
.van-cell {
padding: 0;
}
}
::v-deep .van-cell--required::before {
left: -10px;
color:#A4151D;
}
}
<template>
<div class="commit-page-content">
<van-form @submit="onSubmit">
<div class="field-title">
<span>基本信息</span>
</div>
<div class="input-box">
<van-field
class="field-form-item"
readonly
clickable
required
name="boardName"
input-align="right"
:value="form.boardName"
label="展板名称"
placeholder="请选择展板"
:right-icon="showBoard ? 'arrow-up' : 'arrow-down'"
@click="showBoard = true"
:rules="[{ required: true ,message: '请选择展板' ,trigger:'change'}]"
/>
<van-popup v-model="showBoard" position="bottom">
<van-picker
show-toolbar
:columns="boardNameList"
@confirm="onConfirmBoard"
@cancel="showBoard = false"
/>
</van-popup>
<van-field
label="账户名"
v-model="form.username"
placeholder="请输入账户名称"
readonly
input-align="right"
/>
<van-field
class="field-form-item"
readonly
clickable
required
name="studyTime"
input-align="right"
:value="form.studyTime || ''"
label="学习时间"
placeholder="请选择学习时间"
:right-icon="form.studyTime || cellIcon"
@click="onDisplay"
:rules="[{ required: true ,message: '请选择学习时间',trigger:'change' }]"
/>
<van-popup v-model="show" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="datetime"
title="选择学习时间"
:formatter="formatter"
@confirm="onConfirm"
@cancel="onClose"
/>
</van-popup>
<van-field
required
label="观影人数"
v-model="form.num"
placeholder="请输入观影人数"
input-align="right"
:rules="[{ pattern: /^[1-9]\d{0,9}$/, message: '请输入正确内容,最多10位数',trigger:'blur'}]"
/>
<van-field
required
label="管理员账号"
v-model="form.name"
placeholder="请输入管理员账号"
input-align="right"
:rules="[{ required: true }]"
/>
<van-field
required
type="password"
label="管理员密码"
v-model="form.password"
placeholder="请输入管理员密码"
input-align="right"
:rules="[{ required: true }]"
/>
</div>
<div class="field-title">
<span>上传视频</span>
</div>
<div class="field-content">
<div class="upload-content">
<div class="uplaod-video" style="min-height: 60px">
<van-uploader
:max-count="3"
v-model="fileList"
accept="video/*"
:before-read="beforeVideo"
:after-read="uploadVideo"
:before-delete="deleteVideo"
multiple
>
<div class="avatar-plus">
<span>+</span>
</div>
</van-uploader>
</div>
<div class="tips">
<img src="@/assets/images/applets/tip.png" alt />
<span>
最多支持上传
<b>3</b> 段视频,每段大小不能超过 <b>10MB</b>。
</span>
</div>
</div>
</div>
<div class="field-title">
<span>上传照片</span>
</div>
<div class="field-content">
<div class="upload-content">
<div class="uplaod-video" style="min-height: 60px">
<van-uploader
:max-count="6"
accept="image/png, image/jpeg"
v-model="imgFileList"
multiple
:after-read="uploadImg"
:before-delete="deleteImg"
>
<div class="avatar-plus">
<span>+</span>
</div>
</van-uploader>
</div>
<div class="tips">
<img src="@/assets/images/applets/tip.png" alt />
<span>
最多支持上传
<b>6</b> 张照片
</span>
</div>
</div>
</div>
<div class="field-title">
<span>有话对党说</span>
</div>
<div class="field-content">
<van-field
required
class="field-textarea"
type="textarea"
v-model="form.content"
maxlength="500"
show-word-limit
placeholder="我有话对党说..."
:rules="[{ required: true ,message: '请输入内容，最多500个字'}]"
/>
</div>
<div class="commit-page-button">
<van-button type="default" native-type="submit">提交</van-button>
</div>
</van-form>
</div>
</template>
<script>
import util from "@/utils/index.js";
export default {
data() {
return {
form: {
username: JSON.parse(sessionStorage.getItem("userInfo")).orgName,
organId: JSON.parse(sessionStorage.getItem("userInfo")).orgId,
images: [], // 文件地址
videos: [], // 文件地址
},
currentDate: new Date(),
boardList: [],
boardNameList: [],
showBoard: false,
cellIcon: require("@/assets/images/applets/date.png"),
show: false,
fileList: [], // 预览
imgFileList: [],// 预览
videoIds:[], // 文件ID
imageIds:[] // 文件ID
};
},
mounted() {
this.getBoardList();
},
methods: {
// 获取所属单位
getBoardList() {
let vm = this;
vm.$https({
url: "exhibitionBoard/getList",
method: "post",
authType: this.backToken,
})
.then((res) => {
if (res.data.resultCode === "200") {
vm.boardList = res.data.data;
vm.boardNameList = res.data.data.map((item) => item.name);
}
})
.catch(function (err) {
console.log(err);
});
},
// 下拉框确认按钮
onConfirmBoard(value, index) {
this.form.boardName = value;
this.form.boardId = this.boardList[index].id;
this.showBoard = false;
},
// 打开日历
onDisplay() {
this.show = true;
},
// 关闭日历
onClose() {
this.show = false;
},
// 确认日历
onConfirm(event) {
this.show = false;
this.form.studyTime = this.timeStamp2String(event);
},
// 格式转化
timeStamp2String(time) {
var datetime = new Date();
datetime.setTime(time);
var year = datetime.getFullYear();
var month =
datetime.getMonth() + 1 < 10
? "0" + (datetime.getMonth() + 1)
: datetime.getMonth() + 1;
var date =
datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
var hour =
datetime.getHours() < 10
? "0" + datetime.getHours()
: datetime.getHours();
var minute =
datetime.getMinutes() < 10
? "0" + datetime.getMinutes()
: datetime.getMinutes();
var second =
datetime.getSeconds() < 10
? "0" + datetime.getSeconds()
: datetime.getSeconds();
return (
year +
"-" +
month +
"-" +
date +
" " +
hour +
":" +
minute +
":" +
second
);
},
formatter(type, value) {
if (type === "year") {
return `${value}年`;
} else if (type === "month") {
return `${value}月`;
} else if (type === "day") {
return `${value}日`;
} else if (type === "hour") {
return `${value}时`;
}
return `${value}分`;
},
// 删除图片
async deleteImg(file,detail){
this.form.images.splice(detail.index,1)
const id = this.imageIds[detail.index]
this.imageIds.splice(detail.index,1)
await this.deleteInterface(id)
},
// 上传图片
uploadImg(file) {
let param = new FormData();
if(Array.isArray(file)){
file.forEach(item=>{
param.append("file", item.file)
})
}else{
param.append("file", file.file)
}
this.uploadImgInterface(param)
},
// 上传图片接口
uploadImgInterface(param){
let vm = this;
vm.$https(
{
url: "file/datum/upload",
method: "post",
authType: this.backToken,
},
param
)
.then((res) => {
if(res.data.resultCode==='200'){
this.$toast('上传成功')
res.data.data.fileList.forEach(item=>{
this.form.images.push(item.fileUrl);
this.imageIds.push(item.id);
})
}else{
this.$toast(res.data.message)
}
})
.catch(function (err) {
console.log(err);
});
},
// 上传视频size限制
beforeVideo(file) {
let isOver = true
if(Array.isArray(file)){
isOver = file.every(item=>item <= 10*1024*1024)
}else{
isOver = file.size <= 10*1024*1024
}
if(!isOver){
this.$toast.fail("上传文件大小不能超过 10MB");
return false
}else{
return true
}
},
// 删除视频
async deleteVideo(file,detail){
this.form.videos.splice(detail.index,1)
const id = this.videoIds[detail.index]
this.videoIds.splice(detail.index,1)
await this.deleteInterface(id)
},
// 上传视频
uploadVideo(file) {
let param = new FormData();
if(Array.isArray(file)){
file.forEach(item=>{
param.append("file", item.file)
})
}else{
param.append("file", file.file)
}
this.uploadVideoInterface(param)
},
// 上传视频接口
uploadVideoInterface(param){
let vm = this;
vm.$https(
{
url: "file/video/upload",
method: "post",
authType: this.backToken,
},
param
)
.then((res) => {
if(res.data.resultCode==='200'){
this.$toast('上传成功')
res.data.data.fileList.forEach(item=>{
this.form.videos.push(item.fileUrl);
this.videoIds.push(item.id);
})
}else{
this.$toast(res.data.message)
}
})
.catch(function (err) {
console.log(err);
});
},
// 删除接口
deleteInterface(id){
this.$https(
{
url: "file/delete/"+id,
method: "delete",
authType: this.backToken,
})
.then((res) => {
if(res.data.resultCode==='200'){
return true
}else{
this.$toast(res.data.message)
return false
}
})
.catch(function (err) {
console.log(err);
});
},
// 提交数据
onSubmit() {
let vm = this;
let param = {};
for (let key in this.form) {
if (this.form[key]) {
param[key] = this.form[key];
}
}
param.password = util.encrypt(this.form.password),
param.images = [...param.images, ...param.videos];
param.images = param.images.join(",");
delete param.videos;
vm.$https(
{
url: "interaction/add",
method: "post",
authType: this.backToken,
},
vm.$qs.stringify(param)
)
.then((res) => {
if (res.data.resultCode === "200") {
this.$router.replace({path:"/success",query:{txt:'提交成功',url:'/commit'}})
} else {
this.$toast(res.data.message)
}
})
.catch(function (err) {
console.log(err)
});
},
},
};
</script>
<style lang="scss" scoped>
.commit-page-content {
padding: 24px 20px;
height: calc(100% - 200px);
overflow-y: auto;
.field-title {
position: relative;
padding-bottom: 20px;
span {
color: #333;
font-size: 16px;
line-height: 20px;
&:before {
content: "";
height: 16px;
width: 4px;
border-radius: 1px;
display: inline-block;
background: #a4151d;
position: absolute;
left: -20px;
top: 2px;
}
}
}
.field-content {
padding-bottom: 32px;
.upload-content {
.avatar-plus {
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
background-color: #f5f5f5;
border-radius: 1px;
font-size: 25px;
color: #999;
margin-bottom: 12px;
}
.tips {
img {
width: 12px;
height: 12px;
vertical-align: middle;
}
span {
margin-left: 4px;
color: #666;
font-size: 12px;
vertical-align: middle;
}
}
}
}
.input-box {
padding-bottom: 32px;
.van-cell {
line-height: 40px;
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid #eee;
}
.van-cell:after {
display: none;
}
}
.commit-page-button {
position: fixed;
bottom: 50px;
left: 0;
right: 0;
padding: 0 40px;
background-color: #fff;
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
.van-button--normal {
background: #a4151d;
border-radius: 4px;
height: 40px;
width: 100%;
color: #fff;
border: none;
font-size: 16px;
}
}
.van-field__control,
.van-cell__value {
color: #333;
}
::v-deep .van-field__error-message {
text-align: right;
background: #fff;
}
::v-deep .field-textarea {
min-height: 80px;
padding: 0;
margin-bottom: 150px;
.van-field__value {
background-color: #f5f5f5;
}
.van-cell {
padding: 0;
}
}
::v-deep .van-cell--required::before {
left: -10px;
color:#A4151D;
}
}
</style>
\ No newline at end of file
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