648 lines
15 KiB
Vue
648 lines
15 KiB
Vue
<!-- 发起订单 -->
|
|
<template>
|
|
<view class="content">
|
|
<view class="dil">
|
|
<view class="top-icon" @click="getback()">
|
|
<uni-icons type="left" size="18"></uni-icons>
|
|
</view>
|
|
<!-- 发起救援 头部-->
|
|
<view class="top">
|
|
<!-- 起 -->
|
|
<view class="top-box">
|
|
<view class="tb-left">
|
|
<view class="uicon" style="background:#2A96FE; ">
|
|
<text>起</text>
|
|
</view>
|
|
<view style="width: 100%;">
|
|
<view class="text1" v-show="four == ''" v-if="rescueType != 5">请选择救援地址</view>
|
|
<view class="text1" v-show="four == ''" v-if="rescueType == 5">请选择扣车地址</view>
|
|
<view class="text1" v-show="four != ''">{{province}}{{city}}{{area}}</view>
|
|
<view class="hong1" v-show="four == ''">*必填，请填写详细地址</view>
|
|
<view class="hong2" v-show="four != ''">
|
|
<input type="text" style="width: 100%;" :placeholder="four">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tb-right" @click="getmap()">
|
|
<image src="../../static/dingwei.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<!-- 终 -->
|
|
<view class="top-box" v-if="rescueType == 1" style="border-top:1px solid #EAEAEA;">
|
|
<view class="tb-left">
|
|
<view class="uicon">
|
|
<text>终</text>
|
|
</view>
|
|
<view style="width: 100%; overflow: hidden; ">
|
|
<view class="text1" v-show="four1 == ''">请选择终点地址</view>
|
|
<view class="text1" v-show="four1 != ''">{{province1}}{{city1}}{{area1}}</view>
|
|
<!-- <view class="hong1" v-show="four1 == ''">*必填，请填写详细地址</view> -->
|
|
<view class="hong2" v-show="four1 != ''">
|
|
<input type="text" :placeholder="four1">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tb-right" @click="getmap1()">
|
|
<image src="../../static/dingwei.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 填空 -->
|
|
<view class="tinput" @click="show = true" v-if="isAppointment == 1">
|
|
<view class="text1"> <text class="hong1">*</text> 预约时间</view>
|
|
<view class="you">
|
|
<text>{{rescueTime}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="tinput">
|
|
<view class="text1"> 联系人</view>
|
|
<view class="you">
|
|
<input type="text" placeholder="请输入联系人" v-model="connectionName">
|
|
</view>
|
|
</view>
|
|
<view class="tinput">
|
|
<view class="text1"> 手机号</view>
|
|
<view class="you">
|
|
<input type="text" placeholder="请输入手机号" v-model="connectionPhone">
|
|
</view>
|
|
</view>
|
|
<view class="tinput">
|
|
<view class="text1"> 车牌号</view>
|
|
<view class="you">
|
|
<input type="text" placeholder="请输入车牌号" v-model="licenseNum">
|
|
</view>
|
|
</view>
|
|
<view class="tinput" @click="shows = true" v-if="rescueType == 5">
|
|
<view class="text1"> <text class="hong1">*</text> 扣车地点</view>
|
|
<view class="you">
|
|
<text>{{kcname || ''}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="xinput">
|
|
<view class="text1"> <text class="hong1">*</text> 车辆类型</view>
|
|
<view class="xz">
|
|
<view :class="{'xlan':carzhi == index}" class="kuang" v-for="(item,index) in car" :key="index"
|
|
@click="getzhi(index,item.dictValue)">
|
|
<view class="">{{item.dictLabel}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="xinput">
|
|
<view class="text1"> <text class="hong1">*</text> 收费类型</view>
|
|
<view class="xz">
|
|
<view :class="{'xlan':maneizhi == index}" class="kuang" v-for="(item,index) in manei" :key="index"
|
|
@click="getzhi2(index,item.dictValue)">
|
|
<view class="">{{item.dictLabel}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tinput">
|
|
<view class="text1"> 现场描述</view>
|
|
<view class="you">
|
|
<input type="text" placeholder="请输入备注" v-model="rescueDetail">
|
|
</view>
|
|
</view>
|
|
<view class="tinput">
|
|
<view class="text1"> 现场图片</view>
|
|
<view class="you">
|
|
<!-- <input type="text" placeholder="请输入现场图片"> -->
|
|
<text>请上传现场图片</text>
|
|
</view>
|
|
</view>
|
|
<!-- 上传图片 -->
|
|
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
|
:maxCount="10"></u-upload>
|
|
<u-datetime-picker :show="show" v-model="value1" @confirm="confirms" @cancel="cancels"
|
|
mode="datetime"></u-datetime-picker>
|
|
|
|
|
|
<view class="anniu" @click="postadd()">
|
|
<text>发起</text>
|
|
</view>
|
|
<view style="width: 100%; height: 60px;"></view>
|
|
</view>
|
|
<u-picker :show="shows" :columns="columns" @confirm="confirmm" @cancel="cancelm" keyName="dictValue"></u-picker>
|
|
|
|
<tabBar></tabBar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabBar from '../../components/tabBar/tabBar.vue'
|
|
import request from '../../utils/request'
|
|
import config from '@/config'
|
|
import upload from '@/utils/upload.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
value1: Number(new Date()),
|
|
rescueLongitude: '',
|
|
rescueLatitude: '',
|
|
rescueLongitude: '',
|
|
rescueLatitude: '',
|
|
connectionName: '',
|
|
connectionPhone: '',
|
|
rescuePosition: '',
|
|
rescueDetail: '',
|
|
rescueSceneImage: '',
|
|
rescueType: '',
|
|
baseUrl: this.$baseUrl,
|
|
carType: 1,
|
|
feeType: 1,
|
|
licenseNum: '',
|
|
isAppointment: 0,
|
|
fileList1: [],
|
|
imageList: [],
|
|
rescueSceneImage: [],
|
|
rescueTime: '请选择约定时间',
|
|
carzhi: 0,
|
|
car: [{
|
|
text: '大',
|
|
id: 1
|
|
},
|
|
{
|
|
text: '中',
|
|
id: 2
|
|
},
|
|
{
|
|
text: '小',
|
|
id: 3
|
|
}
|
|
],
|
|
maneizhi: 1,
|
|
manei: [{
|
|
text: '现金',
|
|
id: 1
|
|
},
|
|
{
|
|
text: '签单',
|
|
id: 2
|
|
},
|
|
|
|
],
|
|
province: '',
|
|
city: '',
|
|
area: '',
|
|
four: '',
|
|
province1: '',
|
|
city1: '',
|
|
area1: '',
|
|
four1: '',
|
|
role: '',
|
|
shows: false,
|
|
kcname: '',
|
|
columns: [
|
|
|
|
],
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.rescueType = option.id
|
|
this.newtwo()
|
|
this.isAppointment = option.isAppointment
|
|
this.role = uni.getStorageSync('role')
|
|
|
|
if (this.role[0] == 'jjdd') {
|
|
this.kcdd()
|
|
}
|
|
},
|
|
components: {
|
|
tabBar,
|
|
},
|
|
methods: {
|
|
newtwo() {
|
|
request({
|
|
url: '/system/dict/data/type/fee_type',
|
|
method: 'get',
|
|
|
|
}).then((res) => {
|
|
this.manei = res.data
|
|
console.log(res);
|
|
})
|
|
request({
|
|
url: '/system/dict/data/type/rescue_car_type',
|
|
method: 'get',
|
|
|
|
}).then((res) => {
|
|
this.car = res.data
|
|
console.log(res);
|
|
})
|
|
},
|
|
kcdd() {
|
|
request({
|
|
url: '/system/rescueInfo/getKcPosition',
|
|
method: 'get',
|
|
|
|
}).then((res) => {
|
|
this.columns.push(res.data)
|
|
console.log(this.columns);
|
|
})
|
|
},
|
|
confirmm(e) {
|
|
console.log(e);
|
|
this.kcname = e.value[0].dictLabel
|
|
this.shows = false
|
|
},
|
|
cancelm() {
|
|
this.shows = false
|
|
},
|
|
|
|
confirms(e) {
|
|
console.log(e);
|
|
const timestamp = e.value
|
|
const date = new Date(timestamp);
|
|
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
|
this.rescueTime = `${year}-${month}-${day} ${hours}:${minutes}`
|
|
console.log(this.rescueTime);
|
|
this.show = false
|
|
},
|
|
cancels() {
|
|
this.show = false
|
|
},
|
|
postadd() {
|
|
this.rescueSceneImage = this.imageList.join(",")
|
|
if (typeof this.rescueTime === "number") {
|
|
|
|
console.log("是数字类型");
|
|
} else {
|
|
this.rescueTime = ''
|
|
console.log("不是数字类型");
|
|
}
|
|
if (this.isAppointment == 'undefined') {
|
|
this.isAppointment = 0
|
|
}
|
|
if (this.rescueLongitude == "" || this.rescueLatitude == "") {
|
|
uni.showToast({
|
|
title: '起点位置不能为空',
|
|
icon: 'error'
|
|
})
|
|
|
|
return
|
|
}
|
|
// if (this.connectionName == "") {
|
|
// uni.showToast({
|
|
// title: '联系人不能为空',
|
|
// icon: 'error'
|
|
// })
|
|
|
|
// return
|
|
// }
|
|
// if (this.connectionPhone == "") {
|
|
// uni.showToast({
|
|
// title: '手机号不能为空',
|
|
// icon: 'error'
|
|
// })
|
|
// return
|
|
|
|
// }
|
|
|
|
let data = {
|
|
rescueLongitude: this.rescueLongitude,
|
|
rescueLatitude: this.rescueLatitude,
|
|
destinationLongitude: this.destinationLongitude,
|
|
destinationLatitude: this.destinationLatitude,
|
|
connectionName: this.connectionName,
|
|
connectionPhone: this.connectionPhone,
|
|
rescuePosition: this.rescuePosition,
|
|
destinationInfo: this.destinationInfo,
|
|
licenseNum: this.licenseNum,
|
|
isAppointment: this.isAppointment,
|
|
rescueTime: this.rescueTime,
|
|
rescueDetail: this.rescueDetail,
|
|
rescueSceneImage: this.rescueSceneImage,
|
|
rescueType: this.rescueType,
|
|
carType: this.carType,
|
|
feeType: this.feeType,
|
|
kcPosition: this.kcname
|
|
}
|
|
request({
|
|
url: '/app/rescueInfo/add',
|
|
method: 'post',
|
|
data: data
|
|
}).then((res) => {
|
|
console.log(res);
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '提交成功'
|
|
})
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
})
|
|
}, 2000);
|
|
}
|
|
})
|
|
},
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
console.log('执行了', event);
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists = [].concat(event.file)
|
|
let fileListLen = this[`fileList${event.name}`].length
|
|
lists.map((item) => {
|
|
this[`fileList${event.name}`].push({
|
|
...item,
|
|
|
|
})
|
|
})
|
|
for (let i = 0; i < lists.length; i++) {
|
|
console.log('路径', lists[i].url);
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: result
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
uploadFilePromise(url) {
|
|
|
|
uni.compressImage({
|
|
src: url,
|
|
|
|
success: res => {
|
|
upload({
|
|
url: '/common/upload',
|
|
filePath: res.tempFilePath,
|
|
}).then((res) => {
|
|
this.imageList.push(res.fileName)
|
|
console.log(res);
|
|
})
|
|
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
// 以下为重点
|
|
// 起点经纬
|
|
getmap() {
|
|
let that = this
|
|
console.log('选择位置')
|
|
uni.chooseLocation({
|
|
success: function(res) {
|
|
console.log(res)
|
|
console.log('位置名称：' + res.name);
|
|
console.log('详细地址：' + res.address);
|
|
console.log('纬度：' + res.latitude);
|
|
console.log('经度：' + res.longitude);
|
|
that.rescueLongitude = res.longitude
|
|
that.rescueLatitude = res.latitude
|
|
|
|
that.rescuePosition = res.address
|
|
var address = res.address;
|
|
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
|
|
let addressList = address.match(reg).toString().split(",");
|
|
if (addressList[0] == '重庆市' || addressList[0] == '北京市' || addressList[0] == '天津市' ||
|
|
addressList[0] == '上海市') {
|
|
that.province = addressList[0];
|
|
that.city = '市辖区';
|
|
that.area = addressList[1];
|
|
that.four = address.replace(that.province, '').replace(that.city, '').replace(that
|
|
.area, '');
|
|
} else {
|
|
that.province = addressList[0];
|
|
that.city = addressList[1];
|
|
that.area = addressList[2];
|
|
that.four = address.replace(that.province, '').replace(that.city, '').replace(that
|
|
.area, '');
|
|
};
|
|
console.log(that.four.indexOf(res.name));
|
|
if (that.four.indexOf(res.name) < 0) {
|
|
that.four = that.four + res.name
|
|
that.rescuePosition = that.rescuePosition + res.name
|
|
}
|
|
|
|
},
|
|
fail: (err) => {
|
|
console.log(err, 'err')
|
|
},
|
|
complete(res) {
|
|
console.log(res, 'cpmplete')
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
getmap1() {
|
|
let that = this
|
|
uni.chooseLocation({
|
|
success: function(res) {
|
|
console.log('位置名称：' + res.name);
|
|
console.log('详细地址：' + res.address);
|
|
console.log('纬度：' + res.latitude);
|
|
console.log('经度：' + res.longitude);
|
|
console.log(res)
|
|
that.destinationLongitude = res.longitude
|
|
that.destinationLatitude = res.latitude
|
|
that.destinationInfo = res.address
|
|
var address = res.address;
|
|
var reg = /.+?(省|市|自治区|自治州|县|区)/g;
|
|
let addressList = address.match(reg).toString().split(",");
|
|
if (addressList[0] == '重庆市' || addressList[0] == '北京市' || addressList[0] ==
|
|
'天津市' ||
|
|
addressList[0] == '上海市') {
|
|
that.province1 = addressList[0];
|
|
that.city1 = '市辖区';
|
|
that.area1 = addressList[1];
|
|
that.four1 = address.replace(that.province, '').replace(that.city, '')
|
|
.replace(that
|
|
.area, '');
|
|
} else {
|
|
that.province1 = addressList[0];
|
|
that.city1 = addressList[1];
|
|
that.area1 = addressList[2];
|
|
that.four1 = address.replace(that.province, '').replace(that.city, '')
|
|
.replace(that
|
|
.area, '');
|
|
};
|
|
console.log(that.four1);
|
|
|
|
}
|
|
});
|
|
|
|
},
|
|
getback() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
})
|
|
},
|
|
getzhi(index, id) {
|
|
this.carType = id
|
|
this.carzhi = index
|
|
},
|
|
getzhi2(index, id) {
|
|
this.feeType = id
|
|
this.maneizhi = index
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
width: 100%;
|
|
height: calc(100vh);
|
|
background-color: #F6F6F6;
|
|
box-sizing: border-box;
|
|
padding-top: 45px;
|
|
}
|
|
|
|
.top-icon {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.dil {
|
|
box-sizing: border-box;
|
|
background-color: #F6F6F6;
|
|
padding: 0px 12px;
|
|
}
|
|
|
|
.top {
|
|
box-sizing: border-box;
|
|
padding: 0px 15px;
|
|
width: 100%;
|
|
background-color: white;
|
|
}
|
|
|
|
.top-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 20px 0px;
|
|
}
|
|
|
|
.tb-left {
|
|
height: 100%;
|
|
width: 85%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.uicon {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
color: white;
|
|
background: orangered;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.tb-right {
|
|
width: 20px;
|
|
height: 26px;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.text1 {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #363636;
|
|
}
|
|
|
|
.hong1 {
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #FF5453;
|
|
}
|
|
|
|
.hong2 {
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.tinput {
|
|
width: 100%;
|
|
display: flex;
|
|
background: white;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.xinput {
|
|
width: 100%;
|
|
background: white;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.you {
|
|
text-align: right;
|
|
}
|
|
|
|
.xz {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.kuang {
|
|
width: 38px;
|
|
height: 23px;
|
|
background: #ECECEC;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #666666;
|
|
font-size: 14px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.xlan {
|
|
background: #CDE7FF !important;
|
|
color: #1D62FF !important;
|
|
border: 1px solid #2A96FE;
|
|
}
|
|
|
|
.anniu {
|
|
width: 100%;
|
|
background: linear-gradient(105deg, #FFE3AC 0%, #F3BA60 98%);
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #542F0E;
|
|
border-radius: 4px;
|
|
margin-top: 20px;
|
|
}
|
|
</style> |