Skip to content

B
beyond-clouds-front
Commit f0b3ffc4 by 高浩杰
Options

意见反馈 投诉举报

parent fc8cb7c7
Showing with 166 additions and 39 deletions
action/config.js
...@@ -132,6 +132,11 @@ export default { ...@@ -132,6 +132,11 @@ export default {
release:'/api/blog/', //发布博客评论 +{blogId}/comment release:'/api/blog/', //发布博客评论 +{blogId}/comment
}, },
Feedback:{
report:'/api/complaint',//投诉举报
feedback:'/api/feedback'//意见反馈
},
Tag:{ Tag:{
create:'/api/tag'//创建标签 create:'/api/tag'//创建标签
}, },
......
pages/web.vue
...@@ -54,9 +54,6 @@ export default { ...@@ -54,9 +54,6 @@ export default {
] ]
} }
}, },
created() {
this.$router.replace('/web/about')
}
} }
</script> </script>
......
pages/web/feedback.vue
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<card-container <card-container
title="意见反馈" title="意见反馈"
width="938px" width="938px"
height="552px" style="margin-bottom: 100px;padding-bottom: 40px;"
style="margin-bottom: 100px"
> >
<div class="feedback-container"> <div class="feedback-container">
<div class="feedback-center"> <div class="feedback-center">
...@@ -22,15 +21,34 @@ ...@@ -22,15 +21,34 @@
</div> </div>
</div> </div>
<div class="feedback-container__main"> <div class="feedback-container__main">
<textarea class="feedback-header" placeholder="相关链接" v-model="feedLink"></textarea>
<textarea class="feedback-content" placeholder="我的反馈是..." v-model="feedbackContent"></textarea> <textarea class="feedback-content" placeholder="我的反馈是..." v-model="feedbackContent"></textarea>
<div class="main-footer"> <div class="main-footer">
<input type="text" placeholder="联系方式" maxlength="18" v-model="contact"> <login-input
<input type="text" placeholder="验证码" maxlength="6" v-model="verification"> style="width: 334px;"
<img :src="src" alt=""> :error-message="phoneErrMsg"
placeholder="联系方式"
v-model="mobile"
@handleCheck="checkMobile"
@cancelCheck="phoneErrMsg = ''"
@keyup.enter.native="handleFeedback"
></login-input>
<login-input
style="width: 334px;"
:error-message="verifyErrMsg"
:isCount="isCount"
placeholder="请输入验证码"
input-type="3"
v-model="verifyCode"
@sendSms="checkVerification"
@handleCheck="checkVerifyCode"
@cancelCheck="verifyErrMsg = ''"
@keyup.enter.native="handleFeedback"
></login-input>
</div> </div>
</div> </div>
<div class="feedback-container__submit"> <div class="feedback-container__submit">
<button>提交</button> <button @click="handleFeedback">提交</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -39,17 +57,106 @@ ...@@ -39,17 +57,106 @@
<script> <script>
import CardContainer from "../../components/pc/cardContainer"; import CardContainer from "../../components/pc/cardContainer";
import LoginInput from "../../components/pc/loginCard/loginInput";
import config from '../../action/config';
import {checkPhone, checkVerification} from '../users/checkfrom';
export default { export default {
name: "feedback", name: "feedback",
components: {CardContainer}, components: {LoginInput, CardContainer},
data() { data() {
return { return {
feedLink: '',
typePicked: '', typePicked: '',
feedbackContent: '', feedbackContent: '',
contact: '', phoneErrMsg: '',
verification: '', mobile: '',
src: '//www.baidu.com/img/baidu_resultlogo@2.png' verifyCode: '',
verifyErrMsg: '',
isCount: false
}
},
methods: {
checkMobile() {
this.phoneErrMsg = checkPhone(this.mobile);
},
checkVerifyCode() {
this.verifyErrMsg = checkVerification(this.verifyCode);
},
// 检测验证码
checkVerification() {
this.isCount = false;
this.phoneErrMsg = checkPhone(this.mobile);
if (this.phoneErrMsg === '') {
this.getSms();
this.verifyErrMsg = '';
this.isCount = true;
setTimeout(() => {
this.isCount = false;
}, 60000);
}
},
// 发送短信
async getSms() {
let smsResponse = await this.$axios.$get(config.api.get.Sms.send, {
params: {
mobile: this.mobile
}
});
if (smsResponse.code === 0) {
this.$message({
type: 'success',
message: '短信发送成功！'
});
} else {
this.verifyErrMsg = smsResponse.msg;
this.$message({
type: 'info',
message: smsResponse.msg
});
}
},
handleFeedback() {
if (this.typePicked === '') {
this.$message({
type: 'warning',
message: '请选择反馈类型'
});
return false
} else if (this.feedbackContent === '') {
this.$message({
type: 'warning',
message: '请填写反馈内容'
});
return false
}
this.$axios.$post(config.api.post.Feedback.feedback, {
content: this.feedbackContent,
feedbackReason: this.typePicked,
link: this.feedLink,
mobile: this.mobile,
verifyCode: this.verifyCode
}).then(res => {
if (res.code === 0) {
this.$message({
type: 'success',
message: '您的意见反馈成功'
});
Object.assign(this.$data, this.$options.data());
} else {
let msg;
if (res.hasOwnProperty('data')) {
msg = res.data.errMsg;
} else {
msg = res.msg;
}
this.$message({
type: 'warning',
message: msg
})
}
})
} }
} }
} }
...@@ -104,6 +211,16 @@ export default { ...@@ -104,6 +211,16 @@ export default {
} }
.feedback-container__main { .feedback-container__main {
margin-top: 30*$length; margin-top: 30*$length;
.feedback-header{
@include fontStyle(14,19,500,#666,left);
resize: none;
width: 726*$length;
height: 48*$length;
padding: 14*$length 16*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
margin-bottom: 24*$length;
}
.feedback-content { .feedback-content {
@include fontStyle(14,19,500,#666,left); @include fontStyle(14,19,500,#666,left);
resize: none; resize: none;
...@@ -116,22 +233,6 @@ export default { ...@@ -116,22 +233,6 @@ export default {
.main-footer{ .main-footer{
margin-top: 24*$length; margin-top: 24*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
> input {
padding: 15*$length 16*$length;
background-color: #F4F8FA;
@include border-radius(4*$length);
@include fontStyle(14,18,500,#999,left);
width: 242*$length;
height: 48*$length;
&:first-child {
width: 302*$length;
height: 48*$length;
}
}
> img {
width: 150*$length;
height: 48*$length;
}
} }
} }
.feedback-container__submit { .feedback-container__submit {
...@@ -144,8 +245,11 @@ export default { ...@@ -144,8 +245,11 @@ export default {
display: inline-block; display: inline-block;
width: 148*$length; width: 148*$length;
height: 48*$length; height: 48*$length;
background-color: #75D098; background-color: rgba(117, 208, 152, .9);
border: none; border: none;
&:hover{
background-color: #75D098;
}
} }
} }
} }
......
pages/web/report.vue
...@@ -34,16 +34,14 @@ ...@@ -34,16 +34,14 @@
</div> </div>
</div> </div>
<div class="report-container__main"> <div class="report-container__main">
<textarea class="report-header" placeholder="想要举报内容的链接" v-model="reportHeader"></textarea> <textarea class="report-header" placeholder="想要举报内容的链接" v-model="reportLink"></textarea>
<textarea class="report-content" placeholder="请描述举报原因" v-model="reportContent"></textarea> <textarea class="report-content" placeholder="请填写详细的举报内容" v-model="reportContent"></textarea>
<div class="main-footer"> <div class="main-footer">
<input type="text" placeholder="联系方式" maxlength="18" v-model="contact"> <input type="text" placeholder="联系方式" maxlength="18" v-model="mobile">
<input type="text" placeholder="验证码" maxlength="6" v-model="verification">
<img :src="src" alt="">
</div> </div>
</div> </div>
<div class="report-container__submit"> <div class="report-container__submit">
<button>确定</button> <button @click="handleReport">确定</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -52,6 +50,7 @@ ...@@ -52,6 +50,7 @@
<script> <script>
import CardContainer from "../../components/pc/cardContainer"; import CardContainer from "../../components/pc/cardContainer";
import congfig from '../../action/config';
export default { export default {
name: "report", name: "report",
...@@ -59,11 +58,33 @@ export default { ...@@ -59,11 +58,33 @@ export default {
data() { data() {
return { return {
typePicked: '', typePicked: '',
reportHeader: '', reportLink: '',
reportContent: '', reportContent: '',
contact: '', contact: '',
verification: '', mobile: ''
src: '//www.baidu.com/img/baidu_resultlogo@2.png' }
},
methods: {
handleReport() {
this.$axios.$post(congfig.api.post.Feedback.report, {
content: this.reportContent,
feedbackReason: this.typePicked,
link: this.reportLink,
mobile: this.mobile
}).then(res => {
if (res.code === 0) {
this.$message({
type: 'success',
message: '您的投诉已发送'
});
Object.assign(this.$data, this.$options.data());
} else {
this.$message({
type: 'warning',
message: res.data.errMsg
})
}
})
} }
} }
} }
......
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