<template>
<view class="container">
<view style="width: 800px;">
<view style="height: 200px;"></view>
<form @submit="formSubmit">
<view class="" style="flex-direction: column;padding-bottom: 200rpx;">
<view class=" ">
<view class="margin-l-30 flex justify-between align-center">
<view class="flex flex-direction-row align-center">
<view>
<image src="/static/index/expose.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
</view>
<view @click="clickexpose" >
<view v-if="this.expose == '0'" class="expose-noactive" >
曝光台
</view>
<view v-if="this.expose == '1'" class="expose-active" >
曝光台
</view>
</view>
</view>
</view>
<view class="" style="background-color: #282B31;">
<textarea auto-height="true" style="user-select: auto; width: 100%; min-height: 350px;color: #fff;letter-spacing: 5rpx;" class="textarea" name="content" placeholder-class="text-gray"
v-model="content" maxlength="5000" placeholder=""
placeholder-style="font-size:28rpx" />
</view>
</view>
<u-upload
:auto-upload="true"
@on-success="handleUploadSuccess"
@on-error="handleUploadError"
:source-type="['album', 'camera']"
name="file"
:file-num-limit="10"
:custom-btn="true"
action="https://app.955zgz.com/api/v1/5d5fa8984f0c2"
>
<template #addBtn>
<u-icon type="plus"></u-icon>
<span>上传文件</span>
</template>
</u-upload>
</view>
<view class=" footer-yy">
<view style="display: flex;flex-direction: row;">
<button @click="tapUrl('/pages/homePage/index/index')" class="btn-secondary ">返回</button>
<button class="btn-primary " formType="submit">发布</button>
</view>
</view>
</form>
<view class="status-tab-tab2"></view>
<!-- 断网检测 -->
<u-toast ref="uToast" />
<aui-loading :SHOW="auiLoading.show" :type="auiLoading.type" :direction="auiLoading.row" :msg="auiLoading.msg"
:mask="auiLoading.mask"></aui-loading>
</view>
</view>
</template>
<script>
// 引入规则校验文件
import {
UploadImage
} from '@/common/utils/index';
// 引入上传图片公共方法
// 引入上传公共url
import {
UPLOAD_IMAGE_URL,SERIAL
} from '@/common/config.js';
export default {
data() {
return {
paramObj: {
img: [] // 初始化 images 属性为一个空数组
},
expose:"0",
auiLoading: {
show: false,
msg: '发布中',
},
// 是否必填信息 默认初始值必填
types: [], // 反馈类型 调用接口获取
active: 1, // 反馈类型选中 默认选中第一个
imgList: [], // 上传图片数组
count: 6, //做多上传几张图片
title:'',//标题
content: '', //反馈内容
contact: '', // 手机号码
// 显示状态类型判断
thumb_status: '1', // 是否显示图片上传
imgList_id: [],
pic:'',
};
},
computed: {
/**
* 反馈内容字数计算
*/
contentLen() {
return this.content.length;
}
},
onLoad() {
// 获取反馈类型数据
// this.get_feedback_type();
},
methods: {
handleUploadSuccess(res) {
const resArray =res.data;
this.imgList.push(...resArray);
console.log('上传成功');
},
handleUploadError(err) {
console.error(err);
// 处理上传错误
},
formSubmit(e) {
let _this = this;
//进行表单检查
var formData = e.detail.value;
if(!formData.content){
this.$refs.uToast.show({
title: '请输入发布信息',
})
return
}
formData.pictures = this.imgList.map(item => item.path);
console.log(formData.pictures)
// 对表单数据进行校验，
formData.expose = this.expose;
let errMsg = this.doValidate(formData);
if (errMsg) {
return;
}
this.auiLoading.show = true
console.log(errMsg, formData);
// 发布数据
// let id =formData.content;
this.$api.post(global.apiUrls.adddHuashuo, formData).then(res => {
// console.log(formData);
console.log(res);
if (res.data.code == 1) {
// 发布成功返回上页面
this.auiLoading.show = false
this.$refs.uToast.show({
title: '发布成功',
})
setTimeout(() => {
uni.navigateBack();
// _this.$urouter.redirectTo('/pages/index/setting/my-feedback');
}, 1200);
} else {
this.auiLoading.show = false
this.$refs.uToast.show({
title: res.data.msg,
})
}
});
},
/**
* @description 曝光太
* @param {Object}
*/
clickexpose(){
if(this.expose =="0"){
this.expose = '1';
this.$refs.uToast.show({
title: '发布至企业不良行为曝光台',
})
return
}
if(this.expose =="1"){
this.expose = '0';
this.$refs.uToast.show({
title: '取消',
})
return
}
},
/**
* @description 进行表单校验
* @param {Object} formData要校验的表单数据
*/
doValidate(formData) {
let {
content,
contact,
qq_contact,
email_contact
} = formData;
console.log(content, contact);
if (!content || !content.trim()) {
this.$refs.uToast.show({
title: '发布内容不能为空',
type: 'error'
})
return;
}
// if ( !contact || !contact.trim()) {
// return that.i18n['请留下你的联系方式'] ;
// }
return '';
}
}
};
</script>
<style lang="scss">
page {
.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;
.warp {
// 反馈类型 start
.feedback {
// padding: 0 25upx;
.feedback-top {
// margin-bottom: 24upx;
// height: 30upx;
// line-height: 30upx;
// font-size: 32rpx;
// font-weight: bold;
}
.feedback-reason {
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
// justify-content: space-between;
.margin-t-20 {
// width: 46%;
// padding: 15rpx 40rpx;
// text-align: center;
// font-size: 26upx;
// border-radius: 10upx;
// border: 1px solid #666;
// margin-right: 20rpx;
// margin-top: 20rpx;
&.active {
// color: #fff;
// background: #EC2828;
}
}
}
}
// 反馈类型 end
// 反馈内容 start
.feedback-content {
// margin-top: 30rpx;
// padding: 0 0upx;
// border-top: 20rpx solid #2a2a31;
.content {
.textarea {
}
}
image {
width: 164upx;
height: 164upx;
margin-bottom: 18upx;
}
}
// 反馈内容 end
.upload_desc {
margin-top: 30rpx;
width: 100%;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #bfbfbf;
opacity: 1;
padding: 0 25upx;
}
}
.image {
width: 164upx;
height: 164upx;
margin-bottom: 18upx;
}
// 反馈联系方式 start
.feedback-contact {
padding: 0 25upx;
.feedback-contact-top {
height: 80upx;
color: $uni-text-color;
font-size: $uni-font-size-lg;
font-weight: bold;
}
.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;
}
}
}
// 反馈练习方式 end
}
}
// 反馈发布 start
.footer-yy {
padding-bottom: 100px;
}
.btn-primary {
width: 660rpx;
height: 88rpx;
background: $theme;
opacity: 1;
border-radius: 25rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
}
.btn-secondary {
width: 660rpx;
height: 88rpx;
background-color: #ff6464;
opacity: 1;
border-radius: 25rpx;
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;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.expose-noactive {
width: 125rpx;
height: 55rpx;
color: #fff;
}
.expose-active {
width: 125rpx;
height: 55rpx;
animation-name: tabanimation;
animation-duration: .3s;
color: #FF4B3A;
}
.status-tab-tab2 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: env(safe-area-inset-bottom);
margin: 0;
padding: 0;
background-color: #fff;
z-index: 999;
}
.publish-content{
width: 125rpx;
height: 55rpx;
color: #fff;
}
.container{
display: flex;
justify-content: center;
}
</style>
