老白干小程序
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.

531 lines
14 KiB

2 years ago
<template>
<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">
事故发生地
<text class="chel_t_s">(必填)</text>
</view>
<view class="sug_r">
<view @click="getLocation()" class="sug_dwei">当前位置</view>
</view>
</view>
<view>
<input type="text" @input="inputVerify" name="address" :value="address" placeholder="手动输入" class="ipt_sug" />
</view>
</view>
<view class="sug_form_line">
<view class="sug_dly_flex">
<view class="sug_sgu">
投诉对象
<text class="chel_t_s">(必填)</text>
</view>
<!-- <view class="sug_r">
<view class="obj_type">
<text class="cue">商家</text><text>旅行社</text><text>导游</text><text>其他</text>
</view>
</view> -->
</view>
<view>
<input type="text" @input="inputVerify" name="ctype" placeholder="您要投诉谁" class="ipt_sug" />
</view>
</view>
<view class="sug_form_line">
<view class="sug_dly_flex">
<view class="sug_sgu">
投诉原因
<text class="chel_t_s">(必填)</text>
</view>
<view class="sug_r">
<!-- <view class="">
<text class="chel_t_s">0/500</text>
</view> -->
</view>
</view>
<view>
<textarea name="creason" @input="inputVerify" class="ipt_sug" auto-height placeholder="输入投诉的具体事由" />
</view>
</view>
2 years ago
<view class="sug_form_line">
<view class="sug_dly_flex">
<view class="sug_sgu">
投诉类型
<text class="chel_t_s">(必填)</text>
</view>
</view>
<view style="margin-top: 20rpx;">
<input v-show="false" v-model="suggestType" type="text" name="suggestType" placeholder="投诉类型" class="ipt_sug" />
2 years ago
<uni-data-select
class='select-l'
:localdata="range"
@change="change"
:clear='false'
></uni-data-select>
</view>
</view>
2 years ago
<view class="sug_form_line">
<view class="sug_dly_flex">
<view class="sug_sgu">上传证据</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="../../static/images/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="../../static/images/icn_xji.png" class="kou_top" mode="aspectFill"></image>
</view>
</view>
<!-- 上传后自带删除按钮 -->
<!-- <view class="w_33">
<view class="fm_img_2">
<image src="" class="sug_img" mode="aspectFill"></image> -->
<!-- 删除图片按钮 -->
<!-- <view class="btn_del_sug"><image src="../../static/images/del_2.png" mode="aspectFill" class="kou_top3"></image></view>
</view>
</view> -->
<!-- <view class="w_33">
<view class="fm_img_2">
<image src="" class="sug_img" mode="aspectFill"></image>
<view class="btn_del_sug"><image src="../../static/images/del_2.png" mode="aspectFill" class="kou_top3"></image></view>
</view>
</view>
<view class="w_33">
<view class="fm_img_2">
<image src="" class="sug_img" mode="aspectFill"></image>
<view class="btn_del_sug"><image src="../../static/images/del_2.png" mode="aspectFill" class="kou_top3"></image></view>
</view>
</view>
<view class="w_33">
<view class="fm_img_2">
<image src="" class="sug_img" mode="aspectFill"></image>
<view class="btn_del_sug"><image src="../../static/images/del_2.png" mode="aspectFill" class="kou_top3"></image></view>
</view>
</view> -->
</view>
</view>
</view>
<view class="mode_com">
<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">
<input type="text" name="lineuser" @input="inputVerify" :value="lineuser" placeholder="请输入姓名" class="ipt_sug" />
<!-- <view class="btn_del_sug"><image src="../../static/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">
<input type="number" name="linemobile" placeholder="请输入手机号码" class="ipt_sug" />
<!-- <view class="btn_baoh_sug"><image src="../../static/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>
</template>
<script>
import aes from '@/common/aes.js';
export default {
data() {
return {
pics: [],
imgUrl: this.$config.ROOTPATH,
latitude: this.$param.clat,
longitude: this.$param.clng,
address: '',
2 years ago
lineuser: '',
range: [
],
suggestType:''
2 years ago
};
},
onShow() {
this.getIdCardType()
},
methods: {
2 years ago
change(e) {
const this_ = this
this_.suggestType = e
},
2 years ago
getIdCardType: function () {
2 years ago
const datas = {
2 years ago
userkey: this.$param.userkey,
2 years ago
// userkey: aes.aesMinEncrypt(this.$param.userkey),
2 years ago
dicnum: this.$param.suggestType
2 years ago
// dicnum: aes.aesMinEncrypt(this.$param.suggestType)
2 years ago
};
2 years ago
// uni.request({
// url:this.$config.getDicByDicnum,
// data:datas,
// method:'post',
// header:{
// "Content-Type":"multipart/form-data"
// },
// success: function (res) {
// console.log(res);
2 years ago
2 years ago
// },
// fail: function (err) {
// console.log(err); //App.json中默认超时时间为60秒
2 years ago
// }
// });
2 years ago
this.$Request.post(this.$config.getDicByDicnum, datas).then((res) => {
console.log(res,'投诉类型')
if (this.$util.isSuccess(res)) {
var data = res.data;
const arr = []
data.forEach(item=>{
const obj = {
value:item.dicnum,
text:item.dicname
}
arr.push(obj)
})
this.range = arr;
2 years ago
}
});
2 years ago
},
inputVerify: function (e) {
var value = e.detail.value;
if (value == '') {
return;
}
},
formSubmit: function (e) {
var that = this;
console.log(that.suggestType,'ppp')
2 years ago
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{
// debugger
// if(!e.detail.value.address.match("/^[0-9,.]+$/")){
// uni.showModal({
// title: '温馨提示',
// content: '请正确输入发生地',
// })
// return;
// }
// }
if (e.detail.value.ctype.length == 0) {
uni.showModal({
title: '温馨提示',
content: '请填写投诉对象'
});
return false;
}
// else{
// debugger
// 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{
// debugger
// 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{
// debugger
// if(!e.detail.value.lineuser.match("^[a-zA-Z0-9_\u4e00-\u9fa5]+$")){
// uni.showModal({
// title: '温馨提示',
// content: '请正确输入联系人',
// })
// return;
// }
// }
if (this.suggestTyp==''||this.suggestType==undefined||this.suggestType==null) {
2 years ago
uni.showModal({
title: '温馨提示',
content: '请选择投诉类型'
});
return false;
}
2 years ago
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,
2 years ago
lng:e.detail.value.address.split(',')[0],
lat:e.detail.value.address.split(',')[1],
2 years ago
ctype: e.detail.value.ctype,
linemobile: e.detail.value.linemobile,
lineuser: e.detail.value.lineuser,
suggestType:e.detail.value.suggestType,
2 years ago
filePath: filePath,
unionid:uni.getStorageSync("unionid"),
2 years ago
// unionid: 'unionIdewrqrfb',
userkey: that.$param.userkey
};
2 years ago
console.log(data)
2 years ago
this.$Request.post(this.$config.addFeedback, data).then((res) => {
if (res.status == 200) {
uni.showModal({
title: '提示',
content: '提交成功',
showCancel: false,
success() {
uni.navigateBack({
delta: 1
})
2 years ago
}
});
} 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';
}
}
switch (uni.getSystemInfoSync().platform) {
case 'android':
console.log('运行Android上');
this.$util.bindGpsObj(that);
Android.gotoDetial('ImageFrom', 'camera');
Android.gotoDetial('SVGLINE', url);
break;
case 'ios':
console.log('运行iOS上');
this.$util.bindGpsObj(that);
window.location.href = 'https://www.baidu.com?url=svg&value=' + url;
break;
default:
break;
}
});
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', 'camera'], // 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);
},
getLocation: function () {
var that = this;
uni.showLoading({
title: '定位中',
mask: true
});
uni.getLocation({
type: 'gcj02',
altitude: true,
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
that.address = res.longitude + ',' + res.latitude;
uni.hideLoading();
}
});
},
callGpsSuccess: function (lat, lng) {
var that = this;
var data = {
lat: lat,
lng: lng,
poi: '0',
key: 'Z2IBZ-6BRKG-Z52QT-IU3J2-6P3QO-WIBII'
};
that.$Request.post(that.$config.getAddressByLatLng, data).then((res) => {
if (res.status == 0) {
that.address = res.result.address;
}
});
uni.hideLoading();
},
callGpsFail: function () {
var that = this;
var data = {
lat: this.$param.lat,
lng: this.$param.lng,
poi: '0',
key: 'Z2IBZ-6BRKG-Z52QT-IU3J2-6P3QO-WIBII'
};
that.$Request.post(that.$config.getAddressByLatLng, data).then((res) => {
if (res.status == 0) {
that.address = res.result.address;
}
});
uni.hideLoading();
}
}
};
</script>
<style>
@import url('/static/css/common.css');
2 years ago
.select-l{
}
2 years ago
</style>