wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

投诉模块页面页面优化

Browse Source
version/0412
mujinxia 1 year ago
parent 7aba6f7a9e
commit 0a9e89da83
2 changed files with 430 additions and 404 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 830
      pages/news1/feedback.vue
  2. 4
      pages/news1/setting.vue

830
pages/news1/feedback.vue
Unescape View File

@ -1,61 +1,59 @@
<template>
<view>
<view class="order-tab">
<view :class="OrderType==0?'tab action':'tab'" @click="onOrderTab(0)">
<view :class="OrderType == 0 ? 'tab action' : 'tab'" @click="onOrderTab(0)">
<text>我要反馈</text>
<text class="line"></text>
</view>
<view :class="OrderType==1?'tab action':'tab'" @click="onOrderTab(1)">
<view :class="OrderType == 1 ? 'tab action' : 'tab'" @click="onOrderTab(1)">
<text>反馈公示</text>
<text class="line"></text>
</view>
<view :class="OrderType==2?'tab action':'tab'" @click="onOrderTab(2)">
<view :class="OrderType == 2 ? 'tab action' : 'tab'" @click="onOrderTab(2)">
<text>我的反馈</text>
<text class="line"></text>
</view>
</view>
<view class="section1" v-if="OrderType==0">
<view class="section1" v-if="OrderType == 0">
<u-form :model="form" ref="uForm">
<view class="section1Item">
<u-form-item label="反馈类型" label-width="150">
<u-form-item label="反馈类型" label-width="170">
<u-radio-group v-model="form.type">
<u-radio active-color="#FF4434" v-for="(item, index) in checkboxList1" :key="index"
:name="item.name">
{{item.name}}
{{ item.name }}
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="反馈类型" label-width="150">
<u-form-item label="反馈类型" label-width="170">
<u-radio-group v-model="form.shop">
<u-radio active-color="#FF4434" v-for="(item, index) in checkboxList2" :key="index"
:name="item.name">
{{item.name}}
{{ item.name }}
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="门店" label-width="150" @click="typeShow = true">
<u-form-item label="反馈类型" label-width="170" @click="typeShow = true">
<u-input v-model="form.shopText" placeholder="请选择门店" type="select" @click="typeShow = true" />
<u-action-sheet :list="shopList" :cancel-btn="false" v-model="typeShow"
@click="actionSheetCallback"></u-action-sheet>
</u-form-item>
<u-form-item label="投诉内容" label-width="150" label-position="top">
<u-form-item label="投诉内容" required label-width="150" label-position="top">
<u-input v-model="form.comment" class="textarea" placeholder="请填写投诉内容" type="textarea" />
</u-form-item>
<u-upload :fileList="finishImageList" :previewFullImage="true" @afterRead="afterRead" :maxCount="8"
width="180" height="180" upload-text="上传照片" @delete="deletePic" name="1" multiple></u-upload>
</view>
<view class="section1Item" style="margin-top:20rpx;">
<u-form-item label="您的称呼" label-width="150">
<u-input placeholder="请填写" v-model="form.name" />
<u-form-item label="您的称呼" label-width="170">
<u-input placeholder="请输入您的称呼" v-model="form.name" />
</u-form-item>
<u-form-item label="手机号码" label-width="150">
<u-input placeholder="请填写" v-model="form.phone" />
<u-form-item label="手机号码" label-width="170">
<u-input placeholder="请输入手机号" v-model="form.phone" />
</u-form-item>
</view>
</u-form>
@ -68,71 +66,88 @@
提交
</view>
</view>
<view class="section2" v-if="OrderType==1">
<view class="feedShow" v-for="(item,index) in feedBackList" :key="index">
<view class="section2" v-if="OrderType == 1">
<view class="feedShow" v-for="(item, index) in feedBackList" :key="index">
<view class="feedbackItem">
<view class="statusfb">
<text v-if="item.status==0">待处理</text>
<text v-if="item.status==1">已完成</text>
</view>
<view class="feedbackContent">
<view class="fbTitle">
<view class="fbFlag">
<text v-if="item.type==1">投诉</text>
<text v-if="item.type==2">建议</text>
<text v-if="item.type==3">表扬</text>
<text v-if="item.type == 1">投诉</text>
<text v-if="item.type == 2">建议</text>
<text v-if="item.type == 3">表扬</text>
</view>
<view class="fbTitleText">
{{item.store_name}}
{{ item.shop_name }}
</view>
<view class="statusfb">
<text v-if="item.status == 0">待处理</text>
<text v-if="item.status == 1">已完成</text>
</view>
</view>
<u-read-more show-height="150" color="#9E9E9E" :toggle="true" close-text="展开">
<rich-text :nodes="item.content"></rich-text>
<u-read-more showHeight="160" textIndent="0" fontSize="26rpx" color="#9E9E9E" :toggle="true"
close-text="展开">
<rich-text v-if="index != 0" :nodes="item.content"></rich-text>
<rich-text v-else
nodes="投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容投诉内容"></rich-text>
</u-read-more>
<view class="timefb">
{{item.created_at}}
{{ item.created_at }}
</view>
</view>
<view class="feedbackResult">
<u-collapse>
<u-collapse-item title="处理结果">
<u-form :model="item" ref="item">
<u-form-item label="处理时间" label-width="150" prop="time">
{{item.replay_at}}
<u-collapse-item :open="true" title="处理结果">
<u-form :model="item" ref="item" class="selfForm">
<u-form-item label="处理时间:" label-width="150" prop="time">
{{ item.replay_at }}
</u-form-item>
<u-form-item label="反馈内容" label-width="150" prop="feedback">
{{item.content}}
<u-form-item label="反馈内容:" label-width="150" prop="feedback">
{{ item.content }}
</u-form-item>
</u-form>
</u-collapse-item>
</u-collapse>
</view>
</view>
</view>
</view>
<view class="section2" v-if="OrderType==2">
<view class="feedShow" v-for="(item,index) in feedBackList" :key="index">
<view class="feedbackItem">
<view class="section2" v-if="OrderType == 2">
<view class="feedShow" style="padding: 0;" v-for="(item, index) in feedBackList" :key="index">
<view class="feedbackResult">
<u-collapse>
<u-collapse-item :open="true" title="处理结果">
<u-form :model="item" ref="item" class="selfForm">
<u-form-item label="处理时间:" label-width="150" prop="time">
{{ item.replay_at }}
</u-form-item>
<u-form-item label="反馈内容:" label-width="150" prop="feedback">
{{ item.content }}
</u-form-item>
</u-form>
</u-collapse-item>
</u-collapse>
</view>
<!-- <view class="feedbackItem">
<view class="feedbackResult">
<u-collapse>
<u-collapse-item :open="true" title="处理结果">
<u-collapse-item :open="false" title="处理结果">
<u-form :model="item" ref="item">
<u-form-item label="处理时间" label-width="150" prop="time">
{{item.replay_at}}
{{ item.replay_at }}
</u-form-item>
<u-form-item label="反馈内容" label-width="150" prop="feedback">
{{item.content}}
{{ item.content }}
</u-form-item>
</u-form>
</u-collapse-item>
</u-collapse>
</view>
</view>
</view> -->
<!-- </view> -->
</view>
<!-- <view class="empty">
@ -146,426 +161,437 @@
</template>
<script>
import * as feedback from '@/api/feedback'
export default {
data() {
return {
OrderType: 0,
shop_id: '',
form: {
type: '',
shop: '',
shopText: '',
comment: '',
name: '',
phone: ''
},
feedBackList: [],
page: 1,
checkboxList1: [{
name: '投诉',
val: 1
},
{
name: '建议',
val: 2
},
{
name: '表扬',
val: 3
}
],
checkboxList2: [{
name: '门店'
},
{
name: '其他'
},
],
typeShow: false,
shopList: [],
//照片
finishImageList: [],
result: {}
};
},
onShow() {
this.getShopList()
},
onLoad(params) {
import * as feedback from '@/api/feedback'
export default {
data() {
return {
OrderType: 0,
shop_id: '',
form: {
type: '',
shop: '',
shopText: '',
comment: '',
name: '',
phone: ''
},
methods: {
getShopList() {
const that = this
that.shopList = []
return new Promise((resolve, reject) => {
feedback.shopList()
.then(res => {
if (res.data.length > 0) {
for (var i = 0; i < res.data.length; i++) {
let obj = {
text: res.data[i].shop_name,
id: res.data[i].shop_id
}
that.shopList.push(obj)
}
}
})
.catch(reject)
})
},
submit() {
const that = this
let params = {
shop_id: that.shop_id,
type: that.form.type,
object_type: that.form.shop,
content: that.form.comment
}
return new Promise((resolve, reject) => {
feedback.add(params)
.then(res => {
that.$toast(res.message)
})
.catch(reject)
})
feedBackList: [],
page: 1,
checkboxList1: [{
name: '投诉',
val: 1
},
/**
* 订单tab点击
*/
onOrderTab(type) {
this.OrderType = type;
if (type != 0) {
this.getFeedBack(type)
}
{
name: '建议',
val: 2
},
getFeedBack(type) {
// 获取我的反馈信息
const that = this
let params = {
is_my: '',
page: that.page
}
params.is_my = type == 1 ? 0 : 1
return new Promise((resolve, reject) => {
feedback.list(params)
.then(res => {
if (res.status == 200) {
that.feedBackList = res.data.list.data
}
})
.catch(reject)
})
{
name: '表扬',
val: 3
}
],
checkboxList2: [{
name: '门店'
},
actionSheetCallback(index) {
console.log(index,this.shopList)
this.form.shopText = this.shopList[index].text;
this.shop_id = this.shopList[index].id
{
name: '其他'
},
// 新增图片
async afterRead(event) {
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
],
typeShow: false,
shopList: [],
//照片
finishImageList: [],
result: {}
};
},
onShow() {
this.getShopList()
},
onLoad(params) {
},
methods: {
getShopList() {
const that = this
that.shopList = []
return new Promise((resolve, reject) => {
feedback.shopList()
.then(res => {
if (res.data.length > 0) {
for (var i = 0; i < res.data.length; i++) {
let obj = {
text: res.data[i].shop_name,
id: res.data[i].shop_id
}
that.shopList.push(obj)
}
}
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
if (JSON.parse(result).code == 1) {
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
} else {
this[`fileList${event.name}`].splice(fileListLen, 1)
}
.catch(reject)
})
},
submit() {
const that = this
let params = {
shop_id: that.shop_id,
type: that.form.type,
object_type: that.form.shop,
content: that.form.comment
}
return new Promise((resolve, reject) => {
feedback.add(params)
.then(res => {
that.$toast(res.message)
})
.catch(reject)
})
},
/**
* 订单tab点击
*/
onOrderTab(type) {
this.OrderType = type;
if (type != 0) {
this.getFeedBack(type)
}
},
getFeedBack(type) {
// 获取我的反馈信息
const that = this
let params = {
is_my: 0,
page: that.page
}
// params.is_my = type == 1 ? 0 : 1
return new Promise((resolve, reject) => {
feedback.list(params)
.then(res => {
if (res.status == 200) {
that.feedBackList = res.data.list.data
}
})
.catch(reject)
})
},
actionSheetCallback(index) {
console.log(index, this.shopList)
this.form.shopText = this.shopList[index].text;
this.shop_id = this.shopList[index].id
},
// 新增图片
async afterRead(event) {
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
if (JSON.parse(result).code == 1) {
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
} else {
this[`fileList${event.name}`].splice(fileListLen, 1)
}
},
//上传照片
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test',
token:getToken()
},
success: (res) => {
if(JSON.parse(res.data).code==1){
setTimeout(() => {
this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
resolve(res.data)
}, 1000)
}else{
uni.$u.toast(JSON.parse(res.data).msg)
}
},
//上传照片
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: this.baseUrl + '/api/common/upload', // 仅为示例，非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test',
token: getToken()
},
success: (res) => {
if (JSON.parse(res.data).code == 1) {
setTimeout(() => {
this.finishImageList.push({ url: JSON.parse(res.data).data.fullurl, path: JSON.parse(res.data).data.url })
resolve(res.data)
}
},
fail: (res) => {
console.log(res,"rrr")
}, 1000)
} else {
uni.$u.toast(JSON.parse(res.data).msg)
resolve(res.data)
}
});
})
},
//删除图片
deletePic(event) {
},
fail: (res) => {
console.log(res, "rrr")
}
});
})
},
//删除图片
deletePic(event) {
this.finishImageList.splice(event.index, 1)
},
}
this.finishImageList.splice(event.index, 1)
},
}
}
</script>
<style scoped lang="scss">
page {
min-height: 100%;
width: 100%;
background-color: #F7F8FA;
}
/* 订单tab */
.order-tab {
position: fixed;
left: 0;
top: 0;
z-index: 10;
page {
min-height: 100%;
width: 100%;
background-color: #F7F8FA;
}
/* 订单tab */
.order-tab {
position: fixed;
left: 0;
top: 0;
z-index: 10;
display: flex;
align-items: center;
width: 100%;
height: 100rpx;
background-color: #FFFFFF;
.tab {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100rpx;
background-color: #FFFFFF;
.tab {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: 80%;
text {
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
}
justify-content: center;
flex: 1;
height: 80%;
text {
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
}
}
.action {
text {
color: #FF4D4D;
line-height: 19px;
.action {
text {
color: #FF4D4D;
line-height: 19px;
}
}
.line {
position: absolute;
left: 50%;
bottom: 0;
width: 32rpx;
height: 6rpx;
background: #FF4D4D;
transform: translate(-50%, 0);
border-radius: 32px 32px 32px 32px;
.line {
position: absolute;
left: 50%;
bottom: 0;
width: 32rpx;
height: 6rpx;
background: #FF4D4D;
transform: translate(-50%, 0);
border-radius: 32px 32px 32px 32px;
}
}
}
}
.section1 {
border: 1px solid transparent;
.selfForm {
::v-deep .u-form-item {
padding: 0;
}
}
.section1Item {
background-color: #fff;
border-radius: 4px 4px 4px 4px;
margin: 120rpx 30rpx 30rpx 30rpx;
padding: 10rpx 40rpx;
}
.section1 {
border: 1px solid transparent;
::v-deep .u-form-item--left__content__label {
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
color: #373737;
}
.section1Item {
background-color: #fff;
border-radius: 4px 4px 4px 4px;
margin: 120rpx 30rpx 30rpx 30rpx;
padding: 20rpx 46rpx;
}
::v-deep .u-border-bottom:after {
border: none;
}
::v-deep .u-form-item--left__content__label {
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
color: #373737;
}
.textarea {
height: 250rpx;
background: #F7F8FA;
border-radius: 3px 3px 3px 3px;
opacity: 1;
::v-deep .u-border-bottom:after {
border: none;
}
}
// .textarea {
// height: 258rpx;
// border-radius: 3px;
// border: solid 1upx #F7F8FA;
::v-deep .u-input__textarea {
padding: 26rpx;
}
// }
.introContent {
margin-top: 16rpx;
margin: 16rpx 30rpx 30rpx 30rpx;
::v-deep .u-input__textarea {
padding: 26rpx;
}
.introText {
font-size: 24rpx;
color: #C5C6C8;
margin-top: 16rpx;
line-height: 40rpx;
}
.introContent {
margin-top: 16rpx;
margin: 16rpx 30rpx 30rpx 30rpx;
.introText {
font-size: 26rpx;
color: #C5C6C8;
margin-top: 16rpx;
line-height: 40rpx;
}
.submitBtn {
height: 100rpx;
background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
border-radius: 52px 52px 52px 52px;
opacity: 1;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin: 32rpx 30rpx 30rpx 30rpx;
text-align: center;
line-height: 100rpx;
}
}
.section2 {
min-height: 100%;
padding: 120rpx 30rpx 30rpx 30rpx;
.submitBtn {
height: 100rpx;
background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
border-radius: 52px 52px 52px 52px;
opacity: 1;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin: 32rpx 30rpx 30rpx 30rpx;
text-align: center;
line-height: 100rpx;
}
}
.feedShow {
padding: 30rpx;
border-radius: 4px 4px 4px 4px;
background-color: #fff;
margin-bottom: 16rpx;
}
.section2 {
min-height: 100%;
padding: 120rpx 30rpx 30rpx 30rpx;
.feedbackItem {
position: relative;
margin-bottom: 30rpx;
// border:1px solid yellow;
.statusfb {
position: absolute;
right: 0;
width: 92rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
background-color: #EEFAF6;
font-size: 26rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #2DC37F;
top: 40rpx;
}
.feedbackContent {
padding-bottom: 30rpx;
border-bottom: 1px solid #A0A0A0;
.fbTitle {
display: flex;
align-items: center;
width: calc(100% - 100rpx);
.fbFlag {
// width: 54rpx;
// height: 44rpx;
// line-height: 44rpx;
background: #FFFFFF;
border-radius: 3px;
opacity: 1;
padding: 5rpx;
border: 1px solid #FF4D4D;
font-size: 26rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF4D4D;
flex-shrink: 1;
}
.feedShow {
padding: 30rpx 0;
border-radius: 4px;
background-color: #fff;
margin-bottom: 16rpx;
}
.fbTitleText {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #000;
font-size: 500;
margin-left: 20rpx;
}
.feedbackItem {
position: relative;
margin-bottom: 30rpx;
.statusfb {
position: absolute;
top: 4rpx;
right: -30rpx;
width: 100rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
border-radius: 22rpx 0 0 22rpx;
background-color: #EEFAF6;
font-size: 26rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
color: #2DC37F;
}
.feedbackContent {
padding: 0 30rpx 30rpx;
border-bottom: 1px solid #A0A0A0;
.fbTitle {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
// width: calc(100% - 100rpx);
.fbFlag {
background: #FFFFFF;
border-radius: 3px;
opacity: 1;
padding: 5rpx;
border: 1px solid #FF4D4D;
font-size: 26rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF4D4D;
flex-shrink: 1;
}
.timefb {
color: #A0A0A0;
.fbTitleText {
flex: 1;
font-size: 28rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #000;
font-weight: bold;
margin-left: 20rpx;
}
}
.feedbackResult {
::v-deep .u-form-item--left__content__label {
color: #A6A6A6;
}
.timefb {
margin-top: 20rpx;
font-size: 24rpx;
color: #A0A0A0;
}
}
::v-deep .u-border-bottom:after {
border: none;
}
::v-deep .u-form-item__body {
align-items: baseline;
}
::v-deep .u-form-item--right__content__slot {
line-height: 36rpx;
}
}
}
.feedbackResult {
padding: 0 30rpx;
::v-deep .u-form-item--left__content__label {
color: #A6A6A6;
}
.empty {
text-align: center;
position: relative;
top: 150rpx;
::v-deep .u-border-bottom:after {
border: none;
}
image {
width: 210rpx;
height: auto;
}
::v-deep .u-form-item__body {
align-items: baseline;
}
.emptytext {
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #717171;
::v-deep .u-form-item--right__content__slot {
line-height: 36rpx;
}
}
}
.empty {
text-align: center;
position: relative;
top: 150rpx;
image {
width: 210rpx;
height: auto;
}
.emptytext {
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #717171;
}
}
}
</style>

4
pages/news1/setting.vue
Unescape View File

@ -172,8 +172,8 @@ export default {
},
onOut() {
uni.showModal({
title: '友情提示',
content: '确认要注销吗？',
title: '您是否要注销账号？',
content: '',
success(o) {
if (o.confirm) {
uni.removeStorage('token');

Write Preview
Loading…
Cancel
Save