508 lines
13 KiB
Vue
508 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="form-box">
|
|||
|
|
<view class="tips">
|
|||
|
|
此投诉为本小程序自有投诉渠道，非微信官方投诉渠道。我们会在第一时间为您处理，您可以在我的投诉中查看处理进度。
|
|||
|
|
</view>
|
|||
|
|
<view class="item-box" v-if="configData">
|
|||
|
|
<view class="label"><text class="asterisk">*</text>投诉景区</view>
|
|||
|
|
<view class="code-box">
|
|||
|
|
<view class="uni-list-cell-db">
|
|||
|
|
<picker class="picker" disabled :value="scenicIndex" :range="scenicRange">
|
|||
|
|
<view class="uni-input">{{configData.scenic.scenicName}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-box">
|
|||
|
|
<view class="label"><text class="asterisk">*</text>投诉类型</view>
|
|||
|
|
<view class="code-box">
|
|||
|
|
<view class="uni-list-cell-db">
|
|||
|
|
<picker class="picker" @change="bindPickerChange" :value="typeIndex" :range="typeRange">
|
|||
|
|
<view class="uni-input" v-if="comData.type">{{typeRange[typeIndex]}}</view>
|
|||
|
|
<view class="input-placeholder" v-if="!comData.type">请选择投诉类型</view>
|
|||
|
|
<uni-icons class="icon" type="right"></uni-icons>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-box">
|
|||
|
|
<view class="label"><text class="asterisk">*</text>投诉内容</view>
|
|||
|
|
<view class="textarea-box">
|
|||
|
|
<u--textarea v-model="comData.content" placeholder="请详细填写内容，以便我们提供更好的帮助" count maxlength="500" ></u--textarea>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-box">
|
|||
|
|
<view class="label">
|
|||
|
|
上传照片
|
|||
|
|
<text class="text">（不超过5张）</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="upload-box">
|
|||
|
|
<u-upload
|
|||
|
|
:fileList="fileList"
|
|||
|
|
@afterRead="afterRead"
|
|||
|
|
@delete="deletePic"
|
|||
|
|
name="1"
|
|||
|
|
multiple
|
|||
|
|
:maxCount="5"
|
|||
|
|
:previewFullImage="true"
|
|||
|
|
@on-list-change="onListChange($event)"
|
|||
|
|
>
|
|||
|
|
<view class="sh-box">
|
|||
|
|
<image class="sh-img" src="https://common/upload-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</u-upload>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-box">
|
|||
|
|
<view class="list-item">
|
|||
|
|
<view class="label"><text class="asterisk">*</text>联系人</view>
|
|||
|
|
<input type="text" v-model="comData.linkperson" class="weui-input" placeholder-class="input-placeholder" placeholder="请输入姓名" />
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item">
|
|||
|
|
<view class="label"><text class="asterisk">*</text>联系手机</view>
|
|||
|
|
<input type="number" v-model="comData.linktel" class="weui-input" placeholder-class="input-placeholder" placeholder="请输入手机号" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn" @click="submit">提交</view>
|
|||
|
|
<uni-popup class="popupRefund" ref="popup" background-color="#fff">
|
|||
|
|
<view class="popup-content">
|
|||
|
|
<image class="bgImg" src="https://common/refundPopup.png" mode=""></image>
|
|||
|
|
<view class="con">
|
|||
|
|
<view class="title">温馨提示</view>
|
|||
|
|
<view class="text">确认提交吗？</view>
|
|||
|
|
<view class="btn-box">
|
|||
|
|
<view class="close" @click="close">我再想想</view>
|
|||
|
|
<view class="save" @click="onRefund">确认</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
<u-toast ref="uToast"></u-toast>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import _config from '../../common/http/config.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
paddingTop: 0,
|
|||
|
|
bottomHight: 0,
|
|||
|
|
styles: {},
|
|||
|
|
bgColor: '#FFF',
|
|||
|
|
menuIndex: '0',
|
|||
|
|
scenicList: [],
|
|||
|
|
scenicRange: [],
|
|||
|
|
scenicIndex: 0,
|
|||
|
|
typeList: [],
|
|||
|
|
typeRange: [],
|
|||
|
|
typeIndex: 0,
|
|||
|
|
comData: {
|
|||
|
|
scenicId: '',
|
|||
|
|
type: '',
|
|||
|
|
content: '',
|
|||
|
|
image: '',
|
|||
|
|
linkperson: '',
|
|||
|
|
linktel: ''
|
|||
|
|
},
|
|||
|
|
fileList: [],
|
|||
|
|
configData: null
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.configData = uni.getStorageSync('configData');
|
|||
|
|
this.comData.scenicId = this.$scenicId;
|
|||
|
|
this.common()
|
|||
|
|
this.paddingTop = uni.upx2px(88);
|
|||
|
|
let app = uni.getSystemInfoSync();
|
|||
|
|
this.bottomHight = app.safeAreaInsets.bottom //屏幕底部安全距离
|
|||
|
|
console.log('屏幕底部安全距离', this.bottomHight) //34
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
tabMenu (index) {
|
|||
|
|
this.menuIndex = index;
|
|||
|
|
},
|
|||
|
|
async common() {
|
|||
|
|
const params = {
|
|||
|
|
dictType: 'report_type'
|
|||
|
|
}
|
|||
|
|
let info = await this.$http.common(params)
|
|||
|
|
if (info.code === 200) {
|
|||
|
|
this.typeList = info.data
|
|||
|
|
this.typeList.forEach((e) => {
|
|||
|
|
this.typeRange.push(e.dictLabel)
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(info.msg);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
bindPickerChange(e) {
|
|||
|
|
this.typeIndex = e.detail.value
|
|||
|
|
this.comData.type = this.typeList[this.typeIndex].dictValue
|
|||
|
|
},
|
|||
|
|
// 删除图片
|
|||
|
|
deletePic(event) {
|
|||
|
|
this.fileList.splice(event.index, 1)
|
|||
|
|
},
|
|||
|
|
// 新增图片
|
|||
|
|
async afterRead(event) {
|
|||
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|||
|
|
let lists = [].concat(event.file)
|
|||
|
|
let fileListLen = this.fileList.length
|
|||
|
|
lists.map((item) => {
|
|||
|
|
this.fileList.push({
|
|||
|
|
...item,
|
|||
|
|
status: 'uploading',
|
|||
|
|
message: '上传中'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
for (let i = 0; i < lists.length; i++) {
|
|||
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|||
|
|
let item = this.fileList[fileListLen]
|
|||
|
|
this.fileList.splice(fileListLen, 1, Object.assign(item, {
|
|||
|
|
status: 'success',
|
|||
|
|
message: '',
|
|||
|
|
url: JSON.parse(result).fileName
|
|||
|
|
}))
|
|||
|
|
fileListLen++
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
uploadFilePromise(url) {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
let a = uni.uploadFile({
|
|||
|
|
url: _config.url + '/app/common/upload', // 仅为示例，非真实的接口地址
|
|||
|
|
filePath: url,
|
|||
|
|
header: { token: uni.getStorageSync("ztc_token") },
|
|||
|
|
name: 'file',
|
|||
|
|
formData: {
|
|||
|
|
user: 'test'
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
resolve(res.data)
|
|||
|
|
}, 1000)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
submit() {
|
|||
|
|
let commonReg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
|
|||
|
|
if (!this.comData.type) {
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
type: 'error',
|
|||
|
|
message: '请选择投诉类型',
|
|||
|
|
icon: false,
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.comData.content) {
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
type: 'error',
|
|||
|
|
message: '请输入投诉内容',
|
|||
|
|
icon: false,
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!this.comData.linkperson) {
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
type: 'error',
|
|||
|
|
message: '请输入姓名',
|
|||
|
|
icon: false,
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.comData.linktel) {
|
|||
|
|
if (!commonReg.test(this.comData.linktel)) {
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
type: 'error',
|
|||
|
|
message: '请输入正确的手机号码',
|
|||
|
|
icon: false,
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
} else if (!this.comData.linktel) {
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
type: 'error',
|
|||
|
|
message: '请输入手机号码',
|
|||
|
|
icon: false,
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.$refs.popup.open('center')
|
|||
|
|
},
|
|||
|
|
close() {
|
|||
|
|
this.$refs.popup.close()
|
|||
|
|
},
|
|||
|
|
async onRefund() {
|
|||
|
|
if (this.fileList.length) {
|
|||
|
|
let image = []
|
|||
|
|
this.fileList.forEach((e) => {
|
|||
|
|
image.push(e.url)
|
|||
|
|
})
|
|||
|
|
this.comData.image = image.join(',')
|
|||
|
|
}
|
|||
|
|
const params = this.comData
|
|||
|
|
let info = await this.$http.addReport(params)
|
|||
|
|
if (info.code === 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '提交成功',
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 500)
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(info.msg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.container {
|
|||
|
|
padding-bottom: 50rpx;
|
|||
|
|
.form-box {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 30rpx 27rpx;
|
|||
|
|
margin: 110rpx 32rpx 24rpx;
|
|||
|
|
.tips {
|
|||
|
|
background: rgba(250,170,44,0.1);
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 24rpx 22rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #FAAA2C;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
margin-bottom: 17rpx;
|
|||
|
|
}
|
|||
|
|
.item-box {
|
|||
|
|
border-bottom: 1rpx solid #E8E8E8;
|
|||
|
|
&:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
.label {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
.asterisk {
|
|||
|
|
color: #dd524d;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.code-box {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin: 40rpx 0 30rpx;
|
|||
|
|
.uni-list-cell-db {
|
|||
|
|
width: 100%;
|
|||
|
|
.picker {
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
.uni-input {
|
|||
|
|
flex: 1;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.input-placeholder {
|
|||
|
|
flex: 1;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.icon {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
/deep/.uniui-right {
|
|||
|
|
font-size: 34rpx !important;
|
|||
|
|
color: #999999 !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/deep/.input-placeholder {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999!important;
|
|||
|
|
}
|
|||
|
|
.uni-input {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.textarea-box {
|
|||
|
|
margin: 24rpx 0 40rpx;
|
|||
|
|
/deep/.u-textarea {
|
|||
|
|
background: #F7F8FA;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 30rpx 26rpx;
|
|||
|
|
.input-placeholder {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
.u-textarea__field {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
.u-textarea__count {
|
|||
|
|
background-color: #F7F8FA !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.upload-box {
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
/deep/.u-upload__wrap {
|
|||
|
|
.u-upload__wrap__preview {
|
|||
|
|
margin: 23rpx 58rpx 0 0;
|
|||
|
|
&:nth-child(3n) {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
.u-upload__wrap__preview__image {
|
|||
|
|
width: 172rpx !important;
|
|||
|
|
height: 172rpx !important;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.sh-box {
|
|||
|
|
width: 172rpx;
|
|||
|
|
height: 172rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin: 23rpx 0 0 0;
|
|||
|
|
background-color: #DEF4F0;
|
|||
|
|
position: relative;
|
|||
|
|
.sh-img {
|
|||
|
|
width: 52rpx;
|
|||
|
|
height: 44rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.list-box {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin: 0 32rpx;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
.list-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
height: 99rpx;
|
|||
|
|
border-bottom: 1rpx solid #E8E8E8;
|
|||
|
|
&:last-child {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
.label {
|
|||
|
|
width: 157rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
.asterisk {
|
|||
|
|
color: #dd524d;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/deep/.weui-input {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
/deep/.input-placeholder {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999!important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
width: 630rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
background: #01BE69;
|
|||
|
|
border-radius: 61rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 800;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin: 68rpx auto 0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.popupRefund {
|
|||
|
|
.popup-content {
|
|||
|
|
position: relative;
|
|||
|
|
.bgImg {
|
|||
|
|
width: 595rpx;
|
|||
|
|
height: 397rpx;
|
|||
|
|
}
|
|||
|
|
.con {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 510rpx;
|
|||
|
|
top: 64rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
.title {
|
|||
|
|
font-weight: 800;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.btn-box {
|
|||
|
|
margin-top: 90rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
.close {
|
|||
|
|
width: 236rpx;
|
|||
|
|
height: 77rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
border: 1rpx solid #666666;
|
|||
|
|
line-height: 77rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
.save {
|
|||
|
|
width: 240rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
background: #01BE69;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|