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 {
release:'/api/blog/', //发布博客评论 +{blogId}/comment
},
Feedback:{
report:'/api/complaint',//投诉举报
feedback:'/api/feedback'//意见反馈
},
Tag:{
create:'/api/tag'//创建标签
},
......
pages/web.vue
......@@ -54,9 +54,6 @@ export default {
]
}
},
created() {
this.$router.replace('/web/about')
}
}
</script>
......
pages/web/feedback.vue
......@@ -2,8 +2,7 @@
<card-container
title="意见反馈"
width="938px"
height="552px"
style="margin-bottom: 100px"
style="margin-bottom: 100px;padding-bottom: 40px;"
>
<div class="feedback-container">
<div class="feedback-center">
......@@ -22,15 +21,34 @@
</div>
</div>
<div class="feedback-container__main">
<textarea class="feedback-header" placeholder="相关链接" v-model="feedLink"></textarea>
<textarea class="feedback-content" placeholder="我的反馈是..." v-model="feedbackContent"></textarea>
<div class="main-footer">
<input type="text" placeholder="联系方式" maxlength="18" v-model="contact">
<input type="text" placeholder="验证码" maxlength="6" v-model="verification">
<img :src="src" alt="">
<login-input
style="width: 334px;"
: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 class="feedback-container__submit">
<button>提交</button>
<button @click="handleFeedback">提交</button>
</div>
</div>
</div>
......@@ -39,17 +57,106 @@
<script>
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 {
name: "feedback",
components: {CardContainer},
components: {LoginInput, CardContainer},
data() {
return {
feedLink: '',
typePicked: '',
feedbackContent: '',
contact: '',
verification: '',
src: '//www.baidu.com/img/baidu_resultlogo@2.png'
phoneErrMsg: '',
mobile: '',
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 {
}
.feedback-container__main {
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 {
@include fontStyle(14,19,500,#666,left);
resize: none;
......@@ -116,22 +233,6 @@ export default {
.main-footer{
margin-top: 24*$length;
@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 {
......@@ -144,8 +245,11 @@ export default {
display: inline-block;
width: 148*$length;
height: 48*$length;
background-color: #75D098;
background-color: rgba(117, 208, 152, .9);
border: none;
&:hover{
background-color: #75D098;
}
}
}
}
......
pages/web/report.vue
......@@ -34,16 +34,14 @@
</div>
</div>
<div class="report-container__main">
<textarea class="report-header" placeholder="想要举报内容的链接" v-model="reportHeader"></textarea>
<textarea class="report-content" placeholder="请描述举报原因" v-model="reportContent"></textarea>
<textarea class="report-header" placeholder="想要举报内容的链接" v-model="reportLink"></textarea>
<textarea class="report-content" placeholder="请填写详细的举报内容" v-model="reportContent"></textarea>
<div class="main-footer">
<input type="text" placeholder="联系方式" maxlength="18" v-model="contact">
<input type="text" placeholder="验证码" maxlength="6" v-model="verification">
<img :src="src" alt="">
<input type="text" placeholder="联系方式" maxlength="18" v-model="mobile">
</div>
</div>
<div class="report-container__submit">
<button>确定</button>
<button @click="handleReport">确定</button>
</div>
</div>
</div>
......@@ -52,6 +50,7 @@
<script>
import CardContainer from "../../components/pc/cardContainer";
import congfig from '../../action/config';
export default {
name: "report",
......@@ -59,11 +58,33 @@ export default {
data() {
return {
typePicked: '',
reportHeader: '',
reportLink: '',
reportContent: '',
contact: '',
verification: '',
src: '//www.baidu.com/img/baidu_resultlogo@2.png'
mobile: ''
}
},
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