<template>
<view class="index tn-safe-area-inset-bottom">
<tn-nav-bar customBack>
<view slot="back" class='tn-custom-nav-bar__back' @click="goBack()">
<text class='icon tn-icon-left'></text>
</view>
<view slot="default" style="display: flex;">
<view style="flex:1;">
<text :style="{fontSize:(wxFontSize)+'px'}">问题反馈</text>
</view>
<view @click="showHis" style="margin-right:10px">
<text class='tn-icon-time' :style="{fontSize:(wxFontSize-1)+'px'}"></text>
<text :style="{fontSize:(wxFontSize)+'px'}">历史反馈</text>
</view>
</view>
</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view style="display: flex;line-height: 37px;padding: 16px;">
<view style="margin-right: 8px;" :style="{fontSize:(wxFontSize-2)+'px'}">问题类型</view>
<view style="flex:1"><uni-data-select :clear="false" v-model="typeValue" :localdata="range" @change="change"></uni-data-select></view>
</view>
<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
<textarea maxlength="500" v-model="contentValue" placeholder="请描述您遇到的问题..." placeholder-style="color:#AAAAAA"></textarea>
</view>
<view class="tn-margin-left tn-padding-top-xs">
<uni-file-picker
v-model="imgList" :limit="6" :auto-upload="false" @select="select" @success="success">
</uni-file-picker>
</view>
<view style="display: flex;line-height: 37px;padding: 16px;">
<view style="margin-right: 8px;" :style="{fontSize:(wxFontSize-2)+'px'}">联系方式</view>
<view style="flex:1">
<uni-easyinput :style="{fontSize:(wxFontSize-2)+'px'}" v-model="contactMethod" :clearable="false" placeholder="请填写您的手机号，以便我们联系您"></uni-easyinput>
</view>
</view>
</view>
<view class="tn-flex tn-footerfixed">
<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
<button type="primary" style="background-color:#1d60b1;border-radius: 23px" @click="saveForm()">提交</button>
</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request'
export default {
data() {
return {
imgList:[],
fileDetailList:[],
showHistory: false,
content: [],
contentValue:'',
contactMethod:uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).userName:'',
typeValue:1,
range: [{
value: 1,
text: "汇报系统故障"
},
{
value: 2,
text: "平台机制咨询"
},
{
value: 3,
text: "投诉"
},
{
value: 5,
text: "平台用户举报"
},
{
value: 4,
text: "其他"
},
],
showEmpty: false,
wxFontSize:17
}
},
filters: {
formatDate(value) {
if (!value) return '';
const date = new Date(value);
const today = new Date();
const yesterday = new Date(today); // 昨天的日期
yesterday.setDate(yesterday.getDate() - 1); // 将昨天的日期设置为前一天
if (date.getFullYear() == today.getFullYear() && date.getMonth() == today.getMonth() && date.getDate() ==
today.getDate()) {
return '今天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
.getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
}
if (date.getFullYear() == yesterday.getFullYear() && date.getMonth() == yesterday.getMonth() && date
.getDate() == yesterday.getDate()) {
return '昨天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
.getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
}
return date.toLocaleDateString() + ' ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
.getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
},
},
created() {
// uni.navigateTo({
// url:'/pages/mine/addFeed'
// })
},
methods: {
showHis(){
uni.navigateTo({
url:'/pages/mine/feedback'
})
},
goBack() {
uni.navigateBack();
},
select(e) {
console.log('选择文件：', e)
let tempFiles = e.tempFiles;
for (let i in tempFiles) {
this.upfile(tempFiles[i])
}
},
upfile(file) {
let that = this;
uni.uploadFile({
url: 'https://slb-m.lx-device.com/oss/upload/userFeedback', //仅为示例，非真实的接口地址
filePath: file.url,
name: 'file',
success: (uploadFileRes) => {
let resultMap = JSON.parse(uploadFileRes.data).resultMap;
that.fileDetailList.push({
name: file.name,
fileName: file.name, // 原始文件名
ftpUrl: resultMap.uploadUrl, // 文件访问url
})
}
});
},
// 上传成功
success(e) {
console.log('上传成功')
},
saveForm(){
if (!uni.getStorageSync('userNo')) {
uni.showToast({
title: '请登录'
})
uni.navigateTo({
url: '/pages/login/login'
})
return false;
}
let that = this;
let params = {
};
if(!this.contentValue){
uni.showToast({
title: '请输入您遇到的问题',
duration: 2000,
icon:'none'
});
return false;
}
if(!this.contactMethod){
uni.showToast({
title: '请输入您的联系方式',
duration: 2000,
icon:'none'
});
return false;
}
uni.showToast({
title: '提交中...',
icon:'none'
});
params.slbFeedback = JSON.stringify({
type:this.typeValue,
content:this.contentValue,
contactMethod:this.contactMethod,
userNo:uni.getStorageSync('userNo'),
});
params.fileDetailList = JSON.stringify(this.fileDetailList);
request.post('/slbFeedback/add', params).then(res => {
if(res.success){
uni.showToast({
title:'问题反馈已提交',
icon:'none',
success:()=>{
setTimeout(()=>{
uni.redirectTo({
url:'/pages/mine/feedback'
});
},2000)
}
})
}else{
uni.showToast({
title:res.msg,
icon:'none'
})
}
console.warn(res);
})
}
},
onLoad() {
const appBaseInfo = wx.getAppBaseInfo();
this.wxFontSize = uni.getStorageSync('fontSize')||appBaseInfo.fontSizeSetting||17;
}
}
</script>
<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
width: 60%;
height: 100%;
position: relative;
display: flex;
justify-content: space-evenly;
align-items: center;
box-sizing: border-box;
// background-color: rgba(0, 0, 0, 0.15);
border-radius: 1000rpx;
border: 1rpx solid rgba(255, 255, 255, 0.5);
// color: #FFFFFF;
font-size: 18px;
.icon {
display: block;
flex: 1;
margin: auto;
text-align: center;
}
&:before {
content: " ";
width: 1rpx;
height: 110%;
position: absolute;
top: 22.5%;
left: 0;
right: 0;
margin: auto;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
opacity: 0.7;
background-color: #FFFFFF;
}
}
</style>