<template>
|
<view class="form">
|
<view class="form_list">
|
<view class="form_item">
|
<view class="form_item_label">车辆编号<text>*</text></view>
|
<input type="text" disabled v-model="from.code" placeholder-class="placeholder" placeholder="点击手动输入" />
|
</view>
|
</view>
|
<view class="form_list">
|
<view class="form_item">
|
<view class="form_item_label">车辆位置</view>
|
<view class="form_item_nr" @click="authVerification">
|
<text :style="{color: from.address ? '#000' : ''}">{{from.address ? from.address : '点击获取定位'}}</text>
|
<image src="@/static/icon/ar_detail@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="form_item">
|
<view class="form_item_label">车辆问题<text>*</text></view>
|
<view class="form_item_nr" @click="show = true">
|
<text :style="{ color: from.problemName ? '#000000' : '' }">{{from.problemName ? from.problemName : '请选择'}}</text>
|
<image src="@/static/icon/ar_detail@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="form_item">
|
<view class="form_item_label">现场情况</view>
|
<view class="form_item_uplaod">
|
<view class="form_item_uplaod_list">
|
<image class="uploadImg" @click="uploadImg" src="@/static/icon/ic_upload@2x.png" mode="widthFix"></image>
|
<view class="form_item_uplaod_list_item" v-for="(item, index) in from.files" :key="index">
|
<view class="images">
|
<image class="img" :src="item.url" mode="widthFix"></image>
|
</view>
|
<image class="close" @click="dele(index)" src="@/static/icon/ic_clean@2x1.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<textarea v-model="from.info" placeholder="请详细描述现场情况，不少于10个字"></textarea>
|
</view>
|
</view>
|
</view>
|
<view class="form_list">
|
<view class="form_item">
|
<view class="form_item_label">联系人</view>
|
<input type="text" v-model="from.contacts" placeholder-class="placeholder" placeholder="请输入联系人名称" />
|
</view>
|
<view class="form_item">
|
<view class="form_item_label">联系电话</view>
|
<input type="number" v-model="from.phone" maxlength="11" placeholder-class="placeholder" placeholder="请输入联系方式" />
|
</view>
|
</view>
|
<view class="form_footer">
|
<view class="form_footer_kf" @click="calling">
|
<image src="@/static/icon/ic_kefu@2x.png" mode="widthFix"></image>
|
<text>客服</text>
|
</view>
|
<view class="form_footer_tj" @click="submit">
|
<text>提交</text>
|
</view>
|
</view>
|
<view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
|
<u-popup :show="show" mode="bottom" :round="30" @close="show = false">
|
<view class="select">
|
<view class="select_head">
|
车辆问题
|
</view>
|
<scroll-view class="select_list" scroll-y>
|
<view class="select_list_item" v-for="(item, index) in problemList" :key="index" @click="clickItem(item)">
|
<text>{{ item.name }}</text>
|
<image src="@/static/icon/ic_select@2x.png" mode="widthFix" v-if="!item.active"></image>
|
<image src="@/static/icon/ic_selected@2x.png" mode="widthFix" v-else></image>
|
</view>
|
</scroll-view>
|
<view class="select_footer" @click="submitProblem">确定</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
data() {
|
return {
|
show: false,
|
latitude: '',
|
longitude: '',
|
phone: '',
|
binkeId: '',
|
from: {
|
code: '',
|
address: '',
|
latitude: '',
|
longitude: '',
|
problemName: '',
|
problemId: '',
|
files: [],
|
info: '',
|
contacts: '',
|
phone: '',
|
typeId: ''
|
},
|
problemList: []
|
};
|
},
|
computed: {
|
...mapState(['userInfo'])
|
},
|
onLoad(option) {
|
this.from.code = option.code
|
this.getAddress()
|
this.getProblem()
|
this.getHomeInfo()
|
this.getDevice()
|
},
|
onReady() {
|
this.from.phone = this.userInfo.mobile
|
},
|
methods: {
|
// 获取骑行中的车辆
|
getDevice() {
|
this.$u.api.onlineBike()
|
.then(res => {
|
if (res.code === 200) {
|
this.binkeId = res.data.bikeCode
|
this.from.typeId = res.data.paramId
|
}
|
})
|
},
|
// 提交
|
submit() {
|
if (this.from.problemId == '') {
|
uni.showToast({ title: '车辆问题不能为空', icon: 'none', duration: 2000 });
|
return
|
}
|
this.$u.api.saveRepair({
|
addr: this.from.address,
|
bikeCode: this.from.code,
|
binkeId: this.binkeId,
|
content: this.from.info,
|
fileUrlList: this.from.files.map(item => item.imgaddr),
|
latitude: this.from.latitude,
|
linkname: this.from.contacts,
|
linkphone: this.from.phone,
|
longitude: this.from.longitude,
|
param: this.from.problemName,
|
paramId: this.from.problemId,
|
typeId: this.from.typeId
|
}).then(res => {
|
if (res.code === 200) {
|
uni.showToast({ title: '上报成功', icon: 'success', duration: 2000 });
|
setTimeout(() => {
|
uni.navigateBack({ delta: 1 });
|
}, 2000)
|
}
|
})
|
},
|
// 拨打电话
|
calling(mobile) {
|
uni.makePhoneCall({
|
phoneNumber: this.phone,
|
success() {
|
|
},
|
fail() {
|
|
}
|
});
|
},
|
// 获取首页信息
|
getHomeInfo() {
|
this.$u.api.home()
|
.then(res => {
|
if (res.code === 200) {
|
this.phone = res.data.serverPhone
|
}
|
})
|
},
|
dele(index) {
|
this.from.files.splice(index, 1)
|
},
|
// 上传
|
uploadImg() {
|
uni.chooseImage({
|
success: (res) => {
|
uni.showLoading({ title: '上传中' })
|
res.tempFilePaths.forEach((item, index) => {
|
uni.uploadFile({
|
url: this.$baseUrl + 'public/uploadLocal',
|
filePath: item,
|
name: 'file',
|
formData: {
|
folder: 'repair'
|
},
|
success: (res1) => {
|
let data = JSON.parse(JSON.parse(JSON.stringify(res1)).data)
|
this.from.files.push(data.data)
|
if (index + 1 === res.tempFilePaths.length) {
|
uni.hideLoading();
|
uni.showToast({ title: '上传成功', icon: 'success', duration: 1000 })
|
}
|
},
|
fail: (err) => {
|
uni.hideLoading();
|
uni.showModal({ content: err.errMsg, showCancel: false });
|
},
|
});
|
})
|
},
|
fail: (err) => {
|
console.log('chooseImage fail', err)
|
}
|
})
|
},
|
submitProblem() {
|
let text = []
|
let ids = []
|
this.problemList.forEach(item => {
|
if (item.active) {
|
text.push(item.name)
|
ids.push(item.id)
|
}
|
})
|
this.from.problemName = text.join('；')
|
this.from.problemId = ids.join(',')
|
this.show = false
|
},
|
clickItem(item) {
|
this.problemList.forEach(row => {
|
if (item.id === row.id) {
|
row.active = !row.active
|
}
|
})
|
},
|
// 获取车辆问题
|
getProblem() {
|
this.$u.api.baseParamList({ type: 0 })
|
.then(res => {
|
if (res.code === 200) {
|
res.data.forEach(item => {
|
item.active = false
|
})
|
console.log(res.data)
|
this.problemList = res.data
|
}
|
})
|
},
|
// 获取经纬度
|
getAddress() {
|
let that = this;
|
// 1、判断手机定位服务【GPS】 是否授权
|
uni.getSystemInfo({
|
success(res) {
|
let locationEnabled = res.locationEnabled; // 判断手机定位服务是否开启
|
let locationAuthorized = res.locationAuthorized; // 判断定位服务是否允许微信授权
|
if (locationEnabled == false || locationAuthorized == false) {
|
//手机定位服务（GPS）未授权
|
uni.showToast({ title: "请打开手机GPS", icon: "none" });
|
} else {
|
// 2、判断微信小程序是否授权位置信息
|
uni.authorize({
|
//授权请求窗口
|
scope: "scope.userLocation",
|
success: (res) => {
|
that.fnGetlocation();
|
},
|
fail: (err) => {
|
err = err["errMsg"];
|
uni.showModal({ content: "需要授权位置信息", confirmText: "确认授权" })
|
.then((res) => {
|
if (res.confirm) {
|
uni.openSetting({
|
success: (res) => {
|
if (res.authSetting["scope.userLocation"]) {
|
// 授权成功
|
uni.showToast({ title: "授权成功", icon: "none" });
|
that.fnGetlocation();
|
} else {
|
// 未授权
|
uni.showToast({ title: "授权失败,请重新授权", icon: "none" });
|
uni.showModal({
|
title: "授权",
|
content: "获取授权" + authouName + "失败,是否前往授权设置？",
|
success: function(result) {
|
if (result.confirm) {
|
uni.openSetting();
|
}
|
},
|
fail: function() {
|
uni.showToast({ title: "系统错误！", icon: "none" });
|
}
|
});
|
}
|
}
|
});
|
}
|
if (res.cancel) {
|
// 取消授权
|
uni.showToast({ title: "你拒绝了授权，无法获得周边信息", icon: "none" });
|
}
|
});
|
},
|
complete(res) {
|
if (res.errMsg == "authorize:ok") {
|
that.fnGetlocation();
|
} else {
|
uni.showModal({
|
title: "授权",
|
content: "获取授权" + authouName + "失败,是否前往授权设置？",
|
success: function(result) {
|
if (result.confirm) {
|
uni.openSetting();
|
}
|
},
|
fail: function() {
|
uni.showToast({ title: "系统错误！", icon: "none" });
|
},
|
});
|
}
|
},
|
});
|
}
|
},
|
});
|
},
|
// 定位获取
|
fnGetlocation() {
|
let that = this;
|
uni.getLocation({
|
type: "gcj02",
|
altitude: true,
|
isHighAccuracy: true,
|
success: function(res) {
|
that.latitude = res.latitude
|
that.longitude = res.longitude
|
},
|
fail(err) {
|
if (err.errMsg === "getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化") {
|
uni.showToast({ title: "请勿频繁定位", icon: "none" });
|
}
|
if (err.errMsg === "getLocation:fail auth deny") {
|
// 未授权
|
uni.showToast({ title: "无法定位，请重新获取位置信息", icon: "none" });
|
}
|
if (err.errMsg === "getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF") {
|
uni.showModal({ content: "请开启手机定位服务", showCancel: false });
|
}
|
},
|
});
|
},
|
// 判断是否授权了位置信息
|
authVerification() {
|
uni.getSetting({
|
success: (res) => {
|
if (res.authSetting['scope.userLocation']) {
|
/* 用户授权成功时走这里 */
|
this.handerChooseLocation()
|
} else if (res.authSetting['scope.userLocation'] === undefined) {
|
/* 用户未授权时走这里 */
|
this.handleOpenSetting()
|
} else {
|
/* 用户拒绝了授权后走这里 */
|
this.handleOpenSetting()
|
}
|
},
|
})
|
},
|
// 选择位置
|
handerChooseLocation() {
|
uni.chooseLocation({
|
latitude: this.latitude,
|
longitude: this.longitude,
|
success: (res) => {
|
this.from.address = res.address
|
this.from.latitude = res.latitude
|
this.from.longitude = res.longitude
|
},
|
fail: function(err) {
|
console.log('取消按钮', err)
|
}
|
})
|
},
|
handleOpenSetting() {
|
wx.openSetting({
|
success: (res) => {
|
if (res.authSetting["scope.userLocation"]) {
|
this.handerChooseLocation()
|
}
|
}
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #f7f7f7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.form {
|
width: 100%;
|
padding: 20rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
|
.select {
|
width: 100%;
|
padding: 40rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
.select_head {
|
width: 100%;
|
text-align: center;
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
.select_list {
|
width: 100%;
|
max-height: 500rpx;
|
display: flex;
|
flex-direction: column;
|
margin-top: 30rpx;
|
.select_list_item {
|
width: 100%;
|
height: 80rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
flex-shrink: 0;
|
}
|
}
|
}
|
.select_footer {
|
width: 100%;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #01B6AD;
|
border-radius: 46rpx;
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
margin-top: 40rpx;
|
}
|
}
|
|
.form_list {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
border-radius: 20rpx;
|
margin-bottom: 20rpx;
|
|
.form_item {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
border-bottom: 2rpx solid #E5E5E5;
|
padding-bottom: 30rpx;
|
margin-bottom: 30rpx;
|
|
&:last-child {
|
border: none !important;
|
margin-bottom: 0 !important;
|
padding-bottom: 0 !important;
|
}
|
|
.form_item_label {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
|
text {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FC2525;
|
}
|
}
|
|
.form_item_nr {
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
margin-top: 16rpx;
|
|
text {
|
flex: 1;
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
// overflow: hidden;
|
// text-overflow: ellipsis;
|
// white-space: nowrap;
|
}
|
|
image {
|
flex-shrink: 0;
|
width: 18rpx;
|
height: 32rpx;
|
}
|
}
|
|
.form_item_uplaod {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-top: 14rpx;
|
|
.form_item_uplaod_list {
|
display: flex;
|
align-items: center;
|
|
.uploadImg {
|
width: 150rpx;
|
height: 150rpx;
|
margin-right: 16rpx;
|
}
|
|
.form_item_uplaod_list_item {
|
width: 150rpx;
|
height: 150rpx;
|
border-radius: 16rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
margin-right: 16rpx;
|
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
|
.images {
|
width: 150rpx;
|
height: 150rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
.img {
|
height: 100%;
|
}
|
}
|
|
.close {
|
position: absolute;
|
top: -20rpx;
|
right: -20rpx;
|
width: 40rpx;
|
height: 40rpx;
|
}
|
}
|
}
|
|
textarea {
|
margin-top: 28rpx;
|
width: 100%;
|
height: 200rpx;
|
}
|
}
|
|
input {
|
width: 100%;
|
margin-top: 16rpx;
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #000000;
|
}
|
|
.placeholder {
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
|
.form_footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
|
.form_footer_kf {
|
flex: 0.5;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #FFFFFF;
|
border-radius: 46rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 12rpx;
|
}
|
|
text {
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #01B6AD;
|
}
|
}
|
|
.form_footer_tj {
|
flex: 1;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #01B6AD;
|
border-radius: 46rpx;
|
margin-left: 20rpx;
|
|
text {
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
</style>
|
