mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 19:36:43 +08:00
414 lines
14 KiB
Vue
414 lines
14 KiB
Vue
<template>
|
||
|
||
<div>
|
||
<div class="float-tools">
|
||
|
||
<div class="float-tool-icon" style="margin-bottom:2px" @click="toNeedCourse" v-if="identity>1">
|
||
<!-- <svg-icon class-name="icon" icon-class="lessons"></svg-icon> -->
|
||
<div class="float-img">
|
||
<el-tooltip popper-class="popper-class" effect="dark" content="做课程" placement="top-start">
|
||
<img :src="`${webBaseUrl}/images/explo.png`" alt="">
|
||
</el-tooltip>
|
||
</div>
|
||
<!-- <span>做课程</span> -->
|
||
</div>
|
||
<div class="float-tool-icon" @click="$refs.addQuestion.askQuestionDialog = true">
|
||
<!-- <svg-icon class-name="icon" icon-class="problem"></svg-icon> -->
|
||
<div class="float-img" title="提问题">
|
||
<el-tooltip popper-class="popper-class" effect="dark" content="提问题" placement="top-start">
|
||
<img :src="`${webBaseUrl}/images/issue.png`" alt="">
|
||
</el-tooltip>
|
||
</div>
|
||
<!-- <span>提问题</span> -->
|
||
</div>
|
||
<div class="float-tool-icon" @click="toAddArticle()">
|
||
<!-- <svg-icon class-name="icon" icon-class="essay"></svg-icon> -->
|
||
<div class="float-img" title="写文章">
|
||
<el-tooltip popper-class="popper-class" effect="dark" content="写文章" placement="top-start">
|
||
<img :src="`${webBaseUrl}/images/essay.png`" alt="">
|
||
</el-tooltip>
|
||
</div>
|
||
<!-- <span>写文章</span> -->
|
||
</div>
|
||
<div class="float-tool-icon" @click="showFeedback()">
|
||
<!-- <svg-icon class-name="icon" icon-class="agree"></svg-icon> -->
|
||
<div class="float-img" title="提意见">
|
||
<el-tooltip popper-class="popper-class" effect="dark" content="提意见" placement="top-start">
|
||
<img :src="`${webBaseUrl}/images/opinion.png`" alt="">
|
||
</el-tooltip>
|
||
</div>
|
||
<!-- <span>提意见</span> -->
|
||
</div>
|
||
<div class="float-tool-icon" @click="infoShow=true">
|
||
<!-- <svg-icon class-name="icon" icon-class="server"></svg-icon> -->
|
||
<div class="float-img" title="联系我们">
|
||
<el-tooltip popper-class="popper-class" effect="dark" content="联系我们" placement="top-start">
|
||
<img :src="`${webBaseUrl}/images/contact.png`" alt="">
|
||
</el-tooltip>
|
||
</div>
|
||
<!-- <span>联系我们</span> -->
|
||
</div>
|
||
<div class="float-tool-icon" style="margin-top:2px" @click="backtop">
|
||
<!-- <svg-icon class-name="icon" icon-class="top"></svg-icon> -->
|
||
<div class="float-img" title="返回顶部">
|
||
<el-tooltip popper-class="popper-class" effect="dark" content="返回顶部" placement="top-start">
|
||
<img :src="`${webBaseUrl}/images/back.png`" alt="">
|
||
</el-tooltip>
|
||
</div>
|
||
<!-- <span>返回顶部</span> -->
|
||
</div>
|
||
</div>
|
||
<!-- <div class="float-tools">
|
||
<el-tooltip class="item" effect="light" content="返回顶部" placement="left">
|
||
<div class="float-tool" @click="backtop">
|
||
<div class="float-tool-icon">
|
||
<svg-icon class-name="icon" icon-class="top"></svg-icon>
|
||
</div>
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip class="item" effect="light" content="做课程" placement="left">
|
||
<div class="float-tool">
|
||
<div class="float-tool-icon">
|
||
<svg-icon class-name="icon" icon-class="lessons"></svg-icon>
|
||
</div>
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip class="item" effect="light" content="提问题" placement="left">
|
||
<div @click="$refs.addQuestion.askQuestionDialog = true" class="float-tool">
|
||
<div class="float-tool-icon">
|
||
<svg-icon class-name="icon" icon-class="problem"></svg-icon>
|
||
</div>
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip class="item" effect="light" content="写文章" placement="left">
|
||
<div class="float-tool">
|
||
<div class="float-tool-icon">
|
||
<router-link to="/article/add">
|
||
<svg-icon class-name="icon" icon-class="essay"></svg-icon>
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip class="item" effect="light" content="提意见" placement="left">
|
||
<div @click="showFeedback()" class="float-tool">
|
||
<svg-icon class-name="icon" icon-class="agree"></svg-icon>
|
||
</div>
|
||
</el-tooltip>
|
||
<div class="float-tool" @click="infoShow=true" style="height: 200px;">
|
||
<div>
|
||
<div class="float-tool-icon"><svg-icon class-name="icon" icon-class="server"></svg-icon></div>
|
||
<div class="concatOur">联系我们</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- </div> -->
|
||
<el-dialog title="联系我们" :close-on-click-modal="false" :visible.sync="infoShow" width="800px" custom-class="g-dialog">
|
||
<el-form :model="feedback" size="medium" label-width="100px">
|
||
<el-form-item label="姓名:" >李玉冰</el-form-item>
|
||
<el-form-item label="工号:">00004409</el-form-item>
|
||
<el-form-item label="电话:">010414134</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="infoShow= false">关闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog title="提交意见" :close-on-click-modal="false" :visible.sync="feedbackDlgShow" width="800px" custom-class="g-dialog">
|
||
<el-form ref="feedbackForm" :model="feedback" :rules="feedbackRules" size="medium" label-width="100px">
|
||
<el-form-item label="意见类型" prop="type">
|
||
<el-select v-model="feedback.type" placeholder="请选择意见类型">
|
||
<el-option label="关于内容" value="关于内容"></el-option>
|
||
<el-option label="关于平台操作" value="关于平台操作"></el-option>
|
||
<el-option label="其他" value="其他"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="描述" prop="content">
|
||
<el-input v-model="feedback.content" rows="10" type="textarea" placeholder="尽量的详细描述问题" :maxlength="500" show-word-limit clearable :style="{width: '100%'}"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="feedbackDlgShow= false">取 消</el-button>
|
||
<el-button type="primary" @click="submitFeedback">提 交</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<addQuestion ref="addQuestion" @sure="sure"></addQuestion>
|
||
<el-dialog title="创建文章" :visible.sync="diagSync" top="14vh" :close-on-click-modal="false" width="900px" custom-class="g-dialog">
|
||
<editItems v-if="diagSync" :jumpLimit="false" :editForm="{}" @success="saveSuccess"></editItems>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import WxEditor from "@/components/Editor/index.vue";
|
||
import addQuestion from '@/components/Qa/addQuestion.vue'
|
||
import feedbackApi from '@/api/modules/feedback.js'
|
||
import editItems from '@/components/Article/editItems.vue';
|
||
import { mapGetters } from 'vuex';
|
||
export default {
|
||
components:{WxEditor,addQuestion,editItems},
|
||
data() {
|
||
return {
|
||
infoShow:false,
|
||
feedback:{
|
||
type:'',
|
||
content:''
|
||
},
|
||
feedbackRules:{
|
||
type: [{ required: true, message: '请选择意见类型', trigger: 'blur' }],
|
||
content: [{ required: true, message: '请输入意见描述', trigger: 'blur' }]
|
||
},
|
||
feedbackDlgShow:false,
|
||
diagSync:false,
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['identity','userInfo'])
|
||
},
|
||
methods: {
|
||
saveSuccess(){
|
||
// this.$emit('update',true);
|
||
this.diagSync = false;
|
||
},
|
||
toPage(url) {
|
||
this.$router.push({ path: url })
|
||
},
|
||
showFeedback(){
|
||
this.feedback.type = '';
|
||
this.feedback.content = '';
|
||
this.feedbackDlgShow=true;
|
||
},
|
||
submitFeedback(){
|
||
this.$refs.feedbackForm.validate(valid => {
|
||
if (valid) {
|
||
feedbackApi.save(this.feedback).then(res => {
|
||
if (res.status == 200) {
|
||
this.$message(
|
||
{
|
||
type:'success',
|
||
message:'提交意见成功'
|
||
});
|
||
this.feedbackDlgShow=false;
|
||
|
||
let event = {
|
||
key: "Feedback",//后台的事件key
|
||
title: "意见反馈",//事件的标题
|
||
parameters:"",//用户自定义参数 name:value,name:value
|
||
content: '意见反馈',//事件的内容
|
||
objId: res.result.id,//关联的id
|
||
objType:'99',//关联的类型
|
||
objInfo: "意见反馈",
|
||
aid: this.userInfo.aid, //当前登录人的id
|
||
aname: this.userInfo.name,//当前人的姓名
|
||
status: 1 //状态，直接写1
|
||
}
|
||
this.$store.dispatch("userTrigger", event);
|
||
} else {
|
||
this.$message({
|
||
type:'error',
|
||
message:'提交意见失败'
|
||
});
|
||
}
|
||
}).catch(err=>{
|
||
this.message({
|
||
message:'提交意见失败',
|
||
type:'error'
|
||
})
|
||
});
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 回到顶部功能实现过程：
|
||
* 1. 获取页面当前距离顶部的滚动距离（虽然IE不常用了，但还是需要考虑一下兼容性的）
|
||
* 2. 计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是做一个减法
|
||
* 3. 用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
|
||
* 4. 最后记得在移动到顶部时，清除定时器
|
||
*/
|
||
backtop() {
|
||
var timer = setInterval(function () {
|
||
let osTop =
|
||
document.documentElement.scrollTop || document.body.scrollTop
|
||
let ispeed = Math.floor(-osTop / 5)
|
||
document.documentElement.scrollTop = document.body.scrollTop =
|
||
osTop + ispeed
|
||
this.isTop = true
|
||
if (osTop === 0) {
|
||
clearInterval(timer)
|
||
}
|
||
}, 30)
|
||
},
|
||
sure(){
|
||
this.$emit('sure',true)
|
||
},
|
||
toAddArticle(){
|
||
this.diagSync=true;
|
||
// this.$router.push('/article/add')
|
||
},
|
||
toNeedCourse(){
|
||
// 需要先切换标签
|
||
console.log('this.identity='+this.identity);
|
||
if(this.identity==5 || this.identity==2){
|
||
this.$store.dispatch('SetCurIdentity',2);
|
||
// this.$router.push('/need/course?open=new');
|
||
location.href =`${this.webBaseUrl}/need/course?open=new`
|
||
}else if(this.identity==3){
|
||
this.$store.dispatch('SetCurIdentity',3);
|
||
this.$router.push('/course/manage?open=new');
|
||
}
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.popper-class{
|
||
background-color: #ccc;
|
||
}
|
||
.float-tools{
|
||
position: fixed;
|
||
// background: white;
|
||
// box-shadow:0px 0px 10px #999;
|
||
border-radius: 4px;
|
||
// border: 1px solid #f0f0f0;
|
||
right: 15px;//由24修改为15
|
||
bottom: 126px;
|
||
// padding:0 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
z-index: 999;
|
||
.float-tool-icon{
|
||
background: white;
|
||
padding:8px;
|
||
cursor: pointer;
|
||
// padding: 8px 0;
|
||
// border-bottom: 1px solid #999;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size:12px;
|
||
font-weight: 600;
|
||
&:last-of-type{
|
||
border-bottom: 0;
|
||
}
|
||
span{
|
||
padding-top: 5px;
|
||
}
|
||
.float-img{
|
||
width: 16px;
|
||
height: 16px;
|
||
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.svg-icon{
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
// .icon{
|
||
// width: 20px;
|
||
// height: 20px;
|
||
// }
|
||
// .float-tools {
|
||
// position: fixed;
|
||
// right: 10px;
|
||
// bottom: 40px;
|
||
// padding:0 10px;
|
||
// .float-tool {
|
||
// padding: 2px;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// width: 55px;
|
||
// height: 55px;
|
||
// border-radius: 65px;
|
||
// text-align: center;
|
||
// color: #409eff;
|
||
// text-align: center;
|
||
// font-size: 20px;
|
||
// box-shadow: 0 0 6px rgb(0 0 0 / 12%);
|
||
// cursor: pointer;
|
||
// z-index: 5;
|
||
// background-color: transparent;
|
||
// margin-top: 15px;
|
||
// >.svg-icon{
|
||
// padding: 12px;
|
||
// border-radius: 50%;
|
||
// box-sizing: content-box;
|
||
// background: rgba(192,192,192,.3);
|
||
// }
|
||
// .float-tool-icon{
|
||
// padding: 12px;
|
||
// // line-height: 65px;
|
||
// display: flex;
|
||
// // justify-content: center;
|
||
// align-items: center;
|
||
// background: rgba(192,192,192,.3);
|
||
// border-radius: 50%;
|
||
// a{
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// }
|
||
// }
|
||
// }
|
||
// .float-tool:last-of-type{
|
||
// padding: 5px;
|
||
// >div{
|
||
// height: 100%;
|
||
// width: 100%;
|
||
// border-radius: 65px;
|
||
// background: rgba(192,192,192,.3);
|
||
// background-blend-mode: multiply;
|
||
// flex-direction: column;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
// .float-tool-icon{
|
||
// background: transparent;
|
||
// }
|
||
// .concatOur{
|
||
// padding: 0px 5px;
|
||
// // text-align: center;
|
||
// writing-mode: horizontal-tb;
|
||
// // writing-mode:tb-rl;
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
// .avatar-uploader .el-upload {
|
||
// border: 1px dashed #d9d9d9;
|
||
// border-radius: 6px;
|
||
// cursor: pointer;
|
||
// position: relative;
|
||
// overflow: hidden;
|
||
// }
|
||
// .avatar-uploader .el-upload--picture-card{
|
||
// width: 200px;
|
||
// }
|
||
// .avatar-uploader .el-upload:hover {
|
||
// border-color: #409EFF;
|
||
// }
|
||
// .avatar-uploader-icon {
|
||
// font-size: 28px;
|
||
// color: #8c939d;
|
||
// text-align: center;
|
||
// margin-top: 50px;
|
||
// display: block;
|
||
// }
|
||
// .icon-text{
|
||
// font-size: 14px;
|
||
// display: block;
|
||
// height: 30px;
|
||
// line-height: 35px;
|
||
// }
|
||
// .avatar {
|
||
// width: 250px;
|
||
// height: 178px;
|
||
// display: block;
|
||
// }
|
||
</style>
|