You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
711 lines
16 KiB
711 lines
16 KiB
<template>
|
|
<view class="m-content">
|
|
<view class="top-nav">
|
|
<view @click="scrollToPosition(1)" :class="['nav-item', choose == 1 ? 'active' : '']">在线{{ type == 1 ? '投诉' : '建议'
|
|
}}</view>
|
|
<view @click="scrollToPosition(2)" :class="['nav-item', choose == 2 ? 'active' : '']">电话{{ type == 1 ? '投诉' : '建议'
|
|
}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="suggest-form" v-if="choose == 1">
|
|
<view class="m-tips">
|
|
<uni-icons color="#0983FF" class="m-ico" type="notification-filled" size="13"></uni-icons>
|
|
<view>填写以下内容，请确保信息真实准确</view>
|
|
</view>
|
|
<form @submit="formSubmit">
|
|
<view class="mode_com lst_sug_unit">
|
|
<view class="sug_form_line">
|
|
<view class="sug_dly_flex">
|
|
<view class="sug_sgu who">您要{{ type == 1 ? '投诉' : '建议' }}的对象？<text class="chel_t_s"></text></view>
|
|
</view>
|
|
<view>
|
|
<input type="text" @input="inputVerify" name="ctype" :placeholder="type == 1 ? '投诉对象(必填)' : '建议对象(必填)'"
|
|
class="ipt_sug" />
|
|
</view>
|
|
</view>
|
|
<view class="sug_form_line">
|
|
<view class="sug_dly_flex">
|
|
<view class="sug_sgu eve">请告诉我们发生了什么事?<text class="chel_t_s"></text></view>
|
|
<view class="sug_r">
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<textarea name="creason" @input="inputVerify" class="ipt_sug" auto-height placeholder="输入原因（必填）" />
|
|
</view>
|
|
</view>
|
|
<view class="sug_form_line">
|
|
<view class="sug_dly_flex">
|
|
<view class="sug_sgu tu">上传证据</view>
|
|
|
|
</view>
|
|
<view class="sug_dly_flex sug_lst_img sug_fm_img">
|
|
<view class="w_33" v-for="(item, index) in pics" :key="index">
|
|
<view class="fm_img_2">
|
|
<image :src="imgUrl + item" class="sug_img" mode="aspectFill"></image>
|
|
<view @tap="delImg(index)" class="btn_del_sug">
|
|
<image src="/subPageB/static/img/del_2.png" mode="aspectFill" class="kou_top3"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 上传按钮 -->
|
|
<view @tap="beforeUpload" class="w_33">
|
|
<view class="fm_img_2">
|
|
<image src="/subPageB/static/img/icn_xji.png" class="kou_top" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sug_form_line">
|
|
<view class="sug_dly_flex">
|
|
<view class="sug_sgu where">这件事发生在哪里？<text class="chel_t_s"></text></view>
|
|
|
|
</view>
|
|
<view>
|
|
<input type="text" @input="inputVerify" name="address" :value="address" placeholder="手动输入"
|
|
class="ipt_sug" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
<view class="mode_com no-ico">
|
|
<view class="tips">
|
|
最后，我们需要了解您的个人信息，用于核实事
|
|
件以及告知您处理结果</view>
|
|
<view class="sug_form_line">
|
|
<view class="sug_dly_flex sub_lxir">
|
|
<text style="color: #ff0000;">*</text>
|
|
<view class="sug_sgu">您的姓名</view>
|
|
<view class="sug_r rr">
|
|
<input type="text" name="lineuser" @input="inputVerify" :value="lineuser" placeholder="请输入姓名"
|
|
class="ipt_sug" />
|
|
<!-- <view class="btn_del_sug"><image src="/subPageA/images/del_2.png" mode="aspectFill" class="kou_top3"></image></view> -->
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="sug_form_line">
|
|
<view class="sug_dly_flex sub_lxir">
|
|
<text style="color: #ff0000;">*</text>
|
|
<view class="sug_sgu">您的电话</view>
|
|
<view class="sug_r rr">
|
|
<input type="number" name="linemobile" placeholder="请输入手机号码" class="ipt_sug" />
|
|
<!-- <view class="btn_baoh_sug"><image src="/subPageA/images/icn_baoh.png" mode="aspectFill" class="kou_top3"></image><text>保护中</text></view> -->
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view class="blk_2"></view>
|
|
<view class="sug_fied">
|
|
<view class="mode_com sug_edit_btn">
|
|
<button type="default" form-type="submit" class="state_sub">提交</button>
|
|
</view>
|
|
</view>
|
|
</form>
|
|
</view>
|
|
<view class="call-box" v-if="choose == 2">
|
|
<!-- <view class="top">
|
|
<view class="left borders">
|
|
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/24H.png"></image>
|
|
<view class="blod-font">7*24小时</view>
|
|
<view class="text">全年无休服务</view>
|
|
</view>
|
|
<view class="left">
|
|
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/dun-call.png"></image>
|
|
<view class="blod-font">安心拨打</view>
|
|
<view class="text">电话号码加密</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="m-title">电话发起{{ type == 1 ? '投诉' : '建议' }}流程</view>
|
|
<view class="liucheng-box">
|
|
<view class="row">
|
|
<view class="row-icon tell"></view>
|
|
<view class="row-text">拨打电话</view>
|
|
</view>
|
|
<view class="row row-mini">
|
|
<view class="row-icon no"></view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row-icon ts"></view>
|
|
<view class="row-text">工作人员受理您发起的{{ type == 1 ? '投诉' : '建议' }}</view>
|
|
</view>
|
|
<view class="row row-mini">
|
|
<view class="row-icon no"></view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row-icon sl"></view>
|
|
<view class="row-text">{{ type == 1 ? '投诉' : '建议' }}问题受理</view>
|
|
</view>
|
|
<view class="row row-mini">
|
|
<view class="row-icon no"></view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row-icon fk"></view>
|
|
<view class="row-text">办结结果反馈</view>
|
|
</view>
|
|
<view class="row row-mini">
|
|
<view class="row-icon no"></view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row-icon pj"></view>
|
|
<view class="row-text">{{ type == 1 ? '投诉' : '建议' }}处理评价</view>
|
|
</view>
|
|
</view>
|
|
<view class="true-call" hover-class="scale" @click="callPhone">
|
|
<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/call.png"></image>
|
|
<view class="call-text">拨打电话{{ type == 1 ? '投诉' : '建议' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
|
|
|
|
import aes from "@/common/aes.js";
|
|
export default {
|
|
components: {
|
|
uniIcons
|
|
},
|
|
data() {
|
|
return {
|
|
type: 1,
|
|
pics: [],
|
|
imgUrl: this.$config.ROOTPATH,
|
|
latitude: this.$param.clat,
|
|
longitude: this.$param.clng,
|
|
address: "",
|
|
lineuser: "",
|
|
choose: 1,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.type = options.type
|
|
},
|
|
onReady() {
|
|
uni.setNavigationBarTitle({
|
|
title: this.type == 1?'投诉':'建议'
|
|
});
|
|
},
|
|
methods: {
|
|
|
|
scrollToPosition(val) {
|
|
this.choose = val;
|
|
},
|
|
|
|
|
|
callPhone() {
|
|
uni.makePhoneCall({
|
|
phoneNumber: '0311-83886677' //仅为示例
|
|
});
|
|
},
|
|
inputVerify: function (e) {
|
|
var value = e.detail.value
|
|
if (value == "") {
|
|
return;
|
|
}
|
|
if (!value.match("^[a-zA-Z0-9_\u4e00-\u9fa5]+$")) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "请正确输入"
|
|
})
|
|
}
|
|
},
|
|
formSubmit: function (e) {
|
|
var that = this;
|
|
var filePath = "";
|
|
if (that.pics.length > 0) {
|
|
filePath = that.pics.join(",")
|
|
}
|
|
if (e.detail.value.address.length == 0) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请填写事故发生地',
|
|
})
|
|
return false;
|
|
} else {
|
|
if (!e.detail.value.address.match("^[a-zA-Z0-9_\u4e00-\u9fa5]+$")) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请正确输入发生地',
|
|
})
|
|
return;
|
|
}
|
|
}
|
|
if (e.detail.value.ctype.length == 0) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请填写对象',
|
|
})
|
|
return false;
|
|
} else {
|
|
if (!e.detail.value.ctype.match("^[a-zA-Z0-9_\u4e00-\u9fa5]+$")) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请正确输入对象',
|
|
})
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (e.detail.value.creason.length == 0) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请填写原因',
|
|
})
|
|
return false;
|
|
} else {
|
|
if (!e.detail.value.creason.match("^[a-zA-Z0-9_\u4e00-\u9fa5]+$")) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请正确输入原因',
|
|
})
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (e.detail.value.lineuser.length == 0) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请填写联系人',
|
|
})
|
|
return false;
|
|
} else {
|
|
if (!e.detail.value.lineuser.match("^[a-zA-Z0-9_\u4e00-\u9fa5]+$")) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请正确输入联系人',
|
|
})
|
|
return;
|
|
}
|
|
}
|
|
if (!/^1\d{10}$/.test(e.detail.value.linemobile) || e.detail.value.linemobile.length == 0) {
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请填写正确的联系电话',
|
|
})
|
|
return false;
|
|
}
|
|
var data = {
|
|
address: e.detail.value.address,//地址
|
|
creason: e.detail.value.creason,//投诉原因
|
|
ctype: e.detail.value.ctype,//投诉对象或类别
|
|
linemobile: e.detail.value.linemobile,//联系电话
|
|
lineuser: e.detail.value.lineuser,//联系人
|
|
cimages: filePath,//现场图片
|
|
// lat: that.latitude,
|
|
// lng: that.longitude,
|
|
appid: uni.getStorageSync("userInfo").openid,//发布人 openid
|
|
dataType: that.type//类型1:投诉2:建议
|
|
}
|
|
this.$Request.post(this.$config.createComplaintinfo, data, "json", null, false).then(res => {
|
|
if (res.code == 0) {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "提交成功",
|
|
showCancel: false,
|
|
success() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none"
|
|
})
|
|
}
|
|
});
|
|
},
|
|
|
|
beforeUpload: function () {
|
|
var that = this;
|
|
var url = this.$config.getMessageInfoFormFilter;
|
|
var data = {
|
|
type: this.$param.svgType,
|
|
userkey: this.$param.userkey,
|
|
title: '投诉',
|
|
pageSize: 1,
|
|
sort: "2"
|
|
};
|
|
this.$Request.post(url, data).then(res => {
|
|
var data = res.data;
|
|
var url = "";
|
|
if (data.length > 0) {
|
|
url = data[0].logo;
|
|
if (url == undefined || url == null) {
|
|
url = "kong";
|
|
}
|
|
}
|
|
|
|
});
|
|
uni.showLoading({
|
|
title: "开启相机中...",
|
|
mask: true
|
|
})
|
|
setTimeout(function () {
|
|
uni.hideLoading();
|
|
that.uploadImg();
|
|
}, 500, that)
|
|
},
|
|
receiveSuccess: function (base64) {
|
|
var that = this;
|
|
var pics = that.pics;
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: "上传中"
|
|
})
|
|
var data = {
|
|
file: base64,
|
|
}
|
|
that.$Request.post(that.$config.base64Upload, data).then(res => {
|
|
if (res.status != 200) {
|
|
uni.showToast({
|
|
title: "上传失败",
|
|
icon: "none"
|
|
})
|
|
uni.hideLoading();
|
|
return;
|
|
}
|
|
var obj = res.data;
|
|
pics = pics.concat(obj.path);
|
|
that.pics = pics;
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
uploadImg: function () {
|
|
var that = this;
|
|
var pics = that.pics;
|
|
if (pics.length < 9) {
|
|
|
|
uni.chooseImage({
|
|
count: 9, // 最多可以选择的图片张数，默认9
|
|
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
|
|
sourceType: ['album'], // album 从相册选图，camera 使用相机，默认二者都有
|
|
success: function (res) {
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: "上传中"
|
|
})
|
|
var imgsrc = res.tempFilePaths;
|
|
uni.uploadFile({
|
|
url: that.$config.fileUpload,
|
|
filePath: imgsrc[0],
|
|
name: 'file',
|
|
success(res) {
|
|
if (res.statusCode != 200) {
|
|
uni.showToast({
|
|
title: "上传失败",
|
|
icon: "none"
|
|
})
|
|
uni.hideLoading();
|
|
}
|
|
var obj = JSON.parse(res.data);
|
|
var flag = that.$util.isSuccess(obj);
|
|
if (!flag) {
|
|
return;
|
|
}
|
|
obj = obj.data;
|
|
pics = pics.concat(obj.path);
|
|
that.pics = pics;
|
|
uni.hideLoading();
|
|
},
|
|
fail(res) {
|
|
uni.showToast({
|
|
title: "上传失败",
|
|
icon: "none"
|
|
})
|
|
uni.hideLoading();
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "最多上传9张",
|
|
icon: "none"
|
|
})
|
|
}
|
|
},
|
|
delImg: function (index) {
|
|
this.pics.splice(index, 1);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import url("/static/css/common.css");
|
|
|
|
.top-nav {
|
|
background-color: #F5F5F5;
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 20rpx 0 5rpx;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
position: fixed;
|
|
z-index: 9;
|
|
box-shadow: 0px 4px 12px 0px #e0e0e0;
|
|
|
|
.nav-item {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #1b1b1b;
|
|
padding-bottom: 10rpx;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "";
|
|
width: 50rpx;
|
|
height: 6rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 3rpx;
|
|
}
|
|
}
|
|
|
|
.nav-item.active::before {
|
|
background: linear-gradient(-90deg, #0983ff, #57abff);
|
|
}
|
|
}
|
|
|
|
.suggest-form {
|
|
|
|
.m-tips {
|
|
display: flex;
|
|
margin: 0 20rpx;
|
|
align-items: center;
|
|
justify-content: start;
|
|
background: #0984ff0e;
|
|
border-radius: 8rpx;
|
|
padding: 12rpx 25rpx;
|
|
color: #0983FF;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
|
|
.m-ico {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.sug_sgu {
|
|
position: relative;
|
|
padding-left: 50rpx;
|
|
|
|
&::before {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
position: absolute;
|
|
font-weight: 500;
|
|
font-size: 22rpx;
|
|
left: 0;
|
|
top: 50%;
|
|
padding: 3rpx;
|
|
transform: translateY(-50%);
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.who::before {
|
|
content: '谁';
|
|
background: linear-gradient(90deg, #FF8F57 0%, #FF5500 100%);
|
|
}
|
|
|
|
.where::before {
|
|
content: '哪';
|
|
background: linear-gradient(90deg, #57ABFF 0%, #0983FF 100%);
|
|
}
|
|
|
|
.eve::before {
|
|
content: '事';
|
|
background: linear-gradient(90deg, #57ABFF 0%, #0983FF 100%);
|
|
}
|
|
|
|
.tu::before {
|
|
content: '图';
|
|
background: linear-gradient(90deg, #57ABFF 0%, #0983FF 100%);
|
|
}
|
|
|
|
.no-ico {
|
|
margin-bottom: 40rpx;
|
|
|
|
.tips {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #1B1B1B;
|
|
}
|
|
|
|
.sug_sgu {
|
|
padding-left: 10rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.call-box {
|
|
padding-top: 100rpx;
|
|
|
|
.top {
|
|
background: #F8F9FD;
|
|
border-radius: 20rpx;
|
|
margin: 10rpx 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
|
|
|
|
.left {
|
|
width: 94.5%;
|
|
text-align: center;
|
|
padding: 50rpx 0;
|
|
|
|
image {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
|
|
.blod-font {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #1B1B1B;
|
|
margin-bottom: 17rpx;
|
|
}
|
|
|
|
.text {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.borders {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 1rpx;
|
|
height: 50%;
|
|
background: #F1F1F1;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.m-title {
|
|
margin: 20rpx 50rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #1B1B1B;
|
|
margin-top: 55rpx;
|
|
}
|
|
|
|
.liucheng-box {
|
|
margin: 0 50rpx;
|
|
|
|
.row {
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
|
|
.row-icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
margin-right: 17rpx;
|
|
background-image: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/call-bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.ts {
|
|
background-position-y: -132rpx;
|
|
}
|
|
|
|
.sl {
|
|
background-position-y: -263rpx;
|
|
}
|
|
|
|
.fk {
|
|
background-position-y: -395rpx;
|
|
}
|
|
|
|
.pj {
|
|
background-position-y: -525rpx;
|
|
}
|
|
|
|
.no {
|
|
background-position-y: -64rpx;
|
|
}
|
|
|
|
.tell {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.row-text {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.true-call {
|
|
text-align: center;
|
|
margin-top: 40rpx;
|
|
|
|
image {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
margin-bottom: 20rpx;
|
|
transition: all ease-in-out 0.3s;
|
|
}
|
|
|
|
.call-text {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #1B1B1B;
|
|
}
|
|
}
|
|
|
|
.scale {
|
|
image {
|
|
scale: 1.1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rr{
|
|
margin-left: 20rpx;
|
|
}
|
|
</style>
|
|
|