Skip to content

B
beyond-clouds-front
Commit 30aab417 by yanju
Options

Merge branch 'yoona' into 'master' 

意见反馈添加图片，手机号(可选)

See merge request pigbigbig/beyond-clouds-front!104
parents c8352e91 173f3e90
Showing with 128 additions and 8 deletions
pages/web/feedback.vue
...@@ -24,15 +24,20 @@ ...@@ -24,15 +24,20 @@
<textarea class="feedback-header" placeholder="相关链接" v-model="feedLink"></textarea> <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">
<p class="img-box">添加反馈图片（可选）
<img :src="imgSrc" alt="">
<input type="file" @change="(e)=>changeToUploadCover(e)">
</p>
<login-input <login-input
style="width: 334px;" style="width: 334px;margin-top: 20px;"
:error-message="phoneErrMsg" :error-message="phoneErrMsg"
placeholder="联系方式" placeholder="联系方式（可选）"
v-model="mobile" v-model="mobile"
@handleCheck="checkMobile" @handleCheck="checkMobile"
@cancelCheck="phoneErrMsg = ''" @cancelCheck="phoneErrMsg = ''"
@keyup.enter.native="handleFeedback" @keyup.enter.native="handleFeedback"
></login-input> ></login-input>
<!--<login-input--> <!--<login-input-->
<!--style="width: 334px;"--> <!--style="width: 334px;"-->
<!--:error-message="verifyErrMsg"--> <!--:error-message="verifyErrMsg"-->
...@@ -73,6 +78,7 @@ export default { ...@@ -73,6 +78,7 @@ export default {
mobile: '', mobile: '',
verifyCode: '', verifyCode: '',
verifyErrMsg: '', verifyErrMsg: '',
imgSrc: '',
isCount: false isCount: false
} }
}, },
...@@ -116,6 +122,33 @@ export default { ...@@ -116,6 +122,33 @@ export default {
// }); // });
// } // }
// }, // },
//上传图片
async changeToUploadCover(e) {
let formData = new window.FormData();
formData.append('file', e.target.files[0]);
formData.append('type', 100);
const isLt5M = (e).target.files[0].size / 1024 / 1024 < 5;
if (!isLt5M) {
this.$message.error('图片大小超过5M，请重新选择图片！');
return false
}
let imgResponse = await this.$axios.$post(config.api.post.Resource.file, formData);
if (imgResponse.code === 0) {
this.imgSrc = imgResponse.data;//图片地址
this.$message({
type: 'success',
message: '图片上传成功'
})
} else {
this.$message({
type: 'warning',
message: imgResponse.msg
})
}
},
handleFeedback() { handleFeedback() {
if (this.typePicked === '') { if (this.typePicked === '') {
this.$message({ this.$message({
...@@ -141,7 +174,8 @@ export default { ...@@ -141,7 +174,8 @@ export default {
content: this.feedbackContent, content: this.feedbackContent,
feedbackReason: this.typePicked, feedbackReason: this.typePicked,
link: this.feedLink, link: this.feedLink,
mobile: this.mobile mobile: this.mobile,
picture: this.imgSrc
}).then(res => { }).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
...@@ -238,6 +272,33 @@ export default { ...@@ -238,6 +272,33 @@ export default {
.main-footer{ .main-footer{
margin-top: 24*$length; margin-top: 24*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: flex-end;
.img-box {
margin-bottom: 20*$length;
overflow: hidden;
width: 196*$length;
background-color: #F4F8FA;
@extend %cursorPointer;
@include border-radius(4*$length);
@include fontStyle(12, 130, 500, #999, center);
& input {
float: left;
height: 100%;
width: 100%;
opacity: 0;
transform: translateY(-200%);
@extend %cursorPointer;
}
& img {
float: left;
height: 100%;
width: 100%;
transform: translateY(-100%);
object-fit: contain;
}
}
} }
} }
.feedback-container__submit { .feedback-container__submit {
......
pages/web/report.vue
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
<card-container <card-container
title="投诉举报" title="投诉举报"
width="938px" width="938px"
height="612px" style="margin-bottom: 100px;padding-bottom: 40px;"
style="margin-bottom: 100px"
> >
<div class="report-container"> <div class="report-container">
<div class="report-center"> <div class="report-center">
...@@ -37,10 +36,14 @@ ...@@ -37,10 +36,14 @@
<textarea class="report-header" placeholder="想要举报内容的链接" v-model="reportLink"></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">
<p class="img-box">添加反馈图片（可选）
<img :src="imgSrc" alt="">
<input type="file" @change="(e)=>changeToUploadCover(e)">
</p>
<login-input <login-input
style="width: 334px;" style="width: 334px;"
:error-message="phoneErrMsg" :error-message="phoneErrMsg"
placeholder="联系方式" placeholder="联系方式（可选）"
v-model="mobile" v-model="mobile"
@handleCheck="checkMobile" @handleCheck="checkMobile"
@cancelCheck="phoneErrMsg = ''" @cancelCheck="phoneErrMsg = ''"
...@@ -73,6 +76,7 @@ ...@@ -73,6 +76,7 @@
contact: '', contact: '',
phoneErrMsg: '', phoneErrMsg: '',
mobile: '', mobile: '',
imgSrc: ''
} }
}, },
...@@ -87,8 +91,34 @@ ...@@ -87,8 +91,34 @@
checkMobile() { checkMobile() {
this.phoneErrMsg = checkPhone(this.mobile); this.phoneErrMsg = checkPhone(this.mobile);
}, },
//上传图片
async changeToUploadCover(e) {
let formData = new window.FormData();
formData.append('file', e.target.files[0]);
formData.append('type', 100);
const isLt5M = (e).target.files[0].size / 1024 / 1024 < 5;
if (!isLt5M) {
this.$message.error('图片大小超过5M，请重新选择图片！');
return false
}
let imgResponse = await this.$axios.$post(config.api.post.Resource.file, formData);
if (imgResponse.code === 0) {
this.imgSrc = imgResponse.data;//图片地址
this.$message({
type: 'success',
message: '图片上传成功'
})
} else {
this.$message({
type: 'warning',
message: imgResponse.msg
})
}
},
handleReport() { handleReport() {
if (this.phoneErrMsg !== '' || this.mobile === '') { if (this.phoneErrMsg !== '') {
this.$message({ this.$message({
type: 'warning', type: 'warning',
message: '请检查联系方式' message: '请检查联系方式'
...@@ -99,8 +129,10 @@ ...@@ -99,8 +129,10 @@
content: this.reportContent, content: this.reportContent,
feedbackReason: this.typePicked, feedbackReason: this.typePicked,
link: this.reportLink, link: this.reportLink,
mobile: this.mobile mobile: this.mobile,
picture: this.imgSrc,
}).then(res => { }).then(res => {
console.log(res);
if (res.code === 0) { if (res.code === 0) {
this.$message({ this.$message({
type: 'success', type: 'success',
...@@ -190,6 +222,33 @@ ...@@ -190,6 +222,33 @@
.main-footer{ .main-footer{
margin-top: 24*$length; margin-top: 24*$length;
@extend %flex-row-spb; @extend %flex-row-spb;
align-items: flex-end;
.img-box {
margin-bottom: 20*$length;
overflow: hidden;
width: 196*$length;
background-color: #F4F8FA;
@extend %cursorPointer;
@include border-radius(4*$length);
@include fontStyle(12, 130, 500, #999, center);
& input {
float: left;
height: 100%;
width: 100%;
opacity: 0;
transform: translateY(-200%);
@extend %cursorPointer;
}
& img {
float: left;
height: 100%;
width: 100%;
transform: translateY(-100%);
object-fit: contain;
}
}
> input { > input {
padding: 15*$length 16*$length; padding: 15*$length 16*$length;
background-color: #F4F8FA; background-color: #F4F8FA;
......
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