Skip to content

S
say-something-company
提交 be7647ba authored 作者: 褚文成's avatar 褚文成
浏览文件
操作

Initial commit

上级
隐藏空白字符变更
内嵌 并排
正在显示 包含 844 行增加 和 0 行删除
.vscode/settings.json 0 → 100644
浏览文件 @ be7647ba
{
"liveServer.settings.port": 5502
}
\ No newline at end of file
a.html 0 → 100644
浏览文件 @ be7647ba
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>想对公司说句话</title>
<!-- 引入element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.common_bg{
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
.container_box{
width: 1200px;
margin: 0 auto;
}
.content_box{
width: 800px;
margin: 0 auto;
/* height: 100%; */
background-color: #fff;
padding: 30px;
box-sizing: border-box;
}
.header_box{
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
text-align: center;
}
.el-form-item{
margin-bottom: 10px;
}
.el-form-item__label{
font-weight: bold;
font-weight:14px;
}
.el-textarea .el-textarea__inner{
resize: none;
}
.footer_box {
margin-top: 40px;
}
.footer_box .line{
width: 100%;
height: 1px;
background-color: #ccc;
}
.footer_box .submit{
width: 80px;
text-align: center;
margin: 40px auto 0;
height: 40px;
line-height: 40px;
background-color: #4D81EF;
color: #fff;
border-radius: 8px;
cursor: pointer;
}
.warn_word{
margin-right: 10px;
}
/* .hide{
display: none;
} */
/* .el-upload--picture-card i{
margin-top: 60px;
} */
.right_right{
display: -ms-flexbox;
display: -webkit-box;
width:380px;
}
.right_right .img_list{
width:300px;
/* margin-left:5px; */
}
.right_right .imgurl{
width:50px;
height:50px;
display:inline-block;
margin-left:8px;
border:1px solid #ddd;
margin-bottom:10px;
vertical-align: middle;
position: relative;
}
.right_right img{
width:50px;
height:50px;
object-fit: cover;
overflow: hidden;
}
.right_right .face{
width:100%;
height:100%;
color:#4D81EF;
background: rgba(0,0,0,0.4);
position: absolute;
font-size:24px;
text-align: center;
line-height: 50px;
display:none;
top:0px;
left:0px;
}
.imgurl:hover .face{
display:inline-block;
}
.el-icon-circle-close{
margin-top: 12px;
color: #fff;
}
.uploadImg{
width:50px;
height:50px;
display:inline-block;
margin-left:6px;
margin-bottom:8px;
}
.el-upload-list{
display:none;
}
.el-upload--picture-card{
width:50px;
height:50px;
border-radius:0px;
line-height: 0px;
background:#ddd;
margin-bottom:9px;
vertical-align: middle;
border:1px solid #ddd;
display:inline-block!important;
}
.el-icon-plus{
line-height: 48px;
}
.hideUpload .uploadImg{
display: none;
}
.hideUpload .el-upload--picture-card{
display: none;
}
@media only screen and (max-width: 768px) {
.container_box{
width: 100%;
}
.content_box{
width: 100%;
height: 100%;
}
.footer_box{
padding-bottom: 40px;
}
.footer_box .submit{
width: 30%;
}
.right_right{
width: 90%;
}
.right_right .img_list{
width: 100%;
}
}
</style>
</head>
<body>
<div class="common_bg" id="page">
<div class="container_box">
<div class="content_box">
<div class="header_box">我对公司说句话</div>
<div class="center_box">
<el-form :label-position="labelPosition" label-width="80px" :model="formData">
<el-form-item label="主题">
<el-input v-model="formData.title" placeholder="想说的主题"></el-input>
</el-form-item>
<el-form-item label="内容">
<el-input
type="textarea"
maxlength="5000"
placeholder="想说的话..."
v-model="formData.content">
</el-input>
</el-form-item>
<el-form-item label="上传图片">
<div class="right_right">
<div class="img_list" :class="{'hideUpload':hideUpload}">
<div class="imgurl" v-for="(item,index) in generalInfoPics">
<img :src="item" />
<div class="face" @click="handleRemove(index)">
<i class="el-icon-circle-close"></i>
</div>
</div>
<el-upload class="uploadImg"
action="#"
list-type="picture-card"
:on-change="changeImg"
:auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</div>
</div>
</el-form-item>
<el-form-item>
<span class="warn_word">我要实名</span>
<el-checkbox v-model="checked" @change="handleCheckAllChange"></el-checkbox>
</el-form-item>
<el-form-item label="手机号码" v-if="isShow">
<el-input v-model="formData.tel" placeholder="填写你的手机号码"></el-input>
</el-form-item>
</el-form>
<!-- <div class="remarks_box">
<div>注意事项：</div>
<p>1.请如实反映有关问题，用事实和数据说话；</p>
<p>2.针对您反映的问题，公司进一步调查落实后，会以线上或线下形式回复；</p>
<p>3.为了您反映的问题能够得到及时有效处理，请“站高一步”拿出可行的措施和方案；</p>
<p>4.针对重大管理创新、具有前瞻性的意见建议等，可形成改善提案，以项目的形式解决；</p>
<p>5.为了便于沟通交流，建议实名并留下您的联系方式。</p>
</div> -->
</div>
<div class="footer_box">
<!-- <div class="line"></div> -->
<div class="submit" @click="getSubmit">提交</div>
</div>
</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script>
var app = new Vue({
el:'#page',
data:{
labelPosition:'top',
formData:{
userName:'',
pic:'',
title:'',
content:'',
tel:''
},
limitCount:3,//上传图片最大数量,
generalInfoPics:[],
hideUpload: false,//隐藏上传图片按钮
checked: false,
isShow:false,
},
methods:{
//删除图片
handleRemove(index) {
this.generalInfoPics.splice(index,1);
this.hideUpload = this.generalInfoPics.length-1 >= this.limitCount;
},
//上传图片返回数据
changeImg(file,fileList){
console.log(file,fileList,'file,fileList')
let filedata = new FormData();
filedata.append('newUploadImgs',file.raw);
// formdata.append('file',file.url);
console.log(filedata,'filedata');
axios({
// url:'http://192.168.1.111:6789/advice/uploadImgs',
url:'http://121.36.41.111:6789/advice/uploadImgs',
method:'POST',
dataType:'multipart/form-data',
data:filedata
}).then(res=>{
console.log(res,'res00000')
this.generalInfoPics.push(res.data.data);
})
this.hideUpload = this.generalInfoPics.length >= this.limitCount;
},
//是否实名
handleCheckAllChange(val){
console.log(val,val)
this.isShow = val;
},
getSubmit(){
var phoneReg = /^[1][0-9]{10}$/;
// this.formData.pic = JSON.stringify(this.generalInfoPics);
this.formData.pic = this.generalInfoPics.toString();
this.formData.tel = parseInt(this.formData.tel);
if(this.formData.title==''){
this.$message({
message:'主题不能为空!',
type:'warning',
duration:1500
})
return;
}else if(this.formData.content==''){
this.$message({
message:'内容不能为空!',
type:'warning',
duration:1500
})
return;
}else if(this.formData.tel!==' '&&!phoneReg.test(this.formData.tel)){
this.$message({
message:'请输入正确的手机号码!',
type:'warning',
duration:1500
})
return;
}
axios({
url:'http://121.36.41.111:6789/advice/add',
method:'POST',
dataType:'json',
data:this.formData
}).then(res=>{
// console.log(res,'res')
if(res.data.code==0){
this.$message({
message:'提交成功!',
type:'success',
duration:1500
})
}
//提交成功，清空数据
this.formData={
userName:'',
pic:'',
title:'',
content:'',
tel:''
};
this.generalInfoPics = [];
this.checked = false;
})
}
},
created(){}
})
</script>
</body>
</html>
\ No newline at end of file
index.html 0 → 100644
浏览文件 @ be7647ba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我对公司说句话</title>
<!-- 引入element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.common_bg{
width: 100%;
height: 100%;
}
.container_box{
width: 1200px;
margin: 0 auto;
}
.content_box{
width: 800px;
margin: 0 auto;
background-color: #F8C348;
}
.header_box{
width: 100%;
height: 260px;
background: url('./static/images/bg.png') center no-repeat;
background-size: cover;
}
.center_box{
padding: 0 15px;
box-sizing: border-box;
}
.center_box .top_box{
background-color: #fff;
padding: 16px 20px;
height: 280px;
border-radius:6px;
margin-bottom: 10px;
}
.top_title{
display: flex;
border-bottom: 1px solid #eee;
margin-bottom: 16px;
}
.top_title div{
font-weight: 500;
width: 40px;
line-height: 40px;
}
.top_title .top_title_input{
flex:1;
}
.top_title_input .el-input__inner{
border: none;
}
.top_content div{
font-weight: 500;
margin-bottom: 10px;
}
.el-textarea .el-textarea__inner{
resize: none;
border: none;
padding-left: 0;
height: 180px;
}
.center_box .upload_box{
height: 120px;
background: #fff;
padding: 16px 20px;
border-radius:6px;
margin-bottom: 10px;
}
.center_box .upload_box .tip_words{
font-weight: 500;
margin-bottom: 10px;
}
/* 上传图片样式 */
.right_right{
display: -ms-flexbox;
display: -webkit-box;
width:380px;
}
.right_right .img_list{
width:300px;
/* margin-left:5px; */
}
.right_right .imgurl{
width:60px;
height:60px;
display:inline-block;
margin-left:8px;
border:1px solid #ddd;
margin-bottom:10px;
vertical-align: middle;
position: relative;
}
.right_right img{
width:60px;
height:60px;
object-fit: cover;
overflow: hidden;
}
.right_right .face{
width:100%;
height:100%;
color:#4D81EF;
background: rgba(0,0,0,0.4);
position: absolute;
font-size:24px;
text-align: center;
line-height: 60px;
display:none;
top:0px;
left:0px;
}
.imgurl:hover .face{
display:inline-block;
}
.el-icon-circle-close{
margin-top: 12px;
color: #fff;
}
.uploadImg{
width:60px;
height:60px;
display:inline-block;
margin-left:6px;
margin-bottom:8px;
}
.el-upload-list{
display:none;
}
.el-upload--picture-card{
width:60px;
height:60px;
border-radius:0px;
line-height: 0px;
background:#ddd;
margin-bottom:9px;
vertical-align: middle;
border:1px solid #ddd;
display:inline-block!important;
}
.el-icon-plus{
line-height: 58px;
}
.hideUpload .uploadImg{
display: none;
}
.hideUpload .el-upload--picture-card{
display: none;
}
.send_tel{
text-align: right;
margin-bottom: 16px;
}
.send_tel .warn_box{
margin-bottom: 10px;
margin-right: 10px;
}
.send_tel .warn_word{
font-weight: 500;
margin-right: 10px;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
background-color: #409EFF;
}
.send_tel .input_tel{
display: flex;
height: 50px;
padding: 5px;
box-sizing: border-box;
margin-bottom: 4px;
background-color: #fff;
border-radius:6px;
}
.send_tel .input_tel .phone{
width: 60px;
line-height: 40px;
}
.send_tel .input_tel .el-input__inner{
border: none;
}
.remarks_box{
background: #fff;
border-radius:6px;
padding: 10px 20px;
margin-bottom: 30px;
}
.remarks_box .remarks_title{
font-weight: bold;
font-size: 12px;
margin-bottom: 10px;
color: red;
}
.remarks_box p{
font-size: 12px;
color: red;
margin-bottom: 6px;
}
.footer_box{
padding: 10px 15px 36px;
}
.footer_box .submit_btn{
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
background-color: #F1716A;
color: #fff;
font-size: 16px;
font-weight: 500;
border-radius:4px;
}
.el-button--primary{
font-size: 16px;
font-weight: 500;
width: 100%;
background-color:#F1716A;
border-color:#F1716A;
}
.el-button--primary:hover{
background: #F1716A;
border-color:#F1716A;
}
/* input::-webkit-outer-spin-button{
-webkit-appearance: none!important;
}
input::-webkit-inner-spin-button{
    -webkit-appearance: none!important;
}
input[type="number"]{
    -moz-appearance:textfield;
} */
@media only screen and (max-width: 768px) {
.container_box{
width: 100%;
}
.content_box{
width: 100%;
height: 100%;
}
.header_box{
height: 140px;
}
.footer_box{
padding-bottom: 40px;
}
.footer_box .submit{
width: 30%;
}
.right_right{
width: 96%;
}
.right_right .img_list{
width: 100%;
}
}
</style>
<body>
<div class="common_bg" id="page">
<div class="container_box">
<div class="content_box">
<div class="header_box"></div>
<div class="center_box">
<div class="top_box">
<div class="top_title">
<div>主题</div>
<el-input class="top_title_input" v-model="formData.title" placeholder="请填写主题" ></el-input>
</div>
<div class="top_content">
<div>内容</div>
<el-input
type="textarea"
maxlength="5000"
placeholder="想说的话..."
v-model="formData.content">
</el-input>
</div>
</div>
<div class="upload_box">
<div class="tip_words">上传图片</div>
<div class="right_right">
<div class="img_list" :class="{'hideUpload':hideUpload}">
<div class="imgurl" v-for="(item,index) in generalInfoPics">
<img :src="item" />
<div class="face" @click="handleRemove(index)">
<i class="el-icon-circle-close"></i>
</div>
</div>
<el-upload class="uploadImg"
action="#"
list-type="picture-card"
:on-change="changeImg"
:auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</div>
</div>
</div>
<div class="send_tel">
<div class="warn_box">
<span class="warn_word">我要实名</span>
<el-checkbox v-model="checked" @change="handleCheckAllChange"></el-checkbox>
</div>
<div class="input_tel" v-if="isShow">
<span class="phone">部门</span>
<el-input v-model="formData.deptName" placeholder="请填写你的部门"></el-input>
</div>
<div class="input_tel" v-if="isShow">
<span class="phone">姓名</span>
<el-input v-model="formData.userName" placeholder="请填写你的姓名"></el-input>
</div>
<div class="input_tel" v-if="isShow">
<span class="phone">手机号</span>
<el-input type="number" v-model="formData.tel" placeholder="请填写你的手机号码"></el-input>
</div>
</div>
<div class="remarks_box">
<div class="remarks_title">注意事项：</div>
<p>1.请如实反映有关问题，用事实和数据说话；</p>
<p>2.针对您反映的问题，公司进一步调查落实后，会以线上或线下形式回复；</p>
<p>3.为了您反映的问题能够得到及时有效处理，请“站高一步”拿出可行的措施和方案；</p>
<p>4.针对重大管理创新、具有前瞻性的意见建议等，可形成改善提案，以项目的形式解决；</p>
<p>5.为了便于沟通交流，建议实名并留下您的联系方式。</p>
</div>
</div>
<div class="footer_box">
<!-- <div class="submit_btn" @click="getSubmit">提交</div> -->
<el-button type="primary" :loading="loading" @click="getSubmit">提交</el-button>
</div>
</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script>
var app = new Vue({
el:'#page',
data:{
formData:{
pic:'',
title:'',
content:'',
tel:'',
userName:'',//用户名
deptName:'',//部门
},
limitCount:2,//上传图片最大数量,
generalInfoPics:[],
hideUpload: false,//隐藏上传图片按钮
checked: false,
isShow:false,
loading:false,
},
methods:{
//删除图片
handleRemove(index) {
this.generalInfoPics.splice(index,1);
this.hideUpload = this.generalInfoPics.length-1 >= this.limitCount;
},
//上传图片返回数据
changeImg(file,fileList){
console.log(file,fileList,'file,fileList')
let filedata = new FormData();
filedata.append('newUploadImgs',file.raw);
// formdata.append('file',file.url);
console.log(filedata,'filedata');
axios({
// url:'http://192.168.1.111:6789/advice/uploadImgs',
url:'http://121.36.41.111:6789/advice/uploadImgs',
method:'POST',
dataType:'multipart/form-data',
data:filedata
}).then(res=>{
console.log(res,'res00000')
this.generalInfoPics.push(res.data.data);
})
this.hideUpload = this.generalInfoPics.length >= this.limitCount;
},
//是否实名
handleCheckAllChange(val){
console.log(val,val)
this.isShow = val;
},
getSubmit(){
var phoneReg = /^[1][0-9]{10}$/;
// this.formData.pic = JSON.stringify(this.generalInfoPics);
this.formData.pic = this.generalInfoPics.toString();
this.formData.tel = parseInt(this.formData.tel);
if(this.formData.title==''){
this.$message({
message:'主题不能为空!',
type:'warning',
duration:1500
})
return;
}else if(this.formData.content==''){
this.$message({
message:'内容不能为空!',
type:'warning',
duration:1500
})
return;
}
if(this.checked==true){
if(this.formData.deptName==''){
this.$message({
message:'部门名称不能为空!',
type:'warning',
duration:1500
})
return;
}
if(this.formData.userName==''){
this.$message({
message:'姓名不能为空!',
type:'warning',
duration:1500
})
return;
}
if(this.formData.tel==''){
this.$message({
message:'手机号码不能为空！',
type:'warning',
duration:1500
})
return;
}
if(!phoneReg.test(this.formData.tel)){
this.$message({
message:'请输入正确的手机号码!',
type:'warning',
duration:1500
})
return;
}
}
this.loading=true;
axios({
url:'http://121.36.41.111:6789/advice/add',
method:'POST',
dataType:'json',
data:this.formData
}).then(res=>{
// console.log(res,'res')
this.loading=false;
if(res.data.code==0){
this.$message({
message:'提交成功!',
type:'success',
duration:1500
})
}
//提交成功，清空数据
this.formData={
pic:'',
title:'',
content:'',
tel:'',
userName:'',//用户名
deptName:'',//部门
};
this.generalInfoPics = [];
this.checked = false;
})
}
},
created(){
}
})
</script>
</body>
</html>
\ No newline at end of file
js/common.js 0 → 100644
浏览文件 @ be7647ba
// var apiPath = 'http://47.105.222.231:3000/mock/95';
var apiPath = 'http://172.27.35.1:8080';
localStorage.setItem('apiPath',apiPath)
//获取路径上的参数
// function GetQueryString(name){
// var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
// var r = window.location.search.substr(1).match(reg);
// if(r!=null)return unescape(r[2]); return null;
// }
\ No newline at end of file
js/index.js 0 → 100644
浏览文件 @ be7647ba
This source diff could not be displayed because it is too large. You can view the blob instead.
js/vue.js 0 → 100644
浏览文件 @ be7647ba
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论