<template>
|
<view class="follow-page">
|
<no-data v-if="!list||list.length===0" style="width: 100%;"></no-data>
|
|
<view v-else style="min-height: 80vh;" class="p20">
|
<view class="follow-item m-b-40 flex" v-for="(item,index) of list" :key="index">
|
<view class="info">
|
<view class="name">投诉反馈类型：{{ item.typeStr || item.type || '-'}}</view>
|
<view class="name">投诉反馈内容：{{ item.feedBack || '-'}}</view>
|
<view class="name">提交时间：{{ item.createTime || '-' }}</view>
|
</view>
|
<view class="line-gray"></view>
|
<view class="info">
|
<view class="name">回复内容：{{ item.reply || '-'}}</view>
|
<view class="name">回复时间：{{ item.replyTime || '-' }}</view>
|
</view>
|
<view class="line-gray"></view>
|
<view class="component-buttons">
|
<view class="button-1" @click="toDetail(item)">查看详情</view>
|
</view>
|
</view>
|
</view>
|
<footer-msg :more="page.total>0&&page.total>page.current*page.size&&list.length>0"></footer-msg>
|
|
<view style="min-height:160rpx">
|
</view>
|
|
<view class="button-green-1 m-t-20 button-fixed-bottom " @click="addFeedback">
|
提交投诉/反馈
|
</view>
|
|
|
<uni-popup ref="popup" type="bottom">
|
<view class="component-popup_input_all">
|
|
|
<view class="close-parent">
|
填写投诉/反馈内容
|
<uni-icons class="close" type="closeempty" @click="$refs.popup.close()"></uni-icons>
|
</view>
|
|
<view class="submit form">
|
<view class="form-item" style="height: unset;">
|
<view class="form-item-label require" style="min-width: 120rpx;margin-right: 10rpx;">
|
类型
|
</view>
|
<view class="form-item-value flex value-items">
|
<view class="value-item" @click="()=>{
|
if(submitForm.type!==each.value){
|
submitForm.type = each.value
|
}
|
}" :class="[submitForm.type==each.value?'cur':'']" v-for="(each, j) in type_columns" :key="j">
|
{{ each.label || '-' }}
|
</view>
|
</view>
|
</view>
|
|
<view class="form-item">
|
<view class="form-item-label require">
|
内容
|
</view>
|
<view class="form-item-value">
|
<input v-model="submitForm.feedBack" placeholder="填写投诉/反馈内容" class="form-input"></input>
|
</view>
|
</view>
|
<view class="form-item">
|
<view class="form-item-label require">
|
图片
|
</view>
|
<view class="form-item-value m-l-a m-r-0">
|
<view class="t-red" @click="uploadCheckImage()">上传</view>
|
</view>
|
</view>
|
<view class="flex p20" v-if="submitForm.pictures&&submitForm.pictures.length>0">
|
<view class="m-t-12 m-r-10 " v-for="(timg,index) of submitForm.pictures" :key="index">
|
<image class="check-img" :src="timg" @click.stop="previewImg(timg)">
|
</image>
|
<view class="t-red text-center" @click.stop="deleteCheckImage(index)">删除</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- <view class="line-gray"></view> -->
|
|
<view class="component-buttons m-t-20" style="width: unset;">
|
<view class="button-1 m-auto" @click="$refs.popup.close()">关闭</view>
|
<view class="button-0 m-auto" @click="submit">提交</view>
|
</view>
|
</view>
|
|
</uni-popup>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
submitForm: {},
|
type_columns: [],
|
}
|
},
|
async onPullDownRefresh() {
|
await this.refreshList()
|
uni.stopPullDownRefresh()
|
},
|
async onShow() {
|
|
},
|
async onLoad() {
|
this.listApi = '/api/feedback/my/feedback/list'
|
this.getList()
|
this.$http.request('get', '/api/code/value', {
|
params: {
|
type: 'feedback_type'
|
}
|
}).then(res => {
|
var data = res.data
|
this.type_columns = data || []
|
|
})
|
},
|
methods: {
|
toDetail(item) {
|
uni.navigateTo({
|
url: `/sub_pages/customer/self/feedback-detail?id=${item.id}`
|
})
|
},
|
async deleteCheckImage(index) {
|
await this.$message.confirm('确定删除吗')
|
this.submitForm.pictures.splice(index, 1)
|
},
|
uploadCheckImage() {
|
let that = this
|
uni.chooseImage({
|
count: 1, // 最多可以选择的图片张数，默认9
|
sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
|
sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
|
success: function(res) {
|
let errMsg = res.errMsg
|
let tempFiles = res.tempFiles
|
if (errMsg === 'chooseImage:ok') {
|
if (tempFiles[0].size > 1024 * 1024 * 5) {
|
that.$message.confirm('图片最多支持5M大小,超出大小限制')
|
return
|
}
|
that.$message.showLoading()
|
that.$http.upload(tempFiles[0].path).then(async res => {
|
console.log('res1', res)
|
var pic = res.data && res.data.length > 0 && res.data[
|
0]
|
.url || ''
|
that.$message.hideLoading()
|
that.submitForm.pictures.push(pic)
|
that.$forceUpdate()
|
}).catch(res => {
|
that.$message.hideLoading()
|
console.error(res)
|
that.$message.showToast('文件上传失败，请联系管理员')
|
})
|
}
|
}
|
})
|
},
|
async addFeedback() {
|
this.submitForm = {
|
feedBack: '',
|
type: '',
|
pictures: [],
|
}
|
this.$refs.popup.open()
|
|
// const res = await this.$message.confirm('', {
|
// editable: true,
|
// title: '请填写投诉/反馈内容'
|
// })
|
// if (res.content && res.confirm) {
|
// // 发送请求
|
// if (!res.content) {
|
// this.$message.showToast('未填写内容')
|
// } else {
|
// this.$message.showLoading()
|
// const {
|
// code
|
// } = await this.$http.request('post', '', {
|
// data: {
|
// feedBack: res.content
|
// }
|
// })
|
// this.$message.hideLoading()
|
// if (code == 0) {
|
// await this.refreshList()
|
// this.$message.showToast('提交成功')
|
// }
|
// }
|
|
|
// } else {
|
|
// }
|
},
|
|
async submit() {
|
console.log('submitForm',this.submitForm)
|
if (!this.submitForm.type) {
|
this.$message.showToast('未选择类型')
|
return
|
}
|
if (!this.submitForm.feedBack) {
|
this.$message.showToast('未填写内容')
|
return
|
}
|
this.$message.showLoading()
|
const {
|
code
|
} = await this.$http.request('post', '/api/feedback/page/new', {
|
data: {
|
feedBack: this.submitForm.feedBack,
|
type: this.submitForm.type,
|
pictures: JSON.stringify(this.submitForm.pictures)
|
}
|
})
|
this.$message.hideLoading()
|
if (code == 0) {
|
this.$refs.popup.close()
|
await this.refreshList()
|
this.$message.showToast('提交成功')
|
}
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.follow-page {
|
min-height: 99vh;
|
|
.follow-item {
|
padding: 30rpx;
|
background-color: #FFFFFF;
|
margin-bottom: 20rpx;
|
|
|
.info {
|
.name {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #000000;
|
line-height: 40rpx;
|
margin-top: 6rpx;
|
}
|
|
.time {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #a3a3a3;
|
line-height: 40rpx;
|
margin-top: 6rpx;
|
}
|
|
}
|
|
.button {
|
padding: 14rpx 36rpx;
|
text-align: center;
|
margin-left: 10rpx;
|
font-weight: 400;
|
font-size: 24rpx;
|
line-height: 30rpx;
|
border-radius: 34rpx;
|
margin-top: 10rpx;
|
|
|
// min-width: 128rpx;
|
height: 30rpx;
|
|
|
}
|
|
.button-1 {
|
color: #999999;
|
border: 2rpx solid #999999;
|
|
}
|
|
.button-2 {
|
border: 2rpx solid #20613D;
|
color: #20613D;
|
}
|
}
|
}
|
.component-popup_input_all{
|
.check-img {
|
width: 96rpx;
|
height: 96rpx;
|
border-radius: 4rpx;
|
border: 2rpx dashed #CECECE;
|
}
|
}
|
</style>
|
