1208 lines
40 KiB
Vue
1208 lines
40 KiB
Vue
<template>
|
||
<view class="feedback-page">
|
||
<!-- 因为说扫码进入不要微信小程序自带的 返回首页按钮 那就只能 去掉自带的标题内容 自己搞了 -->
|
||
<div class="mainTop" :style="{ height: menu.bottom + 6 + 'px', paddingTop: menu.top + 'px' }">
|
||
<div class="pageTitle" :style="{ height: menu.height + 'px' }">优质文明服务监督</div>
|
||
</div>
|
||
<!-- 头部区域 -->
|
||
<view class="header-section" :style="{ marginTop: menu.bottom + 6 + 'px' }">
|
||
<view class="header-bg">
|
||
<view class="header-overlay"></view>
|
||
<view class="header-pattern"></view>
|
||
</view>
|
||
<view class="header-content">
|
||
<view class="service-badge">
|
||
<text class="badge-icon">🛡️</text>
|
||
<text class="badge-text">服务监督</text>
|
||
</view>
|
||
<view style="text-align: center;">
|
||
<view class="header-subtitle">高速公路服务区</view>
|
||
<view class="header-main-title">优质文明服务监督</view>
|
||
</view>
|
||
<view class="header-notice">
|
||
<text class="notice-text">此为高速公路服务区优质文明服务监督渠道，非微信官方投诉渠道</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主要内容区域 -->
|
||
<view class="main-content">
|
||
<!-- 基本信息卡片 -->
|
||
<view class="form-card">
|
||
<view class="card-header">
|
||
<view class="card-title">基本信息</view>
|
||
<view class="card-icon">📝</view>
|
||
</view>
|
||
|
||
<view @click="handleGoMap">
|
||
<!-- <picker @change="bindServerPickerChange" :value="serverIndex" :range="serverRange" range-key="showName"> -->
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">📍</text>
|
||
<text class="label-text">服务区</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<text class="form-value">{{ currentService.SERVERPART_NAME || '请选择服务区' }}</text>
|
||
<text class="arrow-icon">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- </picker> -->
|
||
|
||
<view v-if="detailSuggestion.SUGGESTION_ID">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">🏷️</text>
|
||
<text class="label-text">类型</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<text class="form-value">{{ pageMsg.typeName }}</text>
|
||
<text class="arrow-icon">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<picker v-else @change="bindTypePickerChange" :value="typeIndex" :range="typeRange" range-key="name">
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">🏷️</text>
|
||
<text class="label-text">类型</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<text class="form-value">{{ pageMsg.typeName }}</text>
|
||
<text class="arrow-icon">›</text>
|
||
</view>
|
||
</view>
|
||
</picker>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">👤</text>
|
||
<text class="label-text">您的姓名</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<input type="text" class="form-input" maxlength="20" placeholder="请输入您的姓名" @input="bindKeyInput"
|
||
data-field="SuggestionName" :value="saveMsg.SuggestionName"
|
||
:disabled="detailSuggestion.SUGGESTION_ID" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item">
|
||
<view class="form-label">
|
||
<text class="label-icon">📱</text>
|
||
<text class="label-text">联系方式</text>
|
||
</view>
|
||
<view class="form-input-wrapper">
|
||
<input type="number" class="form-input" maxlength="11" placeholder="请输入您的手机号"
|
||
@input="bindKeyInput" data-field="PhoneNumber" :value="saveMsg.PhoneNumber"
|
||
:disabled="detailSuggestion.SUGGESTION_ID" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 快速标签卡片 -->
|
||
<view class="form-card" v-if="tagList.length > 0">
|
||
<view class="card-header" style="margin-bottom: 24rpx;">
|
||
<view class="card-title">{{ typeIndex === '1' ? '表扬类型' : typeIndex === '2' ? '咨询建议' : '投诉类型' }}
|
||
</view>
|
||
<view class="card-icon">🏷️</view>
|
||
</view>
|
||
|
||
<view class="tag-section" v-for="(tags, i) in tagList" :key="i">
|
||
<view class="tag-category">{{ tags.FIELDENUM_NAME }}</view>
|
||
<view class="tag-list">
|
||
<view class="tag-item" v-for="(tag, s) in tags.fieldenumList" :key="s" @tap="selectTag(tag)"
|
||
:class="{ 'tag-active': tag.ischecked }">
|
||
{{ tag.FIELDENUM_NAME }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 详细描述卡片 -->
|
||
<view class="form-card">
|
||
<view class="card-header">
|
||
<view class="card-title">详细描述</view>
|
||
<view class="card-icon">✍️</view>
|
||
</view>
|
||
|
||
<view class="textarea-wrapper">
|
||
<textarea class="form-textarea" cols="30" rows="6" cursor-spacing="200" maxlength="200"
|
||
placeholder="请详细描述您的问题，我们将及时跟进解决（添加图片将有助于我们解决您的问题）" v-model="saveMsg.Info"
|
||
:class="{ 'textarea-filled': saveMsg.Info }" :disabled="detailSuggestion.SUGGESTION_ID"
|
||
@input="updateTextCount">
|
||
</textarea>
|
||
<view class="text-count">
|
||
<text class="count-text"
|
||
:class="{ 'count-warning': textCount > 180, 'count-error': textCount >= 200 }">
|
||
{{ textCount }}/200
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 图片上传区域 -->
|
||
<!-- ，视频：{{ videoList.length }}/3 -->
|
||
<view class="upload-section">
|
||
<view class="upload-title">上传材料 (图片：{{ imgsList.length }}/9)
|
||
<!-- <view class="upload-notice">*仅支持30s以内的视频文件</view> -->
|
||
</view>
|
||
|
||
<view class="upload-grid">
|
||
<view class="uploaded-image" v-for="(item, i) in imgsList" :key="i">
|
||
<image mode="aspectFill" :src='item' @click="seePhoto(item)"></image>
|
||
<view class="delete-btn" v-if="!detailSuggestion.SUGGESTION_ID" @click="deleteImg(i)">
|
||
<text class="delete-icon">×</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="uploaded-image" v-for="(item, i) in videoList" :key="i">
|
||
<image mode="aspectFill" :src='item.thumbTempFilePath' @click="seePhoto(item)"></image>
|
||
<view class="delete-btn" v-if="!detailSuggestion.SUGGESTION_ID" @click="deleteImg(i)">
|
||
<text class="delete-icon">×</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- || videoList.length < 3 -->
|
||
<view class="upload-btn" @click="choeseImg"
|
||
v-if="(imgsList.length < 9) && !detailSuggestion.SUGGESTION_ID">
|
||
<view class="upload-icon">📷</view>
|
||
<text class="upload-text">添加图片</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-section" v-if="!detailSuggestion.SUGGESTION_ID">
|
||
<view class="submit-btn" :class="{ 'submit-active': noPost }" @click="checkFn">
|
||
<text class="submit-text">提交反馈</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { mapGetters } from 'vuex'
|
||
export default {
|
||
data() {
|
||
return {
|
||
noPost: true,
|
||
textCount: 0,
|
||
saveMsg: {
|
||
action_type: 'Complaints',
|
||
ProvinceCode: '',
|
||
ServerPartID: '',
|
||
Type: 2000,
|
||
SuggestionName: '',
|
||
Title: '',
|
||
Info: '',
|
||
PhoneNumber: '',
|
||
WechatOpenId: '',
|
||
// videoList: [],
|
||
imageArr: []
|
||
},
|
||
imgsList: [],
|
||
// videoList: [],
|
||
pageMsg: {
|
||
serverPartName: '',
|
||
typeName: '投诉'
|
||
},
|
||
// msgType: [{ type: 2000, name: '投诉' }, { type: 4000, name: '咨询' }, { type: 1000, name: '建议' }],
|
||
msgType: [{ type: 1000, name: '投诉' }, { type: 1050, name: '表扬' }, { type: 4000, name: "咨询/建议" }],
|
||
msgTypeObj: {
|
||
2000: "投诉",
|
||
1050: "表扬",
|
||
4000: "咨询/建议",
|
||
},
|
||
typeIndex: 0,
|
||
serverIndex: 0,
|
||
tagList: [], // 可选择的建议标签
|
||
selectTags: [], // 已选中的建议标签
|
||
currentService: {}, // 当前服务区信息
|
||
detailSuggestion: {}, // 当前投诉建议的详情内容
|
||
menu: {}, // 手机的配置信息
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters({ 'serverList': 'severList', 'user': 'user', 'serverPart': 'serverPart' }),
|
||
typeRange() {
|
||
return this.msgType
|
||
},
|
||
serverRange() {
|
||
return this.serverList
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
if ((this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID))) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
} else if (res.cancel) {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
console.log('menumenumenumenumenumenu', this.menu);
|
||
|
||
|
||
|
||
console.log('optionoptionoption', option);
|
||
if (option.SUGGESTIONID) {
|
||
this.detailSuggestion.SUGGESTION_ID = option.SUGGESTIONID
|
||
}
|
||
console.log('this.serverList', this.serverList)
|
||
this.loadIndustry()
|
||
this.getTag()
|
||
|
||
},
|
||
onShow() {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
this.currentService = currentService
|
||
this.saveMsg.ServerPartID = currentService.SERVERPART_ID
|
||
|
||
this.pageMsg.serverPartName = currentService.SERVERPART_NAME
|
||
this.saveMsg.ProvinceCode = this.user.PROVINCE_CODE
|
||
|
||
console.log('this.currentServicethis.currentServicethis.currentService', this.currentService);
|
||
|
||
// 设置默认的服务区索引
|
||
const serverIndex = this.serverList.findIndex(item => item.ServerPart_Id === this.serverPart.ServerPart_Id)
|
||
if (serverIndex !== -1) {
|
||
this.serverIndex = serverIndex
|
||
}
|
||
|
||
// if (!(this.tagList && this.tagList.length > 0)) {
|
||
// this.getTag()
|
||
// }
|
||
this.saveMsg.PhoneNumber = this.user.MEMBERSHIP_MOBILEPHONE
|
||
|
||
// 初始化字数统计
|
||
this.textCount = this.saveMsg.Info ? this.saveMsg.Info.length : 0
|
||
|
||
},
|
||
onUnload() {
|
||
this.saveMsg = {
|
||
action_type: 'Complaints',
|
||
ProvinceCode: '',
|
||
ServerPartID: '',
|
||
Type: 2000,
|
||
SuggestionName: '',
|
||
Title: '',
|
||
Info: '',
|
||
PhoneNumber: '',
|
||
WechatOpenId: '',
|
||
|
||
imageArr: []
|
||
}
|
||
this.noPost = true
|
||
this.imgsList = []
|
||
this.textCount = 0
|
||
},
|
||
methods: {
|
||
// 拿到投诉建议的详情
|
||
async handleGetComplaintsDetail() {
|
||
const req = {
|
||
action_type: 'GetSuggestionDetail',
|
||
PROVINCECODE: this.user.PROVINCE_CODE,
|
||
SUGGESTIONID: this.detailSuggestion.SUGGESTION_ID,
|
||
}
|
||
const data = await this.$api.getCoop(req)
|
||
this.detailSuggestion = data.Data
|
||
console.log('this.detailSuggestionthis.detailSuggestion', this.detailSuggestion);
|
||
console.log('this.tagListthis.tagListthis.tagList', this.tagList);
|
||
this.saveMsg = {
|
||
...this.saveMsg,
|
||
Type: this.detailSuggestion.SUGGESTION_TYPE,
|
||
SuggestionName: this.detailSuggestion.SUGGESTION_NAME,
|
||
Info: this.detailSuggestion.SUGGESTION_REASON,
|
||
PhoneNumber: this.detailSuggestion.PHONE_NUMBER,
|
||
}
|
||
this.textCount = this.detailSuggestion.SUGGESTION_REASON ? this.detailSuggestion.SUGGESTION_REASON.length : 0
|
||
this.currentService = {
|
||
SERVERPART_ID: this.detailSuggestion.SERVERPART_ID,
|
||
SERVERPART_NAME: this.detailSuggestion.SERVERPART_NAME,
|
||
}
|
||
this.imgsList = this.detailSuggestion.IMAGE_URL ? this.detailSuggestion.IMAGE_URL.split(',') : []
|
||
|
||
let labelList = this.detailSuggestion.ENUM_LABEL ? this.detailSuggestion.ENUM_LABEL.split(',') : []
|
||
|
||
this.pageMsg.typeName = this.detailSuggestion.SUGGESTION_TYPE ? this.msgTypeObj[this.detailSuggestion.SUGGESTION_TYPE] : ""
|
||
this.typeIndex = this.detailSuggestion.SUGGESTION_TYPE === 2000 ? '0' : this.detailSuggestion.SUGGESTION_TYPE === 1050 ? '1' : this.detailSuggestion.SUGGESTION_TYPE === 4000 ? '2' : '0'
|
||
console.log('labelListlabelListlabelList', labelList);
|
||
let list = JSON.parse(JSON.stringify(this.tagList))
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.fieldenumList && item.fieldenumList.length > 0) {
|
||
item.fieldenumList.forEach((subItem) => {
|
||
if (labelList.indexOf(subItem.FIELDENUM_VALUE) !== -1) {
|
||
subItem.ischecked = true
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
this.tagList = list
|
||
},
|
||
// 跳转去服务区列表 选择服务区
|
||
handleGoMap() {
|
||
if (this.detailSuggestion.SUGGESTION_ID) {
|
||
return
|
||
}
|
||
|
||
uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=complaints" });
|
||
},
|
||
bindServerPickerChange(event) {
|
||
let index = event.detail.value
|
||
this.serverIndex = index
|
||
this.saveMsg.ProvinceCode = this.serverList[index].ProvinceCode
|
||
this.saveMsg.ServerPartID = this.serverList[index].ServerPart_Id
|
||
this.pageMsg.serverPartName = this.serverList[index].ServerPart_Name
|
||
},
|
||
bindTypePickerChange(event) {
|
||
let index = event.detail.value
|
||
console.log('indexindex', index);
|
||
|
||
this.typeIndex = index
|
||
this.saveMsg.Type = this.msgType[index].type
|
||
this.pageMsg.typeName = this.msgType[index].name
|
||
},
|
||
choeseImg() {
|
||
// uni.chooseMedia({
|
||
// count: 1,
|
||
// mediaType: ['image', 'video'],
|
||
// sourceType: ['album', 'camera'],
|
||
// success: async (rs) => {
|
||
// console.log('rsrs', rs);
|
||
|
||
// }
|
||
// })
|
||
// return
|
||
|
||
if (this.detailSuggestion.SUGGESTION_ID) {
|
||
return
|
||
}
|
||
|
||
let _this = this
|
||
let num = 9 - _this.imgsList.length
|
||
if (num === 0) {
|
||
uni.showToast({ title: '您最多可以上传9张图', icon: 'none' })
|
||
return false
|
||
}
|
||
|
||
// uni.chooseImage({
|
||
uni.chooseMedia({
|
||
count: 9,
|
||
mediaType: ['image'], // , 'video'
|
||
sourceType: ['album', 'camera'],
|
||
maxDuration: 30,
|
||
camera: 'back',
|
||
success(rs) {
|
||
console.log('rs', rs)
|
||
_this.noPost = false
|
||
let thisCount = rs.tempFiles.length
|
||
// 因为这里即可以上传视频 也可以上传图片 所以在这里做个判断先
|
||
if (rs.type === 'video') {
|
||
if (_this.videoList.length + thisCount > 3) {
|
||
uni.showToast({
|
||
title: '视频数量已上限',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
let tempFilePath = rs.tempFiles
|
||
if (tempFilePath && tempFilePath.length > 0) {
|
||
for (let i = 0; i < tempFilePath.length; i++) {
|
||
let videoItem = tempFilePath[i].tempFilePath
|
||
uni.uploadFile({
|
||
url: 'https://eshangtech.com:18998/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=suggestion',
|
||
// filePath: res.tempFilePath,
|
||
filePath: videoItem,
|
||
name: 'data',
|
||
success(res) {
|
||
let _data = JSON.parse(res.data)
|
||
console.log('_data_data_data_data', _data);
|
||
_this.videoList.push({
|
||
tempFilePath: tempFilePath[i].tempFilePath,
|
||
thumbTempFilePath: tempFilePath[i].thumbTempFilePath
|
||
})
|
||
console.log('_this.videoList', _this.videoList);
|
||
|
||
_this.saveMsg.videoList.push(_data.Data.IMAGE_PATH)
|
||
uni.hideLoading()
|
||
_this.noPost = true
|
||
},
|
||
fail(res) {
|
||
console.log(res)
|
||
_this.noPost = true
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
} else if (rs.type === 'image') {
|
||
if (_this.imgsList.length + thisCount > 9) {
|
||
uni.showToast({
|
||
title: '图片数量已上限',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
|
||
|
||
let tempFilePath = rs.tempFiles
|
||
console.log('tempFilePathtempFilePathtempFilePath', tempFilePath);
|
||
|
||
if (tempFilePath && tempFilePath.length > 0) {
|
||
for (let i = 0; i < tempFilePath.length; i++) {
|
||
console.log('tempFilePath[i]tempFilePath[i]tempFilePath[i]', tempFilePath[i]);
|
||
|
||
uni.getImageInfo({
|
||
src: tempFilePath[i].tempFilePath,
|
||
success(imgInfo) {
|
||
console.log('imgInfoimgInfoimgInfo', imgInfo);
|
||
|
||
|
||
let quality = 100
|
||
if (imgInfo.size > 1024 * 200) {
|
||
quality = 1024 * 200 / imgInfo.size * 100
|
||
}
|
||
|
||
if (quality < 100 && tempFilePath.indexOf('.jpg') > -1) {
|
||
uni.compressImage({
|
||
// src: tempFilePath,
|
||
src: imgInfo.path,
|
||
quality: quality,
|
||
success(res) {
|
||
console.log('resresresres312312', res);
|
||
uni.showLoading({
|
||
title: '图片上传中...',
|
||
mask: true
|
||
})
|
||
uni.uploadFile({
|
||
url: 'https://eshangtech.com:18998/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=suggestion',
|
||
// filePath: res.tempFilePath,
|
||
filePath: imgInfo.path,
|
||
name: 'data',
|
||
success(res) {
|
||
let _data = JSON.parse(res.data)
|
||
_this.imgsList.push(imgInfo.path)
|
||
_this.saveMsg.imageArr.push(_data.Data.IMAGE_PATH)
|
||
uni.hideLoading()
|
||
_this.noPost = true
|
||
},
|
||
fail(res) {
|
||
console.log(res)
|
||
_this.noPost = true
|
||
}
|
||
})
|
||
},
|
||
fail(error) {
|
||
console.log(error)
|
||
_this.noPost = true
|
||
}
|
||
})
|
||
} else {
|
||
console.log('imgInfoimgInfoimgInfo312312', imgInfo);
|
||
uni.showLoading({
|
||
title: '图片上传中...',
|
||
mask: true
|
||
})
|
||
uni.uploadFile({
|
||
url: 'https://eshangtech.com:18998/Coop.Merchant/Handler/handler_ajax.ashx?action_type=UploadFile&folder=suggestion',
|
||
// filePath: tempFilePath,
|
||
filePath: imgInfo.path,
|
||
name: 'data',
|
||
success(res) {
|
||
let _data = JSON.parse(res.data)
|
||
_this.imgsList.push(imgInfo.path)
|
||
_this.saveMsg.imageArr.push(_data.Data.IMAGE_PATH)
|
||
uni.hideLoading()
|
||
_this.noPost = true
|
||
},
|
||
fail(res) {
|
||
console.log(res)
|
||
_this.noPost = true
|
||
}
|
||
})
|
||
}
|
||
},
|
||
fail(error) {
|
||
console.log('errorerrorerrorerror', error);
|
||
|
||
}
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: '暂不支持上传该类文件格式',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
seePhoto(item) {
|
||
let _this = this
|
||
uni.previewImage({
|
||
current: item,
|
||
urls: _this.imgsList
|
||
})
|
||
},
|
||
deleteImg(index) {
|
||
let _this = this
|
||
_this.saveMsg.imageArr.splice(index, 1)
|
||
_this.imgsList.splice(index, 1)
|
||
},
|
||
bindKeyInput(event) {
|
||
const field = event.target.dataset.field
|
||
this.saveMsg[field] = event.detail.value
|
||
},
|
||
checkFn() {
|
||
let _this = this
|
||
let flag = 0
|
||
|
||
for (let element in this.saveMsg) {
|
||
if (_this.saveMsg[element] === '') {
|
||
let msg = ''
|
||
switch (element) {
|
||
case 'SuggestionName':
|
||
msg = '您的姓名'
|
||
break
|
||
case 'PhoneNumber':
|
||
msg = '联系电话'
|
||
break
|
||
case 'Info':
|
||
msg = '反馈内容'
|
||
break
|
||
}
|
||
if (msg !== '') {
|
||
uni.showToast({
|
||
title: '请输入' + msg,
|
||
icon: 'none'
|
||
})
|
||
flag += 1
|
||
return false
|
||
}
|
||
}
|
||
}
|
||
if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(_this.saveMsg.PhoneNumber)) {
|
||
uni.showToast({
|
||
title: '请输入正确的手机号',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
if (!this.saveMsg.ServerPartID) {
|
||
uni.showToast({
|
||
title: '请选择服务区',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
|
||
if (!(this.selectTags && this.selectTags.length > 0)) {
|
||
uni.showToast({
|
||
title: '请选择具体类型',
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
|
||
|
||
if (flag === 0) {
|
||
this.postIt()
|
||
}
|
||
},
|
||
postIt() {
|
||
let _this = this
|
||
let data = _this.saveMsg
|
||
|
||
data.imageArr = data.imageArr.toString()
|
||
|
||
data.WechatOpenId = this.user.WECHATAPP_OPENID
|
||
data._enumLabel = this.selectTags.toString()
|
||
delete data.__newReference
|
||
uni.showLoading({
|
||
title: '正在提交...',
|
||
mask: true
|
||
})
|
||
console.log('datadatadatadata', data);
|
||
|
||
const req = {
|
||
action_type: 'Complaints',
|
||
PROVINCECODE: data.ProvinceCode || '530000',
|
||
SERVERPARTID: data.ServerPartID,
|
||
TYPE: data.Type,
|
||
SUGGESTIONNAME: data.SuggestionName,
|
||
TITLE: data.Title,
|
||
INFO: data.Info,
|
||
PHONENUMBER: data.PhoneNumber,
|
||
IMAGEARR: data.imageArr,
|
||
_enumLabel: data._enumLabel,
|
||
WECHATOPENID: this.user.WECHATAPP_OPENID,
|
||
}
|
||
|
||
console.log('reqreqreq', req);
|
||
|
||
|
||
this.$api.getCoop(req).then(function (rs) {
|
||
_this.$store.commit('refresh', true)
|
||
uni.hideLoading()
|
||
|
||
// eslint-disable-next-line eqeqeq
|
||
if (rs.ResultCode == '100') {
|
||
uni.showToast({
|
||
title: '反馈成功！'
|
||
})
|
||
const pages = getCurrentPages();
|
||
console.log(pages);
|
||
if (pages && pages.length > 1) {
|
||
setTimeout(() => {
|
||
// _this.noPost = true
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 1000)
|
||
} else {
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: '/pages/complaints/index'
|
||
});
|
||
}, 1000)
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: rs.ResultDesc,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
loadIndustry() { // 新增意见时，如果是内部会员则提供默认填写名字和电话
|
||
if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
||
// this.saveMsg.SuggestionName = this.user.MEMBERSHIP_NAME
|
||
this.saveMsg.PhoneNumber = this.user.MEMBERSHIP_MOBILEPHONE
|
||
}
|
||
},
|
||
getTag() {
|
||
let _this = this
|
||
_this.$api.getCoop({
|
||
action_type: 'GetEnumLable',
|
||
fieldexplainField: 'BUSINESS_TARGET',
|
||
fieldenumIndex: 4000
|
||
}).then(res => {
|
||
_this.tagList = res.Data.List
|
||
|
||
if (_this.detailSuggestion.SUGGESTION_ID) {
|
||
_this.handleGetComplaintsDetail()
|
||
}
|
||
})
|
||
},
|
||
updateTextCount(event) {
|
||
this.textCount = event.detail.value.length
|
||
},
|
||
selectTag(tag) {
|
||
if (this.detailSuggestion.SUGGESTION_ID) {
|
||
return
|
||
}
|
||
|
||
let index = this.selectTags.indexOf(tag.FIELDENUM_VALUE)
|
||
if (index !== -1) {
|
||
this.selectTags.splice(index, 1)
|
||
} else {
|
||
this.selectTags.push(tag.FIELDENUM_VALUE)
|
||
}
|
||
|
||
tag.ischecked = tag.ischecked !== undefined ? !tag.ischecked : true
|
||
|
||
console.log('tagListtagList', this.tagList);
|
||
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.feedback-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #E8F5E8 0%, #F8F9FA 50%, #FFFFFF 100%);
|
||
position: relative;
|
||
}
|
||
|
||
.mainTop {
|
||
width: 100%;
|
||
background-color: #f8f8f8;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 999;
|
||
|
||
.pageTitle {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
/* 头部区域 */
|
||
.header-section {
|
||
position: relative;
|
||
height: 400rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.header-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 50%, rgba(21, 128, 61, 0.9) 100%);
|
||
}
|
||
|
||
.header-pattern {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 2rpx, transparent 2rpx),
|
||
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 1rpx, transparent 1rpx);
|
||
background-size: 80rpx 80rpx, 120rpx 120rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.header-content {
|
||
position: relative;
|
||
z-index: 3;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 100%;
|
||
color: white;
|
||
padding: 30rpx 0 70rpx;
|
||
box-sizing: border-box;
|
||
// padding-top: 60rpx;
|
||
|
||
.service-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(10rpx);
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 40rpx;
|
||
margin-bottom: 16rpx;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
||
|
||
.badge-icon {
|
||
font-size: 28rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.badge-text {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
}
|
||
|
||
.header-main-title {
|
||
font-size: 48rpx;
|
||
font-weight: 800;
|
||
margin-bottom: 8rpx;
|
||
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
||
letter-spacing: 2rpx;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.header-subtitle {
|
||
font-size: 28rpx;
|
||
opacity: 0.9;
|
||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||
// margin-bottom: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.header-notice {
|
||
max-width: 600rpx;
|
||
|
||
.notice-text {
|
||
font-size: 20rpx;
|
||
opacity: 0.75;
|
||
line-height: 1.4;
|
||
text-align: center;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 主要内容区域 */
|
||
.main-content {
|
||
position: relative;
|
||
z-index: 3;
|
||
margin-top: -60rpx;
|
||
padding: 0 24rpx 40rpx;
|
||
}
|
||
|
||
/* 卡片样式 */
|
||
.form-card {
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(34, 197, 94, 0.15);
|
||
overflow: hidden;
|
||
border: 1rpx solid rgba(34, 197, 94, 0.1);
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border-bottom: 2rpx solid #f0fdf4;
|
||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, rgba(22, 163, 74, 0.03) 100%);
|
||
|
||
.card-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #15803d;
|
||
}
|
||
|
||
.card-icon {
|
||
font-size: 36rpx;
|
||
opacity: 0.7;
|
||
color: #22c55e;
|
||
}
|
||
}
|
||
|
||
/* 表单项样式 */
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28rpx 32rpx;
|
||
border-bottom: 2rpx solid #f8f9fa;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:active {
|
||
background-color: #f8f9fa;
|
||
}
|
||
}
|
||
|
||
.form-label {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 200rpx;
|
||
|
||
.label-icon {
|
||
font-size: 28rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.label-text {
|
||
font-size: 24rpx;
|
||
color: #34495e;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.form-input-wrapper {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.form-input {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 24rpx;
|
||
color: #2c3e50;
|
||
text-align: right;
|
||
border: none;
|
||
background: transparent;
|
||
|
||
&::placeholder {
|
||
color: #bdc3c7;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.form-value {
|
||
color: #2c3e50;
|
||
font-size: 24rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.arrow-icon {
|
||
color: #bdc3c7;
|
||
font-size: 36rpx;
|
||
font-weight: 300;
|
||
}
|
||
|
||
/* 标签区域 */
|
||
.tag-section {
|
||
padding: 0 32rpx 24rpx;
|
||
|
||
&:last-child {
|
||
padding-bottom: 32rpx;
|
||
}
|
||
}
|
||
|
||
.tag-category {
|
||
font-size: 28rpx;
|
||
color: #5d6d7e;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tag-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.tag-item {
|
||
padding: 16rpx 24rpx;
|
||
background: #ecf0f1;
|
||
color: #5d6d7e;
|
||
border-radius: 40rpx;
|
||
font-size: 24rpx;
|
||
border: 2rpx solid transparent;
|
||
|
||
&.tag-active {
|
||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||
color: #ffffff;
|
||
border-color: #22c55e;
|
||
box-shadow: 0 4rpx 12rpx rgba(34, 197, 94, 0.3);
|
||
}
|
||
}
|
||
|
||
/* 文本域样式 */
|
||
.textarea-wrapper {
|
||
padding: 24rpx 32rpx;
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 200rpx;
|
||
padding: 24rpx;
|
||
border: 2rpx solid #ecf0f1;
|
||
border-radius: 16rpx;
|
||
font-size: 24rpx;
|
||
color: #2c3e50;
|
||
line-height: 1.6;
|
||
background: #fafbfc;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
|
||
&:focus {
|
||
border-color: #22c55e;
|
||
background: #ffffff;
|
||
outline: none;
|
||
box-shadow: 0 0 0 6rpx rgba(34, 197, 94, 0.1);
|
||
}
|
||
|
||
&::placeholder {
|
||
color: #bdc3c7;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
&.textarea-filled {
|
||
background: #ffffff;
|
||
border-color: #22c55e;
|
||
}
|
||
}
|
||
|
||
/* 图片上传区域 */
|
||
.upload-section {
|
||
padding: 24rpx 32rpx 32rpx;
|
||
}
|
||
|
||
.upload-title {
|
||
font-size: 26rpx;
|
||
color: #5d6d7e;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.upload-notice {
|
||
font-size: 24rpx;
|
||
color: red;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.upload-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.uploaded-image {
|
||
position: relative;
|
||
// width: 160rpx;
|
||
width: calc((100vw - 160rpx) / 3);
|
||
height: calc((100vw - 160rpx) / 3);
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.delete-btn {
|
||
position: absolute;
|
||
top: -8rpx;
|
||
right: -8rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: #e74c3c;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(231, 76, 60, 0.3);
|
||
|
||
.delete-icon {
|
||
color: white;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-btn {
|
||
// width: 160rpx;
|
||
// height: 160rpx;
|
||
width: calc((100vw - 160rpx) / 3);
|
||
height: calc((100vw - 160rpx) / 3);
|
||
border: 4rpx dashed #bdc3c7;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fafbfc;
|
||
|
||
&:active {
|
||
background: #ecf0f1;
|
||
border-color: #95a5a6;
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 48rpx;
|
||
margin-bottom: 8rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 22rpx;
|
||
color: #7f8c8d;
|
||
}
|
||
}
|
||
|
||
/* 提交按钮区域 */
|
||
.submit-section {
|
||
padding: 40rpx 24rpx 60rpx;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
background: linear-gradient(135deg, #bdc3c7, #95a5a6);
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(149, 165, 166, 0.3);
|
||
|
||
&.submit-active {
|
||
background: linear-gradient(270deg, #16a34a 0%, #22c55e 100%);
|
||
box-shadow: 0 8rpx 24rpx rgba(34, 197, 94, 0.4);
|
||
|
||
&:active {
|
||
transform: translateY(2rpx);
|
||
box-shadow: 0 4rpx 16rpx rgba(34, 197, 94, 0.4);
|
||
}
|
||
}
|
||
|
||
.submit-text {
|
||
color: white;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
/* 字数统计样式 */
|
||
.text-count {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 12rpx 24rpx 0;
|
||
|
||
.count-text {
|
||
font-size: 22rpx;
|
||
color: #7f8c8d;
|
||
|
||
&.count-warning {
|
||
color: #f39c12;
|
||
}
|
||
|
||
&.count-error {
|
||
color: #e74c3c;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 响应式适配 */
|
||
@media (max-width: 320px) {
|
||
.form-card {
|
||
margin: 0 16rpx 24rpx;
|
||
}
|
||
|
||
.submit-section {
|
||
padding-left: 16rpx;
|
||
padding-right: 16rpx;
|
||
}
|
||
}
|
||
</style>
|