<template>
|
<div class="feedback-page">
|
<x-header :left-options="{backText: ''}">意见反馈</x-header>
|
<div class="feedback-head">
|
<textarea class="mine-page-division" v-model.trim="questionText" maxlength="200" placeholder="请反馈在使用过程中遇到的问题和建议"></textarea>
|
<span class="feedback-num">{{ questionText.length }}/200字</span>
|
</div>
|
<input class="feedback-input" v-model="mblType" type="text" maxlength='20' placeholder="请输入机型,例：红米note3（选填，方便更快解决问题)">
|
<div class="feedback-foot">
|
<p>添加图片（选填，提供问题截图）</p>
|
<div class="upload-box">
|
<!--图片列表-->
|
<div class="upload-list-box">
|
<ul class="upload-list">
|
<li v-for="(item, index) in uploadImgList" class="upload-list-img">
|
<img :src="item">
|
<icon type="clear" @click.native="deleteCurrentImg(index)"></icon>
|
</li>
|
<!--上传按钮, 当上传的张数4张的时候，消失掉-->
|
<li class="upload-action-box" v-show="uploadImgList.length < 4">
|
<i class="iconfont icon-camerafill"></i>
|
<input class="upload-input" type="file" @change="handleImgUpload($event)" accept="image/*">
|
</li>
|
</ul>
|
</div>
|
<!--上传按钮, 当上传的张数4张的时候，消失掉-->
|
<!--<div class="upload-action-box" v-show="uploadImgList.length < 4">-->
|
<!--<i class="iconfont icon-camerafill"></i>-->
|
<!--<input class="upload-input" type="file" @change="handleImgUpload($event)" accept="image/*">-->
|
<!--</div>-->
|
</div>
|
</div>
|
<FButton :text="'提交'" @click.native="handleSubmit"></FButton>
|
<FSpace type="large"></FSpace>
|
</div>
|
</template>
|
<script>
|
/**
|
* Created by c.y on 2018/3/22.
|
* 我的--意见反馈
|
*/
|
import {XHeader, Icon, XButton} from 'vux';
|
import FButton from '../../components/common/FButton';
|
import FSpace from '../../components/common/FSpace';
|
import validator from '../../tool/validator';
|
import EXIF from 'exif-js';
|
import SystemApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
|
export default {
|
name: 'f-feedback',
|
data() {
|
return {
|
questionText: '', // 咨询的问题
|
mblType: '', // 机型
|
uploadImgList: [] // 上传的图片的列表
|
};
|
},
|
methods: {
|
handleSubmit() {
|
let _this = this;
|
if (validator.checkValEmpty(this.questionText)) {
|
this.$vux.toast.text(
|
'说点什么吧，您的建议是我们前进的动力',
|
'middle'
|
);
|
return false;
|
}
|
// 验证通过后
|
let submitInfo = {
|
content: this.questionText
|
};
|
if (!validator.checkValEmpty(this.mblType)) {
|
submitInfo.mblType = this.mblType;
|
}
|
if (this.uploadImgList.length > 0) {
|
submitInfo.fileNames = this.uploadImgList;
|
}
|
SystemApi.submitFeedBack(submitInfo).then(
|
res => {
|
// 跳转至【个人】页面
|
this.$vux.toast.text(
|
'反馈已收到，我们会马上跟进',
|
'middle'
|
);
|
setTimeout(function() {
|
_this.$router.push('/f-mine');
|
}, 2000);
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
}
|
);
|
},
|
// 图片的删除
|
deleteCurrentImg: function(index) {
|
// 删除图片
|
let _this = this;
|
let par = {
|
fileUrl: _this.uploadImgList[index],
|
fileType: 1
|
};
|
SystemApi.deleteIMG(par).then(
|
function(res) {
|
if (res.errorCode === 0) {
|
_this.uploadImgList.splice(index, 1);
|
}
|
},
|
function(error) {
|
statusCodeManage.showTipOfStatusCode(error, _this);
|
}
|
);
|
},
|
// 图片上传
|
handleImgUpload(evt) {
|
const files = Array.prototype.slice.call(evt.target.files);
|
console.log(files);
|
let that = this;
|
files.forEach(function(file, i) {
|
let orientation;
|
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
|
// 读取图片的元信息
|
EXIF.getData(file, function() {
|
orientation = EXIF.getTag(this, 'Orientation');
|
});
|
let reader = new FileReader();
|
reader.onload = function() {
|
let result = this.result;
|
// 使用exif
|
that.getImgData(this.result, orientation, function(data) {
|
// 这里可以使用校正后的图片data了
|
var img = new Image();
|
img.src = data;
|
// 图片加载完毕之后进行压缩，然后上传
|
if (img.complete) {
|
callback();
|
} else {
|
img.onload = callback;
|
}
|
|
function callback() {
|
var data = that.compress(img);
|
that.upload(data, file.type, file.name);
|
// 发送后台请求
|
}
|
});
|
};
|
reader.readAsDataURL(file);
|
});
|
},
|
// 压缩图片
|
compress(img) {
|
// 用于压缩图片的canvas
|
let canvas = document.createElement('canvas');
|
let ctx = canvas.getContext('2d');
|
// 瓦片canvas
|
var tCanvas = document.createElement('canvas');
|
var tctx = tCanvas.getContext('2d');
|
let width = img.width;
|
let height = img.height;
|
// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
|
var ratio;
|
if ((ratio = width * height / 4000000) > 1) {
|
ratio = Math.sqrt(ratio);
|
width /= ratio;
|
height /= ratio;
|
} else {
|
ratio = 1;
|
}
|
canvas.width = width * 2;
|
canvas.height = height * 2;
|
// 铺底色
|
ctx.fillStyle = '#fff';
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
// 如果图片像素大于100万则使用瓦片绘制
|
var count;
|
if ((count = width * height / 1000000) > 1) {
|
count = ~~(Math.sqrt(count) + 1); // 计算要分成多少块瓦片
|
// 计算每块瓦片的宽和高
|
var nw = ~~(width / count);
|
var nh = ~~(height / count);
|
tCanvas.width = nw;
|
tCanvas.height = nh;
|
for (var i = 0; i < count; i++) {
|
for (var j = 0; j < count; j++) {
|
tctx.drawImage(
|
img,
|
i * nw * ratio,
|
j * nh * ratio,
|
nw * ratio * 2,
|
nh * ratio * 2,
|
0,
|
0,
|
nw,
|
nh
|
);
|
ctx.drawImage(tCanvas, i * nw, j * nh, nw * 2, nh * 2);
|
}
|
}
|
} else {
|
ctx.drawImage(img, 0, 0, width * 2, height * 2);
|
}
|
// 进行最小压缩
|
let ndata = canvas.toDataURL('image/jpeg', 0.8);
|
return ndata;
|
},
|
// 提交到服务器
|
upload(basestr) {
|
let _this = this;
|
let post = {
|
file: basestr.split(',')[1],
|
extName: 'jpeg',
|
fileType: 1
|
};
|
// 选择完毕触发事件 回调
|
SystemApi.uploadIMG(post).then(
|
res => {
|
_this.uploadImgList.push(res.body);
|
},
|
err => {
|
statusCodeManage.showTipOfStatusCode(err, _this);
|
}
|
);
|
},
|
// 图片旋转处理
|
getImgData: function(img, dir, next) {
|
// @param {string} img 图片的base64
|
// @param {int} dir exif获取的方向信息
|
// @param {function} next 回调方法，返回校正方向后的base64
|
var image = new Image();
|
let canvas = document.createElement('canvas');
|
let ctx = canvas.getContext('2d');
|
image.onload = function() {
|
let resultWidth = 0;
|
let resultHeight = 0;
|
let maxWidthOrHeight = 1024;
|
let drawWidth = this.naturalWidth;
|
let drawHeight = this.naturalHeight;
|
// 以下改变图片大小，控制最大宽度为1024
|
var maxSide = Math.max(drawWidth, drawHeight);
|
if (maxSide > maxWidthOrHeight) {
|
let minSide = Math.min(drawWidth, drawHeight);
|
minSide = minSide / maxSide * maxWidthOrHeight;
|
maxSide = maxWidthOrHeight;
|
if (drawWidth > drawHeight) {
|
resultWidth = maxSide;
|
resultHeight = minSide;
|
} else {
|
resultWidth = minSide;
|
resultHeight = maxSide;
|
}
|
} else {
|
resultWidth = drawWidth;
|
resultHeight = drawHeight;
|
}
|
if (dir === 3) {
|
canvas.width = resultWidth;
|
canvas.height = resultHeight;
|
ctx.translate(resultWidth, resultHeight);
|
ctx.rotate(Math.PI);
|
} else if (dir === 6) {
|
canvas.width = resultHeight;
|
canvas.height = resultWidth;
|
ctx.translate(resultHeight, 0);
|
ctx.rotate(Math.PI / 2);
|
} else if (dir === 8) {
|
canvas.width = resultHeight;
|
canvas.height = resultWidth;
|
ctx.translate(0, resultWidth);
|
ctx.rotate(-Math.PI / 2);
|
} else {
|
canvas.width = resultWidth;
|
canvas.height = resultHeight;
|
}
|
ctx.drawImage(this, 0, 0, resultWidth, resultHeight);
|
// 返回校正图片
|
next(canvas.toDataURL('image/jpeg', 0.8));
|
};
|
image.src = img;
|
}
|
},
|
components: {
|
FButton,
|
XButton,
|
XHeader,
|
Icon,
|
FSpace
|
},
|
activated: function() {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
this.questionText = '';
|
this.mblType = '';
|
this.uploadImgList = [];
|
},
|
deactivated() {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import '../../style/mixin.less';
|
|
.feedback-page {
|
.input-btnbox {
|
padding: 0 12px;
|
.weui-btn {
|
height: 44px;
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
color: @color-white;
|
font-size: 16px;
|
}
|
.weui-btn:after {
|
display: none;
|
}
|
}
|
input::-webkit-input-placeholder {
|
color: #999 !important; /* WebKit browsers */
|
}
|
.search_input::-webkit-input-placeholder {
|
color: #999 !important;
|
}
|
background-color: @color-background-default;
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-title {
|
font-size: 18px;
|
}
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
}
|
.feedback-head {
|
position: relative;
|
margin-bottom: 20px;
|
height: 215px;
|
.mine-page-division {
|
width: 100%;
|
height: 215px;
|
border-width: 0px;
|
margin-top: 10px;
|
resize: none;
|
outline: none;
|
padding: 15px 12px 10px 12px;
|
box-sizing: border-box;
|
font-size: @font-size-medium;
|
}
|
.feedback-num {
|
position: absolute;
|
right: 12px;
|
bottom: 0px;
|
color: @color-text-third;
|
}
|
}
|
.feedback-input {
|
width: 100%;
|
box-sizing: border-box;
|
border-width: 0px;
|
outline: none;
|
padding: 0 12px;
|
height: 44px;
|
margin-bottom: 10px;
|
}
|
.feedback-foot {
|
padding: 15px 12px;
|
background-color: @color-white;
|
p {
|
color: @color-text-third;
|
margin-bottom: 16px;
|
}
|
.feedback-add {
|
width: 100%;
|
height: 84px;
|
img {
|
width: 79px;
|
height: 79px;
|
}
|
}
|
}
|
.f-button {
|
margin-top: 45px;
|
}
|
.upload-box {
|
background-color: @color-white;
|
padding-bottom: 10px;
|
.flexLayout();
|
}
|
.upload-list {
|
flex: 1;
|
background-color: @color-white;
|
.upload-list-img {
|
position: relative;
|
display: inline-block;
|
vertical-align: middle;
|
width: 78px;
|
height: 80px;
|
margin-right: 10px;
|
margin-bottom: 20px;
|
.weui-icon {
|
position: absolute;
|
right: -14px;
|
top: -10px;
|
font-size: 20px;
|
/*background-color: #fff;*/
|
color: #ff4d53;
|
}
|
&:first-child {
|
margin-left: 0;
|
}
|
&:last-child {
|
margin-right: 0;
|
}
|
img {
|
width: 80px;
|
height: 80px;
|
}
|
}
|
}
|
.upload-action-box {
|
position: relative;
|
width: 80px;
|
height: 80px;
|
margin-bottom: 20px;
|
list-style: none;
|
display: inline-block;
|
vertical-align: middle;
|
text-align: center;
|
background: @color-background-default;
|
border: 1px solid @color-divider-regular;
|
box-sizing: border-box;
|
.iconfont {
|
font-size: 30px;
|
line-height: 80px;
|
color: @color-divider-regular;
|
}
|
.upload-input {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
opacity: 0;
|
}
|
}
|
}
|
</style>
|
