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> <template>
<div class="my-tabbar"> <div class="my-tabbar">
<van-tabbar v-model="activeIndex" active-color="#EE0A24" route> <van-tabbar v-model="activeIndex" active-color="#EE0A24" route>
<van-tabbar-item v-for="item in iconList" :to="item.url" :key="item.title"> <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> <span>{{item.title}}</span>
<template #icon="props"> <template #icon="props">
<img :src="props.active ? item.icon.active : item.icon.inactive" /> <img :src="props.active ? item.icon.active : item.icon.inactive" />
</template> </template>
</van-tabbar-item> </van-tabbar-item>
<!-- <van-tabbar-item icon="search" to="/learn"> <!-- <van-tabbar-item icon="search" to="/learn">
<span>学习项目</span> <span>学习项目</span>
<template #icon="props"> <template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" /> <img :src="props.active ? icon.active : icon.inactive" />
</template> </template>
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="friends-o" to="/admin"> <van-tabbar-item icon="friends-o" to="/admin">
<span>管理员信息</span> <span>管理员信息</span>
<template #icon="props"> <template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" /> <img :src="props.active ? icon.active : icon.inactive" />
</template> </template>
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item icon="setting-o" to="/editPsd"> <van-tabbar-item icon="setting-o" to="/editPsd">
<span>修改密码</span> <span>修改密码</span>
<template #icon="props"> <template #icon="props">
<img :src="props.active ? icon.active : icon.inactive" /> <img :src="props.active ? icon.active : icon.inactive" />
</template> </template>
</van-tabbar-item> --> </van-tabbar-item> -->
</van-tabbar> </van-tabbar>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
active: { active: {
type: String, type: String,
default: "0" default: "0"
} }
}, },
data() { data() {
return { return {
activeIndex: this.active, userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
iconList: [ activeIndex: this.active,
{ iconList: [
url: "/commit", {
title: "观影互动", url: "/commit",
icon: { title: "观影互动",
inactive: require("@/assets/images/applets/commit.png"), icon: {
active: require("@/assets/images/applets/commit-active.png") inactive: require("@/assets/images/applets/commit.png"),
} active: require("@/assets/images/applets/commit-active.png")
}, }
{ },
url: "/learn", {
title: "学习项目", url: "/learn",
icon: { title: "学习项目",
inactive: require("@/assets/images/applets/learn.png"), icon: {
active: require("@/assets/images/applets/learn-active.png") inactive: require("@/assets/images/applets/learn.png"),
} active: require("@/assets/images/applets/learn-active.png")
}, }
{ },
url: "/admin", {
title: "管理员信息", url: "/admin",
icon: { title: "管理员信息",
inactive: require("@/assets/images/applets/admin.png"), icon: {
active: require("@/assets/images/applets/admin-active.png") inactive: require("@/assets/images/applets/admin.png"),
} active: require("@/assets/images/applets/admin-active.png")
}, }
{ },
url: "/editPsd", {
title: "修改密码", url: "/editPsd",
icon: { title: "修改密码",
inactive: require("@/assets/images/applets/editpsd.png"), icon: {
active: require("@/assets/images/applets/editpsd-active.png") inactive: require("@/assets/images/applets/editpsd.png"),
} active: require("@/assets/images/applets/editpsd-active.png")
} }
] }
}; ]
} };
}; },
</script> methods: {
changeHandle(index1,index2) {
<style scoped> // console.log(index1,index2)
.my-tabbar { if(index1 == '观影互动' && index2 == 2 || index1 == '学习项目' && index2 == 17) {
height: 50px; this.$toast('暂无该权限！')
position: fixed; }
bottom: 0; }
left: 0; }
right: 0; };
} </script>
<style scoped>
.my-tabbar {
height: 50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style> </style>
\ No newline at end of file
src/views/guide.vue
View file @ a72891f4
<template> <template>
<div class="login-container"> <div class="login-container">
<div class="login-bg"></div> <div class="login-bg"></div>
<div class="login-page"> <div class="login-page">
<div class="login-page-body"> <div class="login-page-body">
<div class="login-page-title">展板导览</div> <div class="login-page-title">展板导览</div>
<div class="login-page-form"> <div class="login-page-form">
<van-cell-group> <van-cell-group>
<van-field label="展板名称：" v-model="panelName" readonly /> <van-field label="展板名称：" v-model="panelName" readonly />
</van-cell-group> </van-cell-group>
<p>展板导览视频：</p> <van-row>
<!-- <embed type="video/mp4" :src="panelVideo" /> --> <van-col span="8" style="margin-top: 50px;"><div style="vertical-align:middle;font-size:14px;">展板导览视频：</div></van-col>
<video <van-col span="12"> <!-- <embed type="video/mp4" :src="panelVideo" /> -->
placeholder="展板导览视频" controls <video
width="150px" placeholder="展板导览视频" controls
height="100px"> width="150px"
　　　　　　　　<source :src="panelVideo" type="video/mp4" /> height="100px">
　　　　　　　　<source :src="panelVideo" type="video/WebM"> 　　　　　　　<source :src="panelVideo" type="video/mp4" />
　　　　　　</video> 　　　　　　　<source :src="panelVideo" type="video/WebM">
</div> 　　　　　</video></van-col>
</div> </van-row>
</div> </div>
</div> </div>
</template> </div>
<script> </div>
export default { </template>
data() { <script>
return { export default {
url: 'https://www.baidu.com/h5/guide?id=1&name=长征之路&video=2', // 扫描者携带的信息参数 data() {
panelId: '', // 展板id return {
panelName: '', // 展板名称 url: 'https://www.baidu.com/h5/guide?panelId=1&panelName=长征之路&panelVideo=https://www.runoob.com/try/demo_source/movie.mp4', // 扫描者携带的信息参数
panelVideo:'https://www.runoob.com/try/demo_source/movie.mp4', // 展板导览视频地址 panelId: '', // 展板id
}; panelName: '', // 展板名称
}, panelVideo:'', // 展板导览视频地址
created() { u:''
// var url = window.location.href ; //获取url中"?"符后的字串 };
// var cs = this.url.split('?')[1]; //获取?之后的参数字符串 },
//alert(url+'地址');//orderCode=20200721093517378188743943022 created() {
// var cc =''; var url = window.location.href ; // 获取url中"?"符后的字串
// var cs2 = ''; this.u = this.url.split('?')[0];//
// if (cs.length > 0) console.log(this.u)
// { var cs = this.url.split('?')[1]; // 获取?之后的参数字符串
// cs = cs.replace('id=', ''); // 去除参数名称 // alert(url+'地址');//orderCode=20200721093517378188743943022
// var cc =cs.split('&')[0];//获取展板id var cc ='';
// var cs3 = cs.split('&')[1]; var cs2 = '';
// var ccs = cs3.replace('name=', '') // 获取展板名称 if (cs.length > 0)
// var cs1 = cs.split('&')[2];//ocd=20200818103843816416953617735 {
// var cs2 = cs1.replace('video=', '');//20200818103843816416953617735 cs = cs.replace('panelId=', ''); // 去除参数名称
// } var cc =cs.split('&')[0];//获取展板id
// this.panelName = ccs; var cs3 = cs.split('&')[1];
// // this.panelVideo = cs2; var ccs = cs3.replace('panelName=', '') // 去除参数名称
// this.panelId = ccs var cs1 = cs.split('&')[2]; // 获取展板名称
}, var cs2 = cs1.replace('panelVideo=', '');// 获取展板导览视频
methods: { }
this.panelName = ccs;
} this.panelVideo = cs2;
}; this.panelId = cc
</script> this.initData()
<style lang="scss"> },
.login-container { methods: {
width: 100%; initData() {
height: 100%; let vm = this
max-width: 1280px; let param = {
.login-bg { id: this.panelId,
width: 100%; };
height: 100%; vm.$https(
margin: 0 auto; {
background: #a4171d; url: "screen/statistic",
&:before { method: "get",
display: inline-block; authType: this.backToken,
content: ""; },
width: 100%; param
height: 106px; ).catch(function (err) {
// background: url("~@/assets/images/topBox/bg-bottom.png") no-repeat; console.log(err);
background-size: 100% 100%; });
position: absolute; }
bottom: 0; }
left: 0; };
} </script>
&:after { <style lang="scss">
display: inline-block; .login-container {
content: ""; width: 100%;
width: 100%; height: 100%;
height: 421px; max-width: 1280px;
// background: url("~@/assets/images/topBox/bg-top.png") no-repeat; .login-bg {
background-size: 100% 100%; width: 100%;
position: absolute; height: 100%;
top: 0; margin: 0 auto;
left: 0; background: #776d6e;
} &:before {
} display: inline-block;
.login-page { content: "";
height: 580px; width: 100%;
position: absolute; height: 106px;
bottom: 20px; // background: url("~@/assets/images/topBox/bg-bottom.png") no-repeat;
left: 24px; background-size: 100% 100%;
right: 24px; position: absolute;
padding: 24px; bottom: 0;
background: #ffffff; left: 0;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2); }
border-radius: 8px; &:after {
.login-page-form { display: inline-block;
padding-top: 24px; content: "";
.van-field { width: 100%;
background: #f5f5f5; height: 421px;
border-radius: 4px; // background: url("~@/assets/images/topBox/bg-top.png") no-repeat;
margin-bottom: 32px; background-size: 100% 100%;
.van-field__left-icon { position: absolute;
margin-right: 12px; top: 0;
} left: 0;
} }
} }
.login-page-title { .login-page {
font-size: 18px; height: 580px;
color: #333; position: absolute;
text-align: center; bottom: 20px;
margin: 24px 0; left: 24px;
} right: 24px;
.login-page-button { padding: 24px;
text-align: center; background: #f5f5f5;
background: #a4151d; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
border-radius: 4px; border-radius: 8px;
position: absolute; .login-page-form {
bottom: 40px; padding-top: 24px;
left: 24px; .van-field {
right: 24px; background: #f5f5f5;
box-sizing: border-box; border-radius: 4px;
.van-button { margin-bottom: 32px;
font-size: 16px; .van-field__left-icon {
color: #fff; margin-right: 12px;
background-color: transparent; }
border: none; }
} }
} .login-page-title {
} font-size: 18px;
} color: #333;
</style> 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> <template>
<div class="login-container"> <div class="login-container">
<div class="login-bg"></div> <div class="login-bg"></div>
<div class="login-page"> <div class="login-page">
<div class="login-page-body"> <div class="login-page-body">
<div class="login-page-title">客户端登录</div> <div class="login-page-title">客户端登录</div>
<div class="login-page-form"> <div class="login-page-form">
<van-form @submit.native="onSubmit"> <van-form @submit.native="onSubmit">
<van-field <van-field
v-model="userInfo.username" v-model="userInfo.username"
name="用户名" name="用户名"
left-icon="manager" left-icon="manager"
placeholder="请输入用户名" placeholder="请输入用户名"
:rules="[{ required: true, message: '用户名不能为空' }]" :rules="[{ required: true, message: '用户名不能为空' }]"
/> />
<van-field <van-field
v-model="userInfo.password" v-model="userInfo.password"
type="password" type="password"
name="密码" name="密码"
left-icon="lock" left-icon="lock"
placeholder="请输入密码" placeholder="请输入密码"
:rules="[{ required: true, message: '密码不能为空' }]" :rules="[{ required: true, message: '密码不能为空' }]"
/> />
<div class="login-page-button"> <div class="login-page-button">
<van-button type="default" block native-type="submit">登录</van-button> <van-button type="default" block native-type="submit">登录</van-button>
</div> </div>
</van-form> </van-form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import util from "@/utils/index.js"; import util from "@/utils/index.js";
export default { export default {
data() { data() {
return { return {
userInfo: {}, userInfo: {},
}; };
}, },
mounted() {}, mounted() {},
methods: { methods: {
onSubmit() { onSubmit() {
let vm = this; let vm = this;
let param = { let param = {
password: util.encrypt(this.userInfo.password), password: util.encrypt(this.userInfo.password),
username: this.userInfo.username, username: this.userInfo.username,
}; };
vm.$https( vm.$https(
{ {
url: "ajaxLogin", url: "ajaxLogin",
method: "post", method: "post",
authType: this.backToken, authType: this.backToken,
}, },
vm.$qs.stringify(param) vm.$qs.stringify(param)
) )
.then((res) => { .then((res) => {
if (res.data.resultCode === "200") { if (res.data.resultCode === "200") {
let data = res.data; let data = res.data;
if(data.isDefault){ if(data.isDefault){
this.$notify({ this.$notify({
type: 'warning', type: 'warning',
message: '登录成功,为了安全，建议修改密码', message: '登录成功,为了安全，建议修改密码',
duration: 5000 duration: 5000
}) })
} }
const isOpt = data.user.type; const isOpt = +data.user.roleList[0];
sessionStorage.setItem("token", data.token); sessionStorage.setItem("token", data.token);
sessionStorage.setItem("userInfo", JSON.stringify(data.user)); sessionStorage.setItem("userInfo", JSON.stringify(data.user));
// let redirectPath = decodeURIComponent(this.$route.fullPath).split('redirect=')[1] // let redirectPath = decodeURIComponent(this.$route.fullPath).split('redirect=')[1]
if (isOpt == "4") { if (isOpt == 17) {
this.$router.push("/opt"); this.$router.push("/commit");
}else if (isOpt == "2") { }else if (isOpt == 2) {
this.$router.push("/commit"); this.$router.push("/learn");
}else{ }else{
this.$toast.fail("您登录的账号既不是运维账号也不是单位用户账号，不能使用H5的功能"); this.$toast.fail("您登录的账号既不是运维账号也不是单位用户账号，不能使用H5的功能");
} }
} else { } else {
this.$toast.fail(res.data.message); this.$toast.fail(res.data.message);
} }
}) })
.catch(function (err) { .catch(function (err) {
console.log(err); console.log(err);
}); });
}, },
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.login-container { .login-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 1280px; max-width: 1280px;
.login-bg { .login-bg {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
background: #a4171d; background: #a4171d;
&:before { &:before {
display: inline-block; display: inline-block;
content: ""; content: "";
width: 100%; width: 100%;
height: 106px; height: 106px;
background: url("~@/assets/images/topBox/bg-bottom.png") no-repeat; background: url("~@/assets/images/topBox/bg-bottom.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
&:after { &:after {
display: inline-block; display: inline-block;
content: ""; content: "";
width: 100%; width: 100%;
height: 421px; height: 421px;
background: url("~@/assets/images/topBox/bg-top.png") no-repeat; background: url("~@/assets/images/topBox/bg-top.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
} }
.login-page { .login-page {
height: 350px; height: 350px;
position: absolute; position: absolute;
bottom: 58px; bottom: 58px;
left: 24px; left: 24px;
right: 24px; right: 24px;
padding: 24px; padding: 24px;
background: #ffffff; background: #ffffff;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
border-radius: 8px; border-radius: 8px;
.login-page-form { .login-page-form {
padding-top: 24px; padding-top: 24px;
.van-field { .van-field {
background: #f5f5f5; background: #f5f5f5;
border-radius: 4px; border-radius: 4px;
margin-bottom: 32px; margin-bottom: 32px;
.van-field__left-icon { .van-field__left-icon {
margin-right: 12px; margin-right: 12px;
} }
} }
} }
.login-page-title { .login-page-title {
font-size: 18px; font-size: 18px;
color: #333; color: #333;
text-align: center; text-align: center;
margin: 24px 0; margin: 24px 0;
} }
.login-page-button { .login-page-button {
text-align: center; text-align: center;
background: #a4151d; background: #a4151d;
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
left: 24px; left: 24px;
right: 24px; right: 24px;
box-sizing: border-box; box-sizing: border-box;
.van-button { .van-button {
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
} }
} }
} }
</style> </style>
src/views/user/components/commitTab.vue
View file @ a72891f4
<template> <template>
<div class="commit-page-content"> <div class="commit-page-content">
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<div class="field-title"> <div class="field-title">
<span>基本信息</span> <span>基本信息</span>
</div> </div>
<div class="input-box"> <div class="input-box">
<van-field <van-field
class="field-form-item" class="field-form-item"
readonly readonly
clickable clickable
required required
name="boardName" name="boardName"
input-align="right" input-align="right"
:value="form.boardName" :value="form.boardName"
label="展板名称" label="展板名称"
placeholder="请选择展板" placeholder="请选择展板"
:right-icon="showBoard ? 'arrow-up' : 'arrow-down'" :right-icon="showBoard ? 'arrow-up' : 'arrow-down'"
@click="showBoard = true" @click="showBoard = true"
:rules="[{ required: true ,message: '请选择展板' ,trigger:'change'}]" :rules="[{ required: true ,message: '请选择展板' ,trigger:'change'}]"
/> />
<van-popup v-model="showBoard" position="bottom"> <van-popup v-model="showBoard" position="bottom">
<van-picker <van-picker
show-toolbar show-toolbar
:columns="boardNameList" :columns="boardNameList"
@confirm="onConfirmBoard" @confirm="onConfirmBoard"
@cancel="showBoard = false" @cancel="showBoard = false"
/> />
</van-popup> </van-popup>
<van-field <van-field
label="账户名" label="账户名"
v-model="form.username" v-model="form.username"
placeholder="请输入账户名称" placeholder="请输入账户名称"
readonly readonly
input-align="right" input-align="right"
/> />
<van-field <van-field
class="field-form-item" class="field-form-item"
readonly readonly
clickable clickable
required required
name="studyTime" name="studyTime"
input-align="right" input-align="right"
:value="form.studyTime || ''" :value="form.studyTime || ''"
label="学习时间" label="学习时间"
placeholder="请选择学习时间" placeholder="请选择学习时间"
:right-icon="form.studyTime || cellIcon" :right-icon="form.studyTime || cellIcon"
@click="onDisplay" @click="onDisplay"
:rules="[{ required: true ,message: '请选择学习时间',trigger:'change' }]" :rules="[{ required: true ,message: '请选择学习时间',trigger:'change' }]"
/> />
<van-popup v-model="show" position="bottom"> <van-popup v-model="show" position="bottom">
<van-datetime-picker <van-datetime-picker
v-model="currentDate" v-model="currentDate"
type="datetime" type="datetime"
title="选择学习时间" title="选择学习时间"
:formatter="formatter" :formatter="formatter"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="onClose" @cancel="onClose"
/> />
</van-popup> </van-popup>
<van-field <van-field
required required
label="观影人数" label="观影人数"
v-model="form.num" v-model="form.num"
placeholder="请输入观影人数" placeholder="请输入观影人数"
input-align="right" input-align="right"
:rules="[{ pattern: /^[1-9]\d{0,9}$/, message: '请输入正确内容,最多10位数',trigger:'blur'}]" :rules="[{ pattern: /^[1-9]\d{0,9}$/, message: '请输入正确内容,最多10位数',trigger:'blur'}]"
/> />
<!-- <van-field <van-field
required required
label="管理员账号" label="管理员账号"
v-model="form.name" v-model="form.name"
placeholder="请输入管理员账号" placeholder="请输入管理员账号"
input-align="right" input-align="right"
:rules="[{ required: true }]" :rules="[{ required: true }]"
/> />
<van-field <van-field
required required
type="password" type="password"
label="管理员密码" label="管理员密码"
v-model="form.password" v-model="form.password"
placeholder="请输入管理员密码" placeholder="请输入管理员密码"
input-align="right" input-align="right"
:rules="[{ required: true }]" :rules="[{ required: true }]"
/> --> />
</div> </div>
<div class="field-title"> <div class="field-title">
<span>上传视频</span> <span>上传视频</span>
</div> </div>
<div class="field-content"> <div class="field-content">
<div class="upload-content"> <div class="upload-content">
<div class="uplaod-video" style="min-height: 60px"> <div class="uplaod-video" style="min-height: 60px">
<van-uploader <van-uploader
:max-count="3" :max-count="3"
v-model="fileList" v-model="fileList"
accept="video/*" accept="video/*"
:before-read="beforeVideo" :before-read="beforeVideo"
:after-read="uploadVideo" :after-read="uploadVideo"
:before-delete="deleteVideo" :before-delete="deleteVideo"
multiple multiple
> >
<div class="avatar-plus"> <div class="avatar-plus">
<span>+</span> <span>+</span>
</div> </div>
</van-uploader> </van-uploader>
</div> </div>
<div class="tips"> <div class="tips">
<img src="@/assets/images/applets/tip.png" alt /> <img src="@/assets/images/applets/tip.png" alt />
<span> <span>
最多支持上传 最多支持上传
<b>3</b> 段视频,每段大小不能超过 <b>10MB</b>。 <b>3</b> 段视频,每段大小不能超过 <b>10MB</b>。
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="field-title"> <div class="field-title">
<span>上传照片</span> <span>上传照片</span>
</div> </div>
<div class="field-content"> <div class="field-content">
<div class="upload-content"> <div class="upload-content">
<div class="uplaod-video" style="min-height: 60px"> <div class="uplaod-video" style="min-height: 60px">
<van-uploader <van-uploader
:max-count="6" :max-count="6"
accept="image/png, image/jpeg" accept="image/png, image/jpeg"
v-model="imgFileList" v-model="imgFileList"
multiple multiple
:after-read="uploadImg" :after-read="uploadImg"
:before-delete="deleteImg" :before-delete="deleteImg"
> >
<div class="avatar-plus"> <div class="avatar-plus">
<span>+</span> <span>+</span>
</div> </div>
</van-uploader> </van-uploader>
</div> </div>
<div class="tips"> <div class="tips">
<img src="@/assets/images/applets/tip.png" alt /> <img src="@/assets/images/applets/tip.png" alt />
<span> <span>
最多支持上传 最多支持上传
<b>6</b> 张照片 <b>6</b> 张照片
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="field-title"> <div class="field-title">
<span>有话对党说</span> <span>有话对党说</span>
</div> </div>
<div class="field-content"> <div class="field-content">
<van-field <van-field
required required
class="field-textarea" class="field-textarea"
type="textarea" type="textarea"
v-model="form.content" v-model="form.content"
maxlength="500" maxlength="500"
show-word-limit show-word-limit
placeholder="我有话对党说..." placeholder="我有话对党说..."
:rules="[{ required: true ,message: '请输入内容，最多500个字'}]" :rules="[{ required: true ,message: '请输入内容，最多500个字'}]"
/> />
</div> </div>
<div class="commit-page-button"> <div class="commit-page-button">
<van-button type="default" native-type="submit">提交</van-button> <van-button type="default" native-type="submit">提交</van-button>
</div> </div>
</van-form> </van-form>
</div> </div>
</template> </template>
<script> <script>
export default { import util from "@/utils/index.js";
data() { export default {
return { data() {
form: { return {
username: JSON.parse(sessionStorage.getItem("userInfo")).orgName, form: {
organId: JSON.parse(sessionStorage.getItem("userInfo")).orgId, username: JSON.parse(sessionStorage.getItem("userInfo")).orgName,
images: [], // 文件地址 organId: JSON.parse(sessionStorage.getItem("userInfo")).orgId,
videos: [], // 文件地址 images: [], // 文件地址
}, videos: [], // 文件地址
currentDate: new Date(), },
boardList: [], currentDate: new Date(),
boardNameList: [], boardList: [],
showBoard: false, boardNameList: [],
cellIcon: require("@/assets/images/applets/date.png"), showBoard: false,
show: false, cellIcon: require("@/assets/images/applets/date.png"),
fileList: [], // 预览 show: false,
imgFileList: [],// 预览 fileList: [], // 预览
videoIds:[], // 文件ID imgFileList: [],// 预览
imageIds:[] // 文件ID videoIds:[], // 文件ID
}; imageIds:[] // 文件ID
}, };
mounted() { },
this.getBoardList(); mounted() {
}, this.getBoardList();
methods: { },
// 获取所属单位 methods: {
getBoardList() { // 获取所属单位
let vm = this; getBoardList() {
vm.$https({ let vm = this;
url: "exhibitionBoard/getList", vm.$https({
method: "post", url: "exhibitionBoard/getList",
authType: this.backToken, method: "post",
}) authType: this.backToken,
.then((res) => { })
if (res.data.resultCode === "200") { .then((res) => {
vm.boardList = res.data.data; if (res.data.resultCode === "200") {
vm.boardNameList = res.data.data.map((item) => item.name); vm.boardList = res.data.data;
} vm.boardNameList = res.data.data.map((item) => item.name);
}) }
.catch(function (err) { })
console.log(err); .catch(function (err) {
}); console.log(err);
}, });
// 下拉框确认按钮 },
onConfirmBoard(value, index) { // 下拉框确认按钮
this.form.boardName = value; onConfirmBoard(value, index) {
this.form.boardId = this.boardList[index].id; this.form.boardName = value;
this.showBoard = false; this.form.boardId = this.boardList[index].id;
}, this.showBoard = false;
// 打开日历 },
onDisplay() { // 打开日历
this.show = true; onDisplay() {
}, this.show = true;
// 关闭日历 },
onClose() { // 关闭日历
this.show = false; onClose() {
}, this.show = false;
// 确认日历 },
onConfirm(event) { // 确认日历
this.show = false; onConfirm(event) {
this.form.studyTime = this.timeStamp2String(event); this.show = false;
}, this.form.studyTime = this.timeStamp2String(event);
// 格式转化 },
timeStamp2String(time) { // 格式转化
var datetime = new Date(); timeStamp2String(time) {
datetime.setTime(time); var datetime = new Date();
var year = datetime.getFullYear(); datetime.setTime(time);
var month = var year = datetime.getFullYear();
datetime.getMonth() + 1 < 10 var month =
? "0" + (datetime.getMonth() + 1) datetime.getMonth() + 1 < 10
: datetime.getMonth() + 1; ? "0" + (datetime.getMonth() + 1)
var date = : datetime.getMonth() + 1;
datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate(); var date =
var hour = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
datetime.getHours() < 10 var hour =
? "0" + datetime.getHours() datetime.getHours() < 10
: datetime.getHours(); ? "0" + datetime.getHours()
var minute = : datetime.getHours();
datetime.getMinutes() < 10 var minute =
? "0" + datetime.getMinutes() datetime.getMinutes() < 10
: datetime.getMinutes(); ? "0" + datetime.getMinutes()
var second = : datetime.getMinutes();
datetime.getSeconds() < 10 var second =
? "0" + datetime.getSeconds() datetime.getSeconds() < 10
: datetime.getSeconds(); ? "0" + datetime.getSeconds()
return ( : datetime.getSeconds();
year + return (
"-" + year +
month + "-" +
"-" + month +
date + "-" +
" " + date +
hour + " " +
":" + hour +
minute + ":" +
":" + minute +
second ":" +
); second
}, );
formatter(type, value) { },
if (type === "year") { formatter(type, value) {
return `${value}年`; if (type === "year") {
} else if (type === "month") { return `${value}年`;
return `${value}月`; } else if (type === "month") {
} else if (type === "day") { return `${value}月`;
return `${value}日`; } else if (type === "day") {
} else if (type === "hour") { return `${value}日`;
return `${value}时`; } else if (type === "hour") {
} return `${value}时`;
return `${value}分`; }
}, return `${value}分`;
// 删除图片 },
async deleteImg(file,detail){ // 删除图片
this.form.images.splice(detail.index,1) async deleteImg(file,detail){
const id = this.imageIds[detail.index] this.form.images.splice(detail.index,1)
this.imageIds.splice(detail.index,1) const id = this.imageIds[detail.index]
await this.deleteInterface(id) this.imageIds.splice(detail.index,1)
}, await this.deleteInterface(id)
// 上传图片 },
uploadImg(file) { // 上传图片
let param = new FormData(); uploadImg(file) {
if(Array.isArray(file)){ let param = new FormData();
file.forEach(item=>{ if(Array.isArray(file)){
param.append("file", item.file) file.forEach(item=>{
}) param.append("file", item.file)
}else{ })
param.append("file", file.file) }else{
} param.append("file", file.file)
this.uploadImgInterface(param) }
}, this.uploadImgInterface(param)
// 上传图片接口 },
uploadImgInterface(param){ // 上传图片接口
let vm = this; uploadImgInterface(param){
vm.$https( let vm = this;
{ vm.$https(
url: "file/datum/upload", {
method: "post", url: "file/datum/upload",
authType: this.backToken, method: "post",
}, authType: this.backToken,
param },
) param
.then((res) => { )
if(res.data.resultCode==='200'){ .then((res) => {
this.$toast('上传成功') if(res.data.resultCode==='200'){
res.data.data.fileList.forEach(item=>{ this.$toast('上传成功')
this.form.images.push(item.fileUrl); res.data.data.fileList.forEach(item=>{
this.imageIds.push(item.id); this.form.images.push(item.fileUrl);
}) this.imageIds.push(item.id);
}else{ })
this.$toast(res.data.message) }else{
} this.$toast(res.data.message)
}) }
.catch(function (err) { })
console.log(err); .catch(function (err) {
}); console.log(err);
}, });
// 上传视频size限制 },
beforeVideo(file) { // 上传视频size限制
let isOver = true beforeVideo(file) {
if(Array.isArray(file)){ let isOver = true
isOver = file.every(item=>item <= 10*1024*1024) if(Array.isArray(file)){
}else{ isOver = file.every(item=>item <= 10*1024*1024)
isOver = file.size <= 10*1024*1024 }else{
} isOver = file.size <= 10*1024*1024
if(!isOver){ }
this.$toast.fail("上传文件大小不能超过 10MB"); if(!isOver){
return false this.$toast.fail("上传文件大小不能超过 10MB");
}else{ return false
return true }else{
} return true
}, }
// 删除视频 },
async deleteVideo(file,detail){ // 删除视频
this.form.videos.splice(detail.index,1) async deleteVideo(file,detail){
const id = this.videoIds[detail.index] this.form.videos.splice(detail.index,1)
this.videoIds.splice(detail.index,1) const id = this.videoIds[detail.index]
await this.deleteInterface(id) this.videoIds.splice(detail.index,1)
}, await this.deleteInterface(id)
// 上传视频 },
uploadVideo(file) { // 上传视频
let param = new FormData(); uploadVideo(file) {
if(Array.isArray(file)){ let param = new FormData();
file.forEach(item=>{ if(Array.isArray(file)){
param.append("file", item.file) file.forEach(item=>{
}) param.append("file", item.file)
}else{ })
param.append("file", file.file) }else{
} param.append("file", file.file)
this.uploadVideoInterface(param) }
}, this.uploadVideoInterface(param)
// 上传视频接口 },
uploadVideoInterface(param){ // 上传视频接口
let vm = this; uploadVideoInterface(param){
vm.$https( let vm = this;
{ vm.$https(
url: "file/video/upload", {
method: "post", url: "file/video/upload",
authType: this.backToken, method: "post",
}, authType: this.backToken,
param },
) param
.then((res) => { )
if(res.data.resultCode==='200'){ .then((res) => {
this.$toast('上传成功') if(res.data.resultCode==='200'){
res.data.data.fileList.forEach(item=>{ this.$toast('上传成功')
this.form.videos.push(item.fileUrl); res.data.data.fileList.forEach(item=>{
this.videoIds.push(item.id); this.form.videos.push(item.fileUrl);
}) this.videoIds.push(item.id);
}else{ })
this.$toast(res.data.message) }else{
} this.$toast(res.data.message)
}) }
.catch(function (err) { })
console.log(err); .catch(function (err) {
}); console.log(err);
}, });
// 删除接口 },
deleteInterface(id){ // 删除接口
this.$https( deleteInterface(id){
{ this.$https(
url: "file/delete/"+id, {
method: "delete", url: "file/delete/"+id,
authType: this.backToken, method: "delete",
}) authType: this.backToken,
.then((res) => { })
if(res.data.resultCode==='200'){ .then((res) => {
return true if(res.data.resultCode==='200'){
}else{ return true
this.$toast(res.data.message) }else{
return false this.$toast(res.data.message)
} return false
}) }
.catch(function (err) { })
console.log(err); .catch(function (err) {
}); console.log(err);
}, });
},
// 提交数据
onSubmit() { // 提交数据
let vm = this; onSubmit() {
let param = {}; let vm = this;
for (let key in this.form) { let param = {};
if (this.form[key]) { for (let key in this.form) {
param[key] = this.form[key]; if (this.form[key]) {
} param[key] = this.form[key];
} }
param.images = [...param.images, ...param.videos]; }
param.images = param.images.join(","); param.password = util.encrypt(this.form.password),
delete param.videos; param.images = [...param.images, ...param.videos];
vm.$https( param.images = param.images.join(",");
{ delete param.videos;
url: "interaction/add", vm.$https(
method: "post", {
authType: this.backToken, url: "interaction/add",
}, method: "post",
vm.$qs.stringify(param) authType: this.backToken,
) },
.then((res) => { vm.$qs.stringify(param)
if (res.data.resultCode === "200") { )
this.$router.replace({path:"/success",query:{txt:'提交成功',url:'/commit'}}) .then((res) => {
} else { if (res.data.resultCode === "200") {
this.$toast(res.data.message) this.$router.replace({path:"/success",query:{txt:'提交成功',url:'/commit'}})
} } else {
}) this.$toast(res.data.message)
.catch(function (err) { }
console.log(err) })
}); .catch(function (err) {
}, console.log(err)
}, });
}; },
</script> },
};
<style lang="scss" scoped> </script>
.commit-page-content {
padding: 24px 20px; <style lang="scss" scoped>
height: calc(100% - 200px); .commit-page-content {
overflow-y: auto; padding: 24px 20px;
.field-title { height: calc(100% - 200px);
position: relative; overflow-y: auto;
padding-bottom: 20px; .field-title {
span { position: relative;
color: #333; padding-bottom: 20px;
font-size: 16px; span {
line-height: 20px; color: #333;
&:before { font-size: 16px;
content: ""; line-height: 20px;
height: 16px; &:before {
width: 4px; content: "";
border-radius: 1px; height: 16px;
display: inline-block; width: 4px;
background: #a4151d; border-radius: 1px;
position: absolute; display: inline-block;
left: -20px; background: #a4151d;
top: 2px; position: absolute;
} left: -20px;
} top: 2px;
} }
.field-content { }
padding-bottom: 32px; }
.upload-content { .field-content {
.avatar-plus { padding-bottom: 32px;
width: 48px; .upload-content {
height: 48px; .avatar-plus {
line-height: 48px; width: 48px;
text-align: center; height: 48px;
background-color: #f5f5f5; line-height: 48px;
border-radius: 1px; text-align: center;
font-size: 25px; background-color: #f5f5f5;
color: #999; border-radius: 1px;
margin-bottom: 12px; font-size: 25px;
} color: #999;
.tips { margin-bottom: 12px;
img { }
width: 12px; .tips {
height: 12px; img {
vertical-align: middle; width: 12px;
} height: 12px;
span { vertical-align: middle;
margin-left: 4px; }
color: #666; span {
font-size: 12px; margin-left: 4px;
vertical-align: middle; color: #666;
} font-size: 12px;
} vertical-align: middle;
} }
} }
.input-box { }
padding-bottom: 32px; }
.van-cell { .input-box {
line-height: 40px; padding-bottom: 32px;
padding-left: 0; .van-cell {
padding-right: 0; line-height: 40px;
border-bottom: 1px solid #eee; padding-left: 0;
} padding-right: 0;
.van-cell:after { border-bottom: 1px solid #eee;
display: none; }
} .van-cell:after {
} display: none;
.commit-page-button { }
position: fixed; }
bottom: 50px; .commit-page-button {
left: 0; position: fixed;
right: 0; bottom: 50px;
padding: 0 40px; left: 0;
background-color: #fff; right: 0;
box-sizing: border-box; padding: 0 40px;
padding-top: 10px; background-color: #fff;
padding-bottom: 10px; box-sizing: border-box;
width: 100%; padding-top: 10px;
.van-button--normal { padding-bottom: 10px;
background: #a4151d; width: 100%;
border-radius: 4px; .van-button--normal {
height: 40px; background: #a4151d;
width: 100%; border-radius: 4px;
color: #fff; height: 40px;
border: none; width: 100%;
font-size: 16px; color: #fff;
} border: none;
} font-size: 16px;
.van-field__control, }
.van-cell__value { }
color: #333; .van-field__control,
} .van-cell__value {
::v-deep .van-field__error-message { color: #333;
text-align: right; }
background: #fff; ::v-deep .van-field__error-message {
} text-align: right;
::v-deep .field-textarea { background: #fff;
min-height: 80px; }
padding: 0; ::v-deep .field-textarea {
margin-bottom: 150px; min-height: 80px;
.van-field__value { padding: 0;
background-color: #f5f5f5; margin-bottom: 150px;
} .van-field__value {
.van-cell { background-color: #f5f5f5;
padding: 0; }
} .van-cell {
} padding: 0;
::v-deep .van-cell--required::before { }
left: -10px; }
color:#A4151D; ::v-deep .van-cell--required::before {
} left: -10px;
color:#A4151D;
} }
}
</style> </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