|
|
<template>
|
|
|
<!-- 20221220 -->
|
|
|
<view class="feedback-index-page">
|
|
|
<!-- 页面内容 -->
|
|
|
<view class="page-content">
|
|
|
|
|
|
<!-- 顶部固定 -->
|
|
|
<view class="jc-header bg-ff">
|
|
|
|
|
|
<!-- 图片 -->
|
|
|
<view class="padding-lr-30 padding-tb-10">
|
|
|
<image class="jc-image" style="width: 690rpx;height: 220rpx;" mode="aspectFill" :src="topImg">
|
|
|
</image>
|
|
|
</view>
|
|
|
|
|
|
<!-- 切换标签 -->
|
|
|
<view class="">
|
|
|
<ty-tab-around :list="tabsList" :list-key="listKey" :active.sync="tabsIndex" :color="'#2F97FF'"
|
|
|
@click="changeTabs">
|
|
|
</ty-tab-around>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 意见反馈 -->
|
|
|
<view class="content-block">
|
|
|
<view class="" v-if="tabsIndex == 0">
|
|
|
<!-- 反馈内容 -->
|
|
|
<view class="padding-lr-30 bg-ff ">
|
|
|
|
|
|
<view class="line-height-100 text-28 text-4d">问题反馈类型</view>
|
|
|
|
|
|
<!-- 类别 -->
|
|
|
<view class="flex flex-wrap">
|
|
|
<view class="category-item margin-bottom-20" :class="{ 'active' : categoryIndex == index}"
|
|
|
v-for="(item,index) in categoryList" :key="index" @click="categoryClick(index)">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 文本框 -->
|
|
|
<view class="dashed-bottom-ed padding-bottom-10">
|
|
|
<textarea class="feedback-content margin-top-20 line-40" placeholder="选择问题类型，帮助我们更快处理您的反馈"
|
|
|
placeholder-class="text-28 text-b3" maxlength="500" v-model="content"></textarea>
|
|
|
|
|
|
<view class="margin-top-30 flex justify-end text-28" style="color: #d8d8d8;">
|
|
|
{{content.length > 500 ? 500 : content.length}}/500
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 图片上传 -->
|
|
|
<view class="padding-top-30">
|
|
|
<ty-image-images-upload :count="imageCount" :image_list="imagePath"
|
|
|
:video-count="videoCount" @imageChange="imageChange">
|
|
|
</ty-image-images-upload>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 个人信息 -->
|
|
|
<view class="margin-top-15 padding-lr-30 bg-ff">
|
|
|
<view class="line-100 border-bottom flex align-center">
|
|
|
<view class="width-160">联系人姓名</view>
|
|
|
<input class="flex-one margin-left-30" placeholder="请输入联系人姓名" type="text" v-model="linkman"
|
|
|
placeholder-class="text-b3 text-28" />
|
|
|
</view>
|
|
|
<view class="line-100 flex align-center">
|
|
|
<view class="width-160">手机号码</view>
|
|
|
<input class="flex-one margin-left-30" placeholder="请输入手机号" type="number" maxlength="11"
|
|
|
v-model="mobilePhone" placeholder-class="text-b3 text-28" />
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 提交按钮 -->
|
|
|
<view class="btn width-100p padding-lr-30" @click="submit">
|
|
|
<view class="line-height-80 radius-40 bg-2f9 text-center text-28 text-ff">提交</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<view class="text-28" v-if="tabsIndex == 1">
|
|
|
<ty-list-list :status="load_status">
|
|
|
<view class="margin-20 bg-ff radius-10" v-for="(item,index) in list" :key="index">
|
|
|
<!-- 内容 -->
|
|
|
<view class="padding-30 border-bottom-ed"
|
|
|
@click="go('/pages/feedback/detail?id=' + item.id)">
|
|
|
<view class="flex align-center justify-between">
|
|
|
<view class="text-28" style="color: #2A2A2A;">
|
|
|
<text class="margin-right-50" v-if="item.linkman">{{item.linkman}}</text>
|
|
|
<text>{{item.mobile_phone}}</text>
|
|
|
</view>
|
|
|
<view class="text-28" style="color: #2A2A2A;">
|
|
|
{{item.category_name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="margin-top-30 height-80 line-40 text-26 text-4d text-cut-two">
|
|
|
{{item.content}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 操作按钮 -->
|
|
|
<view class="flex align-center justify-between padding-lr-30 height-100">
|
|
|
<view class="text-24 text-b3">
|
|
|
{{item.show_create_time}}
|
|
|
</view>
|
|
|
<view class="flex align-center justify-end">
|
|
|
<view class="line-btn" @click="del(index)">
|
|
|
删除记录
|
|
|
</view>
|
|
|
<view class="full-btn" @click="go('/pages/feedback/detail?id=' + item.id)">
|
|
|
查看详情
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</ty-list-list>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 页面浮层 -->
|
|
|
<view class="page-layer">
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import feedback from "./api/feedback.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// 顶部图片
|
|
|
topImg: "",
|
|
|
// 分类列表
|
|
|
categoryList: [],
|
|
|
// 分类选中INDEX
|
|
|
categoryIndex: -1,
|
|
|
// tab标签选中INDEX
|
|
|
tabsIndex: 0,
|
|
|
// 显示key
|
|
|
listKey: '',
|
|
|
// tab标签
|
|
|
tabsList: ['意见反馈', '反馈记录'],
|
|
|
// 图片数量
|
|
|
imageCount: 9,
|
|
|
// 视频数量，为0，没有视频
|
|
|
videoCount: 0,
|
|
|
// 上传的图片
|
|
|
imagePath: [],
|
|
|
// 意见反馈内容
|
|
|
content: '',
|
|
|
// 联系人
|
|
|
linkman: '',
|
|
|
// 联系电话
|
|
|
mobilePhone: '',
|
|
|
// 列表状态
|
|
|
load_status: '',
|
|
|
// 列表
|
|
|
list: []
|
|
|
}
|
|
|
},
|
|
|
|
|
|
|
|
|
onReady() {
|
|
|
// 获取配置
|
|
|
this.getConfig()
|
|
|
|
|
|
// 获取分类列表
|
|
|
this.listCategory()
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
/**
|
|
|
* 获取配置
|
|
|
* @date 2022-10-20
|
|
|
*/
|
|
|
getConfig() {
|
|
|
feedback.getFeedbackConfig().then(res => {
|
|
|
if (res.code == 0) {
|
|
|
// 顶部图片
|
|
|
this.topImg = res.data.top_img
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 获取分类列表
|
|
|
* @date 2022-10-20
|
|
|
*/
|
|
|
listCategory() {
|
|
|
feedback.listCategory().then(res => {
|
|
|
if (res.code == 0) {
|
|
|
// 分类列表
|
|
|
this.categoryList = res.data.category_list
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 切换标签
|
|
|
* @date 2022-10-20
|
|
|
*/
|
|
|
changeTabs(e) {
|
|
|
if (e.index == 1) {
|
|
|
this.loadList(1)
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 切换分类
|
|
|
* @date 2022-10-20
|
|
|
*/
|
|
|
categoryClick(index) {
|
|
|
this.categoryIndex = index
|
|
|
},
|
|
|
|
|
|
|
|
|
/**
|
|
|
* 上传图片
|
|
|
* @date 2022-12-20
|
|
|
*/
|
|
|
imageChange(e) {
|
|
|
this.imagePath = e.image_list
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 提交反馈
|
|
|
* @date 2022-12-20
|
|
|
*/
|
|
|
submit() {
|
|
|
|
|
|
if (this.categoryIndex == -1) {
|
|
|
this.cn.toast('请选择类别')
|
|
|
return false
|
|
|
}
|
|
|
if (!this.mobilePhone) {
|
|
|
this.cn.toast('请填写手机号码')
|
|
|
return false
|
|
|
}
|
|
|
if (!this.content) {
|
|
|
this.cn.toast('请填写反馈内容')
|
|
|
return false
|
|
|
}
|
|
|
|
|
|
feedback.insertFeedback(this.categoryList[this.categoryIndex].id, this.content, this.imagePath, this
|
|
|
.mobilePhone, this.linkman).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.cn.alert(res.msg).then(res => {
|
|
|
this.linkman = ''
|
|
|
this.mobilePhone = ''
|
|
|
this.content = ''
|
|
|
this.imagePath = []
|
|
|
this.categoryIndex = -1
|
|
|
this.tabsIndex = 1
|
|
|
|
|
|
this.loadList(1)
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 删除意见反馈
|
|
|
* @param {int} index 第INDEX条数据
|
|
|
* @date 2022-12-22
|
|
|
*/
|
|
|
del(index) {
|
|
|
let feedbackId = this.list[index].id
|
|
|
this.cn.confirm('确认要删除吗?').then(res => {
|
|
|
if (res.confirm) {
|
|
|
feedback.deleteFeedback(feedbackId).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
this.loadList(1)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 加载列表
|
|
|
* @param {int} isFirstPage 是否第一页 0--不是 1--是
|
|
|
* @date 2022-12-22
|
|
|
*/
|
|
|
loadList(isFirstPage) {
|
|
|
feedback.listFeedback(this, isFirstPage)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
/* 内容区域 */
|
|
|
.content-block {
|
|
|
margin-top: calc(240rpx + 88rpx + 15rpx);
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx + 40rpx);
|
|
|
}
|
|
|
|
|
|
/* 分类 */
|
|
|
.category-item {
|
|
|
margin-right: 15rpx;
|
|
|
padding: 0 30rpx;
|
|
|
height: 60rpx;
|
|
|
line-height: 60rpx;
|
|
|
border-radius: 30rpx;
|
|
|
background: #F5F5F5;
|
|
|
text-align: center;
|
|
|
font-size: 26rpx;
|
|
|
color: #4D4D4D;
|
|
|
}
|
|
|
|
|
|
.category-item.active {
|
|
|
background: #2F97FF;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
/* 意见反馈内容 */
|
|
|
.feedback-content {
|
|
|
width: 100%;
|
|
|
height: 160rpx;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
|
|
|
/* 提交按钮 */
|
|
|
.btn {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
}
|
|
|
</style>
|
