559 lines
16 KiB
Vue
559 lines
16 KiB
Vue
<template>
|
||
<view class="change">
|
||
<!-- 标题栏 start -->
|
||
|
||
<form @submit="formSubmit">
|
||
<view class="warp">
|
||
<!-- 反馈类型 start -->
|
||
<view class="feedback">
|
||
<view class="feedback-top padding-tb">反馈类型</view>
|
||
<view class="feedback-reason text-gray">
|
||
<view class="margin-top-xs text-cut" v-for="(item, index) in types" :key="index"
|
||
:class="item.aid == active ? 'active' : ''" @click="reason(item.aid)">
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 反馈类型 end -->
|
||
<!-- 反馈内容 start -->
|
||
<view class="feedback-content ">
|
||
<view class="block-box margin-top-lg"></view>
|
||
<view class="feedback-content-top padding">反馈内容</view>
|
||
<view class="content">
|
||
<textarea class="textarea" name="body" placeholder-class="text-gray" v-model="body" maxlength="200"
|
||
:placeholder="'问题描述的越详细.有助于我们更快的解决问题'" placeholder-style="font-size:28rpx" />
|
||
</view>
|
||
</view>
|
||
<!-- 反馈内容 end -->
|
||
<!-- 图片 start-->
|
||
<view class='flex flex-direction flex-wrap align-stretch'>
|
||
<benben-images-upload ref="benbenImagesUploadfd1_3_c1_c0" :img-list.sync="singleImageUpload" :img-ids.sync="singleImageUploadIds"
|
||
:is-show-tips='true' :maxlength="6">
|
||
<template #content="{ num, maxlength, isShow, imgList }">
|
||
<view class="flex flex-wrap align-start flex feedbackRecord_fd1_3_c1_c0">
|
||
|
||
<view v-for="(image, index) in imgList" :key="index"
|
||
class='flex position-relative feedbackRecord_fd1_3_c1_c00'>
|
||
<text class='fu-iconfont2 position-absolute feedbackRecord_fd1_3_c1_c000'
|
||
@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.delImage(index)"></text>
|
||
<image class='feedbackRecord_fd1_3_c1_c001'
|
||
@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.previewImage(index)" mode="aspectFill" :src='image'>
|
||
</image>
|
||
</view>
|
||
|
||
<image class='feedbackRecord_fd1_3_c1_c01'
|
||
@tap.stop="$refs.benbenImagesUploadfd1_3_c1_c0.manyChooseImage()" v-if="isShow" mode="aspectFit"
|
||
:src='STATIC_URL+"140.jpg"'></image>
|
||
<text class='image_upload_tips feedbackRecord_fd1_3_c1_c02'>请上传应用截图，最多上传6张</text>
|
||
</view>
|
||
</template>
|
||
</benben-images-upload>
|
||
</view>
|
||
<!-- <view class="cu-form-group">
|
||
<view class="grid col-4 grid-square flex-sub">
|
||
<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="viewImage(index)"
|
||
:data-url="index">
|
||
<view class="image">
|
||
<image :src="item.path" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="cu-tag bg-red" @tap.stop="delImg" :data-index="index"><text class="cuIcon-close"></text>
|
||
</view>
|
||
</view>
|
||
<view @tap="chooseImage" v-if="imgList.length < 6">
|
||
<image :src='STATIC_URL+"140.jpg"' mode="" class="add-img"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="upload_desc">请上传应用截图，最多上传{{ count }}张</view> -->
|
||
<!-- 图片 end -->
|
||
</view>
|
||
<!-- 联系方式 - 手机号码 start -->
|
||
<view class="feedback-contact ">
|
||
<view class="feedback-contact-top padding-top-lg">请留下您的联系方式</view>
|
||
<view class="feedback-contact-content flex"><input name="contact" placeholder-class="text-gray" maxlength="48" v-model="contact" :placeholder="'手机号/邮箱/QQ号'" /></view>
|
||
</view>
|
||
<!-- 联系方式 - 手机号码 end -->
|
||
|
||
<view class="bg-white footer-yy flex flex-direction justify-center align-center">
|
||
<button class="btn-primary round" formType="submit">提交</button>
|
||
<text class="text-lg margin-top-lg" style="color: #FF9300;" @click="routeHistory">反馈记录</text>
|
||
</view>
|
||
</form>
|
||
<!-- 断网检测 -->
|
||
<fu-notwork></fu-notwork>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 引入规则校验文件
|
||
import {
|
||
validate
|
||
} from '@/common/utils/index';
|
||
// import { UploadImg } from '@/common/utils/upload-image.js'
|
||
// 引入上传图片公共方法
|
||
import {
|
||
UploadImage
|
||
} from '@/common/utils/index';
|
||
// 引入上传公共url
|
||
import {
|
||
UPLOAD_IMAGE_URL
|
||
} from '@/common/config.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
"singleImageUpload": [],
|
||
singleImageUploadIds:'',
|
||
// 是否必填信息 默认初始值必填
|
||
types: [], // 反馈类型 调用接口获取
|
||
active: 1, // 反馈类型选中 默认选中第一个
|
||
imgList: [], // 上传图片数组
|
||
count: 6, //做多上传几张图片
|
||
body: '', //反馈内容
|
||
contact: '', // 手机号码
|
||
imgIds: '',
|
||
// 显示状态类型判断
|
||
thumb_status: '1' // 是否显示图片上传
|
||
};
|
||
},
|
||
computed: {
|
||
/**
|
||
* 反馈内容字数计算
|
||
*/
|
||
bodyLen() {
|
||
return this.body.length;
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 获取反馈类型数据
|
||
this.get_feedback_type();
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* @description 查看历史反馈
|
||
*/
|
||
routeHistory() {
|
||
uni.navigateTo({
|
||
url: '/pages/xtsz/historicalFeedback/historicalFeedback'
|
||
});
|
||
},
|
||
/**
|
||
* @description 选择反馈类型
|
||
* @param {Object} type反馈类型id
|
||
*/
|
||
reason(type) {
|
||
this.active = type;
|
||
},
|
||
/**
|
||
* @description 获取反馈类型数据
|
||
*/
|
||
get_feedback_type() {
|
||
let that = this;
|
||
this.$api
|
||
.post(global.apiUrls.feedbackTypes)
|
||
.then(res => {
|
||
console.log(res);
|
||
if (res.data.code == 1) {
|
||
let result = res.data.data;
|
||
that.types = result; //获取反馈类型数据
|
||
that.active = result[0] && result[0].aid; //默认选中第一个反馈类型
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
/**
|
||
* @description 图片上传
|
||
*/
|
||
chooseImage() {
|
||
let self = this;
|
||
console.log('可以选择的图片数量', self.count - self.imgList.length);
|
||
// 从相册中选择图片
|
||
uni.chooseImage({
|
||
count: self.count - self.imgList.length, // 默认3
|
||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
success: function(res) {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
|
||
// 开始上传
|
||
new UploadImage(tempFilePaths, {
|
||
complete: function(res) {
|
||
console.log(res);
|
||
// 上传成功 返回数据格式为数组 [ { id: '', path: '' } ]
|
||
self.imgList.push(...res);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* @description 图片预览
|
||
* @param {Object} inx图片预览数据
|
||
*/
|
||
viewImage(inx) {
|
||
let arr = this.imgList.map(item => {
|
||
return item.path;
|
||
});
|
||
uni.previewImage({
|
||
urls: arr,
|
||
current: inx
|
||
});
|
||
},
|
||
/**
|
||
* @description 删除图片事件
|
||
* @param {Object} e事件参数
|
||
* e.currentTarget.dataset.index需要删除的图片下标
|
||
*/
|
||
delImg(e) {
|
||
this.$util.showModal({
|
||
title: '友情提示',
|
||
content: '确定要删除图片吗？',
|
||
cancelText: '取消',
|
||
confirmText: '确定',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
// 确定删除从数组中删除图片
|
||
this.imgList.splice(e.currentTarget.dataset.index, 1);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* @description 反馈提交
|
||
* @param {Object} e事件参数
|
||
* e.detail.value 获取表单输入值
|
||
*/
|
||
formSubmit(e) {
|
||
// console.log(this.singleImageUpload);
|
||
// console.log(this.singleImageUploadIds);
|
||
// return false;
|
||
let _this = this;
|
||
//进行表单检查
|
||
var formData = e.detail.value;
|
||
// 选中反馈类型赋值
|
||
formData.type = this.active;
|
||
|
||
// 对图片进行处理操作
|
||
// let imgarr = this.imgList.map(item => {
|
||
// return item.id;
|
||
// });
|
||
|
||
// formData.thumb = imgarr.join(',');
|
||
formData.thumb = this.singleImageUploadIds;
|
||
|
||
// 对表单数据进行校验，
|
||
let errMsg = this.doValidate(formData);
|
||
if (errMsg) {
|
||
this.$message.info(errMsg);
|
||
return;
|
||
}
|
||
// let typeName = ''
|
||
// this.types.map((item) => {
|
||
// if (formData.type == item.aid) {
|
||
// typeName = item.title
|
||
// }
|
||
// })
|
||
// formData.type = typeName
|
||
console.log(errMsg, formData);
|
||
// 提交数据
|
||
|
||
if (this.isSubmit) return;
|
||
this.isSubmit = true;
|
||
uni.showLoading({
|
||
title: '正在提交~',
|
||
mask: true
|
||
})
|
||
this.$api.post(global.apiUrls.feedbackAdd, formData).then(res => {
|
||
this.$message.info(res.data.msg);
|
||
console.log(res);
|
||
uni.hideLoading()
|
||
if (res.data.code == 1) {
|
||
// 提交成功返回上页面
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
// _this.$urouter.redirectTo('/pages/index/setting/my-feedback');
|
||
}, 1200);
|
||
} else {
|
||
this.isSubmit = false;
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @description 进行表单校验
|
||
* @param {Object} formData要校验的表单数据
|
||
*/
|
||
doValidate(formData) {
|
||
let {
|
||
body,
|
||
contact,
|
||
qq_contact,
|
||
email_contact
|
||
} = formData;
|
||
console.log(body, contact);
|
||
if (!body || !body.trim()) {
|
||
return '反馈内容不能为空';
|
||
}
|
||
if (!this.singleImageUploadIds) {
|
||
return '请上传应用截图';
|
||
}
|
||
// if ( !contact || !contact.trim()) {
|
||
// return that.i18n['请留下你的联系方式'] ;
|
||
// }
|
||
|
||
return '';
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
|
||
.feedbackRecord_fd1_3_c1_c02 {
|
||
font-size: 24rpx;
|
||
color: rgba(191, 191, 191, 1);
|
||
font-weight: 400;
|
||
width: 100%;
|
||
}
|
||
|
||
.feedbackRecord_fd1_3_c1_c01 {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin: 0rpx 24rpx 24rpx 0rpx;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
}
|
||
|
||
.feedbackRecord_fd1_3_c1_c001 {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
}
|
||
|
||
.feedbackRecord_fd1_3_c1_c000 {
|
||
top: 0rpx;
|
||
right: 0rpx;
|
||
z-index: 10;
|
||
color: #ff5536;
|
||
}
|
||
|
||
.feedbackRecord_fd1_3_c1_c00 {
|
||
margin: 0rpx 24rpx 24rpx 0rpx;
|
||
}
|
||
|
||
.feedbackRecord_fd1_3_c1_c0 {
|
||
padding: 24rpx 0rpx 0rpx 24rpx;
|
||
}
|
||
.header {
|
||
|
||
// border-bottom: 1px solid #f1f1f1;
|
||
.title-right {
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #ff6464;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
font-size: 28upx;
|
||
color: #333;
|
||
|
||
.change {
|
||
min-height: 100vh;
|
||
background-color: white;
|
||
|
||
.warp {
|
||
width: 100%;
|
||
background: #fff;
|
||
padding-bottom: 32upx;
|
||
|
||
// border-bottom: 20upx solid #F8F9FC;
|
||
// 反馈类型 start
|
||
.feedback {
|
||
padding: 0 25upx;
|
||
|
||
.feedback-top {
|
||
margin-bottom: 24upx;
|
||
height: 30upx;
|
||
line-height: 30upx;
|
||
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.feedback-reason {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
|
||
.margin-top-xs {
|
||
padding: 12rpx 40rpx;
|
||
text-align: center;
|
||
font-size: 28upx;
|
||
border-radius: 10upx;
|
||
border: 1px solid #BFBFBF;
|
||
margin-right: 20rpx;
|
||
margin-top: 20rpx;
|
||
|
||
&.active {
|
||
color: #fff;
|
||
border: 1px solid #FF9300;
|
||
background: #FF9300;
|
||
// background: linear-gradient(270deg, rgba(241, 35, 19, 1) 0%, rgba(255, 187, 42, 1) 150%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.block-box {
|
||
background-color: #f1f1f1;
|
||
height: 20rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
// 反馈类型 end
|
||
// 反馈内容 start
|
||
.feedback-content {
|
||
margin-top: 20rpx;
|
||
padding: 0 0upx;
|
||
|
||
.feedback-content-top {
|
||
margin-top: 20rpx;
|
||
margin-bottom: 16upx;
|
||
height: 30upx;
|
||
line-height: 30upx;
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.content {
|
||
padding: 24rpx;
|
||
|
||
.textarea {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
word-break: break-word;
|
||
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 164upx;
|
||
height: 164upx;
|
||
margin-bottom: 18upx;
|
||
}
|
||
}
|
||
|
||
// 反馈内容 end
|
||
.upload_desc {
|
||
width: 100%;
|
||
height: 33rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
line-height: 33rpx;
|
||
color: #BFBFBF;
|
||
opacity: 1;
|
||
padding: 0 25upx;
|
||
}
|
||
}
|
||
|
||
.image {
|
||
width: 164upx;
|
||
height: 164upx;
|
||
margin-bottom: 18upx;
|
||
|
||
image {
|
||
width: 164upx;
|
||
height: 164upx;
|
||
}
|
||
}
|
||
|
||
// 反馈联系方式 start
|
||
.feedback-contact {
|
||
border-top: 20rpx solid #f1f1f1;
|
||
padding: 0 25upx;
|
||
background: #fff;
|
||
|
||
.feedback-contact-top {
|
||
height: 80upx;
|
||
color: #1A1A1A;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.feedback-contact-content {
|
||
input {
|
||
padding-top: 30rpx;
|
||
padding-bottom: 10rpx;
|
||
height: 100upx;
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border-bottom: 1upx solid #eee;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 反馈练习方式 end
|
||
}
|
||
}
|
||
|
||
// 反馈提交 start
|
||
.footer-yy {
|
||
padding-top: 60upx;
|
||
padding-bottom: 100upx;
|
||
|
||
button {
|
||
// width: 95%;
|
||
// background: #fff !important;
|
||
background: #FF9300;
|
||
|
||
// background-color:$fu-main-color !important;
|
||
&:after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-primary {
|
||
width: 686rpx;
|
||
height: 88rpx;
|
||
background: #FF9300;
|
||
// box-shadow: 0px 6px 20px rgba(19, 163, 141, 0.3);
|
||
opacity: 1;
|
||
border-radius: 50rpx;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
}
|
||
|
||
// 反馈提交 end
|
||
// 是否必填 start
|
||
.no-require {
|
||
margin-left: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
// 是否必填 end
|
||
.add-img {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
</style>
|